:root{
  --bg: #0E1520;
  --panel: #161F2C;
  --panel-raised: #1C2734;
  --line: #263243;
  --text: #E7ECF2;
  --text-muted: #8996A8;
  --text-faint: #57667A;
  --accent: #2FB6A6;
  --accent-dim: #1F7A70;
  --lamp-green: #3FBF63;
  --lamp-green-glow: rgba(63,191,99,0.45);
  --lamp-amber: #E8A33D;
  --lamp-amber-glow: rgba(232,163,61,0.45);
  --lamp-red: #E1523D;
  --lamp-red-glow: rgba(225,82,61,0.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  min-height: 100vh;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
.hidden{ display:none !important; }

/* ---------- login screen ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.login-card{
  width: 380px; max-width: 100%;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
}
.login-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:3px;
  color: var(--text-faint); text-transform:uppercase; margin: 0 0 6px;
}
.login-eyebrow span{ color: var(--accent); }
.login-card h1{ margin: 0 0 20px; font-size:22px; }
.login-error{
  background: rgba(225,82,61,0.12); border:1px solid #4A2A26; color: var(--lamp-red);
  padding: 9px 12px; border-radius:5px; font-size:13px; margin-bottom:14px;
}

/* ---------- header / summary board ---------- */
header.board{
  background: linear-gradient(180deg, #131B26 0%, #0E1520 100%);
  border-bottom: 1px solid var(--line);
  padding: 22px 28px 18px;
}
.board-top{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px;
  margin-bottom:18px;
}
.board-title{
  font-size: 13px; letter-spacing: 3px; color: var(--text-faint);
  text-transform: uppercase; margin: 0 0 6px; font-family:'IBM Plex Mono', monospace;
}
.board-title span{ color: var(--accent); }
h1{ margin:0; font-size: 26px; font-weight: 700; letter-spacing: 0.5px; }
.header-right{ display:flex; align-items:center; gap:12px; }
.who-am-i{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px; background: var(--panel);
}
.who-am-i .role-tag{ color: var(--accent); text-transform:uppercase; }

.summary-strip{
  display:flex; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 6px; overflow:hidden;
}
.summary-cell{
  flex:1; background: var(--panel-raised); padding: 12px 18px;
  display:flex; flex-direction:column; gap:4px; min-width: 110px;
}
.summary-num{ font-family:'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600; line-height:1; }
.summary-label{ font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.summary-cell.expired .summary-num{ color: var(--lamp-red); }
.summary-cell.expiring .summary-num{ color: var(--lamp-amber); }
.summary-cell.valid .summary-num{ color: var(--lamp-green); }

/* ---------- layout ---------- */
.layout{ display:flex; min-height: calc(100vh - 140px); }
.sidebar{
  width: 300px; flex-shrink:0; border-right: 1px solid var(--line);
  background: #101825; padding: 16px; display:flex; flex-direction:column; gap:12px;
}
.search-input, .form-input, .form-select{
  width:100%; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 9px 10px; border-radius: 4px; font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px; outline: none;
}
.search-input:focus, .form-input:focus, .form-select:focus{ border-color: var(--accent); }
button{ cursor:pointer; font-family:'IBM Plex Sans', sans-serif; }
.btn{
  background: var(--panel-raised); border: 1px solid var(--line); color: var(--text);
  padding: 9px 14px; border-radius: 4px; font-size: 13px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.btn:hover{ border-color: var(--accent); }
.btn-primary{ background: var(--accent-dim); border: 1px solid var(--accent); color: #F2FFFC; }
.btn-primary:hover{ background: var(--accent); }
.btn-primary:disabled{ opacity:.6; cursor:default; }
.btn-danger{ background: transparent; border: 1px solid #4A2A26; color: var(--lamp-red); }
.btn-danger:hover{ background: rgba(225,82,61,0.1); }
.btn-ghost{ background: transparent; border: 1px solid transparent; color: var(--text-muted); }
.btn-ghost:hover{ color: var(--text); }
.btn-small{ padding: 5px 10px; font-size: 12px; }
.btn-block{ width:100%; }

.driver-list{ overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:4px; }
.driver-item{ display:flex; align-items:center; gap:10px; padding: 10px 10px; border-radius: 5px; cursor:pointer; border: 1px solid transparent; }
.driver-item:hover{ background: var(--panel); }
.driver-item.active{ background: var(--panel-raised); border-color: var(--line); }
.driver-item .info{ flex:1; min-width:0; }
.driver-item .name{ font-size: 13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.driver-item .sub{ font-size: 11px; color: var(--text-muted); font-family:'IBM Plex Mono', monospace; }

.lamp{ width: 11px; height: 11px; border-radius:50%; flex-shrink:0; position: relative; }
.lamp::after{ content:''; position:absolute; inset:-4px; border-radius:50%; opacity: .55; }
.lamp.green{ background: var(--lamp-green); }
.lamp.green::after{ box-shadow: 0 0 8px 3px var(--lamp-green-glow); }
.lamp.amber{ background: var(--lamp-amber); }
.lamp.amber::after{ box-shadow: 0 0 8px 3px var(--lamp-amber-glow); }
.lamp.red{ background: var(--lamp-red); }
.lamp.red::after{ box-shadow: 0 0 8px 3px var(--lamp-red-glow); }

.main{ flex:1; padding: 24px 30px; overflow-y:auto; }
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; height: 100%; color: var(--text-muted); gap: 10px; text-align:center; }
.empty-state .big{ font-size: 15px; color: var(--text); font-weight:600; }

.driver-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 22px; gap: 16px; flex-wrap:wrap; }
.driver-header h2{ margin: 0 0 4px; font-size:21px; }
.driver-meta{ display:flex; gap: 16px; color: var(--text-muted); font-family:'IBM Plex Mono', monospace; font-size:12.5px; flex-wrap:wrap; }
.driver-actions{ display:flex; gap:8px; }

table.comp-table{ width:100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow:hidden; }
table.comp-table thead th{ text-align:left; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-raised); }
table.comp-table tbody td{ padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
table.comp-table tbody tr:last-child td{ border-bottom:none; }
table.comp-table tbody tr:hover{ background: rgba(255,255,255,0.02); }
.cat-tag{ font-family:'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-muted); letter-spacing: .5px; }
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; }
.status-pill.green{ color: var(--lamp-green); }
.status-pill.amber{ color: var(--lamp-amber); }
.status-pill.red{ color: var(--lamp-red); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.row-actions button{ background:none; border:none; color:var(--text-faint); font-size:12px; padding:4px; }
.row-actions button:hover{ color: var(--text); }

.section-label{ font-size: 11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-faint); margin: 26px 0 10px; }

.overlay{ position:fixed; inset:0; background: rgba(6,10,16,0.6); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal{ background: var(--panel-raised); border: 1px solid var(--line); border-radius: 8px; width: 420px; max-width: 92vw; padding: 22px; max-height: 88vh; overflow-y:auto; }
.modal h3{ margin: 0 0 16px; font-size:16px; }
.field{ margin-bottom: 13px; }
.field label{ display:block; font-size: 11.5px; color: var(--text-muted); margin-bottom:5px; letter-spacing:.4px; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top: 18px; }

.user-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom: 1px solid var(--line); }
.user-row:last-child{ border-bottom:none; }
.user-row .uname{ flex:1; font-size:13.5px; }
.user-row .urole{ font-family:'IBM Plex Mono', monospace; font-size:11px; color: var(--text-muted); text-transform:uppercase; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-track{ background: transparent; }

@media (max-width: 720px){
  .layout{ flex-direction:column; }
  .sidebar{ width:auto; border-right:none; border-bottom:1px solid var(--line); }
}