/*
 * hd-ui: shared admin UI classes for Hannington Digital apps.
 * Same visual system as Pricernner_api's /auth/admin (Users) and /admin/driver-links pages,
 * pulled out of their per-page <style> blocks so any app can use it.
 *
 * Use: copy the hd-ui folder into the app's static root and link it AFTER the app's own CSS:
 *   <link rel="stylesheet" href="/hd-ui/hd-ui.css">  <script src="/hd-ui/hd-ui.js" defer></script>
 * Needs Inter (Google Fonts); falls back to the system UI font.
 *
 * Page skeleton:
 *   <div class="hd">
 *     <div class="hd-head">
 *       <h1 class="hd-title">Users</h1>
 *       <div class="hd-actions"><button class="hd-btn primary">New user</button></div>
 *     </div>
 *     <p class="hd-sub">One or two lines on what this page is for.</p>
 *     <div class="hd-kpis">…</div>
 *     <div class="hd-bar">search / filters <span class="hd-spacer"></span> actions</div>
 *     <div class="hd-card">
 *       <div class="hd-scroll"><table class="hd-table">…</table></div>
 *       <div class="hd-card-foot">pager</div>
 *     </div>
 *   </div>
 *
 * Specificity: every component is a single class, so a page can override it with one more.
 * `.hd` resets descendants with :where(), which costs no specificity. If the host stylesheet
 * styles bare elements with more than one class of weight (e.g. `button:not(.a):not(.b)`),
 * exclude the scope in that rule with `:not(:where(.hd *))`, which leaves its weight unchanged.
 * Bootstrap modals, form controls and buttons inside `.hd` are restyled to match (bottom of file).
 */

:root {
  --hd-fg: #09090b;
  --hd-fg-2: #3f3f46;
  --hd-muted: #57575f;
  --hd-faint: #6b6b74;
  --hd-border: #e4e4e7;
  --hd-border-strong: #d4d4d8;
  --hd-border-soft: #f1f1f3;
  --hd-hover: #fafafa;
  --hd-sel: #f4f4f5;
  --hd-surface: #fff;
  --hd-red: #b91c1c;
  --hd-red-bg: #fef2f2;
  --hd-green: #047857;
  --hd-green-bg: #ecfdf5;
  --hd-amber: #b45309;
  --hd-amber-bg: #fffbeb;
  --hd-blue: #1d4ed8;
  --hd-blue-bg: #eff6ff;
  --hd-radius: 6px;
  --hd-radius-lg: 10px;
  --hd-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --hd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03);
  --hd-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --hd-ring: 0 0 0 3px rgba(9, 9, 11, 0.06);
  --hd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hd-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hd-width: 1360px;
}

/* ---------- Scope + reset ---------- */

/* Every page is the same width as the top bar, so content never jumps sideways between pages.
   The scrollbar's space is always reserved, so short and long pages line up too. */
html:has(.hd) { scrollbar-gutter: stable; }
.hd {
  font-family: var(--hd-font);
  font-feature-settings: 'cv11';
  font-size: 13px;
  line-height: 1.5;
  color: var(--hd-fg);
  width: 100%;
  max-width: var(--hd-width);
  margin: 0 auto;
  padding: 24px 24px 96px;
  -webkit-font-smoothing: antialiased;
}
/* Single-column forms: same page width and left edge, content capped at a readable width. */
.hd.narrow > :where(:not(.modal, dialog)) { max-width: 920px; }
.hd *, .hd *::before, .hd *::after { box-sizing: border-box; }

/* Neutralise app-wide element styles (uppercase headers, td borders, row heights, link colours). */
.hd :where(table) { border-collapse: separate; border-spacing: 0; }
.hd :where(table, thead, tbody, tfoot, tr, th, td) {
  border: 0; background: none; font-family: inherit; text-transform: none; letter-spacing: normal; height: auto;
}
.hd :where(span, label, input, select, option, textarea) { font-size: inherit; }
.hd :where(a) {
  color: var(--hd-fg); text-decoration: underline; text-decoration-color: var(--hd-border-strong);
  text-underline-offset: 2px;
}
.hd :where(a):hover { color: var(--hd-fg); text-decoration-color: currentColor; }
.hd :where(input[type=checkbox], input[type=radio]) { accent-color: var(--hd-fg); }
.hd :where(code) { font-family: var(--hd-mono); font-size: 0.92em; color: var(--hd-fg); }
.hd [hidden] { display: none !important; }

