/* ============================================================
   Beehive Mortgage — "Hive" Design System
   Source of truth: BHV Design System handoff README.md
   Signal yellow for identity, blackout ink for everything
   functional. Served at {base_url}/static/css/hive.css?v=N —
   bump ?v= on every deploy that changes this file.
   Email surfaces do NOT use this file (see hive_email_style.py).
   ============================================================ */

:root {
  /* Brand */
  --hive-yellow: #FFCB05;
  --hive-yellow-hover: #FFD633;
  --hive-ink: #141414;
  --hive-ink-hover: #2C2C2C;
  --hive-graphite: #3A3A3F;
  --hive-muted: #74746C;
  --hive-muted-light: #A0A096;
  --hive-hairline: #E6E6E2;
  --hive-paper: #F4F4F2;
  --hive-staff-bg: #ECECE8;
  --hive-surface: #FFFFFF;
  --hive-light: #F5F5F0;
  --hive-honey: #E8A13D;
  --hive-alert-bg: #FFF9E0;
  --hive-row-hover: #FFFDF2;
  --hive-row-zebra: #FAFAFA;
  --hive-panel-bg: #F8F8F6;

  /* Status pairs (text / background) */
  --hive-ok: #12813F;        --hive-ok-bg: #EAFAEF;
  --hive-bad: #C0392B;       --hive-bad-bg: #FDEAEA;
  --hive-warn: #8A6400;      --hive-warn-bg: #FFF6D6;
  --hive-neutral: #55555B;   --hive-neutral-bg: #EEF0F3;
  /* processing = yellow text on ink */

  /* Type */
  --hive-font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --hive-font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

  /* Shape */
  --hive-r-btn: 8px;
  --hive-r-card: 14px;
  --hive-r-pill: 999px;
  --hive-r-sheet: 8px;

  /* Elevation */
  --hive-shadow-card: 0 24px 50px rgba(0, 0, 0, 0.12);
  --hive-shadow-sheet: 0 30px 60px rgba(0, 0, 0, 0.14);
}

/* ---------- Base (intentionally low-specificity) ---------- */

.hive-body {
  margin: 0;
  background: var(--hive-paper);
  color: var(--hive-ink);
  font-family: var(--hive-font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hive-body--staff { background: var(--hive-staff-bg); }

.hive-h1 {
  font-family: var(--hive-font-sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--hive-ink);
  margin: 0;
}

.hive-h1--accent {
  border-left: 4px solid var(--hive-yellow);
  padding-left: 14px;
}

.hive-h2 {
  font-family: var(--hive-font-sans);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--hive-ink);
  margin: 0;
}

.hive-sub {
  color: var(--hive-muted);
  font-size: 14px;
}

/* Micro-label: mono, uppercase, tracked out */
.hive-microlabel {
  font-family: var(--hive-font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hive-muted);
}

.hive-microlabel--ondark { color: var(--hive-muted-light); }
.hive-microlabel--yellow { color: var(--hive-yellow); }

/* Money / IDs always mono */
.hive-money,
.hive-mono {
  font-family: var(--hive-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hexagon motif ---------- */

.hive-hex {
  display: inline-block;
  width: 12px;
  height: 14px;
  background: var(--hive-yellow);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  vertical-align: middle;
  margin-right: 8px;
  flex: none;
}

/* Bleed accent: place inside a dark header that has
   position:relative; overflow:hidden. Decorative only. */
.hive-hex-bleed {
  position: absolute;
  top: -40%;
  right: -30px;
  width: 120px;
  height: 140px;
  background: var(--hive-yellow);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

.hive-hex-bleed--bright { opacity: 0.16; }
.hive-hex-bleed--bottom { top: auto; bottom: -40%; }

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

.hive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hive-font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--hive-r-btn);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.hive-btn--primary {
  background: var(--hive-yellow);
  color: var(--hive-ink);
}
.hive-btn--primary:hover { background: var(--hive-yellow-hover); }

.hive-btn--dark {
  background: var(--hive-ink);
  color: #fff;
}
.hive-btn--dark:hover { background: var(--hive-ink-hover); }

.hive-btn--secondary {
  background: var(--hive-surface);
  color: var(--hive-ink);
  border-color: var(--hive-ink);
}
.hive-btn--secondary:hover { background: var(--hive-light); }

.hive-btn--approve {
  background: var(--hive-ok);
  color: #fff;
}
.hive-btn--approve:hover { background: #0E6A33; }

.hive-btn--danger {
  background: var(--hive-surface);
  color: var(--hive-bad);
  border-color: #F0C4BF;
}
.hive-btn--danger:hover { background: var(--hive-bad-bg); border-color: var(--hive-bad); }

.hive-btn--block { display: flex; width: 100%; }

.hive-btn:disabled,
.hive-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Pills & badges ---------- */

.hive-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hive-font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--hive-r-pill);
  white-space: nowrap;
}

.hive-badge {
  /* square variant, e.g. table status cells */
  display: inline-block;
  font-family: var(--hive-font-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--hive-r-btn);
  white-space: nowrap;
}

.hive-pill--ok,      .hive-badge--ok      { color: var(--hive-ok);      background: var(--hive-ok-bg); }
.hive-pill--bad,     .hive-badge--bad     { color: var(--hive-bad);     background: var(--hive-bad-bg); }
.hive-pill--warn,    .hive-badge--warn    { color: var(--hive-warn);    background: var(--hive-warn-bg); }
.hive-pill--neutral, .hive-badge--neutral { color: var(--hive-neutral); background: var(--hive-neutral-bg); }
.hive-pill--processing, .hive-badge--processing { color: var(--hive-yellow); background: var(--hive-ink); }

/* ---------- Cards / panels ---------- */

.hive-card {
  background: var(--hive-surface);
  border: 1px solid var(--hive-hairline);
  border-radius: var(--hive-r-card);
  padding: 24px;
}

.hive-card--floating {
  border: none;
  box-shadow: var(--hive-shadow-card);
}

.hive-panel {
  background: var(--hive-panel-bg);
  border-radius: 10px;
  padding: 16px 20px;
}

.hive-alert--info {
  background: var(--hive-alert-bg);
  border-left: 4px solid var(--hive-yellow);
  border-radius: 0 var(--hive-r-btn) var(--hive-r-btn) 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--hive-ink);
}

/* ---------- Dark headers (app top bars) ---------- */

.hive-topbar {
  position: relative;
  overflow: hidden;
  background: var(--hive-ink);
  color: var(--hive-light);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
}

.hive-topbar > * { position: relative; z-index: 1; }

.hive-topbar--yellow-rule { border-bottom: 4px solid var(--hive-yellow); }

.hive-topbar__divider {
  width: 1px;
  height: 22px;
  background: var(--hive-graphite);
  flex: none;
}

.hive-topbar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hive-topbar__nav a {
  color: #D7D7D0;
  font-family: var(--hive-font-sans);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.hive-topbar__nav a:hover,
.hive-topbar__nav a.active { color: var(--hive-yellow); }

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

.hive-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--hive-surface);
}

