/**
 * responsive.css
 * Mobile and responsive styles for THCDAX
 */

/* Common responsive adjustments */
@media (max-width: 992px) {
  body {
    padding: 10px;
  }
  
  .container {
    padding: 10px;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  .chart-container-wrapper-100 {
    height: 300px; /* Smaller height on medium screens */
  }
}

/* Tablet adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 1.3rem;
  }
  
  /* Button row adjustments */
  .btn-select-row {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }
  
  /* Make the buttons stack better */
  .btn-select-row > button,
  .btn-select-row > .form-check,
  .btn-select-row > select {
    margin-bottom: 5px;
    flex: 1 1 auto;
    min-width: 120px;
  }
  
  /* Remove the auto margin on first button to maintain alignment */
  .btn-select-row > button:first-of-type {
    margin-left: 0;
  }
  
  .chart-container-wrapper-100 {
    height: 250px; /* Even smaller height on tablets */
  }
  
  /* Adjust footer layout */
  .bottom-row-3cols {
    flex-wrap: wrap;
  }
  
  .col-33 {
    flex: 0 0 100%;
    margin-bottom: 10px;
    text-align: center;
  }
  
  /* Hide less important columns */
  .mobile-hide-medium {
    display: none;
  }
}

/* Mobile phone adjustments */
@media (max-width: 576px) {
  body {
    padding: 5px;
  }
  
  .container {
    padding: 5px;
  }
  
  h1 {
    font-size: 1.2rem;
    text-align: center;
  }
  
  /* Further reduce chart height */
  .chart-container-wrapper-100 {
    height: 200px;
  }
  
  /* Stack buttons vertically on mobile */
  .btn-select-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* Adjust form elements for touch */
  .form-check-input,
  .btn,
  .form-select,
  .form-control {
    min-height: 44px; /* Recommended touch target size */
  }
  
  /* More aggressive column hiding for very small screens */
  .mobile-hide-small {
    display: none;
  }
  
  /* Make DataTables more mobile friendly */
  table.dataTable {
    font-size: 0.9rem;
  }
  
  table.dataTable td,
  table.dataTable th {
    padding: 8px 4px;
  }
  
  /* Fix table overflow */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Adjust modal sizing */
  .modal-dialog {
    margin: 0.5rem;
    max-width: none;
  }
}

/* Adjust table display on all screen sizes */
@media (max-width: 992px) {
  /* Better text wrapping in table cells */
  .table td {
    white-space: normal;
    word-break: break-word;
  }
  
  /* Optimize table headers */
  .table th {
    white-space: nowrap;
  }
  
  /* Add horizontal scrolling for tables that need it */
  .table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Make sure modals are usable */
  .modal-dialog-scrollable {
    max-height: 90vh;
  }
}

/* Optimize high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  /* Optimize image rendering for high-DPI displays */
  img {
    image-rendering: auto;
  }
}

/* Dark mode optimization for OLED screens */
@media (prefers-color-scheme: dark) {
  .optimize-oled {
    background-color: #000;
  }
}

/* Touch-specific optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Larger click targets for touch devices */
  .touch-target {
    padding: 12px;
    margin: 4px;
  }
  
  /* Different hover effect behavior on touch */
  a:hover, 
  button:hover {
    /* Don't show hover states on touch devices */
    opacity: 1 !important;
    transform: none !important;
    background-color: inherit !important;
  }
}

/* Utility classes for responsive visibility control */
.hide-xs {
  display: none !important;
}

@media (min-width: 576px) {
  .hide-xs {
    display: block !important;
  }
  .hide-sm {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-sm {
    display: block !important;
  }
  .hide-md {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .hide-md {
    display: block !important;
  }
  .hide-lg {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hide-lg {
    display: block !important;
  }
  .hide-xl {
    display: none !important;
  }
}

/* Improve print rendering */
@media print {
  body {
    font-size: 12pt;
    background: #fff !important;
    color: #000 !important;
  }
  
  .container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: #fff !important;
  }
  
  /* Hide unnecessary elements */
  .btn-select-row,
  .no-print {
    display: none !important;
  }
  
  /* Ensure table data is visible */
  .table {
    width: 100% !important;
    border-collapse: collapse;
  }
  
  .table td,
  .table th {
    border: 1px solid #000;
    padding: 5px;
    background: #fff !important;
    color: #000 !important;
  }
  
  /* Fix image printing */
  img {
    max-width: 100% !important;
  }
  
  @page {
    margin: 1cm;
  }
}