/* ═══════════════════════════════════════════════════════════════
   SDL Sales Intelligence — Mobile UX Layer  V43
   Targets: 390px · 430px · 768px · tablets
   RULE: Desktop (>768px) is NEVER touched by this file.
   New components (.msheet, .mfab, .mmenu) are display:none on desktop.
   ═══════════════════════════════════════════════════════════════ */

/* ── Safe-area tokens (iOS notch / home bar) ── */
:root {
  --sai-top:    env(safe-area-inset-top, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
}

/* ══════════════════════════════════════════════════════════════
   1. SIDEBAR — Full-screen slide drawer (≤768px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(88vw, 340px) !important;
    transform: translateX(-110%) !important;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 310 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: none !important;
    border-radius: 0 28px 28px 0 !important;
    box-shadow: 6px 0 48px rgba(0, 0, 0, .75) !important;
    padding-bottom: calc(20px + var(--sai-bottom)) !important;
  }
  #sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Full-screen overlay sits behind drawer */
  .sb-overlay { z-index: 295 !important; }
  .sb-overlay.active {
    display: block !important;
    background: rgba(0, 0, 0, .6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }

  /* Larger brand area */
  .sb-brand {
    padding: 20px 16px 16px !important;
    padding-top: calc(20px + var(--sai-top)) !important;
  }
  .sb-logo { width: 40px !important; height: 40px !important; }
  .sb-name { font-size: 14px !important; }
  .sb-ver  { font-size: 10px !important; }

  /* Hide desktop collapse — replaced by close gesture / X button */
  .sb-collapse { display: none !important; }

  /* Mobile close (X) button injected by mobile.js */
  .sb-mobile-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    background: var(--s4);
    border: 1px solid var(--b2);
    border-radius: 10px;
    color: var(--t2);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
  }
  .sb-mobile-close:hover { color: var(--t0); background: var(--s5); }

  /* Touch-friendly nav items */
  .sb-nav { padding: 8px 10px 16px !important; }
  .nbtn {
    min-height: 50px !important;
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    border-radius: 14px !important;
    gap: 13px !important;
  }
  .ni { font-size: 19px !important; width: 22px !important; text-align: center; flex-shrink: 0; }
  .ng {
    font-size: 9.5px !important;
    letter-spacing: .2em !important;
    padding: 16px 12px 7px !important;
    margin-top: 2px;
  }
  .ntag { font-size: 9px !important; }

  /* Footer */
  .sb-foot {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + var(--sai-bottom)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   2. HEADER — Compact topbar (≤768px)
   Layout: [hamburger 44px] [logo 34px] [title+clock flex] [overflow-btn 40px]
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #topbar {
    display: grid !important;
    grid-template-columns: 44px 34px 1fr auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 0 8px !important;
    padding: 0 10px !important;
    height: 54px !important;
    padding-top: var(--sai-top) !important;
    min-height: calc(54px + var(--sai-top)) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
  }

  .tb-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    background: none !important;
    border: none !important;
  }

  .tb-logo {
    display: block !important;
    width: 30px !important; height: 30px !important;
  }

  .tb-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .tb-page {
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    line-height: 1.2 !important;
  }

  .tb-meta { display: none !important; }

  /* On mobile, clock is shown inside .tb-info via .m-clock injected by mobile.js */
  .tb-live { display: none !important; }

  .m-clock {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    line-height: 1.2;
  }
  .m-clock-time {
    font-family: var(--nm) !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--gold2);
    white-space: nowrap;
  }
  .m-clock-date {
    font-size: 9px !important;
    color: var(--t3);
    white-space: nowrap;
  }

  /* Right side: only overflow button shown */
  .tb-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    max-width: none !important;
  }

  /* Hide all desktop tb-right buttons — moved to overflow menu */
  .tb-right .tb-btn { display: none !important; }

  /* Overflow (⋯) button injected by mobile.js */
  .m-overflow-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; height: 40px !important;
    background: var(--g1) !important;
    border: 1px solid var(--b1) !important;
    border-radius: 12px !important;
    color: var(--t1) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all .2s !important;
    letter-spacing: -.1em;
  }
  .m-overflow-btn:hover { background: var(--g3) !important; color: var(--t0) !important; }
  .m-overflow-btn:active { transform: scale(.94) !important; }
}