/* ---------- Page head ---------- */

.hd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hd-head-l { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.hd-title { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.02em; line-height: 1.3; color: var(--hd-fg); }
.hd-title .hd-tag { margin-left: 6px; vertical-align: 3px; }
.hd-sub { font-size: 13px; color: var(--hd-muted); margin: 4px 0 16px; line-height: 1.5; max-width: 860px; }
.hd-head + .hd-kpis, .hd-head + .hd-bar, .hd-head + .hd-card, .hd-head + .hd-grid, .hd-head + .hd-stack { margin-top: 16px; }
.hd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--hd-muted); margin-bottom: 6px; }
.hd-crumbs a { color: var(--hd-muted); text-decoration: none; }
.hd-crumbs a:hover { color: var(--hd-fg); text-decoration: underline; }
.hd-crumbs .sep { color: var(--hd-border-strong); }
.hd-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--hd-muted); margin-top: 4px; }

/* ---------- Buttons ---------- */

.hd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 31px; padding: 0 14px; margin: 0;
  font-family: var(--hd-font); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid var(--hd-border); border-radius: var(--hd-radius); background: var(--hd-surface); color: var(--hd-fg);
  text-decoration: none; cursor: pointer; box-shadow: var(--hd-shadow-xs);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hd-btn:hover { background: var(--hd-hover); border-color: var(--hd-border-strong); color: var(--hd-fg); text-decoration: none; }
.hd-btn:focus-visible { outline: 2px solid var(--hd-fg); outline-offset: 2px; }
.hd-btn.primary { background: var(--hd-fg); border-color: var(--hd-fg); color: #fff; }
.hd-btn.primary:hover { background: #27272a; border-color: #27272a; color: #fff; }
.hd-btn.danger { color: var(--hd-red); }
.hd-btn.danger:hover { background: var(--hd-red-bg); border-color: #fecaca; color: var(--hd-red); }
.hd-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--hd-muted); }
.hd-btn.ghost:hover { background: var(--hd-sel); color: var(--hd-fg); }
.hd-btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.hd-btn.icon { width: 31px; padding: 0; }
.hd-btn.icon.sm { width: 26px; }
.hd-btn:disabled, .hd-btn.disabled { opacity: 0.45; cursor: default; box-shadow: none; pointer-events: none; }
.hd-btn i, .hd-btn svg { font-size: 12px; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Controls ---------- */

.hd-control {
  height: 31px; padding: 0 10px; margin: 0; font-family: var(--hd-font); font-size: 13px; color: var(--hd-fg);
  border: 1px solid var(--hd-border); border-radius: var(--hd-radius); background: var(--hd-surface);
  box-shadow: var(--hd-shadow-xs); outline: none; max-width: 100%;
}
.hd-control:focus { border-color: var(--hd-faint); box-shadow: var(--hd-ring); }
.hd-control::placeholder { color: #a1a1aa; }
.hd-control:disabled, .hd-control[readonly] { background: var(--hd-hover); color: var(--hd-muted); }
textarea.hd-control { height: auto; min-height: 72px; padding: 7px 10px; line-height: 1.5; resize: vertical; }
select.hd-control {
  -webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.hd-control.sm { height: 26px; font-size: 12px; padding: 0 8px; }
select.hd-control.sm { padding-right: 24px; background-position: right 8px center; }
/* Tinted selects, e.g. an inline status picker in a table row */
.hd-control.ok { background-color: var(--hd-green-bg); color: var(--hd-green); border-color: #a7f3d0; font-weight: 500; }
.hd-control.warn { background-color: var(--hd-amber-bg); color: var(--hd-amber); border-color: #fde68a; font-weight: 500; }
.hd-control.bad { background-color: var(--hd-red-bg); color: var(--hd-red); border-color: #fecaca; font-weight: 500; }
.hd-control.muted { background-color: var(--hd-sel); color: var(--hd-fg-2); font-weight: 500; }

.hd-search { position: relative; display: inline-flex; align-items: center; }
.hd-search svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--hd-faint); pointer-events: none; }
.hd-search .hd-control { padding-left: 30px; width: 280px; }

/* ---------- Toolbar ---------- */

.hd-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hd-spacer { flex: 1; }
.hd-bar-label { font-size: 12.5px; color: var(--hd-muted); display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* ---------- Segmented tabs (buttons or links) ---------- */

.hd-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--hd-sel); border-radius: 8px; max-width: 100%; overflow-x: auto; }
.hd-tabs > a, .hd-tabs > button {
  display: inline-flex; align-items: center; height: 25px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--hd-radius);
  font-family: var(--hd-font); font-size: 13px; font-weight: 500; background: transparent; color: var(--hd-muted);
  text-decoration: none; cursor: pointer; box-shadow: none; white-space: nowrap; transition: color 0.12s;
}
.hd-tabs > a:hover, .hd-tabs > button:hover { background: transparent; color: var(--hd-fg); text-decoration: none; }
.hd-tabs > .on { background: var(--hd-surface); color: var(--hd-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03); }
.hd-tabs > .on:hover { background: var(--hd-surface); }
.hd-tabs .n { color: var(--hd-faint); font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; }
.hd-tabs .on .n { color: var(--hd-muted); }

/* ---------- KPI strip ---------- */

.hd-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--hd-border-soft);
  border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); overflow: hidden; margin-bottom: 16px;
  box-shadow: var(--hd-shadow-sm);
}
.hd-kpi { background: var(--hd-surface); padding: 12px 16px; min-width: 0; }
.hd-kpi-l { font-size: 11.5px; font-weight: 500; color: var(--hd-muted); }
.hd-kpi-v { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.35; }
.hd-kpi-s { font-size: 11.5px; color: var(--hd-faint); margin-top: 1px; }
/* Same strip with a title + description per cell (e.g. role legend) */
.hd-kpi-t { font-size: 13px; font-weight: 600; }
.hd-kpi-t .n { color: var(--hd-faint); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ---------- Cards + layout ---------- */

.hd-card {
  background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg);
  box-shadow: var(--hd-shadow-sm); overflow: hidden; min-width: 0;
}
.hd-card + .hd-card { margin-top: 16px; }
.hd-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--hd-border-soft);
}
.hd-card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--hd-fg); }
.hd-card-title .n { color: var(--hd-faint); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.hd-card-hint { font-size: 12px; color: var(--hd-faint); margin-top: 2px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.hd-card-body { padding: 16px; }
.hd-card-body + .hd-card-body { border-top: 1px solid var(--hd-border-soft); }
.hd-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--hd-border-soft); background: var(--hd-surface);
}
.hd-scroll { overflow-x: auto; }

