/* ===========================================================================
   Argusmetrics theme layer
   ---------------------------------------------------------------------------
   Sits on top of the Tailwind build, so the design system lives here: tokens,
   typography, the card and stat-tile treatments, and dark mode.

   The palette classes redefined below are deliberate. Retinting .bg-white and
   friends to design tokens is what makes dark mode work without editing every
   template, which is why they carry !important and why they are not shims to
   be deleted. If a Tailwind class is simply absent, that is a different
   problem with a different fix: `npm run build:css`.

   The identity is Argus Panoptes — the watchman who never fully sleeps. Deep
   indigo "night" surfaces, a single awake cyan accent used sparingly for the
   things that are actually live, and semantic colors kept separate from it so
   "good/warning/critical" never competes with the brand hue.
   =========================================================================== */

/* --- Inter, self-hosted (no CDN; tabular figures matter in analytics) ----- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/webfonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/webfonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
    /* Surfaces: neutrals carry a slight indigo bias so they read as chosen,
       not as the default grey every dashboard ships with. */
    --surface-page: #f5f6fa;
    --surface-card: #ffffff;
    --surface-sunken: #eef0f6;
    --surface-hover: #f8f9fc;

    --border-subtle: #e3e6ef;
    --border-strong: #cfd4e3;

    --text-primary: #171b2e;
    --text-secondary: #4d5473;
    --text-muted: #767ea0;

    /* Brand: deep watchman indigo + the awake accent */
    --brand-900: #171b3d;
    --brand-700: #2a3170;
    --brand-500: #4550c8;
    --brand-300: #97a0ee;
    --brand-50: #eef0fe;

    --accent: #06a9c9;          /* "live / watching" — used sparingly */
    --accent-soft: #e0f6fa;

    /* Semantic, deliberately outside the brand ramp */
    --ok: #12855f;
    --ok-soft: #e6f5ef;
    --warn: #9a5b00;
    --warn-soft: #fdf2e2;
    --crit: #b32739;
    --crit-soft: #fceef0;

    --shadow-card: 0 1px 2px rgba(23, 27, 46, .05), 0 1px 3px rgba(23, 27, 46, .04);
    --shadow-lift: 0 6px 16px rgba(23, 27, 46, .09), 0 2px 6px rgba(23, 27, 46, .05);

    --radius: 10px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface-page: #0e1020;
        --surface-card: #171a2e;
        --surface-sunken: #1e2238;
        --surface-hover: #1f2440;

        --border-subtle: #272c47;
        --border-strong: #363d5e;

        --text-primary: #eef0f8;
        --text-secondary: #b3b9d4;
        --text-muted: #8189ab;

        --brand-500: #7c86e8;
        --brand-300: #a7aef2;
        --brand-50: #1d2144;

        --accent: #35c6e2;
        --accent-soft: #10303a;

        --ok: #45c795;
        --ok-soft: #122c24;
        --warn: #e0a44a;
        --warn-soft: #2e2416;
        --crit: #f2788a;
        --crit-soft: #2f1a20;

        --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-lift: 0 8px 20px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --surface-page: #0e1020;
    --surface-card: #171a2e;
    --surface-sunken: #1e2238;
    --surface-hover: #1f2440;
    --border-subtle: #272c47;
    --border-strong: #363d5e;
    --text-primary: #eef0f8;
    --text-secondary: #b3b9d4;
    --text-muted: #8189ab;
    --brand-500: #7c86e8;
    --brand-300: #a7aef2;
    --brand-50: #1d2144;
    --accent: #35c6e2;
    --accent-soft: #10303a;
    --ok: #45c795;
    --ok-soft: #122c24;
    --warn: #e0a44a;
    --warn-soft: #2e2416;
    --crit: #f2788a;
    --crit-soft: #2f1a20;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lift: 0 8px 20px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* --- Base ---------------------------------------------------------------- */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--surface-page) !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
}

/* Retint the Tailwind greys the templates are built from, so the whole app
   moves to the token palette without touching 11k lines of markup. */
.bg-white { background-color: var(--surface-card) !important; }
.bg-gray-50 { background-color: var(--surface-page) !important; }
.bg-gray-100 { background-color: var(--surface-sunken) !important; }
.hover\:bg-gray-50:hover { background-color: var(--surface-hover) !important; }
.hover\:bg-gray-100:hover { background-color: var(--surface-sunken) !important; }

