/* KeyRoster: charcoal surfaces and electric-green accents, inspired by the
   reference's modern view. Screen-only palette keeps QR labels print-friendly. */
@media screen {
  :root {
    --kr-bg:#0d1117; --kr-surface:#161b22; --kr-raised:#1c2128;
    --kr-border:#30363d; --kr-border-strong:#48515c;
    --kr-text:#e0e6ed; --kr-muted:#a0aab5;
    --kr-accent:#00ff41; --kr-accent-soft:#00ff4112;
    --kr-red:#ff958a; --kr-blue:#89c7ff;
    --kr-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    color-scheme:dark; background:var(--kr-bg); color:var(--kr-text);
  }
  body {background:var(--kr-bg);color:var(--kr-text);-webkit-font-smoothing:antialiased}
  ::selection {background:var(--kr-accent);color:var(--kr-bg)}
  a {color:var(--kr-accent)}
  button {transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible {
    outline:2px solid var(--kr-accent);outline-offset:3px;
  }
  p,.topbar p,.help-strip,.labels-note,.empty,.stat-note,.muted,
  .key-cell small,.holder small,.detail-top small,.detail-grid small,.timeline small,
  .rail-foot,.branch-card small,.brand small,.staff-toolbar small,.sync-bar,
  .agency-identity>span,.login-card .remember-help {color:var(--kr-muted)}
  .rail {background:var(--kr-bg);border-right:1px solid var(--kr-border)}
  .brand,.login-card .brand {
    font-family:var(--kr-mono);font-size:1.125rem;letter-spacing:-.04em;color:var(--kr-text);
  }
  .brand small {font-size:.625rem;letter-spacing:.08em}
  .brand-mark {border-color:var(--kr-accent);color:var(--kr-accent);border-radius:6px;background:var(--kr-accent-soft)}
  .branch-card {background:var(--kr-surface);border-color:var(--kr-border);border-radius:8px}
  .branch-card strong {color:var(--kr-text)}
  .branch-symbol {background:var(--kr-accent-soft);color:var(--kr-accent);border-radius:6px}
  .nav a,.nav button {color:var(--kr-muted);border:1px solid transparent;border-radius:6px}
  .nav-qr {display:grid;place-items:center;flex:none}
  .nav-qr svg {display:block;width:18px;height:18px}
  .nav [hidden],#mobile-menu-panel [hidden] {display:none!important}
  .nav a.active,.nav button:hover {background:var(--kr-accent-soft);border-color:#00ff4138;color:var(--kr-accent)}
  .nav-count,.rail-foot a,.rail-foot button {color:var(--kr-accent)}
  .live-mark,.green {background:var(--kr-accent)}
  .blue {background:var(--kr-blue)} .red {background:var(--kr-red)}
  h1,h2,.eyebrow,.section-label,th {font-family:var(--kr-mono)}
  h1 {font-weight:600;letter-spacing:-.045em;color:var(--kr-text)}
  h2 {font-weight:600;letter-spacing:-.035em;color:var(--kr-text)}
  .eyebrow,.section-label {color:var(--kr-accent);font-weight:500;font-size:.75rem;letter-spacing:.08em}
  .primary {
    background:var(--kr-accent);color:#07110a;border-color:var(--kr-accent);
    border-radius:6px;box-shadow:none;
  }
  .primary:hover {background:#39ff7a;border-color:#39ff7a;box-shadow:0 0 16px #00ff4120}
  .secondary,.row-action,.quick-keys button,.icon-button {
    background:var(--kr-surface);color:var(--kr-text);border:1px solid var(--kr-border-strong);border-radius:6px;
  }
  .secondary:hover,.row-action:hover,.quick-keys button:hover,.icon-button:hover {
    background:var(--kr-accent-soft);border-color:var(--kr-accent);color:var(--kr-accent);
  }
  .stat {
    background:var(--kr-surface);border-color:var(--kr-border);border-radius:10px;
    box-shadow:0 4px 16px #00000020;
  }
  .stat:hover {border-color:var(--kr-accent);box-shadow:0 0 16px #00ff4112}
  .stat-label {color:var(--kr-muted);font-weight:500}
  .stat strong {font-family:var(--kr-mono);font-weight:500;color:var(--kr-accent);letter-spacing:-.04em}
  .stat[data-filter="out"] strong {color:var(--kr-blue)}
  .overdue-stat strong {color:var(--kr-red)}
  @keyframes overdue-number-glow {
    0%,100% {text-shadow:0 0 4px #ff7b7233,0 0 10px #ff7b7218}
    50% {text-shadow:0 0 10px #ff7b7299,0 0 21px #ff7b7245}
  }
  @keyframes overdue-key-glow {
    0%,100% {box-shadow:0 0 6px #ff7b721c}
    50% {box-shadow:0 0 15px #ff7b7255,0 0 3px #ff7b7240}
  }
  .overdue-stat.has-overdue strong,.key-row.is-overdue .key-cell strong {
    animation:overdue-number-glow 4s ease-in-out infinite;
  }
  .key-row.is-overdue .status.overdue {animation:overdue-key-glow 4s ease-in-out infinite}
  .register {background:var(--kr-surface);border-color:var(--kr-border);border-radius:10px;box-shadow:0 4px 24px #00000025}
  .search {background:var(--kr-bg);border-color:var(--kr-border-strong);border-radius:6px;color:var(--kr-muted)}
  .search input {color:var(--kr-text)}
  input::placeholder,textarea::placeholder {color:#8b949e;opacity:1}
  .search:focus-within {outline:2px solid var(--kr-accent);outline-offset:2px}
  .search input:focus,.search input:focus-visible {outline:none;box-shadow:none}
  .tabs {border-color:var(--kr-border);gap:24px}
  .tabs button {color:var(--kr-muted);transition:color .15s,border-color .15s,text-shadow .15s,box-shadow .15s}
  .tabs button.selected {color:var(--kr-accent);border-color:var(--kr-accent)}
  .tabs span {color:var(--kr-muted)}
  .tabs button[data-tab="all"],.tabs button[data-tab="in"] {color:var(--kr-accent);--tab-glow:#00ff4180}
  .tabs button[data-tab="out"] {color:var(--kr-blue);--tab-glow:#89c7ff80}
  .tabs button[data-tab="overdue"] {color:var(--kr-red);--tab-glow:#ff958a80}
  .tabs button span {color:inherit}
  .tabs button.selected {border-color:currentColor}
  .tabs button:is(:hover,:focus-visible) {
    border-color:currentColor;
    text-shadow:0 0 8px var(--tab-glow),0 0 16px var(--tab-glow);
    box-shadow:0 7px 13px -9px var(--tab-glow);
  }
  th {background:var(--kr-bg);color:var(--kr-muted);font-weight:500;font-size:.75rem;letter-spacing:.05em}
  td {color:var(--kr-text);border-color:var(--kr-border)}
  tbody tr:hover {background:var(--kr-raised)}
  .key-row.is-missing {background:#241b20}
  .key-row.is-missing:hover {background:#302127}
  .key-cell strong,.holder strong,.holder-card strong,.detail-grid strong,.timeline strong {color:var(--kr-text)}
  .key-icon {color:#8b949e;background:var(--kr-accent-soft);border:1px solid #00ff4126;border-radius:6px}
  .key-cell .key-icon,.detail-top .key-icon {color:#179447}
  .key-cell {gap:26px}
  .detail-top {gap:28px}
  .key-icon svg {display:block;width:1.65rem;height:1.65rem;fill:currentColor}
  .detail-top .key-icon svg {width:2rem;height:2rem}
  .top-actions .scan-button {display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .top-actions .scan-button svg {display:block;width:19px;height:19px;flex:none;align-self:center}
  .top-actions .scan-button span {display:block;font-size:inherit;line-height:19px;margin:0}
  .top-actions.staff-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,320px);flex:0 1 320px;min-width:0;gap:8px}
  .top-actions.staff-actions>button {display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:10px 8px;font-size:.875rem;line-height:1.25;white-space:normal;text-align:center}
  .status {border:1px solid transparent;font-weight:600}
  .status.in {background:#00ff4110;color:#70f39a;border-color:#00ff4133}
  .status.out {background:#58a6ff12;color:var(--kr-blue);border-color:#58a6ff40}
  .status.overdue {background:#ff7b7214;color:var(--kr-red);border-color:#ff7b7240}
  .status.missing {background:#ff958a19;color:var(--kr-red);border-color:#ff958a55}
  .status.unavailable,.status.archived {background:#8b949e15;color:#bec7d0;border-color:var(--kr-border-strong)}
  .case-warning {color:var(--kr-red)!important}
  .case-confirm {color:var(--kr-text)}
  .due-over,.validation,.sync-error,.login-card #auth-error {color:var(--kr-red)}
  .due-cell .mobile-label {color:var(--kr-muted)}
  .help-icon,.sync-bar button,.scan-glyph {color:var(--kr-accent)}
  .scan-glyph svg {display:block;width:42px;height:42px;margin:0 auto}
  .scrim {background:#010409b8;backdrop-filter:blur(3px)}
  .panel {background:var(--kr-bg);border-left:1px solid var(--kr-border);box-shadow:-16px 0 48px #0008}
  .panel-head,.panel-footer,.detail-top {border-color:var(--kr-border)}
  .panel-head,.panel-footer {background:var(--kr-surface)}
  .holder-card,.form-intro,.archive-summary {background:var(--kr-surface);border:1px solid var(--kr-border);border-radius:8px;color:var(--kr-text)}
  .field>span {color:var(--kr-text)}
  .field input,.field select,.field textarea,.staff-toolbar select {
    color:var(--kr-text);background:var(--kr-surface);border:1px solid var(--kr-border-strong);border-radius:6px;
  }
  /* Cover native autofill paint while retaining saved-password functionality
     and the normal keyboard-focus outline. :is tolerates vendor aliases. */
  .login-card input:is(:autofill, :-moz-autofill, :-webkit-autofill) {
    background-color:var(--kr-surface) !important;
    background-image:none !important;
    box-shadow:inset 0 0 0 1000px var(--kr-surface) !important;
    color:var(--kr-text) !important;
    -webkit-text-fill-color:var(--kr-text) !important;
    caret-color:var(--kr-text);
    filter:none;
  }
  .timeline {border-color:var(--kr-border-strong)}
  .timeline li::before {background:var(--kr-accent);border-color:var(--kr-bg);box-shadow:0 0 0 1px #00ff4150}
  .timeline small {line-height:1.5}
  .audit-history {border-top:1px solid var(--kr-border);margin-top:1.25rem;padding-top:1rem}
  .audit-history h4 {color:var(--kr-text);font-size:1rem;margin:0 0 .85rem}
  .audit-history .timeline strong {font-size:.95rem}
  .audit-history .timeline small {font-size:.875rem}
  .scan-area {background:var(--kr-surface);border-color:#00ff4166;border-radius:10px}
  .camera {background:var(--kr-bg);border-radius:6px}
  .divider {color:var(--kr-muted);font-family:var(--kr-mono)}
  .divider::before,.divider::after {background:var(--kr-border)}
  .toast {background:var(--kr-raised);color:var(--kr-text);border:1px solid #00ff4170;border-radius:6px;box-shadow:0 8px 28px #0008}
  .login-card {background:var(--kr-surface);border-color:var(--kr-border);border-radius:10px;box-shadow:0 8px 40px #0005}
  .login-card a {color:var(--kr-accent)}
  .remember-choice input {background:var(--kr-bg);border-color:var(--kr-border-strong)}
  .remember-choice input::after {background:var(--kr-muted)}
  .remember-choice input:checked {background:var(--kr-accent);border-color:var(--kr-accent)}
  .remember-choice input:checked::after {background:var(--kr-bg)}
  .archive-toolbar:has(button:not([hidden])) {border-color:var(--kr-border)}
  /* Physical labels remain black-on-white even while the app uses dark surfaces. */
  .print-label {background:#fff;color:#172d38;border-color:#c9d1d9;border-radius:6px;color-scheme:light}
  .print-label strong {color:#172d38}
  .print-label small {color:#526371}
  @media (min-width:761px) and (max-width:1100px) {
    .topbar:has(.staff-actions) {flex-wrap:wrap}
    .top-actions.staff-actions {flex:1 1 100%;width:100%}
  }
  @media (max-width:760px) {
    .rail {border-right:0;border-bottom:1px solid var(--kr-border)}
    .brand {font-size:1.125rem}
    .stat {border-radius:8px}
    .tabs {gap:4px}
    tbody {background:var(--kr-surface);gap:12px;padding:10px}
    .key-row {background:var(--kr-surface);border:1px solid var(--kr-border-strong);border-radius:10px;box-shadow:0 3px 8px #0005}
    .key-row:hover {background:var(--kr-raised)}
    .key-cell {align-items:flex-start;gap:10px}
    .key-cell .key-icon {display:grid;width:36px;height:36px;margin-top:1px}
    .detail-top {gap:16px}
    .top-actions.staff-actions {width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
    .top-actions.staff-actions>button {min-height:50px;padding:8px 6px;font-size:.8125rem}
    .panel {border-left:0}
  }
  @media (prefers-reduced-motion:reduce) {
    button {transition:none}
    .panel {animation:none}
    .overdue-stat.has-overdue strong,.key-row.is-overdue .key-cell strong {
      animation:none;text-shadow:0 0 8px #ff7b7255;
    }
    .key-row.is-overdue .status.overdue {animation:none;box-shadow:0 0 9px #ff7b7233}
  }
}