/* =========================================================================
   Utopia Chatting Platform — design system
   A premium SaaS-dashboard layer on top of Tailwind CDN.
   Brand crimson = #C8102E (logo mark), used as a sharp accent — not everywhere.
   Aesthetic target: Linear / Stripe / Vercel — clean, confident, lots of
   whitespace, crisp type, subtle depth.
   ========================================================================= */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand accent */
  --utopia-accent: #C8102E;
  --utopia-accent-hover: #A60D26;
  --utopia-accent-active: #8E0B20;
  --utopia-accent-soft: #FDECEE;
  --utopia-accent-tint: #FBE3E6;
  --utopia-accent-ring: rgba(200, 16, 46, .20);

  /* Neutral palette (slate/zinc) */
  --u-bg: #f6f7f9;
  --u-surface: #ffffff;
  --u-border: #e6e8ee;
  --u-border-strong: #d6d9e0;
  --u-text: #1e2330;
  --u-text-muted: #64748b;
  --u-text-faint: #94a3b8;

  /* Sidebar (dark) */
  --u-sidebar: #0b0c10;
  --u-sidebar-2: #111319;

  /* Elevation */
  --u-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --u-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --u-shadow-md: 0 4px 14px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .05);
  --u-shadow-lg: 0 10px 30px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .06);

  /* Radii */
  --u-radius: 14px;
  --u-radius-sm: 10px;
  --u-radius-lg: 18px;

  /* Trend semantics */
  --u-pos-bg: #ecfdf3; --u-pos-fg: #047857; --u-pos-bd: #a7f3d0;
  --u-neg-bg: #fef2f2; --u-neg-fg: #b91c1c; --u-neg-bd: #fecaca;
}

* { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  letter-spacing: -0.011em;
}

a { transition: color .12s ease; }
table { border-collapse: collapse; }

/* Numerals: lined + tabular wherever we tag .num / tabular-nums */
.num, .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

::selection { background: var(--utopia-accent-tint); color: var(--utopia-accent-active); }

/* Tasteful custom scrollbars inside scroll regions */
.u-scroll { scrollbar-width: thin; scrollbar-color: #cbd2dd transparent; }
.u-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.u-scroll::-webkit-scrollbar-thumb { background: #cbd2dd; border-radius: 8px; }
.u-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- Brand accent helpers (drop the inline hex in templates) ------------ */
.bg-accent { background: var(--utopia-accent); }
.text-accent { color: var(--utopia-accent); }
.border-accent { border-color: var(--utopia-accent); }
.bg-accent-soft { background: var(--utopia-accent-soft); }
.ring-accent { box-shadow: 0 0 0 3px var(--utopia-accent-ring); }

/* ---- Focus rings -------------------------------------------------------- */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--utopia-accent);
  box-shadow: 0 0 0 3px var(--utopia-accent-ring);
}
.u-focus:focus-visible,
a.u-focus:focus-visible,
button.u-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--utopia-accent-ring);
  border-radius: var(--u-radius-sm);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; line-height: 1;
  padding: .5625rem .875rem; border-radius: var(--u-radius-sm);
  border: 1px solid var(--u-border-strong);
  background: #fff; color: var(--u-text);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .04s ease;
  cursor: pointer; box-shadow: var(--u-shadow-xs);
}
.btn:hover { background: #f8fafc; border-color: #c3c8d2; }
.btn:active { transform: translateY(.5px); }

.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--utopia-accent); color: #fff;
  font-weight: 600; border: 1px solid transparent;
  border-radius: var(--u-radius-sm);
  transition: background .14s ease, box-shadow .14s ease, transform .04s ease;
  box-shadow: 0 1px 2px rgba(200, 16, 46, .28);
  cursor: pointer;
}
.btn-accent:hover { background: var(--utopia-accent-hover); box-shadow: 0 4px 12px rgba(200, 16, 46, .30); }
.btn-accent:active { background: var(--utopia-accent-active); transform: translateY(.5px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; line-height: 1;
  padding: .5rem .75rem; border-radius: var(--u-radius-sm);
  background: transparent; color: var(--u-text-muted); border: 1px solid transparent;
  transition: background .14s ease, color .14s ease; cursor: pointer;
}
.btn-ghost:hover { background: #f1f5f9; color: var(--u-text); }

/* =========================================================================
   Cards / surfaces
   ========================================================================= */
.card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-sm);
}
.card-hover { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.card-hover:hover {
  box-shadow: var(--u-shadow-lg);
  border-color: rgba(200, 16, 46, .28);
  transform: translateY(-2px);
}

/* Optional tasteful crimson top-accent on a card/header */
.card-accent { position: relative; overflow: hidden; }
.card-accent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--utopia-accent), #e23b53);
}

/* =========================================================================
   Stat cards — big number + label + optional trend pill + icon slot
   ========================================================================= */
