/* Koiner CRM v5.2 — Light default, Dark toggle */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* DEFAULT = LIGHT */
:root{
  --bg:#f0f4f8;--bg2:#ffffff;--bg3:#e8eef6;--border:#cbd5e1;
  --text:#1e293b;--text2:#475569;--text3:#94a3b8;
  --accent:#02225d;--accent2:#0f244a;
  --green:#16a34a;--red:#dc2626;--yellow:#d97706;
  --purple:#7c3aed;--orange:#ea580c;--teal:#0d9488;
  --sidebar-w:240px;--radius:10px;
  --shadow:0 4px 24px rgba(0,0,0,.08);--tr:.14s ease;
}
/* DARK MODE — bright accent so navy is not invisible */
html.dark{
  --bg:#0f1117;--bg2:#161b27;--bg3:#1e2535;--border:#2a3347;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;
  --accent:#4f87f5;--accent2:#60a5fa;
  --green:#22c55e;--red:#ef4444;--yellow:#f59e0b;
  --purple:#a855f7;--orange:#f97316;--teal:#14b8a6;
  --shadow:0 4px 24px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.6;transition:background var(--tr),color var(--tr)}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent2)}
button{cursor:pointer;font-family:inherit} input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;transition:transform var(--tr),background var(--tr);will-change:transform}
.sidebar-logo{padding:16px 16px 10px;border-bottom:1px solid var(--border)}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 16px;color:var(--text2);font-size:12.5px;font-weight:500;transition:all var(--tr);position:relative;text-decoration:none}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:rgba(2,34,93,.08);color:var(--accent)}
html.dark .nav-item.active{background:rgba(79,135,245,.12)}
.nav-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 2px 2px 0}
.nav-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;padding:1px 5px;border-radius:10px;font-weight:700}
.sidebar-footer{padding:8px 12px;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:var(--bg3)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left var(--tr)}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 14px;height:50px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:50}
.btn-icon{width:32px;height:32px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text2);transition:all var(--tr);cursor:pointer;text-decoration:none}
.btn-icon:hover{color:var(--text);background:var(--border)}
.hamburger{display:none;background:none;border:none;font-size:20px;color:var(--text);padding:4px}
.page-content{padding:14px;flex:1}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:background var(--tr),border-color var(--tr)}
.card-title{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;margin-bottom:14px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:13px;text-align:center;transition:all var(--tr)}
.stat-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.stat-value{font-size:24px;font-weight:700;line-height:1}
.stat-label{font-size:10px;color:var(--text3);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:500;border:none;transition:all var(--tr);white-space:nowrap;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{opacity:.88;color:#fff}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border)} .btn-secondary:hover{background:var(--border)}
.btn-success{background:var(--green);color:#fff} .btn-success:hover{opacity:.88;color:#fff}
.btn-danger{background:var(--red);color:#fff} .btn-danger:hover{opacity:.88;color:#fff}
.btn-warning{background:var(--yellow);color:#fff} .btn-warning:hover{opacity:.88}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)} .btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-sm{padding:4px 10px;font-size:11.5px} .btn-xs{padding:3px 7px;font-size:11px;border-radius:6px}
.form-group{margin-bottom:12px}
.form-label{display:block;font-size:11.5px;font-weight:500;color:var(--text2);margin-bottom:4px}
.form-label .req{color:var(--red);margin-left:2px}
.form-control{width:100%;padding:7px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:12.5px;transition:border-color var(--tr),background var(--tr)}
.form-control:focus{outline:none;border-color:var(--accent);background:var(--bg2)}
.form-control::placeholder{color:var(--text3)}
select.form-control{cursor:pointer} textarea.form-control{resize:vertical;min-height:70px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}
.form-hint{font-size:11px;color:var(--text3);margin-top:3px}
.pwd-bar{height:3px;border-radius:2px;background:var(--bg3);overflow:hidden;margin-bottom:3px}
.pwd-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{background:var(--bg3);padding:8px 10px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid var(--border)}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--tr)}
tbody tr:hover{background:var(--bg3)} tbody tr:last-child{border-bottom:none}
td{padding:8px 10px;vertical-align:middle}
.badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:500;white-space:nowrap}
.badge-blue{background:rgba(59,130,246,.12);color:#2563eb}
.badge-green{background:rgba(22,163,74,.12);color:#16a34a}
.badge-red{background:rgba(220,38,38,.12);color:#dc2626}
.badge-yellow{background:rgba(217,119,6,.12);color:#d97706}
.badge-purple{background:rgba(124,58,237,.12);color:#7c3aed}
.badge-orange{background:rgba(234,88,12,.12);color:#ea580c}
.badge-teal{background:rgba(13,148,136,.12);color:#0d9488}
.badge-gray{background:rgba(100,116,139,.12);color:#64748b}
html.dark .badge-blue{color:#60a5fa} html.dark .badge-green{color:#4ade80}
html.dark .badge-red{color:#f87171} html.dark .badge-yellow{color:#fbbf24}
html.dark .badge-purple{color:#c084fc} html.dark .badge-orange{color:#fb923c}
html.dark .badge-teal{color:#2dd4bf} html.dark .badge-gray{color:#94a3b8}
.alert{padding:9px 13px;border-radius:8px;font-size:12.5px;margin-bottom:10px;border:1px solid var(--border);background:var(--bg3)}
.alert-success{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.3);color:#16a34a}
.alert-error{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.3);color:#dc2626}
.alert-warning{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.3);color:#d97706}
html.dark .alert-success{color:#4ade80} html.dark .alert-error{color:#f87171} html.dark .alert-warning{color:#fbbf24}
.filter-bar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;margin-bottom:12px}
.filter-grid{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-end}
.filter-mobile-strip{display:none}  /* desktop default — strip hidden, grid shown */
.filter-group{display:flex;flex-direction:column;gap:3px;flex:1;min-width:100px}
.filter-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase}
.filter-control{padding:5px 8px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:12px;width:100%}
.filter-control:focus{outline:none;border-color:var(--accent)}
.call-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;background:rgba(22,163,74,.1);color:#16a34a;border:1px solid rgba(22,163,74,.25);font-size:11.5px;font-weight:500;text-decoration:none;transition:all var(--tr)}
.call-btn:hover{background:rgba(22,163,74,.2)} html.dark .call-btn{color:#4ade80}
.wa-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;background:rgba(37,211,102,.1);color:#128c7e;border:1px solid rgba(37,211,102,.25);font-size:11.5px;font-weight:500;cursor:pointer;transition:all var(--tr)}
.wa-btn:hover{background:rgba(37,211,102,.2)} html.dark .wa-btn{color:#25d366}
/* Reusable WhatsApp logo — white glyph on WhatsApp green. Use <span class="wa-ico"></span>
   anywhere we previously used the 💬 emoji for a WhatsApp action. */
.wa-ico{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.28em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16 0a16 16 0 0 0-13.8 24.1L0 32l8.1-2.1A16 16 0 1 0 16 0z'/%3E%3Cpath fill='%23fff' d='M23.6 19.2c-.4-.2-2.4-1.2-2.7-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.2 1.5-.2.2-.4.3-.8.1-.4-.2-1.7-.6-3.2-2-1.2-1-2-2.4-2.2-2.8-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7.2-.2.2-.4.4-.6.1-.3 0-.5 0-.7-.1-.2-.9-2.1-1.2-2.9-.3-.7-.6-.6-.8-.7h-.7c-.2 0-.6.1-.9.5-.3.4-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.2 2.4 3.8 5.9 5.3.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2.1-.9 2.4-1.7.3-.8.3-1.5.2-1.6-.1-.2-.3-.3-.7-.5z'/%3E%3C/svg%3E") center/contain no-repeat}
a.row-icon-btn .wa-ico{width:1.15em;height:1.15em}
.lead-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:11px;margin-bottom:8px;transition:border-color var(--tr)}
.lead-card:hover{border-color:var(--accent)}
.lead-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.lead-name{font-weight:600;font-size:13.5px}
.tab{padding:7px 13px;font-size:12px;font-weight:500;color:var(--text2);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all var(--tr)}
.tab:hover{color:var(--text)} .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:200;padding:12px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:1}
.modal-title{font-size:13.5px;font-weight:600}
.modal-close{background:none;border:none;font-size:17px;color:var(--text2);cursor:pointer;padding:4px}
.modal-body{padding:16px}
.modal-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end;position:sticky;bottom:0;background:var(--bg2)}
.timeline{position:relative;padding-left:20px}
.timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;margin-bottom:12px}
.timeline-dot{position:absolute;left:-18px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg2)}
.timeline-content{background:var(--bg3);border-radius:7px;padding:8px 10px}
.timeline-time{font-size:10px;color:var(--text3);margin-top:2px}
/* v1.2 — status pill: 2-color rule. "Select" stays light/muted (--text3).
   Any other status renders solid black (or white in dark mode) so every
   non-default status looks identical and scannable. */
.status-inline{padding:3px 6px;font-size:11px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:#000;cursor:pointer;max-width:160px;transition:border-color var(--tr)}
.status-inline:focus{outline:none;border-color:var(--accent)}
.status-inline[data-val="Select"]{color:var(--text3)}
html.dark .status-inline{color:#fff}
html.dark .status-inline[data-val="Select"]{color:var(--text3)}
.bulk-bar{background:rgba(2,34,93,.06);border:1px solid rgba(2,34,93,.2);border-radius:var(--radius);padding:7px 12px;margin-bottom:9px;display:none;gap:7px;align-items:center;flex-wrap:wrap}
html.dark .bulk-bar{background:rgba(79,135,245,.08);border-color:rgba(79,135,245,.2)}
.bulk-bar.visible{display:flex}
.bulk-count{font-size:12px;font-weight:600;color:var(--accent)}
/* Notification badge NUMBER */
.notif-badge{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;background:var(--red);color:#fff;border-radius:20px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg2);line-height:1;pointer-events:none}
.notif-panel{position:absolute;right:0;top:44px;width:320px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);z-index:200;display:none;max-height:420px;overflow:hidden;flex-direction:column}
.notif-panel.open{display:flex}
.notif-panel-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.notif-item{padding:9px 14px;border-bottom:1px solid var(--border);font-size:12px;line-height:1.5}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(2,34,93,.05)}
html.dark .notif-item.unread{background:rgba(79,135,245,.07)}
.notif-scroll{overflow-y:auto;flex:1}
.notif-empty{padding:20px;text-align:center;color:var(--text3);font-size:12px}
.masked-contact{font-family:'JetBrains Mono',monospace;color:var(--text3);font-size:12px;letter-spacing:.5px}
.masked-num{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text3)}
.check-col{width:32px;text-align:center}
input[type="checkbox"]{accent-color:var(--accent);width:13px;height:13px;cursor:pointer}
.theme-toggle{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all var(--tr)}
.theme-toggle:hover{border-color:var(--accent);color:var(--text)}
.empty-state{text-align:center;padding:48px 20px;color:var(--text3)}
.empty-state .icon{font-size:40px;margin-bottom:8px;opacity:.5}
.empty-state h3{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:5px}
.empty-state p{font-size:12px}
.toast-container{position:fixed;bottom:16px;right:16px;z-index:999;display:flex;flex-direction:column;gap:6px}
.toast{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:12.5px;box-shadow:var(--shadow);animation:slideUp .2s ease;max-width:300px}
.toast.success{border-color:var(--green);color:var(--green)}
.toast.error{border-color:var(--red);color:var(--red)}
.toast.info{border-color:var(--accent);color:var(--accent)}
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.screen-time{font-size:11px;color:var(--teal);font-family:'JetBrains Mono',monospace}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:livePulse 2s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
.perm-item{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:6px;background:var(--bg3);cursor:pointer}
.new-lead-pulse{animation:newLeadBg 3s ease}
@keyframes newLeadBg{0%{background:rgba(2,34,93,.15)}100%{background:transparent}}
html.dark .new-lead-pulse{animation:newLeadBgDark 3s ease}
@keyframes newLeadBgDark{0%{background:rgba(79,135,245,.15)}100%{background:transparent}}
.dup-badge{display:inline-flex;padding:1px 7px;border-radius:20px;font-size:10px;background:rgba(220,38,38,.08);color:var(--red);border:1px solid rgba(220,38,38,.2);font-weight:600}
.progress{height:4px;border-radius:2px;background:var(--bg3);overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.suggestion-item{padding:7px 10px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text)}
.suggestion-item:hover{background:var(--bg3)}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-240px);width:240px;z-index:150}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:flex}
  .page-content{padding:10px}
  .form-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  /* v1.3 — mobile compact filter: show 1-line strip, hide grid until expanded */
  .filter-bar{padding:7px 9px}
  .filter-mobile-strip{display:flex;gap:6px;align-items:center}
  .filter-grid{display:none;flex-direction:column;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
  .filter-bar.expanded .filter-grid{display:flex}
  .filter-group{min-width:100%}
  .filter-search-desktop{display:none}      /* mobile uses the strip's search input */
  .filter-actions-desktop{display:none}     /* mobile uses the mobile actions row */
  .filter-actions-mobile{display:flex !important}
  .table-mobile-hide{display:none}
  .cards-mobile{display:block}
  .modal{max-width:100%;border-radius:10px}
}
@media(min-width:769px){.cards-mobile{display:none}}
@media print{.sidebar,.topbar,.filter-bar,.btn{display:none!important}.main{margin-left:0}body{background:#fff;color:#000}}

/* ═════════════════════════════════════════════════════════════════════════
   v1.3.2 — UNIVERSAL RESPONSIVE LAYER
   Tablet (≤1024px), mobile (≤768px reinforcements), small-mobile (≤480px).
   Defends against the inline grid/width/font-size patterns scattered across
   view templates so admin / dashboard / leads / dev panels reflow safely on
   any device without per-page edits. Opt-out: add class "no-mobile-reflow".
   ═════════════════════════════════════════════════════════════════════════ */

/* Sidebar backdrop — appears under the open sidebar on mobile so users can
   tap outside to dismiss. Markup is in partials/header.ejs. */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1250;opacity:0;transition:opacity var(--tr)}
.sidebar-backdrop.open{display:block;opacity:1}

/* The bottom .quick-dock sits at z-index 1200. When the sidebar is open on
   mobile, lift the sidebar above the dock and hide the dock so the sidebar's
   footer (My Screen Time, Cache, Exit) is reachable. JS toggles
   `body.sidebar-open` as a fallback for browsers that don't yet support
   the :has() selector. */
.sidebar.open{z-index:1300 !important}
body:has(.sidebar.open) .quick-dock,
body.sidebar-open .quick-dock{display:none}

/* Helper classes — opt-in for any view that wants extra safety.
   .scroll-x   → forces horizontal scroll on overflow (use around wide tables)
   .mobile-stack → child grid collapses to single column ≤768px
   .touch-min  → enforces 44px min height for touch targets */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.touch-min{min-height:40px}

/* ── Tablet (≤1024px) ──────────────────────────────────────────────────── */
@media(max-width:1024px){
  :root{--sidebar-w:200px}
  .nav-item{padding:7px 12px;font-size:12px}
  .stats-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .page-content{padding:12px}
  .topbar{padding:0 10px}
  /* Any inline grid that hardcodes 3+ columns becomes auto-fit at 200px so
     it never crams on tablets. Page-specific grids with their own breakpoint
     should keep working because auto-fit honours the larger of the two. */
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns:repeat(4"],[style*="grid-template-columns:repeat(5"],[style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important}
}

/* ── Mobile reinforcements (≤768px) ────────────────────────────────────── */
@media(max-width:768px){
  /* Topbar: tighten so title + bell + theme + live dot all fit on a phone. */
  .topbar{height:46px;padding:0 8px;gap:6px}
  .topbar > div[style*="flex:1"]{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .btn-icon{width:30px;height:30px;font-size:13px}
  .hamburger{font-size:22px;padding:6px;min-width:36px}
  /* Notification panel — fixed 320px overflows phone screens. */
  .notif-panel{position:fixed !important;top:50px !important;right:8px !important;left:8px !important;width:auto !important;max-width:none !important;max-height:75vh}
  /* Modals: full bleed + bottom-sheet feel on small screens. */
  .modal-overlay{padding:8px;align-items:flex-end}
  .modal{max-width:100% !important;width:100%;max-height:88vh;border-radius:12px 12px 8px 8px}
  .modal-body{padding:12px}
  .modal-footer{padding:10px 12px;flex-wrap:wrap}
  .modal-footer .btn{flex:1;justify-content:center}
  /* Wide tables get a graceful horizontal scroll on mobile. Tables already
     inside .table-wrap inherit scroll from the wrap; standalone tables need
     this rule. Using max-content so columns size to content and overflow
     triggers the scroll — the earlier min-width:100% broke .table-wrap by
     crushing columns. Skip heatmap (sets its own min-width). */
  table:not(.no-mobile-reflow):not(.heatmap-table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table:not(.no-mobile-reflow):not(.heatmap-table) > thead,
  table:not(.no-mobile-reflow):not(.heatmap-table) > tbody,
  table:not(.no-mobile-reflow):not(.heatmap-table) > tfoot{display:table;width:max-content;min-width:100%}
  /* Bulk action toolbars / filter rows that hardcode min-width on flex
     children overflow phones — relax them so they wrap instead. Covers the
     common values used across the codebase (140/160/200/240). */
  .filter-bar [style*="min-width:140"],.filter-bar [style*="min-width:160"],.filter-bar [style*="min-width:200"],.filter-bar [style*="min-width:240"],
  .bulk-bar [style*="min-width:140"],.bulk-bar [style*="min-width:160"],.bulk-bar [style*="min-width:200"],.bulk-bar [style*="min-width:240"],
  .card [style*="min-width:240"],.card [style*="min-width:200"]{min-width:0 !important;max-width:100% !important}
  /* Bulk-bar selects that hardcoded width:auto + min-width get free-flowing. */
  .bulk-bar select,.bulk-bar .filter-control{max-width:100%;flex:1 1 auto}
  /* Banner cards (e.g. Reassign Mode landing banner) wrap their right-side
     action button below the description instead of being pushed off-screen. */
  .card [style*="flex-wrap:wrap"] > .btn{flex:1 1 100%;justify-content:center}
  /* Inline 2-col grids become single column. */
  [style*="grid-template-columns:1fr 1fr"]:not(.no-mobile-reflow),
  [style*="grid-template-columns: 1fr 1fr"]:not(.no-mobile-reflow){grid-template-columns:1fr !important}
  /* Any inline grid with explicit N>=3 cols folds to a single column. */
  [style*="grid-template-columns:repeat(3"]:not(.no-mobile-reflow),
  [style*="grid-template-columns:repeat(4"]:not(.no-mobile-reflow),
  [style*="grid-template-columns:repeat(5"]:not(.no-mobile-reflow),
  [style*="grid-template-columns:repeat(6"]:not(.no-mobile-reflow){grid-template-columns:1fr !important}
  /* Buttons: enforce 32px tap target minimum without breaking layout. */
  .btn{min-height:32px}
  .btn-xs,.btn-sm{min-height:28px}
  /* Flash messages: tighten side margins. */
  .alert{margin:6px 8px 0 !important;font-size:12px}
  /* Heatmap doesn't shrink — give it a scroll cage. */
  .heatmap-table{min-width:560px}
  /* Card padding tightens. */
  .card{padding:12px}
}

/* ── Small mobile (≤480px) ─────────────────────────────────────────────── */
@media(max-width:480px){
  body{font-size:13px}
  .page-content{padding:8px}
  .stats-grid{grid-template-columns:1fr}
  .stat-value{font-size:20px}
  .topbar{height:44px;padding:0 6px}
  .topbar > div[style*="flex:1"]{font-size:12px}
  .btn-icon{width:28px;height:28px;font-size:12px}
  .nav-item{font-size:12.5px;padding:9px 14px}   /* bigger tap target */
  /* Notifications smaller text */
  .notif-item{font-size:11.5px;padding:8px 10px}
  /* Modal becomes a near-full-screen sheet. */
  .modal{max-height:94vh;border-radius:10px 10px 0 0}
  .modal-header{padding:11px 12px}
  .modal-title{font-size:13px}
  /* Forms */
  .form-control{font-size:13px;padding:8px 10px}
  /* Sidebar gets a small visible peek when closed so users discover it. */
  .sidebar{width:260px}
  /* Ghost mode banner shrinks. */
  body > div[style*="z-index:99999"]{padding:5px 8px !important;font-size:11px !important}
  /* Toasts span more width. */
  .toast-container{left:8px;right:8px}
  .toast{max-width:none}
}

/* ── Landscape phones — keep modals usable when keyboard pushes height ── */
@media(max-height:500px) and (orientation:landscape){
  .modal{max-height:96vh}
  .modal-body{max-height:60vh;overflow-y:auto}
}

/* ── HEATMAP TABLE ───────────────────────────────────────────── */
.heatmap-table{border-collapse:separate;border-spacing:2px;font-size:11px;width:100%;min-width:720px}
.heatmap-table thead th{background:transparent;border:none;font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;padding:3px 2px;text-align:center}
.heatmap-table tbody td{border-radius:4px;transition:opacity .15s;min-width:26px}
.heatmap-table tbody tr:hover td{opacity:.85}
html.dark .heatmap-table tbody td[style*="rgba(2,34,93"]{filter:brightness(1.8) hue-rotate(10deg)}

/* ── MONITORING SECTION ──────────────────────────────────────── */
.monitor-card{background:var(--bg2);border:1px solid var(--accent);border-radius:var(--radius);padding:16px}

/* ── STAT CARD IMPROVEMENTS ──────────────────────────────────── */
.stat-card{cursor:default;box-shadow:none}
.stat-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.1)}

/* ── SCROLLABLE SMALL TABLE ──────────────────────────────────── */
.table-wrap-sm{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);max-height:240px;overflow-y:auto}