/* ══════════════════════════════════════════════════════════════
   3. FILTER BAR — Hidden on mobile (replaced by bottom sheet FAB)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .excel-filterbar { display: none !important; }
  .tb-filter-toggle { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   4. KPI CARDS — Touch-optimised layout
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kpi-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .kpi {
    padding: 15px 14px !important;
    border-radius: 16px !important;
    min-height: 86px !important;
  }
  .kpi-val { font-size: 24px !important; line-height: 1.1 !important; }
  .kpi-lbl { font-size: 9.5px !important; }
  .kpi-sub { font-size: 11.5px !important; margin-top: 5px !important; }
}

@media (max-width: 430px) {
  .kpi-row { grid-template-columns: 1fr !important; }
  .kpi-val { font-size: 28px !important; }
  .kpi { min-height: 78px !important; }
}

/* ══════════════════════════════════════════════════════════════
   5. GRIDS — single-column stacks
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .two-col, .three-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .two-col .card, .three-col .card { margin-bottom: 0 !important; }

  .exec-hero {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .hero-ach.finance, .hero-ach.planning,
  .hero-status, .hero-kpi-row { grid-column: 1 !important; }
  .hero-kpi-row { grid-template-columns: 1fr 1fr !important; }
  .hero-trend-card { grid-column: 1 !important; }
  .ach-pct-hero { font-size: 44px !important; }

  .team-grid  { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .buyer-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .hist-hero  { grid-template-columns: 1fr 1fr !important; }
  .upload-grid { grid-template-columns: 1fr !important; }
  .rules-grid { grid-template-columns: 1fr !important; }
  .margin-card-grid { grid-template-columns: 1fr !important; }
  .ai-v2-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 430px) {
  .team-grid  { grid-template-columns: 1fr !important; }
  .buyer-cards { grid-template-columns: 1fr !important; }
  .hero-kpi-row { grid-template-columns: 1fr !important; }
  .ach-pct-hero { font-size: 36px !important; }
  .hist-hero  { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   6. CHARTS — full-width, chart fullscreen button
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .card canvas {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }
  /* Ensure card has position:relative for the fullscreen btn */
  .card { position: relative !important; }

  /* Fullscreen expand button (injected by mobile.js) */
  .m-chart-fs-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 46px !important;   /* below card header */
    right: 10px !important;
    width: 30px !important; height: 30px !important;
    background: rgba(5, 13, 24, .72) !important;
    border: 1px solid var(--b2) !important;
    border-radius: 8px !important;
    color: var(--t3) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    z-index: 5 !important;
    transition: all .2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .m-chart-fs-btn:hover { color: var(--t0) !important; background: rgba(5,13,24,.95) !important; }

  /* Expanded card: covers screen */
  .card.m-fs-active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 460 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: calc(14px + var(--sai-top)) !important;
  }
  .card.m-fs-active canvas {
    flex: 1 !important;
    height: 60vh !important;
    max-height: 60vh !important;
  }
  /* Close button repositioned when expanded */
  .card.m-fs-active .m-chart-fs-btn {
    top: calc(12px + var(--sai-top)) !important;
    right: 14px !important;
    color: var(--t0) !important;
    background: rgba(5,13,24,.88) !important;
    border-color: var(--b3) !important;
    width: 34px !important; height: 34px !important;
    font-size: 15px !important;
  }
  /* Scrim behind expanded card */
  .m-fs-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 455;
  }
  .m-fs-scrim.active { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   7. TABLES — horizontal scroll, sticky first column, card mode
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--s5) transparent !important;
  }
  table.tbl {
    min-width: 560px !important;
    font-size: 12px !important;
  }
  table.tbl th { font-size: 9px !important; padding: 8px 10px !important; }
  table.tbl td { padding: 8px 10px !important; font-size: 12px !important; }

  /* Sticky first column */
  table.tbl th:first-child,
  table.tbl td:first-child {
    position: sticky !important;
    left: 0 !important;
    background: var(--s2) !important;
    z-index: 2 !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .25) !important;
    min-width: 100px !important;
  }

  /* Heatmap scrollable */
  #heatmapContainer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 0 !important;
  }

  /* Card-mode tables (class added by mobile.js) */
  table.m-card-tbl {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
  }
  table.m-card-tbl thead { display: none !important; }
  table.m-card-tbl tbody tr {
    display: block !important;
    background: var(--s2) !important;
    border: 1px solid var(--b1) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
  }
  table.m-card-tbl td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    border: none !important;
    padding: 4px 0 !important;
    font-size: 12.5px !important;
    min-width: 0 !important;
    position: static !important;
    background: none !important;
    box-shadow: none !important;
  }
  table.m-card-tbl td::before {
    content: attr(data-label) !important;
    font-family: var(--lb) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--t3) !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    padding-top: 2px !important;
    min-width: 80px !important;
    max-width: 110px !important;
  }
  /* Highlight first "key" cell */
  table.m-card-tbl td:first-child {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: var(--t0) !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--b0) !important;
    padding-bottom: 8px !important;
  }
  table.m-card-tbl td:first-child::before { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   8. CONTENT & CARDS
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #content {
    padding: 10px 12px !important;
    padding-bottom: calc(96px + var(--sai-bottom)) !important; /* FAB clearance */
  }
  .page { padding: 0 !important; }
  .card {
    border-radius: 18px !important;
    margin-bottom: 12px !important;
    overflow: hidden;
  }
  .card-hd { padding: 12px 15px !important; }
  .card-title { font-size: 13px !important; }

  .search-row {
    padding: 10px 13px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .search-in { flex: 1 !important; min-width: 0 !important; height: 38px !important; }
  .isel { height: 38px !important; min-width: 110px !important; }
}

