:root{
  --navy-950:#0a1420;
  --navy-900:#0e1c2e;
  --navy-800:#132538;
  --navy-700:#1a3049;
  --navy-600:#234161;
  --steel-500:#4a6b8a;
  --steel-300:#8fa8c2;
  --steel-200:#c3d2e2;
  --paper:#f4f6f8;
  --paper-dim:#e7ebef;
  --ink:#101820;
  --ink-dim:#4c5a68;
  --amber:#c8801a;
  --amber-bg:#fdf1de;
  --red:#b3311f;
  --red-bg:#fbe7e4;
  --green:#2f7d4f;
  --green-bg:#e6f3ea;
  --blue:#2a5f8f;
  --font-display:'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Consolas', monospace;
}
@font-face{font-family:'Zilla Slab';src:local('Georgia');}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14px;}
body{display:flex;min-height:100vh;}
::selection{background:var(--amber-bg);}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Layout ---------- */
#sidebar{
  width:238px;flex:0 0 238px;background:var(--navy-950);color:var(--steel-200);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
#sidebar .brand{
  padding:20px 18px 14px;border-bottom:1px solid var(--navy-700);
}
#sidebar .brand .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--steel-500);text-transform:uppercase;}
#sidebar .brand h1{font-family:var(--font-display);font-size:19px;margin:2px 0 0;color:#fff;font-weight:600;line-height:1.2;}
#sidebar .brand .sub{font-size:11px;color:var(--steel-500);margin-top:4px;}

#acsel{padding:14px 18px;border-bottom:1px solid var(--navy-700);}
#acsel label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel-500);margin-bottom:6px;}
#acsel select{width:100%;background:var(--navy-800);border:1px solid var(--navy-600);color:#fff;padding:8px 8px;border-radius:4px;font-family:var(--font-mono);font-size:12.5px;}
#acsel .hrs{margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--steel-300);}
#acsel .hrs b{color:#fff;font-size:15px;}

nav{flex:1;padding:10px 10px;}
nav .navgroup-label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--steel-500);padding:14px 10px 6px;}
nav button.navbtn, nav a.navbtn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--steel-200);text-decoration:none;box-sizing:border-box;
  padding:9px 10px;border-radius:6px;font-size:13px;margin-bottom:2px;transition:background .12s;
}
nav button.navbtn:hover, nav a.navbtn:hover{background:var(--navy-800);}
nav button.navbtn.active, nav a.navbtn.active{background:var(--navy-700);color:#fff;font-weight:600;}
nav button.navbtn .ic, nav a.navbtn .ic{width:16px;text-align:center;opacity:.8;font-family:var(--font-mono);font-size:12px;}
nav button.navbtn .badge, nav a.navbtn .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-family:var(--font-mono);padding:1px 6px;border-radius:8px;min-width:16px;text-align:center;}
nav button.navbtn .badge.amber, nav a.navbtn .badge.amber{background:var(--amber);}

#sidebar .footer{padding:12px 18px;border-top:1px solid var(--navy-700);font-size:10.5px;color:var(--steel-500);line-height:1.5;}

#main{flex:1;min-width:0;display:flex;flex-direction:column;}
#topbar{
  background:#fff;border-bottom:1px solid #d7dee4;padding:14px 28px;display:flex;align-items:baseline;justify-content:space-between;
  position:sticky;top:0;z-index:5;
}
#topbar h2{font-family:var(--font-display);font-size:22px;margin:0;font-weight:600;}
#topbar .crumb{font-size:11px;color:var(--ink-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;}
#content{padding:24px 28px 60px;max-width:1280px;}

