/* ============================================================
   Taraba State Budget MIS — Design System v2
   International-standard government analytics dashboard.
   Disciplined spacing scale, refined typography, clean green.
   ============================================================ */
:root{
  /* brand greens */
  --g-900:#0a3a22; --g-800:#0f4a2c; --g-700:#156438; --g-600:#1c7a47; --g-500:#27935a;
  --g-200:#bfe3cd; --g-100:#dcf0e4; --g-50:#eef8f2; --gold:#c5a035;
  /* neutrals (slate) */
  --ink:#101828; --ink-2:#475467; --ink-3:#667085; --muted:#98a2b3;
  --line:#eaecf0; --line-2:#f2f4f7; --bg:#f7f9fb; --surface:#ffffff; --surface-2:#fcfdfe;
  /* status */
  --blue:#1570ef; --red:#d92d20; --amber:#dc6803; --teal:#0e9384; --pos:#079455;
  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  /* radius & shadow */
  --r:14px; --r-sm:10px; --r-xs:7px;
  --sh-xs:0 1px 2px rgba(16,24,40,.04);
  --sh-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --sh:0 4px 12px -2px rgba(16,24,40,.08),0 2px 6px -2px rgba(16,24,40,.04);
  --sh-lg:0 16px 40px -8px rgba(16,24,40,.16);
  --sidebar-w:256px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{font-family:var(--font);background:linear-gradient(180deg,#f4f8f6 0%,var(--bg) 240px);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
a{color:var(--g-700);text-decoration:none}
a:hover{color:var(--g-800)}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.014em;color:var(--ink)}
p{margin:0}
code{background:var(--g-50);color:var(--g-800);padding:1px 6px;border-radius:5px;font-family:var(--mono);font-size:12px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.muted{color:var(--muted)}

/* ---------------- App shell ---------------- */
.app{display:flex;min-height:100vh;max-width:100%}
.sidebar{width:var(--sidebar-w);background:linear-gradient(165deg,var(--g-800) 0%,var(--g-900) 55%,#072a18 100%);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:50;border-right:1px solid rgba(255,255,255,.04)}
.sidebar-brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s5) var(--s4)}
.sidebar-brand .brand-logo{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#fff;padding:4px;flex-shrink:0;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.sidebar-brand .mark{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#fff,#e9f5ee);color:var(--g-800);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:.5px;flex-shrink:0;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.sidebar-brand .title{font-weight:650;font-size:14px;color:#fff;line-height:1.3}
.sidebar-brand .sub{font-size:10px;color:#7fab90;letter-spacing:.1em;text-transform:uppercase;margin-top:3px;font-weight:600}
.sidebar-nav{flex:1;overflow-y:auto;padding:var(--s2) var(--s3) var(--s5)}
.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#5c7d68;padding:var(--s5) var(--s3) var(--s2)}
.sidebar-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px 0;border-radius:var(--r-xs);color:#c2d6c9;font-size:13.5px;font-weight:500;transition:background .15s,color .15s,box-shadow .15s}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-nav a.active{background:var(--g-600);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(28,122,71,.4)}
.sidebar-nav a .ic{width:18px;text-align:center;flex-shrink:0;opacity:.92;font-size:14px}
.sidebar-foot{padding:var(--s4) var(--s5);border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#6b8f78;letter-spacing:.02em}

/* ---- Collapsible report tree ---- */
.nav-tree{margin:1px 0}
.nav-parent,.nav-group{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;font-family:var(--font);color:#c2d6c9;
  padding:9px 12px;margin:2px 0;border-radius:var(--r-xs);font-size:13.5px;font-weight:500;transition:background .15s,color .15s}
.nav-parent:hover,.nav-group:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-parent .caret,.nav-group .caret{margin-left:auto;font-size:10px;transition:transform .18s;opacity:.7}
.nav-parent.open .caret,.nav-group.open .caret{transform:rotate(90deg)}
.nav-group{font-size:12.5px;color:#9fbdac;padding-left:30px;font-weight:600}
.nav-children,.nav-subchildren{display:none}
.nav-children.show,.nav-subchildren.show{display:block}
.nav-subchildren a{display:block;color:#aac5b4;font-size:12.5px;font-weight:500;
  padding:7px 12px 7px 42px;margin:1px 0;border-radius:var(--r-xs);transition:background .15s,color .15s}
.nav-subchildren a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-subchildren a.active{background:var(--g-600);color:#fff;font-weight:600}

/* ---------------- Main column ---------------- */
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s7);position:sticky;top:0;z-index:30}
.topbar .page-h{font-size:14px;font-weight:600;color:var(--ink-2)}
.topbar .right{display:flex;align-items:center;gap:var(--s5)}
.yearpick{display:flex;align-items:center;gap:var(--s2);background:var(--g-50);border:1px solid var(--g-100);border-radius:var(--r-xs);padding:6px 12px}
.yearpick label{font-size:11px;font-weight:700;color:var(--g-700);text-transform:uppercase;letter-spacing:.06em}
.yearpick select{border:0;background:transparent;font-size:13px;font-weight:600;color:var(--g-800);cursor:pointer;outline:none}
.userchip{display:flex;align-items:center;gap:var(--s3);padding-left:var(--s5);border-left:1px solid var(--line)}
.userchip .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--g-600),var(--g-700));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:13px;flex-shrink:0}
.userchip .meta{line-height:1.3;display:flex;flex-direction:column}
.userchip .nm{font-size:13px;font-weight:600;color:var(--ink)}
.userchip .rl{font-size:11px;color:var(--muted);text-transform:capitalize}
.userchip a.logout{font-size:12.5px;color:var(--ink-2);font-weight:500;margin-left:var(--s2)}
.userchip a.logout:hover{color:var(--g-700)}

.content{padding:var(--s7);max-width:1280px;width:100%;margin:0 auto;min-width:0}
.page-head{margin-bottom:var(--s6)}
.page-title{font-size:22px;font-weight:680;letter-spacing:-.02em}
.page-sub{color:var(--ink-3);font-size:14px;margin-top:5px}

/* ---------------- KPI cards (explicit 4-col, no stretch) ---------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s6)}
/* flex fallback for renderers without grid support */
@supports not (display:grid){.cards{display:flex;flex-wrap:wrap}.cards>.card{flex:1 1 200px}.grid-3{display:flex;flex-wrap:wrap}.grid-3>.panel{flex:1 1 280px}.grid-2{display:flex;flex-wrap:wrap}.grid-2>.panel{flex:0 1 calc(50% - var(--s5)/2)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh-xs);position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s;min-width:0}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--g-500),var(--g-600));opacity:.92}
.card.blue::after{background:linear-gradient(90deg,#4ea0ff,var(--blue))}
.card.teal::after{background:linear-gradient(90deg,#2ec5b6,var(--teal))}
.card.amber::after{background:linear-gradient(90deg,#f5b14e,var(--amber))}
.card.red::after{background:linear-gradient(90deg,#f5736a,var(--red))}
.card:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:var(--g-200)}
.card:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.card .ctop{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.card .label{color:var(--ink-3);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.card .dot{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--g-50);color:var(--g-600)}
.card.blue .dot{background:#eaf2fe;color:var(--blue)} .card.teal .dot{background:#e4f5f3;color:var(--teal)}
.card.amber .dot{background:#fdf2e3;color:var(--amber)} .card.red .dot{background:#fdeceb;color:var(--red)}
.card .value{display:block;font-size:25px;font-weight:720;letter-spacing:-.025em;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.1}
.card .delta{font-size:12px;margin-top:var(--s2);color:var(--ink-3);font-weight:500}
.card .delta.up{color:var(--pos)} .card .delta.down{color:var(--red)}
.card .card-label{color:var(--ink-3);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s2)}
.card .card-value{display:block;font-size:23px;font-weight:720;letter-spacing:-.025em;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.15}
.card .card-foot{font-size:12px;margin-top:var(--s2);color:var(--ink-3);font-weight:500}

/* ---------------- Panels ---------------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-xs);margin-bottom:var(--s5);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.panel-head h3{font-size:14.5px;font-weight:650}
.panel-head .sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.panel-body{padding:var(--s5)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start;margin-bottom:var(--s5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-bottom:var(--s5)}
@media(max-width:1080px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}

/* ---------------- Tables ---------------- */
.tablewrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data thead th{background:var(--surface-2);color:var(--ink-3);text-align:left;font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:11px var(--s5);border-bottom:1px solid var(--line);white-space:nowrap}
table.data thead th.num{text-align:right}
table.data tbody td{padding:13px var(--s5);border-bottom:1px solid var(--line-2);color:var(--ink)}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover td{background:var(--g-50)}
table.data tbody tr.total td{background:var(--surface-2);font-weight:700;border-top:1.5px solid var(--line);border-bottom:0;color:var(--ink)}
.cell-strong{font-weight:600}
.cell-mda{display:flex;align-items:center;gap:10px}
.cell-mda .rank{width:22px;height:22px;border-radius:6px;background:var(--g-50);color:var(--g-700);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------------- Mini bar (in-table viz) ---------------- */
.minibar{height:6px;background:var(--line-2);border-radius:3px;overflow:hidden;width:90px;display:inline-block;vertical-align:middle}
.minibar > i{display:block;height:100%;background:var(--g-500);border-radius:3px}

/* ---------------- Pills ---------------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:16px;font-size:11.5px;font-weight:600}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.good{background:#e7f6ec;color:var(--pos)} .pill.warn{background:#fdf2e3;color:var(--amber)}
.pill.bad{background:#fdeceb;color:var(--red)} .pill.info{background:#eaf2fe;color:var(--blue)}
.badge{background:rgba(255,255,255,.18);padding:1px 8px;border-radius:10px;font-size:11px;margin-left:auto}

/* ---------------- Buttons ---------------- */
.btn-primary,.btn-secondary,.btn-mini{display:inline-flex;align-items:center;gap:7px;justify-content:center;font-family:var(--font);font-weight:600;cursor:pointer;border-radius:var(--r-xs);transition:.15s;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--g-700);color:#fff;padding:10px 18px;font-size:13px;box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--g-800);color:#fff;box-shadow:var(--sh-sm)}
.btn-secondary{background:var(--surface);color:var(--ink-2);border-color:var(--line);padding:10px 18px;font-size:13px}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--g-200);color:var(--g-800)}
.btn-mini{background:var(--g-50);color:var(--g-700);border-color:var(--g-100);padding:6px 12px;font-size:12px}
.btn-mini:hover{background:var(--g-100)}
.btn-mini.danger{background:#fdeceb;color:var(--red);border-color:#f6d4d2}
.full{width:100%}

/* ---------------- Filters / forms ---------------- */
.filters{display:flex;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap;align-items:center}
.filters select,.filters input,.field input,.field select{font-family:var(--font);font-size:13px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
.filters select:focus,.field input:focus,.field select:focus{border-color:var(--g-500);box-shadow:0 0 0 3px var(--g-50)}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field select{width:100%}

/* ---------------- Banners ---------------- */
.banner{padding:13px var(--s4);border-radius:var(--r-sm);margin-bottom:var(--s5);font-size:13px;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.banner::before{font-weight:700;flex-shrink:0}
.banner.success{background:#e7f6ec;color:#05603a;border-color:#a6e7c0}
.banner.success::before{content:"✓"}
.banner.error{background:#fdeceb;color:#912018;border-color:#f4c9c5}
.banner.error::before{content:"!"}
.banner.locked,.banner.info{background:#fffaeb;color:#93570f;border-color:#fde9bc}
.banner.locked::before,.banner.info::before{content:"⚑"}

/* ---------------- Tabs ---------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--s5);flex-wrap:wrap}
.tab{padding:10px var(--s4);font-size:13px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px;transition:color .15s}
.tab:hover{color:var(--g-700)}
.tab.active{color:var(--g-800);border-bottom-color:var(--g-600)}
.tab .badge{background:var(--g-100);color:var(--g-700);margin-left:0}

/* ---------------- Empty state ---------------- */
.empty{text-align:center;padding:var(--s8) var(--s5);color:var(--muted)}
.empty .ic{font-size:32px;opacity:.4;margin-bottom:var(--s2)}
.empty .t{font-weight:600;color:var(--ink-2);margin-bottom:4px}

/* ---------------- Login ---------------- */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5);background:radial-gradient(1100px 560px at 75% -15%,var(--g-600),var(--g-900) 60%)}
.login-card{background:var(--surface);border-radius:18px;padding:var(--s8) var(--s7);width:100%;max-width:400px;box-shadow:var(--sh-lg)}
.login-head{text-align:center;margin-bottom:var(--s6)}
.login-head .login-logo{width:84px;height:84px;object-fit:contain;margin:0 auto var(--s4);display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.18))}
.login-head .mark{width:58px;height:58px;border-radius:15px;background:linear-gradient(135deg,var(--g-600),var(--g-800));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;margin:0 auto var(--s4);box-shadow:var(--sh)}
.login-head h1{font-size:19px}
.login-head p{color:var(--muted);font-size:13px;margin-top:6px}
.login-foot{text-align:center;color:var(--muted);font-size:11px;margin-top:var(--s5)}

/* ---------------- Loaders ---------------- */
#nprogress{pointer-events:none}
#nprogress .bar{background:var(--g-500);position:fixed;z-index:1031;top:0;left:0;width:100%;height:3px}
#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px var(--g-500),0 0 5px var(--g-500);opacity:1;transform:rotate(3deg) translate(0,-4px)}
.page-loader{position:fixed;inset:0;background:rgba(247,249,251,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1040;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.page-loader.show{opacity:1;visibility:visible}
.userchip .chip-link{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;padding:3px 6px;border-radius:9px;transition:background .15s}
.userchip .chip-link:hover{background:rgba(0,0,0,.04)}
.scrolltop-fab{position:fixed;right:22px;bottom:88px;width:48px;height:48px;border-radius:50%;
  background:var(--g-700,#1b5e20);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(27,94,32,.4);z-index:1051;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .22s,visibility .22s,transform .22s,background .15s}
.scrolltop-fab.show{opacity:1;visibility:visible;transform:none}
.scrolltop-fab:hover{background:var(--g-800,#14532b);transform:translateY(-2px)}
.scrolltop-fab svg{display:block}
@media(max-width:640px){.scrolltop-fab{right:16px;bottom:78px;width:44px;height:44px}}
.grm-fab{position:fixed;right:22px;bottom:22px;height:56px;padding:0 18px;border-radius:28px;
  background:var(--g-700,#1b5e20);color:#fff;display:flex;align-items:center;gap:10px;text-decoration:none;
  box-shadow:0 6px 20px rgba(27,94,32,.4);z-index:1050;transition:transform .15s,box-shadow .15s}
.grm-fab:hover{transform:scale(1.05);box-shadow:0 8px 26px rgba(27,94,32,.5)}
.grm-fab svg{display:block;flex-shrink:0}
.grm-fab-label{font-size:14px;font-weight:700;white-space:nowrap}
@media(max-width:640px){
  .grm-fab{right:16px;bottom:16px;padding:0;width:50px;height:50px;border-radius:50%;justify-content:center}
  .grm-fab-label{display:none}
}
.page-loader .loader-logo{width:64px;height:64px;object-fit:contain;animation:spin 1.3s linear infinite;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
.spinner{width:38px;height:38px;border:3px solid var(--g-100);border-top-color:var(--g-600);border-radius:50%;animation:spin .7s linear infinite}
.spinner.sm{width:15px;height:15px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-primary.loading,.btn-secondary.loading{pointer-events:none;opacity:.8}
.btn-primary.loading .spinner.sm{border-color:rgba(255,255,255,.4);border-top-color:#fff}
.skeleton{background:linear-gradient(90deg,var(--line-2) 25%,#e9edf2 37%,var(--line-2) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:5px;height:13px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.spinner,.skeleton,#nprogress .bar,.card{animation:none;transition:none}}

/* ---------------- Footer ---------------- */
.sitefoot{margin-top:auto;padding:var(--s5) var(--s7);border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2)}

/* ---------------- Mobile ---------------- */
.menu-btn{display:none;background:var(--g-50);border:1px solid var(--g-100);border-radius:var(--r-xs);padding:8px 12px;cursor:pointer;color:var(--g-700);font-weight:700;font-size:16px;line-height:1}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(10,32,20,.5);z-index:45;opacity:0;transition:opacity .2s}
.sidebar-overlay.show{display:block;opacity:1}
@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){
  .sidebar{transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);width:272px;box-shadow:var(--sh-lg)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-btn{display:inline-flex}
  .topbar{height:auto;min-height:60px;padding:0 var(--s4);gap:var(--s3)}
  .topbar .page-h{display:none}
  .topbar .right{gap:var(--s3);flex:1;justify-content:flex-end}
  .yearpick label{display:none}
  .userchip{padding-left:var(--s3)}
  .userchip .meta{display:none}
  .content{padding:var(--s5) var(--s4)}
  .page-title{font-size:19px}
  .grid-2{gap:var(--s4)}
  table.data.cardify thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data.cardify tbody tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:11px;box-shadow:var(--sh-xs);overflow:hidden}
  table.data.cardify tbody tr:hover td{background:transparent}
  table.data.cardify tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;border-bottom:1px solid var(--line-2);padding:11px var(--s4);text-align:right}
  table.data.cardify tbody tr td:last-child{border-bottom:0}
  table.data.cardify tbody td::before{content:attr(data-label);font-weight:600;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex-shrink:0}
  table.data.cardify tbody td.num{font-size:14px}
  table.data.cardify tbody tr.total{background:var(--g-50)}
  table.data.cardify tbody td .actual-in,table.data.cardify tbody td .narr-in,table.data.cardify tbody td input,table.data.cardify tbody td select{width:62%;min-height:40px;font-size:15px;text-align:right}
  table.data.cardify tbody td .narr-in{text-align:left}
  .cell-mda .rank{display:none}
}
@media(max-width:480px){.cards{grid-template-columns:1fr}}

/* ============================================================
   PRINT STYLES — make printed/PDF output match the on-screen
   table layout instead of the mobile "card" stacking.
   ============================================================ */
@media print {
  /* Hide all screen-only chrome */
  .sidebar, .topbar, .page-loader, .grm-fab, .scrolltop-fab,
  .wa-fab, .btn-primary, .btn-secondary, .save-bar, #saveMsg,
  .filters, .toolbar, .pagination, .aud-pager, nav, .no-print { display: none !important; }

  /* Full-width content, no shadows/margins that waste paper */
  html, body { background: #fff !important; }
  .app { display: block !important; }
  .main { margin: 0 !important; width: 100% !important; }
  .content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .panel { box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 0 12px !important; }
  .tablewrap { overflow: visible !important; }

  /* CRITICAL: force tables to print as real tables, not stacked cards. */
  table.data, table.data.cardify { width: 100% !important; border-collapse: collapse !important; font-size: 10pt; }
  table.data.cardify thead,
  table.data thead { display: table-header-group !important; position: static !important;
    width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; }
  table.data.cardify tbody tr,
  table.data tbody tr { display: table-row !important; background: #fff !important;
    border: none !important; box-shadow: none !important; margin: 0 !important;
    page-break-inside: avoid; }
  table.data.cardify tbody td,
  table.data tbody td { display: table-cell !important; text-align: left !important;
    border: 1px solid #999 !important; padding: 5px 8px !important; }
  table.data thead th { border: 1px solid #999 !important; padding: 5px 8px !important;
    background: #e8f0ea !important; text-align: left !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.data td.num, table.data th.num { text-align: right !important; }
  /* Remove the per-cell "LABEL:" prefix used in card mode */
  table.data.cardify tbody td::before { content: none !important; }

  /* Inputs on the performance entry page: print their VALUE cleanly as text */
  table.data td input, table.data td .actual-in, table.data td .narr-in,
  table.data td select { border: none !important; width: auto !important;
    min-height: 0 !important; font-size: 10pt !important; text-align: right !important;
    -webkit-appearance: none; appearance: none; background: transparent !important; padding: 0 !important; }
  table.data td .narr-in { text-align: left !important; }

  /* Repeat the table header on each printed page */
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }

  /* Show a clean page title from the page-head if present */
  .page-head { margin-bottom: 8px !important; }
  .page-title { font-size: 14pt !important; }
}

/* Print document header & signature — hidden on screen, shown only when printing */
.print-doc-head, .print-signature { display: none; }

@media print {
  /* Document header at the top of the printout */
  .print-doc-head { display: block !important; text-align: center; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 2px solid #1b5e20; }
  .print-doc-head .print-gov { font-size: 15pt; font-weight: 800; color: #1b5e20;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-doc-head .print-min { font-size: 11pt; color: #333; margin-top: 2px; }
  .print-doc-head .print-title { font-size: 13pt; font-weight: 700; margin-top: 8px; }
  .print-doc-head .print-meta { margin: 10px auto 0; border-collapse: collapse; font-size: 10pt; }
  .print-doc-head .print-meta td { border: none !important; padding: 2px 8px !important; text-align: left; }
  .print-doc-head .print-meta td:first-child { color: #555; text-align: right; font-weight: 600; }

  /* On-screen page title is redundant on paper (header covers it) */
  .page-title { display: none !important; }

  /* Signature block at the end — kept together on one page */
  .print-signature { display: block !important; margin-top: 60px; page-break-inside: avoid;
    width: 320px; }
  .print-signature .sig-line { border-top: 1.5px solid #000; margin-bottom: 6px; }
  .print-signature .sig-role { font-weight: 700; font-size: 11pt; }
  .print-signature .sig-detail { font-size: 9.5pt; color: #333; margin-top: 6px; }
}