/* === DESIGN TOKENS (NASS Branch Design System) === */
:root{
  --nass-navy-900:#002655;--nass-navy-800:#002a60;--nass-navy-700:#003366;--nass-navy-600:#004080;--nass-navy-500:#00509e;--nass-navy-400:#1a4d8f;--nass-navy-300:#1a3c6e;--nass-navy-200:#0055aa;--nass-navy-100:#0055cc;
  --nass-gold-600:#b39200;--nass-gold-500:#c8a400;--nass-gold-300:#ffd966;
  --nass-success:#1a7a3c;
  --bg-app:#eef1f6;--bg-card:#ffffff;--bg-subtle:#f7f9fc;--bg-muted:#f4f6fa;--bg-panel:#edf1fb;--bg-row-hover:#d4e4fa;--bg-subject-hover:#dbeeff;--bg-focus-cell:#fffbe6;--bg-input:#fafbfd;--bg-pdf:#f7f8fc;--bg-surface:#ffffff;--bg-hover:#eaeff7;
  --fg-ink:#1a2332;--fg-body:#3a4558;--fg-muted:#5a6375;--fg-subtle:#6b7585;--fg-faint:#9aa3b0;--fg-placeholder:#90aacf;--fg-on-navy:#ffffff;--fg-on-navy-soft:rgba(255,255,255,0.75);--fg-on-navy-faint:rgba(255,255,255,0.22);
  --border-strong:#003366;--border-default:#c8cdd8;--border-soft:#dce1ea;--border-row-b:#c8cfe0;--border-row-r:#d6dcea;--border-divider:#eef1f6;
  --status-active-row:#d6eaff;--status-active-fg:#0055aa;--status-active-bg:#dbeeff;
  --status-completed-row:#d0f0e0;--status-completed-fg:#0d6e35;--status-completed-bg:#d6f5e3;
  --status-hold-row:#fef0c0;--status-hold-fg:#8a6000;--status-hold-bg:#fff0cc;
  --status-cancelled-row:#fad8dd;--status-cancelled-fg:#b81c2e;--status-cancelled-bg:#fde0e5;
  --status-filed-row:#e8d8f8;--status-filed-fg:#5a2d9a;--status-filed-bg:#ede0f8;
  --delay-overdue:#c0392b;--delay-overdue-deep:#b81c2e;--delay-overdue-bg:#fde0e5;
  --delay-ontime:#1a7a3c;--delay-ontime-deep:#0d6e35;--delay-ontime-bg:#d6f5e3;
  --stat-overdue:#d32f2f;--stat-ontrack:#1a7a3c;--stat-hold:#c8a400;--stat-active:#003366;
  --signal-danger:#d32f2f;--signal-danger-hover-bg:#fde8e8;--signal-success:#1a7a3c;
  --tag-bg:#e8f0fe;--tag-border:#c5d8f8;--tag-fg:#003366;--tag-x:#90aacf;
  --bg-topbar:#002655;--grad-gold-cta:linear-gradient(180deg,#f4d968 0%,#e6c53a 100%);
  --tb-fg:#ffffff;--tb-nav-color:rgba(255,255,255,0.65);--tb-nav-active:#ffffff;--tb-nav-hover:rgba(255,255,255,0.07);
  --tb-search-bg:rgba(255,255,255,0.08);--tb-search-border:rgba(255,255,255,0.18);--tb-search-color:#ffffff;--tb-search-ph:rgba(255,255,255,0.35);--tb-search-hint:rgba(255,255,255,0.30);
  --tb-icon-bg:rgba(255,255,255,0.07);--tb-icon-border:rgba(255,255,255,0.18);--tb-icon-color:rgba(255,255,255,0.75);--tb-icon-hover:rgba(255,255,255,0.15);
  --tb-user-div:rgba(255,255,255,0.15);--tb-user-email:rgba(255,255,255,0.72);
  --tb-shadow:0 2px 10px rgba(0,0,0,0.30),0 1px 0 rgba(230,197,58,0.20) inset;
  --grad-topbar:linear-gradient(135deg,#002655 0%,#004080 100%);--grad-table-head:linear-gradient(to bottom,#00509e,#002a60);--grad-login-bg:linear-gradient(135deg,#002655,#004080);
  --shadow-topbar:0 2px 10px rgba(0,0,0,0.28);--shadow-stats:0 1px 3px rgba(0,0,0,0.04);--shadow-card:0 1px 5px rgba(0,0,0,0.06);--shadow-btn:0 1px 4px rgba(0,0,0,0.20);--shadow-btn-hov:0 2px 6px rgba(0,0,0,0.25);--shadow-tile-hov:0 2px 8px rgba(0,0,0,0.10);--shadow-bbar:0 -2px 6px rgba(0,0,0,0.06);--shadow-modal:0 24px 64px rgba(0,0,0,0.30),0 4px 16px rgba(0,0,0,0.15);--shadow-login:0 28px 70px rgba(0,0,0,0.45);--ring-focus:0 0 0 3px rgba(0,51,102,0.10);
  --radius-sm:4px;--radius-md:5px;--radius-lg:6px;--radius-xl:7px;--radius-2xl:8px;--radius-card:10px;--radius-lg-card:12px;--radius-pill:20px;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;--font-mono:ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace;
  --ease-std:0.15s;--ease-pdf:0.3s;
}

/* === OFFLINE BANNER === */
#offline-banner{display:none;align-items:center;justify-content:center;gap:12px;padding:8px 16px;background:#7a3030;color:#fff;font-size:12px;font-weight:500;text-align:center;flex-wrap:wrap;z-index:9999;position:relative}
#offline-banner button{background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.35);color:#fff;border-radius:4px;padding:2px 8px;cursor:pointer;font-size:12px;flex-shrink:0}
#offline-banner button:hover{background:rgba(255,255,255,0.30)}

/* === RESET & BASE === */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);font-size:13px;background:var(--bg-app);color:var(--fg-ink)}

