/*
 * Trivomarket Mailer — dashboard design tokens + the handful of things
 * Tailwind's utility classes don't cleanly cover (custom scrollbars, badge
 * pulse, focus rings, table refinements). Tailwind (CDN) handles layout;
 * this file supplies the color system and small reusable components.
 *
 * Palette: dataviz skill's validated default (references/palette.md) —
 * status colors (good/warning/serious/critical) are fixed across light and
 * dark, never re-themed; surfaces/ink are the skill's chart-chrome roles
 * reused for the whole app shell so the dashboard's "data" (badges, stat
 * tiles) and its chrome share one consistent system.
 */

/* Light tokens are the base `:root` default (so anything that renders
 * before the theme-detection inline script in base.html runs — or with JS
 * disabled entirely — still gets a coherent light theme) and are reused
 * verbatim for the explicit `.light` class the theme toggle sets; written
 * once via this selector list rather than duplicated. Dark tokens live only
 * in `:root.dark` below — base.html's inline script always resolves and
 * stamps an explicit "light"/"dark" class before first paint (from
 * localStorage or, absent a stored choice, `prefers-color-scheme` read in
 * JS instead of CSS), so no separate `@media (prefers-color-scheme: dark)`
 * block is needed here to cover that case a second time. */
:root,
:root.light {
  --surface-page: #f9f9f7;
  --surface-card: #ffffff;
  --surface-card-hover: #fcfcfb;
  --surface-inset: #f4f4f2;
  --ink-primary: #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted: #898781;
  --border-hairline: rgba(11, 11, 11, 0.09);
  --border-strong: rgba(11, 11, 11, 0.16);

  --brand: #2a78d6;
  --brand-strong: #184f95;
  --brand-soft: #e7f0fc;

  --good: #0ca30c;
  --good-soft: #e4f5e4;
  --warning: #b8790f;
  --warning-soft: #fdf1dc;
  --serious: #c1571f;
  --serious-soft: #fce6da;
  --critical: #d03b3b;
  --critical-soft: #fbe4e4;
  --neutral-soft: #eef0ee;

  --cat-violet: #4a3aa7;
  --cat-violet-soft: #ece9f9;
  --cat-aqua: #1baf7a;
  --cat-aqua-soft: #e2f6ee;

  color-scheme: light;
}

:root.dark {
  --surface-page: #0d0d0d;
  --surface-card: #171716;
  --surface-card-hover: #1c1c1b;
  --surface-inset: #1f1f1e;
  --ink-primary: #ffffff;
  --ink-secondary: #c3c2b7;
  --ink-muted: #898781;
  --border-hairline: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --brand: #3987e5;
  --brand-strong: #86b6ef;
  --brand-soft: rgba(57, 135, 229, 0.14);
  --good: #0ca30c;
  --good-soft: rgba(12, 163, 12, 0.16);
  --warning: #fab219;
  --warning-soft: rgba(250, 178, 25, 0.16);
  --serious: #ec835a;
  --serious-soft: rgba(236, 131, 90, 0.16);
  --critical: #e66767;
  --critical-soft: rgba(230, 103, 103, 0.16);
  --neutral-soft: rgba(255, 255, 255, 0.08);
  --cat-violet: #9085e9;
  --cat-violet-soft: rgba(144, 133, 233, 0.16);
  --cat-aqua: #199e70;
  --cat-aqua-soft: rgba(25, 158, 112, 0.16);
  color-scheme: dark;
}

* {
  border-color: var(--border-hairline);
}

html {
  background: var(--surface-page);
}

body {
  background: var(--surface-page);
  color: var(--ink-primary);
  font-feature-settings: "cv11", "ss01";
}

/* -------------------------------------------------------------------- */
/* Scrollbars                                                            */
/* -------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid var(--surface-page);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* -------------------------------------------------------------------- */
/* Surfaces                                                              */
/* -------------------------------------------------------------------- */

.surface-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
}