.hive-table th {
  font-family: var(--hive-font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hive-muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--hive-ink);
  white-space: nowrap;
}

.hive-table td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--hive-hairline);
  vertical-align: middle;
}

.hive-table tbody tr:nth-child(even) { background: var(--hive-row-zebra); }
.hive-table tbody tr:hover { background: var(--hive-row-hover); }

.hive-table .hive-td-num,
.hive-table td.num {
  font-family: var(--hive-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Stat chips (staff dashboard) ---------- */

.hive-stat-chip {
  flex: 1;
  min-width: 130px;
  background: var(--hive-surface);
  border: 1px solid var(--hive-hairline);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 14px 16px;
}

.hive-stat-chip .value {
  font-family: var(--hive-font-mono);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  color: var(--hive-ink);
}

.hive-stat-chip .label {
  font-family: var(--hive-font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hive-muted);
  margin-top: 4px;
}

.hive-stat-chip--total   { border-left-color: var(--hive-ink); }
.hive-stat-chip--ok      { border-left-color: var(--hive-ok);      background: var(--hive-ok-bg); }
.hive-stat-chip--bad     { border-left-color: var(--hive-bad);     background: var(--hive-bad-bg); }
.hive-stat-chip--future  { border-left-color: var(--hive-yellow);  background: var(--hive-alert-bg); }
.hive-stat-chip--neutral { border-left-color: var(--hive-neutral); background: var(--hive-neutral-bg); }

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

.hive-input,
.hive-select,
.hive-textarea {
  font-family: var(--hive-font-sans);
  font-size: 15px;
  color: var(--hive-ink);
  background: var(--hive-surface);
  border: 2px solid var(--hive-hairline);
  border-radius: var(--hive-r-btn);
  padding: 11px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.hive-input:focus,
.hive-select:focus,
.hive-textarea:focus {
  outline: none;
  border-color: var(--hive-ink);
}

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

.hive-label {
  display: block;
  font-family: var(--hive-font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hive-muted);
  margin-bottom: 6px;
}

/* ---------- Utility ---------- */

.hive-container       { max-width: 960px;  margin: 0 auto; padding: 0 20px; }
.hive-container--wide { max-width: 1180px; }

.hive-divider { border: none; border-top: 1px solid var(--hive-hairline); margin: 20px 0; }

.hive-link {
  color: var(--hive-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hive-link:hover { color: var(--hive-graphite); }

@media (max-width: 768px) {
  .hive-topbar { padding: 12px 16px; }
  .hive-stat-chip { min-width: 45%; }
}