/* ============================================================================
   THEMES — Personality Layer
   Token overrides per theme + component-level theme styles.
   Loaded after tokens.css (which sets the obsidian defaults).
   ============================================================================ */


/* ============================================================================
   LAYOUT MODES
   Shared structural transform: sidebar -> horizontal top navigation.
   Themes opt in via data-layout="top-nav" (set by theme.js).
   ============================================================================ */

/* --- Page container --- */
[data-layout="top-nav"] .page {
    flex-direction: column !important;
    padding-left: 0 !important;
}

/* --- Sidebar becomes horizontal bar --- */
[data-layout="top-nav"] .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 0 !important;
    max-height: none !important;
    z-index: 1001 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08)) !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 1.25rem !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}

/* --- Top row (logo area) --- */
[data-layout="top-nav"] .sidebar .top-row {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

[data-layout="top-nav"] .sidebar .top-row .container-fluid {
    padding: 0 !important;
}

[data-layout="top-nav"] .sidebar .top-row .navbar-brand {
    padding: 0 1rem 0 0 !important;
    margin: 0 !important;
}

[data-layout="top-nav"] .sidebar .top-row .navbar-brand img {
    max-height: 28px !important;
    width: auto !important;
}

/* --- Nav scrollable as flex container --- */
[data-layout="top-nav"] .sidebar .nav-scrollable {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* --- Override Bootstrap .flex-column to horizontal --- */
[data-layout="top-nav"] .sidebar .nav-scrollable nav.flex-column,
[data-layout="top-nav"] .sidebar nav.flex-column,
[data-layout="top-nav"] nav.flex-column {
    flex-direction: row !important;
}

[data-layout="top-nav"] .sidebar .nav-scrollable nav,
[data-layout="top-nav"] .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* --- Nav items inline --- */
[data-layout="top-nav"] .sidebar .nav-item {
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* --- Nav links horizontal — refined 2028 treatment --- */
[data-layout="top-nav"] .sidebar .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 1.5rem !important;
    color: var(--nav-text, rgba(255,255,255,0.55)) !important;
    font-size: 0.8125rem !important;
    font-weight: 420 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    height: 44px !important;
    line-height: 44px !important;
    transition: color 0.2s ease !important;
}

[data-layout="top-nav"] .sidebar .nav-link:hover {
    color: var(--nav-text-hover, rgba(255,255,255,0.9)) !important;
    background: none !important;
}

/* Active indicator — accent underline */
[data-layout="top-nav"] .sidebar .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: var(--accent-primary) !important;
    border-radius: 1px 1px 0 0 !important;
    transform: scaleX(0) !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-layout="top-nav"] .sidebar .nav-link:hover::after {
    transform: scaleX(0.5) !important;
    opacity: 0.4 !important;
}

[data-layout="top-nav"] .sidebar .nav-link.active {
    color: var(--nav-text-active, #fff) !important;
    font-weight: 500 !important;
    background: none !important;
}

[data-layout="top-nav"] .sidebar .nav-link.active::after {
    transform: scaleX(1) !important;
    opacity: 1 !important;
}

/* Override per-theme active pill backgrounds in top-nav mode */
[data-layout="top-nav"] .sidebar .nav-link.active,
[data-layout="top-nav"] .nav-link.active {
    background: none !important;
    box-shadow: none !important;
}

/* --- Hide icons in horizontal nav --- */
[data-layout="top-nav"] .sidebar .nav-link .icon,
[data-layout="top-nav"] .sidebar .nav-link i.icon,
[data-layout="top-nav"] .sidebar .nav-link i[class*="fa-"] {
    display: none !important;
}

/* --- Hide utility items (profile, admin, logout, spacer) --- */
[data-layout="top-nav"] .sidebar .nav-item:has(form),
[data-layout="top-nav"] .sidebar .nav-item:has([href*="Account"]),
[data-layout="top-nav"] .sidebar .nav-item:has([href*="Admin"]),
[data-layout="top-nav"] .sidebar .nav-item.flex-grow-1,
[data-layout="top-nav"] .sidebar .nav-item.mt-5,
[data-layout="top-nav"] .sidebar form {
    display: none !important;
}

/* --- Navbar toggler hidden on desktop --- */
[data-layout="top-nav"] .sidebar .navbar-toggler {
    display: none !important;
}

/* --- Main content below top nav --- */
[data-layout="top-nav"] main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* --- Header bar repositioned into top nav --- */
[data-layout="top-nav"] main > .top-header-bar {
    position: fixed !important;
    top: 0 !important;
    right: 1.25rem !important;
    left: auto !important;
    width: auto !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1002 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* --- Hide brand/search in header (already in sidebar bar) --- */
[data-layout="top-nav"] main > .top-header-bar .brand,
[data-layout="top-nav"] main > .top-header-bar .header-search {
    display: none !important;
}


/* ============================================================================
   THEME 1: OBSIDIAN
   Deep dark with subtle warmth, glass effects, maroon/crimson accents.
   Layout: sidebar (default).
   Tokens are already the :root defaults in tokens.css — this block exists
   only so the [data-theme="obsidian"] selector re-asserts them when switching
   away from another theme and back.
   ============================================================================ */

[data-theme="obsidian"] {
    /* Opt into floating-card content aesthetic for the dark luxury feel */
    --content-radius: var(--radius-xl);
    --content-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);

    --surface-0: #0a0a0c;
    --surface-1: #121215;
    --surface-2: #1a1a1f;
    --surface-3: #242429;
    --surface-4: #2e2e35;
    --surface-5: #38383f;

    --glass-bg: rgba(26, 26, 31, 0.6);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-tertiary: rgba(255, 255, 255, 0.48);
    --text-quaternary: rgba(255, 255, 255, 0.28);
    --text-inverse: #0a0a0c;

    --accent-primary: #8b1538;
    --accent-primary-hover: #a31c44;
    --accent-primary-subtle: rgba(139, 21, 56, 0.2);
    --accent-primary-glow: rgba(139, 21, 56, 0.4);

    --accent-secondary: #c41e3a;
    --accent-secondary-hover: #d42548;
    --accent-secondary-subtle: rgba(196, 30, 58, 0.15);

    --accent-success: #10b981;
    --accent-success-hover: #059669;
    --accent-success-subtle: rgba(16, 185, 129, 0.15);

    --accent-warning: #f59e0b;
    --accent-warning-hover: #d97706;
    --accent-warning-subtle: rgba(245, 158, 11, 0.15);

    --accent-danger: #ef4444;
    --accent-danger-hover: #dc2626;
    --accent-danger-subtle: rgba(239, 68, 68, 0.15);

    --accent-info: #3b82f6;
    --accent-info-hover: #2563eb;
    --accent-info-subtle: rgba(59, 130, 246, 0.15);

    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-accent: var(--accent-primary);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.45);
    --glow-primary: 0 0 30px var(--accent-primary-glow);

    --position-qb: #ef4444;
    --position-rb: #10b981;
    --position-wr: #3b82f6;
    --position-te: #a855f7;
    --position-k: #f59e0b;
    --position-def: #06b6d4;

    --font-display: 'Space Grotesk', Georgia, serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Obsidian Component Styles --- */

[data-theme="obsidian"] body {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(139, 21, 56, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(139, 21, 56, 0.04) 0%, transparent 40%),
        var(--surface-1);
}

[data-theme="obsidian"] .card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="obsidian"] .card:hover {
    border-color: rgba(139, 21, 56, 0.3) !important;
    box-shadow: var(--shadow-hover), var(--glow-primary) !important;
}

[data-theme="obsidian"] .sidebar {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-0) 100%) !important;
    border-right: 1px solid color-mix(in srgb, var(--glass-border, var(--border-default)) 80%, transparent) !important;
    box-shadow: 2px 0 16px color-mix(in srgb, #000 28%, transparent) !important;
}

[data-theme="obsidian"] .sidebar .top-row .navbar-brand img {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(139, 21, 56, 0.5));
}

[data-theme="obsidian"] .nav-link {
    border-radius: var(--radius-md) !important;
    margin: 0.25rem 0.75rem !important;
    transition: all 0.2s ease !important;
}

[data-theme="obsidian"] .nav-link:hover {
    background: var(--accent-primary-subtle) !important;
}

[data-theme="obsidian"] .nav-link.active,
[data-theme="obsidian"] .sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px var(--accent-primary-glow) !important;
}

[data-theme="obsidian"] .top-header-bar {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

[data-theme="obsidian"] .brand-logo {
    font-size: 0 !important;
    background: linear-gradient(135deg, #c41e3a 0%, #8b1538 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

[data-theme="obsidian"] .brand-logo::before {
    content: "DYNASTY";
    font-family: 'Space Grotesk', Georgia, serif;
    font-style: italic;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
    background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="obsidian"] .btn-primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 15px var(--accent-primary-glow) !important;
}

[data-theme="obsidian"] .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-primary-glow) !important;
}

[data-theme="obsidian"] .badge {
    border-radius: var(--radius-full) !important;
}

[data-theme="obsidian"] .badge.bg-primary {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
}

/* Obsidian forum styling */
[data-theme="obsidian"] .forums-shell-sidebar {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-0) 100%) !important;
}

[data-theme="obsidian"] .channel-button.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
}

[data-theme="obsidian"] .user-avatar,
[data-theme="obsidian"] .thread-avatar-placeholder,
[data-theme="obsidian"] [class*="avatar"] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
}

