/* Admin Dashboard Theme — light defaults at :root, dark overrides under
   .adm-dark (toggled by ThemeSvc via MainLayout). Brand primary/secondary
   match AdmTheme.Default in code. Components consuming these variables stay
   in sync regardless of mode. */

/* Force body text/background to follow MudBlazor's palette CSS variables
   (set by MudThemeProvider). bootstrap-reboot.css applies
   `body { color: var(--bs-body-color, #212529); }` which would otherwise
   bleed dark grey into every MudText whose Color modifier resolves to
   "inherit", making dashboard headings unreadable in dark mode. */
html, body {
    color: var(--mud-palette-text-primary, #1e293b);
    background-color: var(--mud-palette-background, #f8fafc);
}

/* Plain anchor links inherit the brand primary so they remain visible on
   both backgrounds. */
a, .btn-link {
    color: var(--mud-palette-primary, #006bb7);
}

/* Brand-coloured tokens DERIVE from MudBlazor's palette CSS variables —
   never hardcode hex here. MudThemeProvider rebroadcasts those vars on
   every palette change, so the ThemeConfig drawer's colour pickers now
   actually flow through to sidebar/cards/dashboard accents instead of
   only the components that consume `Color="Color.Primary"` directly.

   `rgb(from <colour> r g b / <alpha>)` lets us derive translucent
   variants without hard-coding the RGB triple (was the old
   `rgba(99, 102, 241, 0.10)` baked-in primary). Supported in
   Chromium 111+, Firefox 113+, Safari 16.4+. */
:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --topbar-height: 64px;
    --card-border-radius: 8px;
    --transition-speed: 0.3s;

    /* Brand — pure aliases on MudBlazor palette. */
    --primary-color:   var(--mud-palette-primary,   #087f79);
    --secondary-color: var(--mud-palette-secondary, #10b981);
    --success-color:   var(--mud-palette-success,   #10b981);
    --warning-color:   var(--mud-palette-warning,   #f59e0b);
    --error-color:     var(--mud-palette-error,     #ef4444);
    --info-color:      var(--mud-palette-info,      #0ea5e9);
    --dark-color:      var(--mud-palette-dark,      #1e293b);

    /* Surfaces — track MudBlazor's surface/background tokens. */
    --content-bg:    var(--mud-palette-background,         #f8fafc);
    --surface-bg:    var(--mud-palette-surface,            #ffffff);
    --text-primary:  var(--mud-palette-text-primary,       #1e293b);
    --text-secondary: var(--mud-palette-text-secondary,    #475569);

    /* Sidebar — light mode defaults. The brand-derived active states
       use `rgb(from ...)` so they re-tint automatically when the
       primary palette colour changes. */
    --sidebar-bg:        var(--mud-palette-drawer-background, #ffffff);
    --sidebar-text:      var(--mud-palette-drawer-text,       #1e293b);
    --sidebar-section:   var(--mud-palette-text-disabled,     #94a3b8);
    --sidebar-search-bg: rgba(15, 23, 42, 0.04);
    --sidebar-hover:     rgba(15, 23, 42, 0.06);
    --sidebar-active-bg:  rgb(from var(--mud-palette-primary, #087f79) r g b / 0.10);
    --sidebar-active-fg:  var(--mud-palette-primary-darken,  var(--mud-palette-primary, #087f79));
    --sidebar-active-bar: var(--mud-palette-primary-darken,  var(--mud-palette-primary, #087f79));
    --sidebar-divider:   rgba(15, 23, 42, 0.08);
}

/* Dark MODE scope (applied on MudLayout when ThemeSvc.IsDarkMode).
   Only surface/sidebar tokens differ — the brand `--primary-color`
   etc. above already track MudBlazor's palette which itself swaps
   between PaletteLight and PaletteDark, so we don't redeclare them. */
.adm-dark {
    --content-bg:    var(--mud-palette-background,      #15151f);
    --surface-bg:    var(--mud-palette-surface,         #1e1e2d);
    --text-primary:  var(--mud-palette-text-primary,    #f1f5f9);
    --text-secondary: var(--mud-palette-text-secondary, #cbd5e1);

    --sidebar-search-bg: rgba(255, 255, 255, 0.06);
    --sidebar-hover:     rgba(255, 255, 255, 0.08);
    --sidebar-active-bg:  rgb(from var(--mud-palette-primary, #7ce0c5) r g b / 0.16);
    --sidebar-active-fg:  var(--mud-palette-primary-lighten, var(--mud-palette-primary, #7ce0c5));
    --sidebar-active-bar: var(--mud-palette-primary,        #7ce0c5);
    --sidebar-divider:   rgba(255, 255, 255, 0.08);
}

/* Independent sidebar scope — flipped by ThemeSvc.SidebarMode so the
   sidebar can stay dark while the app is in light mode (matches the
   STOX/FINQ "Dark sidebar" switch). The brand-colour tokens above
   keep tracking the app palette intentionally (mirroring STOX). */
.adm-sidebar-dark {
    --sidebar-bg:        #0a0a14;
    --sidebar-text:      #cfcfd6;
    --sidebar-section:   #818cf8;
    --sidebar-search-bg: rgba(255, 255, 255, 0.06);
    --sidebar-hover:     rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgb(from var(--mud-palette-primary, #818cf8) r g b / 0.16);
    --sidebar-divider:   rgba(255, 255, 255, 0.08);
}

.adm-sidebar-light {
    --sidebar-bg:        #ffffff;
    --sidebar-text:      #1e293b;
    --sidebar-section:   #94a3b8;
    --sidebar-search-bg: rgba(15, 23, 42, 0.04);
    --sidebar-hover:     rgba(15, 23, 42, 0.06);
    --sidebar-active-bg: rgb(from var(--mud-palette-primary, #6366f1) r g b / 0.10);
    --sidebar-divider:   rgba(15, 23, 42, 0.08);
}

/* Layout */
.admin-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition: width var(--transition-speed) ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.sidebar-collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.nav-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f8fafc;
    margin-left: var(--sidebar-width);
    transition: margin var(--transition-speed) ease;
}

.main-content-expanded {
    margin-left: var(--sidebar-collapsed-width);
}

.top-bar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.content-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* MudBlazor Overrides */
/* Navigation Components */
.nav-item {
    border-radius: 0 !important;
    margin: 0 !important;
}

.nav-item:hover {
    background-color: var(--sidebar-hover) !important;
}

.nav-group {
    border-radius: 0 !important;
    margin: 0 !important;
}

.mud-nav-link.active {
    background-color: var(--sidebar-active-bg) !important;
    border-left: 3px solid var(--sidebar-active-bar) !important;
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--sidebar-active-fg) !important;
}

.mud-nav-group.expanded {
    background-color: var(--sidebar-active-bg) !important;
    border-left: 3px solid var(--sidebar-active-bar) !important;
}

.mud-nav-group.expanded .mud-nav-link-icon {
    color: var(--sidebar-active-fg) !important;
}

/* Additional MudBlazor Navigation Styles */
.mud-nav-link {
    border-radius: 0 !important;
    margin: 0 !important;
}

.mud-nav-link:hover {
    background-color: var(--sidebar-hover) !important;
}

/* Top-level NavGroup header — must align with top-level MudNavLink
   leaves like "Dashboard" / "Organization List". MudBlazor defaults
   the .mud-nav-link padding-left to 16px; pinning it here so the
   later descendant rule (below) can't bleed into the header. */
.mud-nav-group > .mud-nav-link {
    padding-left: 16px !important;
}

/* Nested children — NavLinks INSIDE an expanded NavGroup's collapse
   panel. Previously this rule was written as `.mud-nav-group .mud-nav-link`
   (plain descendant), which ALSO matched the group's own header button
   (the button is a descendant of the group too). Because both rules had
   identical specificity, the descendant rule won the cascade and pushed
   the header to 32px, making every parent-with-children appear indented
   relative to top-level leaves. Scoping to `.mud-collapse-container`
   ensures only the actual children inside the expand panel get the
   deeper indent. */
.mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 32px !important;
}

.mud-nav-group-title {
    font-weight: 600 !important;
    color: var(--sidebar-text) !important;
    opacity: 0.75;
}

/* Dashboard Cards */
.dashboard-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dashboard-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark-color);
}

.dashboard-metric {
    font-size: 2rem;
    font-weight: 700;
    margin: 8px 0;
}

.dashboard-trend {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.trend-up {
    color: var(--success-color);
}

.trend-down {
    color: var(--error-color);
}

/* Error UI */
#blazor-error-ui {
    background-color: var(--error-color);
    color: white;
    bottom: 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width));
    }

    .sidebar.sidebar-mobile-open {
        left: 0;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

    .sidebar-overlay.active {
        display: block;
    }
}