.hd-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hd-stack > .hd-card + .hd-card { margin-top: 0; }
.hd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.hd-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Tables ---------- */

table.hd-table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; }
.hd-table thead th {
  background: var(--hd-surface); font-size: 11.5px; font-weight: 500; color: var(--hd-muted); text-align: left;
  white-space: nowrap; padding: 10px 14px 8px; border-bottom: 1px solid var(--hd-border); vertical-align: bottom;
}
.hd-table td {
  padding: 9px 14px; border-bottom: 1px solid var(--hd-border-soft); vertical-align: middle;
  font-size: 12.5px; color: var(--hd-fg); line-height: 1.45;
}
.hd-table tbody tr:last-child td { border-bottom: 0; }
.hd-table tbody tr:hover td { background: var(--hd-hover); }
.hd-table tbody tr.sel td { background: var(--hd-sel); }
.hd-table tr.off td { color: var(--hd-faint); }
.hd-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hd-table .c { text-align: center; }
.hd-table .nw { white-space: nowrap; }
.hd-table .chk { width: 34px; padding-right: 0; }
.hd-table .z { color: var(--hd-faint); }
.hd-table :where(a) { text-decoration: none; }
.hd-table :where(a):hover { text-decoration: underline; }
.hd-table tfoot td { border-top: 1px solid var(--hd-border); border-bottom: 0; background: var(--hd-hover); font-weight: 600; font-size: 13px; }
.hd-table .acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
/* Fixed columns: <table class="hd-table fixed"> takes its column widths from the header row, so they
   stay put between pages of results and line up across stacked tables. Size columns with .w-* on
   the <th>; unsized columns share what's left. Long .hd-main / .hd-s text ends in an ellipsis
   (hd-ui.js shows the full text on hover); other cell text wraps. Below --hd-table-min the table
   scrolls sideways instead of squeezing the unsized columns; raise it on tables with many sized
   columns, e.g. style="--hd-table-min: 1200px". */