/* --- Obsidian Dashboard Depth (canvas tint only) --- */
[data-theme="obsidian"] .home-dashboard,
[data-theme="obsidian"] .app-dashboard {
    background:
        radial-gradient(ellipse at 15% 45%, rgba(139, 21, 56, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 25%, rgba(196, 30, 58, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 90%, rgba(139, 21, 56, 0.03) 0%, transparent 50%);
}

/* --- Obsidian Text Readability --- */

[data-theme="obsidian"] .dashboard-card-header .dashboard-card-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="obsidian"] .dashboard-card-header .dashboard-card-action {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="obsidian"] .dashboard-card-header .dashboard-card-action:hover {
    color: #c41e3a !important;
}

[data-theme="obsidian"] .topic-title,
[data-theme="obsidian"] .topic-list-item .topic-title {
    color: #ffffff !important;
}

[data-theme="obsidian"] .topic-list-item .topic-meta,
[data-theme="obsidian"] .topic-list-item .topic-last-activity {
    color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="obsidian"] .auction-player-name .auction-name-link {
    color: #ffffff !important;
}

[data-theme="obsidian"] .auction-bid-amount {
    color: #ffffff !important;
    font-weight: 700;
}

/* --- Obsidian Forums/Chat Dark Theme --- */

[data-theme="obsidian"] .forums-shell-container {
    background: var(--surface-1, #121215) !important;
}

[data-theme="obsidian"] .topics-panel,
[data-theme="obsidian"] .forums-shell-topics {
    background: var(--surface-1, #121215) !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="obsidian"] .topics-header {
    background: var(--surface-2, #1a1a1f) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="obsidian"] .topics-title {
    color: #ffffff !important;
}

[data-theme="obsidian"] .topics-count {
    color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="obsidian"] .topics-search {
    background: var(--surface-3, #242429) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="obsidian"] .topics-search-input {
    color: #ffffff !important;
}

[data-theme="obsidian"] .topics-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="obsidian"] .topic-item {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="obsidian"] .topic-item:hover {
    background: var(--surface-3, #242429) !important;
}

[data-theme="obsidian"] .topic-item.selected {
    background: rgba(139, 21, 56, 0.15) !important;
    border-left-color: #c41e3a !important;
}

[data-theme="obsidian"] .topic-title {
    color: #ffffff !important;
}

[data-theme="obsidian"] .topic-time {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="obsidian"] .topic-preview {
    color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="obsidian"] .topic-meta {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="obsidian"] .topic-meta-item {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="obsidian"] .topic-direct-link {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="obsidian"] .topic-direct-link:hover {
    color: #ffffff !important;
    background: var(--surface-4, #2e2e35) !important;
}

/* Messages panel */
[data-theme="obsidian"] .messages-panel {
    background: var(--surface-1, #121215) !important;
}

[data-theme="obsidian"] .messages-header {
    background: var(--surface-2, #1a1a1f) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="obsidian"] .messages-header-title {
    color: #ffffff !important;
}

[data-theme="obsidian"] .messages-header-description {
    color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="obsidian"] .header-action-btn {
    color: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="obsidian"] .header-action-btn:hover {
    background: var(--surface-3, #242429) !important;
    color: #ffffff !important;
}

[data-theme="obsidian"] .thread-message:hover {
    background: var(--surface-3, #242429) !important;
}

[data-theme="obsidian"] .thread-author {
    color: #ffffff !important;
}

[data-theme="obsidian"] .thread-timestamp {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="obsidian"] .thread-body {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="obsidian"] .message-actions {
    background: var(--surface-3, #242429) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="obsidian"] .message-action-btn {
    color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="obsidian"] .message-action-btn:hover {
    background: var(--surface-4, #2e2e35) !important;
    color: #ffffff !important;
}

/* Composer */
[data-theme="obsidian"] .message-composer {
    background: var(--surface-2, #1a1a1f) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="obsidian"] .composer-textarea {
    background: var(--surface-3, #242429) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="obsidian"] .composer-textarea:focus {
    border-color: #c41e3a !important;
    box-shadow: 0 0 0 1px #c41e3a !important;
}

[data-theme="obsidian"] .composer-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Reactions */
[data-theme="obsidian"] .thread-reaction {
    background: var(--surface-3, #242429) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="obsidian"] .thread-reaction:hover {
    background: var(--surface-4, #2e2e35) !important;
    border-color: #c41e3a !important;
}

[data-theme="obsidian"] .thread-reaction.user-reacted {
    background: rgba(139, 21, 56, 0.15) !important;
    border-color: #c41e3a !important;
    color: #c41e3a !important;
}

/* Forums sidebar (light variant) */
[data-theme="obsidian"] .forums-sidebar-light {
    background: var(--surface-2, #1a1a1f) !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

[data-theme="obsidian"] .forums-sidebar-light .forums-sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="obsidian"] .forums-sidebar-light .forums-sidebar-title {
    color: #ffffff !important;
}

[data-theme="obsidian"] .forums-sidebar-light .forums-sidebar-subtitle {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="obsidian"] .forums-sidebar-light .channel-button {
    color: rgba(255, 255, 255, 0.65) !important;
}

[data-theme="obsidian"] .forums-sidebar-light .channel-button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

[data-theme="obsidian"] .forums-sidebar-light .channel-button.active {
    background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%) !important;
    color: #ffffff !important;
}

[data-theme="obsidian"] .forums-sidebar-light .sidebar-section-header {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Empty states & dropdowns */
[data-theme="obsidian"] .empty-state {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="obsidian"] .empty-state-title {
    color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="obsidian"] .mod-dropdown-menu {
    background: var(--surface-3, #242429) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="obsidian"] .mod-dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="obsidian"] .mod-dropdown-item:hover {
    background: var(--surface-4, #2e2e35) !important;
}

[data-theme="obsidian"] .mod-dropdown-divider {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Badges on dark */
[data-theme="obsidian"] .topic-badge-auction {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

[data-theme="obsidian"] .reply-indicator {
    background: var(--surface-3, #242429) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Message content links */
[data-theme="obsidian"] .message-content a {
    color: #c41e3a !important;
}

[data-theme="obsidian"] .message-content blockquote {
    border-left-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="obsidian"] .message-content code {
    background: var(--surface-4, #2e2e35) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}


/* ============================================================================
   THEME 2: BRUTALIST
   Industrial aesthetic — raw concrete, sharp edges, bold burgundy accent.
   Layout: top-nav.
   ============================================================================ */

[data-theme="brutalist"] {
    --surface-0: #c8c8c8;
    --surface-1: #dcdcdc;
    --surface-2: #ebebeb;
    --surface-3: #f5f5f5;
    --surface-4: #b8b8b8;
    --surface-5: #a3a3a3;

    --text-primary: #111111;
    --text-secondary: #333333;
    --text-tertiary: #5a5a5a;
    --text-quaternary: #888888;
    --text-inverse: #ffffff;

    --accent-primary: #722f37;
    --accent-primary-hover: #8b3a44;
    --accent-primary-subtle: rgba(114, 47, 55, 0.15);
    --accent-primary-glow: rgba(114, 47, 55, 0.3);

    --accent-secondary: #a63d48;
    --accent-secondary-hover: #b84a56;
    --accent-secondary-subtle: rgba(166, 61, 72, 0.12);

    --accent-success: #2d5a3d;
    --accent-success-hover: #3d7050;
    --accent-success-subtle: rgba(45, 90, 61, 0.15);

    --accent-warning: #8b6914;
    --accent-warning-hover: #a07918;
    --accent-warning-subtle: rgba(139, 105, 20, 0.15);

    --accent-danger: #9b2c2c;
    --accent-danger-hover: #b33636;
    --accent-danger-subtle: rgba(155, 44, 44, 0.15);

    --accent-info: #2c5282;
    --accent-info-hover: #3666a0;
    --accent-info-subtle: rgba(44, 82, 130, 0.15);

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-default: rgba(0, 0, 0, 0.15);
    --border-strong: rgba(0, 0, 0, 0.3);
    --border-accent: var(--accent-primary);

    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-full: 0;

    --shadow-xs: 2px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.18);
    --shadow-md: 5px 5px 0 rgba(0, 0, 0, 0.22);
    --shadow-lg: 8px 8px 0 rgba(0, 0, 0, 0.25);
    --shadow-xl: 12px 12px 0 rgba(0, 0, 0, 0.28);
    --shadow-card: 5px 5px 0 rgba(0, 0, 0, 0.15);
    --shadow-hover: 8px 8px 0 rgba(0, 0, 0, 0.2);
    --glow-primary: none;

    --position-qb: #9b2c2c;
    --position-rb: #2d5a3d;
    --position-wr: #2c5282;
    --position-te: #6b3fa0;
    --position-k: #8b6914;
    --position-def: #1e6e7a;

    --font-display: 'Space Grotesk', Impact, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Brutalist Component Styles --- */

[data-theme="brutalist"] body {
    background: var(--surface-1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
    background-blend-mode: multiply;
    background-size: 200px;
}

[data-theme="brutalist"] .card {
    background: var(--surface-3) !important;
    border: 3px solid var(--text-primary) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="brutalist"] .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hover) !important;
}

[data-theme="brutalist"] .btn {
    border-radius: 0 !important;
    border: 1px solid var(--text-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

[data-theme="brutalist"] .btn-primary {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="brutalist"] .btn-primary:hover {
    background: var(--accent-secondary) !important;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--text-primary) !important;
}

[data-theme="brutalist"] .badge {
    border-radius: 0 !important;
    border: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

[data-theme="brutalist"] h1,
[data-theme="brutalist"] h2,
[data-theme="brutalist"] h3 {
    font-family: 'Space Grotesk', Impact, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* Brutalist brand — monospace industrial */
[data-theme="brutalist"] .brand-logo {
    font-size: 0 !important;
    color: var(--text-inverse) !important;
}

[data-theme="brutalist"] .brand-logo::before {
    content: "DYNASTY//DB";
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-inverse);
}

/* Brutalist avatars */
[data-theme="brutalist"] .user-avatar,
[data-theme="brutalist"] .thread-avatar-placeholder,
[data-theme="brutalist"] [class*="avatar"] {
    background: var(--accent-primary) !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Forum on brutalist */
[data-theme="brutalist"] .forums-shell-sidebar {
    background: var(--surface-4) !important;
    border-right: 1px solid var(--border-default) !important;
}

[data-theme="brutalist"] .channel-button {
    border-radius: 0 !important;
    border: none !important;
}

[data-theme="brutalist"] .channel-button.active,
[data-theme="brutalist"] .channel-button:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

/* Brutalist links and icons — burgundy, not blue */
[data-theme="brutalist"] a:not(.btn),
[data-theme="brutalist"] .btn-link {
    color: var(--accent-primary) !important;
}

[data-theme="brutalist"] a:not(.btn):hover,
[data-theme="brutalist"] .btn-link:hover {
    color: var(--accent-secondary) !important;
}

[data-theme="brutalist"] .card a,
[data-theme="brutalist"] .view-all-link {
    color: var(--accent-primary) !important;
}

/* Icons in body content — burgundy */
[data-theme="brutalist"] .fas,
[data-theme="brutalist"] .far,
[data-theme="brutalist"] .fa,
[data-theme="brutalist"] i[class*="fa-"] {
    color: var(--accent-primary);
}

/* Keep nav icons white */
[data-theme="brutalist"] .sidebar .fas,
[data-theme="brutalist"] .sidebar .far,
[data-theme="brutalist"] .sidebar i {
    color: var(--text-inverse) !important;
}

/* Badge colors — burgundy based */
[data-theme="brutalist"] .badge.bg-primary,
[data-theme="brutalist"] .badge.bg-info {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

/* Alert/info boxes */
[data-theme="brutalist"] .alert-info,
[data-theme="brutalist"] .alert-primary {
    background: var(--accent-primary-subtle) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* View All links */
[data-theme="brutalist"] [class*="view-all"],
[data-theme="brutalist"] .text-primary {
    color: var(--accent-primary) !important;
}

/* --- Brutalist Top-Nav Color Overrides --- */

[data-theme="brutalist"] .sidebar {
    background: var(--accent-primary) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}

[data-theme="brutalist"] .sidebar .top-row .navbar-brand img {
    filter: brightness(0) invert(1) drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3)) !important;
}

[data-theme="brutalist"] .sidebar .nav-link {
    padding: 0.875rem 1.25rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-inverse) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    font-size: 0.75rem !important;
}

[data-theme="brutalist"] .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="brutalist"] .sidebar .nav-link.active {
    background: var(--text-inverse) !important;
    color: var(--accent-primary) !important;
}

[data-theme="brutalist"] main {
    margin-top: 44px !important;
}

/* brutalist header height now inherited from shared 44px */

[data-theme="brutalist"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    color: var(--accent-primary) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

[data-theme="brutalist"] .theme-toggle-btn:hover {
    background: var(--text-inverse) !important;
}

[data-theme="brutalist"] .theme-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 0 !important;
}

[data-theme="brutalist"] .theme-option {
    color: var(--text-primary) !important;
}

[data-theme="brutalist"] .theme-option:hover {
    background: var(--accent-primary-subtle) !important;
}

[data-theme="brutalist"] .theme-option.active {
    color: var(--accent-primary) !important;
}

[data-theme="brutalist"] article.content {
    min-height: calc(100vh - 60px) !important;
}

/* --- Brutalist Sidebar Active --- */
[data-theme="brutalist"] .sidebar .nav-link.active,
[data-theme="brutalist"] .nav-link.active {
    background: #f8b500 !important;
    color: #111111 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}


/* ============================================================================
   THEME 3: VINTAGE
   70s/80s warm nostalgia — browns, cream, gold/orange accents.
   Soft corners, warm shadows, vintage typography.
   Layout: sidebar (default).
   ============================================================================ */

[data-theme="vintage"] {
    /* Vintage opts into floating-card for the warm magazine feel */
    --content-radius: var(--radius-lg);
    --content-shadow: -2px 0 10px rgba(61, 53, 48, 0.15);

    --surface-0: #3d3530;
    --surface-1: #4a3f38;
    --surface-2: #f5e6d3;
    --surface-3: #ecdcc6;
    --surface-4: #5a4d45;
    --surface-5: #6a5d52;

    --text-primary: #f5e6d3;
    --text-secondary: #d9c9b5;
    --text-tertiary: #b8a890;
    --text-quaternary: #9a8a72;
    --text-inverse: #3d3530;

    --accent-primary: #f8b500;
    --accent-primary-hover: #e5a800;
    --accent-primary-subtle: rgba(248, 181, 0, 0.2);
    --accent-primary-glow: rgba(248, 181, 0, 0.3);

    --accent-secondary: #e85d04;
    --accent-secondary-hover: #d64d00;
    --accent-secondary-subtle: rgba(232, 93, 4, 0.15);

    --accent-success: #5a8a5a;
    --accent-success-hover: #4a7a4a;
    --accent-success-subtle: rgba(90, 138, 90, 0.2);

    --accent-warning: #d4a017;
    --accent-warning-hover: #b8890f;
    --accent-warning-subtle: rgba(212, 160, 23, 0.2);

    --accent-danger: #c75050;
    --accent-danger-hover: #b04040;
    --accent-danger-subtle: rgba(199, 80, 80, 0.2);

    --accent-info: #5a8ab0;
    --accent-info-hover: #4a7a9a;
    --accent-info-subtle: rgba(90, 138, 176, 0.2);

    --border-subtle: rgba(245, 230, 211, 0.1);
    --border-default: rgba(245, 230, 211, 0.2);
    --border-strong: rgba(245, 230, 211, 0.4);
    --border-accent: var(--accent-primary);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    --shadow-xs: 0 2px 4px rgba(61, 53, 48, 0.2);
    --shadow-sm: 0 4px 8px rgba(61, 53, 48, 0.22);
    --shadow-md: 0 6px 16px rgba(61, 53, 48, 0.25);
    --shadow-lg: 0 10px 28px rgba(61, 53, 48, 0.28);
    --shadow-xl: 0 16px 44px rgba(61, 53, 48, 0.32);
    --shadow-card: 0 4px 16px rgba(61, 53, 48, 0.2);
    --shadow-hover: 0 8px 24px rgba(61, 53, 48, 0.25);
    --glow-primary: 0 0 25px var(--accent-primary-glow);

    --position-qb: #c75050;
    --position-rb: #5a8a5a;
    --position-wr: #f8b500;
    --position-te: #8a6ab0;
    --position-k: #e85d04;
    --position-def: #5a8ab0;

    --font-display: 'Space Grotesk', Impact, sans-serif;
    --font-body: 'DM Sans', cursive, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* --- Vintage Component Styles --- */

[data-theme="vintage"] body {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(248, 181, 0, 0.06) 0%, transparent 60%),
        var(--surface-0);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    background-size: 200px;
}

[data-theme="vintage"] .card {
    background: var(--surface-2) !important;
    border: none !important;
    border-left: 3px solid var(--accent-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .card-header {
    background: transparent !important;
    border-bottom: 2px solid rgba(61, 53, 48, 0.12) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .sidebar {
    background: var(--surface-1) !important;
    border-right: none !important;
}

[data-theme="vintage"] .sidebar .top-row .navbar-brand img {
    filter: sepia(0.3) brightness(1.05) drop-shadow(0 0 6px rgba(139, 69, 19, 0.4));
}

[data-theme="vintage"] .nav-link {
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    margin: 0.25rem 0.5rem !important;
}

[data-theme="vintage"] .nav-link:hover {
    background: var(--accent-primary-subtle) !important;
}

[data-theme="vintage"] .nav-link.active {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .top-header-bar {
    background: var(--surface-0) !important;
    border-bottom: none !important;
}

[data-theme="vintage"] .brand-logo {
    font-family: 'Space Grotesk', Impact, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: var(--accent-primary) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: 0 0 20px rgba(248, 181, 0, 0.3);
}

[data-theme="vintage"] .btn-primary {
    background: var(--accent-secondary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: var(--surface-2) !important;
}

[data-theme="vintage"] .btn-primary:hover {
    background: var(--accent-secondary-hover) !important;
}

[data-theme="vintage"] .badge {
    border-radius: var(--radius-full) !important;
}

[data-theme="vintage"] .badge.bg-primary,
[data-theme="vintage"] .badge.bg-warning {
    background: var(--accent-secondary) !important;
    color: var(--surface-2) !important;
}

/* Vintage avatars */
[data-theme="vintage"] .user-avatar,
[data-theme="vintage"] .thread-avatar-placeholder,
[data-theme="vintage"] [class*="avatar"] {
    background: var(--accent-secondary) !important;
}

/* Vintage forum styling */
[data-theme="vintage"] .forums-shell-sidebar {
    background: var(--surface-1) !important;
}

[data-theme="vintage"] .forums-shell-messages,
[data-theme="vintage"] .messages-panel,
[data-theme="vintage"] .topics-panel {
    background: var(--surface-2) !important;
}

[data-theme="vintage"] .thread-message,
[data-theme="vintage"] .thread-content,
[data-theme="vintage"] .thread-body,
[data-theme="vintage"] .message-content,
[data-theme="vintage"] .topic-item,
[data-theme="vintage"] .topic-title,
[data-theme="vintage"] .messages-header,
[data-theme="vintage"] .messages-header-title {
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .channel-button.active,
[data-theme="vintage"] .channel-button:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .card a {
    color: var(--accent-secondary) !important;
}

[data-theme="vintage"] .card a:hover {
    color: var(--accent-secondary-hover) !important;
}

/* Vintage links and icons — gold/orange, not blue */
[data-theme="vintage"] a:not(.btn),
[data-theme="vintage"] .btn-link {
    color: var(--accent-secondary) !important;
}

[data-theme="vintage"] a:not(.btn):hover,
[data-theme="vintage"] .btn-link:hover {
    color: var(--accent-secondary-hover) !important;
}

/* All icons use gold/orange */
[data-theme="vintage"] .fas,
[data-theme="vintage"] .far,
[data-theme="vintage"] .fa,
[data-theme="vintage"] i[class*="fa-"] {
    color: var(--accent-primary);
}

/* Keep nav icons cream for contrast */
[data-theme="vintage"] .sidebar .fas,
[data-theme="vintage"] .sidebar .far,
[data-theme="vintage"] .sidebar i,
[data-theme="vintage"] .nav-link i {
    color: var(--text-primary) !important;
}

[data-theme="vintage"] .nav-link.active .fas,
[data-theme="vintage"] .nav-link.active .far,
[data-theme="vintage"] .nav-link.active i {
    color: var(--text-inverse) !important;
}

/* View all links */
[data-theme="vintage"] .view-all-link,
[data-theme="vintage"] [class*="view-all"],
[data-theme="vintage"] .text-primary {
    color: var(--accent-secondary) !important;
}

/* Badges — gold/orange based */
[data-theme="vintage"] .badge.bg-info,
[data-theme="vintage"] .badge.bg-primary {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

/* Alert/info boxes */
[data-theme="vintage"] .alert-info,
[data-theme="vintage"] .alert-primary {
    background: var(--accent-primary-subtle) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-secondary) !important;
}

/* Live indicator keeps its own styling */
[data-theme="vintage"] .live-indicator {
    color: #fff !important;
}

/* Vintage bolder identity */
[data-theme="vintage"] .btn-primary {
    border-radius: 9999px !important;
    padding: 0.5rem 1.5rem !important;
}

/* Vintage theme dropdown — cream surface needs dark text, not cream-on-cream */
[data-theme="vintage"] .theme-toggle-btn {
    background: var(--surface-2) !important;
    border: 1px solid rgba(61, 53, 48, 0.15) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .theme-toggle-btn:hover {
    background: var(--surface-3) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .theme-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid rgba(61, 53, 48, 0.15) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-theme="vintage"] .theme-option {
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .theme-option i:first-child {
    color: rgba(61, 53, 48, 0.5) !important;
}

[data-theme="vintage"] .theme-option:hover {
    background: var(--surface-3) !important;
    color: var(--text-inverse) !important;
}

[data-theme="vintage"] .theme-option.active {
    color: var(--accent-secondary) !important;
}

[data-theme="vintage"] .theme-option.active i:first-child {
    color: var(--accent-secondary) !important;
}

/* --- Vintage Sidebar Active --- */
[data-theme="vintage"] .sidebar .nav-link.active,
[data-theme="vintage"] .nav-link.active {
    background: linear-gradient(135deg, #722f37 0%, #8b4513 100%) !important;
    color: #f5e6d3 !important;
    box-shadow: 0 4px 12px rgba(114, 47, 55, 0.35) !important;
}


/* ============================================================================
   THEME 4: DAYLIGHT
   Clean professional dashboard — whites, subtle colors, data-focused.
   Minimal shadows, clear hierarchy.
   Layout: sidebar (default).
   ============================================================================ */

[data-theme="daylight"] {
    /* macOS Light Mode surfaces — sidebar slightly cooler than canvas */
    --surface-0: #ffffff;
    --surface-1: #f5f5f7;
    --surface-2: #ffffff;
    --surface-3: #f0f0f2;
    --surface-4: #e5e5ea;
    --surface-5: #d1d1d6;

    --text-primary: #1a1612;
    --text-secondary: #3d352e;
    --text-tertiary: #6b6259;
    --text-quaternary: #9a9189;
    --text-inverse: #ffffff;

    --accent-primary: #4f46e5;
    --accent-primary-hover: #4338ca;
    --accent-primary-subtle: rgba(79, 70, 229, 0.1);
    --accent-primary-glow: rgba(79, 70, 229, 0.18);

    --accent-secondary: #0891b2;
    --accent-secondary-hover: #0e7490;
    --accent-secondary-subtle: rgba(8, 145, 178, 0.1);

    --accent-success: #22c55e;
    --accent-success-hover: #16a34a;
    --accent-success-subtle: rgba(34, 197, 94, 0.1);

    --accent-warning: #f59e0b;
    --accent-warning-hover: #d97706;
    --accent-warning-subtle: rgba(245, 158, 11, 0.1);

    --accent-danger: #ef4444;
    --accent-danger-hover: #dc2626;
    --accent-danger-subtle: rgba(239, 68, 68, 0.1);

    --accent-info: #6366f1;
    --accent-info-hover: #4f46e5;
    --accent-info-subtle: rgba(99, 102, 241, 0.1);

    /* macOS-style cool gray borders */
    --border-subtle: rgba(60, 60, 67, 0.06);
    --border-default: rgba(60, 60, 67, 0.12);
    --border-strong: rgba(60, 60, 67, 0.2);
    --border-accent: var(--accent-primary);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(30, 20, 10, 0.05);
    --shadow-sm: 0 1px 4px rgba(30, 20, 10, 0.07);
    --shadow-md: 0 4px 8px rgba(30, 20, 10, 0.08);
    --shadow-lg: 0 10px 20px rgba(30, 20, 10, 0.1);
    --shadow-xl: 0 20px 30px rgba(30, 20, 10, 0.12);
    --shadow-card: 0 1px 4px rgba(30, 20, 10, 0.06), 0 4px 16px rgba(30, 20, 10, 0.03);
    --shadow-hover: 0 8px 24px rgba(30, 20, 10, 0.1);
    --glow-primary: 0 0 0 3px var(--accent-primary-subtle);

    /* macOS sidebar tokens */
    --sidebar-text: #1a1612;
    --sidebar-text-hover: #1a1612;
    --sidebar-active-text: #ffffff;
    --sidebar-hover: rgba(60, 60, 67, 0.08);
    --sidebar-active-bg: var(--accent-primary);

    --position-qb: #dc2626;
    --position-rb: #16a34a;
    --position-wr: #4f46e5;
    --position-te: #9333ea;
    --position-k: #d97706;
    --position-def: #0891b2;

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Daylight Component Styles --- */

[data-theme="daylight"] body,
[data-theme="daylight"] .page {
    background: var(--surface-0);
}

[data-theme="daylight"] article.content {
    background-color: var(--surface-0) !important;
    box-shadow: none !important;
    border-top-left-radius: 0 !important;
}

[data-theme="daylight"] main {
    background: var(--surface-0) !important;
}

[data-theme="daylight"] .card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="daylight"] .card:hover {
    box-shadow: var(--shadow-hover) !important;
}

[data-theme="daylight"] .sidebar {
    background: var(--surface-1) !important;
    border-right: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

/* Daylight uses the helmet logo as-is, no filter */

/* Daylight nav — macOS Settings style: subtle, no glow */
[data-theme="daylight"] .sidebar .nav-link {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    margin: 1px 8px !important;
    padding: 6px 10px !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0 !important;
}

[data-theme="daylight"] .sidebar .nav-link:hover {
    background: rgba(60, 60, 67, 0.08) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

[data-theme="daylight"] .sidebar .nav-link.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

[data-theme="daylight"] .sidebar .nav-link.active i,
[data-theme="daylight"] .sidebar .nav-link.active .fas {
    color: #ffffff !important;
}

[data-theme="daylight"] .top-header-bar {
    background: #fdfcfa !important;
    border-bottom: 1px solid rgba(30, 20, 10, 0.08) !important;
    box-shadow: 0 1px 4px rgba(30, 20, 10, 0.03) !important;
}

/* Daylight brand — editorial weight */
[data-theme="daylight"] .brand-logo {
    color: #1a1612 !important;
    -webkit-text-fill-color: #1a1612 !important;
    background: none !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

[data-theme="daylight"] .btn-primary {
    background: var(--accent-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
}

[data-theme="daylight"] .btn-primary:hover {
    background: var(--accent-primary-hover) !important;
}

[data-theme="daylight"] .badge {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
}

/* Daylight avatars */
[data-theme="daylight"] .user-avatar,
[data-theme="daylight"] .thread-avatar-placeholder,
[data-theme="daylight"] [class*="avatar"] {
    background: var(--accent-primary) !important;
}

/* Daylight forum styling */
[data-theme="daylight"] .forums-shell-sidebar {
    background: var(--surface-2) !important;
    border-right: 1px solid var(--border-default) !important;
}

[data-theme="daylight"] .channel-button.active,
[data-theme="daylight"] .channel-button:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="daylight"] .forums-shell-messages,
[data-theme="daylight"] .messages-panel,
[data-theme="daylight"] .topics-panel {
    background: var(--surface-2) !important;
}

/* Daylight bolder identity */
[data-theme="daylight"] .brand-logo {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

[data-theme="daylight"] .brand-logo::before {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 800;
}

[data-theme="daylight"] h1,
[data-theme="daylight"] h2,
[data-theme="daylight"] h3 {
    font-weight: 700 !important;
}

/* Daylight sidebar active state is handled in the main nav-link block above */


/* ============================================================================
   THEME 5: CLASSIC — Two-Tone Editorial
   Dark navy chrome (sidebar/header) on light content pages.
   Think Bloomberg Terminal meets The New York Times meets Apple Pages.
   Electric blue + gold accents. DM Sans body + Roboto Slab display.
   Works in either layout (vertical sidebar or horizontal top-nav).
   ============================================================================ */

[data-theme="classic"] {
    /* LIGHT content surfaces — the "paper" */
    --surface-0: #fafaf8;
    --surface-1: #ffffff;
    --surface-2: #f4f4f0;
    --surface-3: #eaeae4;
    --surface-4: #dcdcd4;
    --surface-5: #c4c4bc;

    /* DARK text for light content */
    --text-primary: #0a1322;
    --text-secondary: #2d3b52;
    --text-tertiary: #5a6d82;
    --text-quaternary: #8a9aab;
    --text-inverse: #ffffff;

    /* Accents — electric blue primary + warm gold secondary */
    --accent-primary: #1e6fd9;
    --accent-primary-hover: #1760c2;
    --accent-primary-subtle: rgba(30, 111, 217, 0.1);
    --accent-primary-glow: rgba(30, 111, 217, 0.25);

    --accent-secondary: #c17d0f;
    --accent-secondary-hover: #a86a0a;
    --accent-secondary-subtle: rgba(193, 125, 15, 0.1);

    /* States */
    --accent-success: #2a7a44;
    --accent-success-hover: #1f6535;
    --accent-success-subtle: rgba(42, 122, 68, 0.1);

    --accent-warning: #c17d0f;
    --accent-warning-hover: #a86a0a;
    --accent-warning-subtle: rgba(193, 125, 15, 0.12);

    --accent-danger: #c43040;
    --accent-danger-hover: #a82030;
    --accent-danger-subtle: rgba(196, 48, 64, 0.1);

    --accent-info: #1e6fd9;
    --accent-info-hover: #1760c2;
    --accent-info-subtle: rgba(30, 111, 217, 0.1);

    /* Borders — cool gray like newspaper rules */
    --border-subtle: rgba(10, 19, 34, 0.06);
    --border-default: rgba(10, 19, 34, 0.12);
    --border-strong: rgba(10, 19, 34, 0.2);
    --border-accent: var(--accent-primary);

    /* DARK sidebar/chrome — the "masthead" */
    --sidebar-bg: #0a1322;
    --sidebar-text: rgba(205, 213, 226, 0.72);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(30, 111, 217, 0.3);
    --sidebar-active-text: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.06);

    /* Header bar — dark navy matching sidebar */
    --header-bg: #0a1322;
    --header-text: #ffffff;

    /* No floating-card radius — the two-tone divide is the visual interest */
    --content-radius: 0;
    --content-shadow: none;

    /* Nav tokens for top-nav layout */
    --nav-text: rgba(205, 213, 226, 0.72);
    --nav-text-hover: #ffffff;
    --nav-text-active: #ffffff;

    /* Typography — editorial */
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Roboto Slab', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Classic body + canvas: light paper --- */
[data-theme="classic"] body,
[data-theme="classic"] .page,
[data-theme="classic"] main {
    background: var(--surface-0) !important;
    color: var(--text-primary);
}

[data-theme="classic"] article.content {
    background: var(--surface-0) !important;
    color: var(--text-primary);
}

[data-theme="classic"] .home-dashboard {
    background: var(--surface-0) !important;
}

/* --- Headings — editorial serif with a rule below h2 (newspaper style) --- */
[data-theme="classic"] h1,
[data-theme="classic"] h2,
[data-theme="classic"] h3,
[data-theme="classic"] h4 {
    font-family: var(--font-display);
    color: var(--text-primary);
    letter-spacing: 0;
}

[data-theme="classic"] h2 {
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 0.5rem;
}

/* --- Links — electric blue --- */
[data-theme="classic"] a {
    color: var(--accent-primary);
    transition: color 0.15s ease;
}

[data-theme="classic"] a:hover {
    color: var(--accent-primary-hover);
}

/* --- Dark navy sidebar (chrome) --- */
[data-theme="classic"] .sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid #000 !important;
}

[data-theme="classic"] .sidebar .nav-link {
    color: var(--sidebar-text) !important;
    font-family: var(--font-body);
    font-weight: 500;
}

[data-theme="classic"] .sidebar .nav-link:hover {
    background: var(--sidebar-hover) !important;
    color: var(--sidebar-text-hover) !important;
}

[data-theme="classic"] .sidebar .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 600;
    border-left: 3px solid var(--accent-secondary);
    padding-left: calc(14px - 3px) !important;
    box-shadow: none !important;
}

[data-theme="classic"] .sidebar .nav-link i {
    color: rgba(205, 213, 226, 0.6) !important;
}

[data-theme="classic"] .sidebar .nav-link.active i {
    color: var(--accent-secondary) !important;
}

[data-theme="classic"] .sidebar .navbar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem;
}

/* --- Top header bar — dark navy to match sidebar in both layouts --- */
[data-theme="classic"] .top-header-bar {
    background: var(--header-bg) !important;
    border-bottom: 1px solid #000 !important;
    backdrop-filter: none !important;
    color: var(--header-text) !important;
}

[data-theme="classic"] .header-nav-item {
    color: rgba(205, 213, 226, 0.72) !important;
}

[data-theme="classic"] .header-nav-item:hover {
    color: #ffffff !important;
}

/* --- Brand logo — gold serif wordmark --- */
[data-theme="classic"] .brand-logo {
    color: var(--accent-secondary) !important;
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.4rem !important;
}

/* --- Buttons — electric blue primary --- */
[data-theme="classic"] .btn-primary,
[data-theme="classic"] button.btn-primary {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
}

[data-theme="classic"] .btn-primary:hover {
    background: var(--accent-primary-hover) !important;
    border-color: var(--accent-primary-hover) !important;
}

/* --- Cards on light canvas --- */
[data-theme="classic"] .card {
    background: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: 0 1px 3px rgba(10, 19, 34, 0.04);
}

/* --- Tables — editorial alternating rows --- */
[data-theme="classic"] table {
    color: var(--text-primary);
    background: transparent !important;
}

[data-theme="classic"] table thead th {
    background: var(--surface-2) !important;
    color: var(--text-tertiary) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0;
    border-bottom: 2px solid var(--accent-primary) !important;
}

[data-theme="classic"] table tbody tr {
    border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="classic"] table tbody tr:hover {
    background: var(--accent-primary-subtle) !important;
}

/* --- Form controls on light canvas --- */
[data-theme="classic"] .form-control,
[data-theme="classic"] input.form-control {
    background: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="classic"] .form-control:focus {
    background: #ffffff !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-subtle) !important;
}

/* --- Login — keep navy chrome + light form panel --- */
[data-theme="classic"] .login-page {
    background: var(--surface-0);
}

[data-theme="classic"] .login-brand {
    background: var(--sidebar-bg);
}

[data-theme="classic"] .login-brand-title,
[data-theme="classic"] .login-brand-tagline {
    color: #ffffff;
}

[data-theme="classic"] .login-brand-watermark {
    color: #ffffff;
    opacity: 0.04;
}

[data-theme="classic"] .login-brand-accent {
    color: var(--accent-secondary);
    font-style: italic;
}

[data-theme="classic"] .login-form-side {
    background: var(--surface-0);
}


/* ============================================================================
   THEME 6: CORAL
   Anthropic-inspired — soft warm coral/peach on light background.
   Clean typography, airy feel, friendly and approachable.
   Layout: top-nav.
   ============================================================================ */

[data-theme="coral"] {
    --surface-0: #fdf8f6;
    --surface-1: #f9f2ee;
    --surface-2: #ffffff;
    --surface-3: #fdf8f6;
    --surface-4: #f0e6df;
    --surface-5: #e0d4cb;

    --text-primary: #1f1a17;
    --text-secondary: #4a4340;
    --text-tertiary: #7a716b;
    --text-quaternary: #a89f98;
    --text-inverse: #ffffff;

    --accent-primary: #e0654a;
    --accent-primary-hover: #d45438;
    --accent-primary-subtle: rgba(224, 101, 74, 0.12);
    --accent-primary-glow: rgba(224, 101, 74, 0.25);

    --accent-secondary: #f09070;
    --accent-secondary-hover: #e88060;
    --accent-secondary-subtle: rgba(240, 144, 112, 0.12);

    --accent-success: #5a9a6e;
    --accent-success-hover: #4a8a5e;
    --accent-success-subtle: rgba(90, 154, 110, 0.12);

    --accent-warning: #d4a04e;
    --accent-warning-hover: #c5913d;
    --accent-warning-subtle: rgba(212, 160, 78, 0.12);

    --accent-danger: #c75a5a;
    --accent-danger-hover: #b84a4a;
    --accent-danger-subtle: rgba(199, 90, 90, 0.12);

    --accent-info: #5a8ab0;
    --accent-info-hover: #4a7aa0;
    --accent-info-subtle: rgba(90, 138, 176, 0.12);

    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);
    --border-accent: var(--accent-primary);

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 3px rgba(224, 101, 74, 0.04);
    --shadow-sm: 0 2px 6px rgba(31, 26, 23, 0.05);
    --shadow-md: 0 4px 12px rgba(31, 26, 23, 0.06);
    --shadow-lg: 0 8px 24px rgba(31, 26, 23, 0.08);
    --shadow-xl: 0 16px 40px rgba(31, 26, 23, 0.1);
    --shadow-card: 0 2px 12px rgba(31, 26, 23, 0.05);
    --shadow-hover: 0 8px 24px rgba(224, 101, 74, 0.08);
    --glow-primary: 0 0 0 3px var(--accent-primary-subtle);

    --position-qb: #c75a5a;
    --position-rb: #5a9a6e;
    --position-wr: #e0654a;
    --position-te: #8a6ab0;
    --position-k: #d4a04e;
    --position-def: #5a8ab0;

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Coral Component Styles --- */

[data-theme="coral"] body {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(240, 144, 112, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(224, 101, 74, 0.04) 0%, transparent 45%),
        var(--surface-1);
}

[data-theme="coral"] .card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="coral"] .card:hover {
    box-shadow: var(--shadow-hover) !important;
}

[data-theme="coral"] .sidebar {
    background: var(--accent-primary) !important;
}

[data-theme="coral"] .nav-link {
    color: var(--text-inverse) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
}

[data-theme="coral"] .nav-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="coral"] .nav-link.active {
    background: var(--text-inverse) !important;
    color: var(--accent-primary) !important;
}

[data-theme="coral"] .top-header-bar {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

/* Coral nav text — dark on light background */
[data-theme="coral"] .sidebar .nav-link {
    --nav-text: rgba(80, 50, 40, 0.5) !important;
    --nav-text-hover: rgba(80, 50, 40, 0.85) !important;
    --nav-text-active: #3d2520 !important;
}

[data-theme="coral"] .header-nav-item {
    color: rgba(80, 50, 40, 0.5) !important;
}

[data-theme="coral"] .header-nav-item:hover {
    color: rgba(80, 50, 40, 0.85) !important;
}

/* Coral brand — warm serif */
[data-theme="coral"] .brand-logo {
    font-size: 0 !important;
}

[data-theme="coral"] .brand-logo::before {
    content: "dynasty";
    font-size: 1.3rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    color: var(--text-inverse);
    text-transform: none;
}

[data-theme="coral"] .btn-primary {
    background: var(--accent-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
}

[data-theme="coral"] .btn-primary:hover {
    background: var(--accent-primary-hover) !important;
}

[data-theme="coral"] .badge {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
}

/* Coral avatars */
[data-theme="coral"] .user-avatar,
[data-theme="coral"] .thread-avatar-placeholder,
[data-theme="coral"] [class*="avatar"] {
    background: var(--accent-primary) !important;
}

/* Coral forum styling */
[data-theme="coral"] .forums-shell-sidebar {
    background: var(--surface-2) !important;
    border-right: 1px solid var(--border-default) !important;
}

[data-theme="coral"] .channel-button.active,
[data-theme="coral"] .channel-button:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="coral"] .forums-shell-messages,
[data-theme="coral"] .messages-panel,
[data-theme="coral"] .topics-panel {
    background: var(--surface-2) !important;
}

/* --- Coral Top-Nav Color Overrides --- */

[data-theme="coral"] .sidebar {
    background: linear-gradient(135deg, #e0654a 0%, #d45438 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="coral"] .sidebar .top-row .navbar-brand img {
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(224, 101, 74, 0.4)) !important;
}

[data-theme="coral"] .sidebar .nav-link {
    padding: 0.75rem 1rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-inverse) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
}

[data-theme="coral"] .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

[data-theme="coral"] .sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--accent-primary) !important;
    font-weight: 600 !important;
}

[data-theme="coral"] main {
    margin-top: 44px !important;
}

/* coral header height now inherited from shared 44px */

[data-theme="coral"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: var(--text-inverse) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
}

[data-theme="coral"] .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

[data-theme="coral"] .theme-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}

[data-theme="coral"] .theme-option {
    color: var(--text-primary) !important;
}

[data-theme="coral"] .theme-option:hover {
    background: var(--accent-primary-subtle) !important;
}

[data-theme="coral"] .theme-option.active {
    color: var(--accent-primary) !important;
}

[data-theme="coral"] article.content {
    min-height: calc(100vh - 56px) !important;
}

/* Coral bolder identity */
[data-theme="coral"] .btn-primary {
    border-radius: 9999px !important;
    padding: 0.5rem 1.5rem !important;
}

/* --- Coral Sidebar Active --- */
[data-theme="coral"] .sidebar .nav-link.active,
[data-theme="coral"] .nav-link.active {
    background: linear-gradient(135deg, #e0654a 0%, #f09070 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(224, 101, 74, 0.3) !important;
}


/* ============================================================================
   THEME 7: NORD
   Arctic cool blues — calm, minimal Scandinavian aesthetic.
   Inspired by VS Code Nord theme.
   Layout: top-nav.
   ============================================================================ */

[data-theme="nord"] {
    --surface-0: #2e3440;
    --surface-1: #3b4252;
    --surface-2: #434c5e;
    --surface-3: #4c566a;
    --surface-4: #596577;
    --surface-5: #656f83;

    --text-primary: #eceff4;
    --text-secondary: #e5e9f0;
    --text-tertiary: #d8dee9;
    --text-quaternary: #a5b1c2;
    --text-inverse: #2e3440;

    --accent-primary: #88c0d0;
    --accent-primary-hover: #8fbccc;
    --accent-primary-subtle: rgba(136, 192, 208, 0.2);
    --accent-primary-glow: rgba(136, 192, 208, 0.3);

    --accent-secondary: #81a1c1;
    --accent-secondary-hover: #7696b5;
    --accent-secondary-subtle: rgba(129, 161, 193, 0.2);

    --accent-success: #a3be8c;
    --accent-success-hover: #98b37f;
    --accent-success-subtle: rgba(163, 190, 140, 0.2);

    --accent-warning: #ebcb8b;
    --accent-warning-hover: #e0c07d;
    --accent-warning-subtle: rgba(235, 203, 139, 0.2);

    --accent-danger: #bf616a;
    --accent-danger-hover: #b3555e;
    --accent-danger-subtle: rgba(191, 97, 106, 0.2);

    --accent-info: #b48ead;
    --accent-info-hover: #a882a1;
    --accent-info-subtle: rgba(180, 142, 173, 0.2);

    --border-subtle: rgba(236, 239, 244, 0.06);
    --border-default: rgba(236, 239, 244, 0.1);
    --border-strong: rgba(236, 239, 244, 0.18);
    --border-accent: var(--accent-primary);

    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.28);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.32);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.25);
    --glow-primary: 0 0 20px var(--accent-primary-glow);

    --position-qb: #bf616a;
    --position-rb: #a3be8c;
    --position-wr: #88c0d0;
    --position-te: #b48ead;
    --position-k: #ebcb8b;
    --position-def: #81a1c1;

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Nord Component Styles --- */

[data-theme="nord"] body {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(180, 142, 173, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 10%, rgba(136, 192, 208, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(163, 190, 140, 0.04) 0%, transparent 50%),
        var(--surface-0);
}

[data-theme="nord"] .card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

[data-theme="nord"] .card:hover {
    border-color: rgba(136, 192, 208, 0.2) !important;
    box-shadow: var(--shadow-hover), 0 0 20px rgba(136, 192, 208, 0.06) !important;
}

[data-theme="nord"] .sidebar {
    background: var(--surface-0) !important;
    border-right: 1px solid var(--border-default) !important;
}

[data-theme="nord"] .nav-link {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
}

[data-theme="nord"] .nav-link:hover {
    background: var(--accent-primary-subtle) !important;
    color: var(--accent-primary) !important;
}

[data-theme="nord"] .nav-link.active {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="nord"] .top-header-bar {
    background: var(--surface-0) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

/* Nord brand — arctic serif */
[data-theme="nord"] .brand-logo {
    font-size: 0 !important;
}

[data-theme="nord"] .brand-logo::before {
    content: "DYNASTY";
    font-size: 1rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow: 0 0 20px rgba(136, 192, 208, 0.3);
}

[data-theme="nord"] .btn-primary {
    background: var(--accent-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
    color: var(--text-inverse) !important;
}

[data-theme="nord"] .btn-primary:hover {
    background: var(--accent-primary-hover) !important;
    box-shadow: var(--glow-primary) !important;
}

[data-theme="nord"] .badge {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
}

/* Nord avatars */
[data-theme="nord"] .user-avatar,
[data-theme="nord"] .thread-avatar-placeholder,
[data-theme="nord"] [class*="avatar"] {
    background: var(--accent-secondary) !important;
}

/* Nord forum styling */
[data-theme="nord"] .forums-shell-sidebar {
    background: var(--surface-0) !important;
    border-right: 1px solid var(--border-default) !important;
}

[data-theme="nord"] .channel-button.active,
[data-theme="nord"] .channel-button:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="nord"] .forums-shell-messages,
[data-theme="nord"] .messages-panel,
[data-theme="nord"] .topics-panel {
    background: var(--surface-2) !important;
}

/* --- Nord Top-Nav Color Overrides --- */

[data-theme="nord"] .sidebar {
    background: var(--surface-0) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

[data-theme="nord"] .sidebar .top-row .navbar-brand img {
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(136, 192, 208, 0.4)) !important;
}

[data-theme="nord"] .sidebar .nav-scrollable nav,
[data-theme="nord"] .sidebar nav {
    gap: 0.25rem !important;
}

[data-theme="nord"] .sidebar .nav-link {
    padding: 0.625rem 0.875rem !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    margin: 0.25rem 0 !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}

[data-theme="nord"] .sidebar .nav-link:hover {
    background: var(--accent-primary-subtle) !important;
    color: var(--accent-primary) !important;
}

[data-theme="nord"] .sidebar .nav-link.active {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

[data-theme="nord"] main {
    margin-top: 44px !important;
}

/* nord header height now inherited from shared 44px */

[data-theme="nord"] .theme-toggle-btn {
    background: var(--surface-3) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
}

[data-theme="nord"] .theme-toggle-btn:hover {
    background: var(--accent-primary-subtle) !important;
    color: var(--accent-primary) !important;
}

[data-theme="nord"] .theme-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}

[data-theme="nord"] .theme-option {
    color: var(--text-primary) !important;
}

[data-theme="nord"] .theme-option:hover {
    background: var(--accent-primary-subtle) !important;
}

[data-theme="nord"] .theme-option.active {
    color: var(--accent-primary) !important;
}

[data-theme="nord"] article.content {
    min-height: calc(100vh - 52px) !important;
}

/* Nord bolder identity */
[data-theme="nord"] .sidebar .nav-link {
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

[data-theme="nord"] .stat-value {
    font-family: var(--font-mono) !important;
}

/* --- Nord Sidebar Active --- */
[data-theme="nord"] .sidebar .nav-link.active,
[data-theme="nord"] .nav-link.active {
    background: #88c0d0 !important;
    color: #2e3440 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(136, 192, 208, 0.25) !important;
}


/* ============================================================================
   THEME 8: MIDNIGHT
   Modern 2026/2027 — pure black canvas, electric indigo, refined sans.
   Editorial dark for the discerning operator. Sidebar layout.
   Inspired by Linear, Vercel, Raycast, and Apple's modern dark surfaces.
   ============================================================================ */

[data-theme="midnight"] {
    /* macOS Dark Mode surfaces —
       surface-0 is the canvas (lighter than the sidebar in macOS Settings),
       surface-1 is the sidebar (the recessed panel feel) */
    --surface-0: #1e1e1e;
    --surface-1: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --surface-4: #48484a;
    --surface-5: #636366;

    /* Glass — for layered translucent panels */
    --glass-bg: rgba(19, 19, 24, 0.72);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Text — cool refined off-whites */
    --text-primary: #f4f4f8;
    --text-secondary: rgba(244, 244, 248, 0.75);
    --text-tertiary: rgba(244, 244, 248, 0.5);
    --text-quaternary: rgba(244, 244, 248, 0.32);
    --text-inverse: #08080a;

    /* Accent primary — electric indigo */
    --accent-primary: #6366ff;
    --accent-primary-hover: #7c7eff;
    --accent-primary-subtle: rgba(99, 102, 255, 0.12);
    --accent-primary-glow: rgba(99, 102, 255, 0.4);

    /* Accent secondary — cool cyan */
    --accent-secondary: #22d3ee;
    --accent-secondary-hover: #38ddf5;
    --accent-secondary-subtle: rgba(34, 211, 238, 0.12);

    /* States — refined modern */
    --accent-success: #10b981;
    --accent-success-hover: #34d399;
    --accent-success-subtle: rgba(16, 185, 129, 0.12);

    --accent-warning: #f59e0b;
    --accent-warning-hover: #fbbf24;
    --accent-warning-subtle: rgba(245, 158, 11, 0.12);

    --accent-danger: #f43f5e;
    --accent-danger-hover: #fb7185;
    --accent-danger-subtle: rgba(244, 63, 94, 0.12);

    --accent-info: #06b6d4;
    --accent-info-hover: #22d3ee;
    --accent-info-subtle: rgba(6, 182, 212, 0.12);

    /* Borders — minimal, almost invisible */
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-accent: var(--accent-primary);

    /* Sharp modern radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-full: 9999px;

    /* Shadows — minimal, refined */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.65);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 24px var(--accent-primary-glow);

    /* Position colors — vibrant modern */
    --position-qb: #f43f5e;
    --position-rb: #10b981;
    --position-wr: #6366ff;
    --position-te: #a855f7;
    --position-k: #f59e0b;
    --position-def: #06b6d4;

    /* macOS Dark sidebar tokens */
    --sidebar-text: rgba(244, 244, 248, 0.6);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-text: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(99, 102, 255, 0.2);

    /* Typography — modern geometric sans + mono */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="aurora"] {
    /* Aurora — a deeper, glassier midnight. Near-black surfaces so the
       ambient indigo/cyan gradients glow against the canvas. */
    --surface-0: #0a0b0f;
    --surface-1: #111218;
    --surface-2: #16171f;
    --surface-3: #1e2029;
    --surface-4: #262834;
    --surface-5: #2f313e;

    /* Glass — for layered translucent panels */
    --glass-bg: rgba(19, 19, 24, 0.72);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Text — cool refined off-whites */
    --text-primary: #f4f4f8;
    --text-secondary: rgba(244, 244, 248, 0.75);
    --text-tertiary: rgba(244, 244, 248, 0.5);
    --text-quaternary: rgba(244, 244, 248, 0.32);
    --text-inverse: #08080a;

    /* Accent primary — electric indigo */
    --accent-primary: #6366ff;
    --accent-primary-hover: #7c7eff;
    --accent-primary-subtle: rgba(99, 102, 255, 0.12);
    --accent-primary-glow: rgba(99, 102, 255, 0.4);

    /* Accent secondary — cool cyan */
    --accent-secondary: #22d3ee;
    --accent-secondary-hover: #38ddf5;
    --accent-secondary-subtle: rgba(34, 211, 238, 0.12);

    /* States — refined modern */
    --accent-success: #10b981;
    --accent-success-hover: #34d399;
    --accent-success-subtle: rgba(16, 185, 129, 0.12);

    --accent-warning: #f59e0b;
    --accent-warning-hover: #fbbf24;
    --accent-warning-subtle: rgba(245, 158, 11, 0.12);

    --accent-danger: #f43f5e;
    --accent-danger-hover: #fb7185;
    --accent-danger-subtle: rgba(244, 63, 94, 0.12);

    --accent-info: #06b6d4;
    --accent-info-hover: #22d3ee;
    --accent-info-subtle: rgba(6, 182, 212, 0.12);

    /* Borders — slightly more visible for glass edges */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-accent: var(--accent-primary);

    /* Sharp modern radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-full: 9999px;

    /* Shadows — minimal, refined */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.65);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 24px var(--accent-primary-glow);

    /* Position colors — vibrant modern */
    --position-qb: #f43f5e;
    --position-rb: #10b981;
    --position-wr: #6366ff;
    --position-te: #a855f7;
    --position-k: #f59e0b;
    --position-def: #06b6d4;

    /* macOS Dark sidebar tokens */
    --sidebar-text: rgba(244, 244, 248, 0.6);
    --sidebar-text-hover: #ffffff;
    --sidebar-active-text: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(99, 102, 255, 0.2);

    /* Typography — modern geometric sans + mono */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* --- Midnight Component Styles --- */

[data-theme="midnight"] body {
    background: var(--surface-0);
}

[data-theme="midnight"] .sidebar {
    background: var(--surface-1) !important;
    border-right: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

[data-theme="midnight"] article.content {
    background-color: var(--surface-0) !important;
    box-shadow: none !important;
    border-top-left-radius: 0 !important;
}

[data-theme="midnight"] main {
    background: var(--surface-0) !important;
}

[data-theme="midnight"] .sidebar .nav-link {
    color: var(--text-tertiary) !important;
    border-radius: var(--radius-sm) !important;
    margin: 0.125rem 0.625rem !important;
    padding: 0.5rem 0.875rem !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0 !important;
    transition: all 0.15s ease !important;
}

/* Hover must stay visually distinct from .active — when both were --surface-2
   a hovered link read as a second "active" item (e.g. Teams + My Team). */
[data-theme="midnight"] .sidebar .nav-link:hover {
    background: var(--sidebar-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme="midnight"] .sidebar .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    box-shadow: inset 2px 0 0 var(--accent-primary) !important;
}

[data-theme="midnight"] .sidebar .nav-link i {
    color: var(--text-quaternary) !important;
    font-size: 0.8125rem !important;
}

[data-theme="midnight"] .sidebar .nav-link.active i {
    color: var(--accent-primary) !important;
}

[data-theme="midnight"] .sidebar .navbar-brand {
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 0 !important;
}

/* Top header bar — translucent */
[data-theme="midnight"] .top-header-bar {
    background: rgba(8, 8, 10, 0.85) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
}

/* Brand logo — modern sans wordmark */
[data-theme="midnight"] .brand-logo {
    font-family: var(--font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Headings — Space Grotesk display weight */
[data-theme="midnight"] h1,
[data-theme="midnight"] h2,
[data-theme="midnight"] h3,
[data-theme="midnight"] h4 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0;
}

/* Buttons — clean modern with subtle glow on hover */
[data-theme="midnight"] .btn-primary,
[data-theme="midnight"] button.btn-primary {
    background: var(--accent-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0 !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.15s ease !important;
}

[data-theme="midnight"] .btn-primary:hover {
    background: var(--accent-primary-hover) !important;
    box-shadow: var(--glow-primary) !important;
    transform: translateY(-1px) !important;
}

[data-theme="midnight"] .btn {
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
}

/* Badges — refined pills */
[data-theme="midnight"] .badge {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0 !important;
}

/* Cards — minimal with subtle border */
[data-theme="midnight"] .card {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
}

[data-theme="midnight"] .card:hover {
    border-color: var(--border-default) !important;
}

/* Form controls — modern dark */
[data-theme="midnight"] .form-control,
[data-theme="midnight"] input.form-control,
[data-theme="midnight"] textarea.form-control {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
}

[data-theme="midnight"] .form-control:focus {
    background: var(--surface-2) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-primary-subtle) !important;
}

[data-theme="midnight"] .form-control::placeholder {
    color: var(--text-quaternary);
}

/* Tables */
[data-theme="midnight"] table {
    color: var(--text-secondary);
    font-family: var(--font-body);
    background: transparent !important;
}

[data-theme="midnight"] table thead th {
    background: transparent !important;
    color: var(--text-quaternary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    padding: 0.875rem 0.75rem !important;
}

[data-theme="midnight"] table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: background 0.15s ease;
}

[data-theme="midnight"] table tbody tr:hover {
    background: var(--surface-1) !important;
}

[data-theme="midnight"] table tbody td {
    background: transparent !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary);
}

/* Radzen DataGrid theme-aware rules are now global in bootstrap-overrides.css */

/* Card overrides for midnight — sleek minimal */
[data-theme="midnight"] .card {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}

[data-theme="midnight"] .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Avatars — accent gradient */
[data-theme="midnight"] .user-avatar,
[data-theme="midnight"] .thread-avatar-placeholder,
[data-theme="midnight"] [class*="avatar"] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
}

/* Channel buttons — forum sidebar */
[data-theme="midnight"] .channel-button {
    border-radius: var(--radius-sm) !important;
    color: var(--text-tertiary) !important;
}

[data-theme="midnight"] .channel-button:hover {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

[data-theme="midnight"] .channel-button.active {
    background: var(--accent-primary-subtle) !important;
    color: var(--accent-primary) !important;
}

/* Theme toggle button */
[data-theme="midnight"] .theme-toggle-btn {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

[data-theme="midnight"] .theme-toggle-btn:hover {
    background: var(--surface-3) !important;
    color: var(--text-primary) !important;
}

[data-theme="midnight"] .theme-dropdown {
    background: var(--surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-theme="midnight"] .theme-option:hover {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

[data-theme="midnight"] .theme-option.active {
    color: var(--accent-primary) !important;
}

/* Login layout — modern dark */
[data-theme="midnight"] .login-page {
    background: var(--surface-0);
}

[data-theme="midnight"] .login-brand-watermark {
    color: var(--accent-primary);
    opacity: 0.04;
}

[data-theme="midnight"] .login-brand-title {
    font-family: var(--font-display);
    color: var(--text-primary);
}

[data-theme="midnight"] .login-brand-accent {
    color: var(--accent-primary);
    font-style: normal;
    font-weight: 700;
}


/* ============================================================================
   RESPONSIVE — Top-Nav Mobile
   ============================================================================ */

@media (max-width: 768px) {
    /* Stack nav vertically on small screens */
    [data-layout="top-nav"] .sidebar {
        flex-direction: column !important;
        height: auto !important;
        padding: 0.5rem !important;
    }

    [data-layout="top-nav"] .sidebar .nav-scrollable nav {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    [data-layout="top-nav"] .sidebar .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.7rem !important;
    }

    [data-layout="top-nav"] main {
        margin-top: 100px !important;
    }
}


/* ============================================================================
   TOP-NAV FINAL OVERRIDES
   Must come AFTER all per-theme blocks to win the !important + source-order
   battle. Strips pill backgrounds from nav links in top-nav layout and
   enforces the underline-only active treatment.
   ============================================================================ */

[data-layout="top-nav"] .sidebar .nav-link,
[data-layout="top-nav"] .sidebar .nav-link:hover,
[data-layout="top-nav"] .sidebar .nav-link.active,
[data-layout="top-nav"] .nav-link.active {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

[data-layout="top-nav"] .sidebar .nav-link {
    color: var(--nav-text, rgba(255,255,255,0.55)) !important;
}

[data-layout="top-nav"] .sidebar .nav-link:hover {
    color: var(--nav-text-hover, rgba(255,255,255,0.9)) !important;
}

[data-layout="top-nav"] .sidebar .nav-link.active {
    color: var(--nav-text-active, #fff) !important;
    font-weight: 500 !important;
}


/* ============================================================================
   DASH LAYOUT FINAL RESET
   Must come AFTER all per-theme blocks. The new bold dashboard layout
   (.dash-hero, .dash-section, .dash-primary, .dash-secondary) needs the
   per-theme widget card styling stripped — backgrounds, borders, forced
   text colors, and old typography all conflict with the new editorial
   layout. This block enforces transparency + token-based text colors.
   ============================================================================ */

/* HTML-prefixed for max specificity — wins all per-theme battles */

/* Strip backgrounds from legacy widget wrappers when inside new layout */
html[data-theme] .dash-hero .franchise-stats-widget,
html[data-theme] .dash-hero .dashboard-widget,
html[data-theme] .dash-section .dashboard-card,
html[data-theme] .dash-section .dashboard-widget,
html[data-theme] .dash-section .dashboard-card-header,
html[data-theme] .dash-section .card {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

/* Stat tiles inside hero — no individual backgrounds, just typography */
html[data-theme] .dash-hero .stat-tile,
html[data-theme] .dash-hero .stat-tile.featured,
html[data-theme] .dash-hero .stat-tile.golden {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Hero franchise typography — restore proper hierarchy regardless of theme */
html[data-theme] .dash-hero .widget-title {
    font-family: var(--font-display, 'Space Grotesk', Georgia, serif) !important;
    font-size: 1.75rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--text-primary) !important;
}

html[data-theme] .dash-hero .stat-value,
html[data-theme] .dash-hero .stat-tile .stat-value,
html[data-theme] .dash-hero .stat-tile:not(.featured) .stat-value {
    color: var(--text-primary) !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

html[data-theme] .dash-hero .stat-tile.featured .stat-value {
    color: var(--accent-primary) !important;
}

html[data-theme] .dash-hero .stat-tile.golden .stat-value {
    color: var(--accent-warning) !important;
}

html[data-theme] .dash-hero .stat-label,
html[data-theme] .dash-hero .stat-tile .stat-label,
html[data-theme] .dash-hero .stat-tile:not(.featured) .stat-label {
    color: var(--text-quaternary) !important;
    font-size: 0.625rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
}

html[data-theme] .dash-hero .franchise-name {
    color: var(--text-primary) !important;
}

html[data-theme] .dash-hero .stat-separator {
    color: var(--text-quaternary) !important;
}

html[data-theme] .dash-hero .link-btn {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-tertiary) !important;
}

html[data-theme] .dash-hero .link-btn:hover {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-strong) !important;
}

/* Override broad theme rules that paint card titles */
html[data-theme] .dash-section .dashboard-card-title,
html[data-theme] .dash-section .widget-title {
    font-family: var(--font-display, 'Space Grotesk', Georgia, serif) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--text-secondary) !important;
}

/* Topic list items inside dash-secondary need proper contrast */
html[data-theme] .dash-secondary .topic-list-item {
    background: transparent !important;
}

html[data-theme] .dash-secondary .topic-title {
    color: var(--text-primary) !important;
}

/* Section dividers use border tokens consistently */
html[data-theme] .dash-section,
html[data-theme] .dash-status-bar {
    border-bottom-color: var(--border-subtle) !important;
}

html[data-theme] .dash-primary {
    border-right-color: var(--border-subtle) !important;
}

/* Surface tints for dash columns — give them subtle differentiation */
html[data-theme] .dash-primary,
html[data-theme] .dash-hero,
html[data-theme] .dash-status-bar {
    background: var(--surface-0);
}

html[data-theme] .dash-secondary {
    background: var(--surface-1);
}

/* Light themes (daylight, coral, vintage, glacier) — flip surface tinting */
html[data-theme="daylight"] .dash-primary,
html[data-theme="daylight"] .dash-hero,
html[data-theme="daylight"] .dash-status-bar,
html[data-theme="glacier"] .dash-primary,
html[data-theme="glacier"] .dash-hero,
html[data-theme="glacier"] .dash-status-bar,
html[data-theme="coral"] .dash-primary,
html[data-theme="coral"] .dash-hero,
html[data-theme="coral"] .dash-status-bar,
html[data-theme="vintage"] .dash-primary,
html[data-theme="vintage"] .dash-hero,
html[data-theme="vintage"] .dash-status-bar {
    background: var(--surface-1);
}

html[data-theme="daylight"] .dash-secondary,
html[data-theme="glacier"] .dash-secondary,
html[data-theme="coral"] .dash-secondary,
html[data-theme="vintage"] .dash-secondary {
    background: var(--surface-0);
}

/* Classic theme gets gold accent on featured hero stat (instead of blue) */
html[data-theme="classic"] .dash-hero .stat-tile.featured .stat-value {
    color: var(--accent-secondary) !important;
}

/* Brand link outline — kill the Blazor focus ring on the helmet logo */
.navbar-brand,
.navbar-brand:focus,
.navbar-brand:focus-visible,
.navbar-brand:active,
.brand,
.brand:focus,
.brand-logo,
.brand-logo:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Also kill outlines on focusable images and links inside the navbar/sidebar brand area */
.sidebar .navbar-brand,
.sidebar .navbar-brand:focus,
.sidebar .navbar-brand:focus-visible,
.sidebar .navbar-brand:active,
.sidebar .navbar-brand img,
.sidebar .navbar-brand img:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ============================================================================
   BRAND IDENTITY TOKENS
   The logo is one SVG geometry. Themes recolor it through these variables.
   ============================================================================ */

[data-theme="obsidian"],
[data-theme="midnight"] {
    --brand-ink: #0d1116;
    --brand-mist: #cbd2d9;
    --brand-gold: #c3a25a;
    --brand-cyan: #5ba8ff;
    --brand-cyan-bright: #7ddcff;
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

[data-theme="daylight"] {
    --brand-ink: #111827;
    --brand-mist: #526174;
    --brand-gold: #a9792b;
    --brand-cyan: #1760c2;
    --brand-cyan-bright: #0786b5;
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

[data-theme="classic"] {
    --brand-ink: #0a1322;
    --brand-mist: #cbd2d9;
    --brand-gold: #c17d0f;
    --brand-cyan: #5ba8ff;
    --brand-cyan-bright: #7ddcff;
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

[data-theme="vintage"] {
    --brand-ink: #261c16;
    --brand-mist: #7b6f62;
    --brand-gold: #a87932;
    --brand-cyan: #2d6780;
    --brand-cyan-bright: #3f88a8;
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

[data-theme="coral"] {
    --brand-ink: #1f1a17;
    --brand-mist: #7a716b;
    --brand-gold: #b87942;
    --brand-cyan: #3c7894;
    --brand-cyan-bright: #4f98b6;
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

[data-theme="nord"] {
    --brand-ink: #071422;
    --brand-mist: #dce7ef;
    --brand-gold: #d8b85c;
    --brand-cyan: #5ba8ff;
    --brand-cyan-bright: #8bd3ff;
    --brand-helmet: var(--brand-mist);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan-bright);
    --brand-wordmark-accent: var(--brand-mist);
}

[data-theme="brutalist"] {
    --brand-ink: #050505;
    --brand-mist: #f4f1ea;
    --brand-gold: #f4bf37;
    --brand-cyan: #00a8ff;
    --brand-cyan-bright: #59d5ff;
    --brand-helmet: var(--brand-mist);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

.navbar-brand .dynasty-mark-image,
.main-brand-logo .dynasty-mark-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    filter: var(--logo-mark-filter, none) !important;
}

/* ============================================================================
   PREMIUM SYSTEM CONSOLIDATION
   Final layer: keep the color/layout toggles, but make every active skin feel
   like one 2030 product instead of three Bootstrap reskins.
   ============================================================================ */

html[data-theme] {
    --font-brand: 'Space Grotesk', 'Avenir Next', system-ui, sans-serif;
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --radius-2xl: 8px;
    --radius-full: 9999px;

    --panel-radius: 8px;
    --control-radius: 8px;
    --content-radius: 0;
    --content-shadow: none;
    --widget-radius: var(--panel-radius);
    --card-padding: 1rem;
    --header-height: 56px;
    --sidebar-width: 236px;

    --surface-canvas: var(--surface-0);
    --surface-rail: color-mix(in srgb, var(--surface-1) 88%, var(--surface-0) 12%);
    --surface-panel: color-mix(in srgb, var(--surface-2) 78%, var(--surface-0) 22%);
    --surface-panel-strong: color-mix(in srgb, var(--surface-3) 76%, var(--surface-1) 24%);
    --surface-control: color-mix(in srgb, var(--surface-2) 72%, var(--surface-0) 28%);
    --surface-control-hover: color-mix(in srgb, var(--surface-3) 76%, var(--surface-1) 24%);
    --surface-grid-line: color-mix(in srgb, var(--text-primary) 6%, transparent);
    --border-glass: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --shadow-premium: 0 26px 80px rgba(0, 0, 0, 0.34);
    --focus-ring: 0 0 0 3px var(--accent-primary-subtle);
    --accent-gradient: color-mix(in srgb, var(--accent-primary) 92%, var(--surface-0) 8%);
    --accent-gradient-quiet: color-mix(in srgb, var(--accent-primary-subtle) 64%, transparent);
    --gold-gradient: color-mix(in srgb, var(--accent-secondary) 92%, var(--surface-0) 8%);
    --table-header-bg: color-mix(in srgb, var(--surface-2) 72%, var(--surface-0) 28%);
    --table-row-hover: color-mix(in srgb, var(--accent-primary-subtle) 34%, var(--surface-2) 66%);
    --button-primary-bg: color-mix(in srgb, var(--accent-primary) 92%, var(--surface-0) 8%);

    --hero-title-family: var(--font-display);
    --hero-title-weight: 760;
    --hero-title-style: normal;
    --hero-title-tracking: 0;
    --section-title-family: var(--font-display);
    --section-title-weight: 720;
    --section-title-style: normal;
    --section-title-tracking: 0;

    --nav-font-size: 0.8125rem;
    --nav-font-weight: 650;
    --nav-tracking: 0;
}

html[data-theme="midnight"],
html[data-theme="obsidian"],
html[data-theme="nord"] {
    --surface-0: #05090c;
    --surface-1: #091015;
    --surface-2: #101920;
    --surface-3: #17242d;
    --surface-4: #22323d;
    --surface-5: #31434f;
    --text-primary: #f6fbff;
    --text-secondary: rgba(226, 238, 246, 0.76);
    --text-tertiary: rgba(193, 212, 224, 0.58);
    --text-quaternary: rgba(177, 196, 209, 0.36);
    --text-inverse: #031016;
    --accent-primary: #28c6ff;
    --accent-primary-hover: #70dfff;
    --accent-primary-subtle: rgba(40, 198, 255, 0.14);
    --accent-primary-glow: rgba(40, 198, 255, 0.28);
    --accent-secondary: #d6b463;
    --accent-secondary-hover: #f0d37c;
    --accent-secondary-subtle: rgba(214, 180, 99, 0.16);
    --border-subtle: rgba(194, 223, 238, 0.055);
    --border-default: rgba(194, 223, 238, 0.105);
    --border-strong: rgba(194, 223, 238, 0.18);
    --sidebar-text: rgba(226, 238, 246, 0.62);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-active-text: var(--text-primary);
    --sidebar-hover: color-mix(in srgb, var(--accent-primary-subtle) 44%, transparent);
    --sidebar-active-bg: color-mix(in srgb, var(--surface-3) 72%, var(--accent-primary-subtle) 28%);
    --nav-text: rgba(226, 238, 246, 0.58);
    --nav-text-hover: var(--text-primary);
    --nav-text-active: var(--text-primary);
    --button-primary-text: #031016;
    --brand-ink: #061017;
    --brand-mist: #d6e5ee;
    --brand-gold: var(--accent-secondary);
    --brand-cyan: var(--accent-primary);
    --brand-cyan-bright: var(--accent-primary-hover);
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

html[data-theme="daylight"],
html[data-theme="coral"] {
    --surface-0: #f4f8fb;
    --surface-1: #eef3f7;
    --surface-2: #ffffff;
    --surface-3: #e5edf4;
    --surface-4: #d7e2ec;
    --surface-5: #c2d0dc;
    --text-primary: #0b1720;
    --text-secondary: rgba(18, 37, 50, 0.76);
    --text-tertiary: rgba(42, 65, 80, 0.58);
    --text-quaternary: rgba(64, 86, 101, 0.4);
    --text-inverse: #ffffff;
    --accent-primary: #087eb8;
    --accent-primary-hover: #0697d7;
    --accent-primary-subtle: rgba(8, 126, 184, 0.11);
    --accent-primary-glow: rgba(8, 126, 184, 0.2);
    --accent-secondary: #b98228;
    --accent-secondary-hover: #d39a37;
    --accent-secondary-subtle: rgba(185, 130, 40, 0.13);
    --border-subtle: rgba(14, 31, 45, 0.07);
    --border-default: rgba(14, 31, 45, 0.12);
    --border-strong: rgba(14, 31, 45, 0.2);
    --sidebar-text: rgba(18, 37, 50, 0.62);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-active-text: var(--text-primary);
    --sidebar-hover: rgba(8, 126, 184, 0.08);
    --sidebar-active-bg: color-mix(in srgb, var(--surface-2) 78%, var(--accent-primary-subtle) 22%);
    --nav-text: rgba(18, 37, 50, 0.58);
    --nav-text-hover: var(--text-primary);
    --nav-text-active: var(--text-primary);
    --button-primary-text: #ffffff;
    --shadow-premium: 0 22px 60px rgba(19, 42, 57, 0.13);
    --brand-ink: #0b1720;
    --brand-mist: #486477;
    --brand-gold: var(--accent-secondary);
    --brand-cyan: var(--accent-primary);
    --brand-cyan-bright: var(--accent-primary-hover);
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

html[data-theme="classic"],
html[data-theme="vintage"],
html[data-theme="brutalist"] {
    --surface-0: #08090a;
    --surface-1: #0f1114;
    --surface-2: #171b20;
    --surface-3: #232830;
    --surface-4: #313842;
    --surface-5: #424b57;
    --text-primary: #fbfaf6;
    --text-secondary: rgba(239, 235, 224, 0.76);
    --text-tertiary: rgba(220, 214, 199, 0.56);
    --text-quaternary: rgba(202, 194, 176, 0.34);
    --text-inverse: #0b0a08;
    --accent-primary: #d8b45e;
    --accent-primary-hover: #f0cf78;
    --accent-primary-subtle: rgba(216, 180, 94, 0.16);
    --accent-primary-glow: rgba(216, 180, 94, 0.27);
    --accent-secondary: #35c2eb;
    --accent-secondary-hover: #72ddff;
    --accent-secondary-subtle: rgba(53, 194, 235, 0.12);
    --border-subtle: rgba(239, 235, 224, 0.06);
    --border-default: rgba(239, 235, 224, 0.12);
    --border-strong: rgba(239, 235, 224, 0.2);
    --sidebar-text: rgba(239, 235, 224, 0.62);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-active-text: var(--text-primary);
    --sidebar-hover: color-mix(in srgb, var(--accent-primary-subtle) 40%, transparent);
    --sidebar-active-bg: color-mix(in srgb, var(--surface-3) 72%, var(--accent-primary-subtle) 28%);
    --nav-text: rgba(239, 235, 224, 0.58);
    --nav-text-hover: var(--text-primary);
    --nav-text-active: var(--text-primary);
    --button-primary-text: #0b0a08;
    --brand-ink: #08090a;
    --brand-mist: #eee8dc;
    --brand-gold: var(--accent-primary);
    --brand-cyan: var(--accent-secondary);
    --brand-cyan-bright: var(--accent-secondary-hover);
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

html[data-theme="signal"] {
    --surface-0: #030706;
    --surface-1: #07100f;
    --surface-2: #0d1816;
    --surface-3: #142520;
    --surface-4: #20362f;
    --surface-5: #2c4a3f;
    --text-primary: #f2fff9;
    --text-secondary: rgba(219, 244, 233, 0.76);
    --text-tertiary: rgba(184, 219, 204, 0.58);
    --text-quaternary: rgba(164, 205, 188, 0.36);
    --text-inverse: #03110b;
    --accent-primary: #58f2a4;
    --accent-primary-hover: #8fffc4;
    --accent-primary-subtle: rgba(88, 242, 164, 0.13);
    --accent-primary-glow: rgba(88, 242, 164, 0.26);
    --accent-secondary: #2cc7ff;
    --accent-secondary-hover: #74dcff;
    --accent-secondary-subtle: rgba(44, 199, 255, 0.12);
    --border-subtle: rgba(190, 235, 216, 0.055);
    --border-default: rgba(190, 235, 216, 0.105);
    --border-strong: rgba(190, 235, 216, 0.18);
    --sidebar-text: rgba(219, 244, 233, 0.62);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-active-text: var(--text-primary);
    --sidebar-hover: color-mix(in srgb, var(--accent-primary-subtle) 42%, transparent);
    --sidebar-active-bg: color-mix(in srgb, var(--surface-3) 72%, var(--accent-primary-subtle) 28%);
    --nav-text: rgba(219, 244, 233, 0.58);
    --nav-text-hover: var(--text-primary);
    --nav-text-active: var(--text-primary);
    --button-primary-text: #03110b;
    --brand-ink: #03110b;
    --brand-mist: #d8fff0;
    --brand-gold: #d7ba67;
    --brand-cyan: var(--accent-primary);
    --brand-cyan-bright: var(--accent-secondary-hover);
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

html[data-theme="glacier"] {
    --surface-0: #f6fbff;
    --surface-1: #edf5fb;
    --surface-2: #ffffff;
    --surface-3: #e1edf7;
    --surface-4: #cfdeea;
    --surface-5: #b8cad8;
    --text-primary: #071827;
    --text-secondary: rgba(15, 37, 57, 0.76);
    --text-tertiary: rgba(46, 70, 91, 0.58);
    --text-quaternary: rgba(70, 98, 121, 0.4);
    --text-inverse: #ffffff;
    --accent-primary: #2563eb;
    --accent-primary-hover: #1d7dff;
    --accent-primary-subtle: rgba(37, 99, 235, 0.1);
    --accent-primary-glow: rgba(37, 99, 235, 0.18);
    --accent-secondary: #10b8aa;
    --accent-secondary-hover: #23d6c8;
    --accent-secondary-subtle: rgba(16, 184, 170, 0.12);
    --border-subtle: rgba(16, 40, 63, 0.07);
    --border-default: rgba(16, 40, 63, 0.12);
    --border-strong: rgba(16, 40, 63, 0.2);
    --sidebar-text: rgba(15, 37, 57, 0.62);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-active-text: var(--text-primary);
    --sidebar-hover: rgba(37, 99, 235, 0.08);
    --sidebar-active-bg: color-mix(in srgb, var(--surface-2) 78%, var(--accent-primary-subtle) 22%);
    --nav-text: rgba(15, 37, 57, 0.58);
    --nav-text-hover: var(--text-primary);
    --nav-text-active: var(--text-primary);
    --button-primary-text: #ffffff;
    --shadow-premium: 0 22px 60px rgba(16, 40, 63, 0.13);
    --brand-ink: #071827;
    --brand-mist: #4e6980;
    --brand-gold: #b8913f;
    --brand-cyan: var(--accent-primary);
    --brand-cyan-bright: var(--accent-secondary-hover);
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

html[data-theme="regalia"] {
    --surface-0: #050714;
    --surface-1: #0a1021;
    --surface-2: #111a2e;
    --surface-3: #1a2740;
    --surface-4: #263652;
    --surface-5: #34476a;
    --text-primary: #fbf7ea;
    --text-secondary: rgba(236, 231, 216, 0.76);
    --text-tertiary: rgba(210, 207, 196, 0.58);
    --text-quaternary: rgba(192, 187, 174, 0.36);
    --text-inverse: #080b16;
    --accent-primary: #e6c76d;
    --accent-primary-hover: #f4dc8e;
    --accent-primary-subtle: rgba(230, 199, 109, 0.15);
    --accent-primary-glow: rgba(230, 199, 109, 0.27);
    --accent-secondary: #7cb7ff;
    --accent-secondary-hover: #a8d0ff;
    --accent-secondary-subtle: rgba(124, 183, 255, 0.13);
    --border-subtle: rgba(236, 231, 216, 0.06);
    --border-default: rgba(236, 231, 216, 0.12);
    --border-strong: rgba(236, 231, 216, 0.2);
    --sidebar-text: rgba(236, 231, 216, 0.62);
    --sidebar-text-hover: var(--text-primary);
    --sidebar-active-text: var(--text-primary);
    --sidebar-hover: color-mix(in srgb, var(--accent-primary-subtle) 40%, transparent);
    --sidebar-active-bg: color-mix(in srgb, var(--surface-3) 72%, var(--accent-primary-subtle) 28%);
    --nav-text: rgba(236, 231, 216, 0.58);
    --nav-text-hover: var(--text-primary);
    --nav-text-active: var(--text-primary);
    --button-primary-text: #080b16;
    --brand-ink: #080b16;
    --brand-mist: #efe8d2;
    --brand-gold: var(--accent-primary);
    --brand-cyan: var(--accent-secondary);
    --brand-cyan-bright: var(--accent-secondary-hover);
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
}

html[data-theme] body,
html[data-theme] .page,
html[data-theme] main {
    background:
        linear-gradient(90deg, var(--surface-grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--surface-grid-line) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 72%, transparent), var(--surface-0) 28rem),
        var(--surface-0) !important;
    background-size: 72px 72px, 72px 72px, auto, auto !important;
    color: var(--text-primary);
}

html[data-theme] article.content {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-primary-subtle) 26%, transparent), transparent 18rem),
        var(--surface-canvas) !important;
}

/* HOME DASHBOARD PLAIN CANVAS (+ TEAM PAGE)
   The dashboard already has dense card content; a decorative stage gradient
   behind it reads as a washed-out panel on light themes. The team page's
   full-bleed editorial layout gets the same treatment — the accent wash +
   grid otherwise reads as an off-theme tint against the flat sidebar. */
html[data-theme] article.content:has(.home-dashboard),
html[data-theme] article.content:has(.home-dashboard) .home-dashboard,
html[data-theme] article.content:has(.home-dashboard) .app-dashboard,
html[data-theme] article.content:has(.team-page),
html[data-theme] article.content:has(.team-page) .team-page {
    background: var(--surface-canvas) !important;
    background-image: none !important;
}

html[data-theme] article.content {
    border-left: 1px solid var(--border-subtle);
    border-top-left-radius: 0 !important;
    padding: clamp(1rem, 2.2vw, 1.75rem);
}

html[data-theme] .top-header-bar,
html[data-theme] .main-header-bar {
    height: 56px !important;
    min-height: 56px !important;
    background: color-mix(in srgb, var(--surface-1) 86%, transparent) !important;
    border-bottom: 1px solid var(--border-default) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
    backdrop-filter: blur(22px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
}

html[data-theme] .sidebar {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-primary-subtle) 28%, transparent), transparent 15rem),
        var(--surface-rail) !important;
    /* Soft glass separation — hairline border + subtle right-side shadow */
    border-right: 1px solid color-mix(in srgb, var(--border-glass, var(--border-default)) 60%, transparent) !important;
    box-shadow: 2px 0 12px color-mix(in srgb, var(--surface-0) 18%, transparent) !important;
}

html[data-theme] .sidebar .top-row {
    min-height: 5.1rem;
    /* Align brand to same 0.7rem inset as nav items */
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent !important;
}

html[data-theme] .sidebar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    /* Left-aligned to match nav-link left inset */
    justify-content: flex-start !important;
    width: auto !important;
    padding: 1rem 0 !important;
    padding-left: 0 !important;
    border-bottom: 0 !important;
}

html[data-theme] .sidebar .nav-link {
    min-height: 2.55rem;
    margin: 0.125rem 0.7rem !important;
    padding: 0.52rem 0.7rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--control-radius) !important;
    color: var(--sidebar-text) !important;
    font-family: var(--font-display, var(--font-body)) !important;
    font-size: var(--nav-font-size) !important;
    font-weight: var(--nav-font-weight) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html[data-theme] .sidebar .nav-link:hover {
    color: var(--sidebar-text-hover) !important;
    background: var(--sidebar-hover) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: none !important;
}

html[data-theme] .sidebar .nav-link.active {
    color: var(--sidebar-active-text) !important;
    background: var(--sidebar-active-bg) !important;
    /* Subtle glass border; no left accent stripe */
    border-color: var(--border-glass, color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle))) !important;
    box-shadow: none !important;
}

html[data-theme] .sidebar .nav-link i,
html[data-theme] .sidebar .nav-link .icon {
    color: color-mix(in srgb, currentColor 78%, var(--accent-primary) 22%) !important;
    opacity: 0.82 !important;
}

html[data-theme] .sidebar .nav-link.active i,
html[data-theme] .sidebar .nav-link.active .icon {
    color: var(--accent-primary) !important;
    opacity: 1 !important;
}

html[data-theme] .brand,
html[data-theme] .top-header-bar .brand {
    height: 56px !important;
}

html[data-theme] .main-brand-logo {
    --logo-mark-size: 2rem;
    --logo-word-size: 1.24rem;
    --logo-gap: 0.48rem;
}

html[data-theme] .brand-logo::before {
    content: none !important;
}

html[data-layout="top-nav"] .sidebar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 1rem !important;
}

html[data-layout="top-nav"] .sidebar .top-row {
    min-height: 56px !important;
    border-bottom: 0 !important;
    /* Reset sidebar-mode inset; top-nav uses sidebar's own padding */
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
}

html[data-layout="top-nav"] .sidebar .nav-link {
    height: 56px !important;
    line-height: 56px !important;
    min-height: 56px !important;
    margin: 0 0 0 1.1rem !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html[data-layout="top-nav"] .sidebar .nav-link.active {
    box-shadow: none !important;
}

html[data-layout="top-nav"] main > .top-header-bar {
    height: 56px !important;
    right: 1rem !important;
}

html[data-layout="top-nav"] main {
    padding-top: 56px !important;
}

html[data-theme] .card,
html[data-theme] .modal-content,
html[data-theme] .list-group,
html[data-theme] .table-responsive,
html[data-theme] .dashboard-widget,
html[data-theme] .franchise-stats-banner {
    border: 1px solid var(--border-default) !important;
    border-radius: var(--panel-radius) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, transparent), transparent 9rem),
        var(--surface-panel) !important;
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme] .card-header,
html[data-theme] .modal-header {
    background: color-mix(in srgb, var(--surface-panel-strong) 76%, transparent) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-family: var(--font-display) !important;
    font-weight: 720 !important;
}

html[data-theme] .btn-primary,
html[data-theme] button.btn-primary,
html[data-theme] .btn-accent {
    background: var(--button-primary-bg) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 56%, var(--text-primary) 12%) !important;
    color: var(--button-primary-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
        0 14px 32px var(--accent-primary-glow) !important;
}

html[data-theme] .btn-primary:hover,
html[data-theme] button.btn-primary:hover,
html[data-theme] .btn-accent:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
        0 18px 42px var(--accent-primary-glow) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .btn-outline-secondary {
    background: var(--surface-control) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

html[data-theme] .btn-secondary:hover,
html[data-theme] .btn-outline-secondary:hover {
    background: var(--surface-control-hover) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .form-control,
html[data-theme] .form-select {
    background: var(--surface-control) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--control-radius) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
}

html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus {
    background: var(--surface-control-hover) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 66%, var(--border-default)) !important;
    box-shadow: var(--focus-ring) !important;
}

html[data-theme] .table {
    overflow: hidden;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--panel-radius);
    background: var(--surface-panel) !important;
}

html[data-theme] .table thead th,
html[data-theme] table thead th {
    background: var(--table-header-bg) !important;
    color: var(--text-tertiary) !important;
    border-bottom: 1px solid var(--border-default) !important;
    font-family: var(--font-body) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

html[data-theme] .table tbody tr:hover,
html[data-theme] table tbody tr:hover {
    background: var(--table-row-hover) !important;
}

html[data-theme] .table td,
html[data-theme] .table th,
html[data-theme] table tbody td {
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] .dashboard-card-title,
html[data-theme] .widget-title,
html[data-theme] .dash-section-title {
    font-family: var(--font-display) !important;
    font-style: normal !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
}

html[data-theme] .dash-hero .widget-title {
    font-family: var(--font-display) !important;
    font-size: 1.75rem !important;
    font-style: normal !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
}

html[data-theme] .dash-section .dashboard-card-title,
html[data-theme] .dash-section .widget-title,
html[data-theme] .dash-section-title {
    font-family: var(--font-display) !important;
    font-size: 1rem !important;
    font-style: normal !important;
    font-weight: 720 !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0 !important;
}

html[data-theme] .dash-hero .franchise-stats-widget,
html[data-theme] .dash-hero .dashboard-widget,
html[data-theme] .dash-section .dashboard-card,
html[data-theme] .dash-section .dashboard-widget,
html[data-theme] .dash-section .dashboard-card-header,
html[data-theme] .dash-section .card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}


/* ============================================================================
   NAV SUBMENU — Auctions group (both layouts)
   Placed last so it wins source-order against the per-theme blocks and the
   top-nav final overrides. CSS-only expansion: no JS.
     - sidebar: indented sub-links revealed when an /auctions* route is active
       (group :has(.active)) or on hover/focus-within.
     - top-nav: dropdown panel revealed on hover/focus-within and when active.
   ============================================================================ */

/* --- Parent toggle chevron (sidebar) --- */
.sidebar .nav-group {
    display: flex;
    flex-direction: column;
}

.sidebar .nav-group .nav-group-toggle {
    position: relative;
}

/* Chevron only in sidebar layout — top-nav uses the underline indicator and
   must keep its own .nav-link::after pseudo free for that purpose. */
[data-layout="sidebar"] .sidebar .nav-group .nav-group-toggle::after {
    content: "\f105"; /* fa chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}

/* --- Submenu list base (sidebar collapsed) --- */
.sidebar .nav-group .nav-submenu {
    list-style: none;
    margin: 2px 0 2px 1.65rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--border-default);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height var(--duration-normal, 0.25s) var(--ease-out, ease),
        opacity var(--duration-fast, 0.15s) var(--ease-out, ease);
}

.sidebar .nav-group .nav-submenu li {
    margin: 0;
    padding: 0;
}

/* Expand when an /auctions* route is active, on hover, or on keyboard focus */
.sidebar .nav-group:hover .nav-submenu,
.sidebar .nav-group:focus-within .nav-submenu,
.sidebar .nav-group:has(.active) .nav-submenu {
    max-height: 16rem;
    opacity: 1;
}

/* Rotate chevron when expanded */
[data-layout="sidebar"] .sidebar .nav-group:hover .nav-group-toggle::after,
[data-layout="sidebar"] .sidebar .nav-group:focus-within .nav-group-toggle::after,
[data-layout="sidebar"] .sidebar .nav-group:has(.active) .nav-group-toggle::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 1;
}

/* Sub-link sizing (rides on .nav-link-sub base from layout.css) */
.sidebar .nav-group .nav-submenu .nav-link-sub {
    margin: 1px 0 !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
}

.sidebar .nav-group .nav-submenu .nav-link-sub .badge {
    font-size: 0.55rem;
    padding: 2px 6px;
}


/* ---------------------------------------------------------------------------
   TOP-NAV: Auctions becomes a hover/focus dropdown.
   --------------------------------------------------------------------------- */
[data-layout="top-nav"] .sidebar .nav-group {
    position: relative;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Dropdown panel — hidden until hover / focus / active */
[data-layout="top-nav"] .sidebar .nav-group .nav-submenu {
    position: absolute;
    top: 100%;
    left: 1.1rem;
    min-width: 13rem;
    margin: 0 !important;
    padding: 0.4rem !important;
    list-style: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-panel, var(--surface-2));
    box-shadow: var(--shadow-md, 0 14px 34px rgba(0,0,0,0.28));
    max-height: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity var(--duration-fast, 0.15s) var(--ease-out, ease),
        transform var(--duration-fast, 0.15s) var(--ease-out, ease),
        visibility var(--duration-fast, 0.15s);
    z-index: 1003;
}

[data-layout="top-nav"] .sidebar .nav-group:hover .nav-submenu,
[data-layout="top-nav"] .sidebar .nav-group:focus-within .nav-submenu,
[data-layout="top-nav"] .sidebar .nav-group:has(.active) .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

[data-layout="top-nav"] .sidebar .nav-group .nav-submenu li {
    margin: 0;
    padding: 0;
}

/* Dropdown links render as vertical block items, not the inline top-nav bar.
   Override the horizontal nav-link treatment forced by the top-nav blocks. */
[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 0.65rem !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    font-size: 0.8125rem !important;
    font-weight: 450 !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub:hover {
    background: var(--surface-row-hover, var(--accent-primary-subtle)) !important;
    color: var(--text-primary) !important;
}

[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub.active {
    background: var(--accent-primary-subtle) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* The horizontal nav hides icons; re-show them inside the dropdown */
[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub .icon,
[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub i.icon,
[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub i[class*="fa-"] {
    display: inline-flex !important;
    width: 1rem !important;
    margin-right: 0.55rem !important;
    opacity: 0.75 !important;
}

/* Dropdown sub-links must not inherit the horizontal nav's accent underline. */
[data-layout="top-nav"] .sidebar .nav-group .nav-submenu .nav-link-sub::after {
    display: none !important;
    content: none !important;
}

/* Touch / small screens have no :hover and the mobile menu collapses on tap,
   so the hover/:has(.active) reveal can't surface the Auctions children. Force
   the submenu open inline (static, not an absolute dropdown) for BOTH layouts
   so every sub-link stays reachable once the mobile menu is open. */
@media (max-width: 768px) {
    .sidebar .nav-group .nav-submenu,
    [data-layout="top-nav"] .sidebar .nav-group .nav-submenu {
        position: static !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        min-width: 0 !important;
        margin: 2px 0 2px 1.65rem !important;
        padding-left: 0.6rem !important;
        border-left: 1px solid var(--border-default) !important;
    }
}