/* ============================================================
   BRAVO TRUCK TRAFFIC & PARKING MANAGEMENT
   Design tokens sourced from Bravo Brand Design Guidelines 2020
   (Bravo brand palette):
   Primary red #D81F27, grey #808285, near-black #231F20, white.
   Display: Archivo (industrial grotesque, gate-log weight)
   Body/UI: IBM Plex Sans   Data/mono: IBM Plex Mono (plates, TZS, timestamps)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --red:#D81F27; --red-dark:#A8151C; --red-tint:rgba(216,31,39,.10); --red-tint-strong:rgba(216,31,39,.16);
  --ink:#211E1F; --ink-2:#3A3538;
  --grey-900:#3A3538; --grey-700:#5C5859; --grey-600:#7C797B; --grey-400:#A9A6A7;
  --grey-300:#DAD7D8; --grey-200:#E9E7E7; --grey-100:#F3F1F0; --grey-50:#F9F8F7;
  --white:#FFFFFF;
  --green:#2E7D46; --green-tint:#E4F3E8;
  --amber:#A9660A; --amber-tint:#FBEFD9;
  --blue:#1B5FA8; --blue-tint:#E4EDF8;
  --grey-tint:#EBE9E9;
  --font-display:'Archivo', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(33,30,31,.06), 0 2px 10px rgba(33,30,31,.08);
  --shadow-md:0 8px 28px rgba(33,30,31,.16);
  --login-surface:var(--white);
  --bg:var(--grey-50); --surface:var(--white); --text:var(--ink); --text-soft:var(--grey-700); --border:var(--grey-200);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#19171A; --surface:#242024; --text:#F2EFEF; --text-soft:#B7B2B4; --border:#39353A;
    --grey-100:#2C282C; --grey-200:#39353A; --grey-300:#4A454A; --grey-tint:#332E32;
    --green-tint:#173321; --amber-tint:#3A2A0E; --red-tint:rgba(216,31,39,.18); --red-tint-strong:rgba(216,31,39,.28);
    --blue-tint:#152C46;
    --grey-50:#2A262A; --grey-400:#6E696D; --grey-600:#9A9598;
    --green:#5CC27E; --amber:#E3A445; --blue:#7BB0EA; --red-dark:#FF8D92;
    --login-surface:#2A262A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#19171A; --surface:#242024; --text:#F2EFEF; --text-soft:#B7B2B4; --border:#39353A;
  --grey-100:#2C282C; --grey-200:#39353A; --grey-300:#4A454A; --grey-tint:#332E32;
  --green-tint:#173321; --amber-tint:#3A2A0E; --red-tint:rgba(216,31,39,.18); --red-tint-strong:rgba(216,31,39,.28);
  --blue-tint:#152C46;
  --grey-50:#2A262A; --grey-400:#6E696D; --grey-600:#9A9598;
  --green:#5CC27E; --amber:#E3A445; --blue:#7BB0EA; --red-dark:#FF8D92;
  --login-surface:#2A262A;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;color:var(--text);margin:0 0 4px;letter-spacing:-0.01em;text-wrap:balance;}
p{line-height:1.5;margin:0 0 10px;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--red-tint-strong);}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.hidden{display:none !important;}

/* ---------- Boot ---------- */
#boot{position:fixed;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:999;}
#boot img{height:52px;animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.boot-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--red);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-label{color:#cfcccd;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}

