/* Mobile-Optimized Sleep Dashboard Styles */

/* Compact mobile layout */
@media (max-width: 768px) {
  .container-xl {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* Compact header */
  .navbar {
    padding: 0.5rem 0 !important;
  }
  
  .navbar .container-xl {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .navbar-brand {
    font-size: 1.1rem !important;
  }
  
  /* Compact filter chips */
  .filter-chips {
    margin-bottom: 1rem !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
  }
  
  .filter-chip {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  
  /* Compact cards */
  .card {
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
  }
  
  .card-header {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e6e7e8 !important;
  }
  
  .card-title {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  /* Compact overview section */
  .sleep-overview .row > div {
    padding: 0.25rem !important;
  }
  
  .sleep-overview .text-center {
    padding: 0.5rem !important;
  }
  
  .sleep-overview .h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .sleep-overview .text-muted {
    font-size: 0.75rem !important;
  }
  
  /* Compact metric cards */
  .metric-card .card-body {
    padding: 0.75rem !important;
  }
  
  .metric-card .subheader {
    font-size: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .metric-card .h1 {
    font-size: 1.8rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .metric-card .small {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }
  
  .metric-card .btn-sm {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.7rem !important;
  }
  
  /* Single column layout for mobile */
  .row.mb-4 .col-md-6,
  .row.mb-4 .col-lg-3 {
    margin-bottom: 0.75rem !important;
  }
  
  /* Compact chart section */
  .chart-container {
    height: 200px !important;
  }
  
  .chart-container canvas {
    max-height: 200px !important;
  }
  
  /* Mobile-friendly patterns table */
  .table-responsive {
    font-size: 0.8rem !important;
  }
  
  .table td,
  .table th {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Compact chat interface */
  .chat-messages {
    height: 200px !important;
    padding: 10px !important;
    font-size: 0.85rem !important;
  }
  
  .chat-bubble {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }
  
  .input-group input {
    font-size: 0.9rem !important;
  }
  
  /* Hide less important elements on small screens */
  .card-actions .badge:not(:first-child) {
    display: none !important;
  }
  
  /* Compact badges */
  .badge {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.4rem !important;
  }
  
  /* Reduce margins */
  .mb-3 {
    margin-bottom: 0.75rem !important;
  }
  
  .mb-4 {
    margin-bottom: 1rem !important;
  }
  
  /* Compact AI insights */
  .small.text-muted {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    margin-top: 0.25rem !important;
  }
  
  /* Stack chart columns on mobile */
  .charts-row .col-md-8,
  .charts-row .col-md-4 {
    margin-bottom: 1rem !important;
  }
  
  /* Responsive table adjustments */
  .table td small {
    display: block !important;
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
  }
  
  /* Hide table period descriptions on mobile */
  .table td:first-child {
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Compact insights section */
  .card-body .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  
  .card-body strong {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }
  
  .badge.small {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.3rem !important;
  }
  
  /* Compact buttons */
  .btn {
    font-size: 0.8rem !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  .btn-sm {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
  .container-xl {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  .card-body {
    padding: 0.75rem !important;
  }
  
  .metric-card .h1 {
    font-size: 1.5rem !important;
  }
  
  .chat-messages {
    height: 150px !important;
  }
  
  /* Hide chat button text, show only icon */
  .btn-ghost-primary span {
    display: none !important;
  }
  
  /* Compact navbar for very small screens */
  .navbar-brand {
    font-size: 1rem !important;
  }
  
  #addDataBtn {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* Compact loading and error states */
@media (max-width: 768px) {
  #loading {
    margin: 1rem 0 !important;
  }
  
  #loading .spinner-border {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  .alert {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.85rem !important;
  }
}

/* Compact placeholder styles */
.placeholder {
  background-color: #e9ecef !important;
  border-radius: 0.25rem !important;
}

.placeholder-xs {
  height: 0.75rem !important;
  margin-bottom: 0.25rem !important;
}

/* Mobile touch optimization */
@media (max-width: 768px) {
  /* Larger touch targets */
  .btn-ghost-primary {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0.25rem !important;
  }
  
  /* Better tap targets for filter chips */
  .filter-chip {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    touch-action: manipulation !important;
  }
  
  /* Optimize input controls */
  .form-control {
    font-size: 16px !important; /* Prevent zoom on iOS */
    min-height: 40px !important;
  }
  
  /* Better scrolling for chat */
  .chat-messages {
    -webkit-overflow-scrolling: touch !important;
    overflow-scrolling: touch !important;
  }
  
  /* Compact modal adjustments */
  .modal-body {
    padding: 1rem 0.75rem !important;
  }
  
  .modal-header {
    padding: 0.75rem !important;
  }
  
  .modal-footer {
    padding: 0.75rem !important;
  }
}

/* Mobile-friendly icons */
@media (max-width: 768px) {
  .icon {
    width: 16px !important;
    height: 16px !important;
  }
  
  .icon-lg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .icon-sm {
    width: 12px !important;
    height: 12px !important;
  }
}