/* Mobile rules for the dashboard cluster — scoped to @media (max-width: 720px) */

@media (max-width: 720px) {

  /* ============================================================
     Dashboard panel shell
     ============================================================ */

  /* The scroll container needs horizontal overflow locked and
     consistent page gutters on phones. */
  .dashboard-panel .dash-body {
    padding: 12px;
    gap: 12px;
    overflow-x: hidden;
  }

  /* ============================================================
     Hub: snapshot KPI grid → 2 columns
     ============================================================ */

  /* Force 2-column KPI grid — auto-fit with 150px minimum already
     collapses to 1 on very narrow screens, so pin 2 cols here. */
  .dashboard-panel .dash-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* KPI cards: slightly tighter padding on phones */
  .dashboard-panel .kpi {
    padding: 12px 12px;
  }

  .dashboard-panel .kpi-v {
    font-size: 20px;
  }

  /* ============================================================
     Hub: category cards → comfortable tap targets
     ============================================================ */

  .dashboard-panel .dash-cards {
    gap: 6px;
  }

  /* Category card: stack the footer under the body on phones
     so there's always room for the stat + "Open" label. */
  .dashboard-panel .dash-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    min-height: 64px;
  }

  .dashboard-panel .dash-card .dc-body {
    /* Allow wrapping inside the body (desc may wrap) */
    flex: 1 1 calc(100% - 50px);
  }

  .dashboard-panel .dash-card .dc-desc {
    /* Let the description wrap rather than truncate on small screens */
    white-space: normal;
    font-size: 11px;
    line-height: 1.4;
  }

  .dashboard-panel .dash-card .dc-foot {
    /* Full-width footer row so stat + "Open" sit side-by-side below */
    flex: 1 1 100%;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: -2px;
  }

  .dashboard-panel .dash-section-label {
    margin: 8px 0 -4px;
  }

  /* ============================================================
     Category detail: header + back button
     ============================================================ */

  /* Back button: make it easier to tap */
  .dashboard-panel .dash-back {
    font-size: 14px;
    padding: 8px 12px 8px 6px;
  }

  /* Detail head: stack title above filter on phones */
  .dashboard-panel .dash-detail-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-panel .dash-detail-head h2 {
    font-size: 18px;
  }

  /* ============================================================
     Date-range filter: wrap cleanly, full-width date inputs
     ============================================================ */

  .dashboard-panel .dash-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  /* Segment control: stretch to fill width so all 3 buttons are big */
  .dashboard-panel .dash-filter .seg {
    width: 100%;
    display: flex;
  }

  .dashboard-panel .dash-filter .seg-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 7px 6px;
  }

  /* Date range row: full-width inputs, arrow between them */
  .dashboard-panel .dash-filter .date-range {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .dashboard-panel .dash-filter .date-range input {
    flex: 1 1 0;
    /* Prevent iOS from zooming (font-size already ≥16px from mobile.css) */
    font-size: 16px;
    min-width: 0;
    height: 36px;
  }

  .dashboard-panel .dash-filter .dash-range-label {
    font-size: 12px;
    color: var(--text-muted);
    align-self: flex-start;
  }

  /* ============================================================
     Two-column panel grid → single column (already at 860px,
     but re-assert here for the few remaining edge cases below 720px)
     ============================================================ */

  .dashboard-panel .dash-two {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ============================================================
     Bar-row labels: give the label column a bit more breathing room
     ============================================================ */

  .dashboard-panel .bar-row {
    grid-template-columns: minmax(80px, 110px) 1fr 64px;
    gap: 8px;
    font-size: 12px;
  }

  /* ============================================================
     Trend charts: let them scale with the container.
     Height is intentionally shortened on phones.
     ============================================================ */

  .dashboard-panel .trend {
    /* Allow bars to be as wide as the container dictates */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 120px;
    gap: 4px;
    /* Prevent the chart from being taller than the phone allows */
    scroll-snap-type: none;
  }

  .dashboard-panel .trend::-webkit-scrollbar { display: none; }
  .dashboard-panel .trend { scrollbar-width: none; }

  .dashboard-panel .trend-col {
    /* Minimum column width so bars are still visible */
    flex: 0 0 auto;
    min-width: 22px;
  }

  .dashboard-panel .trend.hours {
    /* Hours chart has 24 cols — allow them to stay legible */
    gap: 2px;
  }

  .dashboard-panel .trend.hours .trend-col {
    min-width: 12px;
  }

  .dashboard-panel .trend-day {
    font-size: 9px;
  }

  .dashboard-panel .trend-val {
    font-size: 9px;
  }

  /* ============================================================
     Heatmap (day × hour): horizontal scroll — never squash
     ============================================================ */

  /* Wrap the heatmap in a scroll container. The container class
     .heatmap already has overflow-x: auto in styles.css. We ensure
     horizontal scrolling is smooth and the grid is never squashed. */
  .dashboard-panel .heatmap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Minimum width keeps every cell readable */
    min-width: 0;
  }

  .dashboard-panel .heatmap::-webkit-scrollbar { display: none; }
  .dashboard-panel .heatmap { scrollbar-width: none; }

  /* Force the grid row to preserve its natural width (38px label + 24×min-18px = ~470px) */
  .dashboard-panel .heatmap .hm-row {
    min-width: 460px;
    grid-template-columns: 38px repeat(24, minmax(16px, 1fr));
    gap: 3px;
  }

  .dashboard-panel .heatmap .hm-cell {
    height: 18px;
  }

  /* ============================================================
     Data tables: horizontal scroll wrappers
     ============================================================ */

  /* The JS adds .m-scroll-x wrappers in dashboard.js.
     Ensure the tables inside don't overflow the panel. */
  .dashboard-panel .m-scroll-x {
    border-radius: 0;
    /* Visual cue that there's more to scroll */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  /* When the scroll container reaches the right edge, remove the fade */
  .dashboard-panel .m-scroll-x.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Compact table typography on phones */
  .dashboard-panel .dash-table {
    font-size: 12px;
  }

  .dashboard-panel .dash-table th {
    font-size: 10px;
    padding: 5px 8px;
    white-space: nowrap;
  }

  .dashboard-panel .dash-table td {
    padding: 7px 8px;
    white-space: nowrap;
  }

  /* ============================================================
     Staff-food table: the budget column can be long
     ============================================================ */

  .dashboard-panel .staff-food-table .budget-cell {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
  }

  /* ============================================================
     Inline info note (kitchen explanation paragraph)
     ============================================================ */

  .dashboard-panel p.muted.pad {
    font-size: 12px;
    line-height: 1.5;
  }

  /* ============================================================
     Labor: "coming soon" card
     ============================================================ */

  .dashboard-panel .labor-cost-mock {
    font-size: 13px;
  }

  .dashboard-panel .labor-cost-mock p.muted {
    font-size: 12px;
    line-height: 1.5;
  }

  /* ============================================================
     Card headers: wrap title + subtitle on narrow screens
     ============================================================ */

  .dashboard-panel .card-h {
    flex-wrap: wrap;
    gap: 4px;
  }

  .dashboard-panel .card-h h3 {
    font-size: 14px;
  }

  /* ============================================================
     Staff food block
     ============================================================ */

  .dashboard-panel .staff-food-card h3 {
    font-size: 14px;
    flex-wrap: wrap;
  }

  .dashboard-panel .staff-food-card h4 {
    font-size: 12px;
    margin: 12px 0 6px;
  }

  /* Staff food KPI grid stays 2-col */
  .dashboard-panel .staff-food-card .dash-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ============================================================
     Prevent any element inside the panel from causing
     horizontal scroll of the whole page
     ============================================================ */

  .dashboard-panel {
    overflow-x: hidden;
    max-width: 100vw;
  }

}