/*
 * Design tokens for the dashboard.
 *
 * Tailwind's slate scale, the tinted 50-200 steps of the status colours and the
 * `surface` colour all resolve to the variables below (see tailwind.css), so
 * every existing utility class flips with the theme without needing a `dark:`
 * twin. Values are space-separated RGB channels, wrapped in rgb() there.
 */

/*
 * Everything here sits in Tailwind's `components` layer, so utility classes
 * override it as they did in v3 while it still overrides Tailwind's preflight.
 * This file loads before tailwind.css, so declare the layer order first;
 * otherwise `components` would rank below `base`.
 */
@layer theme, base, components, utilities;

@layer components {
:root {
    color-scheme: light;

    --surface: 255 255 255;
    --surface-raised: 255 255 255;

    --slate-50: 248 250 252;
    --slate-100: 241 245 249;
    --slate-200: 226 232 240;
    --slate-300: 203 213 225;
    --slate-400: 148 163 184;
    --slate-500: 100 116 139;
    --slate-600: 71 85 105;
    --slate-700: 51 65 85;
    --slate-800: 30 41 59;
    --slate-900: 15 23 42;
    --slate-950: 2 6 23;

    --emerald-50: 236 253 245;
    --emerald-100: 209 250 229;
    --emerald-200: 167 243 208;
    --emerald-600: 5 150 105;
    --emerald-700: 4 120 87;

    --red-50: 254 242 242;
    --red-100: 254 226 226;
    --red-200: 254 202 202;
    --red-600: 220 38 38;
    --red-700: 185 28 28;
    --red-800: 153 27 27;
    --red-900: 127 29 29;

    --amber-50: 255 251 235;
    --amber-100: 254 243 199;
    --amber-200: 253 230 138;
    --amber-600: 217 119 6;
    --amber-700: 180 83 9;
    --amber-800: 146 64 14;
    --amber-900: 120 53 15;

    --blue-50: 239 246 255;
    --blue-100: 219 234 254;
    --blue-200: 191 219 254;
    --blue-600: 37 99 235;
    --blue-700: 29 78 216;

    /* Chart palette, read by app.js */
    --chart-traffic: #2563eb;
    --chart-sessions: #7c3aed;
    --chart-users: #0d9488;
    --chart-revenue: #f97d46;
    --chart-rpv: #a855f7;
    --chart-impressions: #d97706;
    --chart-grid: rgba(148, 163, 184, 0.18);
    --chart-tick: #94a3b8;
    --chart-tooltip: #0f172a;

    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
}

.dark {
    color-scheme: dark;

    --surface: 17 25 43;
    --surface-raised: 24 34 56;

    --slate-50: 9 14 27;
    --slate-100: 26 36 58;
    --slate-200: 38 50 76;
    --slate-300: 62 76 104;
    --slate-400: 112 126 152;
    --slate-500: 142 155 180;
    --slate-600: 172 184 204;
    --slate-700: 203 213 225;
    --slate-800: 226 232 240;
    --slate-900: 241 245 249;
    --slate-950: 248 250 252;

    --emerald-50: 6 44 36;
    --emerald-100: 8 60 48;
    --emerald-200: 10 90 70;
    --emerald-600: 52 211 153;
    --emerald-700: 110 231 183;

    --red-50: 60 16 20;
    --red-100: 80 20 26;
    --red-200: 120 30 36;
    --red-600: 248 113 113;
    --red-700: 252 165 165;
    --red-800: 254 202 202;
    --red-900: 254 226 226;

    --amber-50: 56 36 8;
    --amber-100: 72 46 10;
    --amber-200: 110 70 14;
    --amber-600: 251 191 36;
    --amber-700: 252 211 77;
    --amber-800: 253 230 138;
    --amber-900: 254 243 199;

    --blue-50: 16 32 66;
    --blue-100: 22 44 88;
    --blue-200: 30 64 128;
    --blue-600: 59 130 246;
    --blue-700: 147 197 253;

    --chart-traffic: #60a5fa;
    --chart-sessions: #a78bfa;
    --chart-users: #2dd4bf;
    --chart-revenue: #fb9a6c;
    --chart-rpv: #c084fc;
    --chart-impressions: #fbbf24;
    --chart-grid: rgba(148, 163, 184, 0.1);
    --chart-tick: #7c8aa5;
    --chart-tooltip: #020617;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

html { background: rgb(var(--slate-50)); }
body { font-feature-settings: 'cv11', 'ss01'; }
.tabular { font-variant-numeric: tabular-nums; }

/* Cards */
.card {
    background: rgb(var(--surface));
    border: 1px solid rgb(var(--slate-200));
    border-radius: 0.875rem;
    box-shadow: var(--shadow-card);
}
.card-hover { transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.card-hover:hover { box-shadow: var(--shadow-card-hover); border-color: rgb(var(--slate-300)); transform: translateY(-1px); }
.card-title { font-size: 0.8125rem; font-weight: 600; color: rgb(var(--slate-800)); letter-spacing: -0.005em; }
.eyebrow { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--slate-500)); }

/* Change pills */
.delta { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.125rem 0.4rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-up { color: rgb(var(--emerald-700)); background: rgb(var(--emerald-50)); }
.delta-down { color: rgb(var(--red-700)); background: rgb(var(--red-50)); }
.delta-flat { color: rgb(var(--slate-500)); background: rgb(var(--slate-100)); }

/* Segmented control */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 0.625rem; background: rgb(var(--slate-100)); border: 1px solid rgb(var(--slate-200)); }
.segmented > a, .segmented > button { padding: 0.3rem 0.7rem; font-size: 0.75rem; font-weight: 600; border-radius: 0.45rem; color: rgb(var(--slate-500)); transition: background 0.15s, color 0.15s; }
.segmented > a:hover, .segmented > button:hover { color: rgb(var(--slate-800)); }
.segmented > .is-active { background: rgb(var(--surface-raised)); color: rgb(var(--slate-900)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }

/* Tables */
.data-table { width: 100%; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.data-table thead th { position: sticky; top: 0; background: rgb(var(--surface)); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--slate-500)); padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(var(--slate-200)); white-space: nowrap; }
.data-table tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgb(var(--slate-100)); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: rgb(var(--slate-50)); }
.data-table tr.is-filtered { display: none; }