.surface-inset {
  background: var(--surface-inset);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.1;
  padding: 0.5rem 0.85rem;
  border-radius: 0.55rem;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn:active {
  transform: translateY(0.5px);
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--brand);
  color: #ffffff;
  border: 1px solid transparent;
}
.btn-primary:hover {
  background: var(--brand-strong);
}
.btn-secondary {
  background: var(--surface-card);
  color: var(--ink-primary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-card-hover);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid transparent;
}
.btn-ghost:hover {
  background: var(--surface-inset);
  color: var(--ink-primary);
}
.btn-danger {
  background: transparent;
  color: var(--critical);
  border: 1px solid var(--border-strong);
}
.btn-danger:hover {
  background: var(--critical-soft);
  border-color: var(--critical);
}
.btn-sm {
  padding: 0.32rem 0.6rem;
  font-size: 0.75rem;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------- */
/* Form controls                                                        */
/* -------------------------------------------------------------------- */

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  color: var(--ink-primary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--ink-muted);
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
.field-hint {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 0.3rem;
}
.field-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border-strong);
  accent-color: var(--brand);
}

/* -------------------------------------------------------------------- */
/* Badges (status — always paired with a text label, never color alone)  */
/* -------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.badge-emerald {
  background: var(--good-soft);
  color: var(--good);
}
.badge-emerald .badge-dot {
  background: var(--good);
}
.badge-amber {
  background: var(--warning-soft);
  color: var(--warning);
}
.badge-amber .badge-dot {
  background: var(--warning);
}
.badge-red {
  background: var(--critical-soft);
  color: var(--critical);
}
.badge-red .badge-dot {
  background: var(--critical);
}
.badge-blue {
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.badge-blue .badge-dot {
  background: var(--brand);
}
.badge-slate {
  background: var(--neutral-soft);
  color: var(--ink-secondary);
}
.badge-slate .badge-dot {
  background: var(--ink-muted);
}
.badge-violet {
  background: var(--cat-violet-soft);
  color: var(--cat-violet);
}
.badge-violet .badge-dot {
  background: var(--cat-violet);
}
.badge-aqua {
  background: var(--cat-aqua-soft);
  color: var(--cat-aqua);
}
.badge-aqua .badge-dot {
  background: var(--cat-aqua);
}
.badge-pulse .badge-dot {
  animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.35); }
}

/* -------------------------------------------------------------------- */
/* Stat tiles                                                            */
/* -------------------------------------------------------------------- */

.stat-tile {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: 0.85rem;
  padding: 1.1rem 1.25rem;
}
.stat-tile-value {
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.stat-tile-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 500;
}

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

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}
.data-table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--ink-primary);
  vertical-align: middle;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr {
  transition: background-color 100ms ease;
}
.data-table tbody tr:hover {
  background: var(--surface-card-hover);
}

/* -------------------------------------------------------------------- */
/* Nav                                                                    */
/* -------------------------------------------------------------------- */

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-secondary);
  transition: background-color 120ms ease, color 120ms ease;
}
.nav-link:hover {
  background: var(--surface-inset);
  color: var(--ink-primary);
}
.nav-link.active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.nav-link svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------- */
/* Misc                                                                   */
/* -------------------------------------------------------------------- */

.card-link {
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 100ms ease;
}
.card-link:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 16px rgba(11, 11, 11, 0.06);
}
:root.dark .card-link:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.divider {
  border-top: 1px solid var(--border-hairline);
}

.htmx-swapping {
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.htmx-settling {
  opacity: 0;
}
.htmx-added {
  opacity: 0;
}

.toast-enter {
  animation: toast-in 200ms ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-inset) 25%, var(--border-hairline) 37%, var(--surface-inset) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.drag-handle {
  cursor: grab;
  color: var(--ink-muted);
}
.dragging {
  opacity: 0.4;
}
.drop-target {
  border-top: 2px solid var(--brand) !important;
}