/* ---------- Login ---------- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(216,31,39,.35), transparent 60%),
    linear-gradient(165deg,var(--ink) 0%, #2c2729 55%, #201d1e 100%);
}
.login-card{background:var(--login-surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-md);padding:34px 30px;width:100%;max-width:420px;}
.login-card .logo-full{height:40px;margin-bottom:22px;}
.login-card h1{font-size:20px;margin-bottom:2px;}
.login-sub{color:var(--text-soft);font-size:13px;margin-bottom:22px;font-weight:500;}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.role-opt{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 10px;font-size:12.5px;font-weight:700;text-align:left;background:var(--surface);color:var(--text);cursor:pointer;line-height:1.25;}
.role-opt small{display:block;font-weight:500;color:var(--text-soft);font-size:10.5px;margin-top:2px;}
.role-opt.active{border-color:var(--red);background:var(--red-tint);color:var(--red-dark);}
.login-foot{margin-top:18px;font-size:11.5px;color:var(--text-soft);text-align:center;line-height:1.5;}

/* ---------- App shell ---------- */
#app{display:flex;min-height:100vh;}
.sidebar{width:222px;flex-shrink:0;background:var(--ink);color:#EEEBEA;display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar .brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 10px 18px;}
.sidebar .brand img{height:24px;width:auto;}
.sidebar .brand-txt{font-family:var(--font-display);font-weight:800;font-size:13.5px;line-height:1.2;color:#fff;}
.sidebar .brand-txt span{display:block;font-family:var(--font-body);font-weight:600;font-size:10px;color:#B7B2B4;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.site-chip{margin:0 4px 14px;padding:10px 12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;text-align:left;font:inherit;width:calc(100% - 8px);}
button.site-chip{cursor:pointer;}
button.site-chip:hover{background:rgba(255,255,255,.11);}
.site-chip .lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#B7B2B4;font-weight:700;}
.site-chip .row{display:flex;align-items:center;justify-content:space-between;margin-top:2px;}
.site-chip strong{font-family:var(--font-display);font-size:15px;}
.site-chip .chg{font-size:11px;color:#FF8D92;font-weight:700;}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:#D8D4D4;text-decoration:none;font-size:13.5px;font-weight:600;margin-bottom:2px;cursor:pointer;border:none;background:none;width:100%;text-align:left;}
.nav-link .ic{width:18px;height:18px;flex-shrink:0;display:inline-flex;}
.nav-link .ic svg{width:18px;height:18px;}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-link.active{background:var(--red);color:#fff;}
.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8A8688;margin:14px 12px 4px;font-weight:700;}
.sidebar-foot{margin-top:auto;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.1);}
.user-chip{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--radius-sm);background:rgba(255,255,255,.06);}
.user-chip .av{width:30px;height:30px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;flex-shrink:0;}
.user-chip .who{min-width:0;}
.user-chip .nm{font-size:12.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-chip .rl{font-size:10.5px;color:#B7B2B4;}
.switch-user{border:1px solid rgba(255,255,255,.14) !important;border-radius:var(--radius-sm);}
#change-pw{border:none !important;margin-top:6px;}
.switch-user{display:block;text-align:center;font-size:11px;color:#B7B2B4;margin-top:8px;background:none;border:none;cursor:pointer;width:100%;padding:4px;font-weight:600;}
.switch-user:hover{color:#fff;}

.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:15;background:var(--surface);border-bottom:1px solid var(--border);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow);}
.topbar h2{font-size:16px;margin:0;}
.topbar .sub{font-size:11.5px;color:var(--text-soft);font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.clock{text-align:right;font-family:var(--font-mono);}
.clock .time{font-size:16px;font-weight:600;color:var(--text);line-height:1.1;}
.clock .date{font-size:10.5px;color:var(--text-soft);}
.mobile-nav-toggle{display:none;background:var(--grey-100);border:1px solid var(--border);border-radius:var(--radius-sm);width:36px;height:36px;font-size:16px;cursor:pointer;color:var(--text);}

.main{flex:1;padding:22px;max-width:1360px;width:100%;margin:0 auto;}
.main-narrow{max-width:760px;}

@media (max-width:980px){
  .sidebar{position:fixed;left:-240px;top:0;bottom:0;z-index:60;transition:left .18s ease;box-shadow:var(--shadow-md);}
  .sidebar.open{left:0;}
  .mobile-nav-toggle{display:block;}
  .main{padding:14px;}
  .topbar{padding:10px 14px;}
  .role-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .topbar .sub,.clock .date,.topbar-right .badge{display:none;}
  .topbar h2{font-size:15px;}
  .detail-grid{grid-template-columns:1fr !important;}
}
.nav-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;}
.nav-scrim.show{display:block;}

/* ---------- Cards / grids ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px;}
.card-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);font-weight:700;margin-bottom:12px;}
.card-flex{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.section-title{font-size:21px;margin-bottom:2px;}
.section-sub{color:var(--text-soft);font-size:13px;margin-bottom:16px;font-weight:500;}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-bottom:18px;}
button.kpi{text-align:left;font:inherit;color:inherit;width:100%;display:block;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow);cursor:pointer;transition:transform .06s ease, border-color .12s ease;}
.kpi:hover{border-color:var(--grey-400);transform:translateY(-1px);}
.kpi .n{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1;color:var(--text);}
.kpi .l{font-size:11.5px;color:var(--text-soft);font-weight:600;margin-top:6px;line-height:1.3;}
.kpi.money .n{font-size:20px;white-space:nowrap;}
.kpi.money .n small{font-size:12px;font-weight:700;margin-right:3px;color:var(--text-soft);letter-spacing:.02em;}
.kpi.tone-red .n{color:var(--red);}
.kpi.tone-amber .n{color:var(--amber);}
.kpi.tone-green .n{color:var(--green);}
.kpi.tone-blue .n{color:var(--blue);}

.grid-2{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:860px){.grid-2{grid-template-columns:1fr 1fr;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--radius-sm);
  padding:0 18px;min-height:46px;font-size:14px;font-weight:700;font-family:var(--font-body);cursor:pointer;white-space:nowrap;transition:filter .12s ease, transform .05s ease, opacity .12s ease;}
.btn:active{transform:scale(.98);}
a.btn{text-decoration:none;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover:not(:disabled){filter:brightness(1.2);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover:not(:disabled){border-color:var(--grey-600);}
.btn-outline-red{background:transparent;border:1.5px solid var(--red);color:var(--red);}
.btn-outline-red:hover:not(:disabled){background:var(--red-tint);}
.btn-success{background:var(--green);color:#fff;}
.btn-success:hover:not(:disabled){filter:brightness(1.1);}
.btn-ghost{background:transparent;color:var(--text-soft);min-height:36px;padding:0 10px;}
.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--grey-100);}
.btn-block{width:100%;}
.btn-sm{min-height:36px;padding:0 13px;font-size:12.5px;}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;}
.btn-row .btn{flex:1;min-width:150px;white-space:normal;text-align:center;line-height:1.2;padding-top:6px;padding-bottom:6px;}

/* ---------- Forms ---------- */
label{display:block;font-size:12.5px;font-weight:700;color:var(--text-soft);margin-bottom:5px;}
.req::after{content:" *";color:var(--red);}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]),
select,textarea{
  width:100%;min-height:46px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:14.5px;font-family:var(--font-body);background:var(--surface);color:var(--text);
  -webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%235C5859' d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%235C5859' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer;
}
textarea{min-height:76px;resize:vertical;font-family:var(--font-body);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);}
input::placeholder,textarea::placeholder{color:var(--grey-400);text-transform:none;letter-spacing:normal;font-family:var(--font-body);}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:64px;}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--text-soft);
  font:700 12px var(--font-body);padding:8px 10px;border-radius:6px;cursor:pointer;}
