/* ================================================================
   APPLE VIBRANCY LAYER — Datanomics Privacy Platform
   ================================================================
   Loaded AFTER color-palettes.css to win specificity.

   Purpose:
   1. Force Governance Teal (#176B66) as the SINGLE brand identity
      across all legacy palette classes (drop multi-palette per Q2-A)
   2. Add frosted-vibrancy chrome (sidebar, navbar) per Q3-C
   3. Add atmospheric gradient mesh background so frost has content
      to blur over
   4. Polish active nav pill, KPI hero typography, badge dot prefix,
      brand mark, section labels — match Apple HIG cadence

   Decisions referenced:
   - Q1-B revised: Governance Teal #176B66 light / #78B8B1 dark (WCAG AA)
   - Q2-A: Single palette — neutralize 5 legacy palette classes
   - Q3-C: Frosted Apple translucent sidebar

   TOKEN OWNERSHIP NOTE:
   variables.css is the primary single source of truth for --dp-* color
   tokens. This file additionally DEFINES the "vibrancy/glow" subset of
   --dp-* tokens (light + dark): --dp-frost-bg, --dp-frost-blur,
   --dp-frost-border, --dp-mesh-1/2/3, --dp-brand-grad,
   --dp-brand-grad-shadow, --dp-nav-active-shadow. They live here because
   they are coupled to this effect layer. Do not duplicate them in
   variables.css under a new name — extend this group here instead.
   ================================================================ */


/* ================================================================
   1. PALETTE NEUTRALIZATION
   Force Refined Teal canonical values regardless of palette class.
   Light mode values; dark mode handled in separate block below.
   ================================================================ */
.palette-trust-blue,
.palette-modern-teal,
.palette-purple-privacy,
.palette-minimal-corporate,
.palette-cyan-electric,
.palette-deep-trust-cyan,
.palette-refined-teal,
.palette-midnight-tech,
:root {
    /* Brand identity */
    --pp-primary:               #176B66;
    --pp-primary-hover:         #125853;
    --pp-primary-active:        #0F4945;
    --pp-primary-rgb:           23, 107, 102;
    --pp-primary-disabled:      #A9CFCA;

    /* Tinted brand surface */
    --pp-palette-50:            #EFF7F6;
    --pp-bg-soft-brand:         #EFF7F6;

    /* Text link / accent text */
    --pp-text-link:             #176B66;
    --pp-text-link-hover:       #125853;

    /* Sidebar active = brand pill */
    --pp-sidebar-active-bg:     #176B66;
    --pp-sidebar-active-text:   #FFFFFF;
    --pp-sidebar-hover-bg:      rgba(23, 107, 102, 0.08);

    /* Input focus border / ring */
    --pp-input-focus-border:    rgba(23, 107, 102, 0.48);
    --pp-input-focus-shadow:    0 0 0 3px rgba(23, 107, 102, 0.16);

    /* Steel blue is a secondary data/CTA accent; amber is reserved for warning. */
    --pp-accent:                #496B9B;
    --pp-accent-hover:          #3E5D88;
    --pp-accent-text:           #FFFFFF;
}