.text-gray-900 { color: var(--text-primary) !important; }
.text-gray-800, .text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-600, .text-gray-500, .text-gray-400 { color: var(--text-muted) !important; }

.border-gray-200, .border-gray-300 { border-color: var(--border-subtle) !important; }
.divide-gray-100 > * + *, .divide-gray-200 > * + * { border-color: var(--border-subtle) !important; }

.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900 { color: var(--brand-500) !important; }
.bg-blue-600, .bg-blue-500 { background-color: var(--brand-500) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-700) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--brand-50) !important; }
.border-blue-200, .border-blue-300, .border-blue-500, .border-blue-600 { border-color: var(--brand-300) !important; }
.text-green-600, .text-green-700, .text-green-800, .text-green-500, .text-green-400 { color: var(--ok) !important; }
.bg-green-50, .bg-green-100 { background-color: var(--ok-soft) !important; }
.bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--ok) !important; }
.border-green-200, .border-green-500 { border-color: var(--ok) !important; }
.text-red-600, .text-red-700, .text-red-800, .text-red-900, .text-red-400, .text-red-500 { color: var(--crit) !important; }
.bg-red-50, .bg-red-100 { background-color: var(--crit-soft) !important; }
.bg-red-600, .bg-red-700 { background-color: var(--crit) !important; }
/* border-red-500 isn't in the frozen Tailwind build at all (border-blue-500
   is), so the error toast's left border silently fell back to default grey. */
.border-red-200, .border-red-500 { border-color: var(--crit) !important; }
.text-yellow-600, .text-yellow-700, .text-yellow-800, .text-orange-600 { color: var(--warn) !important; }
.bg-yellow-50, .bg-yellow-100 { background-color: var(--warn-soft) !important; }
.border-yellow-200, .border-yellow-500 { border-color: var(--warn) !important; }

/* Indigo/purple/violet badges and callouts (property filters, role pills,
   "Example Usage" tips) don't carry separate meaning from blue here — same
   decorative accent family, so they ride the brand ramp too. That's also
   why they were the worst dark-mode offenders: unlike blue, nothing mapped
   them to a token at all, so they kept their light-mode literal values
   (e.g. text-purple-800's near-black purple) verbatim over a dark card. */
.text-purple-600, .text-purple-700, .text-purple-800,
.text-indigo-600, .text-indigo-700, .text-indigo-800 { color: var(--brand-500) !important; }
.bg-purple-50, .bg-purple-100,
.bg-indigo-50, .bg-indigo-100 { background-color: var(--brand-50) !important; }
.bg-purple-600, .bg-indigo-600 { background-color: var(--brand-500) !important; }
.hover\:bg-purple-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--brand-700) !important; }
.border-purple-300, .border-purple-500,
.border-indigo-300, .border-indigo-500 { border-color: var(--brand-300) !important; }

/* --- Cards --------------------------------------------------------------- */
/* The dashboard is ~20 stacked `bg-white rounded-lg shadow p-6` blocks. Giving
   that one recipe real treatment lifts every section at once. */
.rounded-lg.shadow,
.rounded-lg.shadow-sm,
.rounded-lg.shadow-xl {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--border-subtle);
}

/* --- Stat tiles ---------------------------------------------------------- */
/* The four KPI tiles are the first thing read; give them a spine of color and
   proper numerals instead of four identical white rectangles. */
.stat-tile {
    position: relative;
    overflow: hidden;
    /* Room for the accent spine below. Set here rather than via a `pl-7`
       utility class: this frozen Tailwind build never scanned that class
       (see the missing-utilities note above), so it would silently no-op. */
    padding-left: 1.75rem !important;
}
.stat-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand-500);
}
.stat-tile.is-live::before { background: var(--accent); }
.stat-tile .stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    font-weight: 700;
}
.stat-tile .stat-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Numbers line up wherever they're compared */
td, .tabular, [x-text*="views"], [x-text*="count"] {
    font-variant-numeric: tabular-nums;
}

/* --- Live indicator ------------------------------------------------------ */
.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