.pw-toggle:hover{color:var(--text);background:var(--grey-100);}
input:disabled,select:disabled,textarea:disabled{
  background:var(--grey-100);color:var(--text-soft);cursor:not-allowed;border-color:var(--grey-200);opacity:1;
}
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus){border-color:var(--grey-400);}
.field{margin-bottom:13px;}
.field-row{display:flex;gap:10px;flex-wrap:wrap;}
.field-row>.field{flex:1;min-width:190px;}
.help{font-size:11.5px;color:var(--text-soft);margin-top:4px;}
.checkline{display:flex;align-items:flex-start;gap:9px;padding:10px 0;}
.checkline input{width:20px;height:20px;min-height:auto;margin-top:1px;flex-shrink:0;accent-color:var(--red);}
input[type=checkbox]{accent-color:var(--red);}
.checkline .t{font-size:13.5px;font-weight:600;}
.checkline .t small{display:block;font-weight:500;color:var(--text-soft);font-size:11.5px;}
fieldset{border:none;padding:0;margin:0;}

/* ---------- Category picker ---------- */
.cat-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px;}
@media (min-width:700px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
button.cat-opt{font:inherit;color:inherit;width:100%;}
.cat-opt:hover{border-color:var(--grey-400);}
.cat-opt{border:1.5px solid var(--border);border-radius:var(--radius);padding:14px;text-align:left;background:var(--surface);cursor:pointer;}
.cat-opt .tag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:99px;margin-bottom:8px;}
.cat-opt .ttl{font-size:14.5px;font-weight:800;margin-bottom:3px;}
.cat-opt .dsc{font-size:12px;color:var(--text-soft);line-height:1.4;}
.cat-opt.active{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint);}
.cat-opt.active .tag{background:var(--red);color:#fff;}
.cat-icd .tag{background:var(--blue-tint);color:var(--blue);}
.cat-icdnp .tag{background:var(--amber-tint);color:var(--amber);}
.cat-cfs .tag{background:var(--green-tint);color:var(--green);}

/* ---------- Badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;}
.badge .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.b-green{background:var(--green-tint);color:var(--green);}.b-green .dot{background:var(--green);}
.b-amber{background:var(--amber-tint);color:var(--amber);}.b-amber .dot{background:var(--amber);}
.b-red{background:var(--red-tint-strong);color:var(--red-dark);}.b-red .dot{background:var(--red);}
.b-grey{background:var(--grey-tint);color:var(--text-soft);}.b-grey .dot{background:var(--grey-600);}
.b-blue{background:var(--blue-tint);color:var(--blue);}.b-blue .dot{background:var(--blue);}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
th{color:var(--text-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;background:var(--grey-50);position:sticky;top:0;}
tbody tr{cursor:pointer;}
tbody tr:hover td{background:var(--grey-50);}
tr.row-amber td{background:var(--amber-tint);}
tr.row-red td{background:var(--red-tint);}
tr.row-amber:hover td{filter:brightness(0.97);}
tr.row-red:hover td{filter:brightness(0.97);}
.reg-cell{font-family:var(--font-mono);font-weight:700;letter-spacing:.02em;}
.empty-state{text-align:center;padding:42px 16px;color:var(--text-soft);}
.empty-state .ic{font-size:34px;margin-bottom:10px;}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px;align-items:flex-end;}
.filters .f{min-width:150px;flex:1;}
.filters .f label{margin-bottom:4px;}
.filters select,.filters input{min-height:40px;padding:7px 10px;font-size:13px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(28,25,26,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border-radius:var(--radius);padding:22px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-md);}
.modal-box.wide{max-width:640px;}
.modal-box h3{font-size:18px;margin-bottom:12px;}
body.modal-open{overflow:hidden;}
.modal-actions{display:flex;gap:9px;margin-top:18px;}
.modal-actions .btn{flex:1;}

/* ---------- Toasts ---------- */
#toast-region{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;width:min(94vw,420px);}
.toast{border-radius:var(--radius-sm);padding:12px 15px;font-weight:700;font-size:13.5px;box-shadow:var(--shadow-md);color:#fff;animation:toast-in .16s ease;}
.toast-success{background:var(--green);}
.toast-error{background:var(--red-dark);}
.toast-info{background:var(--blue);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Detail / info rows ---------- */
.info-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.info-row:last-child{border-bottom:none;}
.info-row .k{color:var(--text-soft);font-weight:600;}
.info-row .v{font-weight:700;text-align:right;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;}
.timeline{display:flex;flex-direction:column;gap:0;}
.tl-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);}
.tl-item:last-child{border-bottom:none;}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--red);margin-top:5px;flex-shrink:0;}
.tl-body .a{font-size:13px;font-weight:700;}
.tl-body .m{font-size:11.5px;color:var(--text-soft);}
.tl-body .w{font-family:var(--font-mono);font-size:11px;color:var(--text-soft);}

.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--grey-100);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;}
.seg button{flex:1 1 180px;min-height:40px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-soft);font:700 13px var(--font-body);cursor:pointer;padding:0 12px;}
.seg button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow), inset 0 -2px 0 var(--red);}
.pill-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.pill-nav button{padding:8px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;font-weight:700;cursor:pointer;color:var(--text);}
.pill-nav button.active{background:var(--ink);color:#fff;border-color:var(--ink);}

.summary-box{background:var(--grey-50);border:1px dashed var(--grey-300);border-radius:var(--radius-sm);padding:14px;margin-bottom:14px;}

.alert{padding:12px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;margin-bottom:14px;}
.alert-error{background:var(--red-tint-strong);color:var(--red-dark);}
.alert-warn{background:var(--amber-tint);color:var(--amber);}
.alert-info{background:var(--blue-tint);color:var(--blue);}
.alert-success{background:var(--green-tint);color:var(--green);}

.footer-note{text-align:center;color:var(--text-soft);font-size:11.5px;padding:22px 12px 8px;}

@media print{
  .sidebar,.topbar,.no-print,#toast-region{display:none !important;}
  .main{max-width:100%;padding:0;}
  body{background:#fff;}
  .card{box-shadow:none;border:1px solid #ccc;}
}