/* Dark mode counterpart */
.palette-trust-blue.dark-mode,
.palette-trust-blue[data-bs-theme="dark"],
.palette-modern-teal.dark-mode,
.palette-modern-teal[data-bs-theme="dark"],
.palette-purple-privacy.dark-mode,
.palette-purple-privacy[data-bs-theme="dark"],
.palette-minimal-corporate.dark-mode,
.palette-minimal-corporate[data-bs-theme="dark"],
.palette-cyan-electric.dark-mode,
.palette-cyan-electric[data-bs-theme="dark"],
.palette-deep-trust-cyan.dark-mode,
.palette-deep-trust-cyan[data-bs-theme="dark"],
.palette-refined-teal.dark-mode,
.palette-refined-teal[data-bs-theme="dark"],
.palette-midnight-tech.dark-mode,
.palette-midnight-tech[data-bs-theme="dark"],
.dark-mode,
[data-bs-theme="dark"] {
    --pp-primary:               #78B8B1;
    --pp-primary-hover:         #91CAC3;
    --pp-primary-active:        #5FA49D;
    --pp-primary-rgb:           120, 184, 177;
    --pp-primary-disabled:      #466B68;

    --pp-palette-50:            rgba(120, 184, 177, 0.10);
    --pp-bg-soft-brand:         rgba(120, 184, 177, 0.10);

    --pp-text-link:             #89C5BE;
    --pp-text-link-hover:       #A7D6D0;

    --pp-sidebar-active-bg:     rgba(120, 184, 177, 0.18);
    --pp-sidebar-active-text:   #A7D6D0;
    --pp-sidebar-hover-bg:      rgba(120, 184, 177, 0.10);

    --pp-input-focus-border:    rgba(120, 184, 177, 0.52);
    --pp-input-focus-shadow:    0 0 0 3px rgba(120, 184, 177, 0.22);

    --pp-accent:                #8FA9CD;
    --pp-accent-hover:          #A8BCDA;
    --pp-accent-text:           #10171E;
}


/* ================================================================
   2. ATMOSPHERIC VIBRANCY TOKENS
   ================================================================ */
