/* ==========================================================================
   HRMS Licence Issuer — console styles
   ==========================================================================

   Direction: "registry".

   This console mints and revokes the licences that decide whether a customer's
   HR system runs at all. It is a system of record, and it is styled like one:
   a ledger page, not a dashboard. Everything here is deliberately conservative
   because the operator needs to trust what they are reading before they act.

   Rules rather than shadows. Squares rather than pills. One institutional
   navy rather than an accent palette. Light only — there is no dark theme and
   no prefers-color-scheme block, by instruction.

   Machine identifiers — licence keys, fingerprints, hostnames, counts,
   timestamps — are set in monospace with tabular figures. That is not
   decoration: those strings get compared character by character by a human
   under pressure, and a proportional face makes that harder than it needs to
   be.

   NOTE ON VARIABLE NAMES
   The --text-muted / --danger / --accent / --border-color names are inherited
   from the previous dark theme and are referenced inline inside templates.
   They are kept and remapped rather than renamed, so nothing silently loses
   its colour. New work should use the semantic names above them.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --paper:        #ffffff;   /* records themselves */
  --field:        #f4f5f7;   /* application chrome: sidebar, headers, toolbars */
  --field-sunk:   #eceef1;   /* pressed / nested chrome */

  /* --- Rules ------------------------------------------------------------
     Visible, not apologetic. A legacy console draws its structure; it does
     not imply it with shadow. */
  --rule:         #c9ced6;
  --rule-strong:  #9aa3af;

  /* --- Ink -------------------------------------------------------------- */
  --ink:          #1c1f23;
  --ink-soft:     #5a616b;
  /* 4.65:1 on paper. The obvious lighter grey for this role measured 3.77:1,
     and everything wearing it — the summary labels, record meta lines — is
     set at 10-11px where AA wants 4.5:1. A label you have to lean in to read
     is not doing its job on a console someone revokes licences from. */
  --ink-faint:    #6e757e;

  /* --- The one accent ---------------------------------------------------
     An institutional navy. Used for primary actions, the active nav record
     and links, and nothing else. */
  --seal:         #14395e;
  --seal-hover:   #0e2a47;
  --seal-wash:    #e8edf3;

  /* --- Status ----------------------------------------------------------
     A records-office palette: forest, ochre, oxblood. Each is dark enough to
     carry small text on its own pale wash at WCAG AA. */
  --ok:           #1a6135;  --ok-wash:   #e7f1ea;
  --warn:         #8a5a00;  --warn-wash: #f7efe0;
  --stop:         #9a2820;  --stop-wash: #f6e8e7;
  --note:         #1f4b7a;  --note-wash: #e8eef4;

  /* --- Type ------------------------------------------------------------- */
  --ui: "Segoe UI", Tahoma, Geneva, Verdana, system-ui, -apple-system, sans-serif;
  --data: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  /* --- Compatibility aliases (see file header) -------------------------- */
  --text-main:    var(--ink);
  --text-muted:   var(--ink-soft);
  --border-color: var(--rule);
  --bg-card:      var(--paper);
  --bg-dark:      var(--field);
  --bg-sidebar:   var(--field);
  --primary:      var(--seal);
  --accent:       var(--seal);
  --danger:       var(--stop);
  --info:         var(--note);
  --radius:       0;
  --shadow:       none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.45;
  background: var(--field);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--seal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One focus treatment everywhere. Keyboard operation of a console like this
   is not an edge case. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 1px;
}

/* ==========================================================================
   Iconography
   Every icon is a 24x24 sprite drawn as open paths — they carry no fill of
   their own and must be stroked, or each one renders as a solid black blob.
   fill and stroke are inherited properties, so setting them on the <svg>
   reaches the <use> shadow content; both selectors are listed anyway because
   that inheritance is easy to break by accident.

   Butt caps and mitred joins rather than round: this console is drawn with
   square corners throughout and rounded icon ends read soft against it. The
   miterlimit clamps the spike that an acute join would otherwise throw at
   this size.
   ========================================================================== */

