/* ══════════════════════════════════════════════════════════════════════
   Sphera Tickets — Dark theme overrides for Bulma 1.0+
   ══════════════════════════════════════════════════════════════════════
   Single source of truth for the brand palette, surface scale, and the
   spacing/radii/type/shadow scales. Bulma's own CSS variables are wired
   to these brand tokens (one palette, two namespaces — no drift).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Brand palette + surface scale ──────────────────────────────────── */
:root {
  --sphera-red: #dc2626;
  --sphera-red-dark: #b91c1c;
  --sphera-red-light: #ef4444;
  --sphera-green: #22c55e;
  --sphera-green-dark: #16a34a;
  --sphera-amber: #f59e0b;
  --sphera-info: #3b82f6;
  --sphera-info-light: #60a5fa;

  --bg-base: #0f1117;
  --bg-navbar: #131620;
  --bg-surface: #1a1d28;
  --bg-surface-hover: #232735;
  --bg-elevated: #2a2f3e;
  --border-color: rgba(255, 255, 255, 0.08);

  --text-primary: #e8eaf0;
  --text-secondary: #a8adc4;
  --text-muted: #6b7280;

  /* ── Scales (the missing design-system primitives) ──────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-md-sm: 0.8rem;
  --font-size-md: 0.85rem;
  --font-size-base: 0.95rem;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 2px rgba(220, 38, 38, 0.2);
  --transition-fast: all 0.15s;

  /* ── Brand tints (one computed triple per hue, used by tags/
  │     notifications/card borders — no hand-tuned rgba scattered around) */
  --red-tint-bg: rgba(239, 68, 68, 0.1);
  --red-tint-border: rgba(239, 68, 68, 0.3);
  --red-tint-fg: #f87171;
  --red-hover-tint-bg: rgba(220, 38, 38, 0.15);
  --green-tint-bg: rgba(34, 197, 94, 0.2);
  --green-tint-fg: #4ade80;
  --amber-tint-bg: rgba(245, 158, 11, 0.1);
  --amber-tint-border: rgba(245, 158, 11, 0.3);
  --amber-tint-fg: #fbbf24;
  --info-tint-bg: rgba(59, 130, 246, 0.1);
  --info-tint-border: rgba(59, 130, 246, 0.3);
  --info-tint-fg: var(--sphera-info-light);

  /* ── Bulma CSS variable overrides (dark theme) — wired to brand ── */
  --bulma-scheme-h: 222;
  --bulma-scheme-s: 20%;
  --bulma-scheme-main-l: 8%;
  --bulma-background-l: 8%;
  --bulma-scheme-main-bis-l: 10%;
  --bulma-scheme-main-ter-l: 14%;
  --bulma-text-l: 92%;
  --bulma-text-strong-l: 100%;
  --bulma-border-l: 18%;
  --bulma-primary: var(--sphera-red);
  --bulma-primary-h: 0;
  --bulma-primary-s: 74%;
  --bulma-primary-l: 50%;
  --bulma-primary-invert-l: 100%;
  --bulma-link: var(--sphera-red-light);
  --bulma-link-h: 0;
  --bulma-link-s: 80%;
  --bulma-link-l: 60%;
  --bulma-danger: var(--sphera-red-light);
  --bulma-success: var(--sphera-green);
  --bulma-warning: var(--sphera-amber);
  --bulma-info: var(--sphera-info);
  --bulma-body-background-color: var(--bg-base);
  --bulma-body-color: var(--text-primary);
}

/* ── Navbar ──────────────────────────────────────────────────────────── */
/* Body bg/color come from --bulma-body-* vars above; this is a belt-and-
   suspenders element-level fallback for pages that show body bg directly. */
html, body {
  background-color: var(--bg-base);
  color: var(--text-primary);
}

.navbar.is-dark {
  background-color: var(--bg-navbar);
  border-bottom: 1px solid var(--border-color);
}
.navbar.is-dark .navbar-item { color: var(--text-secondary); }
.navbar.is-dark .navbar-item:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-primary);
}
.navbar.is-dark .navbar-item.is-active {
  background-color: var(--red-hover-tint-bg);
  color: var(--sphera-red-light);
  border-bottom: 2px solid var(--sphera-red);
}
.navbar-brand strong { color: var(--sphera-red); }