table.hd-table.fixed { table-layout: fixed; min-width: var(--hd-table-min, 960px); }
.hd-table.fixed td { overflow-wrap: anywhere; }
.hd-table.fixed td > .hd-main, .hd-table.fixed td > .hd-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-table.fixed th.chk { width: 44px; }
.hd-table .w-xs { width: 80px; }
.hd-table .w-sm { width: 110px; }
.hd-table .w-md { width: 150px; }
.hd-table .w-lg { width: 180px; }
.hd-table .w-xl { width: 240px; }
/* Expandable detail row: <tr class="hd-detail" id="…" hidden> toggled by a [data-hd-toggle] button */
.hd-table tr.hd-detail > td { background: var(--hd-hover); padding: 14px 14px 16px; }
.hd-table tr.hd-detail:hover > td { background: var(--hd-hover); }
.hd-table tr.open > td { border-bottom-color: transparent; background: var(--hd-hover); }
.hd-main { font-weight: 500; font-size: 13px; letter-spacing: -0.005em; color: var(--hd-fg); }
.hd-s { font-size: 11.5px; color: var(--hd-muted); margin-top: 1px; }
.hd-flag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--hd-amber); margin-top: 3px; }
.hd-empty { padding: 48px 16px; text-align: center; color: var(--hd-muted); font-size: 13px; }
.hd-empty strong { display: block; color: var(--hd-fg); font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }

/* Disclosure chevron button for expandable rows */
.hd-disclose {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: var(--hd-radius); background: transparent; color: var(--hd-faint);
  cursor: pointer; box-shadow: none;
}
.hd-disclose:hover { background: var(--hd-sel); color: var(--hd-fg); }
.hd-disclose::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s;
}
.hd-disclose[aria-expanded='true']::before { transform: rotate(45deg) translate(-1px, -1px); }

/* ---------- Tags, avatars, small text ---------- */

.hd-tag {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--hd-font); font-size: 11px; font-weight: 500;
  line-height: 18px; padding: 0 7px; border: 0; border-radius: 5px; background: var(--hd-sel); color: var(--hd-fg-2);
  white-space: nowrap; vertical-align: 1px; box-shadow: none; text-decoration: none;
}
.hd-tag.ok { background: var(--hd-green-bg); color: var(--hd-green); }
.hd-tag.warn { background: var(--hd-amber-bg); color: var(--hd-amber); }
.hd-tag.bad { background: var(--hd-red-bg); color: var(--hd-red); }
.hd-tag.info { background: var(--hd-blue-bg); color: var(--hd-blue); }
.hd-tag.muted { color: var(--hd-muted); }
.hd-tag.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--hd-border); }
.hd-tag.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
button.hd-tag { cursor: pointer; height: auto; margin: 0; }
button.hd-tag:hover { filter: brightness(0.97); }

.hd-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px;
  border-radius: 50%; background: var(--hd-sel); color: var(--hd-fg-2); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.hd-avatar.lg { width: 40px; height: 40px; font-size: 14px; }

.hd-muted { color: var(--hd-muted); }
.hd-faint { color: var(--hd-faint); }
.hd-num { font-variant-numeric: tabular-nums; }
.hd-nw { white-space: nowrap; }
.hd-mono { font-family: var(--hd-mono); font-size: 12px; }
.hd-code {
  font-family: var(--hd-mono); font-size: 12px; background: var(--hd-sel); color: var(--hd-fg);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.hd-link { color: var(--hd-fg-2); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--hd-faint); background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0; font: inherit; }
.hd-link:hover { color: var(--hd-fg); border-bottom-color: var(--hd-fg); text-decoration: none; }
.hd-hr { border: 0; border-top: 1px solid var(--hd-border-soft); margin: 16px 0; opacity: 1; }

/* ---------- Notes / callouts ---------- */

