/* Poseidon Design System — Sprint U1
 * CSS variables + component classes. Layered ON TOP of Tailwind, does not
 * override existing inline classes — adopt incrementally per-template.
 */

:root {
  /* Backgrounds */
  --bg-primary:   #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary:  #111827;
  --bg-hover:     rgba(255, 255, 255, 0.04);
  --bg-input:     #0f172a;

  /* Accent (CTA / brand highlight) */
  --accent:        #e94560;
  --accent-hover:  #d63851;
  --accent-light:  rgba(233, 69, 96, 0.12);

  /* Brand secondary (kept compatible with existing green theme) */
  --brand:         #22c55e;
  --brand-hover:   #16a34a;
  --brand-light:   rgba(34, 197, 94, 0.12);

  /* Text */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* Status */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  /* Borders */
  --border:       #334155;
  --border-hover: #475569;

  /* Radius / shadow / motion */
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.40);

  /* Sidebar widths (for layouts that opt in) */
  --sidebar-w:           224px;
  --sidebar-w-collapsed: 64px;
}

/* ─── Card ──────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.card-header {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-subtle {
  background: var(--bg-tertiary);
}

/* ─── Stat card ─────────────────────────────────────────────────────── */
.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  opacity: 0.0;
  transition: opacity 0.2s;
}
.stat-card:hover::after { opacity: 0.6; }
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}
.stat-value-sm { font-size: 20px; }
.stat-delta { font-size: 12px; }
.stat-delta.up    { color: var(--success); }
.stat-delta.down  { color: var(--danger); }

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-accent    { background: var(--accent); color: var(--color-primary-content); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-brand     { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-hover); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--border-hover); background: var(--bg-secondary); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-sm  { padding: 4px 10px; font-size: 12px; }
.btn-lg  { padding: 10px 20px; font-size: 14px; }

/* ─── Badges ────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-success { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.badge-danger  { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.badge-info    { background: color-mix(in oklch, var(--color-info) 15%, transparent); color: var(--info); }
.badge-muted   { background: var(--bg-tertiary); color: var(--text-muted); }
.badge-accent  { background: var(--accent-light); color: var(--accent); }

/* ─── Table (opt-in via .table-styled wrapper) ─────────────────────── */
.table-styled { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table-styled th {
  padding: 10px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 600;
}
.table-styled td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  color: var(--text-primary);
}
.table-styled tr:hover td { background: var(--bg-hover); }

/* ─── Modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.modal-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: var(--text-primary); }

/* ─── Inputs ────────────────────────────────────────────────────────── */
.input,
.select,
.textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

/* ─── Progress bar ──────────────────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.progress-fill.green  { background: var(--success); }
.progress-fill.yellow { background: var(--warning); }
.progress-fill.red    { background: var(--danger); }
.progress-fill.accent { background: var(--accent); }

/* ─── Toggle switch ─────────────────────────────────────────────────── */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle input:checked + .toggle-track { background: var(--success); }
.toggle-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }

/* ─── Sidebar polish (applies to existing base_panel sidebar) ────── */
.sidebar-section-label {
  padding: 12px 16px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  position: relative;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.sidebar-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.sidebar-link.active {
  color: var(--accent);
  background: var(--accent-light);
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* ─── Dashboard grid helpers ────────────────────────────────────────── */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ─── Login form polish ─────────────────────────────────────────────── */
.login-shell {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-lg);
}
.login-brand {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--brand));
  font-size: 28px;
  color: #fff;
  font-weight: 700;
}

/* R-DAISYUI-FIX-FOUNDATIONAL Sub-1.4: dedicated class for the theme
 * switcher buttons. Visual matches profile.html .btn-reset (same
 * compact pill button) but lives under its own class so the JS
 * handler scoped to .btn-reset[data-cred-id] cannot accidentally
 * match theme buttons. */
.theme-toggle-btn {
    color: #fff;
    border: 0;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8125rem;
}
.theme-toggle-btn:hover {
    filter: brightness(1.1);
}

/* ── R-TABLE-FRAMEWORK-V1 — sticky table headers ──────────────────────────
   Opt-in via `.table-sticky` on a daisyUI <table>. The header row pins to the
   top of the page scroll so column labels stay visible on long lists, incl. TV
   mode and narrow screens. Opaque background prevents rows bleeding through. */
.table-sticky-wrap {
  max-height: 70vh;
  overflow: auto;
}
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 11;
  background-color: var(--color-base-100, var(--fallback-b1, #ffffff));
  box-shadow: inset 0 -1px 0 0 var(--color-base-300, rgba(0, 0, 0, 0.1));
}