svg use, .brand-mark, .nav-icon, .auth-mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 3;
}

.app-wrapper { display: flex; width: 100vw; min-height: 100vh; }

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
  width: 232px;
  flex: none;
  background: var(--field);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 13px;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.brand-mark { width: 20px; height: 20px; flex: none; color: var(--seal); }

.brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.2;
}

/* A stamped classification marker, not a gradient chip. */
.brand-badge {
  margin-left: auto;
  font-family: var(--data);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--seal);
  border: 1px solid var(--seal);
  padding: 1px 4px;
  border-radius: 0;
}

.nav-list { list-style: none; display: block; padding: 6px 0; }

.nav-item a {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-start;
  padding: 7px 14px 7px 11px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 400;
  border-radius: 0;
  border-left: 3px solid transparent;
}

.nav-item a:hover {
  background: var(--field-sunk);
  color: var(--ink);
  text-decoration: none;
}

/* The active record reads as selected: it lifts to paper white and carries
   the seal in the margin. */
.nav-item.active a {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--seal);
  box-shadow: none;
}

.nav-icon { width: 15px; height: 15px; flex: none; color: var(--ink-faint); }
.nav-item.active a .nav-icon { color: var(--seal); }
.nav-label { flex: 1; }

.nav-badge {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 700;
  color: var(--stop);
  background: var(--stop-wash);
  border: 1px solid var(--stop);
  border-radius: 0;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.sidebar-foot {
  margin-top: auto;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}

.key-state { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.key-state::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 0;   /* a square indicator lamp, like a panel LED */
}
.key-state.ok  { color: var(--ok); }
.key-state.ok::before  { background: var(--ok); }
.key-state.bad { color: var(--stop); }
.key-state.bad::before { background: var(--stop); }

.issuer-name { color: var(--ink-faint); font-family: var(--data); font-size: 11px; }

/* ==========================================================================
   Header
   ========================================================================== */

.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }

/* The ledger band: a heavy rule over a hairline. This double rule is the one
   motif that repeats — here, and under every table header — so a page reads
   as a bound record rather than a stack of widgets. */
.header {
  padding: 11px 20px 10px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 -4px 0 -3px var(--rule-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  border-left: 1px solid var(--rule);
  padding: 2px 0 2px 12px;
  border-radius: 0;
  font-size: 12px;
}

.user-name { font-weight: 600; color: var(--ink); }

.btn-logout {
  color: var(--seal);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 0;
}
.btn-logout:hover { text-decoration: underline; }

.content-body { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; }

/* ==========================================================================
   Summary strip
   The four figures are one bordered instrument divided by rules, not four
   floating cards. A registry states its totals in a single band.
   ========================================================================== */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.metric-card {
  padding: 11px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  background: none;
}
.metric-card:first-child { border-left: 0; }

.metric-card .title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
}

/* Figures stay ink-black. Colouring a count green or red states a judgement
   the number has not earned — the badges in the table do that job, where
   there is a record to attach it to. */
.metric-card .value {
  font-family: var(--data);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Records (cards) and tables
   ========================================================================== */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.card-header {
  padding: 9px 14px;
  background: var(--field);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.table-responsive { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12.5px;
}

th {
  background: var(--field);
  padding: 7px 14px;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  /* The ledger double rule again. */
  border-bottom: 3px double var(--rule-strong);
}

td {
  padding: 6px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--seal-wash); }

/* Identifiers and instants are machine strings; set them as such. */
td .mono, td time, .cell-id { font-family: var(--data); }

/* ==========================================================================
   Status badges
   Square, outlined, uppercase. Each pairing is a dark ink on its own pale
   wash, so it stays legible at this size.
   ========================================================================== */

.badge {
  display: inline-block;
  padding: 0 5px;
  border-radius: 0;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid;
  white-space: nowrap;
}
.badge-ok     { background: var(--ok-wash);   color: var(--ok);       border-color: var(--ok); }
.badge-info   { background: var(--note-wash); color: var(--note);     border-color: var(--note); }
.badge-warn   { background: var(--warn-wash); color: var(--warn);     border-color: var(--warn); }
.badge-danger { background: var(--stop-wash); color: var(--stop);     border-color: var(--stop); }
.badge-muted  { background: var(--field);     color: var(--ink-soft); border-color: var(--rule-strong); }

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 0;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none !important;
}
.btn:hover { background: var(--field-sunk); }