/* ── Cards & Boxes ──────────────────────────────────────────────────── */
.box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.card .card-header,
.card .card-content { background-color: transparent; }
.card.is-clickable { transition: var(--transition-fast); cursor: pointer; }
.card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: rgba(220, 38, 38, 0.3);
}
.card.is-danger { border-left: 4px solid var(--sphera-red); }
.card.is-success { border-left: 4px solid var(--sphera-green); }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table { background-color: var(--bg-surface); }
.table thead th {
  background-color: var(--bg-elevated);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table td {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}
.table tr:hover td { background-color: var(--bg-surface-hover); }
.table-container { overflow-x: auto; border-radius: var(--radius-lg); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.input, .textarea, .select select {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--sphera-red);
  box-shadow: var(--shadow-focus);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:disabled, .textarea:disabled { opacity: 0.5; }
.select:not(.is-multiple):not(.is-loading)::after { border-color: var(--sphera-red); }
.label { color: var(--text-secondary); }

/* ── Buttons — clearly visible ─────────────────────────────────────── */
.button {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}
.button:hover {
  border-color: rgba(220, 38, 38, 0.5);
  color: #fff;
}
.button.is-primary {
  background-color: var(--sphera-red);
  border-color: var(--sphera-red-dark);
  color: #fff;
}
.button.is-primary:hover {
  background-color: var(--sphera-red-dark);
  border-color: #991b1b;
}
.button.is-success {
  background-color: var(--sphera-green-dark);
  border-color: #15803d;
  color: #fff;
}
.button.is-success:hover { background-color: #15803d; }
.button.is-danger {
  background-color: var(--red-tint-bg);
  border-color: var(--red-tint-border);
  color: var(--sphera-red-light);
}
.button.is-danger:hover {
  background-color: var(--sphera-red);
  color: #fff;
}
.button.is-warning {
  background-color: var(--sphera-amber);
  border-color: #d97706;
  color: #000;
}
.button.is-light {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.button.is-light:hover {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}
.button.is-outlined.is-light {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}
.button.is-outlined.is-light:hover {
  background-color: var(--bg-surface-hover);
  color: #fff;
}
.button.is-small { font-size: var(--font-size-md-sm); }

/* ── Tags ───────────────────────────────────────────────────────────── */
.tag {
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.tag.is-primary { background-color: var(--sphera-red); color: #fff; }
.tag.is-success { background-color: var(--green-tint-bg); color: var(--green-tint-fg); }
.tag.is-danger { background-color: var(--red-tint-bg); color: var(--red-tint-fg); }
.tag.is-warning { background-color: var(--amber-tint-bg); color: var(--amber-tint-fg); }
.tag.is-dark { background-color: var(--bg-elevated); color: var(--text-secondary); }
.tag.is-info { background-color: var(--info-tint-bg); color: var(--info-tint-fg); }

/* ── Links ──────────────────────────────────────────────────────────── */
a, .has-text-primary { color: var(--sphera-red-light); }
a:hover { color: var(--sphera-red); }

/* ── Pagination ─────────────────────────────────────────────────────── */
.pagination-link {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.pagination-link.is-current {
  background-color: var(--sphera-red);
  border-color: var(--sphera-red);
  color: #fff;
}

/* ── Messages/Notifications ──────────────────────────────────────────── */
.notification { border-radius: var(--radius-lg); }
.notification.is-danger {
  background-color: var(--red-tint-bg);
  border: 1px solid var(--red-tint-border);
  color: var(--red-tint-fg);
}
.notification.is-info {
  background-color: var(--info-tint-bg);
  border: 1px solid var(--info-tint-border);
  color: var(--info-tint-fg);
}
.notification.is-warning {
  background-color: var(--amber-tint-bg);
  border: 1px solid var(--amber-tint-border);
  color: var(--amber-tint-fg);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
  background-color: var(--bg-navbar);
  border-top: 1px solid var(--border-color);
  padding: var(--space-6);
}
.footer a { color: var(--sphera-red-light); }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
}
.modal-card-head, .modal-card-foot {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
}
.modal-card-title { color: var(--text-primary); }

/* ── Misc ───────────────────────────────────────────────────────────── */
.has-text-grey-light { color: var(--text-secondary); }
code, pre {
  background-color: var(--bg-elevated);
  color: var(--green-tint-fg);
  border-radius: var(--radius-sm);
}
pre { padding: var(--space-2); border: 1px solid var(--border-color); }
.content h1, .content h2, .content h3, .title, .subtitle { color: var(--text-primary); }
hr { background-color: var(--border-color); }
.checkbox, label { color: var(--text-primary); }
.help { color: var(--text-muted); }

/* ── WHMCS standalone page shell (routes_whmcs.py renders pages that
   load /static/style.css — these utilities center a card mid-page) ── */
.sphera-page-center {
  background: var(--bg-base);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: var(--space-4);
}
.sphera-card-center {
  text-align: center;
  max-width: 400px;
  width: 100%;
  padding: var(--space-6);
}
.sphera-icon-xl { font-size: 3rem; }
.sphera-icon-success { color: var(--sphera-green); }
.sphera-icon-danger { color: var(--sphera-red-light); }
.sphera-icon-brand { color: var(--sphera-red); }

/* ── Flow whiteboard ── */
.flow-whiteboard-wrap {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: auto;
  background: var(--bg-surface);
  max-height: 80vh;
}
.flow-whiteboard__canvas {
  display: block;
  min-width: 100%;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.flow-whiteboard__palette { padding: var(--space-3); border: 1px solid var(--border-color); }
.flow-whiteboard__empty {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.flow-node {
  position: relative;
  min-width: 180px;
  max-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  cursor: grab;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: box-shadow var(--transition-fast);
}
.flow-node:active { cursor: grabbing; }
.flow-node.dragging { box-shadow: 0 4px 20px rgba(220,38,38,0.3); z-index: 100; }
.flow-node.is-root { border-color: var(--sphera-red); border-width: 2px; }
.flow-node-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.flow-node-title {
  font-weight: 600; font-size: var(--font-size-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-node-type {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;
}
.flow-node__menu-tag { color: var(--sphera-green); }
.flow-node__delete { color: var(--red-tint-fg); }
.flow-node-actions { display: flex; gap: var(--space-1); margin-top: 0.35rem; }
.flow-node-actions a, .flow-node-actions button {
  font-size: 0.7rem; padding: 0.15rem 0.4rem; background: transparent;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; text-decoration: none;
}
.flow-node-actions a:hover, .flow-node-actions button:hover {
  border-color: var(--sphera-red); color: #fff;
}
.flow-port {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--bg-surface);
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  cursor: crosshair;
  bottom: -7px; left: 50%; transform: translateX(-50%);
}
.flow-port:hover { border-color: var(--sphera-red); background: rgba(220,38,38,0.2); }
.flow-port.input { top: -7px; bottom: auto; }
.conn-path { stroke: var(--text-muted); stroke-width: 2; fill: none; transition: stroke var(--transition-fast); }
.conn-path:hover { stroke: var(--sphera-red); stroke-width: 3; }
.flow-node__conn-label { fill: var(--text-secondary); font-size: 11px; }
.flow-node__arrowhead { fill: var(--text-muted); }

/* ── Visual editor rows (shared by hours / form-schema / questions) ── */
.support-hours-editor .field, .form-schema-editor .field, .questions-editor .field,
.sphera-row-editor__row {
  background-color: var(--bg-surface);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.sphera-row-editor__row { margin-bottom: var(--space-1); }
.sphera-row-editor__add { margin-top: var(--space-2); }

/* ── Discord OAuth button (single source for #5865F2) ──────────────── */
.button.is-discord {
  background: #5865f2;
  color: #fff;
  border: none;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}
.button.is-discord:hover { background: #4752c4; color: #fff; }

/* ── Login page (uses .box + .button.is-discord now) ───────────────── */
.login-wrap { max-width: 380px; margin: 4rem auto; padding: 0 1.25rem; }
.login-error {
  color: var(--red-tint-fg);
  background: var(--red-tint-bg);
  border: 1px solid var(--red-tint-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-4);
}

/* ── Flow builder + form spacing ───────────────────────────────────── */
fieldset.box, div.box {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
fieldset.box legend { margin-bottom: var(--space-3); letter-spacing: 0.04em; }
fieldset.box > .field, div.box > .field { margin-bottom: var(--space-4); }
fieldset.box > .field:last-child, div.box > .field:last-child { margin-bottom: 0; }
fieldset.box hr, div.box hr { margin: var(--space-4) 0; }
.choice-row, .form-field-row { margin-bottom: var(--space-2); }
.level { margin-bottom: var(--space-6); }
.notification { margin-bottom: var(--space-5); }
.columns:not(:last-child) { margin-bottom: var(--space-4); }
.card-content { padding: var(--space-5); }
.card-footer-item { padding: 0.6rem var(--space-3); font-size: var(--font-size-md-sm); }
.table td, .table th {
  padding: 0.6rem var(--space-3);
  vertical-align: middle;
}
.buttons.are-small .button { margin-right: var(--space-1); }
.node-type-card {
  display: block;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-fast);
  margin-bottom: var(--space-2);
  height: 100%;
}
.node-type-card:hover { border-color: rgba(220, 38, 38, 0.5); }
.node-type-card__icon { color: var(--sphera-red); font-size: 1.2rem; }
.node-type-card p { margin-bottom: 0.15rem; }
/* Highlight the selected node-type card. CSS :has() replaces the old
   JS-driven style mutation in flow_form.html (one source of truth). */
.node-type-card:has(input:checked) {
  border-color: var(--sphera-red);
  background-color: var(--red-hover-tint-bg);
}
.node-type-card.is-clickable { height: 100%; }
.field.is-grouped > .control { margin-right: var(--space-2); }
.breadcrumb { margin-bottom: var(--space-4); }
.help { margin-top: 0.35rem; margin-bottom: var(--space-2); }

/* Settings page forms */
.content > .box, .content form > .box { margin-bottom: var(--space-6); }
.content > .box > .subtitle, .content form > .box > .subtitle { margin-bottom: var(--space-4); }
.content form .field { margin-bottom: var(--space-4); }
.content form .field:last-child { margin-bottom: 0; }
.content form .tags .tag { margin-bottom: 0.35rem; }
.content form .checkbox { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.content form hr { margin: var(--space-5) 0; }
.content form details { margin-top: var(--space-2); }
.content form summary { cursor: pointer; }
.content form summary:hover { color: var(--sphera-red); }
.content form .select { width: 100%; }
.content form .select select { width: 100%; }

/* Sticky save bar — stays visible while scrolling long settings forms. */
.is-sticky-save {
  position: sticky;
  bottom: var(--space-4);
  z-index: 10;
}
.is-sticky-save .button { box-shadow: var(--shadow-card); }