:root {
    /* Frosted surfaces (light) */
    --dp-frost-bg:        rgba(255, 255, 255, 0.76);
    --dp-frost-border:    rgba(15, 23, 42, 0.06);
    --dp-frost-blur:      blur(28px) saturate(125%);

    /* Page atmosphere mesh — soft brand warmth */
    --dp-mesh-1: radial-gradient(ellipse 70% 55% at 12% -5%, rgba(23, 107, 102, 0.10), transparent 55%);
    --dp-mesh-2: radial-gradient(ellipse 80% 60% at 92% 8%, rgba(73, 107, 155, 0.05), transparent 55%);
    --dp-mesh-3: radial-gradient(ellipse 90% 65% at 50% 110%, rgba(23, 107, 102, 0.05), transparent 60%);

    /* Active pill drop shadow (Apple navigation feel) */
    --dp-nav-active-shadow: 0 4px 12px rgba(23, 107, 102, 0.20),
                            inset 0 1px 0 rgba(255, 255, 255, 0.12);

    /* Brand mark (logo) gradient & shadow */
    --dp-brand-grad: linear-gradient(135deg, #176B66 0%, #2D817A 100%);
    --dp-brand-grad-shadow: 0 5px 12px rgba(23, 107, 102, 0.22),
                            inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dark-mode,
[data-bs-theme="dark"] {
    --dp-frost-bg:        rgba(13, 21, 29, 0.76);
    --dp-frost-border:    rgba(255, 255, 255, 0.06);

    --dp-mesh-1: radial-gradient(ellipse 70% 55% at 12% -5%, rgba(120, 184, 177, 0.10), transparent 55%);
    --dp-mesh-2: radial-gradient(ellipse 80% 60% at 92% 8%, rgba(143, 169, 205, 0.04), transparent 55%);
    --dp-mesh-3: radial-gradient(ellipse 90% 65% at 50% 110%, rgba(120, 184, 177, 0.04), transparent 60%);

    --dp-nav-active-shadow: 0 4px 12px rgba(120, 184, 177, 0.22),
                            inset 0 1px 0 rgba(255, 255, 255, 0.14);

    --dp-brand-grad: linear-gradient(135deg, #78B8B1 0%, #91CAC3 100%);
    --dp-brand-grad-shadow: 0 5px 12px rgba(120, 184, 177, 0.22),
                            inset 0 1px 0 rgba(255, 255, 255, 0.18);
}


/* ================================================================
   3. ATMOSPHERIC PAGE BACKGROUND
   Mesh gradient layer behind everything → gives frost something
   meaningful to blur. Pseudo-element on body to avoid stacking
   conflicts with .blazor-error-boundary etc.
   ================================================================ */
/* Move the page surface color from body → html so that body can be transparent.
   This lets the body::before mesh (z-index: -1) paint between html's background
   and body's content, without the body bg covering the mesh.  */
html {
    background-color: var(--dp-surface-page);
}
body {
    background-color: transparent !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        var(--dp-mesh-1),
        var(--dp-mesh-2),
        var(--dp-mesh-3);
    pointer-events: none;
    /* z-index: -1 puts the mesh between html's background and body's normal-flow
       content. No stacking context is created on body's children, so Bootstrap
       modals (z-index 1055) and modal-backdrops (z-index 1050) layer correctly.

       Previously this layer used z-index: 0 paired with `body > * { z-index: 1 }`
       — that combo created a stacking context on the Blazor root <div>, which
       trapped modals (z-index 1055) inside while the modal-backdrop (z-index 1050,
       direct child of body) painted above. Result: clicking a KpiCard opened a
       modal that was BEHIND the backdrop. */
    z-index: -1;
    transition: opacity var(--transition-state, 250ms ease);
}


/* ================================================================
   4. TOP NAVBAR — FROSTED VIBRANCY
   Targets the .navbar in MainLayout.razor (fixed-top)
   ================================================================ */
.navbar.fixed-top {
    background: var(--dp-frost-bg) !important;
    backdrop-filter: var(--dp-frost-blur);
    -webkit-backdrop-filter: var(--dp-frost-blur);
    border-bottom: 1px solid var(--dp-frost-border);
    color: var(--dp-text-primary);
    box-shadow: none;
    transition: background-color var(--transition-state, 250ms ease),
                border-color var(--transition-state, 250ms ease);
}

/* The global responsive stylesheet caps every .container-fluid on wide
   viewports. Navbar chrome must keep a true left edge instead of inheriting
   the page content max-width. */
#main-navigation.navbar {
    padding-left: 0;
    padding-right: 0;
}

#main-navigation > .container-fluid {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
}

/* Light-mode frosted chrome sits on a pale translucent surface, so palette
   navbar text can be too light when a legacy palette sets --pp-navbar-text
   to white. Use body text tokens for the navbar controls in light mode. */
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .navbar-brand,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .navbar-brand-name,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .navbar-user-btn,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .dp-theme-toggle,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .dp-notify-bell-btn,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .dp-export-bell-btn,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .language-switcher .btn-light,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .sidebar-toggle-btn {
    color: var(--dp-text-primary);
}

html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .navbar-brand-tagline,
html:not(.dark-mode):not([data-bs-theme="dark"]) #main-navigation .brand-tagline-prefix {
    color: var(--dp-text-secondary);
    opacity: 1;
}

/* Navbar brand text gets refined treatment */
.navbar-brand-name {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--dp-text-primary);
}


/* ================================================================
   5. SIDEBAR — FROSTED VIBRANCY
   Outer .sidebar-column = frosted backdrop
   Inner .unified-sidebar = transparent (let frost show through)
   ================================================================ */
.sidebar-column {
    background: var(--dp-frost-bg) !important;
    backdrop-filter: var(--dp-frost-blur);
    -webkit-backdrop-filter: var(--dp-frost-blur);
    border-right: 1px solid var(--dp-frost-border) !important;
    transition: background-color var(--transition-state, 250ms ease),
                border-color var(--transition-state, 250ms ease);
}

/* Mobile sidebar footer — matches frost treatment */
.sidebar-user-footer {
    background: transparent !important;
    border-top: 1px solid var(--dp-frost-border) !important;
}


/* ================================================================
   6. SIDEBAR NAV PILL — APPLE ACTIVE STATE
   Override pill radius + active drop shadow + inset highlight.
   Targets ::deep classes inside UnifiedSidebar via global selectors
   (since this CSS isn't scoped, it reaches the rendered elements).
   ================================================================ */

