/* =====================================================================
   Aspen.SharedViewsLibrary — shared THEME (palette) CSS.
   Served at _content/Aspen.SharedViewsLibrary/css/theme.css.

   Load order matters: reference this AFTER Bootstrap (and any vendor
   theme such as Syncfusion) in each host so its component overrides win:
       <link href="_content/Aspen.SharedViewsLibrary/css/theme.css" rel="stylesheet" />

   ---------------------------------------------------------------------
   Client-configurable palette
   ---------------------------------------------------------------------
   The whole palette is expressed as CSS custom properties on :root, and
   every rule below consumes those variables. Nothing hard-codes a hex
   value. That is the seam: to re-theme for a specific client, override
   the --theme-* variables for a narrower scope (e.g. the <ThemeStyle>
   component emits a <style> block, or the active client's config sets
   inline vars on <html>/<body>). Because Bootstrap's own --bs-* tokens
   are derived from --theme-*, overriding one variable recolors buttons,
   links, badges, .bg-primary, etc. everywhere.
   ===================================================================== */

:root {
    /* ---- Brand palette (outdoors-inspired) ---- */
    --theme-evergreen: #1F5D47;   /* 🌲 primary */
    --theme-aspen-green: #6FAF55; /* 🌿 accent / success */
    --theme-slate: #475569;       /* ❄️ secondary / muted */
    --theme-light-gray: #E5E7EB;  /* ☁️ borders / surfaces */
    --theme-white: #FFFFFF;       /* ⚪ base surface */

    /* ---- Semantic aliases (what components actually reference) ---- */
    --theme-primary: var(--theme-evergreen);
    --theme-primary-rgb: 31, 93, 71;
    --theme-primary-hover: #184a39;   /* evergreen -12% */
    --theme-primary-active: #123a2d;  /* evergreen -20% */

    --theme-accent: var(--theme-aspen-green);
    --theme-accent-rgb: 111, 175, 85;
    --theme-accent-hover: #5f9a48;

    --theme-secondary: var(--theme-slate);
    --theme-secondary-rgb: 71, 85, 105;
    --theme-secondary-hover: #3a4658;

    --theme-border: var(--theme-light-gray);
    --theme-surface: var(--theme-white);
    --theme-focus-ring: rgba(var(--theme-accent-rgb), 0.4);

    /* ---- Side menu (derived from the palette; follows a client's primary override) ----
       color-mix darkens the primary so the rail reads as a deep, branded evergreen. */
    --theme-sidebar-bg: color-mix(in srgb, var(--theme-primary) 82%, #000);
    --theme-sidebar-hover-bg: color-mix(in srgb, var(--theme-primary) 68%, #000);
    --theme-sidebar-active-bg: color-mix(in srgb, var(--theme-primary) 58%, #000);
    --theme-sidebar-divider: color-mix(in srgb, var(--theme-primary) 62%, #000);
    --theme-sidebar-text: #d7e2db;
    --theme-sidebar-muted: #93a89d;
    --theme-sidebar-text-active: #ffffff;
    --theme-sidebar-accent: var(--theme-accent);

    /* Background chip behind the brand logo. Transparent by default so the logo sits directly
       on the themed navbar (the default Aspen logo already carries its own white border, and a
       white box looked like it was overreaching). A client whose logo is a transparent PNG that
       vanishes against the bar can opt into a light backing via its LogoBackgroundColor. */
    --theme-logo-bg: transparent;

    /* ---- Map Bootstrap 5 tokens onto the palette ---- */
    --bs-primary: var(--theme-primary);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-success: var(--theme-accent);
    --bs-success-rgb: var(--theme-accent-rgb);
    --bs-secondary: var(--theme-secondary);
    --bs-secondary-rgb: var(--theme-secondary-rgb);
    --bs-link-color: var(--theme-primary);
    --bs-link-color-rgb: var(--theme-primary-rgb);
    --bs-link-hover-color: var(--theme-primary-hover);
    --bs-border-color: var(--theme-border);
}

/* ---------------- Links ---------------- */
a,
.btn-link {
    color: var(--theme-primary);
}

a:hover,
.btn-link:hover {
    color: var(--theme-primary-hover);
}

/* ---------------- Buttons ---------------- */
/* Bootstrap 5.3 buttons resolve local --bs-btn-* tokens, so re-point those. */
.btn-primary {
    --bs-btn-bg: var(--theme-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-bg: var(--theme-primary-hover);
    --bs-btn-hover-border-color: var(--theme-primary-hover);
    --bs-btn-active-bg: var(--theme-primary-active);
    --bs-btn-active-border-color: var(--theme-primary-active);
    --bs-btn-disabled-bg: var(--theme-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--theme-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-bg: var(--theme-primary);
    --bs-btn-hover-border-color: var(--theme-primary);
    --bs-btn-active-bg: var(--theme-primary);
    --bs-btn-active-border-color: var(--theme-primary);
}

.btn-secondary {
    --bs-btn-bg: var(--theme-secondary);
    --bs-btn-border-color: var(--theme-secondary);
    --bs-btn-hover-bg: var(--theme-secondary-hover);
    --bs-btn-hover-border-color: var(--theme-secondary-hover);
    --bs-btn-active-bg: var(--theme-secondary-hover);
}

.btn-success {
    --bs-btn-bg: var(--theme-accent);
    --bs-btn-border-color: var(--theme-accent);
    --bs-btn-hover-bg: var(--theme-accent-hover);
    --bs-btn-hover-border-color: var(--theme-accent-hover);
    --bs-btn-active-bg: var(--theme-accent-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--theme-secondary);
    --bs-btn-border-color: var(--theme-secondary);
    --bs-btn-hover-bg: var(--theme-secondary);
    --bs-btn-hover-border-color: var(--theme-secondary);
    --bs-btn-active-bg: var(--theme-secondary);
    --bs-btn-active-border-color: var(--theme-secondary);
}

/* ---------------- Backgrounds / badges (fallback for pre-5.3 utilities) ---------------- */
.bg-primary {
    background-color: var(--theme-primary) !important;
}

.text-primary {
    color: var(--theme-primary) !important;
}

.badge.bg-primary {
    background-color: var(--theme-primary) !important;
}

/* ---------------- Nav / tabs / pagination ---------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-white);
}

.page-item.active .page-link {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.page-link {
    color: var(--theme-primary);
}

/* ---------------- Branded navbar ---------------- */
/* Paints the top bar with the palette. Pair with .navbar-dark for legible light text.
   The environment warning (.bg-danger) is applied separately and its !important wins. */
.navbar.navbar-theme {
    background-color: var(--theme-primary);
}

/* Brand logo chip — gives transparent client logos a legible backing on the themed bar. */
.navbar-brand img.navbar-logo {
    background-color: var(--theme-logo-bg, transparent);
    padding: 3px 6px;
    border-radius: 4px;
    margin-right: 0.4rem;
}

/* ---------------- Focus rings ---------------- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 0.1rem var(--theme-white), 0 0 0 0.25rem var(--theme-focus-ring);
}

.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}