.hd-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 16px;
  border: 1px solid var(--hd-border); border-radius: 8px; background: var(--hd-hover);
  font-size: 12.5px; line-height: 1.5; color: var(--hd-fg-2);
}
.hd-note > i { margin-top: 2px; color: var(--hd-faint); }
.hd-note strong { color: var(--hd-fg); font-weight: 600; }
.hd-note.warn { background: var(--hd-amber-bg); border-color: #fde68a; color: #92400e; }
.hd-note.warn > i, .hd-note.warn strong { color: #92400e; }
.hd-note.info { background: var(--hd-blue-bg); border-color: #bfdbfe; color: #1e40af; }
.hd-note.info > i, .hd-note.info strong { color: #1e40af; }
.hd-note.bad { background: var(--hd-red-bg); border-color: #fecaca; color: var(--hd-red); }
.hd-note.bad > i, .hd-note.bad strong { color: var(--hd-red); }
.hd-note.ok { background: var(--hd-green-bg); border-color: #a7f3d0; color: #065f46; }
.hd-note.ok > i, .hd-note.ok strong { color: #065f46; }

/* ---------- Forms ---------- */

.hd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.hd-form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-form-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.hd-form-grid .span-all { grid-column: 1 / -1; }
.hd-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.hd-field > label, .hd-label { display: block; margin: 0; font-size: 12px; font-weight: 500; color: var(--hd-fg-2); line-height: 1.4; }
.hd-field .hd-control { width: 100%; }
.hd-hint { font-size: 11.5px; color: var(--hd-faint); line-height: 1.45; font-weight: 400; }
.hd-check {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 26px;
  font-size: 13px; font-weight: 400; color: var(--hd-fg-2); cursor: pointer;
}
.hd-check input { margin: 0; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.hd-form-section { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--hd-fg); }
.hd-form-section + .hd-hint { margin: -8px 0 12px; }
.hd-form-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hd-error { font-size: 12.5px; color: var(--hd-red); margin: 0; }
.hd-form-foot .hd-error { margin-right: auto; }

/* ---------- Detail lists ---------- */

/* Grid of label/value pairs: <dl class="hd-dl"><div><dt>Email</dt><dd>…</dd></div>…</dl> */
.hd-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 24px; margin: 0; }
.hd-dl > div { min-width: 0; }
.hd-dl dt { font-size: 11.5px; font-weight: 500; color: var(--hd-muted); margin: 0 0 2px; }
.hd-dl dd { font-size: 13px; color: var(--hd-fg); margin: 0; overflow-wrap: anywhere; }
.hd-dl .span-all { grid-column: 1 / -1; }
/* Label-left rows variant */
.hd-dl.rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hd-dl.rows > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--hd-border-soft); }
.hd-dl.rows > div:last-child { border-bottom: 0; }
.hd-dl.rows dt { margin: 0; font-size: 12.5px; }

/* ---------- Pager ---------- */

.hd-pager { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hd-pager > a, .hd-pager > span, .hd-pager > button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; margin: 0;
  border: 1px solid transparent; border-radius: var(--hd-radius); background: transparent; box-shadow: none;
  font-family: var(--hd-font); font-size: 12.5px; font-weight: 500; color: var(--hd-muted);
  text-decoration: none; font-variant-numeric: tabular-nums; cursor: pointer;
}
.hd-pager > a:hover, .hd-pager > button:hover { background: var(--hd-sel); color: var(--hd-fg); text-decoration: none; }
.hd-pager > .on { background: var(--hd-fg); color: #fff; cursor: default; }
.hd-pager > .on:hover { background: var(--hd-fg); color: #fff; }
.hd-pager > .gap { cursor: default; color: var(--hd-faint); }
.hd-pager > .off { opacity: 0.35; cursor: default; pointer-events: none; }
.hd-pager-info { font-size: 12px; color: var(--hd-muted); font-variant-numeric: tabular-nums; }
/* Left side of a pager footer: count + rows-per-page menu (views/partials/pager.ejs) */
.hd-card-foot-l { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.hd-card-foot-l .hd-bar-label { font-size: 12px; }

/* ---------- Dialogs (native <dialog>) ---------- */

.hd-dialog {
  font-family: var(--hd-font); font-feature-settings: 'cv11'; font-size: 13px; line-height: 1.5; color: var(--hd-fg);
  border: 1px solid var(--hd-border); border-radius: 12px; padding: 0; width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); box-shadow: var(--hd-shadow-lg); background: var(--hd-surface);
  -webkit-font-smoothing: antialiased;
}
.hd-dialog.wide { width: min(600px, calc(100vw - 32px)); }
.hd-dialog.lg { width: min(780px, calc(100vw - 32px)); }
.hd-dialog::backdrop { background: rgba(9, 9, 11, 0.35); }
.hd-dialog *, .hd-dialog *::before, .hd-dialog *::after { box-sizing: border-box; }
.hd-dialog-body { padding: 18px 18px 6px; }
.hd-dialog h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--hd-fg); }
.hd-dialog-body > p { font-size: 12.5px; color: var(--hd-muted); margin: 0 0 14px; line-height: 1.5; }
.hd-dialog .hd-field { margin-bottom: 12px; }
.hd-dialog .hd-form-grid .hd-field { margin-bottom: 0; }
.hd-dialog .hd-form-grid { margin-bottom: 12px; }
.hd-dialog-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px 16px; }
.hd-dialog-foot .hd-error { margin-right: auto; }

/* ---------- Menus (<details class="hd-menu"><summary>…</summary><div class="hd-menu-list">…</div></details>) ---------- */

.hd-menu { position: relative; display: inline-block; }
.hd-menu > summary { list-style: none; cursor: pointer; }
.hd-menu > summary::-webkit-details-marker { display: none; }
.hd-menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; min-width: 190px; padding: 4px;
  background: var(--hd-surface); border: 1px solid var(--hd-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); font-family: var(--hd-font); font-size: 13px;
}
.hd-menu.right .hd-menu-list { left: auto; right: 0; }
.hd-menu-list > a, .hd-menu-list > button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; margin: 0; border: 0; border-radius: 5px;
  background: transparent; box-shadow: none; color: var(--hd-fg-2); font: inherit; font-weight: 400; text-align: left;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.hd-menu-list > a:hover, .hd-menu-list > button:hover { background: var(--hd-sel); color: var(--hd-fg); text-decoration: none; }
.hd-menu-list > .on { color: var(--hd-fg); font-weight: 500; }
.hd-menu-list > .danger { color: var(--hd-red); }
.hd-menu-list > a i, .hd-menu-list > button i { width: 14px; color: var(--hd-faint); font-size: 12px; }
.hd-menu-head { padding: 8px 10px 8px; border-bottom: 1px solid var(--hd-border-soft); margin: -4px -4px 4px; }
.hd-menu-sep { height: 1px; background: var(--hd-border-soft); margin: 4px -4px; }

/* ---------- Toasts (hd.toast) + floating action bar ---------- */

.hd-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.hd-toast {
  display: flex; align-items: center; gap: 8px; max-width: 420px; padding: 10px 14px; border-radius: 10px;
  background: #09090b; color: #fff; font-family: var(--hd-font); font-size: 12.5px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s; pointer-events: auto;
}
.hd-toast.show { opacity: 1; transform: none; }
.hd-toast::before { content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.hd-toast.error::before { background: #f87171; }
.hd-toast.info::before { background: #a1a1aa; }

.hd-float {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80;
  display: none; align-items: center; gap: 8px; font-family: var(--hd-font);
}
.hd-float.show { display: flex; animation: hdFloatIn 0.18s ease; }
.hd-float .hd-btn { height: 38px; padding: 0 16px; border-radius: 999px; box-shadow: 0 3px 12px rgba(9, 9, 11, 0.12); }
.hd-float .hd-btn.primary { padding: 0 22px; font-weight: 600; box-shadow: 0 6px 20px rgba(9, 9, 11, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12); }
.hd-float .cnt {
  background: #f59e0b; color: #111; border-radius: 99px; font-size: 11px; font-weight: 700;
  line-height: 18px; min-width: 18px; padding: 0 6px; text-align: center;
}
@keyframes hdFloatIn {
  from { transform: translateX(-50%) translateY(8px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ---------- Timeline (activity / audit trail) ---------- */

.hd-timeline { list-style: none; margin: 0; padding: 0; }
.hd-timeline > li { position: relative; padding: 0 0 14px 20px; }
.hd-timeline > li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-border-strong); }
.hd-timeline > li::after { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--hd-border); }
.hd-timeline > li:last-child { padding-bottom: 0; }
.hd-timeline > li:last-child::after { display: none; }
.hd-timeline > li.ok::before { background: var(--hd-green); }
.hd-timeline > li.warn::before { background: #f59e0b; }
.hd-timeline > li.bad::before { background: #ef4444; }
.hd-timeline-t { font-size: 12.5px; font-weight: 500; color: var(--hd-fg); }
.hd-timeline-s { font-size: 11.5px; color: var(--hd-muted); }

/* ---------- App chrome: top bar + footer ---------- */

.hd-topbar {
  background: var(--hd-surface); border-bottom: 1px solid var(--hd-border); font-family: var(--hd-font);
  font-feature-settings: 'cv11'; font-size: 13px; color: var(--hd-fg); -webkit-font-smoothing: antialiased;
}
.hd-topbar *, .hd-topbar *::before, .hd-topbar *::after { box-sizing: border-box; }
.hd-topbar-in { display: flex; align-items: center; gap: 20px; max-width: var(--hd-width); margin: 0 auto; padding: 0 24px; min-height: 54px; }
.hd-brand { display: flex; align-items: center; gap: 10px; color: var(--hd-fg); text-decoration: none; font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; white-space: nowrap; }
.hd-brand:hover { color: var(--hd-fg); text-decoration: none; }
.hd-brand img { height: 22px; width: auto; display: block; }
.hd-brand .sep { width: 1px; height: 18px; background: var(--hd-border); }
.hd-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.hd-nav > a, .hd-nav > .hd-menu > summary {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--hd-radius);
  color: var(--hd-muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.12s, background 0.12s;
}
.hd-nav > a:hover, .hd-nav > .hd-menu > summary:hover { color: var(--hd-fg); background: var(--hd-sel); text-decoration: none; }
.hd-nav > a.on, .hd-nav > .hd-menu.on > summary { color: var(--hd-fg); background: var(--hd-sel); }
.hd-nav .ext { font-size: 10px; color: var(--hd-faint); }
.hd-nav .caret { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.7; }
.hd-topbar-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hd-topbar-r .hd-menu > summary { display: flex; align-items: center; gap: 8px; padding: 3px; border-radius: 999px; }
.hd-topbar-r .hd-menu > summary:hover .hd-avatar { background: #e4e4e7; }

/* Sign-in screens: <main class="hd hd-auth"><div class="hd-auth-box"> brand + .hd-card + .hd-auth-foot </div></main> */
.hd.hd-auth {
  flex: 1; display: flex; align-items: center; justify-content: center; max-width: none;
  padding: 56px 16px; background: var(--hd-hover);
}
.hd-auth-box { width: 100%; max-width: 380px; }
.hd-auth-box.wide { max-width: 440px; }
.hd-auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.hd-auth-brand img { height: 24px; width: auto; }
.hd-auth-brand .sep { width: 1px; height: 18px; background: var(--hd-border); }
.hd-auth .hd-card-body { padding: 24px; }
.hd-auth .hd-title { font-size: 17px; }
.hd-auth .hd-sub { margin-bottom: 18px; }
.hd-auth-foot { text-align: center; font-size: 12px; color: var(--hd-faint); margin: 16px 0 0; line-height: 1.5; }
.hd-auth-foot a { color: var(--hd-muted); }
.hd-btn.block { width: 100%; }
.hd-btn.lg { height: 36px; font-size: 13.5px; }
.hd-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hd-field-row a { font-size: 12px; color: var(--hd-muted); }

.hd-footer { border-top: 1px solid var(--hd-border-soft); font-family: var(--hd-font); font-size: 12px; color: var(--hd-faint); margin-top: auto; }
.hd-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--hd-width); margin: 0 auto; padding: 16px 24px; }

/* ---------- Bootstrap bridge (modals, form controls, buttons inside .hd) ---------- */

.hd .modal-content {
  border: 1px solid var(--hd-border); border-radius: 12px; box-shadow: var(--hd-shadow-lg);
  font-size: 13px; color: var(--hd-fg); font-family: var(--hd-font);
}
.hd .modal-header { padding: 18px 18px 6px; border-bottom: 0; align-items: flex-start; }
.hd .modal-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.hd .modal-title i { display: none; }
.hd .modal-body { padding: 10px 18px 6px; }
.hd .modal-footer { padding: 12px 18px 16px; border-top: 0; gap: 8px; }
.hd .modal-footer > * { margin: 0; }
.hd .btn-close { width: 12px; height: 12px; padding: 6px; margin: 0 0 0 auto; border: 0; box-shadow: none; opacity: 0.45; background-size: 10px; }
.hd .btn-close:hover { opacity: 0.8; background-color: transparent; }
.hd .form-label { font-size: 12px; font-weight: 500; color: var(--hd-fg-2); margin-bottom: 4px; }
.hd .form-control, .hd .form-select {
  font-family: var(--hd-font); font-size: 13px; min-height: 31px; padding: 5px 10px; color: var(--hd-fg);
  border: 1px solid var(--hd-border); border-radius: var(--hd-radius); box-shadow: var(--hd-shadow-xs);
}
.hd .form-control-sm, .hd .form-select-sm { min-height: 26px; font-size: 12px; padding: 2px 8px; }
.hd .form-select { padding-right: 28px; background-position: right 8px center; background-size: 12px 10px; }
.hd textarea.form-control { padding: 7px 10px; }
.hd .form-control:focus, .hd .form-select:focus { border-color: var(--hd-faint); box-shadow: var(--hd-ring); color: var(--hd-fg); }
.hd .form-text { font-size: 11.5px; color: var(--hd-faint); margin-top: 3px; }
.hd .form-check-label { font-size: 13px; font-weight: 400; color: var(--hd-fg-2); }
.hd .form-check-input:checked, .hd .form-check-input[type=checkbox]:indeterminate { background-color: var(--hd-fg); border-color: var(--hd-fg); }
.hd .form-check-input:focus { border-color: var(--hd-faint); box-shadow: var(--hd-ring); }
.hd .input-group-text { font-size: 13px; background: var(--hd-hover); border-color: var(--hd-border); color: var(--hd-muted); }
.hd .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 31px; padding: 0 14px;
  font-family: var(--hd-font); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid var(--hd-border); border-radius: var(--hd-radius); background: var(--hd-surface); color: var(--hd-fg);
  box-shadow: var(--hd-shadow-xs); transition: background 0.12s, border-color 0.12s;
}
.hd .btn:hover { background: var(--hd-hover); border-color: var(--hd-border-strong); color: var(--hd-fg); }
.hd .btn-sm { min-height: 26px; padding: 0 10px; font-size: 12px; }
.hd .btn-primary, .hd .btn-success, .hd .btn-dark {
  background: var(--hd-fg) !important; border-color: var(--hd-fg) !important; color: #fff !important;
}
.hd .btn-primary:hover, .hd .btn-success:hover, .hd .btn-dark:hover { background: #27272a !important; border-color: #27272a !important; color: #fff !important; }
.hd .btn-danger, .hd .btn-outline-danger { background: var(--hd-surface); color: var(--hd-red); border-color: var(--hd-border); }
.hd .btn-danger:hover, .hd .btn-outline-danger:hover { background: var(--hd-red-bg); color: var(--hd-red); border-color: #fecaca; }
.hd .btn:disabled { opacity: 0.45; }
.hd .alert { font-size: 12.5px; border-radius: 8px; padding: 10px 12px; border: 1px solid var(--hd-border); background: var(--hd-hover); color: var(--hd-fg-2); }
.hd .alert-warning { background: var(--hd-amber-bg); border-color: #fde68a; color: #92400e; }
.hd .alert-info { background: var(--hd-blue-bg); border-color: #bfdbfe; color: #1e40af; }
.hd .alert-danger { background: var(--hd-red-bg); border-color: #fecaca; color: var(--hd-red); }
.hd .alert-success { background: var(--hd-green-bg); border-color: #a7f3d0; color: #065f46; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hd-grid, .hd-grid.even { grid-template-columns: minmax(0, 1fr); }
}
.hd-menu-list > .hd-show-sm { display: none; }
@media (max-width: 860px) {
  .hd-topbar-in { flex-wrap: wrap; gap: 0 12px; padding: 8px 16px 0; }
  .hd-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; padding: 6px 0 8px; margin: 0 -4px; }
  .hd-nav::-webkit-scrollbar { display: none; }
  .hd-topbar-r { order: 2; }
}
@media (max-width: 760px) {
  .hd { padding: 16px 16px 96px; }
  .hd-hide-sm { display: none !important; }
  .hd-menu-list > .hd-show-sm { display: flex; }
  .hd-tabs { scrollbar-width: none; }
  .hd-tabs::-webkit-scrollbar { display: none; }
  .hd-table .hide-sm { display: none; }
  .hd-search, .hd-search .hd-control { width: 100%; }
  .hd-form-grid, .hd-form-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .hd-dl.rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hd-footer-in { padding: 16px; }
  .hd-float { left: 16px; right: 16px; transform: none; flex-wrap: wrap; justify-content: center; }
  .hd-float.show { animation: none; }
}