/* ══════════════════════════════════════════════════════════════
   9. BOTTOM SHEET FILTER
   Always in DOM but translated off-screen. Opens on mobile only.
══════════════════════════════════════════════════════════════ */
.msheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 420;
  background: var(--s1);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--b2);
  box-shadow: 0 -12px 60px rgba(0, 0, 0, .65);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  transform: translateY(105%);
  transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  pointer-events: none;
  padding-bottom: var(--sai-bottom);
}
.msheet.open {
  transform: translateY(0);
  pointer-events: auto;
}

.msheet-handle {
  width: 44px; height: 5px;
  background: var(--s5);
  border-radius: 3px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.msheet-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 11px;
  border-bottom: 1px solid var(--b0);
  flex-shrink: 0;
}
.msheet-title {
  font-family: var(--hd);
  font-size: 18px;
  font-weight: 800;
  color: var(--t0);
}
.msheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--s4);
  border: 1px solid var(--b1);
  border-radius: 10px;
  color: var(--t2);
  font-size: 16px;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.msheet-close:hover { color: var(--t0); background: var(--s5); }

.msheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--s4) transparent;
}

.msheet-section {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--b0);
}
.msheet-section:last-child { border-bottom: none; }

.msheet-sec-lbl {
  font-family: var(--lb);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 11px;
  display: block;
}