/* Section label — slightly looser tracking, brand-aware */
.unified-sidebar .nav-group-title,
.unified-sidebar .nav-header {
    font-size: 10.5px !important;
    letter-spacing: 0.10em !important;
    color: var(--dp-text-muted) !important;
    font-weight: 700 !important;
    opacity: 0.85;
}

/* Nav links — pill radius + smoother typography */
.unified-sidebar .nav-link,
.unified-sidebar .nav-accordion-toggle {
    border-radius: 10px !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    margin-bottom: 1px !important;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: subtle brand tint */
.unified-sidebar .nav-link:hover,
.unified-sidebar .nav-accordion-toggle:hover {
    background-color: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.08) !important;
    color: var(--dp-text-primary) !important;
}

/* Active: filled brand pill with drop shadow + inset highlight */
.unified-sidebar .nav-link.active,
.unified-sidebar .nav-single-item .nav-link.active,
.unified-sidebar .nav-accordion-child .nav-link.active {
    background-color: var(--pp-primary) !important;
    color: var(--pp-sidebar-active-text, #FFFFFF) !important;
    box-shadow: var(--dp-nav-active-shadow) !important;
    font-weight: 500 !important;
}

.unified-sidebar .nav-link.active:hover,
.unified-sidebar .nav-single-item .nav-link.active:hover {
    background-color: var(--pp-primary-hover) !important;
    color: var(--pp-sidebar-active-text, #FFFFFF) !important;
}

/* Has-active-child (parent of active accordion item) — subtle brand tint */
.unified-sidebar .nav-accordion-toggle.has-active-child,
.unified-sidebar .nav-link.parent-active {
    background-color: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.10) !important;
    color: var(--pp-primary) !important;
    box-shadow: none !important;
}

/* Accordion child indent — slightly tighter */
.unified-sidebar .nav-accordion-child .nav-link {
    padding: 7px 12px !important;
    font-size: 13px !important;
}

/* Sidebar badge — Apple pill on nav row */
.unified-sidebar .nav-link .badge,
.unified-sidebar .nav-accordion-toggle .badge {
    border-radius: 9999px;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

/* Active row inverts badge to translucent white */
.unified-sidebar .nav-link.active .badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    border: none !important;
}


/* ================================================================
   7. APPLE TYPOGRAPHY — PAGE TITLES & DASHBOARD HEROES
   ================================================================ */

/* Page-level h1 / brand heading */
h1,
.brand-heading,
.page-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

/* Brand-accented inline span (e.g. user name in greetings) */
.brand-accent {
    background: var(--dp-brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tabular-num utility for KPI / data values */
.num,
.kpi-value,
.kpi-card .value,
.dashboard-stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum', 'cv11';
    letter-spacing: -0.025em;
}


/* ================================================================
   8. KPI / STATS CARD — APPLE HERO POLISH
   ================================================================ */
.pp-dashboard .kpi-value,
.pp-dashboard .kpi-card .value,
.dashboard-stat-value,
.stats-card .stats-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.pp-dashboard .kpi-label,
.stats-card .stats-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dp-text-muted);
}

/* Tinted icon circles — generalize to all variants used by KPI cards */
.kpi-icon,
.dashboard-stat-icon,
.stats-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Brand variant */
.kpi-icon.cyan,
.kpi-icon.brand,
.dashboard-stat-icon.brand {
    background: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.10);
    color: var(--pp-primary);
}


/* ================================================================
   9. BADGE — APPLE PILL WITH DOT INDICATOR
   The dot prefix doubles as a non-color signal (WCAG 1.4.1).
   Applied via class .badge-dot for opt-in; legacy badges unchanged.
   ================================================================ */
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Brand badge utility */
.badge.badge-brand,
.badge-brand {
    background-color: rgba(var(--pp-primary-rgb, 0, 122, 130), 0.12);
    color: var(--pp-primary);
}


