/* ═══════════════════════════════════════════════════════════════════════════════
   CC-BRANDING.CSS — Centralized Branding Design System for CCloud / TalentIO
   ═══════════════════════════════════════════════════════════════════════════════
   
   PURPOSE:
   Single source of truth for ALL brand-related colors across every CCloud page.
   Uses CSS custom properties set dynamically from org branding settings.
   
   USAGE:
   Instead of hardcoded Tailwind colors (bg-indigo-600, text-blue-500) or
   hex values (#4f46e5, #0083ff), use the brand utility classes below.
   
   CSS VARIABLES (set by brandingLoader.js / ccBrandingLoader.js):
     --cc-brand-primary     Main brand color (sidebar bg, primary buttons)
     --cc-brand-secondary   Secondary brand color (gradients, deep accents)
     --cc-brand-accent      Accent color (highlights, badges, CTAs)
     --cc-sidebar-bg        Sidebar background (may be gradient)
     --cc-sidebar-text      Sidebar text/icon color
     --cc-sidebar-active    Sidebar active item highlight
     --cc-banner-gradient-start  Banner gradient start
     --cc-banner-gradient-end    Banner gradient end
   
   QUICK REFERENCE — Class → CSS Variable mapping:
   ┌─────────────────────────────┬──────────────────────────────────────────┐
   │ Class                       │ Maps to                                  │
   ├─────────────────────────────┼──────────────────────────────────────────┤
   │ .brand-bg                   │ --cc-brand-primary (solid)               │
   │ .brand-bg-secondary         │ --cc-brand-secondary (solid)             │
   │ .brand-bg-accent            │ --cc-brand-accent (solid)                │
   │ .brand-text                 │ --cc-brand-primary                       │
   │ .brand-border               │ --cc-brand-primary                       │
   │ .brand-btn                  │ gradient primary→secondary               │
   │ .brand-btn-outline          │ transparent + primary border             │
   │ .brand-banner               │ banner gradient start→end                │
   │ .brand-progress             │ primary background on bar fill           │
   │ .brand-badge                │ primary bg + white text                  │
   │ .brand-link                 │ primary text + hover underline           │
   │ .brand-ring                 │ primary focus ring                       │
   │ .brand-card-header          │ subtle primary tint background           │
   │ .brand-tab-active           │ primary bg, white text, shadow           │
   │ .brand-stat                 │ primary text for stat numbers            │
   └─────────────────────────────┴──────────────────────────────────────────┘
   
   FILE HISTORY:
   Created: 2026-04-27 — Extracted from _ccmasterLayout.cshtml inline styles
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLE DEFAULTS (overridden by brandingLoader / ccBrandingLoader)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --cc-brand-primary:   #4f46e5;
    --cc-brand-secondary: #312e81;
    --cc-brand-accent:    #f59e0b;
    --cc-sidebar-bg:      #4f46e5;
    --cc-sidebar-text:    #e2e8f0;
    --cc-sidebar-active:  #f59e0b;
    --cc-banner-gradient-start: var(--cc-brand-primary);
    --cc-banner-gradient-end:   var(--cc-brand-secondary);

    /* Derived shades (auto-computed via color-mix) */
    --cc-brand-primary-light: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent);
    --cc-brand-primary-hover: color-mix(in srgb, var(--cc-brand-primary) 85%, black);
    --cc-brand-primary-ring:  color-mix(in srgb, var(--cc-brand-primary) 40%, transparent);
    --cc-brand-primary-shadow: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent);
    --cc-brand-accent-light:  color-mix(in srgb, var(--cc-brand-accent) 15%, transparent);

    /* Functional colors (these stay constant regardless of brand) */
    --cc-success: #10b981;
    --cc-success-light: #d1fae5;
    --cc-danger:  #ef4444;
    --cc-danger-light: #fee2e2;
    --cc-warning: #f59e0b;
    --cc-warning-light: #fef3c7;
    --cc-info:    #3b82f6;
    --cc-info-light: #dbeafe;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2. BACKGROUND UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Solid backgrounds */
.brand-bg,
.bg-brand-primary          { background-color: var(--cc-brand-primary) !important; }
.brand-bg-secondary,
.bg-brand-secondary        { background-color: var(--cc-brand-secondary) !important; }
.brand-bg-accent,
.bg-brand-accent           { background-color: var(--cc-brand-accent) !important; }

