/* ==========================================================================
   UHC — Native-style MOBILE APP shell
   A phone-only presentation layer that sits on top of the existing live-data
   dashboard DOM and reorganizes it into an app format (top app bar, dark KPI
   tiles, card layout, bottom tabs). Desktop/web layout is untouched.
   Activated by mobile-app.js (adds body.m-app) only at <= 820px.
   ========================================================================== */

@media (max-width: 820px) {

  /* ---- hide all web chrome; the app bar + tab bar replace it ---- */
  body.m-app header,
  body.m-app .main-left,            /* old converted bottom nav */
  body.m-app footer,
  body.m-app #dash-freshness { display: none !important; }

  /* keep the date/range toolbar (custom date selection) but drop the web page title */
  body.m-app .main-heading { display: block !important; margin: 0 0 14px !important; }
  body.m-app .main-heading > div:first-child { display: none !important; }   /* "Executive Dashboard" title text */
  body.m-app[data-mtab="calendar"] .main-heading,
  body.m-app[data-mtab="assistant"] .main-heading { display: none !important; }
  body.m-app #dash-toolbar-host { width: 100%; display: block; }
  body.m-app #dash-toolbar-host .dash-toolbar, body.m-app .dash-toolbar {
    background: #fff !important; border: 1px solid var(--uhc-line) !important; border-radius: 12px !important;
    padding: 8px 10px !important; box-shadow: 0 6px 16px -12px rgba(16, 38, 58, .25) !important;
    flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto;
  }
  body.m-app .dash-presets { display: none !important; }   /* replaced by the dropdown */
  body.m-app .m-preset {
    flex: 0 0 92px; width: 92px; height: 34px; border: 1px solid var(--uhc-line); border-radius: 9px;
    background: #f7fafc; color: var(--uhc-ink); font-size: 12px; font-weight: 600; padding: 0 6px;
  }
  body.m-app .dash-range { display: flex; flex: 1 1 auto; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; }
  body.m-app .dash-range span { display: none; }   /* hide the "to" word to save space */
  body.m-app .dash-range input { flex: 1 1 0; min-width: 0; width: 0; height: 34px; font-size: 11px; padding: 5px 6px; text-align: center; }
  body.m-app .dash-range #dash-apply {
    flex: 0 0 auto; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600;
    background: #e6f0f9 !important; background-image: none !important; color: var(--uhc-primary-600) !important;
    border: 1px solid #cfe0ee !important; box-shadow: none !important;
  }
  body.m-app .dash-range #dash-apply:active { background: #d4e6f5 !important; }

  body.m-app { padding-top: 62px; padding-bottom: 66px; background: #eef3f9; }
  body.m-app .main-wrapper { padding-top: 0 !important; display: block; }
  body.m-app .main-right { width: 100% !important; padding: 0 !important; }
  body.m-app .main-right-cover { padding: 12px 0 !important; }
  body.m-app .container, body.m-app .container-fluid { padding-left: 14px; padding-right: 14px; }

  /* ---------- App bar ---------- */
  .m-appbar {
    position: fixed; top: 0; left: 0; right: 0; height: 62px; z-index: 1200;
    background: linear-gradient(100deg, #0c2233 0%, #154463 100%); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px;
    box-shadow: 0 2px 12px rgba(12, 34, 51, .35);
    padding-top: env(safe-area-inset-top);
  }
  .m-appbar-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .m-logo {
    height: 34px; width: auto; max-width: 78px; flex: 0 0 auto; object-fit: contain;
    background: #fff; border-radius: 9px; padding: 3px 6px;
  }
  .m-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .m-id-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .m-id-sub { font-size: 11px; color: #9fb3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

  .m-appbar-r { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
  /* mascot avatar is now the Log out button */
  .m-ava {
    position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    display: grid; place-items: center; background: linear-gradient(135deg, #115480, #2d8cff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); border: none; padding: 0; cursor: pointer;
  }
  .m-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .m-ava-fb { color: #fff; font-weight: 700; font-size: 13px; }
  .m-ava:active { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

  /* ---------- Bottom tab bar ---------- */
  .m-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
    background: #fff; border-top: 1px solid var(--uhc-line, #e6edf3);
    display: flex; box-shadow: 0 -2px 14px rgba(16, 38, 58, .08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: none; background: none; color: #8a98a6; font-size: 11px; font-weight: 600;
    padding: 9px 2px 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-tab svg { width: 23px; height: 23px; }
  .m-tab.active { color: var(--uhc-primary, #115480); }
  .m-tab.active svg { stroke: var(--uhc-primary, #115480); }

  /* ---------- Tab content groups (set by JS as data-mgroup) ---------- */
  body.m-app[data-mtab="dashboard"] #analytics-dashboard > [data-mgroup="calendar"] { display: none !important; }
  body.m-app[data-mtab="calendar"]  #analytics-dashboard > [data-mgroup="dashboard"] { display: none !important; }
  body.m-app #analytics-dashboard { display: flex; flex-direction: column; gap: 14px; }

  /* ---------- Hero "Performance score" card ---------- */
  body.m-app .kpi-health, body.m-app .kpi-health-ind {
    background: #fff; border: 1px solid var(--uhc-line); border-radius: 18px; padding: 18px 18px 16px;
    box-shadow: 0 10px 24px -16px rgba(16, 38, 58, .35);
  }
  body.m-app .kpi-health::before, body.m-app .kpi-health-ind::before,
  body.m-app .kpi-health::after, body.m-app .kpi-health-ind::after { display: none !important; }
  body.m-app .kpi-health-ind .kpi-lbl, body.m-app .kpi-health .kpi-lbl { font-size: 14px; color: var(--uhc-muted); margin-bottom: 4px; }
  body.m-app .kpi-bigscore { font-size: 50px; letter-spacing: -.03em; }
  body.m-app .kpi-view-hint { font-size: 14px; }
  body.m-app .my-perf-grid { grid-template-columns: 1fr !important; gap: 14px; }
  body.m-app .my-perf-head h3 { font-size: 18px; }

  /* ---------- Dark KPI tiles ---------- */
  body.m-app #dash-kpis { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px; }
  body.m-app #dash-kpis > .kpi-health, body.m-app #dash-kpis > .kpi-health-ind { grid-column: 1 / -1; }
  body.m-app #dash-kpis .kpi-card:not(.kpi-health):not(.kpi-health-ind) {
    background: linear-gradient(160deg, #ffffff 0%, #eaf3fb 100%);
    border: 1px solid #d8e6f2; border-radius: 16px; padding: 16px 16px 15px; color: var(--uhc-ink);
    box-shadow: 0 6px 16px -12px rgba(16, 38, 58, .25); overflow: hidden; position: relative;
  }
  /* slim colored accent on each light tile */
  body.m-app #dash-kpis .kpi-card:not(.kpi-health):not(.kpi-health-ind)::before {
    content: ''; display: block !important; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--uhc-grad, linear-gradient(180deg, #115480, #2d8cff)); border-radius: 0 3px 3px 0;
  }
  body.m-app #dash-kpis .kpi-card:not(.kpi-health):not(.kpi-health-ind)::after { display: none !important; }
  body.m-app #dash-kpis .kpi-card:not(.kpi-health):not(.kpi-health-ind) .kpi-val { color: var(--uhc-ink); font-size: 30px; }
  body.m-app #dash-kpis .kpi-card:not(.kpi-health):not(.kpi-health-ind) .kpi-lbl { color: var(--uhc-muted); font-size: 12.5px; }
  body.m-app #dash-kpis .kpi-card:not(.kpi-health):not(.kpi-health-ind) .kpi-sub { color: #9aa7b4; }
  body.m-app #dash-kpis .kpi-card.good .kpi-val { color: var(--uhc-ok); }
  body.m-app #dash-kpis .kpi-card.warn .kpi-val { color: var(--uhc-warn); }

  /* ---------- Score breakdown cards ---------- */
  body.m-app .bd-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  body.m-app .bd-card { border-radius: 14px; padding: 14px; }
  body.m-app .bd-pct { font-size: 24px; }

  /* ---------- Panels become clean mobile cards ---------- */
  body.m-app .dash-panel { border-radius: 16px; padding: 14px; box-shadow: 0 8px 20px -16px rgba(16, 38, 58, .3); }
  body.m-app .dash-3col, body.m-app .dash-2col { grid-template-columns: 1fr !important; gap: 14px; }
  body.m-app .dash-panel-head h3 { font-size: 16px; }

  /* ---------- Calendar tab ---------- */
  body.m-app .cal-bar { gap: 10px; }
  body.m-app .cal-who { min-width: 0; flex: 1 1 auto; max-width: none; }
  body.m-app .cal-legend { width: 100%; margin-left: 0; order: 3; }
  body.m-app .cal-grid { gap: 4px; }
  body.m-app .cal-cell { min-height: 56px; padding: 4px; border-radius: 9px; }

  /* hide the entrance animation jank inside the app shell */
  body.m-app .dash-kpis > *, body.m-app .dash-2col > *, body.m-app .dash-3col > * { animation: none !important; }

  /* ---------- Detail popup: sit ABOVE the app bar so the close/back button is reachable ---------- */
  body.m-app .detail-overlay { z-index: 1400 !important; }
  body.m-app .detail-head {
    position: sticky; top: 0; z-index: 2; align-items: center;
    padding-top: calc(16px + env(safe-area-inset-top));
    background: linear-gradient(180deg, #fbfdff, #f3f8fc);
  }
  /* large, clearly-tappable close button */
  body.m-app .detail-x {
    font-size: 26px; line-height: 1; width: 42px; height: 42px; border-radius: 11px;
    background: #eef3f8; color: var(--uhc-ink); display: grid; place-items: center; flex: 0 0 auto;
  }
  body.m-app .detail-x:active { background: #dde7f0; }
}