/* ================================================================
   10. BUTTONS — REFINED HOVER LIFT
   apple-design-tokens.css already covers base; here we add the
   primary button shadow for light mode (apple "vibrant" feel).
   ================================================================ */
.btn-primary {
    box-shadow: 0 4px 12px rgba(var(--pp-primary-rgb, 0, 122, 130), 0.22);
}

.btn-primary:hover {
    box-shadow: 0 6px 16px rgba(var(--pp-primary-rgb, 0, 122, 130), 0.30);
}

.btn-primary:active,
.btn-primary:focus:active {
    box-shadow: 0 2px 6px rgba(var(--pp-primary-rgb, 0, 122, 130), 0.20);
}

/* Dark mode: subtler shadow (cyan glow could feel neon) */
.dark-mode .btn-primary,
[data-bs-theme="dark"] .btn-primary {
    box-shadow: 0 4px 12px rgba(var(--pp-primary-rgb, 51, 214, 219), 0.18);
}


/* ================================================================
   11. CARDS — REMOVE BORDERS (SHADOW-ONLY ELEVATION)
   apple-design-tokens.css set border: var(--border-default).
   Apple HIG: shadow-only, no visible border.
   ================================================================ */
.card {
    border: none !important;
    box-shadow: var(--shadow-l1, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
}

.card:hover {
    box-shadow: var(--shadow-l1-hover, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05));
}

/* Card header: borderless, padding aligned to body */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--dp-border-subtle);
    padding: 18px 22px 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.card-header h6,
.card-header .card-title {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0;
    color: var(--dp-text-primary);
}

.card-body {
    padding: 18px 22px;
}


/* ================================================================
   12. INPUT — TIGHTER SEARCH FIELD (TOPBAR)
   ================================================================ */
.navbar .form-control,
.search-input {
    height: 36px;
    font-size: 13.5px;
}


/* ================================================================
   13. BRAND MARK — LOGO GRADIENT TILE (OPT-IN UTILITY)
   Use class .brand-mark on a 32×32 element for gradient logo bg.
   ================================================================ */
.brand-mark-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--dp-brand-grad);
    box-shadow: var(--dp-brand-grad-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}


/* ================================================================
   14. TABLE — REMOVE BOOTSTRAP DEFAULT BORDER ON .table
   Already handled in apple-design-tokens.css for cells, but the
   wrapper .table still gets a top stroke from Bootstrap.
   ================================================================ */
.table {
    border-top: none;
    margin-bottom: 0;
}

.table thead tr:first-child th {
    border-top: none;
}


/* ================================================================
   15. RESPONSIVE — REDUCE FROST INTENSITY ON MOBILE
   backdrop-filter is GPU-expensive on low-end devices.
   ================================================================ */
@media (max-width: 575.98px) {
    :root {
        --dp-frost-blur: blur(20px) saturate(150%);
        --dp-frost-bg:   rgba(255, 255, 255, 0.85);
    }
    .dark-mode,
    [data-bs-theme="dark"] {
        --dp-frost-bg: rgba(11, 18, 32, 0.85);
    }
}


/* ================================================================
   16. FALLBACK — BROWSERS WITHOUT backdrop-filter SUPPORT
   ================================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar.fixed-top,
    .sidebar-column {
        background: var(--dp-surface-primary, #FFFFFF) !important;
    }

    .dark-mode .navbar.fixed-top,
    .dark-mode .sidebar-column,
    [data-bs-theme="dark"] .navbar.fixed-top,
    [data-bs-theme="dark"] .sidebar-column {
        background: var(--dp-surface-primary, #1E293B) !important;
    }
}


/* ================================================================
   17. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    body::before {
        transition: none;
    }
    .navbar.fixed-top,
    .sidebar-column,
    .unified-sidebar .nav-link,
    .unified-sidebar .nav-accordion-toggle {
        transition: none !important;
    }
}