/* Pills (Year / Month / Team) */
.msheet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.msheet-pill {
  min-height: 36px;
  padding: 7px 14px;
  background: var(--s3);
  border: 1px solid var(--b1);
  border-radius: 100px;
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.msheet-pill.active {
  background: rgba(200, 137, 58, .18);
  border-color: rgba(200, 137, 58, .5);
  color: var(--gold3);
}
.msheet-pill:active { transform: scale(.95); }

/* List (Buyer / Concern) */
.msheet-search {
  width: 100%;
  height: 40px;
  background: var(--s3);
  border: 1px solid var(--b1);
  border-radius: 12px;
  color: var(--t0);
  padding: 0 14px;
  font: inherit;
  outline: 0;
  margin-bottom: 10px;
}
.msheet-list {
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msheet-list-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.msheet-list-row:hover { background: var(--g2); }
.msheet-list-row input[type="checkbox"] {
  accent-color: var(--gold);
  width: 17px; height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}
.msheet-list-row label {
  font-size: 13px;
  color: var(--t1);
  cursor: pointer;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Goal row */
.msheet-goal-row {
  display: flex;
  gap: 8px;
}
.msheet-goal-pill {
  flex: 1;
  min-height: 44px;
  background: var(--s3);
  border: 1px solid var(--b1);
  border-radius: 14px;
  color: var(--t1);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.msheet-goal-pill.active {
  background: rgba(34, 212, 142, .14);
  border-color: rgba(34, 212, 142, .38);
  color: var(--green);
}
.msheet-goal-pill:active { transform: scale(.95); }

/* Footer with sticky Apply */
.msheet-foot {
  display: flex;
  gap: 10px;
  padding: 13px 20px;
  padding-bottom: calc(13px + var(--sai-bottom));
  border-top: 1px solid var(--b1);
  background: var(--s1);
  flex-shrink: 0;
}
.msheet-reset {
  height: 50px;
  padding: 0 20px;
  background: var(--g2);
  border: 1px solid var(--b2);
  border-radius: 14px;
  color: var(--t1);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.msheet-reset:hover { border-color: rgba(240, 72, 102, .38); color: var(--red); }
.msheet-apply {
  flex: 1;
  height: 50px;
  background: linear-gradient(135deg, rgba(200,137,58,.22), rgba(200,137,58,.14));
  border: 1px solid rgba(200, 137, 58, .45);
  border-radius: 14px;
  color: var(--gold3);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.msheet-apply:hover { background: rgba(200,137,58,.3); }
.msheet-apply:active { transform: scale(.97); }

/* Sheet scrim */
.msheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 410;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
  pointer-events: none;
}
.msheet-scrim.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════
   10. FLOATING ACTION BUTTONS (FAB)
   Visible only on ≤768px
══════════════════════════════════════════════════════════════ */
.mfab {
  display: none;
  position: fixed;
  bottom: calc(22px + var(--sai-bottom));
  right: 18px;
  z-index: 200;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .mfab { display: flex; }
}

.mfab > * { pointer-events: auto; }

/* Back-to-top button */
.mfab-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--s3);
  border: 1px solid var(--b2);
  border-radius: 14px;
  color: var(--t1);
  font-size: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: opacity .25s, transform .25s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.mfab-top:hover { color: var(--gold2); border-color: var(--gold-a30); }
.mfab-top:active { transform: scale(.92); }
.mfab-top.m-hidden {
  opacity: 0;
  transform: scale(.8) translateY(6px);
  pointer-events: none;
}

/* Filters FAB */
.mfab-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--gold), #d49940);
  border: none;
  border-radius: 16px;
  color: #0a1420;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 24px rgba(200, 137, 58, .5);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mfab-filter:hover  { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(200,137,58,.6); }
.mfab-filter:active { transform: scale(.95); }
.mfab-filter-icon   { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════
   11. OVERFLOW MENU (⋯ → dropdown)
══════════════════════════════════════════════════════════════ */
.mmenu {
  position: fixed;
  top: calc(62px + var(--sai-top));
  right: 12px;
  z-index: 350;
  background: var(--s2);
  border: 1px solid var(--b2);
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .55), 0 4px 14px rgba(0,0,0,.3);
  padding: 8px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: scale(.92) translateY(-10px);
  transform-origin: top right;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.mmenu.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.mmenu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 14px;
  background: none;
  border: none;
  border-radius: 14px;
  color: var(--t1);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  width: 100%;
}
.mmenu-item:hover { background: var(--g3); color: var(--t0); }
.mmenu-item:active { background: var(--g3); transform: scale(.97); }
.mmenu-icon { font-size: 16px; flex-shrink: 0; }
.mmenu-divider {
  height: 1px;
  background: var(--b0);
  margin: 4px 10px;
}

/* ══════════════════════════════════════════════════════════════
   12. OVERFLOW — prevent horizontal scroll
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body, #app, #main-wrap, #content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  img, canvas, .card, .kpi, .hero-ach {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Unlock natural scroll */
  html, body { overflow-x: hidden !important; overflow-y: auto !important; }
  #app { display: block !important; height: auto !important; overflow: visible !important; }
  #main-wrap { height: auto !important; overflow: visible !important; min-width: 0 !important; }
  #content { overflow: visible !important; height: auto !important; }
}

/* ══════════════════════════════════════════════════════════════
   13. TOUCH ACTIONS & ANTI-HIGHLIGHT
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nbtn, .msheet-pill, .msheet-goal-pill,
  .mfab-filter, .mfab-top,
  .msheet-apply, .msheet-reset,
  .mmenu-item, .m-overflow-btn, .sb-mobile-close {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  .msheet-body, .tbl-wrap, #heatmapContainer, .msheet-list, .sb-nav {
    touch-action: pan-y !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. TABLET RANGE (769px – 1024px) fine-tuning
══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
  .exec-hero { grid-template-columns: 1fr 1fr !important; }
  .hero-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════
   15. MISC MOBILE POLISH
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Upload cards */
  .upload-card { padding: 18px 16px !important; min-height: 110px !important; }
  .upload-title { font-size: 18px !important; }

  /* Section title rows */
  .section-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Health card */
  .health-score-card { padding: 16px !important; }

  /* PPS reliability row */
  .pps-rel { flex-direction: column !important; gap: 8px !important; }

  /* Traffic light row */
  .tlight-row { flex-wrap: wrap !important; gap: 8px !important; }

  /* Annual rings */
  .annual-ring-row { flex-wrap: wrap !important; gap: 12px !important; }
  .ann-ring { min-width: 130px !important; }

  /* Executive hero movement tiles */
  .exec-mvt-tiles { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Concern grid */
  .concern-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Toast */
  #toast { max-width: calc(100vw - 24px) !important; bottom: calc(80px + var(--sai-bottom)) !important; }
}

@media (max-width: 390px) {
  .concern-grid { grid-template-columns: 1fr !important; }
  .exec-mvt-tiles { grid-template-columns: 1fr !important; }
}