/* === TOPBAR (BEM) === */
.topbar{background:var(--bg-topbar);color:var(--tb-fg);padding:0 20px;height:56px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;position:sticky;top:0;z-index:50;box-shadow:var(--tb-shadow);border-bottom:2px solid var(--nass-gold-500)}
.topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex-shrink:0}
.topbar__logo{height:34px;width:auto;flex-shrink:0}
.topbar__wordmark{display:flex;flex-direction:column;gap:1px}
.topbar__wordmark-title{font-size:13px;font-weight:700;letter-spacing:0.05em;white-space:nowrap;color:var(--tb-fg)}
.topbar__wordmark-sub{font-size:10px;color:var(--tb-nav-color);letter-spacing:0.03em;white-space:nowrap}
.topbar__nav{display:flex;align-items:stretch;gap:0;overflow-x:auto;flex:1 1 auto;min-width:0;scrollbar-width:none;height:56px}
.topbar__nav::-webkit-scrollbar{display:none}
.topbar__nav-item{position:relative;padding:0 7px;border:none;background:none;color:var(--tb-nav-color);cursor:pointer;font-size:12px;font-weight:600;letter-spacing:0.02em;white-space:nowrap;height:56px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);transition:color 0.15s,background 0.15s;flex-shrink:0}
.topbar__nav-item:hover{color:var(--tb-nav-active);background:var(--tb-nav-hover)}
.topbar__nav-item.is-active{color:var(--tb-nav-active)}
.topbar__nav-item.is-active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--nass-gold-500);border-radius:2px 2px 0 0}
.topbar__nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);font-size:9px;font-weight:800;line-height:1}
.topbar__nav-badge--alert{background:var(--signal-danger);color:#fff}
.topbar__spring{flex:0 0 0}
.topbar__search-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.topbar__search-icon{position:absolute;left:10px;color:var(--tb-search-ph);pointer-events:none}
.topbar__search{width:160px;height:32px;background:var(--tb-search-bg);border:1px solid var(--tb-search-border);border-radius:var(--radius-2xl);color:var(--tb-search-color);font-size:12px;font-family:var(--font-sans);padding:0 50px 0 30px;outline:none;transition:width 0.2s,border-color 0.15s,box-shadow 0.15s}
.topbar__search::placeholder{color:var(--tb-search-ph)}
.topbar__search:focus{width:280px;border-color:var(--nass-gold-500);box-shadow:0 0 0 3px rgba(200,164,0,0.20)}
.topbar__search-hint{position:absolute;right:10px;font-size:10px;color:var(--tb-search-hint);pointer-events:none;font-family:var(--font-mono);letter-spacing:0}
.topbar__icon-btn{width:34px;height:34px;border:1px solid var(--tb-icon-border);border-radius:var(--radius-2xl);background:var(--tb-icon-bg);color:var(--tb-icon-color);cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s,color 0.15s,border-color 0.15s;font-family:var(--font-sans);padding:0}
.topbar__icon-btn:hover{background:var(--tb-icon-hover);color:var(--tb-nav-active);border-color:var(--tb-icon-border)}
.topbar__cta{height:32px;padding:0 14px;background:var(--grad-gold-cta);color:#1a1200;border:none;border-radius:var(--radius-2xl);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:var(--font-sans);transition:opacity 0.15s,box-shadow 0.15s;box-shadow:0 1px 4px rgba(200,164,0,0.35)}
.topbar__cta:hover{opacity:0.9;box-shadow:0 2px 8px rgba(200,164,0,0.5)}
.topbar__user{display:flex;align-items:center;gap:8px;border-left:1px solid var(--tb-user-div);margin-left:4px;padding-left:12px;flex-shrink:0}
.topbar__avatar{width:30px;height:30px;border-radius:50%;background:var(--grad-gold-cta);color:#1a1200;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase;border:2px solid rgba(200,164,0,0.55);box-shadow:0 0 0 1px rgba(200,164,0,0.2)}
.topbar__user-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.topbar__user-email{font-size:11px;color:var(--tb-user-email);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__signout{width:28px;height:28px;border:1px solid var(--tb-icon-border);border-radius:var(--radius-2xl);background:var(--tb-icon-bg);color:var(--tb-icon-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s,color 0.15s,border-color 0.15s;padding:0}
.topbar__signout:hover{background:rgba(211,47,47,0.22);color:#ffb3b3;border-color:rgba(220,60,60,0.45)}

/* === BUTTONS === */
.btn{padding:7px 14px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600;letter-spacing:0.02em;transition:all var(--ease-std);white-space:nowrap;font-family:var(--font-sans)}
.btn-gold{background:var(--nass-gold-500);color:var(--fg-on-navy);box-shadow:var(--shadow-btn)}
.btn-gold:hover{background:var(--nass-gold-600);box-shadow:var(--shadow-btn-hov)}
.btn-ghost{background:rgba(255,255,255,0.13);color:var(--fg-on-navy);border:1px solid rgba(255,255,255,0.22)}
.btn-ghost:hover{background:rgba(255,255,255,0.24)}
.btn-navy{background:var(--nass-navy-700);color:var(--fg-on-navy)}
.btn-navy:hover{background:var(--nass-navy-400)}

/* === TOPBAR role badges === */
.topbar__user .role-badge{font-size:9px;padding:1px 7px;letter-spacing:0.06em;font-weight:800}
.topbar__user .role-superuser{background:rgba(0,38,85,0.12);color:#002655;border:1px solid rgba(0,38,85,0.22)}
.topbar__user .role-editor{background:rgba(200,164,0,0.18);color:#7a5f00;border:1px solid rgba(200,164,0,0.40)}
.topbar__user .role-viewer{background:rgba(0,38,85,0.06);color:rgba(0,38,85,0.6);border:1px solid rgba(0,38,85,0.14)}
body.dark .topbar__user .role-superuser{background:rgba(255,255,255,0.18);color:#fff;border:1px solid rgba(255,255,255,0.28)}
body.dark .topbar__user .role-editor{background:rgba(200,164,0,0.28);color:var(--nass-gold-300);border:1px solid rgba(200,164,0,0.40)}
body.dark .topbar__user .role-viewer{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.18)}
.btn-signout:hover svg{transform:translateX(2px)}
.btn-signout:active{background:rgba(211,47,47,0.35);transform:scale(0.97)}

/* === STATS BAR === */
.stats{background:var(--bg-card);border-bottom:1px solid var(--border-soft);padding:10px 20px;display:flex;gap:10px;flex-wrap:wrap;box-shadow:var(--shadow-stats)}
.sc{background:var(--bg-subtle);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:9px 18px;min-width:110px;text-align:center;border-top:3px solid var(--nass-navy-700);transition:box-shadow var(--ease-std),transform var(--ease-std)}
.sc:hover{box-shadow:var(--shadow-tile-hov);transform:translateY(-1px)}
.sn{font-size:23px;font-weight:700;color:var(--nass-navy-700);line-height:1.2}
.sn.r{color:var(--stat-overdue)}
.sn.g{color:var(--stat-ontrack)}
.sn.a{color:var(--stat-hold)}
.sl{font-size:10px;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:0.08em;margin-top:3px;font-weight:700}
.sc-active{border-top-color:var(--stat-active)}
.sc-completed{border-top-color:var(--stat-ontrack)}
.sc-overdue{border-top-color:var(--stat-overdue)}
.sc-hold{border-top-color:var(--stat-hold)}
.sc-cancelled{border-top-color:var(--status-cancelled-fg)}
.sc-filed{border-top-color:var(--status-filed-fg)}
.sc-link{cursor:pointer;user-select:none}
.sc-link:active{opacity:0.8}
.sn.c{color:var(--status-cancelled-fg)}
.sn.f{color:var(--status-filed-fg)}

/* === FILTER BAR === */
.sbar{background:var(--bg-muted);border-bottom:1px solid var(--border-soft);padding:9px 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sbar input{padding:7px 11px 7px 32px;border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:12px;width:270px;background:var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 10px center no-repeat;transition:border-color var(--ease-std),box-shadow var(--ease-std);font-family:var(--font-sans)}
.sbar input:focus{border-color:var(--nass-navy-700);box-shadow:var(--ring-focus);outline:none}
.sbar select{padding:7px 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:12px;background:var(--bg-card);color:var(--fg-ink);font-family:var(--font-sans);transition:border-color var(--ease-std);cursor:pointer}
.sbar select:focus{border-color:var(--nass-navy-700);outline:none}
.sbar label{font-size:12px;color:var(--fg-muted);font-weight:500}

/* === TABLE WRAPPER === */
.tw{overflow:auto;max-height:calc(100vh - 235px)}

/* === TABLE === */
table{border-collapse:collapse;width:100%;table-layout:auto}
td{overflow:hidden}

thead tr{background:var(--grad-table-head);color:var(--fg-on-navy);position:sticky;top:0;z-index:10}
th{position:relative;padding:10px 10px;text-align:left;font-size:10.5px;font-weight:700;border-right:1px solid rgba(255,255,255,0.2);white-space:nowrap;cursor:pointer;user-select:none;letter-spacing:0.04em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
th:hover{background:rgba(255,255,255,0.15)}
th.ns{cursor:default}
th.sa::after{content:" ▲";font-size:9px;opacity:0.9}
th.sd::after{content:" ▼";font-size:9px;opacity:0.9}

td{border-bottom:1px solid var(--border-row-b);border-right:1px solid var(--border-row-r);padding:0;vertical-align:middle;background:var(--bg-card)}
tr:nth-child(even) td{background:var(--bg-panel)}
tr:hover td{background:var(--bg-row-hover)!important}

/* === CELL INPUTS === */
.sn-cell{text-align:center;font-size:11px;color:var(--fg-subtle);padding:6px 4px;width:34px;min-width:34px;font-weight:600}
.act-cell{text-align:center;padding:3px;width:108px;min-width:108px;white-space:nowrap}
td input[type=text],td input[type=date],td select{width:100%;border:none;background:transparent;padding:7px 7px;font-size:12px;color:var(--fg-ink);font-family:var(--font-sans);min-height:33px}
td input:focus,td select:focus{background:var(--bg-focus-cell);outline:2px solid var(--nass-gold-500);outline-offset:-2px;border-radius:2px}
td select{cursor:pointer}

/* === STATUS ROW COLORS === */
.s-active td{background:var(--status-active-row)!important}
.s-completed td{background:var(--status-completed-row)!important}
.s-hold td{background:var(--status-hold-row)!important}
.s-cancelled td{background:var(--status-cancelled-row)!important}
.s-filed td{background:var(--status-filed-row)!important}

/* === DELAY FLAG COLORS === */
.flag-overdue{color:var(--delay-overdue);font-weight:700}
.flag-ontime{color:var(--delay-ontime);font-weight:700}

/* === OVERDUE ROW — overrides status tint === */
.row-overdue td{background:var(--delay-overdue-bg)!important}

/* === ROW ACTION BUTTONS === */
.view-btn{background:none;border:1px solid var(--nass-success);color:var(--nass-success);cursor:pointer;font-size:11px;font-weight:600;padding:3px 7px;border-radius:var(--radius-sm);transition:background var(--ease-std),color var(--ease-std);line-height:1;margin-right:3px;font-family:var(--font-sans)}
.view-btn:hover{background:var(--nass-success);color:var(--fg-on-navy)}
.edit-btn{background:none;border:1px solid var(--nass-navy-700);color:var(--nass-navy-700);cursor:pointer;font-size:11px;font-weight:600;padding:3px 7px;border-radius:var(--radius-sm);transition:background var(--ease-std),color var(--ease-std);line-height:1;font-family:var(--font-sans)}
.edit-btn:hover{background:var(--nass-navy-700);color:var(--fg-on-navy)}
.del{background:none;border:1px solid transparent;cursor:pointer;color:var(--fg-faint);padding:0;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.18s,background 0.18s,border-color 0.18s,transform 0.15s,box-shadow 0.18s;line-height:1;vertical-align:middle}
.del svg{pointer-events:none;display:block}
.del:hover{color:#fff;background:var(--signal-danger);border-color:var(--signal-danger);transform:scale(1.05);box-shadow:0 2px 6px rgba(211,47,47,0.35)}
.del:active{transform:scale(0.92);box-shadow:none}

/* === MODAL EDIT BUTTON === */
.medit{padding:8px 16px;background:var(--bg-muted);color:var(--nass-navy-700);border:1px solid var(--nass-navy-700);border-radius:var(--radius-md);font-size:12px;font-weight:700;cursor:pointer;transition:background var(--ease-std);letter-spacing:0.03em;font-family:var(--font-sans)}
.medit:hover{background:#dce6f5}

/* === BOTTOM BAR === */
.bbar{background:var(--bg-card);border-top:1px solid var(--border-soft);padding:8px 20px;display:flex;align-items:center;gap:10px;position:sticky;bottom:0;box-shadow:var(--shadow-bbar)}
.rc{font-size:12px;color:var(--fg-subtle)}

/* === ADMIN PANEL === */
.adm{padding:22px;display:none;flex-direction:column;overflow-y:auto;max-height:calc(100vh - 60px)}
.adm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.acard{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-2xl);padding:16px;box-shadow:var(--shadow-card)}
.acard h3{font-size:12px;font-weight:700;color:var(--nass-navy-700);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border-divider);display:flex;align-items:center;justify-content:space-between;letter-spacing:0.04em;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:28px}
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--tag-bg);border:1px solid var(--tag-border);border-radius:var(--radius-pill);padding:4px 11px;font-size:12px;color:var(--tag-fg);font-weight:500}
.tx{background:none;border:none;cursor:pointer;color:var(--tag-x);font-size:14px;line-height:1}
.tx:hover{color:var(--signal-danger)}
.ai{display:flex;gap:7px;align-items:center}
.ai input{flex:1;padding:7px 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-sans)}
.ai input:focus{border-color:var(--nass-navy-700);outline:none;box-shadow:var(--ring-focus)}
.ai button{padding:7px 13px;background:var(--nass-navy-700);color:var(--fg-on-navy);border:none;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;font-weight:600;font-family:var(--font-sans)}

/* === MODAL === */
.mbg{display:none;position:fixed;inset:0;background:rgba(8,18,38,0.55);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.mbg.open{display:flex}
.mbox{background:var(--bg-card);border-radius:var(--radius-card);padding:26px;width:540px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-modal)}
.mbox h3{font-size:15px;font-weight:700;color:var(--nass-navy-700);margin-bottom:18px;border-bottom:2px solid var(--border-divider);padding-bottom:13px;letter-spacing:0.03em}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mf label{display:block;font-size:10px;color:var(--fg-subtle);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700}
.mf input,.mf select,.mf textarea{width:100%;padding:8px 10px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:12.5px;font-family:var(--font-sans);color:var(--fg-ink);background:var(--bg-input);transition:border-color var(--ease-std),box-shadow var(--ease-std)}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--nass-navy-700);background:var(--bg-card);outline:none;box-shadow:var(--ring-focus)}
.mf textarea{height:60px;resize:vertical}
.full{grid-column:1/-1}
.mbr{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:13px;border-top:1px solid var(--border-divider)}
.mcancel{padding:8px 16px;border:1px solid var(--border-default);background:var(--bg-card);border-radius:var(--radius-md);font-size:12px;cursor:pointer;color:var(--fg-muted);font-weight:500;transition:background var(--ease-std);font-family:var(--font-sans)}
.mcancel:hover{background:var(--bg-muted)}
.mok{padding:8px 20px;background:var(--nass-navy-700);color:var(--fg-on-navy);border:none;border-radius:var(--radius-md);font-size:12px;font-weight:700;cursor:pointer;transition:background var(--ease-std);letter-spacing:0.03em;font-family:var(--font-sans)}
.mok:hover{background:var(--nass-navy-400)}
.btn-clear{background:transparent;color:var(--fg-muted);font-size:12px;padding:7px 13px;border-radius:var(--radius-sm);font-weight:600;font-family:var(--font-sans);border:1px solid var(--border-default);cursor:pointer;transition:background var(--ease-std),border-color var(--ease-std),color var(--ease-std)}
.btn-clear:hover{background:var(--bg-muted);border-color:var(--border-strong);color:var(--fg-ink)}

/* === ROLE BADGES === */
.role-badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:10px;font-weight:700;text-transform:capitalize;letter-spacing:0.04em;vertical-align:middle}
.role-superuser{background:var(--nass-navy-700);color:#fff}
.role-editor{background:var(--status-hold-bg);color:var(--status-hold-fg)}
.role-viewer{background:var(--bg-muted);color:var(--fg-muted);border:1px solid var(--border-default)}
/* Topbar overrides — dark background */
.topbar .role-badge{font-size:9px;padding:1px 7px;letter-spacing:0.06em;font-weight:800}
.topbar .role-superuser{background:rgba(255,255,255,0.18);color:#fff;border:1px solid rgba(255,255,255,0.28)}
.topbar .role-editor{background:rgba(200,164,0,0.28);color:var(--nass-gold-300);border:1px solid rgba(200,164,0,0.40)}
.topbar .role-viewer{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.18)}

/* === USERS PANEL === */
.u-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--nass-navy-600);color:#fff;font-size:12px;font-weight:700;margin-right:8px;flex-shrink:0;vertical-align:middle}
.u-you{font-size:10px;color:var(--fg-faint);font-style:italic;margin-left:4px}
.u-role-sel{font-size:12px;padding:4px 8px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-card);font-family:var(--font-sans);color:var(--fg-ink);cursor:pointer;transition:border-color var(--ease-std)}
.u-role-sel:hover{border-color:var(--border-strong)}
.u-role-sel:disabled{opacity:0.45;cursor:default}
.u-msg{font-size:12px;min-height:20px;margin:6px 0 10px}
.u-msg-ok{color:var(--nass-success)}
.u-msg-err{color:var(--signal-danger)}
.u-role-card{display:flex;align-items:center;gap:8px;background:var(--bg-subtle);border:1px solid var(--border-soft);border-radius:var(--radius-xl);padding:7px 14px}
.u-role-desc{font-size:11px;color:var(--fg-muted)}
.u-temp-pw-box{display:flex;align-items:center;margin-top:8px;background:var(--bg-subtle);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:8px 12px;gap:6px;flex-wrap:wrap}
.u-temp-pw{font-family:'Courier New',Courier,monospace;font-size:14px;font-weight:700;letter-spacing:0.12em;color:var(--nass-navy-700);user-select:all;flex:1}

/* === SUBJECT COLUMN CLICKABLE === */
#tbody td:nth-child(3){cursor:pointer;color:var(--nass-navy-700);font-weight:600;padding:7px 7px}
#tbody td:nth-child(3):hover{color:var(--nass-navy-100);background:var(--bg-subject-hover)!important}

/* === DETAIL MODAL === */
.detail-mbox{width:600px}
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:15px;border-bottom:2px solid var(--border-divider)}
.detail-header-main{flex:1;min-width:0}
.detail-ref{font-size:18px;font-weight:700;color:var(--nass-navy-700);letter-spacing:0.04em;margin-bottom:5px}
.detail-subject{font-size:13px;color:var(--fg-body);line-height:1.5;text-decoration:none;display:block}
/* When a matching Drive document is found, style as a link */
.detail-subject.detail-subject-linked{color:var(--nass-navy-700);cursor:pointer}
.detail-subject.detail-subject-linked::after{content:' \2197';font-size:11px;opacity:0.6}
.detail-subject.detail-subject-linked:hover{text-decoration:underline;color:var(--nass-navy-500)}
.detail-badges{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.detail-status{padding:5px 13px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;letter-spacing:0.04em;white-space:nowrap}
.detail-flag{padding:4px 11px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:0.05em;white-space:nowrap}
.ds-active{background:var(--status-active-bg);color:var(--status-active-fg)}
.ds-completed{background:var(--status-completed-bg);color:var(--status-completed-fg)}
.ds-hold{background:var(--status-hold-bg);color:var(--status-hold-fg)}
.ds-cancelled{background:var(--status-cancelled-bg);color:var(--status-cancelled-fg)}
.ds-filed{background:var(--status-filed-bg);color:var(--status-filed-fg)}
.df-overdue{background:var(--delay-overdue-bg);color:var(--delay-overdue-deep)}
.df-ontime{background:var(--delay-ontime-bg);color:var(--delay-ontime-deep)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.detail-field{display:flex;flex-direction:column;gap:4px}
.detail-remarks-field{margin-bottom:4px}
.detail-label{font-size:10px;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.detail-value{font-size:13px;color:var(--fg-ink);font-weight:500;min-height:18px}

/* === DRIVE SEARCH VIEW === */
.ds-wrap{max-width:860px;margin:0 auto;padding:28px 24px}
.ds-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-divider)}
.ds-header-title{font-size:16px;font-weight:700;color:var(--nass-navy-700);margin-bottom:4px;letter-spacing:0.02em}
.ds-header-sub{font-size:12px;color:var(--fg-subtle);margin:0}
.ds-search-bar{display:flex;gap:10px;margin-bottom:20px}
.ds-input{flex:1;padding:10px 16px;border:1px solid var(--border-default);border-radius:var(--radius-lg);font-size:13px;font-family:var(--font-sans);color:var(--fg-ink);background:var(--bg-card);transition:border-color var(--ease-std),box-shadow var(--ease-std)}
.ds-input:focus{border-color:var(--nass-navy-700);outline:none;box-shadow:var(--ring-focus)}
.ds-btn{padding:10px 22px;font-size:13px}
.ds-count{font-size:12px;color:var(--fg-subtle);margin-bottom:10px;font-weight:600;letter-spacing:0.02em}
.ds-results{display:flex;flex-direction:column}
.ds-empty-state{text-align:center;padding:52px 20px;color:var(--fg-faint);font-size:13px;font-style:italic}
.ds-loading{display:flex;align-items:center;gap:10px;padding:32px 20px;color:var(--fg-muted);font-size:13px}
.ds-spinner{width:18px;height:18px;border:2px solid var(--border-default);border-top-color:var(--nass-navy-700);border-radius:50%;animation:ds-spin 0.7s linear infinite;flex-shrink:0}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds-item{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-xl);margin-bottom:8px;transition:box-shadow var(--ease-std),border-color var(--ease-std),transform var(--ease-std)}
.ds-item:hover{box-shadow:var(--shadow-tile-hov);border-color:var(--border-default);transform:translateY(-1px)}
.ds-icon{font-size:22px;flex-shrink:0;width:30px;text-align:center}
.ds-info{flex:1;min-width:0}
.ds-name{font-size:13px;font-weight:600;color:var(--fg-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-meta{font-size:11px;color:var(--fg-faint);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ds-type-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:0.04em;background:var(--bg-muted);color:var(--fg-subtle);border:1px solid var(--border-soft)}
.ds-hl{background:rgba(200,164,0,0.28);color:var(--fg-ink);border-radius:2px;padding:0 2px;font-weight:700}
body.dark .ds-hl{background:rgba(230,197,58,0.25);color:var(--fg-ink)}
.ds-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.ds-preview-btn{background:none;border:1px solid var(--nass-navy-700);color:var(--nass-navy-700);padding:5px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;cursor:pointer;transition:background var(--ease-std),color var(--ease-std);white-space:nowrap;font-family:var(--font-sans)}
.ds-preview-btn:hover{background:var(--nass-navy-700);color:var(--fg-on-navy)}
.ds-open-btn{background:var(--nass-navy-700);color:var(--fg-on-navy);padding:5px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-decoration:none;transition:background var(--ease-std);white-space:nowrap;font-family:var(--font-sans)}
.ds-open-btn:hover{background:var(--nass-navy-400)}
/* Drive PDF Preview Modal */
.ds-pdf-mbox{width:92vw;max-width:1100px;height:90vh;display:flex;flex-direction:column;padding:18px}
.ds-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border-divider);flex-shrink:0}
.ds-pdf-title{font-size:13px;font-weight:600;color:var(--nass-navy-700);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-pdf-frame{flex:1;border:none;border-radius:var(--radius-md);background:var(--bg-pdf);min-height:0}
/* Drive Search — dark mode */
body.dark .ds-input{background:var(--bg-input)!important;border-color:var(--border-default)!important;color:var(--fg-ink)!important}
body.dark .ds-item{background:var(--bg-card)!important;border-color:var(--border-soft)!important}
body.dark .ds-item:hover{border-color:var(--border-default)!important;box-shadow:0 2px 10px rgba(0,0,0,0.35)!important}
body.dark .ds-name{color:var(--fg-ink)!important}
body.dark .ds-preview-btn{border-color:var(--nass-navy-900)!important;color:var(--nass-navy-900)!important}
body.dark .ds-preview-btn:hover{background:var(--nass-navy-900)!important;color:var(--bg-card)!important}
body.dark .ds-open-btn{background:var(--nass-navy-900)!important;color:var(--bg-app)!important}
body.dark .ds-pdf-title{color:var(--nass-navy-900)!important}
body.dark .ds-pdf-mbox,.ds-pdf-mbox{background:var(--bg-card)}
/* Drive Search — split panel */
#view-drivesearch{overflow:hidden}
.ds-shell{display:flex;height:100%;overflow:hidden}
.ds-left{width:400px;flex-shrink:0;border-right:1px solid var(--border-divider);display:flex;flex-direction:column;background:var(--bg-app);overflow:hidden}
.ds-right{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-pdf);position:relative}
.ds-breadcrumb{padding:6px 10px 4px;font-size:12px;color:var(--fg-subtle);display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex-shrink:0;border-bottom:1px solid var(--border-soft)}
.ds-breadcrumb-btn{background:none;border:none;color:var(--nass-navy-700);font-size:12px;cursor:pointer;padding:0 2px;font-family:var(--font-sans);text-decoration:underline;font-weight:600}
.ds-breadcrumb-sep{color:var(--fg-faint);font-size:11px}
.ds-preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fg-faint);font-size:13px;gap:14px;font-style:italic}
.ds-preview-placeholder svg{opacity:0.35}
#ds-iframe{width:100%;flex:1;border:none;min-height:0;background:var(--bg-pdf)}
.ds-preview-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--nass-navy-300);color:var(--fg-on-navy);flex-shrink:0;gap:10px}
.ds-preview-title{font-size:12px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-item.ds-item-active{border-color:var(--nass-navy-700)!important;background:rgba(0,35,100,0.06)!important}
.ds-folder-browse-btn{background:var(--nass-navy-700);color:var(--fg-on-navy);padding:5px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-sans);white-space:nowrap}
.ds-folder-browse-btn:hover{background:var(--nass-navy-400)}
body.dark .ds-left{background:var(--bg-app)!important}
body.dark .ds-breadcrumb-btn{color:var(--nass-navy-900)!important}
body.dark .ds-item.ds-item-active{border-color:var(--nass-navy-900)!important;background:rgba(180,210,255,0.08)!important}