/* Tinted backgrounds (for cards, badges, alerts) */
.brand-bg-tint,
.bg-brand-primary\/10      { background-color: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.bg-brand-primary\/15      { background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }
.bg-brand-primary\/20      { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.bg-brand-secondary\/15    { background-color: color-mix(in srgb, var(--cc-brand-secondary) 15%, transparent) !important; }
.bg-brand-accent\/15       { background-color: color-mix(in srgb, var(--cc-brand-accent) 15%, transparent) !important; }

/* Solid backgrounds (no gradients — single color) */
.brand-gradient,
.bg-brand-gradient         { background-color: var(--cc-brand-primary) !important; }
.bg-brand-gradient-lr      { background-color: var(--cc-brand-primary) !important; }
.bg-brand-gradient-accent  { background-color: var(--cc-brand-primary) !important; }

/* Gradient via / from / to utilities */
.via-brand-primary         { --tw-gradient-via: var(--cc-brand-primary) !important; }
.from-brand-primary\/10    { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.from-brand-primary\/20    { --tw-gradient-from: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.to-brand-primary\/10      { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent) !important; }
.to-brand-primary\/15      { --tw-gradient-to: color-mix(in srgb, var(--cc-brand-primary) 15%, transparent) !important; }

/* Functional backgrounds */
.brand-bg-success          { background-color: var(--cc-success) !important; }
.brand-bg-danger           { background-color: var(--cc-danger) !important; }
.brand-bg-warning          { background-color: var(--cc-warning) !important; }
.brand-bg-info             { background-color: var(--cc-info) !important; }
.brand-bg-success-light    { background-color: var(--cc-success-light) !important; }
.brand-bg-danger-light     { background-color: var(--cc-danger-light) !important; }
.brand-bg-warning-light    { background-color: var(--cc-warning-light) !important; }
.brand-bg-info-light       { background-color: var(--cc-info-light) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   3. TEXT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-text,
.text-brand-primary        { color: var(--cc-brand-primary) !important; }
.text-brand-secondary      { color: var(--cc-brand-secondary) !important; }
.text-brand-accent         { color: var(--cc-brand-accent) !important; }

/* Functional text */
.brand-text-success        { color: var(--cc-success) !important; }
.brand-text-danger         { color: var(--cc-danger) !important; }
.brand-text-warning        { color: var(--cc-warning) !important; }
.brand-text-info           { color: var(--cc-info) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   4. BORDER UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-border,
.border-brand-primary      { border-color: var(--cc-brand-primary) !important; }
.border-brand-secondary    { border-color: var(--cc-brand-secondary) !important; }
.border-brand-accent       { border-color: var(--cc-brand-accent) !important; }
.border-brand-primary\/30  { border-color: color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }

/* Functional borders */
.brand-border-success      { border-color: var(--cc-success) !important; }
.brand-border-danger       { border-color: var(--cc-danger) !important; }
.brand-border-warning      { border-color: var(--cc-warning) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   5. RING / FOCUS UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-ring,
.ring-brand-primary                { --tw-ring-color: var(--cc-brand-primary) !important; }
.focus\:ring-brand-primary:focus   { --tw-ring-color: var(--cc-brand-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   6. HOVER / INTERACTION STATES
   ═══════════════════════════════════════════════════════════════════════════════ */
.hover\:bg-brand-primary:hover      { background-color: var(--cc-brand-primary) !important; }
.hover\:bg-brand-primary\/80:hover  { background-color: color-mix(in srgb, var(--cc-brand-primary) 80%, black) !important; }
.hover\:text-brand-primary:hover    { color: var(--cc-brand-primary) !important; }
.hover\:border-brand-primary:hover  { border-color: var(--cc-brand-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   7. SHADOW UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */
.brand-shadow,
.shadow-brand-primary      { box-shadow: 0 4px 14px -2px var(--cc-brand-primary-shadow) !important; }
.shadow-brand-primary-sm   { box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--cc-brand-primary) 25%, transparent) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Primary solid button (single color, no gradient) */
.brand-btn,
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background-color: var(--cc-brand-primary);
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 8px -1px var(--cc-brand-primary-shadow);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.brand-btn:hover,
.btn-brand:hover {
    background-color: var(--cc-brand-primary-hover);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 45%, transparent);
    color: #fff !important;
    text-decoration: none !important;
}

/* Solid primary button (no gradient) */
.brand-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background-color: var(--cc-brand-primary);
    color: #fff !important;
    border: none;
    box-shadow: 0 2px 8px -1px var(--cc-brand-primary-shadow);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.brand-btn-solid:hover {
    background-color: var(--cc-brand-primary-hover);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 45%, transparent);
    color: #fff !important;
}

/* Outline button */
.brand-btn-outline,
.btn-brand-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cc-brand-primary) !important;
    border: 1.5px solid var(--cc-brand-primary);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.brand-btn-outline:hover,
.btn-brand-outline:hover {
    background: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent);
    text-decoration: none !important;
}

/* Ghost button (text-only) */
.brand-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cc-brand-primary) !important;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.brand-btn-ghost:hover {
    background: color-mix(in srgb, var(--cc-brand-primary) 10%, transparent);
}

/* Small button variant */
.brand-btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
}

/* Functional buttons */
.brand-btn-success { background: var(--cc-success) !important; color: #fff !important; border: none; }
.brand-btn-success:hover { background: color-mix(in srgb, var(--cc-success) 85%, black) !important; }
.brand-btn-danger  { background: var(--cc-danger) !important;  color: #fff !important; border: none; }
.brand-btn-danger:hover  { background: color-mix(in srgb, var(--cc-danger) 85%, black) !important; }

/* Dark mode button overrides */
.dark .brand-btn-outline,
.dark .btn-brand-outline   { color: color-mix(in srgb, var(--cc-brand-primary) 80%, white) !important; border-color: color-mix(in srgb, var(--cc-brand-primary) 80%, white); }
.dark .brand-btn-ghost     { color: color-mix(in srgb, var(--cc-brand-primary) 80%, white) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   9. BANNERS & STATS HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Page header banner — fixed colors, NOT brand-dependent */
.brand-banner,
.bg-brand-banner {
    background: linear-gradient(135deg, #0a1628 0%, #0d47a1 50%, #00bcd4 100%) !important;
    color: #fff;
}

/* Stats banner — fixed colors (deep navy to cyan), NOT brand-dependent */
.brand-stats-banner {
    background: linear-gradient(135deg, #0a1628 0%, #0d47a1 50%, #00bcd4 100%);
    box-shadow: 0 8px 24px -4px rgba(10, 22, 40, 0.4);
    color: #fff;
}
.dark .brand-stats-banner {
    box-shadow: 0 8px 24px -4px rgba(10, 22, 40, 0.5);
}

/* Wavy animated banner — add class "brand-banner-wave" to any banner container */
.brand-banner-wave {
    position: relative;
    overflow: hidden;
}
.brand-banner-wave::before,
.brand-banner-wave::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* Soft aurora layer — slow drift */
.brand-banner-wave::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
    animation: brandAuroraDrift 20s ease-in-out infinite alternate;
}
/* Subtle wave highlight — very slow, barely visible */
.brand-banner-wave::after {
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.03) 35%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 65%,
        transparent 80%
    );
    animation: brandShimmer 12s ease-in-out infinite alternate;
}
/* Bottom wave SVG layer */
.brand-banner-wave .brand-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 200%;
    height: 40px;
    pointer-events: none;
    opacity: 0.07;
}
.brand-banner-wave .brand-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}
.brand-banner-wave .brand-wave--1 { animation: brandWaveFlow 25s linear infinite; }
.brand-banner-wave .brand-wave--2 { animation: brandWaveFlow 35s linear infinite reverse; opacity: 0.05; bottom: -6px; }

@keyframes brandAuroraDrift {
    0%   { transform: translateX(-5%) translateY(3%); opacity: 1; }
    100% { transform: translateX(5%) translateY(-3%); opacity: 0.7; }
}
@keyframes brandShimmer {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
}
@keyframes brandWaveFlow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10. TABS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Active tab state */
.brand-tab-active {
    background-color: var(--cc-brand-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -2px var(--cc-brand-primary-ring);
    font-weight: 600;
}
.dark .brand-tab-active {
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cc-brand-primary) 30%, transparent);
}

/* Underline tab variant */
.brand-tab-underline {
    border-bottom: 2px solid transparent;
    color: #64748b;
    padding-bottom: 0.5rem;
    transition: all 0.2s ease;
}
.brand-tab-underline.active,
.brand-tab-underline[aria-selected="true"] {
    border-bottom-color: var(--cc-brand-primary);
    color: var(--cc-brand-primary);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11. PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Progress bar container */
.brand-progress {
    width: 100%;
    height: 0.5rem;
    background-color: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}
.dark .brand-progress {
    background-color: #334155;
}

/* Progress bar fill */
.brand-progress-bar,
.brand-progress > div {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--cc-brand-primary);
    transition: width 0.5s ease;
}

/* Thin progress variant */
.brand-progress-thin {
    height: 0.25rem;
}

/* Functional progress fills */
.brand-progress-success > div { background: var(--cc-success); }
.brand-progress-danger > div  { background: var(--cc-danger); }
.brand-progress-warning > div { background: var(--cc-warning); }

/* Circular progress ring (SVG stroke) */
.brand-progress-ring {
    stroke: var(--cc-brand-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12. BADGES & TAGS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: var(--cc-brand-primary);
    color: #fff;
}

.brand-badge-outline {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: transparent;
    color: var(--cc-brand-primary);
    border: 1px solid var(--cc-brand-primary);
}

.brand-badge-soft {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background-color: var(--cc-brand-primary-light);
    color: var(--cc-brand-primary);
}

/* Functional badges */
.brand-badge-success { background-color: var(--cc-success-light); color: #065f46; }
.brand-badge-danger  { background-color: var(--cc-danger-light);  color: #991b1b; }
.brand-badge-warning { background-color: var(--cc-warning-light); color: #92400e; }
.brand-badge-info    { background-color: var(--cc-info-light);    color: #1e40af; }


/* ═══════════════════════════════════════════════════════════════════════════════
   13. LINKS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-link {
    color: var(--cc-brand-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.brand-link:hover {
    color: var(--cc-brand-primary-hover);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   14. CARD HEADERS & SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tinted card header */
.brand-card-header {
    background-color: var(--cc-brand-primary-light);
    border-bottom: 1px solid color-mix(in srgb, var(--cc-brand-primary) 20%, transparent);
}
.dark .brand-card-header {
    background-color: color-mix(in srgb, var(--cc-brand-primary) 15%, #0f172a);
    border-bottom-color: color-mix(in srgb, var(--cc-brand-primary) 25%, transparent);
}

/* Left-border accent card */
.brand-card-accent {
    border-left: 3px solid var(--cc-brand-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   15. FORM INPUTS — FOCUS STATE
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-input:focus,
.brand-select:focus,
.brand-textarea:focus {
    border-color: var(--cc-brand-primary) !important;
    box-shadow: 0 0 0 3px var(--cc-brand-primary-ring) !important;
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   16. CHECKBOX / RADIO ACCENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.accent-brand { accent-color: var(--cc-brand-primary); }
input[type="checkbox"].brand-check:checked,
input[type="radio"].brand-check:checked { accent-color: var(--cc-brand-primary); }


/* ═══════════════════════════════════════════════════════════════════════════════
   17. STAT NUMBERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-stat {
    color: var(--cc-brand-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   18. ICON CIRCLE / AVATAR BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--cc-brand-primary);
    color: #fff;
    flex-shrink: 0;
}

.brand-icon-circle-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.brand-icon-circle-lg {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
}

.brand-icon-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-color: var(--cc-brand-primary-light);
    color: var(--cc-brand-primary);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   19. DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

.dark .dark\:bg-brand-primary\/20  { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, transparent) !important; }
.dark .dark\:text-brand-primary    { color: var(--cc-brand-primary) !important; }
.dark .dark\:border-brand-primary\/40 { border-color: color-mix(in srgb, var(--cc-brand-primary) 40%, transparent) !important; }
.dark .dark\:shadow-brand-primary  { box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--cc-brand-primary) 30%, transparent) !important; }

.dark .brand-badge-soft            { background-color: color-mix(in srgb, var(--cc-brand-primary) 20%, #0f172a); }
.dark .brand-badge-success         { background-color: color-mix(in srgb, var(--cc-success) 20%, #0f172a); color: #6ee7b7; }
.dark .brand-badge-danger          { background-color: color-mix(in srgb, var(--cc-danger) 20%, #0f172a);  color: #fca5a5; }
.dark .brand-badge-warning         { background-color: color-mix(in srgb, var(--cc-warning) 20%, #0f172a); color: #fcd34d; }
.dark .brand-badge-info            { background-color: color-mix(in srgb, var(--cc-info) 20%, #0f172a);    color: #93c5fd; }

.dark .brand-progress              { background-color: #334155; }
.dark .brand-card-header           { background-color: color-mix(in srgb, var(--cc-brand-primary) 12%, #0f172a); }


/* ═══════════════════════════════════════════════════════════════════════════════
   20. TOOLTIP / POPOVER BRAND ACCENT
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-tooltip {
    background-color: var(--cc-brand-secondary);
    color: #fff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   21. DIVIDER / SEPARATOR
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-divider {
    border-top: 2px solid color-mix(in srgb, var(--cc-brand-primary) 20%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   22. LOADING / SPINNER
   ═══════════════════════════════════════════════════════════════════════════════ */

.brand-spinner {
    border: 3px solid #e2e8f0;
    border-top-color: var(--cc-brand-primary);
    border-radius: 50%;
    animation: brand-spin 0.6s linear infinite;
}
@keyframes brand-spin {
    to { transform: rotate(360deg); }
}