/* assets/mobile.css */

/* ===================== */
/* MOBILE-ONLY STYLES    */
/* Scope to .mobile-root (set by mobile_app.py) */
/* ===================== */
@media (max-width: 767.98px) {

  /* --- Grid behavior ---
     Default: stack columns to 100% on phones.
     Exception: allow explicit 50% columns (.col-6 or .keep-50). */
  .mobile-root .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .mobile-root .row > .col-6,
  .mobile-root .row > .keep-50 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Trim container gutters on phones */
  .mobile-root .row.g-3,
  .mobile-root .row.g-2,
  .mobile-root .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mobile-root .container,
  .mobile-root .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Plot sizing and modebar */
  .mobile-root .dash-graph { height: 60vh !important; width: 100% !important; }
  .mobile-root .js-plotly-plot { width: 100% !important; }
  .mobile-root .modebar { transform: scale(0.9); right: 6px; top: 6px; }

  /* Header row above each plot: Tools button + title */
  .mobile-root .plot-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
  }
  .mobile-root .plot-card-header .btn {
    position: relative;    /* keep above the plot canvas */
    z-index: 2;
  }

  /* Tables scroll horizontally instead of squishing */
  .mobile-root .dash-table-container,
  .mobile-root .dash-table-container .row,
  .mobile-root .table,
  .mobile-root .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  /* Side-summary tables look tighter on phones */
  .mobile-root .mobile-side-table table {
    width: 100%;
    font-size: 0.92rem;
    margin-bottom: 0;
  }
  .mobile-root .mobile-side-table th,
  .mobile-root .mobile-side-table td {
    white-space: nowrap;
    padding: .45rem .55rem;
    vertical-align: middle;
  }

  /* Segmented two-button switch */
  .mobile-root .seg-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0 12px;
  }
  .mobile-root .seg-tab { position: absolute; opacity: 0; pointer-events: none; }
  .mobile-root .seg-tab-label {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 8px; min-height: 44px;
    border: 1px solid #dee2e6; border-radius: 10px;
    background: #f8f9fa; color: #0d6efd; font-weight: 600; text-align: center; line-height: 1.1;
  }
  .mobile-root .seg-tab:checked + .seg-tab-label { background: #0d6efd; color: #fff; border-color: #0d6efd; }

  /* Small spacing tweaks */
  .mobile-root .card { margin-bottom: 12px; }
  .mobile-root .p-2 { padding: 8px !important; }
  .mobile-root .mb-3 { margin-bottom: 12px !important; }
  .mobile-root input, .mobile-root select, .mobile-root textarea { font-size: 16px; } /* avoid iOS zoom */
  .mobile-root img, .mobile-root svg { max-width: 100%; height: auto; }
  .mobile-root .navbar .navbar-brand { white-space: normal; line-height: 1.2; }
  .mobile-root h2, .mobile-root .h2 { font-size: 1.25rem; padding: 12px !important; }

  /* Screen-reader-only helper */
  .mobile-root .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* ===================== */
/*   */
/* ===================== */

/* Optional compact tabs on desktop */
@media (min-width: 768px) {
  .tabs-compact {
    display: flex; flex-wrap: wrap; gap: 8px; border-bottom: none !important; margin: 8px 0 12px;
  }
  .tabs-compact .tab {
    display: inline-flex !important; align-items: center;
    padding: 6px 10px !important; margin: 0 !important; min-height: auto !important;
    border: 1px solid #dee2e6 !important; border-radius: 10px !important;
    background: #f8f9fa !important; color: #0d6efd !important; box-shadow: none !important;
  }
  .tabs-compact .tab--selected { background: #0d6efd !important; color: #fff !important; border-color: #0d6efd !important; }
  .tabs-compact .tab > a, .tabs-compact .tab > div { padding: 0 !important; margin: 0 !important; }

  /* Right-column summary tables on desktop */
  .sidebar-table { width: 100%; }
  .sidebar-table .table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
  }
  .sidebar-table th,
  .sidebar-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding: .5rem .6rem;
  }
  .sidebar-table thead th { font-weight: 600; }
}
/* ===== Mobile only, and only inside .mobile-root ===== */
@media (max-width: 767.98px) {

  /* Make any graph block horizontally scrollable when it needs more width */
  .mobile-root .hscroll-graph {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Ensure the inner graph has a minimum width so labels never get clipped */
  .mobile-root .hscroll-graph .graph-inner {
    min-width: 900px;   /* Wide enough for grouped bar charts */
  }
  
  /* Special handling for heatmap - needs much more width */
  .mobile-root .heatmap-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-root .heatmap-scroll .graph-inner {
    min-width: 800px;  /* Give heatmap plenty of space */
  }

  /* Put two small boxes side-by-side (for Age & Sex tables) */
  .mobile-root .two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mobile-root .two-up .card,
  .mobile-root .two-up .table { width: 100%; }

  /* Compact the little summary tables so they fit comfortably */
  .mobile-root .two-up .table th,
  .mobile-root .two-up .table td {
    padding: .4rem .5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.95rem;
    vertical-align: middle;
  }
}