/* ============================================================
   Headgate Design System — component styles
   Ported verbatim from _ds_bundle.js (the runtime that injected
   these classes in the prototypes). Markup in the pages mirrors
   what the React components rendered.
   ============================================================ */

/* ---- Alert ---- */
.hg-alert{
  display:flex; gap:12px; align-items:flex-start; font-family:var(--font-sans);
  padding:14px 16px; border-radius:var(--radius-md); border:var(--border-width) solid var(--border-subtle);
  background:var(--surface-card); color:var(--text-body); font-size:14px; line-height:1.5;
}
.hg-alert__ico{ flex:none; width:20px; height:20px; margin-top:1px; color:var(--text-muted); }
.hg-alert__ico svg{ width:100%; height:100%; }
.hg-alert__title{ font-weight:var(--fw-semibold); color:var(--text-strong); margin:0 0 2px; }
.hg-alert__body{ margin:0; }
.hg-alert--info{ background:var(--blue-50); border-color:var(--blue-200); }
.hg-alert--info .hg-alert__ico{ color:var(--blue-600); }
.hg-alert--water{ background:var(--aqua-100); border-color:var(--aqua-200); }
.hg-alert--water .hg-alert__ico{ color:var(--aqua-700); }
.hg-alert--success{ background:var(--success-bg); border-color:#BCE0CC; }
.hg-alert--success .hg-alert__ico{ color:var(--success-fg); }
.hg-alert--warning{ background:var(--warning-bg); border-color:#EBD79C; }
.hg-alert--warning .hg-alert__ico{ color:var(--warning-fg); }
.hg-alert--danger{ background:var(--danger-bg); border-color:#EDC4C1; }
.hg-alert--danger .hg-alert__ico{ color:var(--danger-fg); }

/* ---- Button ---- */
.hg-btn{
  --_bg:var(--brand-primary); --_fg:#fff; --_bd:transparent; --_bgh:var(--brand-primary-h);
  font-family:var(--font-sans); font-weight:var(--fw-semibold);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:var(--border-width-strong) solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-md); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  line-height:1; user-select:none;
}
.hg-btn:hover{ background:var(--_bgh); }
.hg-btn:active{ transform:scale(.98); }
.hg-btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.hg-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.hg-btn--pill{ border-radius:var(--radius-pill); }
.hg-btn--block{ width:100%; }
.hg-btn--sm{ font-size:13px; padding:8px 14px; }
.hg-btn--md{ font-size:15px; padding:11px 20px; }
.hg-btn--lg{ font-size:17px; padding:15px 28px; }
.hg-btn--primary{ --_bg:var(--brand-primary); --_fg:#fff; --_bgh:var(--brand-primary-h); }
.hg-btn--accent{ --_bg:var(--accent-water); --_fg:#fff; --_bgh:var(--accent-water-h); }
.hg-btn--secondary{ --_bg:var(--surface-card); --_fg:var(--text-strong); --_bd:var(--border-default); --_bgh:var(--sand-100); }
.hg-btn--ghost{ --_bg:transparent; --_fg:var(--brand-primary); --_bgh:var(--blue-50); }
.hg-btn--quiet{ --_bg:transparent; --_fg:var(--text-muted); --_bgh:var(--sand-100); }
.hg-btn--ondark{ --_bg:var(--white); --_fg:var(--blue-950); --_bgh:var(--sand-100); }
.hg-btn .hg-btn__ico{ display:inline-flex; width:1.15em; height:1.15em; }
.hg-btn .hg-btn__ico svg{ width:100%; height:100%; }

/* ---- Card ---- */
.hg-card{
  background:var(--surface-card); border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  overflow:hidden; color:var(--text-body); font-family:var(--font-sans);
}
.hg-card--pad{ padding:var(--space-5); }
.hg-card--interactive{ cursor:pointer; }
.hg-card--interactive:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.hg-card--interactive:active{ transform:translateY(0); box-shadow:var(--shadow-md); }
.hg-card--flat{ box-shadow:none; }
.hg-card--brand{ background:var(--surface-brand); color:var(--text-on-brand); border-color:transparent; }
.hg-card--inverse{ background:var(--surface-inverse); color:var(--text-on-dark); border-color:transparent; }

/* ---- IconButton ---- */
.hg-iconbtn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:var(--border-width-strong) solid transparent; background:transparent; color:var(--text-body);
  border-radius:var(--radius-md); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hg-iconbtn svg{ width:1.25em; height:1.25em; }
.hg-iconbtn:hover{ background:var(--sand-100); }
.hg-iconbtn:active{ transform:scale(.94); }
.hg-iconbtn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.hg-iconbtn[disabled]{ opacity:.4; cursor:not-allowed; }
.hg-iconbtn--sm{ width:32px; height:32px; font-size:16px; }
.hg-iconbtn--md{ width:40px; height:40px; font-size:19px; }
.hg-iconbtn--lg{ width:48px; height:48px; font-size:22px; }
.hg-iconbtn--solid{ background:var(--brand-primary); color:#fff; }
.hg-iconbtn--solid:hover{ background:var(--brand-primary-h); }
.hg-iconbtn--outline{ border-color:var(--border-default); }
.hg-iconbtn--outline:hover{ background:var(--sand-100); border-color:var(--border-strong); }

/* ---- Input / field ---- */
.hg-field{ font-family:var(--font-sans); display:flex; flex-direction:column; gap:6px; }
.hg-field__label{ font-size:13px; font-weight:var(--fw-semibold); color:var(--text-strong); }
.hg-field__req{ color:var(--accent-sun); }
.hg-field__hint{ font-size:12px; color:var(--text-muted); }
.hg-field__err{ font-size:12px; color:var(--danger-fg); }
.hg-input{
  font-family:var(--font-sans); font-size:15px; color:var(--text-body);
  background:var(--surface-card); border:var(--border-width-strong) solid var(--border-default);
  border-radius:var(--radius-md); padding:11px 13px; width:100%; box-sizing:border-box;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hg-input::placeholder{ color:var(--text-subtle); }
.hg-input:hover{ border-color:var(--border-strong); }
.hg-input:focus{ outline:none; border-color:var(--accent-water); box-shadow:var(--shadow-focus); }
.hg-input[disabled]{ background:var(--sand-100); color:var(--text-subtle); cursor:not-allowed; }
.hg-input--invalid{ border-color:var(--danger-fg); }
.hg-input--invalid:focus{ box-shadow:0 0 0 3px var(--danger-bg); }
.hg-input--mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.hg-inwrap{ position:relative; display:flex; align-items:center; }
.hg-inwrap__ico{ position:absolute; left:12px; width:18px; height:18px; color:var(--text-muted); pointer-events:none; }
.hg-inwrap__ico svg{ width:100%; height:100%; }
.hg-inwrap--ico .hg-input{ padding-left:38px; }

/* ---- Select ---- */
.hg-sel-field{ font-family:var(--font-sans); display:flex; flex-direction:column; gap:6px; }
.hg-sel-field__label{ font-size:13px; font-weight:var(--fw-semibold); color:var(--text-strong); }
.hg-sel-wrap{ position:relative; display:flex; align-items:center; }
.hg-select{
  appearance:none; -webkit-appearance:none; font-family:var(--font-sans); font-size:15px; color:var(--text-body);
  background:var(--surface-card); border:var(--border-width-strong) solid var(--border-default);
  border-radius:var(--radius-md); padding:11px 38px 11px 13px; width:100%; box-sizing:border-box; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hg-select:hover{ border-color:var(--border-strong); }
.hg-select:focus{ outline:none; border-color:var(--accent-water); box-shadow:var(--shadow-focus); }
.hg-select[disabled]{ background:var(--sand-100); color:var(--text-subtle); cursor:not-allowed; }
.hg-sel-wrap__chev{ position:absolute; right:13px; width:16px; height:16px; color:var(--text-muted); pointer-events:none; }

/* ---- Stat ---- */
.hg-stat{ font-family:var(--font-sans); display:flex; flex-direction:column; gap:4px; }
.hg-stat__value{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-medium); color:var(--text-strong); letter-spacing:-0.01em; line-height:1; }
.hg-stat--sm .hg-stat__value{ font-size:24px; }
.hg-stat--md .hg-stat__value{ font-size:34px; }
.hg-stat--lg .hg-stat__value{ font-size:48px; }
.hg-stat__label{ font-size:13px; color:var(--text-muted); }
.hg-stat__sub{ font-size:12px; color:var(--text-subtle); }
.hg-stat--ondark .hg-stat__value{ color:#fff; }
.hg-stat--ondark .hg-stat__label{ color:rgba(255,255,255,.7); }
.hg-stat--accent .hg-stat__value{ color:var(--accent-water); }