.btn-primary  { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn-primary:hover { background: var(--seal-hover); border-color: var(--seal-hover); }

.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { background: var(--field-sunk); }

.btn-danger { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn-danger:hover { background: #7f1f18; border-color: #7f1f18; }

.btn-sm { padding: 3px 9px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; }

/* --- Fields ------------------------------------------------------------- */

.form-group,
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 13px; }

label,
.field__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea,
.field__input {
  width: 100%;
  padding: 5px 8px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13px;
  outline: none;
}

input:focus, select:focus, textarea:focus, .field__input:focus {
  border-color: var(--seal);
  box-shadow: inset 0 0 0 1px var(--seal);
}

/* Keys, fingerprints and tokens are typed and compared by eye. */
input[name*="key" i], input[name*="token" i], input[name*="fingerprint" i], textarea.mono {
  font-family: var(--data);
}

.field__help  { font-size: 11px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-weight: 400; }
.field__error { font-size: 11px; color: var(--stop); font-weight: 600; text-transform: none; letter-spacing: 0; }

.checkbox-list { display: flex; flex-wrap: wrap; gap: 5px 18px; list-style: none; }
.checkbox-list label {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink); font-weight: 400; font-size: 12.5px;
  text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   Notices
   ========================================================================== */

.alerts { display: flex; flex-direction: column; gap: 6px; }

.alert {
  padding: 8px 12px;
  border-radius: 0;
  font-size: 12.5px;
  border: 1px solid;
  border-left-width: 3px;
}
.alert-success { background: var(--ok-wash);   border-color: var(--ok);   color: var(--ok); }
.alert-error,
.alert-warning { background: var(--stop-wash); border-color: var(--stop); color: var(--stop); }
.alert-info    { background: var(--note-wash); border-color: var(--note); color: var(--note); }

/* ==========================================================================
   Auth
   No gradient field. A sign-in page for an issuer console should look like
   the door to a records room, not a product landing page.
   ========================================================================== */

body.auth-body { display: block; background: var(--field); }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }

.auth-card {
  width: 100%;
  max-width: 370px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--seal);
  border-radius: 0;
  padding: 26px 26px 22px;
  box-shadow: none;
}

.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.auth-mark { width: 26px; height: 26px; color: var(--seal); flex: none; }
.auth-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.auth-subtitle { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }

.auth-form { margin-top: 4px; }
.auth-card .alert { margin-bottom: 14px; }

.auth-note {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }

.empty-state {
  padding: 26px 14px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 12.5px;
}

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Heading inside a record page. */
.record-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

/* An identifier shown inline in prose — fingerprints, keys, hostnames. */
.chip-id {
  font-family: var(--data);
  font-size: 11.5px;
  background: var(--field);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  color: var(--ink);
  word-break: break-all;
}

/* The signed licence token. Deliberately plain: it is a blob to be copied,
   not read, and the previous terminal-green on near-black was the single
   most "hacker console" thing on the page. */
.token-dump {
  width: 100%;
  height: 220px;
  font-family: var(--data);
  font-size: 11px;
  line-height: 1.5;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  color: var(--ink);
  padding: 10px;
  resize: vertical;
  word-break: break-all;
}

/* Dashboard: the register beside its subsidiary panel. */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }

/* A stack of small records inside a card — the expiring-licence list. */
.record-list { display: flex; flex-direction: column; }
.record-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
}
.record-row:last-child { border-bottom: 0; }
.record-row__name { font-weight: 600; color: var(--seal); }
.record-row__meta { font-size: 11px; color: var(--ink-faint); font-family: var(--data); }

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app-wrapper { flex-direction: column; }
  .sidebar { width: 100%; }
  .content-body { padding: 12px; }
  .header { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}