@layer base, layout, components;
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-variable-b34f4147.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}
@layer base {
  :root { --navy:#003e55; --navy-dark:#002d3e; --accent:#007f91; --ink:#173441; --muted:#657983; --line:#dde5e8; --canvas:#f3f6f7; --white:#fff; --danger:#a63030; font-family: "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); font-size:15px; }
  * { box-sizing:border-box; } body { margin:0; background:var(--canvas); line-height:1.5; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } button,input,select,textarea { font:inherit; } button,input[type=submit] { cursor:pointer; } h1,h2,p { margin:0; } h1 { font-size:2rem; line-height:1.2; font-weight:650; letter-spacing:-.04em; } h2 { font-size:1.08rem; font-weight:650; } small { font-size:.8rem; } :focus-visible { outline:3px solid #da952e; outline-offset:3px; } input,select,textarea { border:1px solid #b9cbd2; border-radius:5px; padding:.65rem .75rem; background:white; color:var(--ink); max-width:100%; } textarea { resize:vertical; } table { width:100%; border-collapse:collapse; text-align:left; } th { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.045em; background:#f8fafb; font-weight:600; } th,td { padding:1rem 1.25rem; border-bottom:1px solid var(--line); } tbody tr:last-child td { border-bottom:0; } td { font-size:.9rem; } tbody tr:hover { background:#fbfcfd; } dt { color:var(--muted); font-size:.8rem; margin-bottom:.3rem; } dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; } ul { padding-left:1.25rem; }
}
@layer layout {
  /* Keep sidebar popovers above charts and controls in the isolated content layer. */
  .workspace { display:flex; min-height:100vh; } .sidebar { width:200px; flex-shrink:0; background:linear-gradient(165deg,#064d64 0%,#003e55 38%,#002838 100%); color:white; display:flex; flex-direction:column; padding:2rem 1.2rem; position:sticky; z-index:1; top:0; height:100vh; } .workspace-body { min-width:0; flex:1; isolation:isolate; } .brand { color:white; font-size:1.7rem; font-weight:750; letter-spacing:-.06em; display:flex; align-items:center; gap:.7rem; } .brand:hover { text-decoration:none; } .sidebar .brand { justify-content:center; } .sidebar .brand img { display:block; width:130px; max-width:100%; height:auto; } .sidebar-caption { color:#b2c9d1; margin:.7rem 0 2rem; font-size:.77rem; text-align:center; } .sidebar nav { display:grid; gap:4px; } .nav-link { padding:.65rem .85rem; color:#d9e6eb; font-size:.91rem; border-radius:5px; } .nav-link:hover,.nav-link.is-active { background:#ffffff18; color:white; text-decoration:none; } .nav-link.is-active { box-shadow:inset 3px 0 #e6a747; } .sidebar-footer { margin-top:auto; padding:.9rem .3rem 0; display:grid; font-size:.77rem; color:#b2c9d1; gap:.25rem; } .topbar { min-height:70px; border-bottom:1px solid var(--line); background:white; padding:1rem 2.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.82rem; } .account { display:flex; gap:1.2rem; align-items:center; } .content { max-width:1500px; margin:auto; padding:2.3rem; } .page-heading { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin:0 0 1.8rem; } .page-heading .muted { margin-top:.6rem; } .metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; margin-bottom:1.8rem; } .two-column { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; } .form-grid,.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem 2rem; } .field--wide { grid-column:1/-1; } .auth-shell { width:min(460px,calc(100% - 2rem)); margin:8vh auto; } .auth-brand { color:var(--navy); margin-bottom:2rem; justify-content:center; } .auth-card { padding:2.4rem; background:white; border:1px solid var(--line); border-radius:10px; } .auth-card h1 { margin-bottom:.7rem; } .auth-card form { margin-top:1.7rem; } .auth-card .field { margin-bottom:1.2rem; } .auth-card input { width:100%; }
}
@layer components {
  .workspace .topbar .button { min-height: 34px; padding: .4rem .65rem; font-size: .75rem; }
  .eyebrow { text-transform:uppercase; color:var(--accent); letter-spacing:.13em; font-size:.68rem; font-weight:700; margin-bottom:.65rem; } .muted { color:var(--muted); } .panel { background:white; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .panel-heading { padding:1.2rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:.75rem; border-bottom:1px solid var(--line); } .panel-heading>a,.panel-heading>.muted { font-size:.8rem; } .button { border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; background:var(--navy); color:white; padding:.66rem 1.1rem; border-radius:5px; font-size:.87rem; font-weight:600; white-space:nowrap; } .button:hover { background:var(--navy-dark); text-decoration:none; } .button--secondary { background:white; border-color:#c8d5da; color:var(--ink); } .button--secondary:hover { background:#eef3f5; } .button--danger { background:white; color:var(--danger); border-color:#e9bdbd; } .button--danger:hover { background:#fff2f2; } .button--full { width:100%; } .link-button { padding:0; border:0; color:var(--accent); background:none; } .metric { border:1px solid var(--line); background:white; border-radius:8px; display:grid; gap:.3rem; padding:1.3rem 1.5rem; color:var(--ink); } .metric:hover { text-decoration:none; border-color:var(--accent); } .metric>span { font-size:.8rem; color:var(--muted); } .metric strong { font-size:2.25rem; font-weight:550; letter-spacing:-.05em; } .metric small { color:var(--accent); margin-top:.4rem; } .cell-secondary { display:block; color:var(--muted); margin-top:.25rem; } .record-link { font-weight:600; } .badge { text-transform:uppercase; display:inline-block; background:#edf1f3; color:#51656f; border-radius:4px; padding:.2rem .5rem; font-size:.72rem; white-space:nowrap; } .badge--current,.badge--approved,.badge--accept,.badge--available { background:#e8f4ee; color:#226344; } .badge--expired,.badge--reject,.badge--rejected,.badge--revoked,.badge--maintenance { background:#fcecec; color:#9c3737; } .badge--expiring,.badge--pending,.badge--submitted { background:#fff4dd; color:#835d10; } .table-toolbar { padding:1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.83rem; } .search-form { display:flex; align-items:center; gap:.6rem; flex:1; } .search-form input[type=search] { width:min(370px,100%); } .table-scroll { overflow-x:auto; } .pagination { padding:1rem 1.3rem; display:flex; justify-content:center; gap:2rem; border-top:1px solid var(--line); font-size:.85rem; } .empty-state { padding:3.5rem 1.5rem; text-align:center; } .empty-state p { color:var(--muted); font-size:.9rem; margin-top:.5rem; } .record-form,.detail-panel { padding:1.8rem; margin-bottom:1.3rem; } .field { display:flex; flex-direction:column; gap:.4rem; min-width:0; } .field label { font-size:.85rem; font-weight:600; } .field small { color:var(--muted); } .field input[type=checkbox] { align-self:flex-start; width:1.2rem; height:1.2rem; } .field_with_errors { display:contents; } .field_with_errors input,.field_with_errors select { border-color:var(--danger); } .form-actions { display:flex; gap:.8rem; padding-top:1.8rem; margin-top:1.7rem; border-top:1px solid var(--line); } .flash { padding:1rem 1.2rem; background:#e9f5ef; border:1px solid #bddbcd; border-radius:6px; margin-bottom:1.5rem; font-size:.9rem; } .flash--alert { background:#fff1f1; border-color:#edcbcb; color:#8d3030; } .back-link { display:inline-block; font-size:.85rem; margin-bottom:1.4rem; } .danger-zone { padding-top:1rem; } .auth-link { display:block; font-size:.85rem; text-align:center; margin-top:1.5rem; } .summary-list { padding:0; margin:0; list-style:none; } .summary-list li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--line); font-size:.85rem; } .summary-list li:last-child { border:0; } .summary-list small { display:block; color:var(--muted); } .overdue { color:var(--danger); } .environment-banner { background:#fff0cf; color:#76520c; text-align:center; padding:.3rem; font-size:.8rem; } .visually-hidden,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link:focus { position:fixed; top:10px; left:10px; z-index:20; padding:1rem; background:white; }
}
@media (max-width:1100px) { .sidebar { width:180px; padding-inline:1rem; } .content { padding:1.5rem; } .metric-grid { grid-template-columns:repeat(2,1fr); } .two-column { grid-template-columns:1fr; } }
@media (max-width:760px) { .workspace { display:block; } .sidebar { position:relative; width:auto; height:auto; padding:1rem; } .sidebar .brand { font-size:1.5rem; } .sidebar-caption,.sidebar-footer { display:none; } .sidebar nav { display:flex; overflow-x:auto; margin-top:1rem; } .nav-link { white-space:nowrap; } .topbar { padding:.8rem 1rem; } .topbar>span { display:none; } .account { width:100%; justify-content:space-between; } .content { padding:1.3rem 1rem; } .page-heading { align-items:flex-start; flex-wrap:wrap; } h1 { font-size:1.75rem; } .form-grid,.detail-grid { grid-template-columns:1fr; } .record-form,.detail-panel { padding:1.2rem; } .table-toolbar { flex-wrap:wrap; } .search-form { flex-wrap:wrap; } .search-form input[type=search] { width:100%; } .metric { padding:1rem; } .panel-heading { flex-wrap:wrap; } .auth-card { padding:1.5rem; } }
@media print { .sidebar,.topbar,.page-heading>.button,.danger-zone,.back-link { display:none; } .workspace { display:block; } .content { padding:0; } .panel { border:0; } }