/* ═══════════════════════════════════════════════════════════════════════════
   Hive Platform — Shared Components
   Loaded after hive-tokens.css. Defines the visual building blocks every
   app reuses: sidebar shell, toolbar, buttons, inputs, toggles, modals.
   App-specific rules go in each app's HTML <style> block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout shell ──────────────────────────────────────────────────────── */
.hv-app  { display: flex; height: 100vh; overflow: hidden; }
.hv-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.hv-content { flex: 1; overflow: auto; padding: 20px 22px; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.hv-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}
.hv-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.hv-logo-hex { width: 24px; height: 24px; flex-shrink: 0; }
.hv-logo-name   { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.1; }
.hv-logo-brand  { font-size: 8px;  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--green); line-height: 1; }
.hv-logo-module { font-size: 9px;  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); line-height: 1; }

.hv-sb-section {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3);
  padding: 10px 14px 3px;
}
.hv-sb-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 14px;
  font-family: inherit; font-size: 13px; font-weight: 400;
  color: var(--text-2);
  background: transparent; border: none; cursor: pointer;
  text-align: left; text-decoration: none;
  transition: color .1s, background .1s;
}
.hv-sb-item:hover { color: var(--text); background: rgba(0,0,0,0.03); }
.hv-sb-item.active { color: var(--green); background: var(--green-tint); font-weight: 600; }
.hv-sb-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .65; }
.hv-sb-divider { height: 1px; background: var(--border); margin: 10px 14px; flex-shrink: 0; }
.hv-sb-footer  { margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.hv-toolbar {
  height: 48px; display: flex; align-items: center;
  padding: 0 18px; gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hv-toolbar-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.hv-toolbar-sub   { font-size: 12px; color: var(--text-3); }
.hv-spacer { flex: 1; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Outline / muted — the canonical primary action button. */
.hv-btn-new {
  height: 28px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-dk);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.hv-btn-new:hover {
  background: var(--green-tint);
  border-color: var(--green);
  color: var(--green);
}
/* Cancel / dismiss. */
.btn-secondary {
  height: 32px; padding: 0 14px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-dk);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.btn-secondary:hover { background: rgba(0,0,0,0.04); }

/* ── Fields ────────────────────────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 5px;
  line-height: 1.2;
}
.field-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}
.field-input::placeholder { color: #CBD5E1; }
.field-input:hover  { border-color: var(--border-dk); }
.field-input:focus  { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
select.field-input  { cursor: pointer; }
textarea.field-input{ resize: vertical; }

/* ── Toggle (iOS-style slider) ─────────────────────────────────────────── */
.toggle-row, .toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle {
  position: relative;
  width: 32px; height: 18px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border-dk);
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 12px; width: 12px;
  top: 3px; left: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle input:checked + .toggle-slider::before { transform: translateX(14px); }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  z-index: 60;   /* above slide-overs (z:50) so focused modals always layer on top */
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 560px;
  max-width: 92vw;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.modal-hdr {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.modal-code,
.modal-code-pill {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--green);
  background: var(--mint);
  border: 1px solid rgba(24,82,52,0.15);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
}
.modal-title {
  font-size: 17px; font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  flex: 1; min-height: 0;
}
.modal-footer {
  padding: 11px 20px;
  border-top: 1px solid var(--border);
  background: var(--sidebar-bg);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}
.modal-footer-left { margin-right: auto; }

/* ── Data table — canonical for all apps ───────────────────────────────── */
/* Standalone tables (not inside .hv-card) are wrapped automatically by their
   own card styling. Tables INSIDE a .hv-card rely on the card for scrolling.   */
.hv-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12.5px;
}
/* Reusable wrapper for any table that needs horizontal scrolling without an
   explicit .hv-card parent. */
.hv-table-scroll {
  overflow-x: auto;
  border-radius: 10px;
}
/* When .hv-table sits inside .hv-card or .hv-table-scroll, drop its own
   shadow/border-radius so the wrapper handles those visuals.                 */
.hv-card > .hv-table,
.hv-table-scroll > .hv-table {
  box-shadow: none;
  border-radius: 0;
}
.hv-table th {
  padding: 10px 14px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
  text-align: left;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
}
.hv-table th.center { text-align: center; }
.hv-table th.right  { text-align: right; }
.hv-table td {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text);
  border-bottom: 1px solid #F0F0F0;
  vertical-align: middle;
}
.hv-table td.center { text-align: center; }
.hv-table td.right  { text-align: right; }
.hv-table td.nowrap { white-space: nowrap; }
.hv-table tr:last-child td { border-bottom: none; }
.hv-table tr:hover td { background: rgba(0,0,0,0.012); }

/* Dense modifier — tighter padding, used by Rumors-style inline-edit tables. */
.hv-table--dense th { padding: 6px 6px; font-size: 9.5px; }
.hv-table--dense td { padding: 3px 4px; font-size: 11.5px; }

/* Empty-state row */
.hv-table-empty,
.hv-table tr.hv-table-empty td {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  padding: 24px;
  background: transparent;
}
.hv-table tr.hv-table-empty:hover td { background: transparent; }

/* ── Search input with magnifier icon ──────────────────────────────────── */
/* Use as: <div class="hv-search"><input class="field-input hv-search-input" .../></div> */
.hv-search { position: relative; display: inline-block; }
.hv-search::before {
  content: '';
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABABAB' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>");
  pointer-events: none;
  opacity: 0.7;
}
.hv-search-input { padding-left: 30px !important; width: 240px; }

/* ── Row-action button (small ghost in table row) ──────────────────────── */
.hv-row-btn {
  height: 26px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.hv-row-btn:hover {
  background: var(--green-tint);
  border-color: var(--green);
  color: var(--green);
}
.hv-row-btn--danger {
  color: var(--danger);
  border-color: rgba(220,38,38,0.28);
}
.hv-row-btn--danger:hover {
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Inline ✕ delete icon (no border, slate → red on hover) ──────────── */
.hv-btn-icon-delete {
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  transition: color .12s;
}
.hv-btn-icon-delete:hover { color: var(--danger-hover); }

/* ── Card with optional header strip ───────────────────────────────────── */
.hv-card {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  overflow-x: auto;   /* allow tables wider than the viewport to scroll */
  overflow-y: hidden; /* keep the rounded clipping on the vertical axis  */
}
.hv-card__hdr {
  padding: 12px 18px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  color: var(--text);
}
.hv-card__body { padding: 18px 20px; }

/* ── Loading + empty state primitives ──────────────────────────────────── */
.hv-loading {
  color: var(--text-3);
  font-size: 12px;
  padding: 24px;
  text-align: center;
}
.hv-empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  color: var(--text-3);
}
.hv-empty-state p { font-size: 13px; margin: 0; }
.hv-empty-state svg { width: 36px; height: 36px; opacity: 0.3; }

/* ── Chip / pill — small inline rounded element ────────────────────────── */
.hv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 99px;
  border: 1px solid transparent;
  color: var(--text-2);
  background: #F5F5F5;
}
.hv-chip--mint    { color: var(--green);  background: var(--mint);     border-color: rgba(24,82,52,0.18); }
.hv-chip--warn    { color: var(--warn);   background: var(--warn-tint); border-color: #FCD34D; }
.hv-chip--danger  { color: var(--danger); background: var(--danger-tint); border-color: rgba(220,38,38,0.18); }
.hv-chip--neutral { color: var(--text-2); background: #F5F5F5;          border-color: var(--border); }
.hv-chip--lg { font-size: 11px; padding: 3px 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 500; }

/* ── Section label (uppercase form/page section header) ────────────────── */
.hv-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin: 6px 0 10px;
}
.hv-section-label--bordered {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── <select> with custom chevron (replaces native macOS arrow) ────────── */
.hv-select,
select.hv-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%23ABABAB' d='M0 0l4 5 4-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}