/* ---------- Cards / Tables ---------- */
.card{background:#fff;border:1px solid #dde3e9;border-radius:8px;margin-bottom:20px;overflow:hidden;}
.card .card-head{padding:14px 18px;border-bottom:1px solid #e7ebef;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.card .card-head h3{margin:0;font-family:var(--font-display);font-size:16px;font-weight:600;}
.card .card-head .desc{font-size:11.5px;color:var(--ink-dim);margin-top:2px;}
.card .card-body{padding:16px 18px;}
.card .card-body.flush{padding:0;}

.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px;}
.stat{background:#fff;border:1px solid #dde3e9;border-radius:8px;padding:14px 16px;}
.stat .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-dim);}
.stat .val{font-family:var(--font-mono);font-size:26px;font-weight:600;margin-top:6px;color:var(--navy-900);}
.stat .val.red{color:var(--red);}
.stat .val.amber{color:var(--amber);}
.stat .val.green{color:var(--green);}
.stat .sub{font-size:11px;color:var(--ink-dim);margin-top:2px;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
table thead th{
  text-align:left;background:var(--paper-dim);color:var(--ink-dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  padding:9px 12px;border-bottom:1px solid #d7dee4;white-space:nowrap;position:sticky;top:0;
}
table tbody td{padding:9px 12px;border-bottom:1px solid #edf0f3;vertical-align:top;}
table tbody tr:hover{background:#f9fafb;}
.table-scroll{overflow-x:auto;max-height:640px;overflow-y:auto;}
td.num,th.num{text-align:right;font-family:var(--font-mono);}
td.mono{font-family:var(--font-mono);font-size:12px;}

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;}
.badge.ok{background:var(--green-bg);color:var(--green);}
.badge.soon{background:var(--amber-bg);color:var(--amber);}
.badge.overdue{background:var(--red-bg);color:var(--red);}
.badge.open{background:var(--red-bg);color:var(--red);}
.badge.deferred{background:var(--amber-bg);color:var(--amber);}
.badge.closed{background:var(--green-bg);color:var(--green);}
.badge.neutral{background:#eef1f4;color:var(--ink-dim);}
select.status-select{border:none;cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none;padding:2px 20px 2px 8px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");background-repeat:no-repeat;background-position:right 6px center;background-size:8px;}
select.status-select:focus{outline:2px solid var(--navy-900);outline-offset:1px;}

td.row-actions{white-space:nowrap;}
td.row-actions .btn{margin-right:0;}
.btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--navy-900);color:#fff;border:none;border-radius:6px;
  padding:8px 14px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
}
.btn:hover{background:var(--navy-700);}
.btn.secondary{background:#fff;color:var(--navy-900);border:1px solid #c9d2da;}
.btn.secondary:hover{background:#f2f4f6;}
.btn.danger{background:var(--red);}
.btn.danger:hover{background:#8f2618;}
.btn.small{padding:5px 10px;font-size:11.5px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

input,select,textarea{
  font-family:inherit;font-size:13px;padding:7px 9px;border:1px solid #c9d2da;border-radius:5px;background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue);}
label.field-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);margin-bottom:4px;margin-top:12px;}
label.field-label:first-child{margin-top:0;}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 14px;}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.toolbar input[type=search],.toolbar select{max-width:220px;}
.pill-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.pill-tabs button{background:#fff;border:1px solid #c9d2da;border-radius:20px;padding:5px 13px;font-size:12px;color:var(--ink-dim);}
.pill-tabs button.active{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}

.empty-state{padding:40px 20px;text-align:center;color:var(--ink-dim);}
.empty-state .ic{font-size:26px;margin-bottom:8px;}
.empty-state p{margin:4px 0;font-size:13px;}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,20,32,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow-y:auto;}
.modal{background:#fff;border-radius:10px;max-width:640px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.modal .modal-head{padding:16px 20px;border-bottom:1px solid #e7ebef;display:flex;justify-content:space-between;align-items:center;}
.modal .modal-head h3{margin:0;font-family:var(--font-display);font-size:17px;}
.modal .modal-body{padding:18px 20px;max-height:70vh;overflow-y:auto;}
.modal .modal-foot{padding:14px 20px;border-top:1px solid #e7ebef;display:flex;justify-content:flex-end;gap:8px;}
.modal-close{background:none;border:none;font-size:20px;color:var(--ink-dim);line-height:1;padding:2px 6px;}

.toast{position:fixed;bottom:22px;right:22px;background:var(--navy-900);color:#fff;padding:11px 18px;border-radius:7px;font-size:12.5px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.3);}

.crs-doc{border:1px solid #c9d2da;padding:26px 30px;font-family:var(--font-body);max-width:760px;margin:0 auto;background:#fff;}
.crs-doc h2{font-family:var(--font-display);text-align:center;margin:0 0 2px;font-size:20px;letter-spacing:.02em;}
.crs-doc .subtitle{text-align:center;font-size:11px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;}
.crs-doc .row{display:flex;justify-content:space-between;border-bottom:1px dotted #c9d2da;padding:6px 0;font-size:13px;}
.crs-doc .row b{color:var(--ink-dim);font-weight:600;font-size:11px;text-transform:uppercase;}
.crs-doc .statement{margin:18px 0;padding:14px;background:var(--paper-dim);border-left:3px solid var(--navy-800);font-size:12.5px;line-height:1.6;}
.crs-doc .sigblock{display:flex;justify-content:space-between;margin-top:26px;}
.crs-doc .sigline{width:46%;border-top:1px solid var(--ink);padding-top:6px;font-size:11px;color:var(--ink-dim);}

@media print{
  #sidebar,#topbar,.no-print{display:none !important;}
  #main{display:block;}
  #content{padding:0;max-width:none;}
  body{background:#fff;}
  .card{border:none;box-shadow:none;}
  /* Tables normally scroll in a fixed-height box on screen; that box clips
     rows during printing since browsers only render what's visible, not
     what's scrolled off. Let tables flow to their full height so every
     row reaches the printer, and let the browser paginate naturally. */
  .table-scroll{max-height:none !important;overflow:visible !important;}
  table thead th{position:static;}
  table, tr, td, th{page-break-inside:avoid;}
}

/* Dedicated print target used by single-document prints (e.g. CRS certificate).
   Hidden on screen; when body.printing-mode is set for window.print(), CSS
   below hides everything else so only this document's content is printed,
   regardless of what modal or view happens to be open on screen. */
#printArea{display:none;}
@media print{
  body.printing-mode > *:not(#printArea){display:none !important;}
  body.printing-mode #printArea{display:block !important;}
}

#acsel select, .modal select{
  width:100%;background:#fff;border:1px solid #cdd6de;color:var(--ink);padding:8px 8px;border-radius:4px;font-family:var(--font-body);font-size:13px;
}

.note-banner{background:var(--amber-bg);border:1px solid #ecd2a8;color:#7a5310;padding:10px 14px;border-radius:6px;font-size:12px;margin-bottom:16px;}
.hint{font-size:11px;color:var(--ink-dim);margin-top:4px;}

/* ---------- Login ---------- */
#loginScreen{position:fixed;inset:0;background:var(--navy-950);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.login-card{width:100%;max-width:340px;background:var(--navy-900);border:1px solid var(--navy-700);border-radius:10px;padding:26px 26px 22px;}
.login-brand{text-align:center;margin-bottom:18px;}
.login-brand .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--steel-500);text-transform:uppercase;}
.login-brand h1{font-family:var(--font-display);font-size:22px;margin:2px 0 0;color:#fff;font-weight:600;}
.login-brand .sub{font-size:11.5px;color:var(--steel-300);margin-top:6px;}
.login-users{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;}
.login-user{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--navy-800);border:1px solid var(--navy-600);color:#fff;padding:10px 12px;border-radius:6px;font-size:13px;text-align:left;}
.login-user:hover{background:var(--navy-700);}
.login-pin{width:100%;background:var(--navy-800);border:1px solid var(--navy-600);color:#fff;padding:9px 10px;border-radius:6px;font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;text-align:center;}
.login-err{color:#ff9d90;font-size:11.5px;min-height:16px;margin-top:6px;text-align:center;}
.role-tag{display:inline-block;padding:1px 7px;border-radius:20px;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.role-tag.role-admin{background:var(--red-bg);color:var(--red);}
.role-tag.role-editor{background:var(--amber-bg);color:var(--amber);}
.role-tag.role-viewer{background:#eef1f4;color:var(--ink-dim);}
#userBadge{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-dim);}
#userBadge .who{font-weight:600;color:var(--ink);}
#userBadge button{background:none;border:1px solid #d7dee4;border-radius:6px;padding:5px 10px;font-size:11.5px;color:var(--ink-dim);}