/* --- Rows ---------------------------------------------------------------- */
/* Top pages / referrers are ranked lists; a faint share bar behind each row
   turns a column of numbers into something scannable. */
.rank-row {
    position: relative;
    transition: background-color .15s ease;
}
.rank-row::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0; top: 0;
    width: var(--share, 0%);
    background: var(--brand-50);
    border-radius: 4px;
    z-index: 0;
    pointer-events: none;
}
.rank-row > * { position: relative; z-index: 1; }

/* --- Missing Tailwind utilities ------------------------------------------ */
/* tailwind.min.css is a frozen build scanned from an older template set:
   classes the current templates use but that build never saw (like the
   password-visibility toggle's `inset-y-0`) are simply absent from the CSS,
   silently falling back to browser defaults — here, top:auto resolved to the
   button's normal-flow position, i.e. below the field instead of inside it.
   Patch the gaps here rather than hand-rebuilding Tailwind. */
.inset-y-0 { top: 0; bottom: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Sidebar (components/sidebar.html): same story, a fresh batch of classes
   this frozen build never scanned. Composed to match the existing pattern
   (.transform already applies --tw-translate-x via CSS custom property, so
   the translate utilities below only need to set that variable, not
   `transform` directly — writing `transform: ...` here would fight the
   existing .transform rule depending on cascade order). */
.z-30 { z-index: 30; }
.h-14 { height: 3.5rem; }
.h-7 { height: 1.75rem; }
.w-7 { width: 1.75rem; }
.p-1 { padding: 0.25rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.self-start { align-self: flex-start; }
.transition-transform { transition-property: transform; }
.-translate-x-full { --tw-translate-x: -100%; }
.translate-x-0 { --tw-translate-x: 0px; }
.bg-gray-900\/30 { background-color: rgb(17 24 39 / 0.3); }

@media (min-width: 1024px) {
    .lg\:hidden { display: none; }
    .lg\:flex { display: flex; }
    .lg\:translate-x-0 { --tw-translate-x: 0px; }
    .lg\:pl-64 { padding-left: 16rem; }
    .lg\:inset-y-0 { top: 0; bottom: 0; }
}

/* --- CSP cleanup: was inline style="", moved here so style-src can drop
   'unsafe-inline'. [x-cloak] was previously duplicated verbatim across 4
   templates (index/console/funnels/goals) — centralized here so it now
   covers every page, not just those four. --------------------------------- */
[x-cloak] { display: none !important; }

.honeypot-offscreen { position: absolute; left: -9999px; top: -9999px; }
.avatar-badge { background: var(--brand-50); color: var(--brand-500); }
.live-value-color { color: var(--accent); }
.debug-scroll-events { max-height: 600px; overflow-y: auto; }
.debug-scroll-detail { max-height: 400px; }
/* Was a bare `code {}` rule scoped to this one template by being inside its
   own <style> block; theme.css is loaded everywhere, so a bare element
   selector here would also repaint the (unrelated, dark-background)
   <pre><code> blocks on Settings/Revenue/Events — scope to this one snippet
   instead of the tag. Its parent toolbar is a fixed bg-gray-800, not a
   theme-adaptive surface, so this uses a fixed light-on-dark overlay
   (not a --surface-* token) rather than something that would itself go
   dark — and nearly vanish against gray-800 — in the app's own dark mode. */
.debug-ws-url {
    background-color: rgba(255, 255, 255, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

/* Browser-icon brand colors (dashboard/website.html's per-browser if/elif) */
.icon-chrome { color: #4285f4; }
.icon-firefox { color: #ff7139; }
.icon-safari { color: #006cff; }
.icon-edge { color: #0078d7; }
.icon-opera { color: #ff1b2d; }
.icon-brave { color: #fb542b; }
.icon-chromium { color: #4a90e2; }
.icon-ie { color: #0076d7; }
.icon-android { color: #3ddc84; }
.icon-samsung { color: #1428a0; }

/* --- Focus --------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Inputs -------------------------------------------------------------- */
input, select, textarea {
    background-color: var(--surface-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}
input::placeholder { color: var(--text-muted) !important; }

/* --- Theme toggle -------------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background-color .15s ease, color .15s ease;
}
.theme-toggle:hover {
    background: var(--surface-sunken);
    color: var(--text-primary);
}