/* ============================================================================
   App theme layer — sits on top of Materia's compiled CSS (vendor-*.css).

   This is the ONE place to rebrand a new project. Two roles are defined:
   PRIMARY (the main brand colour) and ACCENT (a supporting second colour). Each
   is a small ramp, mapped to semantic tokens that FLIP between light and dark.

   Why the flip: a colour step readable on a light ground is unreadable on a dark
   one and vice-versa, so a single fixed hex can't serve both modes. Light mode
   uses darker steps for text/fills with white ink; dark mode uses brighter steps
   with dark ink. Keep that pattern when you retint.

   TO REBRAND: change the ramp values under "PRIMARY ramp" / "ACCENT ramp" below
   (and their matching --*-rgb values used by the soft tints). The defaults are a
   neutral indigo + teal placeholder chosen to pass WCAG (4.5:1 body text, 3:1
   large text / graphics) on Materia's real light and dark grounds. If you change
   them, re-check contrast in both modes.
   ========================================================================== */

:root {
    /* ---- PRIMARY ramp (AnalyticsHub: blue) ---- */
    --pri-700: #1d4ed8; /* text on light  ~5.7:1 on #fff */
    --pri-600: #2563eb; /* fill on light, carries white ink ~4.6:1 */
    --pri-500: #3b82f6; /* fill on dark, carries dark ink */
    --pri-300: #93c5fd; /* text on dark */

    /* ---- ACCENT ramp (AnalyticsHub: growth green) ---- */
    --acc-700: #15803d; /* text / fill on light, white ink ~4.9:1 */
    --acc-600: #16a34a; /* border / graphic on light */
    --acc-500: #22c55e; /* fill on dark, carries dark ink */
    --acc-300: #86efac; /* text on dark */

    /* ---- Semantic roles — LIGHT ---- */
    --app-primary-text: var(--pri-700);
    --app-primary-fill: var(--pri-600);
    --app-primary-fill-hover: var(--pri-700);
    --app-primary-soft: rgba(37, 99, 235, .12);
    --app-on-primary: #fff;

    --app-accent-text: var(--acc-700);
    --app-accent-fill: var(--acc-700);
    --app-accent-fill-hover: #166534;
    --app-accent-border: var(--acc-600);
    --app-accent-soft: rgba(34, 197, 94, .12);
    --app-on-accent: #fff;

    /* ---- Hand back to Bootstrap so Materia's own components track the brand ---- */
    --bs-primary: var(--pri-600);
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: var(--app-primary-text);
    --bs-link-hover-color: #1e40af;
    /* Solid, not a wash: a focus ring is a non-text indicator and owes 3:1 against
       the ground it lands on (WCAG 2.4.11); a tinted ring can't reach that. */
    --bs-focus-ring-color: var(--pri-600);
}

/* ============================================================================
   DARK mode — every role re-points at the opposite end of the ramp. Must come
   after :root: `[data-bs-theme=dark]` and `:root` carry equal specificity, so
   source order decides.
   ========================================================================== */
[data-bs-theme="dark"] {
    --app-primary-text: var(--pri-300);
    --app-primary-fill: var(--pri-500);
    --app-primary-fill-hover: var(--pri-300);
    --app-primary-soft: rgba(59, 130, 246, .18);
    --app-on-primary: #0b1220;

    --app-accent-text: var(--acc-300);
    --app-accent-fill: var(--acc-500);
    --app-accent-fill-hover: var(--acc-300);
    --app-accent-border: var(--acc-500);
    --app-accent-soft: rgba(34, 197, 94, .16);
    --app-on-accent: #052e16;

    --bs-primary: var(--pri-500);
    --bs-primary-rgb: 59, 130, 246;
    --bs-link-color: var(--app-primary-text);
    --bs-link-hover-color: #bfdbfe;
    --bs-focus-ring-color: var(--pri-300);
}

/* ---- Accent utilities ---- */
.text-accent { color: var(--app-accent-text) !important; }
.bg-accent-soft { background-color: var(--app-accent-soft) !important; }
.border-accent { border-color: var(--app-accent-border) !important; }