/* === COLUMN RESIZER === */
th{position:relative}
.resizer{position:absolute;right:0;top:0;width:5px;height:100%;cursor:col-resize;user-select:none;z-index:2;border-right:2px solid transparent}
.resizer:hover,.resizer.rzactive{border-right:2px solid var(--nass-gold-500);background:rgba(200,164,0,0.15)}

/* === AUDIT TRAIL ROW === */
.detail-audit{font-size:11px;color:var(--fg-faint);padding:6px 0 2px;border-top:1px solid var(--border-divider);margin-top:6px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.detail-audit-label{font-weight:600;letter-spacing:0.04em;text-transform:uppercase;font-size:10px}

/* === PAGINATION === */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 8px;border:1px solid #d0d5df;border-radius:var(--radius-md);background:var(--bg-card);color:#3a4560;font-size:13px;font-weight:500;cursor:pointer;transition:background var(--ease-std),border-color var(--ease-std);font-family:var(--font-sans)}
.pg-btn:hover:not(:disabled){background:#f0f4ff;border-color:#3a7bd5}
.pg-btn:disabled{opacity:.4;cursor:default}
.pg-btn.pg-active{background:var(--nass-navy-300);border-color:var(--nass-navy-300);color:var(--fg-on-navy);font-weight:700}
.pg-arrow{min-width:70px;font-size:12px;gap:4px}

/* === GOOGLE DRIVE SPLIT PANEL === */
.detail-mbox.detail-has-pdf{width:97vw;max-width:97vw;height:94vh;max-height:94vh;display:flex;flex-direction:row;gap:0;overflow:hidden;padding:0}
.detail-left{flex:0 0 460px;min-width:340px;max-width:460px;padding:26px;overflow-y:auto;border-right:1px solid var(--border-divider)}
.detail-right{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-pdf)}
.pdf-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--nass-navy-300);color:var(--fg-on-navy);gap:10px;flex-shrink:0}
.pdf-panel-label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;opacity:0.8}
.pdf-open-link{font-size:12px;color:var(--nass-gold-300);text-decoration:none;font-weight:600;white-space:nowrap}
.pdf-open-link:hover{text-decoration:underline}
#d-pdf-title-bar{padding:9px 16px;font-size:12px;font-weight:600;color:var(--fg-ink);background:var(--bg-app);border-bottom:1px solid var(--border-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
#d-pdf-loading{display:flex;align-items:center;justify-content:center;flex:1;font-size:13px;color:var(--fg-subtle);font-style:italic}
#d-pdf-rotate-wrap{flex:1;position:relative;overflow:auto;min-height:0}
#d-pdf-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:none;transform-origin:center center;transition:transform var(--ease-pdf) ease}
.pdf-panel-actions{display:flex;align-items:center;gap:10px}
.pdf-rot-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:var(--fg-on-navy);border-radius:var(--radius-sm);width:30px;height:28px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--ease-std);padding:0;line-height:1}
.pdf-rot-btn:hover{background:rgba(255,255,255,0.28)}
.pdf-zoom-group{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-sm);padding:0 2px}
.pdf-zoom-btn{border:none;background:none}
.pdf-zoom-btn:hover{background:rgba(255,255,255,0.28)}
.pdf-zoom-lbl{font-size:10px;font-weight:700;letter-spacing:0.04em;color:rgba(255,255,255,0.8);min-width:32px;text-align:center;user-select:none}
.pdf-expand-btn svg{display:block;pointer-events:none}

/* ── PDF expand / collapse ──────────────────────────────────── */
/* Smooth transition on the info panel so collapse feels native */
.detail-left{transition:flex-basis 0.25s ease,max-height 0.25s ease,min-width 0.25s ease,padding 0.2s ease,border-width 0.25s ease}

/* Desktop (side-by-side): collapse left panel → PDF gets full width */
.detail-mbox.detail-has-pdf.pdf-panel-expanded .detail-left{
  flex:0 0 0!important;min-width:0!important;max-width:0!important;
  padding:0!important;overflow:hidden;border-right:none
}
.detail-mbox.detail-has-pdf.pdf-panel-expanded .detail-right{flex:1}

/* ================================================================
   AI CHAT PANEL
   ================================================================ */

/* Messenger FAB — draggable (pointer cursor — click to open, drag to move) */
#ncp-fab{position:fixed;bottom:24px;right:24px;z-index:903;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:var(--grad-topbar);color:#fff;box-shadow:0 4px 18px rgba(0,38,85,0.45);display:flex;align-items:center;justify-content:center;transition:box-shadow 0.2s;padding:0;overflow:visible;touch-action:none}
#ncp-fab:hover{box-shadow:0 6px 24px rgba(0,38,85,0.55);filter:brightness(1.08)}
#ncp-fab.ms-btn-on{background:linear-gradient(135deg,var(--nass-navy-400),var(--nass-navy-700));box-shadow:0 0 0 3px rgba(255,255,255,0.25),0 6px 24px rgba(0,38,85,0.55)}
#ncp-fab .ms-badge{position:absolute;top:-4px;right:-4px}
.ncp-fab-icon{font-size:26px;line-height:1}

/* Panel */
#ncp-panel{position:fixed;bottom:96px;right:28px;z-index:901;width:400px;max-width:calc(100vw - 40px);height:580px;max-height:calc(100vh - 120px);background:var(--bg-card);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,0.22),0 2px 8px rgba(0,0,0,0.12);display:flex;flex-direction:column;overflow:hidden;transform:scale(0.9) translateY(20px);opacity:0;pointer-events:none;transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1),opacity 0.18s ease}
#ncp-panel.ncp-open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}

/* Panel header */
.ncp-header{background:var(--grad-topbar);color:var(--fg-on-navy);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:2px solid var(--nass-gold-500)}
.ncp-header-info{display:flex;align-items:center;gap:11px}
.ncp-header-icon{font-size:26px;line-height:1}
.ncp-title{font-size:13px;font-weight:700;letter-spacing:0.04em}
.ncp-subtitle{font-size:10.5px;opacity:0.65;margin-top:2px}
.ncp-header-actions{display:flex;gap:6px}
.ncp-icon-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);color:var(--fg-on-navy);border-radius:var(--radius-md);width:28px;height:28px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--ease-std);padding:0}
.ncp-icon-btn:hover{background:rgba(255,255,255,0.28)}

/* Messages area */
.ncp-msgs{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.ncp-msgs::-webkit-scrollbar{width:5px}
.ncp-msgs::-webkit-scrollbar-track{background:transparent}
.ncp-msgs::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:10px}

