:root{
  --navy:#0b1f3a;--navy-2:#132d4f;--accent:#0f766e;--accent-2:#2563eb;
  --line:#d8e0ea;--bg:#f3f6fb;--panel:#fff;--text:#172033;--muted:#667085;
  --shadow:0 12px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;font-size:14px}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:280px;background:linear-gradient(180deg,#07182e,var(--navy));color:#fff;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;box-shadow:8px 0 24px rgba(7,24,46,.14)}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:20px;margin-bottom:28px;letter-spacing:.2px}
.brand i{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#67e8f9}
.sidebar nav{display:grid;gap:6px}
.sidebar a{color:#dce8f8;text-decoration:none;padding:11px 12px;border-radius:8px;display:flex;gap:11px;align-items:center;font-weight:600}
.sidebar a:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar a i{font-size:17px;color:#93c5fd}
.logout{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.content{flex:1;padding:24px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;padding:16px 18px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.topbar strong{font-size:18px}
.user-chip{background:#eef4fb;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:#344054;font-weight:600}
.page-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}
h1{font-size:25px;margin:0;font-weight:800;color:#101828}
h2{font-size:16px;margin:0 0 14px;font-weight:800;color:#24324a}
.filter-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:16px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow);overflow:auto}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.kpi-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.kpi-card span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.kpi-card strong{font-size:24px;line-height:1.1;color:#111827}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.span-2{grid-column:span 2}
.form-control,.form-select{border-color:#cfd8e5;border-radius:7px;min-height:39px}
.form-control:focus,.form-select:focus{border-color:var(--accent-2);box-shadow:0 0 0 .2rem rgba(37,99,235,.12)}
label{font-weight:700;color:#344054}
.details{display:grid;grid-template-columns:150px 1fr;gap:9px}.details dt{color:var(--muted);font-weight:700}.details dd{margin:0;color:#111827}
.table{vertical-align:middle}.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#475467;background:#f8fafc;border-bottom:1px solid var(--line)}
.table td,.table th{white-space:nowrap}.badge{border-radius:999px;padding:.45em .65em}
.actions{white-space:nowrap}.actions a{display:inline-flex;margin:0 4px;color:var(--accent-2);text-decoration:none;font-size:16px}
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.admin-tabs a{padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:#344054;font-weight:700}.admin-tabs a.active{background:var(--navy);color:#fff;border-color:var(--navy)}
pre{white-space:pre-wrap;max-width:280px;font-size:12px;color:#475467}
.summary-line{display:flex;gap:14px;flex-wrap:wrap;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:12px}
.upload-box,.status-form{max-width:760px}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 15% 20%,#dbeafe 0,#f3f6fb 32%,#e8eef8 100%)}
.login-card{width:min(430px,calc(100vw - 28px));background:#fff;border-radius:8px;padding:32px;border:1px solid var(--line);box-shadow:0 24px 70px rgba(15,23,42,.18)}
.login-card h1{font-size:25px;margin:14px 0 24px;text-align:center}.login-mark{width:60px;height:60px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--accent-2));color:#fff;display:grid;place-items:center;margin:auto;font-weight:800;box-shadow:0 12px 24px rgba(37,99,235,.22)}
.btn{border-radius:7px;font-weight:700}.btn-primary{background:var(--navy);border-color:var(--navy)}.btn-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn-outline-primary{color:var(--navy);border-color:#b8c5d6}.btn-outline-primary:hover{background:var(--navy);border-color:var(--navy)}
canvas{height:300px!important;max-height:320px}
@media(max-width:900px){.app-shell{display:block}.sidebar{width:100%;height:auto;position:relative}.grid-2,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.topbar{align-items:flex-start;flex-direction:column}.content{padding:14px}}

@media print{
  @page{size:A4 landscape;margin:10mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff!important;color:#111827!important;font-size:11px}
  .sidebar,.topbar,.filter-bar,.admin-tabs,.actions,.logout,.no-print,
  .dataTables_length,.dataTables_filter,.dataTables_info,.dataTables_paginate,
  .btn,.alert{display:none!important}
  .app-shell{display:block!important;min-height:0!important}
  .content{padding:0!important;width:100%!important}
  .page-head{display:block!important;margin:0 0 10px!important}
  .page-head h1,h1{font-size:20px!important;margin:0 0 8px!important;color:#0b1f3a!important}
  h2{font-size:13px!important;margin:0 0 8px!important;color:#172033!important}
  .kpi-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin-bottom:10px!important;page-break-inside:avoid}
  .kpi-card{box-shadow:none!important;border:1px solid #cfd8e5!important;border-left:4px solid #0f766e!important;border-radius:4px!important;padding:10px!important}
  .kpi-card span{font-size:9px!important;color:#475467!important}
  .kpi-card strong{font-size:16px!important}
  .grid-2{grid-template-columns:repeat(2,1fr)!important;gap:8px!important;margin-bottom:8px!important}
  .panel{box-shadow:none!important;border:1px solid #cfd8e5!important;border-radius:4px!important;padding:10px!important;overflow:visible!important;page-break-inside:avoid}
  canvas{height:220px!important;max-height:220px!important;width:100%!important}
  .table{font-size:9px!important;margin-bottom:0!important}
  .table th{font-size:8px!important;background:#f3f6fb!important;color:#344054!important}
  .table td,.table th{padding:4px!important;white-space:normal!important}
  a{color:#111827!important;text-decoration:none!important}
}