/* ═══════════════════════════════════════════════════════════════════════
   MOLMS — phone / Android-app layout polish. Loaded LAST (after mobile.css).
   Compact 2-column stat tiles, tidy header, wrapping button rows,
   readable banners, no stuck hover highlights on touch screens.
   ═══════════════════════════════════════════════════════════════════════ */

/* profile verification banner: text + link read as one sentence */
.pf-ver{display:block!important;width:100%;max-width:100%;line-height:1.55;text-align:left;box-sizing:border-box}
.pf-ver a{display:inline}
.pf-ver span{display:inline;margin-left:4px}

/* touch screens have no hover: never leave a card lifted / highlighted after a tap */
@media (hover:none){
  .stat-card:hover,.panel:hover,[class*="card"]:hover,.pf-act:hover{transform:none!important;box-shadow:none}
  .pf-act:hover{border-color:var(--fog,#e6e1d6)!important}
}

@media (max-width:900px){
  /* ── header: [☰] Title ............ 🌙 🔔 (avatar) ───────────────── */
  .topbar{display:flex!important;align-items:center;gap:8px;height:56px!important;padding:0 10px!important}
  .topbar-title,.page-title{flex:1 1 auto;min-width:0;max-width:none!important;font-size:1.02rem!important;font-weight:700}
  .topbar-right{margin-left:auto;display:flex!important;align-items:center;gap:4px!important;flex:0 0 auto}
  .theme-toggle,#themeBtn{width:38px;height:38px;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;display:inline-flex;align-items:center;justify-content:center;font-size:0!important;border-radius:50%}
  .theme-toggle::before,#themeBtn::before{content:"🌙";font-size:1.15rem}
  [data-theme="dark"] #themeBtn::before,[data-theme="dark"] .theme-toggle::before{content:"☀️"}
  .bell-btn{width:38px;height:38px;min-height:0!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center}
  .topbar-user-chip{padding:0!important;gap:0!important;background:transparent!important;border:0!important}
  .topbar-user-chip .chip-name{display:none!important}
  .install-btn{display:none!important}
}

@media (max-width:760px){
  /* ── page spacing ─────────────────────────────────────────────────── */
  .page-content{padding:12px 12px calc(96px + env(safe-area-inset-bottom))!important}
  h1,h2,h3{overflow-wrap:anywhere}

  /* ── stat tiles: always 2 per row, compact (was 1 huge card per row) ─ */
  .page-content div[style]:has(> .stat-card),
  .stats-grid,.stat-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card{padding:12px 12px 12px!important;border-radius:14px;min-height:0}
  .stat-card .stat-icon{font-size:1.15rem!important;margin-bottom:4px!important}
  .stat-card .stat-label{font-size:.62rem!important;letter-spacing:.06em;line-height:1.3}
  .stat-card .stat-value{font-size:1.35rem!important;line-height:1.15;margin:2px 0}
  .stat-card .stat-sub,.stat-card small,.stat-card .stat-delta{font-size:.72rem!important}
  .stat-card > div:last-child{font-size:inherit}

  /* ── rows of buttons / filters wrap instead of running off screen ─── */
  [style*="display:flex"]:not([style*="nowrap"]),[style*="display: flex"]:not([style*="nowrap"]){flex-wrap:wrap}
  .topbar [style*="display:flex"]{flex-wrap:nowrap}
  /* banners made of icon + text + button: button drops to its own full-width line */
  [style*="display:flex"] > span.btn,[style*="display:flex"] > a.btn-sm{flex:1 1 100%;text-align:center;justify-content:center}
  [style*="display:flex"] > span[style*="flex:1"]{flex:1 1 55%!important;min-width:0}

  /* ── cards ────────────────────────────────────────────────────────── */
  .panel,.card{max-width:100%;border-radius:16px;overflow:hidden}
  .panel-header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px}
  .panel-header > h3,.panel-header > h2{flex:1 1 100%;margin:0}
  .panel-header > div,.panel-header .header-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .panel-header .btn{flex:1 1 calc(50% - 8px);min-width:0;text-align:center}
  .panel-body{padding:14px}
  .btn{white-space:normal;line-height:1.25}
  p,td,th,li,a{overflow-wrap:break-word}

  /* ── section titles + big hero blocks ─────────────────────────────── */
  .section-header{align-items:flex-start}
  .pf-hero{padding:22px 16px}
  .pf-name{font-size:1.35rem}
  .pf-actions{gap:10px}
  .pf-act{padding:12px 14px}

  /* ── forms ────────────────────────────────────────────────────────── */
  .form-group{margin-bottom:14px}
  input[type=file],select{max-width:100%}
}


@media (max-width:760px){
  /* every page-specific card grid (fm-cards, au-cards, an-cards, fa-cards, rg-cards …): 2 compact tiles per row */
  [class$="-cards"],[class*="-cards "]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:14px!important}
  [class$="-cards"] > *,[class*="-cards "] > *{min-width:0;padding:12px!important;border-radius:14px}
  [class$="-cards"] .big,[class*="-cards "] .big,[class$="-cards"] [class*="val"],[class$="-cards"] [class$="-num"]{font-size:1.35rem!important;line-height:1.15}
  [class$="-cards"] .lbl,[class*="-cards "] .lbl{font-size:.62rem!important;letter-spacing:.05em;line-height:1.3}
  [class$="-cards"] .sub,[class*="-cards "] .sub{font-size:.72rem!important;line-height:1.35}
  /* long page titles wrap to two lines instead of "Ministry Operations Das…" */
  .topbar-title,.page-title{white-space:normal!important;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* very small phones (≤ 360px) */
@media (max-width:360px){
  .stat-card .stat-value{font-size:1.2rem!important}
  .topbar-title,.page-title{font-size:.95rem!important}
}

/* inside the Android app */
body.molms-app .btn,body.molms-app .nav-item,body.molms-app .pf-act{-webkit-user-select:none;user-select:none}
body.molms-app{overscroll-behavior-y:contain}

/* grid children may shrink below their content, so wide tables scroll inside their card instead of stretching the page */
@media (max-width:900px){
  .page-content [class*="grid"] > *,.page-content [style*="grid-template-columns"] > *,.page-content [class*="-layout"] > *{min-width:0}
  .ad-top{grid-template-columns:1fr!important;justify-items:center;text-align:center;padding:16px!important}
}

/* ═══ ‹ Back / Forward › buttons (static/nav-arrows.js) ═══════════════════ */
.nav-arrows{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.nav-arrow{width:34px;height:34px;min-height:0;padding:0;border-radius:10px;border:1px solid var(--fog,#e6e1d6);
  background:var(--white,#fff);color:var(--forest,#1A4A2E);font-size:1.5rem;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-arrow:hover{background:var(--cream,#f6f3ea)}
.nav-arrow:active{transform:scale(.94)}
.nav-arrow:disabled{opacity:.32;cursor:default;pointer-events:none}
[data-theme="dark"] .nav-arrow{background:transparent;color:#e8f2ea;border-color:rgba(255,255,255,.2)}
.nav-arrows.floating{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:10px;z-index:900}
.nav-arrows.floating .nav-arrow{background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* ═══ Sign Out hidden in Chrome on phones ═════════════════════════════════
   Cause: the side menu was sized with 100vh. In Chrome for Android 100vh is the screen height
   *with the toolbars hidden*, so when the toolbar is showing, the bottom of the menu —
   where "Sign Out" lives — is pushed below the visible screen.
   Fix: use the dynamic viewport height (dvh) and keep the footer pinned inside the visible area. */
.sidebar{height:100vh;height:100dvh}
.dash-wrap,.main-content{min-height:100vh;min-height:100dvh}
@media (max-width:900px){
  .sidebar{display:flex;flex-direction:column;max-height:100vh;max-height:100dvh;overscroll-behavior:contain}
  .sidebar-brand{padding:14px 18px 10px!important}
  .sidebar-user{padding:10px 16px!important}
  .sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .sidebar-footer{flex:0 0 auto;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))!important;background:rgba(0,0,0,.22)}
  .sidebar-footer .logout-btn{text-decoration:none;justify-content:center;color:#fff!important;background:rgba(192,57,43,.38)!important;font-weight:700;padding:12px 13px}
}

/* top bar with the new arrows on phones: ☰ ‹ › Title … 🔔 (avatar) — theme button moves to Profile → Appearance on narrow screens */
@media (max-width:900px){
  .topbar .nav-arrow{width:32px;height:32px;font-size:1.35rem;border-radius:9px}
  .topbar .nav-arrows{gap:3px}
}
@media (max-width:420px){
  .topbar #themeBtn,.topbar .theme-toggle{display:none!important}
  .topbar{gap:6px!important;padding:0 8px!important}
}

/* ═══ Side menu: stacking + stuck-open protection (phones / app) ═══════════ */
@media (max-width:900px){
  .sidebar{z-index:2001!important;visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .sidebar.open{transform:none!important;visibility:visible;transition:transform .22s ease,visibility 0s}
  .sidebar-overlay{z-index:2000!important}
  body.drawer-open{overflow:hidden}
  .topbar{position:relative;z-index:100}
}

/* ═══ Phone menu fix ═══════════════════════════════════════════════════════
   Cause: the rule that lets inline-flex rows wrap also matched the drawer once the menu script gave it
   inline "display: flex", so the column wrapped and pushed the links into a squeezed second column.
   Fix: the drawer never wraps; nav rows keep one line; sidebar text stays readable in dark mode. */
.sidebar,.sidebar.open{flex-wrap:nowrap!important;flex-direction:column!important}
.sidebar-brand,.sidebar-user,.sidebar-nav,.sidebar-footer{width:100%;box-sizing:border-box}
.sidebar-user{width:auto}
.sidebar-nav .nav-item{flex-wrap:nowrap!important;white-space:normal;line-height:1.3}
.sidebar-user .user-name{color:#fff!important}
.sidebar-user .user-role{color:var(--gold-bright,#f0c040)!important}
.sidebar-brand-text h2{color:#fff!important}

/* ═══ Pop-ups always sit above the open phone menu ═════════════════════════
   The menu drawer is raised to z-index 2147483000 while open, so the Sign Out confirmation (z-index 9000)
   was hidden behind it. Dialogs, toasts and the command palette now sit above the drawer. */
#globalConfirmOverlay,.confirm-overlay{z-index:2147483600!important}
.modal-overlay,.cmdk-overlay{z-index:2147483500!important}
#globalSuccessToast,#toastPanel,.notif-panel,#toastContainer,.bell-panel{z-index:2147483550!important}