.btn-accent {
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-bg: var(--app-accent-fill);
    --bs-btn-border-color: var(--app-accent-fill);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-bg: var(--app-accent-fill-hover);
    --bs-btn-hover-border-color: var(--app-accent-fill-hover);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-bg: var(--app-accent-fill-hover);
    --bs-btn-active-border-color: var(--app-accent-fill-hover);
    --bs-btn-disabled-color: var(--app-on-accent);
    --bs-btn-disabled-bg: var(--app-accent-fill);
    --bs-btn-disabled-border-color: var(--app-accent-fill);
}

/* Solid brand call-to-action (Materia's own btn-theme is outline-only) */
.btn-primary-solid {
    --bs-btn-color: var(--app-on-primary);
    --bs-btn-bg: var(--app-primary-fill);
    --bs-btn-border-color: var(--app-primary-fill);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-hover-bg: var(--app-primary-fill-hover);
    --bs-btn-hover-border-color: var(--app-primary-fill-hover);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary-fill-hover);
    --bs-btn-active-border-color: var(--app-primary-fill-hover);
    --bs-btn-disabled-color: var(--app-on-primary);
    --bs-btn-disabled-bg: var(--app-primary-fill);
    --bs-btn-disabled-border-color: var(--app-primary-fill);
}

/* ---- Initials avatars (Avatar.razor) ---- */
.app-avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--app-primary-fill);
    color: var(--app-on-primary);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    text-transform: uppercase;
}
.app-avatar.accent { background: var(--app-accent-fill); color: var(--app-on-accent); }
/* Initials are content, so the muted variant still owes 4.5:1: the lighter fill is
   what reads as muted, the ink stays legible. */
.app-avatar.muted { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* ---- Stat card icon tile (StatCard.razor, PageIntro.razor) ---- */
.stat-tile {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    flex-shrink: 0;
}

/* ---- Page intro heading (PageIntro.razor) ---- */
.page-intro { margin-bottom: 1.5rem; }
.page-intro h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }

/* ---- Locked / secure panel (AccessDenied.razor) ---- */
.secure-banner {
    border: 1px dashed var(--app-accent-border);
    background: var(--app-accent-soft);
    border-radius: .75rem;
}

/* ============================================================================
   Materia contrast fix (brand-independent).
   Materia's .text-bg-light / .text-bg-secondary put white text on a pale ground
   (~1.2:1) and never flip those tokens between modes, so it fails in both. A
   fixed dark ink is correct precisely because the ground is fixed; this matches
   Bootstrap's own .text-dark (rgb(var(--bs-dark-rgb))).
   ========================================================================== */
.badge.text-bg-light,
.badge.text-bg-secondary { color: rgb(var(--bs-dark-rgb)) !important; }

/* ============================================================================
   Data-viz palette (charts). Eight categorical slots + chart chrome, stepped
   separately for light and dark so each is validated against its own surface.
   Colours from the validated reference palette (blue, orange, aqua, yellow,
   magenta, green, violet, red). Referenced in SVG via inline style, e.g.
   style="stroke: var(--viz-1)".
   ========================================================================== */
:root {
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
    --viz-4: #eda100;
    --viz-5: #e87ba4;
    --viz-6: #008300;
    --viz-7: #4a3aa7;
    --viz-8: #e34948;

    --viz-grid: #e1e0d9;   /* hairline gridlines */
    --viz-axis: #c3c2b7;   /* baseline / axis */
}
[data-bs-theme="dark"] {
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #d55181;
    --viz-6: #008300;
    --viz-7: #9085e9;
    --viz-8: #e66767;

    --viz-grid: #2c2c2a;
    --viz-axis: #383835;
}

/* Centered placeholder shown inside a .chart box when every property is filtered out. */
.viz-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Colour swatch in the property legend chips. */
.viz-swatch {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: .3rem;
    border: 2px solid transparent;
    flex-shrink: 0;
}

/* ---- Login screen (Login.razor + BareLayout) ---- */
.login-shell {
    background:
        radial-gradient(1200px 600px at 15% -10%, var(--app-primary-soft), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, var(--app-accent-soft), transparent 55%);
}
.login-card {
    width: 100%;
    max-width: 26rem;
}
/* Center the login brand tile (stat-tile defaults to inline-grid). */
.login-card .stat-tile { margin-inline: auto; }