.stat-card {
  background: var(--u-surface);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-sm);
  padding: 1.125rem 1.25rem;
  display: flex; flex-direction: column; gap: .375rem;
  position: relative;
}
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stat-card .stat-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--u-text-faint);
}
.stat-card .stat-icon {
  height: 2rem; width: 2rem; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--utopia-accent-soft); color: var(--utopia-accent);
  font-size: .95rem; flex-shrink: 0;
}
.stat-card .stat-value {
  font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--u-text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.stat-card .stat-sub { font-size: .75rem; color: var(--u-text-muted); }

/* =========================================================================
   Trend pills / badges / pills
   ========================================================================= */
.trend {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .6875rem; font-weight: 600; line-height: 1;
  padding: .25rem .4375rem; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.trend-up   { background: var(--u-pos-bg); color: var(--u-pos-fg); border: 1px solid var(--u-pos-bd); }
.trend-down { background: var(--u-neg-bg); color: var(--u-neg-fg); border: 1px solid var(--u-neg-bd); }
.trend-flat { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .6875rem; font-weight: 600; line-height: 1;
  padding: .25rem .5rem; border-radius: 7px;
  background: #f1f5f9; color: #475569; border: 1px solid #e6e9ef;
}
.badge-accent { background: var(--utopia-accent-soft); color: var(--utopia-accent); border-color: var(--utopia-accent-tint); }
.badge-ok { background: var(--u-pos-bg); color: var(--u-pos-fg); border-color: var(--u-pos-bd); }
.badge-warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-mute { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }

.pill {
  display: inline-flex; align-items: center;
  font-size: .75rem; font-weight: 500; line-height: 1;
  padding: .3125rem .625rem; border-radius: 999px;
  background: #f1f5f9; color: #475569;
}
.pill-accent { background: var(--utopia-accent-soft); color: var(--utopia-accent); }

/* =========================================================================
   Section titles
   ========================================================================= */
.section-title {
  font-size: .9375rem; font-weight: 600; color: var(--u-text);
  letter-spacing: -0.01em;
}
.section-eyebrow {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--u-text-faint);
}

/* =========================================================================
   Data tables — tight, zebra-light, sticky header, hover rows
   ========================================================================= */
.data-table { width: 100%; font-size: .8125rem; }
.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #fbfcfe;
  text-align: left;
  font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--u-text-faint);
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--u-border);
  white-space: nowrap;
}
.data-table tbody td {
  padding: .625rem .75rem;
  border-bottom: 1px solid #f1f3f7;
  color: var(--u-text);
  vertical-align: middle;
}
.data-table tbody tr { transition: background .1s ease; }
.data-table tbody tr:nth-child(even) { background: #fcfcfd; }
.data-table tbody tr:hover { background: var(--utopia-accent-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .col-head-right { text-align: right; }

/* =========================================================================
   Empty / no-data states
   ========================================================================= */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .625rem;
  padding: 2.75rem 1.5rem;
  border: 1px dashed var(--u-border-strong);
  border-radius: var(--u-radius);
  background: #fbfcfe;
  color: var(--u-text-muted);
}
.empty-state .empty-icon {
  height: 2.75rem; width: 2.75rem; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef1f6; color: #94a3b8; font-size: 1.25rem;
}
.empty-state .empty-title { font-weight: 600; color: var(--u-text); font-size: .9375rem; }
.empty-state .empty-sub { font-size: .8125rem; color: var(--u-text-muted); max-width: 30rem; }

/* =========================================================================
   App shell — sidebar
   ========================================================================= */
.app-bg {
  background:
    radial-gradient(720px 360px at 0% -5%, rgba(200,16,46,.035), transparent 60%),
    var(--u-bg);
}
.sidebar {
  background: linear-gradient(180deg, var(--u-sidebar-2), var(--u-sidebar));
  border-right: 1px solid rgba(255,255,255,.06);
}
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: .5625rem .75rem; border-radius: 10px;
  font-size: .8125rem; font-weight: 500; color: #aab2c0;
  transition: background .14s ease, color .14s ease;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item .nav-ico { width: 1.125rem; height: 1.125rem; flex-shrink: 0; opacity: .85; }
.nav-item.is-active { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.is-active .nav-ico { opacity: 1; }
.nav-item.is-active::before {
  content: ""; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%);
  height: 1.25rem; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--utopia-accent);
  box-shadow: 0 0 10px rgba(200,16,46,.6);
}

/* =========================================================================
   Tabs (per-model bar)
   ========================================================================= */
.tab {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .4375rem .75rem; font-size: .8125rem; font-weight: 500;
  border-radius: 9px; color: var(--u-text-muted);
  transition: background .12s ease, color .12s ease;
}
.tab:hover { background: #eef1f6; color: var(--u-text); }
.tab.is-active { background: var(--utopia-accent-soft); color: var(--utopia-accent); font-weight: 600; }
.tab.is-disabled { color: #c2c8d2; cursor: not-allowed; }

/* Inputs base polish (so .input class is consistent everywhere) */
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--u-border-strong); background: #fff;
  border-radius: var(--u-radius-sm); padding: .5625rem .75rem; font-size: .8125rem;
  color: var(--u-text); transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--u-text-faint); }

/* Sparkline / mini chart helpers */
.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--utopia-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: url(#sparkGrad); }
.bar-track { background: var(--utopia-accent-soft); border-radius: 999px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, var(--utopia-accent), #e23b53); height: 100%; border-radius: 999px; }