th[data-sortable] { cursor: pointer; user-select: none; }
th[data-sortable]:hover { color: rgb(var(--slate-800)); }
th[data-sortable]::after { content: '\2195'; margin-left: 4px; opacity: 0.3; font-size: 0.7rem; }
th[data-sortable].sort-asc::after { content: '\2191'; opacity: 0.8; }
th[data-sortable].sort-desc::after { content: '\2193'; opacity: 0.8; }
th[data-sortable]:focus-visible { outline: 2px solid rgb(var(--blue-600)); outline-offset: -2px; }

/* Inline data bar behind a table cell's label */
.bar-cell { position: relative; }
.bar-cell > .bar { position: absolute; left: 0; top: 18%; bottom: 18%; border-radius: 0.25rem; background: rgb(var(--blue-600) / 0.1); pointer-events: none; }
.bar-cell > .bar.bar-revenue { background: rgba(249, 125, 70, 0.14); }
.bar-cell > span { position: relative; }

/* Share bars (sources, devices, countries) */
.share-track { height: 6px; border-radius: 9999px; background: rgb(var(--slate-100)); overflow: hidden; }
.share-fill { height: 100%; border-radius: 9999px; }

/* Realtime pulse */
.realtime-dot { display: inline-block; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Sidebar */
.sidebar { background: linear-gradient(180deg, #0a315b 0%, #071f3b 100%); }
.dark .sidebar { background: linear-gradient(180deg, #0a1a33 0%, #060f20 100%); border-right: 1px solid rgb(var(--slate-200)); }
.nav-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.45rem 0.75rem; font-size: 0.8125rem; border-radius: 0.5rem; color: rgba(226, 232, 240, 0.72); transition: background 0.15s, color 0.15s; }
.nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-link.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 #f97d46; }
.site-avatar { width: 1.25rem; height: 1.25rem; border-radius: 0.35rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; color: #fff; overflow: hidden; }
.site-avatar { position: relative; }
/* The favicon sits over the coloured initial; once it loads (has-icon) the
   tile drops its colour and letter so the icon shows unframed and uncropped. */
.site-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.site-avatar.has-icon { background: transparent !important; color: transparent; overflow: visible; box-shadow: none; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; padding: 0 0.3rem; height: 1.25rem; font-size: 0.6875rem; line-height: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: 0.3rem; border: 1px solid currentColor; opacity: 0.6; }

/* Command palette */
.palette-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(2, 6, 23, 0.55); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; }
.palette-backdrop[hidden] { display: none; }
.palette { width: 100%; max-width: 34rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--slate-200)); border-radius: 0.875rem; box-shadow: 0 30px 80px -20px rgba(2, 6, 23, 0.6); overflow: hidden; }
.palette input { width: 100%; padding: 0.95rem 1.1rem; font-size: 0.9375rem; background: transparent; color: rgb(var(--slate-900)); border-bottom: 1px solid rgb(var(--slate-200)); outline: none; }
.palette-list { max-height: 22rem; overflow-y: auto; padding: 0.375rem; }
.palette-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; color: rgb(var(--slate-700)); cursor: pointer; }
.palette-item .hint { font-size: 0.6875rem; color: rgb(var(--slate-400)); }
.palette-item.is-selected { background: rgb(var(--blue-50)); color: rgb(var(--slate-900)); }
.palette-empty { padding: 1.25rem; text-align: center; font-size: 0.8125rem; color: rgb(var(--slate-400)); }

/* Top progress bar shown while navigating */
#nav-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60; background: linear-gradient(90deg, #f97d46, #7defef); transition: width 0.4s ease, opacity 0.3s ease; opacity: 0; }
#nav-progress.is-active { opacity: 1; width: 70%; transition: width 6s cubic-bezier(0.1, 0.7, 0.2, 1); }

/* Skeleton shimmer for pending realtime counts */
.skeleton { display: inline-block; min-width: 1.5rem; height: 0.8em; border-radius: 0.25rem; background: linear-gradient(90deg, rgb(var(--slate-100)), rgb(var(--slate-200)), rgb(var(--slate-100))); background-size: 200% 100%; animation: shimmer 1.4s infinite; vertical-align: middle; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

} /* @layer components */