/* Message bubbles */
.ncp-bubble{display:flex;flex-direction:column;gap:4px;max-width:88%}
.ncp-bubble-user{align-self:flex-end;align-items:flex-end;position:relative}
.ncp-bubble-actions{display:flex;justify-content:flex-end;opacity:0;transition:opacity 0.15s;height:0;overflow:visible}
.ncp-bubble:hover .ncp-bubble-actions{opacity:1}
.ncp-bubble-editing .ncp-bubble-content{outline:2px solid var(--nass-gold-500,#c8a400);outline-offset:2px;opacity:0.7}
.ncp-edit-btn{background:var(--bg-card,#fff);border:1px solid var(--border-default,#c8cdd8);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;color:var(--fg-muted,#5a6375);margin-top:-12px;box-shadow:0 1px 4px rgba(0,0,0,0.12);transition:background 0.12s,color 0.12s;flex-shrink:0}
.ncp-edit-btn:hover{background:var(--nass-navy-700,#003366);color:#fff;border-color:transparent}
body.dark .ncp-edit-btn{background:var(--bg-subtle,#0e1f3a);border-color:var(--border-default,#24375a);color:var(--fg-muted,#96a3bc)}
body.dark .ncp-edit-btn:hover{background:var(--nass-gold-500,#e6c53a);color:#0a1628;border-color:transparent}
.ncp-bubble-assistant{align-self:flex-start;align-items:flex-start}
.ncp-bubble-label{font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:1px}
.ncp-bubble-user .ncp-bubble-label{color:#6b8cb8}
.ncp-bubble-content{padding:10px 13px;border-radius:10px;font-size:12.5px;line-height:1.6;color:var(--fg-ink);word-break:break-word}
.ncp-bubble-user .ncp-bubble-content{background:linear-gradient(135deg,var(--nass-navy-700),var(--nass-navy-400));color:var(--fg-on-navy);border-radius:10px 10px 2px 10px}
.ncp-bubble-assistant .ncp-bubble-content{background:#f0f4fb;border:1px solid #dce3f0;border-radius:10px 10px 10px 2px}
.ncp-code{background:#e8edf5;border:1px solid #c8d0e0;border-radius:3px;padding:1px 5px;font-family:var(--font-mono);font-size:11.5px;color:#1a3060}
.ncp-li{display:block;padding-left:8px}
.ncp-h1{display:block;font-size:13.5px;margin:4px 0 2px}
.ncp-h2{display:block;font-size:13px;margin:3px 0 2px}
.ncp-h3{display:block;font-size:12.5px;margin:2px 0 1px}
.ncp-ts{font-size:9.5px;font-weight:400;opacity:0.55;margin-left:6px;letter-spacing:0}
.ncp-err{color:var(--signal-danger);font-size:12px}
.ncp-retry-btn{display:inline-block;margin-top:6px;padding:4px 10px;font-size:11.5px;font-weight:600;font-family:var(--font-sans);background:#f0f4fb;border:1px solid #c8d0e0;border-radius:var(--radius-pill);color:var(--nass-navy-700);cursor:pointer;transition:background var(--ease-std)}
.ncp-retry-btn:hover{background:var(--bg-subject-hover);border-color:#7aacdd}

/* Typing animation */
.ncp-typing-dots{display:inline-flex;align-items:center;gap:4px;padding:4px 2px}
.ncp-typing-dots span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7a9cc8;animation:ncp-bounce 1.2s infinite ease-in-out}
.ncp-typing-dots span:nth-child(2){animation-delay:0.2s}
.ncp-typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes ncp-bounce{0%,80%,100%{transform:scale(0.7);opacity:0.5}40%{transform:scale(1);opacity:1}}

/* Starter chips */
.ncp-starters{padding:6px 14px 10px;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.ncp-starter{background:#f0f4fb;border:1px solid #c8d0e0;border-radius:var(--radius-pill);padding:5px 11px;font-size:11px;color:var(--nass-navy-700);font-weight:600;cursor:pointer;transition:background var(--ease-std),border-color var(--ease-std);white-space:nowrap;font-family:var(--font-sans)}
.ncp-starter:hover{background:var(--bg-subject-hover);border-color:#7aacdd}

/* Input bar */
.ncp-input-bar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border-soft);flex-shrink:0;background:var(--bg-input)}
#ncp-input{flex:1;border:1px solid var(--border-default);border-radius:var(--radius-2xl);padding:8px 11px;font-size:12.5px;font-family:var(--font-sans);color:var(--fg-ink);resize:none;outline:none;line-height:1.5;max-height:120px;overflow-y:auto;background:var(--bg-card);transition:border-color var(--ease-std),box-shadow var(--ease-std)}
#ncp-input:focus{border-color:var(--nass-navy-700);box-shadow:var(--ring-focus)}
#ncp-input:disabled{opacity:0.6;cursor:not-allowed}
.ncp-send-btn{flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-2xl);border:none;background:var(--grad-topbar);color:var(--fg-on-navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity var(--ease-std),transform 0.1s}
.ncp-send-btn:hover{opacity:0.88;transform:scale(1.06)}
.ncp-send-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.ncp-send-btn svg{width:16px;height:16px}

/* ================================================================
   RESPONSIVE — TABLET & MOBILE
   ================================================================ */

/* ── Tablet (≤ 900px) ─────────────────────────────────────────── */
@media (max-width:900px){
  .app-sub{display:none}
  .sc{min-width:90px;padding:8px 14px}
  .sbar input{width:200px}
  .detail-mbox{width:94vw;max-width:94vw}
  .adm-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* ── Tablet table (641–900px): hide low-priority columns ──────── */
@media (max-width:900px) and (min-width:641px){
  /* Hide: Serial, Last Action, Date Received, Date Moved, SLA, Remarks */
  .tw th:nth-child(1),.tw td:nth-child(1),
  .tw th:nth-child(6),.tw td:nth-child(6),
  .tw th:nth-child(7),.tw td:nth-child(7),
  .tw th:nth-child(8),.tw td:nth-child(8),
  .tw th:nth-child(9),.tw td:nth-child(9),
  .tw th:nth-child(13),.tw td:nth-child(13){display:none!important}
  th{font-size:9.5px;padding:8px 5px}
  td input[type=text],td input[type=date],td select{font-size:11.5px;padding:6px 5px}
  .act-cell{width:90px;min-width:90px}
  .view-btn,.edit-btn{padding:3px 5px;font-size:10.5px}
}

/* ── Docked split-view: hide lowest-priority columns ─────────── */
body.ms-docked .tw th:nth-child(7),body.ms-docked .tw td:nth-child(7),
body.ms-docked .tw th:nth-child(8),body.ms-docked .tw td:nth-child(8),
body.ms-docked .tw th:nth-child(9),body.ms-docked .tw td:nth-child(9),
body.ms-docked .tw th:nth-child(13),body.ms-docked .tw td:nth-child(13){display:none!important}
body.ms-docked th{font-size:9.5px;padding:8px 5px}
body.ms-docked td input[type=text],body.ms-docked td input[type=date],body.ms-docked td select{font-size:11.5px;padding:6px 5px}
body.ms-docked .act-cell{width:90px;min-width:90px}
body.ms-docked .view-btn,body.ms-docked .edit-btn{padding:3px 5px;font-size:10.5px}
/* Constrain modals to content area so they don't overlap the docked chat panel */
body.ms-docked .mbg{right:var(--ms-dock-w)}
body.ms-docked .detail-mbox.detail-has-pdf{width:calc(97vw - var(--ms-dock-w));max-width:calc(97vw - var(--ms-dock-w))}

/* ── Mobile (≤ 640px) ─────────────────────────────────────────── */
@media (max-width:640px){

  /* ── Topbar: ultra-compact ──────────────────────────────────── */
  .topbar{padding:0 8px;gap:4px}
  #nass-user-wrap{border-left:none!important;margin-left:0!important;padding-left:0!important;gap:4px}
  .topbar__user-info{display:none}
  .topbar__cta{display:none}
  .topbar__icon-btn{width:28px;height:28px;font-size:12px}

  /* ── Stats bar: 2-per-row ───────────────────────────────────── */
  .stats{padding:8px 12px;gap:8px}
  .sc{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px);padding:8px 10px}
  .sn{font-size:20px}
  .sl{font-size:9px}

  /* ── Filter bar ─────────────────────────────────────────────── */
  .sbar{padding:8px 12px;gap:6px}
  .sbar input{width:100%;min-width:0}
  .sbar label{display:none}
  .sbar select{flex:1;min-width:0}

  /* ── Card table: unwrap chrome ─────────────────────────────── */
  .tw{overflow:visible;max-height:none}
  .tw table{display:block}
  .tw thead{display:none}
  .tw tbody{display:flex;flex-direction:column;gap:10px;padding:10px 12px}

  /* Row → card */
  .tw tr{
    display:grid;
    grid-template-columns:1fr auto;
    margin:0;
    border:1px solid var(--border-soft);
    border-left:3px solid var(--border-default);
    border-radius:10px;
    background:var(--bg-card);
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
    overflow:hidden
  }
  /* Status accent → left border (replaces full row colour) */
  .tw .s-active   {border-left-color:var(--status-active-fg)}
  .tw .s-completed{border-left-color:var(--status-completed-fg)}
  .tw .s-hold     {border-left-color:var(--status-hold-fg)}
  .tw .s-cancelled{border-left-color:var(--status-cancelled-fg)}
  .tw .s-filed    {border-left-color:var(--status-filed-fg)}
  .tw .row-overdue{border-left-color:var(--signal-danger)}
  /* Reset all td backgrounds inside cards */
  .tw td,
  .tw .s-active td,.tw .s-completed td,.tw .s-hold td,
  .tw .s-cancelled td,.tw .s-filed td,.tw .row-overdue td,
  .tw tr:hover td{background:transparent!important;border:none;padding:0}
  /* Hide all cells by default; show only key ones below */
  .tw td{display:none!important;vertical-align:top}

  /* ── Cell 2: File Ref — header left ────────────────────────── */
  .tw td:nth-child(2){
    display:block!important;grid-column:1;grid-row:1;
    padding:10px 12px 2px;
    font-size:10px;font-weight:700;color:var(--fg-subtle);
    letter-spacing:0.06em;text-transform:uppercase;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  /* ── Cell 11: Status — top-right, spans rows 1-2 ───────────── */
  .tw td:nth-child(11){
    display:flex!important;align-items:flex-start;justify-content:flex-end;
    grid-column:2;grid-row:1/3;
    padding:10px 12px 4px;
    font-size:11px;font-weight:700;white-space:nowrap
  }
  /* ── Cell 3: Subject — main content ────────────────────────── */
  .tw td:nth-child(3){
    display:block!important;grid-column:1;grid-row:2;
    padding:2px 12px 8px;
    font-size:13px;font-weight:600;color:var(--nass-navy-700);
    cursor:pointer;line-height:1.4
  }
  .tw td:nth-child(3):hover{background:transparent!important;color:var(--nass-navy-700)}
  /* ── Cell 5: Officer ────────────────────────────────────────── */
  .tw td:nth-child(5){
    display:flex!important;align-items:center;gap:5px;
    grid-column:1;grid-row:3;
    padding:0 12px 8px;
    font-size:11.5px;color:var(--fg-muted)
  }
  .tw td:nth-child(5)::before{
    content:"Officer:";flex-shrink:0;
    font-size:9.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.06em;color:var(--fg-faint)
  }
  /* ── Cell 12: Delay flag ────────────────────────────────────── */
  .tw td:nth-child(12){
    display:flex!important;align-items:flex-end;justify-content:flex-end;
    grid-column:2;grid-row:3;
    padding:0 12px 8px;
    font-size:11px;font-weight:700;white-space:nowrap
  }
  /* ── Cell 14: Actions — full-width footer ───────────────────── */
  .tw td:nth-child(14){
    display:flex!important;
    grid-column:1/-1;grid-row:4;
    padding:8px 12px;gap:8px;
    align-items:center;justify-content:flex-end;
    border-top:1px solid var(--border-divider);
    background:var(--bg-subtle)!important
  }
  /* Touch-friendly action buttons */
  .view-btn,.edit-btn{font-size:12px;padding:7px 14px}
  .del{width:28px;height:28px}

  /* ── Bottom bar ─────────────────────────────────────────────── */
  .bbar{padding:8px 12px;flex-wrap:wrap;gap:6px}
  #nass-pager{margin-left:0!important;width:100%;justify-content:center;flex-wrap:wrap}

  /* ── Edit / Add modal: 1-column ─────────────────────────────── */
  .mbox{padding:18px 14px;width:96vw}
  .mg{grid-template-columns:1fr}
  .full{grid-column:1}
  .mbr{flex-wrap:wrap;gap:6px}
  .mok,.mcancel,.medit{flex:1;text-align:center;min-width:0}

  /* ── Detail modal ───────────────────────────────────────────── */
  .detail-mbox{width:96vw!important;max-width:96vw}
  .detail-grid{grid-template-columns:1fr}
  .detail-header{flex-direction:column;gap:10px}
  .detail-badges{flex-direction:row;align-items:center}
  /* PDF split panel stacks vertically on mobile */
  .detail-mbox.detail-has-pdf{flex-direction:column;width:96vw!important;height:94vh;height:94svh}
  .detail-left{flex:0 0 auto;max-width:100%;min-width:0;max-height:46vh;max-height:46svh;border-right:none;border-bottom:1px solid var(--border-divider);overflow-y:auto;padding:18px 14px}
  .detail-right{flex:1;min-height:0}

  /* ── Admin panel ────────────────────────────────────────────── */
  .adm{padding:12px}
  .adm-grid{grid-template-columns:1fr}

  /* ── Users panel ────────────────────────────────────────────── */
  #view-users{padding:16px 12px}

  /* ── Activity log: card layout on mobile ─────────────────────── */
  #view-audit{padding:14px 10px}
  #view-audit .tw table{display:block}
  #view-audit .tw thead{display:none}
  #view-audit .tw tbody{display:flex;flex-direction:column;gap:8px;padding:0}
  #view-audit .tw tr{display:grid;grid-template-columns:1fr auto;border:1px solid var(--border-soft);border-radius:8px;background:var(--bg-card);box-shadow:0 1px 3px rgba(0,0,0,0.05);overflow:hidden;margin:0}
  /* Explicitly hide tracker-shown columns that don't belong in audit cards */
  #view-audit .tw td:nth-child(2){display:none!important}
  /* Timestamp top-left (col 1) */
  #view-audit .tw td:nth-child(1){display:block!important;grid-column:1;grid-row:1;padding:10px 12px 2px;font-size:10px;font-weight:700;color:var(--fg-subtle);letter-spacing:0.04em;white-space:nowrap;background:transparent!important;border:none}
  /* Badge top-right (col 3) */
  #view-audit .tw td:nth-child(3){display:flex!important;justify-content:flex-end;align-items:flex-start;grid-column:2;grid-row:1/3;padding:10px 10px 4px;background:transparent!important;border:none}
  /* Record name (col 4) */
  #view-audit .tw td:nth-child(4){display:block!important;grid-column:1;grid-row:2;padding:2px 12px 8px;font-size:13px;font-weight:600;color:var(--nass-navy-700);white-space:normal;overflow:visible;text-overflow:clip;background:transparent!important;border:none}
  /* Before→After footer (col 5) */
  #view-audit .tw td:nth-child(5){display:block!important;grid-column:1/-1;grid-row:3;padding:6px 12px;font-size:11px;color:var(--fg-muted);border-top:1px solid var(--border-divider)!important;background:var(--bg-subtle)!important}
  #view-audit .tw td:nth-child(5)::before{content:none!important}

  /* ── Drive search mobile (≤640px fallback) ────────────────────── */
  .ds-wrap{padding:16px 12px}
  .ds-search-bar{flex-direction:column}
  .ds-btn{width:100%}
  .ds-actions{flex-wrap:wrap}

  /* ── Pagination ─────────────────────────────────────────────── */
  .pg-btn{min-width:28px;height:28px;font-size:12px}
  .pg-arrow{min-width:50px;font-size:11px}

  /* ── PDF viewer: scrollable + zoomed on mobile ─────────────── */
  #d-pdf-rotate-wrap{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  #d-pdf-frame{touch-action:pan-x pan-y}
  .pdf-panel-header{flex-wrap:wrap;gap:6px}
  .pdf-open-link{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:4px;padding:4px 10px}

  /* Mobile expand: collapse the top info panel → PDF fills the modal */
  .detail-mbox.detail-has-pdf.pdf-panel-expanded .detail-left{
    max-height:0!important;flex:0 0 0!important;
    padding:0!important;border-bottom:none;overflow:hidden
  }
  .detail-mbox.detail-has-pdf.pdf-panel-expanded .detail-right{flex:1;min-height:0}

  /* ── AI Chat panel: full width ──────────────────────────────── */
  #ncp-panel{left:8px;right:8px;width:auto;bottom:68px;border-radius:12px;height:clamp(340px,70vh,580px)}
  #ncp-fab{bottom:14px;right:14px;width:50px;height:50px}
  .ncp-fab-icon{font-size:22px}

  /* ── Login / pw-change modals ───────────────────────────────── */
  #nass-login>div,#nass-pwchange>div{padding:32px 22px}
}

/* ── Small phones (≤ 380px) ──────────────────────────────────── */
@media (max-width:380px){
  .app-title{font-size:9.5px}
  .tab{font-size:10px;padding:5px 3px}
  .sc{padding:7px 8px}
  .sn{font-size:18px}
}

/* ================================================================
   DUE-DATE COUNTDOWN BADGES
   ================================================================ */
.cdg-over{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.02em;background:var(--delay-overdue-bg);color:var(--delay-overdue-deep);white-space:nowrap}
.cdg-urgent{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.02em;background:#fff3e0;color:#e65100;white-space:nowrap}
.cdg-warn{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.02em;background:#fffde7;color:#f9a825;white-space:nowrap}

/* ================================================================
   COLUMN VISIBILITY — hide-col-N classes toggle pairs of th+td
   ================================================================ */
.tw table.hide-col-2 th:nth-child(2),.tw table.hide-col-2 td:nth-child(2){display:none!important}
.tw table.hide-col-4 th:nth-child(4),.tw table.hide-col-4 td:nth-child(4){display:none!important}
.tw table.hide-col-5 th:nth-child(5),.tw table.hide-col-5 td:nth-child(5){display:none!important}
.tw table.hide-col-6 th:nth-child(6),.tw table.hide-col-6 td:nth-child(6){display:none!important}
.tw table.hide-col-7 th:nth-child(7),.tw table.hide-col-7 td:nth-child(7){display:none!important}
.tw table.hide-col-8 th:nth-child(8),.tw table.hide-col-8 td:nth-child(8){display:none!important}
.tw table.hide-col-9 th:nth-child(9),.tw table.hide-col-9 td:nth-child(9){display:none!important}
.tw table.hide-col-10 th:nth-child(10),.tw table.hide-col-10 td:nth-child(10){display:none!important}
.tw table.hide-col-11 th:nth-child(11),.tw table.hide-col-11 td:nth-child(11){display:none!important}
.tw table.hide-col-12 th:nth-child(12),.tw table.hide-col-12 td:nth-child(12){display:none!important}
.tw table.hide-col-13 th:nth-child(13),.tw table.hide-col-13 td:nth-child(13){display:none!important}

/* ================================================================
   COLUMN VISIBILITY POPOVER
   ================================================================ */
.cvp-wrap{position:relative;flex-shrink:0}
.btn-col-vis{background:rgba(0,51,102,0.07);color:var(--nass-navy-700);border:1px solid var(--border-soft);font-size:11.5px;padding:5px 10px}
.btn-col-vis:hover{background:rgba(0,51,102,0.14)}
.cvp{display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:0 8px 24px rgba(0,0,0,0.14);min-width:190px;padding:8px 0}
.cvp.cvp-open{display:block}
.cvp-title{padding:6px 14px 8px;font-size:10.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--fg-faint);border-bottom:1px solid var(--border-divider);margin-bottom:4px}
.cvp-row{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:12.5px;color:var(--fg-body);cursor:pointer;transition:background var(--ease-std)}
.cvp-row:hover{background:var(--bg-muted)}
.cvp-row input[type=checkbox]{accent-color:var(--nass-navy-700);width:14px;height:14px;cursor:pointer}

/* ================================================================
   BULK STATUS UPDATE
   ================================================================ */
/* Row checkbox — inside Serial td */
.row-chk{accent-color:var(--nass-navy-700);width:13px;height:13px;cursor:pointer;vertical-align:middle;margin-right:4px;flex-shrink:0}
/* Select-all in Serial th */
#chk-all{accent-color:var(--nass-gold-500);width:13px;height:13px;cursor:pointer;vertical-align:middle;margin-right:5px}
/* Highlight selected row */
.row-selected td{background:rgba(0,85,170,0.07)!important}
/* Bulk action bar — slides up from bottom */
.bulk-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 20px;
  background:var(--nass-navy-700);color:var(--fg-on-navy);
  box-shadow:0 -4px 20px rgba(0,0,0,0.30);
  transform:translateY(100%);transition:transform 0.22s ease;
}
.bulk-bar.bulk-bar-open{transform:translateY(0)}
.bulk-cnt{font-size:13px;font-weight:700;flex-shrink:0}
.bulk-lbl{font-size:12px;color:rgba(255,255,255,0.75);flex-shrink:0}
.bulk-sel{padding:5px 8px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.12);color:var(--fg-on-navy);font-size:12px;font-family:var(--font-sans);cursor:pointer}
.bulk-sel option{background:var(--nass-navy-700)}
.bulk-cancel{background:rgba(255,255,255,0.12);color:var(--fg-on-navy);border:1px solid rgba(255,255,255,0.25)}
.bulk-cancel:hover{background:rgba(255,255,255,0.22)}
@media (max-width:640px){
  .bulk-bar{padding:8px 12px;gap:7px}
  .bulk-cnt{font-size:12px}
  .row-chk,#chk-all{width:16px;height:16px}
}

/* ================================================================
   PRINT STYLESHEET
   ================================================================ */
/* ================================================================
   DASHBOARD
   ================================================================ */
#view-dashboard{padding:20px;background:var(--bg-app);min-height:calc(100vh - 56px)}
/* Summary stat tiles */
.db-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.db-tile{flex:1 1 100px;min-width:100px;background:var(--bg-card);border-radius:var(--radius-card);padding:14px 18px;box-shadow:var(--shadow-card);border-top:3px solid var(--border-default);cursor:default}
.db-tile-link{cursor:pointer;transition:box-shadow var(--ease-std),transform var(--ease-std)}
.db-tile-link:hover{box-shadow:var(--shadow-tile-hov);transform:translateY(-2px)}
.db-tile-n{font-size:26px;font-weight:800;color:var(--fg-ink);line-height:1}
.db-tile-l{font-size:11px;font-weight:600;color:var(--fg-subtle);margin-top:4px;text-transform:uppercase;letter-spacing:0.06em}
.db-t-active{border-top-color:var(--status-active-fg)}.db-t-active .db-tile-n{color:var(--status-active-fg)}
.db-t-over{border-top-color:var(--delay-overdue-deep)}.db-t-over .db-tile-n{color:var(--delay-overdue-deep)}
.db-t-comp{border-top-color:var(--status-completed-fg)}.db-t-comp .db-tile-n{color:var(--status-completed-fg)}
.db-t-hold{border-top-color:var(--status-hold-fg)}.db-t-hold .db-tile-n{color:var(--status-hold-fg)}
.db-t-filed{border-top-color:var(--status-filed-fg)}.db-t-filed .db-tile-n{color:var(--status-filed-fg)}
/* Charts row */
.db-charts{display:grid;grid-template-columns:360px 1fr;gap:16px;margin-bottom:16px}
.db-card{background:var(--bg-card);border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow-card)}
.db-card-title{font-size:12px;font-weight:700;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px}
.db-chart-wrap{height:260px;position:relative}
.db-chart-bar-wrap{height:280px}
/* Overdue table card */
.db-overdue-card{margin-bottom:20px}
.db-od-tbl{width:100%;border-collapse:collapse;font-size:12px}
.db-od-tbl thead th{background:var(--bg-muted);padding:7px 10px;text-align:left;font-size:11px;font-weight:700;letter-spacing:0.04em;color:var(--fg-subtle);border-bottom:2px solid var(--border-soft)}
.db-od-tbl tbody td{padding:7px 10px;border-bottom:1px solid var(--border-divider);vertical-align:middle}
.db-od-row{cursor:pointer}
.db-od-tbl tbody tr:hover td{background:var(--bg-row-hover)}
/* Overdue table pager */
.db-pager{display:flex;align-items:center;gap:4px;padding:10px 0 2px;flex-wrap:wrap}
.db-pg-btn{min-width:30px;height:30px;padding:0 6px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--fg-body);font-size:12px;font-family:var(--font-sans);cursor:pointer;transition:background var(--ease-std)}
.db-pg-btn:hover:not(:disabled){background:var(--bg-muted)}
.db-pg-btn:disabled{opacity:0.35;cursor:default}
.db-pg-active{background:var(--nass-navy-700)!important;color:#fff!important;border-color:var(--nass-navy-700)!important;font-weight:700}
.db-pg-arrow{font-size:13px}
.db-pg-gap{padding:0 2px;color:var(--fg-faint);font-size:12px;line-height:30px}
.db-pg-info{margin-left:8px;font-size:11px;color:var(--fg-faint)}
@media(max-width:900px){.db-charts{grid-template-columns:1fr}}
@media(max-width:640px){.db-stats{gap:8px}.db-tile{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px);padding:10px 12px}.db-tile-n{font-size:22px}}

/* ================================================================
   CHANGE HISTORY SECTION (detail panel)
   ================================================================ */
.dh-section{margin:14px 0 8px;border-top:1px solid var(--border-divider);padding-top:12px}
.dh-section-title{font-size:10.5px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:8px}
.dh-list{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:0}
.dh-item{padding:8px 0;border-bottom:1px solid var(--border-divider)}
.dh-item:last-child{border-bottom:none}
.dh-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;gap:8px}
.dh-who{font-size:11px;font-weight:700;color:var(--nass-navy-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-when{font-size:10px;color:var(--fg-faint);white-space:nowrap;flex-shrink:0}
.dh-what{font-size:12px;color:var(--fg-body);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dh-old{color:var(--signal-danger);text-decoration:line-through;font-size:11px}
.dh-arr{color:var(--fg-faint);font-size:11px}
.dh-new{color:var(--signal-success);font-weight:700;font-size:11px}
.dh-empty{font-size:12px;color:var(--fg-faint);padding:10px 0;text-align:center}

/* ================================================================
   TAB NOTIFICATION BADGE
   ================================================================ */
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;background:#d32f2f;color:#fff;border-radius:var(--radius-pill);font-size:9.5px;font-weight:800;margin-left:5px;vertical-align:middle;line-height:1;flex-shrink:0}

/* ================================================================
   KANBAN BOARD
   ================================================================ */
#view-kanban{padding:16px 20px;background:var(--bg-app);min-height:calc(100vh - 56px)}
.kb-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:20px;align-items:flex-start;min-height:calc(100vh - 110px)}
.kb-col{flex:0 0 270px;background:var(--bg-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
.kb-col-head{padding:11px 14px;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--border-default);border-radius:var(--radius-card) var(--radius-card) 0 0;background:var(--bg-card);position:sticky;top:0;z-index:2}
.kb-col-title{text-transform:uppercase;letter-spacing:.07em;color:var(--fg-ink)}
.kb-col-cnt{background:var(--bg-muted);color:var(--fg-subtle);border-radius:var(--radius-pill);padding:1px 9px;font-size:11px;font-weight:700}
.kb-col-body{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}
.kb-card{background:var(--bg-subtle);border:1px solid var(--border-soft);border-left:3px solid var(--border-default);border-radius:var(--radius-xl);padding:10px 12px;transition:box-shadow var(--ease-std)}
.kb-card:hover{box-shadow:var(--shadow-card)}
.kb-overdue{border-left-color:var(--delay-overdue-deep);background:var(--delay-overdue-bg)}
.kb-card-ref{font-size:9.5px;font-weight:700;color:var(--fg-faint);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-card-ref:hover{color:var(--nass-navy-700)}
.kb-card-sub{font-size:12px;font-weight:600;color:var(--nass-navy-700);cursor:pointer;line-height:1.45;margin-bottom:7px}
.kb-card-sub:hover{text-decoration:underline}
.kb-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:9px}
.kb-card-officer{font-size:11px;color:var(--fg-muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.kb-card-foot{display:flex;align-items:center;gap:7px;border-top:1px solid var(--border-divider);padding-top:8px}
.kb-status-sel{flex:1;padding:4px 6px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-sans);background:var(--bg-card);color:var(--fg-ink);cursor:pointer}
.kb-view-btn{padding:3px 10px;border:1px solid var(--nass-navy-700);color:var(--nass-navy-700);background:none;border-radius:var(--radius-sm);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font-sans);flex-shrink:0;transition:background var(--ease-std),color var(--ease-std)}
.kb-view-btn:hover{background:var(--nass-navy-700);color:#fff}
.kb-empty{text-align:center;padding:28px 12px;font-size:12px;color:var(--fg-faint);font-style:italic}
@media(max-width:640px){#view-kanban{padding:10px 12px}.kb-col{flex:0 0 230px}}

/* ================================================================
   KEYBOARD SHORTCUTS HELP OVERLAY
   ================================================================ */
.shortcuts-help{position:fixed;bottom:80px;right:28px;z-index:9100;background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:0 8px 32px rgba(0,0,0,0.18);min-width:230px;overflow:hidden;animation:sh-in .15s ease}
@keyframes sh-in{from{opacity:0;transform:scale(0.94) translateY(6px)}to{opacity:1;transform:none}}
.sh-title{background:var(--nass-navy-700);color:#fff;padding:10px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.sh-close{background:none;border:none;color:rgba(255,255,255,0.75);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.sh-close:hover{color:#fff}
.sh-row{display:flex;align-items:center;gap:14px;padding:7px 14px;font-size:12px;color:var(--fg-body);border-bottom:1px solid var(--border-divider)}
.sh-row:last-child{border-bottom:none}
kbd{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;background:var(--bg-muted);border:1px solid var(--border-default);border-radius:4px;font-size:11px;font-family:var(--font-mono);font-weight:700;color:var(--fg-ink);min-width:28px;box-shadow:0 1px 0 var(--border-default)}

/* ================================================================
   DARK MODE
   ================================================================ */
body.dark{
  /* ── Design system dark tokens (midnight navy, gold elevated) ── */
  --bg-app:#05101f;--bg-card:#0b1a30;--bg-subtle:#0e1f3a;--bg-muted:#0a1729;
  --bg-panel:#0d1c34;--bg-row-hover:#17305a;--bg-subject-hover:#1e3d6e;
  --bg-focus-cell:rgba(230,197,58,0.10);--bg-input:#0a1628;--bg-pdf:#08152a;
  --fg-ink:#eaf0fa;--fg-body:#c8d2e4;--fg-muted:#96a3bc;--fg-subtle:#7a88a3;
  --fg-faint:#55637e;--fg-placeholder:#4d5c77;
  --border-default:#24375a;--border-soft:#1a2b4a;--border-row-b:#16263f;
  --border-row-r:#142439;--border-divider:#162640;
  --border-strong:#3b6fb8;
  --nass-navy-900:#7aa3d9;--nass-navy-800:#5c8ac9;--nass-navy-700:#3b6fb8;
  --nass-navy-600:#264d8a;--nass-navy-500:#1a3560;--nass-navy-400:#12284a;
  --nass-navy-300:#0c1e3a;--nass-navy-200:#081630;--nass-navy-100:#05101f;
  --nass-gold-500:#e6c53a;--nass-gold-600:#d4b82a;--nass-gold-300:#ffe388;
  --status-active-row:rgba(74,158,255,0.07);--status-active-fg:#8ac2ff;--status-active-bg:rgba(74,158,255,0.18);
  --status-completed-row:rgba(61,220,151,0.07);--status-completed-fg:#7bebb5;--status-completed-bg:rgba(61,220,151,0.16);
  --status-hold-row:rgba(230,197,58,0.08);--status-hold-fg:#ffe388;--status-hold-bg:rgba(230,197,58,0.18);
  --status-cancelled-row:rgba(255,90,108,0.07);--status-cancelled-fg:#ff8a98;--status-cancelled-bg:rgba(255,90,108,0.18);
  --status-filed-row:rgba(178,140,255,0.07);--status-filed-fg:#d1b6ff;--status-filed-bg:rgba(178,140,255,0.18);
  --delay-overdue:#ff6f7e;--delay-overdue-deep:#ff8a98;--delay-overdue-bg:rgba(255,111,126,0.18);
  --delay-ontime:#3ddc97;--delay-ontime-deep:#7bebb5;--delay-ontime-bg:rgba(61,220,151,0.16);
  --stat-overdue:#ff6f7e;--stat-ontrack:#3ddc97;--stat-hold:#e6c53a;--stat-active:#7aa3d9;
  --signal-danger:#ff5a6c;--signal-danger-hover-bg:rgba(255,90,108,0.14);--signal-success:#3ddc97;
  --tag-bg:rgba(74,158,255,0.12);--tag-border:rgba(74,158,255,0.28);--tag-fg:#b4d3ff;--tag-x:#6b84a8;
  --bg-topbar:#04101e;--grad-gold-cta:linear-gradient(180deg,#f4d968 0%,#e6c53a 100%);
  --tb-fg:#ffffff;--tb-nav-color:rgba(255,255,255,0.65);--tb-nav-active:#ffffff;--tb-nav-hover:rgba(255,255,255,0.07);
  --tb-search-bg:rgba(255,255,255,0.07);--tb-search-border:rgba(255,255,255,0.12);--tb-search-color:#ffffff;--tb-search-ph:rgba(255,255,255,0.28);--tb-search-hint:rgba(255,255,255,0.25);
  --tb-icon-bg:rgba(255,255,255,0.06);--tb-icon-border:rgba(255,255,255,0.14);--tb-icon-color:rgba(255,255,255,0.7);--tb-icon-hover:rgba(255,255,255,0.15);
  --tb-user-div:rgba(255,255,255,0.12);--tb-user-email:rgba(255,255,255,0.72);
  --tb-shadow:0 2px 12px rgba(0,0,0,0.55),0 1px 0 rgba(230,197,58,0.18) inset;
  --grad-topbar:linear-gradient(135deg,#04101e 0%,#0a1c38 60%,#102647 100%);
  --grad-table-head:linear-gradient(to bottom,#0f2447,#081630);
  --shadow-topbar:0 2px 12px rgba(0,0,0,0.55),0 1px 0 rgba(230,197,58,0.18) inset;
  --shadow-card:0 1px 2px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-modal:0 30px 80px rgba(0,0,0,0.75),0 0 0 1px rgba(122,163,217,0.14);
  --ring-focus:0 0 0 3px rgba(230,197,58,0.30);
  color:#eaf0fa;color-scheme:dark;
}
/* ── Base table cells ── */
body.dark td{background:#14202e!important;color:#f0f4ff!important;border-bottom-color:#2e4464!important;border-right-color:#263c58!important}
body.dark tr:nth-child(even) td{background:#182030!important}
body.dark tr:hover td{background:#1f3d60!important}
/* ── Status rows — solid colored fills mirroring light mode, dark-adapted ── */
body.dark .s-active td{background:#0e2a50!important;color:#eaf0fa!important;border-left:3px solid #4a9eff}
body.dark .s-completed td{background:#0c3020!important;color:#eaf0fa!important;border-left:3px solid #3ddc97}
body.dark .s-hold td{background:#2a2008!important;color:#eaf0fa!important;border-left:3px solid #e6c53a}
body.dark .s-cancelled td{background:#280e18!important;color:#eaf0fa!important;border-left:3px solid #ff5a6c}
body.dark .s-filed td{background:#1c1038!important;color:#eaf0fa!important;border-left:3px solid #b28cff}
body.dark .row-overdue td{background:#2e0c14!important;color:#eaf0fa!important;border-left:3px solid #ff5a6c}
/* Glow on left border cell */
body.dark .s-active td:first-child{box-shadow:inset 3px 0 0 #4a9eff,inset 0 0 10px rgba(74,158,255,0.2)!important}
body.dark .s-completed td:first-child{box-shadow:inset 3px 0 0 #3ddc97,inset 0 0 10px rgba(61,220,151,0.2)!important}
body.dark .s-hold td:first-child{box-shadow:inset 3px 0 0 #e6c53a,inset 0 0 10px rgba(230,197,58,0.2)!important}
body.dark .s-cancelled td:first-child{box-shadow:inset 3px 0 0 #ff5a6c,inset 0 0 10px rgba(255,90,108,0.2)!important}
body.dark .s-filed td:first-child{box-shadow:inset 3px 0 0 #b28cff,inset 0 0 10px rgba(178,140,255,0.2)!important}
body.dark .row-overdue td:first-child{box-shadow:inset 3px 0 0 #ff5a6c,inset 0 0 10px rgba(255,90,108,0.25)!important}
/* Hover */
body.dark tr:hover.s-active td,body.dark tr:hover.s-completed td,body.dark tr:hover.s-hold td,body.dark tr:hover.s-cancelled td,body.dark tr:hover.s-filed td,body.dark tr:hover.row-overdue td{background:#17305a!important}
/* ── Countdown / delay badges — vivid ── */
body.dark .cdg-over{background:#4a0e18!important;color:#ff8080!important;border:1px solid #ff3355}
body.dark .cdg-urgent{background:#3a2000!important;color:#ffb040!important;border:1px solid #ff9020}
body.dark .cdg-warn{background:#302800!important;color:#ffdf40!important;border:1px solid #ffc820}
body.dark .flag-overdue{color:#ff6060!important;font-weight:800!important}
body.dark .flag-ontime{color:#3ddd88!important;font-weight:800!important}
/* ── Status inline pill ── */
body.dark .stat-inl{background:#1c2a3c!important;color:#ccd8ee!important;border:1px solid #3a5070!important}
/* ── UI bars ── */
body.dark .stats,body.dark .sbar{background:#14202e!important;border-color:#3a5070!important}
body.dark .bbar{background:#14202e!important;border-top-color:#4a9eff!important}
body.dark .sbar label{color:#a0bad8!important}
body.dark .fc{color:#a0bad8!important}
/* ── Nav items (topbar is always dark, no dark-mode override needed) ── */
/* ── Stats tiles ── */
body.dark .sc{background:linear-gradient(180deg,rgba(18,40,74,0.65) 0%,rgba(11,26,48,0.7) 100%)!important;border-color:#1a2b4a!important;box-shadow:0 1px 2px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.03)!important}
body.dark .sn{color:#7aa3d9!important}
body.dark .sn.r{color:#ff6f7e!important;text-shadow:0 0 16px rgba(255,111,126,0.35)!important}
body.dark .sn.g{color:#3ddc97!important;text-shadow:0 0 16px rgba(61,220,151,0.30)!important}
body.dark .sn.a{color:#e6c53a!important;text-shadow:0 0 16px rgba(230,197,58,0.30)!important}
body.dark .sn.c{color:#ff5a6c!important;text-shadow:0 0 16px rgba(255,90,108,0.30)!important}
body.dark .sn.f{color:#b28cff!important;text-shadow:0 0 16px rgba(178,140,255,0.30)!important}
body.dark .sl{color:#7a88a3!important}
/* ── Cards and modals ── */
body.dark .acard{background:#14202e!important;border-color:#3a5070!important}
body.dark .acard h3{color:#82bcff!important;border-color:#1c2e44!important}
/* ── Detail modal — dark mode ── */
body.dark .mbox,body.dark .detail-mbox{background:#0b1a30!important;border:1px solid #1a2b4a!important}
body.dark .detail-left{background:#0b1a30!important;border-right-color:#162640!important}
body.dark .detail-right{background:#08152a!important}
body.dark .mbox h3{color:#7aa3d9!important;border-bottom-color:#162640!important}
body.dark #d-pdf-title-bar{background:#0a1728!important;color:#c8d2e4!important;border-bottom-color:#1a2b4a!important}
body.dark #d-pdf-loading{color:#7a88a3!important}
body.dark .pdf-panel-header{background:#0c1e3a!important;border-bottom:1px solid rgba(230,197,58,0.15)!important}
body.dark .pdf-rot-btn{background:rgba(234,240,250,0.08)!important;border-color:rgba(234,240,250,0.18)!important}
body.dark .pdf-rot-btn:hover{background:rgba(234,240,250,0.22)!important}
body.dark .mf label{color:#96a3bc!important}
body.dark .mbg{background:rgba(0,6,16,0.88)!important}
body.dark .mbr{border-color:#162640!important}
body.dark .mcancel{background:#0e1f3a!important;color:#c8d2e4!important;border-color:#24375a!important}
body.dark .medit{background:#0e1f3a!important;color:#7aa3d9!important;border-color:#24375a!important}
/* ── Change history ── */
body.dark .dh-item{background:#0d1c34!important;border-color:#16263f!important}
body.dark .dh-who{color:#7aa3d9!important}
body.dark .dh-when{color:#7a88a3!important}
body.dark .dh-old{color:#ff6f7e!important}
body.dark .dh-new{color:#3ddc97!important}
body.dark .dh-arr{color:#55637e!important}
body.dark .dh-section-title{color:#7a88a3!important;border-color:#162640!important}
/* ── Dashboard ── */
body.dark .db-card,body.dark .db-tile{background:#14202e!important;border-color:#3a5070!important}
body.dark .db-card-title{color:#a0bad8!important}
body.dark .db-tile-n{color:#82bcff!important}
body.dark .db-tile-l{color:#8aabcc!important}
body.dark .db-t-active .db-tile-n{color:#4a9eff!important}
body.dark .db-t-over .db-tile-n{color:#ff6060!important}
body.dark .db-t-comp .db-tile-n{color:#3ddd88!important}
body.dark .db-t-hold .db-tile-n{color:#ffc030!important}
body.dark .db-od-tbl td{background:#14202e!important;color:#f0f4ff!important;border-color:#3a5070!important}
body.dark .db-od-row:hover td{background:#1f3d60!important}
body.dark .pg-btn{background:#0a1628!important;color:#c8d2e4!important;border-color:#24375a!important}
body.dark .pg-btn:hover:not(:disabled){background:#17305a!important;color:#eaf0fa!important;border-color:#3b6fb8!important}
body.dark .pg-btn.pg-active{background:linear-gradient(180deg,#3b6fb8,#1a3560)!important;border-color:#e6c53a!important;color:#fff!important;font-weight:700!important;box-shadow:0 0 0 1px rgba(230,197,58,0.4),0 2px 8px rgba(230,197,58,0.25)!important}
body.dark .db-pg-btn{background:#0a1628!important;color:#c8d2e4!important;border-color:#24375a!important}
body.dark .db-pg-active{background:linear-gradient(180deg,#3b6fb8,#1a3560)!important;color:#fff!important;border-color:#e6c53a!important;box-shadow:0 0 0 1px rgba(230,197,58,0.4)!important}
/* ── Kanban ── */
body.dark .kb-card{background:#182434!important;border-color:#3a5070!important}
body.dark .kb-col{background:#14202e!important}
body.dark .kb-col-head{background:#14202e!important;border-color:#3a5070!important}
body.dark .kb-col-title{color:#f0f4ff!important}
body.dark .kb-col-cnt{background:#1c2a3c!important;color:#a0bad8!important}
body.dark .kb-card-ref{color:#a0bad8!important}
body.dark .kb-card-sub{color:#82bcff!important}
body.dark .kb-card-officer{color:#8aabcc!important}
body.dark .kb-card-foot{border-color:#2e4464!important}
body.dark .kb-empty{color:#526a88!important}
body.dark .kb-view-btn{border-color:#3ddd88!important;color:#3ddd88!important}
body.dark .kb-view-btn:hover{background:#3ddd88!important;color:#0c3020!important}
/* ── Popovers / overlays ── */
body.dark .cvp,body.dark .shortcuts-help{background:#14202e!important;border-color:#3a5070!important}
body.dark .cvp-title{color:#a0bad8!important;border-color:#1c2e44!important}
body.dark .cvp-row{color:#ccd8ee!important}
body.dark .cvp-row:hover{background:#1c2a3c!important}
body.dark .sh-title{background:#1a3560!important}
body.dark .sh-row{color:#ccd8ee!important;border-color:#1c2e44!important}
body.dark kbd{background:#1c2a3c!important;border-color:#3a5070!important;color:#f0f4ff!important;box-shadow:0 1px 0 #3a5070!important}
/* ── Bulk bar ── */
body.dark .bulk-bar{background:#0e1e38!important;border-color:#3a5070!important;color:#f0f4ff!important}
body.dark .bulk-sel{background:#182434!important;color:#f0f4ff!important;border-color:#3a5070!important}
/* ── Inline status select ── */
body.dark .inline-stat-sel{background:#182434!important;color:#f0f4ff!important;border-color:#ffc030!important}
/* ── Row action buttons ── */
body.dark .view-btn{border-color:#3ddd88!important;color:#3ddd88!important}
body.dark .view-btn:hover{background:#3ddd88!important;color:#0c3020!important}
body.dark .edit-btn{border-color:#82bcff!important;color:#82bcff!important}
body.dark .edit-btn:hover{background:#82bcff!important;color:#0e2a50!important}
body.dark .del{color:#526a88!important}
body.dark .del:hover{color:#fff!important}
/* ── Misc ── */
body.dark .u-role-card{background:#1c2a3c!important}
body.dark .rc{color:#a0bad8!important}
body.dark .resizer{background:#3a5070!important}
body.dark .tag{background:#1c3258!important;border-color:#2e4878!important;color:#82bcff!important}
body.dark .detail-audit-label{color:#7a88a3!important}
body.dark .detail-label{color:#7a88a3!important}
body.dark .detail-value{color:#eaf0fa!important}
body.dark .detail-ref{color:#e6c53a!important;text-shadow:0 0 14px rgba(230,197,58,0.22)!important}
body.dark .detail-audit{border-top-color:#162640!important;color:#55637e!important}
body.dark .detail-status{box-shadow:inset 0 0 0 1px currentColor!important;opacity:0.92}
/* ── Inputs (all contexts) ── */
body.dark input,body.dark select,body.dark textarea{background:#182434!important;color:#f0f4ff!important;border-color:#3a5070!important}
body.dark .sbar input{background:#182434 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23526a88' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 10px center no-repeat!important}

/* ── Dark mode toggle button ── */
.dm-toggle{font-size:15px;padding:5px 10px!important;line-height:1}
/* ── Ambient glow behind topbar (dark mode) ── */
body.dark::before{content:"";position:fixed;inset:-200px -200px auto -200px;height:520px;background:radial-gradient(ellipse at 50% 0%,rgba(230,197,58,0.05) 0%,transparent 60%),radial-gradient(ellipse at 20% 0%,rgba(74,158,255,0.09) 0%,transparent 55%);pointer-events:none;z-index:0}
body.dark .topbar,body.dark .stats,body.dark .sbar,body.dark .bbar,body.dark .tw{position:relative;z-index:1}
/* ── Status chips — saturated fills + leading dot + glow ring (dark) ── */
body.dark .ds-active{background:rgba(74,158,255,0.18)!important;color:#8ac2ff!important;box-shadow:inset 0 0 0 1px rgba(74,158,255,0.35)!important}
body.dark .ds-completed{background:rgba(61,220,151,0.16)!important;color:#7bebb5!important;box-shadow:inset 0 0 0 1px rgba(61,220,151,0.35)!important}
body.dark .ds-hold{background:rgba(230,197,58,0.18)!important;color:#ffe388!important;box-shadow:inset 0 0 0 1px rgba(230,197,58,0.35)!important}
body.dark .ds-cancelled{background:rgba(255,90,108,0.18)!important;color:#ff8a98!important;box-shadow:inset 0 0 0 1px rgba(255,90,108,0.35)!important}
body.dark .ds-filed{background:rgba(178,140,255,0.18)!important;color:#d1b6ff!important;box-shadow:inset 0 0 0 1px rgba(178,140,255,0.35)!important}
/* ── Table header gold tint ── */
body.dark thead tr{background:var(--grad-table-head)!important}
body.dark th{color:#e1d489!important;border-bottom-color:rgba(230,197,58,0.28)!important}
body.dark th+th{border-left-color:rgba(230,197,58,0.08)!important}
/* ── Bottom bar gold accent ── */
body.dark .bbar{border-top-color:rgba(230,197,58,0.25)!important}
/* ── Search input with dark icon ── */
body.dark .sbar input[type=text]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a88a3' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")!important}
/* ── View/edit btn dark glow ── */
body.dark .view-btn:hover{box-shadow:0 0 12px rgba(61,220,151,0.4)!important}
body.dark .edit-btn:hover{box-shadow:0 0 12px rgba(122,163,217,0.4)!important}

/* ================================================================
   SEARCH HIGHLIGHT
   ================================================================ */
mark.srch-hl{background:#ffe066;color:#002655;border-radius:2px;padding:0 1px;font-weight:inherit}
body.dark mark.srch-hl{background:#664d00!important;color:#ffe066!important;border-radius:2px}

/* ================================================================
   DUPLICATE BUTTON
   ================================================================ */
.dup-btn{background:none;border:1px solid var(--nass-navy-700);color:var(--nass-navy-700);border-radius:var(--radius-sm);padding:2px 7px;cursor:pointer;font-size:12px;font-family:var(--font-sans);transition:background var(--ease-std),color var(--ease-std);line-height:1.4}
.dup-btn:hover{background:var(--nass-navy-700);color:#fff}
body.dark .dup-btn{border-color:#82bcff!important;color:#82bcff!important}
body.dark .dup-btn:hover{background:#1a3560!important;color:#f0f4ff!important}

/* ================================================================
   INLINE STATUS EDIT
   ================================================================ */
.stat-inl{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;background:var(--bg-muted);color:var(--fg-body);cursor:pointer;transition:background var(--ease-std)}
td:has(.stat-inl):hover .stat-inl{background:var(--bg-row-hover);text-decoration:underline dotted}
.inline-stat-sel{width:100%;min-width:90px;padding:4px 5px;border:2px solid var(--nass-gold-500);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-sans);background:var(--bg-focus-cell);color:var(--fg-ink);cursor:pointer;outline:none}

/* ================================================================
   ACTIVITY LOG
   ================================================================ */
.al-td{padding:7px 10px;font-size:12px;vertical-align:middle}
.al-td-ts{padding:7px 10px;font-size:12px;white-space:nowrap;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.al-td-rec{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-lbl{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;letter-spacing:0.04em;background:var(--bg-muted);color:var(--fg-subtle)}
.al-lbl-created{background:var(--status-completed-bg);color:var(--status-completed-fg)}
.al-lbl-status{background:var(--status-active-bg);color:var(--status-active-fg)}
.al-lbl-location{background:var(--status-hold-bg);color:var(--status-hold-fg)}
.al-lbl-officer{background:var(--status-filed-bg);color:var(--status-filed-fg)}
.al-lbl-action,.al-lbl-remarks,.al-lbl-updated{background:var(--bg-muted);color:var(--fg-muted)}

@media print{
  /* Hide interactive chrome */
  .topbar,.sbar,.bbar,#ncp-fab,#ncp-panel,#nass-login,#nass-pwchange,
  #mbg,#detail-mbg,.bulk-bar,.cvp-wrap,#nass-pager,#offline-banner,
  .act-cell,.btn-gold,.btn-navy,.btn-clear,#rc{display:none!important}
  /* Full-width layout */
  body{background:#fff;font-size:11pt}
  .tw{overflow:visible;max-height:none;box-shadow:none;border:none}
  .tw table{width:100%;border-collapse:collapse;font-size:9pt}
  /* Table head */
  thead th{background:#003366!important;color:#fff!important;padding:5pt 6pt;font-size:8.5pt;border:1pt solid #003366}
  /* Rows */
  tbody td{padding:4pt 6pt;border:1pt solid #ccd;font-size:9pt;color:#000!important;background:#fff!important}
  tbody tr:nth-child(even) td{background:#f4f6fa!important}
  /* Status colour accents in print */
  .s-active td{border-left:3pt solid #003366!important}
  .s-completed td{border-left:3pt solid #1a7a3c!important}
  .s-hold td{border-left:3pt solid #c8a400!important}
  .s-cancelled td{border-left:3pt solid #b81c2e!important}
  .s-filed td{border-left:3pt solid #5a2d9a!important}
  .row-overdue td{border-left:3pt solid #d32f2f!important}
  /* Remove checkbox column from print */
  .row-chk,#chk-all{display:none!important}
  /* Page setup */
  @page{margin:1.5cm;size:landscape}
}

/* ================================================================
   MESSENGER PANEL
   ================================================================ */
.ms-panel{position:fixed;bottom:96px;right:24px;width:clamp(520px,44vw,660px);height:clamp(420px,72vh,660px);background:var(--bg-card);border-radius:var(--radius-lg-card);box-shadow:0 24px 60px rgba(0,0,0,0.28),0 4px 16px rgba(0,0,0,0.12);z-index:902;display:none;flex-direction:row;overflow:hidden;border:1px solid var(--border-soft);min-width:320px;min-height:280px}
.ms-panel.ms-open{display:flex}
/* Custom resize handle — bottom-right corner gripper (floating mode) */
.ms-resize-hdl{position:absolute;bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize;z-index:20;background:repeating-linear-gradient(135deg,var(--border-default) 0px,var(--border-default) 1.5px,transparent 1.5px,transparent 5px);border-radius:0 0 var(--radius-lg-card) 0;opacity:0.55;transition:opacity 0.15s}
.ms-resize-hdl:hover{opacity:1}
/* ── Docked mode ── */
:root{--ms-dock-w:380px}
body.ms-docked .ms-panel{position:fixed!important;right:0!important;top:56px!important;bottom:0!important;left:auto!important;width:var(--ms-dock-w)!important;height:auto!important;border-radius:var(--radius-lg-card) 0 0 0!important;border-right:none!important;border-bottom:none!important;box-shadow:-4px 0 24px rgba(0,0,0,0.14)!important;min-width:0!important;min-height:0!important}
body.ms-docked .ms-resize-hdl{display:none!important}
/* Push all views left when panel is docked */
body.ms-docked #view-tracker,
body.ms-docked #view-dashboard,
body.ms-docked #view-kanban,
body.ms-docked #view-users,
body.ms-docked #view-audit,
body.ms-docked #view-admin,
body.ms-docked #view-inbox,
body.ms-docked #view-drivesearch{margin-right:var(--ms-dock-w);transition:margin-right 0.2s}
/* Docked — inbox sidebar narrows */
body.ms-docked .gm-side{width:160px}
/* Docked — admin collapses to 1-col */
body.ms-docked .adm-grid{grid-template-columns:1fr}
/* Docked — drive search left pane narrows */
body.ms-docked .ds-left{width:300px}
/* Docked — activity log: hide User + Before→After columns to fit */
body.ms-docked #view-audit .tw th:nth-child(2),
body.ms-docked #view-audit .tw td:nth-child(2),
body.ms-docked #view-audit .tw th:nth-child(5),
body.ms-docked #view-audit .tw td:nth-child(5){display:none!important}
body.ms-docked .al-td-rec{max-width:180px}
/* Dock button active state */
.ms-dock-btn-on{background:rgba(255,255,255,0.32)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5)!important}
/* ── Split bar (draggable divider between content and chat) ── */
#ms-split-bar{position:fixed;top:56px;bottom:0;right:var(--ms-dock-w);width:8px;cursor:ew-resize;z-index:901;display:none;background:var(--border-soft);transition:background 0.15s;-webkit-user-select:none;user-select:none}
#ms-split-bar:hover,#ms-split-bar.ms-split-dragging{background:var(--nass-navy-500)}
.ms-split-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:48px;border-radius:4px;background:var(--border-default);transition:background 0.15s;pointer-events:none}
#ms-split-bar:hover .ms-split-grip,#ms-split-bar.ms-split-dragging .ms-split-grip{background:#fff}

/* ── Back button (mobile only, shown via @media) ── */
.ms-back-btn{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--fg-subtle);cursor:pointer;padding:4px 6px;border-radius:6px;margin-right:4px;flex-shrink:0;transition:background 0.15s}
.ms-back-btn:hover{background:var(--bg-row-hover)}

/* ── Sidebar ── */
.ms-sidebar{width:210px;min-width:180px;border-right:1px solid var(--border-soft);display:flex;flex-direction:column;background:var(--bg-subtle);flex-shrink:0}
.ms-sb-hdr{padding:12px 14px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;background:var(--grad-topbar);flex-shrink:0;user-select:none}
.ms-sb-title{color:#fff;font-size:14px;font-weight:700;letter-spacing:0.02em}
.ms-sb-btns{display:flex;gap:5px}
.ms-icon-btn{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#fff;border-radius:var(--radius-sm);padding:5px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;line-height:1}
.ms-icon-btn:hover{background:rgba(255,255,255,0.28)}
.ms-sb-search-wrap{padding:9px 10px;border-bottom:1px solid var(--border-soft);flex-shrink:0}
.ms-sb-search{width:100%;padding:7px 12px;border:1px solid var(--border-default);border-radius:var(--radius-pill);font-size:12px;font-family:var(--font-sans);background:var(--bg-card);color:var(--fg-ink);transition:border-color 0.15s}
.ms-sb-search:focus{outline:none;border-color:var(--nass-navy-700);box-shadow:var(--ring-focus)}
.ms-conv-list{flex:1;overflow-y:auto;padding:3px 0}
.ms-conv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid var(--border-divider)}
.ms-conv-item:hover{background:var(--bg-row-hover)}
.ms-conv-active{background:var(--bg-panel)!important;border-left:3px solid var(--nass-navy-700)}
.ms-conv-av{width:38px;height:38px;border-radius:50%;background:var(--nass-navy-700);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ms-conv-info{flex:1;min-width:0}
.ms-conv-r1{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:2px}
.ms-conv-nm{font-size:13px;font-weight:600;color:var(--fg-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ms-conv-ts{font-size:10px;color:var(--fg-faint);white-space:nowrap;flex-shrink:0}
.ms-conv-r2{display:flex;align-items:center;justify-content:space-between;gap:4px}
.ms-conv-pv{font-size:11px;color:var(--fg-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ms-unread{background:var(--nass-navy-700);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;min-width:18px;text-align:center;flex-shrink:0}

/* ── Thread ── */
.ms-thread{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-app)}
.ms-thread-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--fg-subtle)}
.ms-th-hdr{padding:11px 16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:12px;background:var(--bg-card);box-shadow:0 1px 4px rgba(0,0,0,0.06);flex-shrink:0}
.ms-th-av{width:36px;height:36px;border-radius:50%;background:var(--nass-navy-700);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ms-th-nm{font-size:14px;font-weight:700;color:var(--fg-ink)}
.ms-th-sub{font-size:11px;color:var(--fg-subtle);margin-top:1px}

/* ── Messages area ── */
.ms-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.ms-msgs-info{text-align:center;color:var(--fg-subtle);font-size:12px;padding:24px;align-self:center}
.ms-splash{text-align:center;padding:32px;align-self:center}
.ms-splash-icon{font-size:36px;margin-bottom:8px}
.ms-splash-txt{font-size:12px;color:var(--fg-subtle);line-height:1.6}
.ms-day-lbl{text-align:center;font-size:11px;color:var(--fg-faint);background:var(--bg-muted);border-radius:var(--radius-pill);padding:3px 14px;margin:8px auto;width:fit-content;font-weight:600;align-self:center}

/* ── Message bubble ── */
.ms-msg{display:flex;align-items:flex-end;gap:7px;max-width:76%;align-self:flex-start}
.ms-mine{align-self:flex-end;flex-direction:row-reverse}
.ms-bbl-av{width:26px;height:26px;border-radius:50%;background:var(--nass-navy-700);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:16px}
.ms-mine .ms-bbl-av{background:var(--nass-gold-500);color:#002655}
.ms-ai .ms-bbl-av{background:#5a2d9a;color:#fff}
.ms-bbl-body{display:flex;flex-direction:column;gap:2px}
.ms-mine .ms-bbl-body{align-items:flex-end}
.ms-bbl-sender{font-size:10.5px;color:var(--fg-subtle);font-weight:600;padding:0 5px}
.ms-bbl{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:14px 14px 14px 3px;padding:8px 12px;font-size:13px;color:var(--fg-ink);line-height:1.55;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,0.06)}
.ms-mine .ms-bbl{background:var(--nass-navy-700);color:#fff;border-radius:14px 14px 3px 14px;border-color:transparent;box-shadow:0 1px 4px rgba(0,38,85,0.25)}
.ms-ai .ms-bbl{background:#f3edff;border-color:#c8a0f8;color:#3a1c6e}
.ms-bbl-ts{font-size:10px;color:var(--fg-faint);padding:0 5px}
.ms-ts-pending{color:var(--fg-faint);font-style:italic}
.ms-optimistic{opacity:0.72}
.ms-edited{margin-left:4px;color:var(--fg-faint);font-style:italic}

/* Edit button + inline editor */
.ms-bbl-row{display:flex;align-items:center;gap:6px}
.ms-mine .ms-bbl-row{flex-direction:row-reverse}
.ms-msg-edit{background:transparent;border:none;color:var(--fg-subtle);padding:4px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s,background 0.15s,color 0.15s;flex-shrink:0}
.ms-msg:hover .ms-msg-edit,.ms-msg-edit:focus{opacity:1}
.ms-msg-edit:hover{background:var(--bg-subtle);color:var(--nass-navy-600)}
.ms-bbl-edit{display:flex;flex-direction:column;gap:6px;padding:8px 10px;background:var(--bg-card);border:1.5px solid var(--nass-navy-500);border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,0.08);max-width:340px}
.ms-mine .ms-bbl-edit{background:var(--bg-card);color:var(--fg-ink)}
.ms-edit-ta{width:100%;min-width:200px;resize:vertical;min-height:48px;max-height:160px;font-family:var(--font-sans);font-size:13px;line-height:1.5;padding:6px 8px;border:1px solid var(--border-soft);border-radius:8px;background:var(--bg-subtle);color:var(--fg-ink);box-sizing:border-box}
.ms-edit-ta:focus{outline:none;border-color:var(--nass-navy-500);box-shadow:0 0 0 2px rgba(0,80,158,0.15)}
.ms-edit-actions{display:flex;gap:6px;justify-content:flex-end}
.ms-edit-cancel,.ms-edit-save{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:6px;cursor:pointer;border:1px solid var(--border-default);background:var(--bg-card);color:var(--fg-ink)}
.ms-edit-cancel:hover{background:var(--bg-subtle)}
.ms-edit-save{background:var(--nass-navy-600);border-color:var(--nass-navy-600);color:#fff}
.ms-edit-save:hover{background:var(--nass-navy-700)}
.ms-edit-err{font-size:11px;color:var(--signal-danger);padding:0 2px}
.ms-typing-bar{min-height:16px;font-size:10.5px;color:var(--fg-muted);font-style:italic;padding:2px 14px 0;flex-shrink:0}
.ms-mention{color:var(--nass-navy-600);font-weight:700;background:rgba(0,51,102,0.08);border-radius:3px;padding:0 2px}
.ms-mine .ms-mention{color:#ffd966;background:rgba(255,217,102,0.15)}

/* Typing dots */
.ms-dots{display:flex;gap:3px;align-items:center;min-height:20px}
.ms-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.55;animation:msDot 1.3s infinite}
.ms-dots span:nth-child(2){animation-delay:0.22s}
.ms-dots span:nth-child(3){animation-delay:0.44s}
@keyframes msDot{0%,60%,100%{transform:translateY(0);opacity:0.5}30%{transform:translateY(-5px);opacity:1}}

/* ── Input row ── */
.ms-inp-row{padding:10px 14px;border-top:2px solid var(--border-soft);display:flex;gap:10px;align-items:center;background:var(--bg-subtle);flex-shrink:0}
.ms-inp-wrap{flex:1;position:relative;display:flex;align-items:center}
.ms-inp{flex:1;padding:10px 44px 10px 16px;border:1.5px solid var(--border-default);border-radius:22px;font-size:13px;font-family:var(--font-sans);background:var(--bg-card);color:var(--fg-ink);transition:border-color 0.18s,box-shadow 0.18s;box-shadow:0 1px 4px rgba(0,0,0,0.05)}
.ms-inp:focus{outline:none;border-color:var(--nass-navy-500);box-shadow:0 0 0 3px rgba(0,80,158,0.13),0 1px 4px rgba(0,0,0,0.05)}
.ms-inp-count{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--fg-faint);pointer-events:none;line-height:1;transition:color 0.15s}
.ms-inp-count-warn{color:var(--signal-danger)!important;font-weight:600}
.ms-send{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--nass-navy-700) 0%,var(--nass-navy-500) 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;box-shadow:0 2px 8px rgba(0,51,102,0.30)}
.ms-send:hover{background:linear-gradient(135deg,var(--nass-navy-600) 0%,var(--nass-navy-400) 100%);transform:scale(1.08);box-shadow:0 4px 14px rgba(0,51,102,0.40)}
.ms-send:active{transform:scale(0.94);box-shadow:0 1px 4px rgba(0,51,102,0.20)}
.ms-send:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Modals (DM picker / Group creator) ── */
.ms-modal{position:absolute;inset:0;background:rgba(0,18,46,0.52);display:flex;align-items:center;justify-content:center;z-index:20;border-radius:var(--radius-lg-card);backdrop-filter:blur(3px)}
.ms-modal-box{background:var(--bg-card);border-radius:var(--radius-lg-card);width:360px;max-width:calc(100% - 32px);max-height:82%;display:flex;flex-direction:column;box-shadow:var(--shadow-modal);overflow:hidden}
.ms-modal-hdr{padding:14px 16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--fg-ink);flex-shrink:0}
.ms-modal-x{background:none;border:none;cursor:pointer;color:var(--fg-subtle);font-size:15px;padding:2px 6px;border-radius:3px;line-height:1}
.ms-modal-x:hover{background:var(--bg-muted);color:var(--fg-ink)}
.ms-modal-srch{width:100%;padding:10px 14px;border:0;border-bottom:1px solid var(--border-soft);font-size:13px;font-family:var(--font-sans);background:var(--bg-card);color:var(--fg-ink);flex-shrink:0}
.ms-modal-srch:focus{outline:none;border-bottom-color:var(--nass-navy-700)}
.ms-picker-sect-lbl{font-size:10.5px;font-weight:700;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:0.07em;padding:8px 14px 4px;flex-shrink:0}
.ms-picker-list{flex:1;overflow-y:auto;max-height:260px}
.ms-picker-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid var(--border-divider)}
.ms-picker-item:hover{background:var(--bg-row-hover)}
.ms-picker-av{width:34px;height:34px;border-radius:50%;background:var(--nass-navy-600);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ms-picker-info{flex:1;min-width:0}
.ms-picker-nm{font-size:13px;font-weight:600;color:var(--fg-ink)}
.ms-picker-em{font-size:11px;color:var(--fg-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-picker-add{color:var(--nass-navy-700);font-size:20px;font-weight:700;padding:0 4px;line-height:1}
.ms-grp-chips{padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;min-height:0}
.ms-grp-chips:empty{padding:0}
.ms-chip{display:inline-flex;align-items:center;gap:4px;background:var(--status-active-bg);color:var(--status-active-fg);border-radius:var(--radius-pill);padding:3px 8px 3px 10px;font-size:11.5px;font-weight:600}
.ms-chip button{background:none;border:none;cursor:pointer;color:currentColor;opacity:0.7;font-size:12px;padding:0;line-height:1;display:flex;align-items:center}
.ms-modal-foot{padding:12px 14px;border-top:1px solid var(--border-soft);flex-shrink:0}

/* ── Notification badge ── */
.ms-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:10px;background:#d32f2f;color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;pointer-events:none;box-shadow:0 0 0 2px var(--bg-card)}
/* Active state of topbar button */
.ms-btn-on{background:rgba(255,255,255,0.28)!important}

/* ── Dark mode ── */
body.dark .ms-panel{background:#14202e!important;border-color:#3a5070!important;box-shadow:0 24px 60px rgba(0,0,0,0.55)!important}
body.dark .ms-sidebar{background:#0e1e38!important;border-color:#3a5070!important}
body.dark .ms-sb-hdr{background:linear-gradient(135deg,#001830,#003060)!important}
body.dark .ms-sb-search-wrap{border-color:#3a5070!important}
body.dark .ms-sb-search{background:#182434!important;color:#f0f4ff!important;border-color:#3a5070!important}
body.dark .ms-conv-item{border-color:#1c2e44!important}
body.dark .ms-conv-item:hover{background:#1c2a3c!important}
body.dark .ms-conv-active{background:#1a3560!important;border-left-color:#4a9eff!important}
body.dark .ms-conv-nm{color:#f0f4ff!important}
body.dark .ms-conv-pv{color:#526a88!important}
body.dark .ms-conv-ts{color:#3a5070!important}
body.dark .ms-unread{background:#4a9eff!important;color:#0e2a50!important}
body.dark .ms-thread{background:#0e1a2e!important}
body.dark .ms-th-hdr{background:#14202e!important;border-color:#3a5070!important;box-shadow:0 1px 4px rgba(0,0,0,0.3)!important}
body.dark .ms-th-nm{color:#f0f4ff!important}
body.dark .ms-th-sub{color:#526a88!important}
body.dark .ms-msgs{background:#0e1a2e!important}
body.dark .ms-day-lbl{background:#1c2a3c!important;color:#8aabcc!important}
body.dark .ms-bbl{background:#182434!important;border-color:#3a5070!important;color:#f0f4ff!important}
body.dark .ms-mine .ms-bbl{background:#1a3560!important;border-color:transparent!important;color:#f0f4ff!important}
body.dark .ms-ai .ms-bbl{background:#2a1050!important;border-color:#6a3aa0!important;color:#d0b0ff!important}
body.dark .ms-bbl-sender{color:#526a88!important}
body.dark .ms-edited{color:#7a8fac!important}
body.dark .ms-msg-edit{color:#8aabcc!important}
body.dark .ms-msg-edit:hover{background:#22344a!important;color:#cfe0ff!important}
body.dark .ms-bbl-edit{background:#182434!important;border-color:#4a78bc!important}
body.dark .ms-edit-ta{background:#0f1a28!important;color:#f0f4ff!important;border-color:#3a5070!important}
body.dark .ms-edit-cancel{background:#182434!important;color:#f0f4ff!important;border-color:#3a5070!important}
body.dark .ms-edit-cancel:hover{background:#22344a!important}
body.dark .ms-edit-save{background:#1a3560!important;border-color:#1a3560!important;color:#f0f4ff!important}
body.dark .ms-edit-save:hover{background:#244478!important}
body.dark .ms-mention{color:#82bcff!important;background:rgba(74,158,255,0.12)!important}
body.dark .ms-mine .ms-mention{color:#ffd966!important;background:rgba(255,217,102,0.12)!important}
body.dark .ms-inp-row{background:#0f1a28!important;border-color:#2a4060!important}
body.dark .ms-inp{background:#182434!important;color:#f0f4ff!important;border-color:#3a5070!important;box-shadow:none!important}
body.dark #ms-split-bar{background:#2a4060}
body.dark #ms-split-bar:hover,body.dark #ms-split-bar.ms-split-dragging{background:var(--nass-navy-400)}
body.dark .ms-modal-box{background:#14202e!important;box-shadow:0 24px 60px rgba(0,0,0,0.6)!important}
body.dark .ms-modal-hdr{color:#f0f4ff!important;border-color:#3a5070!important;background:#14202e!important}
body.dark .ms-modal-srch{background:#14202e!important;color:#f0f4ff!important;border-color:#3a5070!important}
body.dark .ms-picker-item{border-color:#1c2e44!important;background:#14202e!important}
body.dark .ms-picker-item:hover{background:#1c2a3c!important}
body.dark .ms-picker-nm{color:#f0f4ff!important}
body.dark .ms-picker-em{color:#526a88!important}
body.dark .ms-picker-add{color:#82bcff!important}
body.dark .ms-modal-foot{border-color:#3a5070!important;background:#14202e!important}
body.dark .ms-picker-sect-lbl{color:#526a88!important}
body.dark .ms-badge{box-shadow:0 0 0 2px #0e1a2e!important}
body.dark .ms-thread-empty{color:#526a88!important}

/* ── Tablet (701–1024 px) ─────────────────────────────────────────── */
@media(max-width:1024px) and (min-width:701px){
  .ms-panel{width:min(88vw,600px);height:clamp(400px,70vh,640px);right:16px;bottom:90px;min-width:320px}
  .ms-sidebar{width:185px;min-width:160px}
}

/* ── Mobile (≤ 700 px) ───────────────────────────────────────────── */
@media(max-width:700px){
  /* Full-screen overlay */
  .ms-panel{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;bottom:0!important;right:0!important;left:0!important;top:0!important;border-radius:0!important;z-index:1100!important;min-width:0!important;min-height:0!important}
  .ms-resize-hdl{display:none!important}
  #ms-split-bar{display:none!important}
  /* Sidebar takes full width when showing conv list */
  .ms-sidebar{width:100%!important;min-width:0!important}
  /* Stack: hide sidebar when a conv is open, show thread */
  .ms-panel.ms-has-conv .ms-sidebar{display:none!important}
  .ms-panel.ms-has-conv .ms-thread{display:flex!important}
  /* Show back arrow in thread header on mobile */
  .ms-back-btn{display:flex!important}
  /* Hide FAB behind full-screen panel */
  .ms-panel.ms-open ~ #ncp-fab,
  body.ms-chat-open #ncp-fab{display:none!important}
  /* Tighten message bubbles */
  .ms-msg{max-width:88%}
  #ncp-fab{bottom:16px;right:16px;width:50px;height:50px}
  /* Inbox: hide sidebar, full-width list */
  .gm-side{display:none!important}
  .gm-shell{flex-direction:column}
  /* Inbox mail detail: full-width stacked */
  .ml-det-toolbar,.ml-det-head{padding:8px 12px}
  .ml-det-subject{font-size:15px}
  .ml-det-body{padding:12px;max-height:calc(100vh - 280px)}
  /* Drive search: stack vertically */
  .ds-shell{flex-direction:column!important}
  .ds-left{width:100%!important;border-right:none!important;border-bottom:1px solid var(--border-divider);flex:0 0 auto;height:50vh;max-height:380px;overflow-y:auto}
  .ds-right{flex:1;min-height:220px}
  #view-drivesearch{overflow:auto}
}

/* ── Toast notifications ──────────────────────────────────────── */
#toast-root{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{padding:10px 18px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;font-family:var(--font-sans);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,0.22);opacity:0;transform:translateY(12px);transition:opacity 0.22s ease,transform 0.22s ease;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 48px)}
.toast.toast-in{opacity:1;transform:translateY(0)}
.toast.toast-out{opacity:0;transform:translateY(12px)}
.toast-success{background:#003366;color:#fff;border:1px solid rgba(255,255,255,0.18);box-shadow:0 4px 20px rgba(0,0,0,0.35)}
.toast-error{background:var(--signal-danger);color:#fff;box-shadow:0 4px 20px rgba(211,47,47,0.45)}
.toast-warn{background:#b07000;color:#fff;box-shadow:0 4px 20px rgba(176,112,0,0.40)}
.toast-info{background:#00509e;color:#fff;box-shadow:0 4px 20px rgba(0,51,102,0.35)}
body.dark .toast-success{background:#e6c53a;color:#0a1628;border-color:rgba(255,255,255,0.10);box-shadow:0 4px 20px rgba(230,197,58,0.45)}
body.dark .toast-error{background:#ff5a6c;color:#fff;box-shadow:0 4px 20px rgba(255,90,108,0.45)}
body.dark .toast-warn{background:#e6a817;color:#0a1200;box-shadow:0 4px 20px rgba(230,168,23,0.40)}
body.dark .toast-info{background:#4a9eff;color:#071428;box-shadow:0 4px 20px rgba(74,158,255,0.40)}

/* ── Inbox ────────────────────────────────────────────────────── */
/* ── Gmail-style Inbox ───────────────────────────────────────── */
/* keep .inbox-flag used by both old cards and new rows */
.inbox-flag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);letter-spacing:0.06em}
/* Shell: sidebar + main */
.gm-shell{display:flex;min-height:calc(100vh - 56px);background:var(--bg-app)}
.gm-side{width:200px;flex-shrink:0;padding:16px 8px;border-right:1px solid var(--border-soft)}
.gm-side-lbl{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius-xl);font-size:12.5px;font-weight:500;color:var(--fg-body);cursor:pointer;white-space:nowrap;user-select:none;transition:background var(--ease-std)}
.gm-side-lbl:hover{background:var(--bg-muted)}
.gm-side-active{background:#d6e4f7!important;color:#002655!important;font-weight:700;box-shadow:inset 3px 0 0 #002655}
.gm-side-ct{margin-left:auto;background:var(--nass-navy-600);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.gm-side-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gm-side-divider{height:1px;background:var(--border-divider);margin:6px 12px}
.gm-side-section{font-size:10px;font-weight:700;color:var(--fg-faint);letter-spacing:0.08em;text-transform:uppercase;padding:8px 14px 4px}
/* Main column */
.gm-body{flex:1;min-width:0;display:flex;flex-direction:column}
/* Toolbar */
.gm-toolbar{display:flex;align-items:center;gap:4px;padding:8px 16px;border-bottom:1px solid var(--border-soft);background:var(--bg-surface);position:sticky;top:56px;z-index:10}
.gm-chk-wrap{display:flex;align-items:center;padding:4px 6px;cursor:pointer}
.gm-icon-btn{border:none;background:none;padding:6px 8px;border-radius:6px;font-size:16px;cursor:pointer;color:var(--fg-muted);transition:background var(--ease-std)}
.gm-icon-btn:hover{background:var(--bg-hover)}
.gm-pg-info{font-size:12px;color:var(--fg-subtle);padding:0 8px;white-space:nowrap}
.gm-pg-btn{border:none;background:none;padding:5px 9px;border-radius:6px;font-size:18px;line-height:1;cursor:pointer;color:var(--fg-muted);transition:background var(--ease-std)}
.gm-pg-btn:hover:not(:disabled){background:var(--bg-hover)}
.gm-pg-btn:disabled{opacity:.3;cursor:default}
/* Sub bar */
.gm-sub-bar{font-size:11px;color:var(--fg-body);padding:6px 20px;border-bottom:1px solid var(--border-soft);background:var(--bg-surface);min-height:26px}
/* Table */
.gm-tbl{width:100%;border-collapse:collapse;background:var(--bg-card)}
.gm-row{border-bottom:1px solid var(--border-divider);cursor:pointer;transition:background 80ms}
.gm-row:hover{background:var(--bg-hover,#f5f7fa);box-shadow:inset 1px 0 0 var(--border-soft),inset -1px 0 0 var(--border-soft)}
.gm-unread{background:#fff;border-left:3px solid #002655}
.gm-row:not(.gm-unread){background:#f4f6fa;border-left:3px solid transparent}
.gm-selected{background:#e8f0fe!important}
.gm-td-chk{width:40px;padding:0 4px 0 16px;text-align:center}
.gm-td-dot{width:20px;padding:0 4px;text-align:center}
.gm-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--nass-navy-500);vertical-align:middle}
.gm-td-from{width:160px;padding:12px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.gm-unread .gm-td-from{font-weight:700;color:var(--fg-ink)}
.gm-row:not(.gm-unread) .gm-td-from{font-weight:500;color:var(--fg-body)}
.gm-td-subj{padding:12px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:99%}
.gm-subj-main{color:var(--fg-ink)}
.gm-unread .gm-subj-main{font-weight:600}
.gm-subj-ref{color:var(--fg-subtle);font-weight:400}
.gm-td-badges{width:160px;padding:10px 8px;white-space:nowrap}
.gm-td-badges .detail-status{font-size:10px;padding:1px 6px}
.gm-td-badges .inbox-flag{font-size:10px;margin-left:4px}
.gm-td-date{width:72px;padding:12px 16px 12px 8px;font-size:12px;color:var(--fg-subtle);white-space:nowrap;text-align:right}
.gm-unread .gm-td-date{font-weight:600;color:var(--fg-ink)}
.gm-empty{text-align:center;padding:64px 20px;color:var(--fg-subtle);font-size:13px;line-height:1.8}
.gm-loading{padding:32px 20px;text-align:center;color:var(--fg-subtle);font-size:13px}
/* Dark mode */
body.dark .gm-shell{background:#0f1923}
body.dark .gm-side{border-color:#1c2e44}
body.dark .gm-side-lbl{color:#96a3bc}
body.dark .gm-side-lbl:hover{background:#0e1f3a!important}
body.dark .gm-side-active{background:#1a2d45!important;color:#7aa3d9!important}
body.dark .gm-side-section{color:#55637e}
body.dark .gm-side-divider{background:#162640}
body.dark .gm-toolbar,body.dark .gm-sub-bar{background:#14202e;border-color:#1c2e44}
body.dark .gm-tbl{background:#14202e}
body.dark .gm-unread{background:#192533;border-left-color:#e6c53a}
body.dark .gm-row:not(.gm-unread){background:#111c28;border-left-color:transparent}
body.dark .gm-row:hover{background:#1e2f42!important}
body.dark .gm-selected{background:#1a3050!important}
body.dark .gm-row{border-color:#1c2e44}
/* Responsive: hide sidebar on narrow screens */
@media(max-width:640px){.gm-side{display:none}}

/* ── Officer Mapping table ───────────────────────────────────── */
.acard-wide{grid-column:1/-1}
.fi-pg{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-divider)}
.fi-pgb{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:6px;padding:2px 10px;font-size:14px;cursor:pointer;color:var(--fg-ink);line-height:1.6}
.fi-pgb:disabled{opacity:.35;cursor:default}
.fi-pgb:not(:disabled):hover{background:var(--nass-navy-100)}
.fi-pgn{font-size:11px;color:var(--fg-subtle);min-width:44px;text-align:center}
.map-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.map-tbl th{text-align:left;padding:8px 10px;font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--fg-subtle);border-bottom:2px solid var(--border-soft)}
.map-tbl td{padding:8px 10px;border-bottom:1px solid var(--border-divider);vertical-align:middle}
.map-off{font-weight:600;color:var(--fg-ink);white-space:nowrap}
.map-sel{width:100%;padding:5px 8px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:12px;font-family:var(--font-sans);color:var(--fg-ink);background:var(--bg-input)}
.btn-map-clear{background:none;border:none;color:var(--fg-faint);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-md);transition:color var(--ease-std)}
.btn-map-clear:hover{color:var(--signal-danger)}

/* ── Internal Mail ───────────────────────────────────────────────── */
.ml-compose-btn{display:block;width:calc(100% - 24px);margin:10px 12px 6px;padding:9px 14px;background:var(--nass-navy,#003366);color:#fff;border:none;border-radius:22px;font-size:12.5px;font-weight:700;letter-spacing:0.04em;cursor:pointer;text-align:left;transition:background 0.15s,box-shadow 0.15s;}
.ml-compose-btn:hover{background:#1a4d8f;box-shadow:0 2px 8px rgba(0,51,102,0.25);}
body.dark .ml-compose-btn{background:var(--nass-gold-500,#e6c53a);color:#0a1628;}
body.dark .ml-compose-btn:hover{background:var(--nass-gold-400,#f4d968);}

.ml-folder-title{font-size:13px;font-weight:700;color:var(--fg-ink,#1a2332);letter-spacing:0.02em;}

/* Mail list rows reuse gm-tbl, gm-row etc. from inbox */
.ml-draft-lbl{display:inline-block;font-size:10px;font-weight:700;color:#c8a400;background:#fffbe6;border:1px solid #e6d800;border-radius:3px;padding:0 5px;margin-right:6px;vertical-align:middle;}
body.dark .ml-draft-lbl{color:#ffe388;background:rgba(230,197,58,0.12);border-color:rgba(230,197,58,0.3);}

.ml-del-btn{background:none;border:none;cursor:pointer;font-size:13px;opacity:0.45;padding:2px 4px;border-radius:3px;transition:opacity 0.15s,background 0.15s;}
.ml-del-btn:hover{opacity:1;background:rgba(184,28,46,0.08);}

/* Detail view */
.ml-det-toolbar{display:flex;align-items:center;gap:6px;padding:10px 16px 8px;border-bottom:1px solid var(--border-soft,#e0e4ed);flex-wrap:wrap;background:var(--bg-surface,#fff);}
.ml-det-toolbar .btn-ghost{background:#eef2f9;color:#002655;border:1px solid #b8c8e0;font-weight:600;}
.ml-det-toolbar .btn-ghost:hover{background:#dce7f5;color:#002655;border-color:#90aacf;}
.ml-det-head{padding:16px 20px 12px;border-bottom:1px solid var(--border-soft,#e0e4ed);background:var(--bg-surface,#fff);}
.ml-det-subject{font-size:18px;font-weight:700;color:#002655;margin-bottom:8px;line-height:1.3;}
.ml-det-from,.ml-det-meta{font-size:12.5px;color:var(--fg-body,#3a4558);margin-bottom:3px;}
.ml-det-date{margin-top:4px;font-size:11.5px;color:var(--fg-muted,#5a6375);}
.ml-det-body{padding:20px;overflow-y:auto;max-height:calc(100vh - 380px);background:var(--bg-card,#fff);}
.ml-body-pre{white-space:pre-wrap;font-family:inherit;font-size:13.5px;line-height:1.65;color:var(--fg-ink,#1a2332);margin:0;}
body.dark .ml-det-toolbar .btn-ghost{background:rgba(255,255,255,0.07);color:#eaf0fa;border-color:rgba(255,255,255,0.18);}
body.dark .ml-det-toolbar .btn-ghost:hover{background:rgba(255,255,255,0.14);color:#fff;}
body.dark .ml-body-pre{color:var(--fg-body,#c8d2e4);}

/* Compose panel */
#ml-compose{background:var(--bg-card,#fff);}
body.dark #ml-compose{background:var(--bg-card,#0b1a30);border-color:var(--border-default,#24375a);}
.ml-compose-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#003366;color:#fff;cursor:pointer;border-radius:10px 10px 0 0;user-select:none;}
body.dark .ml-compose-hdr{background:var(--nass-navy-300,#0c1e3a);}
.ml-compose-hdr span{font-size:12.5px;font-weight:700;letter-spacing:0.03em;}
.ml-compose-hdr-btn{background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;font-size:15px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:3px;padding:0;transition:background 0.12s,color 0.12s;}
.ml-compose-hdr-btn:hover{background:rgba(255,255,255,0.15);color:#fff;}
#ml-compose.ml-minimized{width:280px;}

.ml-compose-field{display:flex;align-items:flex-start;gap:0;border-bottom:1px solid var(--border-soft,#e0e4ed);padding:0;}
.ml-compose-field label{font-size:11px;font-weight:700;color:var(--fg-muted,#5a6375);text-transform:uppercase;letter-spacing:0.06em;padding:10px 12px;min-width:60px;flex-shrink:0;}
.ml-compose-field input{flex:1;border:none;outline:none;font-size:13px;padding:9px 10px 9px 0;background:transparent;color:var(--fg-ink,#1a2332);font-family:inherit;}
.ml-compose-subj{border-bottom:2px solid var(--border-soft,#e0e4ed);}
body.dark .ml-compose-field{border-bottom-color:var(--border-soft,#1a2b4a);}
body.dark .ml-compose-field input{color:var(--fg-ink,#eaf0fa);}
body.dark .ml-compose-subj{border-bottom-color:var(--border-default,#24375a);}

.ml-body-txt{width:100%;box-sizing:border-box;border:none;outline:none;resize:none;font-size:13.5px;line-height:1.6;padding:12px 16px;font-family:inherit;background:var(--bg-card,#fff);color:var(--fg-ink,#1a2332);}
body.dark .ml-body-txt{background:var(--bg-card,#0b1a30);color:var(--fg-ink,#eaf0fa);}
.ml-compose-actions{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border-soft,#e0e4ed);flex-wrap:wrap;}
body.dark .ml-compose-actions{border-top-color:var(--border-soft,#1a2b4a);}

/* Autocomplete suggestion */
.ml-suggest-list{position:absolute;top:100%;left:0;right:0;background:var(--bg-card,#fff);border:1px solid var(--border-default,#c8cdd8);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.12);z-index:1300;max-height:200px;overflow-y:auto;}
body.dark .ml-suggest-list{background:var(--bg-card,#0b1a30);border-color:var(--border-default,#24375a);}
.ml-suggest-item{padding:8px 14px;font-size:12.5px;cursor:pointer;color:var(--fg-ink,#1a2332);}
.ml-suggest-item:hover{background:var(--bg-subtle,#f0f4ff);}
body.dark .ml-suggest-item{color:var(--fg-ink,#eaf0fa);}
body.dark .ml-suggest-item:hover{background:var(--bg-subtle,#0e1f3a);}

/* Dark mode — mail detail */
body.dark .ml-det-toolbar{background:#0d1c34;border-bottom-color:#1a2b4a;}
body.dark .ml-det-head{background:#0b1a30;border-bottom-color:#1a2b4a;}
body.dark .ml-det-body{background:#0b1a30;}
body.dark .ml-det-toolbar .btn-ghost{background:rgba(255,255,255,0.10);color:#eaf0fa;border-color:rgba(255,255,255,0.28);font-weight:600;}
body.dark .ml-det-toolbar .btn-ghost:hover{background:rgba(255,255,255,0.20);color:#fff;border-color:rgba(255,255,255,0.45);}
body.dark .ml-det-subject{color:#eaf0fa;font-weight:700;}
body.dark .ml-det-from,body.dark .ml-det-meta{color:#c8d2e4;}
body.dark .ml-det-date{color:#96a3bc;}
body.dark .ml-body-pre{color:#dce6f7;}

/* === RESPONSIVE TOPBAR === */
@media(max-width:1280px){
  .topbar{padding:0 14px;gap:8px}
  .topbar__wordmark-sub{display:none}
}
@media(max-width:1060px){
  .topbar{padding:0 10px;gap:6px}
  .topbar__wordmark-title{font-size:11px}
  .topbar__search{width:120px}
  .topbar__search:focus{width:160px}
}
@media(max-width:860px){
  .topbar__wordmark{display:none}
  .topbar__search-wrap{display:none}
  .topbar__user-info{display:none}
}
@media(max-width:640px){
  .topbar{padding:0 8px;gap:4px}
  .topbar__icon-btn{width:30px;height:30px;font-size:13px}
  .topbar__cta{padding:0 10px;font-size:11px}
  .topbar__logo{height:28px}
}