/* Nexus Global CSS */
/* Projektmappe: Nexus.UI.Shared/wwwroot/css */
/* Fil: nexus.css */
/* Formål: Single source of truth for Nexus design system - design tokens, MudBlazor overrides og modul-specifik styling */

/* ============================================
   FIGMA DESIGN TOKENS (Single Source of Truth)
   ============================================ */

/* 
   SINGLE SOURCE OF TRUTH: nexus.css er den ENESTE fil med design tokens.
   
   Denne fil indeholder:
   1. Figma design tokens (base tokens og --ui-* semantic aliases)
   2. MudBlazor theme overrides
   3. Modul-specifik styling (Chat, RealmManagement, etc.)
   4. Legacy tokens (--nexus-*) for backward compatibility
   
   Alle base tokens (--background, --primary, etc.) og --ui-* tokens
   er defineret herunder og er single source of truth for hele Nexus.
   
   VIGTIGT: 
   - Base tokens (--primary, --background, etc.) er FORBUDT i UI code
   - KUN --ui-* tokens må bruges i UI code (se TOKENS.md whitelist)
   - Se DESIGN_CONTRACT.md for design system regler
*/

/* Root tokens (Light mode) */
:root {
  /* Typography */
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Spacing (ONLY allowed values) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;

  /* Radius */
  --radius: 0.625rem; /* 10px - base radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Base colors */
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);

  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);

  --popover: #ffffff;
  --popover-foreground: oklch(0.145 0 0);

  /* Semantic colors */
  --primary: #030213;
  --primary-foreground: #ffffff;

  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;

  --muted: #ececf0;
  --muted-foreground: #717182;

  --accent: #e9ebef;
  --accent-foreground: #030213;

  --destructive: #d4183d;
  --destructive-foreground: #ffffff;

  /* Borders & focus */
  --border: rgba(0, 0, 0, 0.1);
  --ring: oklch(0.708 0 0);

  /* Inputs */
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: transparent;
  --switch-off: #dc2626;         /* Red-600: Switch thumb when OFF */
  --switch-off-hover: #b91c1c;   /* Red-700: Switch thumb hover when OFF */
  --switch-on: #16a34a;          /* Green-600: Switch thumb when ON */
  --switch-on-hover: #15803d;    /* Green-700: Switch thumb hover when ON */
  --switch-thumb: #ffffff;       /* Switch thumb color (unused for stateful thumb) */

  /* Sidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Charts (ONLY for charts) */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
}

/* Dark mode */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);

  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);

  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);

  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);

  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);

  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);

  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);

  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);

  --border: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
  
  --input: oklch(0.269 0 0);

  /* Switch colors for dark mode - brighter for better visibility */
  --switch-off: #ef4444;         /* Red-500: Switch thumb when OFF */
  --switch-off-hover: #dc2626;   /* Red-600: Switch thumb hover when OFF */
  --switch-on: #22c55e;          /* Green-500: Switch thumb when ON */
  --switch-on-hover: #16a34a;    /* Green-600: Switch thumb hover when ON */
  --switch-thumb: #ffffff;       /* Switch thumb color (unused for stateful thumb) */

  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
}

/* Base element styling */
html {
  font-size: var(--font-size-base);
}

body {
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   SEMANTIC UI ALIASES (shared contract)
   These are the ONLY tokens UI code and themes may use.
   ============================================ */

:root {
  /* Surfaces */
  --ui-background: var(--background);
  --ui-surface: var(--card);
  --ui-surface-muted: var(--secondary);

  /* Text */
  --ui-text-primary: var(--foreground);
  --ui-text-secondary: var(--muted-foreground);

  /* Actions */
  --ui-action-primary: var(--primary);
  --ui-action-primary-text: var(--primary-foreground);

  --ui-action-secondary: var(--secondary);
  --ui-action-secondary-text: var(--secondary-foreground);

  /* States */
  --ui-error: var(--destructive);
  --ui-error-text: var(--destructive-foreground);

  /* Borders & focus */
  --ui-border: var(--border);
  --ui-ring: var(--ring);

  /* Radius */
  --ui-radius: var(--radius-lg);

  /* ============================================
     Status colors (1:1 mapping to MudBlazor palette)
     ============================================ */
  --ui-status-success: var(--mud-palette-success);
  --ui-status-warning: var(--mud-palette-warning);
  --ui-status-error:   var(--mud-palette-error);
  --ui-status-info:    var(--mud-palette-info);

  /* ============================================
     Rule Builder node colors (mapped to MudBlazor palette)
     Used by RuleBuilderCanvas.razor + RuleBuilderToolbox.razor
     ============================================ */
  --ui-node-default:    var(--mud-palette-primary);
  --ui-node-check:      var(--mud-palette-warning);    /* gylden */
  --ui-node-effekt:     var(--mud-palette-secondary);  /* lilla */
  --ui-node-betingelse: var(--mud-palette-info);       /* turkis */
  --ui-node-subflow:    var(--mud-palette-tertiary);   /* magenta */
  --ui-node-resultat:   var(--mud-palette-text-secondary); /* grå */

  /* ============================================
     Contract variable role colors (input/output/event)
     Used by ContractVariablesPanel.razor
     ============================================ */
  --ui-role-input:     var(--mud-palette-primary);
  --ui-role-input-bg:  var(--mud-palette-primary-lighten);
  --ui-role-output:    var(--mud-palette-warning);
  --ui-role-output-bg: var(--mud-palette-warning-lighten);
  --ui-role-event:     var(--mud-palette-success);
  --ui-role-event-bg:  var(--mud-palette-success-lighten);
  --ui-role-missing:   var(--mud-palette-error);
  --ui-role-missing-bg: var(--mud-palette-error-lighten);
}

/* Dark mode aliases inherit automatically via base tokens */

/* ============================================
   LEGACY TOKEN COMPATIBILITY
   ============================================ */

/* 
   Legacy tokens (--nexus-*) for backward compatibility.
   Disse tokens mapper til base tokens fra global.css.
   De vil blive fjernet gradvist som kode migreres til --ui-* tokens.
*/

/* Backward compatibility aliases */
:root {
    /* Font size alias for backward compatibility */
    --font-size: var(--font-size-base);
    
    /* Theme inline mappings - Standard CSS variables for color and radius */
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-input-background: var(--input-background);
    --color-switch-background: var(--switch-background);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    
    /* Typography sizes - mapped from Figma */
    --text-2xl: 1.5rem; /* 24px */
    --text-xl: 1.25rem; /* 20px */
    --text-lg: 1.125rem; /* 18px */
    --text-base: 1rem; /* 16px */
}

/* Base styles */
* {
    border-color: var(--border);
    outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
}

body {
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
:where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
    h1 {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    h2 {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    h3 {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    h4 {
        font-size: var(--text-base);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    label {
        font-size: var(--text-base);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    button {
        font-size: var(--text-base);
        font-weight: var(--font-weight-medium);
        line-height: 1.5;
    }

    input {
        font-size: var(--text-base);
        font-weight: var(--font-weight-normal);
        line-height: 1.5;
    }
}

html {
    font-size: var(--font-size);
}

/* ============================================
   NEXUS DESIGN TOKENS (Mapped from Figma)
   ============================================ */

:root {
    /* Primary Colors - Mapped from Figma --primary */
    --nexus-primary: var(--primary); /* #030213 */
    --nexus-primary-foreground: var(--primary-foreground); /* white */
    --nexus-primary-hover: #1a1a2e; /* Darker shade of primary */
    
    /* Background Colors - Mapped from Figma --background */
    --nexus-background: var(--background); /* #ffffff (light) */
    --nexus-card: var(--card); /* #ffffff (light) */
    --nexus-popover: var(--popover); /* white (light) */
    
    /* Foreground Colors - Mapped from Figma --foreground */
    --nexus-foreground: var(--foreground); /* oklch(0.145 0 0) */
    --nexus-card-foreground: var(--card-foreground);
    --nexus-popover-foreground: var(--popover-foreground);
    
    /* Secondary Colors - Mapped from Figma --secondary */
    --nexus-secondary: var(--secondary);
    --nexus-secondary-foreground: var(--secondary-foreground);
    
    /* Muted Colors - Mapped from Figma --muted */
    --nexus-muted: var(--muted);
    --nexus-muted-foreground: var(--muted-foreground);
    
    /* Accent Colors - Mapped from Figma --accent */
    --nexus-accent: var(--accent);
    --nexus-accent-foreground: var(--accent-foreground);
    
    /* Destructive Colors - Mapped from Figma --destructive */
    --nexus-destructive: var(--destructive);
    --nexus-destructive-foreground: var(--destructive-foreground);
    
    /* Border Colors - Mapped from Figma --border */
    --nexus-border: var(--border);
    --nexus-border-hover: rgba(0, 0, 0, 0.15); /* Slightly darker on hover */
    
    /* Input Colors - Mapped from Figma --input */
    --nexus-input: var(--input);
    --nexus-input-background: var(--input-background);
    
    /* Ring Colors - Mapped from Figma --ring */
    --nexus-ring: var(--ring);
    
    /* Radius - Mapped from Figma --radius */
    --nexus-radius: var(--radius); /* 0.625rem = 10px */
    --nexus-radius-sm: var(--radius-sm); /* calc(var(--radius) - 4px) */
    --nexus-radius-md: var(--radius-md); /* calc(var(--radius) - 2px) */
    --nexus-radius-lg: var(--radius-lg); /* var(--radius) */
    --nexus-radius-xl: var(--radius-xl); /* calc(var(--radius) + 4px) */
    
    /* Font Size - Mapped from Figma --font-size */
    --nexus-font-size: var(--font-size); /* 16px */
    
    /* Font Weight - Mapped from Figma */
    --nexus-font-weight-normal: var(--font-weight-normal); /* 400 */
    --nexus-font-weight-medium: var(--font-weight-medium); /* 500 */
    
    /* ============================================
       LEGACY TOKENS (Backward Compatibility)
       ============================================ */
    
    /* ============================================
       KONSOLIDERET DESIGN SYSTEM (2025-01-27)
       ============================================ */
    
    /* Nye semantiske variabler (anbefalet til brug) */
    /* Baggrundsfarver */
    --nexus-bg-primary: #111317;                /* Hovedbaggrund */
    --nexus-bg-surface: #15181E;                /* Surface/panel/card (tidligere bg-panel) */
    --nexus-bg-elevated: #1A1D22;               /* Elevated surface/input field (tidligere bg-field) */
    
    /* Border farver */
    --nexus-border: #2A2E35;                    /* Standard border (tidligere border-field) */
    --nexus-border-hover: #3B424C;              /* Hover/focus border (tidligere border-field-hover, også button-border) */
    --nexus-border-subtle: #20242B;             /* Subtle border/divider (tidligere border-panel) */
    
    /* Tekstfarver */
    --nexus-text-primary: #EDEFF3;
    --nexus-text-muted: #B8BEC9;
    
    /* Accentfarver (Legacy - mapped to Figma tokens above) */
    /* --nexus-primary er nu mappet til Figma --primary (#030213) */
    /* --nexus-primary-hover er nu mappet til darker shade */
    --nexus-success: #10b981; /* green-500 - for success states, positive indicators */
    
    /* Top Navigation Bar - Slate theme (Figma design) */
    --nexus-topnav-bg: #1e293b; /* slate-800 - mørk blå-grå baggrund */
    --nexus-topnav-border: #334155; /* slate-700 - border farve */
    --nexus-topnav-height: 64px; /* h-16 = 64px */
    --nexus-topnav-text: #ffffff; /* Hvid tekst */
    --nexus-topnav-text-muted: #e2e8f0; /* slate-200 - inactive link tekst */
    --nexus-topnav-hover: rgba(71, 85, 105, 0.5); /* slate-700/50 - hover state */
    --nexus-topnav-active: #475569; /* slate-700 - active state */
    --nexus-topnav-button-bg: #475569; /* slate-700 - button baggrund */
    --nexus-topnav-button-hover: #334155; /* slate-600 - button hover */
    
    /* Fontfamilier */
    --nexus-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nexus-font-heading: 'Cinzel', serif;
    --nexus-font-lore: 'Cormorant Garamond', serif;
    
    /* Spacing (8px base unit) */
    --nexus-spacing-xs: 4px;
    --nexus-spacing-sm: 8px;
    --nexus-spacing-md: 16px;
    --nexus-spacing-lg: 24px;
    --nexus-spacing-xl: 32px;
    --nexus-spacing-2xl: 48px;
    
    /* Border radius */
    --nexus-radius-sm: 4px;
    --nexus-radius-md: 8px;
    --nexus-radius-lg: 12px;
    --nexus-radius-xl: 16px;
    
    /* Z-index layers */
    --nexus-z-base: 1;
    --nexus-z-dropdown: 100;
    --nexus-z-sticky: 200;
    --nexus-z-fixed: 300;
    --nexus-z-modal-backdrop: 400;
    --nexus-z-modal: 500;
    --nexus-z-popover: 600;
    --nexus-z-tooltip: 700;
    
    /* Elevation/shadows */
    --nexus-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --nexus-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --nexus-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --nexus-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --nexus-transition-fast: 0.15s ease;
    --nexus-transition-normal: 0.2s ease;
    --nexus-transition-slow: 0.3s ease;
    
    /* Light theme colors (for LandingPage and light mode components) */
    --nexus-light-bg-primary: #f9fafb;
    --nexus-light-bg-surface: #ffffff;
    --nexus-light-bg-subtle: #f8fafc; /* Slate-50 - for subtle backgrounds (recent activity header) */
    --nexus-light-text-primary: #111827;
    --nexus-light-text-secondary: #4b5563;
    --nexus-light-text-muted: #6b7280;
    --nexus-light-border: #e5e7eb;
    --nexus-light-border-hover: #94a3b8;
    --nexus-light-border-subtle: #f3f4f6; /* Gray-100 - for subtle dividers */
    --nexus-light-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --nexus-light-shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --nexus-light-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Module-specific accent colors (for QuickActions and module indicators) */
    /* Characters module - Blue theme */
    --nexus-module-characters-bg: #eff6ff; /* blue-50 */
    --nexus-module-characters-text: #2563eb; /* blue-600 */
    
    /* Adventure module - Green theme */
    --nexus-module-adventure-bg: #f0fdf4; /* green-50 */
    --nexus-module-adventure-text: #16a34a; /* green-600 */
    
    /* Chat module - Slate theme */
    --nexus-module-chat-bg: #f8fafc; /* slate-50 */
    --nexus-module-chat-text: #475569; /* slate-600 */
    
    /* RealmManagement module - Amber theme */
    --nexus-module-realm-bg: #fffbeb; /* amber-50 */
    --nexus-module-realm-text: #f59e0b; /* amber-600 */
    --nexus-module-realm-text-hover: #d97706; /* amber-700 - darker shade for hover states */
    
    /* Rules module - Indigo theme */
    --nexus-module-rules-bg: #eef2ff; /* indigo-50 */
    --nexus-module-rules-text: #4f46e5; /* indigo-600 */
    
    /* Combat module - Red theme */
    --nexus-module-combat-bg: #fef2f2; /* red-50 */
    --nexus-module-combat-text: #dc2626; /* red-600 */
    
    /* Friends module - Purple theme */
    --nexus-module-friends-bg: #faf5ff; /* purple-50 */
    --nexus-module-friends-text: #9333ea; /* purple-600 */
    
    /* Character Overview specific tokens */
    --nexus-character-card-bg: var(--nexus-bg-surface);
    --nexus-character-card-border: var(--nexus-border-subtle);
    --nexus-character-status-active: #10b981; /* green-500 */
    --nexus-character-status-inactive: #f59e0b; /* yellow-500 */
    --nexus-character-status-retired: #6b7280; /* gray-500 */
    --nexus-character-hp-bar: #10b981; /* green-500 */
    
    /* Token colors (for BattlemapToken and similar components) */
    --nexus-token-friendly: var(--nexus-primary); /* Primary blue for friendly tokens */
    --nexus-token-enemy: #DC2626; /* red-600 for enemy tokens */
    --nexus-token-neutral: var(--nexus-text-muted); /* Muted text color for neutral tokens */
    --nexus-warning: #F59E0B; /* amber-500 for warnings */
    --nexus-error: #DC2626; /* red-600 for errors */
    
    /* Status indicator colors (for online/away/offline status) */
    --nexus-status-online: #4CAF50; /* green-500 - online status */
    --nexus-status-away: #FFC107; /* amber-500 - away status */
    --nexus-status-offline: #9E9E9E; /* gray-500 - offline status */
    
    /* Special purpose colors */
    --nexus-team-icon: #9C27B0; /* purple-500 - for team/group icons */
    --nexus-primary-opacity-10: rgba(43, 95, 217, 0.1); /* Primary with 10% opacity for selected states */
    --nexus-white: #FFFFFF; /* White color for text on primary backgrounds */
    --nexus-white-opacity-70: rgba(255, 255, 255, 0.7); /* White with 70% opacity */
    --nexus-white-opacity-90: rgba(255, 255, 255, 0.9); /* White with 90% opacity */
    --nexus-white-opacity-60: rgba(255, 255, 255, 0.6); /* White with 60% opacity */
    
    /* Adventure module specific colors */
    --nexus-adventure-icon-bg: rgba(16, 185, 129, 0.1); /* Success color with 10% opacity */
    --nexus-adventure-icon-border: rgba(16, 185, 129, 0.2); /* Success color with 20% opacity */
    --nexus-adventure-icon-color: var(--nexus-success); /* Success green for adventure icons */
    --nexus-adventure-objective-gradient-start: #475569; /* slate-600 - gradient start */
    --nexus-adventure-objective-gradient-end: #64748b; /* slate-500 - gradient end */
    --nexus-adventure-stage-completed: var(--nexus-success); /* green-500 - completed stage */
    --nexus-adventure-stage-in-progress: #3b82f6; /* blue-500 - in progress stage */
    --nexus-adventure-stage-not-started: #9ca3af; /* gray-400 - not started stage */
    --nexus-adventure-party-member-bg: #f1f5f9; /* slate-100 - party member background */
    --nexus-adventure-party-member-avatar-bg: #e2e8f0; /* slate-200 - avatar background */
    --nexus-adventure-party-member-icon: #64748b; /* slate-500 - avatar icon color */
    --nexus-adventure-loot-bullet: var(--nexus-warning); /* amber-500 - loot bullet color */
    
    /* Adventure status badge colors (light mode) */
    --nexus-adventure-status-active-bg: #dcfce7; /* green-100 */
    --nexus-adventure-status-active-text: #166534; /* green-700 */
    --nexus-adventure-status-onhold-bg: #fef3c7; /* yellow-100 */
    --nexus-adventure-status-onhold-text: #854d0e; /* yellow-700 */
    --nexus-adventure-status-completed-bg: #dbeafe; /* blue-100 */
    --nexus-adventure-status-completed-text: #1e40af; /* blue-700 */
    
    /* Additional light mode colors for Adventures module */
    --nexus-light-slate-50: #f1f5f9; /* slate-50 - for player tags background */
    --nexus-light-slate-300: #cbd5e1; /* slate-300 - for hover borders */
    --nexus-light-slate-600: #334155; /* slate-600 - for button hover */
    --nexus-light-slate-700: #475569; /* slate-700 - for buttons and text */
    --nexus-light-slate-700-opacity-10: rgba(71, 85, 105, 0.1); /* slate-700 with 10% opacity - for focus rings */
    --nexus-light-slate-900: #0f172a; /* slate-900 - for hover states and darker text */
    --nexus-light-gray-100: #f3f4f6; /* gray-100 - for filter button background */
    --nexus-light-gray-200: #e5e7eb; /* gray-200 - same as --nexus-light-border */
    --nexus-light-gray-300: #d1d5db; /* gray-300 - for empty state icons */
    --nexus-light-green-700: #15803d; /* green-700 - for next session text */
}

/* ============================================
   BASE / RESET STYLES
   ============================================ */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Forhindrer scroll på body/html - kun specifikke containere skal scrolles */
}

body {
    font-family: var(--nexus-font-body);
    font-size: 14px;
    color: var(--nexus-light-text-primary); /* Use light mode text as default */
    background-color: var(--nexus-light-bg-primary); /* Use light mode background as default */
}

/* ============================================
   GLOBAL SCROLLING SUPPORT
   ============================================ */

/* 
   Global scrolling support for all pages.
   Ensures that content can scroll when it exceeds viewport height,
   especially in edit modes and long forms.
   
   MainLayout.main-content has overflow-y: auto to enable scrolling.
   This section ensures child components don't prevent scrolling.
*/

/* MudContainer - Ensure it allows content to grow and doesn't restrict scrolling */
.mud-container {
    min-height: 0;
    padding-bottom: var(--nexus-spacing-xl);
    height: auto; /* Allow container to grow with content */
}

/* MudCard - Ensure cards don't restrict scrolling */
.mud-card {
    overflow: visible;
    height: auto; /* Allow cards to grow with content */
}

.mud-card-content {
    overflow: visible;
}

/* Ensure detail/edit pages can scroll when content is long */
.mud-container[class*="detail-container"],
.mud-container[class*="create-container"],
.mud-container[class*="edit-container"] {
    padding-bottom: var(--nexus-spacing-2xl);
}

/* Ensure edit mode cards have proper spacing at bottom */
.mud-card.mt-4 {
    margin-bottom: var(--nexus-spacing-xl);
}

.mud-card.mt-4 .mud-card-content {
    padding-bottom: var(--nexus-spacing-lg);
}

/* Ensure main-content children can grow and scroll */
.main-content > * {
    min-height: 0;
    flex-shrink: 0; /* Prevent children from shrinking below content size */
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, .h1 {
    font-family: var(--nexus-font-heading);
    font-weight: 600;
    font-size: 24px;
    color: var(--nexus-text-primary);
}

h2, .h2 {
    font-family: var(--nexus-font-body);
    font-weight: 600;
    font-size: 20px;
    color: var(--nexus-text-primary);
}

h3, .h3 {
    font-family: var(--nexus-font-body);
    font-weight: 600;
    font-size: 18px;
    color: var(--nexus-text-primary);
}

/* ============================================
   SHARED UTILITY CLASSES
   ============================================ */

/* RPG-agtige knapper */
.nexus-module-button {
    font-family: var(--nexus-font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    background: var(--nexus-bg-surface);
    border: 1px solid var(--nexus-border-hover);
    border-radius: var(--nexus-radius-md);
    color: var(--nexus-text-primary);
    cursor: pointer;
    transition: var(--nexus-transition-normal);
    text-transform: none;
    letter-spacing: 0.5px;
}

.nexus-module-button:hover {
    background: var(--nexus-primary);
    border-color: var(--nexus-primary);
    transform: translateY(-1px);
    box-shadow: var(--nexus-shadow-md);
}

.nexus-module-button:active {
    transform: translateY(0);
    box-shadow: var(--nexus-shadow-sm);
}

/* Top navigation bar */
.nexus-top-nav {
    background: var(--nexus-bg-surface);
    border-bottom: 1px solid var(--nexus-border-subtle);
    padding: var(--nexus-spacing-md) var(--nexus-spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--nexus-spacing-md);
    min-height: 64px;
}

/* App titel */
.nexus-app-title {
    font-family: var(--nexus-font-heading);
    font-weight: 600;
    font-size: 24px;
    color: var(--nexus-text-primary);
    margin: 0;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   MUDBLAZOR OVERRIDES
   ============================================ */

/* MudBlazor komponenter - Nexus styling */
.mud-button-root.nexus-module-button {
    background: var(--nexus-bg-surface) !important;
    border: 1px solid var(--nexus-border-hover) !important;
    color: var(--nexus-text-primary) !important;
    font-family: var(--nexus-font-body) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    transition: var(--nexus-transition-normal) !important;
}

.mud-button-root.nexus-module-button:hover {
    background: var(--nexus-primary) !important;
    border-color: var(--nexus-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--nexus-shadow-md) !important;
}

.mud-button-root.nexus-module-button:active {
    transform: translateY(0) !important;
    box-shadow: var(--nexus-shadow-sm) !important;
}

/* MudSelect styling */
.mud-select {
    font-family: var(--nexus-font-body) !important;
}

.mud-select .mud-input-control {
    background: var(--nexus-light-bg-surface) !important;
    border: 1px solid var(--nexus-light-border) !important;
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-control:hover {
    border-color: var(--nexus-light-border-hover) !important;
}

.mud-select .mud-input-control input {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect input root - sikrer at valgte værdi har samme farve som MudTextField */
.mud-select .mud-input-root {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-root input {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-root .mud-input {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-root .mud-select-input {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-root .mud-input-slot {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-root .mud-input-slot input {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select .mud-input-label {
    color: var(--nexus-light-text-secondary) !important;
}

.mud-select .mud-input-label.mud-input-label-input-focused {
    color: var(--nexus-primary) !important;
}

/* MudSelect dropdown menu (popover) - Generel styling for alle moduler */
/* Popovers renderes i MudPopoverProvider (portal), så de skal have korrekt baggrund */
/* :not(.mud-tooltip) udelukker MudTooltip popovers, så Color="Color.Dark" virker */
.mud-popover:not(.mud-tooltip) {
    background-color: var(--nexus-light-bg-surface) !important;
    /* MudMenu/MudSelect m.fl.: dark MudPalette giver lys tekst — popovers har lys baggrund i Nexus */
    --mud-palette-text-primary: var(--nexus-light-text-primary);
    --mud-palette-text-secondary: var(--nexus-light-text-secondary);
    color: var(--nexus-light-text-primary);
}

.mud-popover:not(.mud-tooltip) > .mud-popover-paper {
    background-color: var(--nexus-light-bg-surface) !important;
}

.mud-popover .mud-list {
    background-color: var(--nexus-light-bg-surface) !important;
}

.mud-popover .mud-list-item {
    background-color: var(--nexus-light-bg-surface) !important;
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item:hover {
    background-color: var(--nexus-light-bg-primary) !important;
}

.mud-popover .mud-list-item-text {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelectItem text styling - sikrer at alle tekst-elementer i dropdowns er sorte */
.mud-popover .mud-list-item {
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item * {
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item-text,
.mud-popover .mud-list-item-text * {
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item.mud-selected {
    background-color: var(--nexus-light-bg-primary) !important;
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item.mud-selected * {
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item.mud-selected:hover {
    background-color: var(--nexus-light-bg-primary) !important;
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover .mud-list-item.mud-selected:hover * {
    color: var(--nexus-light-text-primary) !important;
}

/*
 * MudMenu i popover: MudMenuItem har klasse .mud-menu-item — ikke .mud-list-item som MudSelect.
 * Uden disse regler vinder dark palette tekst (~hvid) på lys baggrund; især på Realm-sider hvor realm-theme tidligere slog papir-transparent ud.
 */
.mud-popover:not(.mud-tooltip) .mud-menu-item {
    color: var(--nexus-light-text-primary) !important;
}

.mud-popover:not(.mud-tooltip) .mud-menu-item:hover {
    background-color: var(--nexus-light-bg-primary) !important;
}

.mud-popover:not(.mud-tooltip) .mud-menu-item .mud-icon,
.mud-popover:not(.mud-tooltip) .mud-menu-item .mud-icon-root,
.mud-popover:not(.mud-tooltip) .mud-menu-item svg:not(.mud-chip svg):not(.mud-chip-root svg) {
    color: #757575 !important;
    fill: #757575 !important;
}

/* TopNav: højere specificitet når menu-popover stadig ligger under .top-navbar i DOM */
.top-navbar .mud-popover:not(.mud-tooltip) .mud-menu-item {
    color: var(--nexus-light-text-primary) !important;
}

.top-navbar .mud-popover:not(.mud-tooltip) .mud-menu-item .mud-icon,
.top-navbar .mud-popover:not(.mud-tooltip) .mud-menu-item .mud-icon-root,
.top-navbar .mud-popover:not(.mud-tooltip) .mud-menu-item svg:not(.mud-chip svg):not(.mud-chip-root svg) {
    color: #757575 !important;
    fill: #757575 !important;
}

/* Realm fantasy chrome: samme hover som MudSelect-dropdowns på realm-sider */
.realm-v2-theme .mud-popover:not(.mud-tooltip) .mud-menu-item:hover {
    background-color: var(--nexus-module-realm-bg) !important;
}

/* MudSelectItem direkte styling - sikrer at MudSelectItem teksten er sort */
.mud-select-item {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select-item * {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect dropdown icon styling */
.mud-select .mud-input-adornment {
    color: var(--nexus-light-text-secondary) !important;
}

.mud-select .mud-input-adornment:hover {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect - høj specificitet så læsbar kontrast altid gælder (også i mørke toolbars/paneler) */
.mud-select.mud-input-outlined .mud-input-root .mud-input-slot .mud-select-input,
.mud-select.mud-input-outlined .mud-input-root .mud-input-slot,
.mud-select.mud-input-outlined .mud-input-root .mud-select-input,
.mud-select.mud-input-outlined .mud-input-root .mud-input-slot input,
.mud-select .mud-input-root .mud-input-slot .mud-select-input,
.mud-select .mud-input-root .mud-input-slot,
.mud-select .mud-input-root .mud-select-input,
.mud-select .mud-input-root .mud-input-slot input {
    color: var(--nexus-light-text-primary) !important;
}

.mud-select.mud-input-outlined .mud-input-slot .mud-input-label,
.mud-select.mud-input-outlined .mud-input-control .mud-input-label,
.mud-select.mud-input-outlined .mud-input-label,
.mud-select .mud-input-slot .mud-input-label,
.mud-select .mud-input-control .mud-input-label,
.mud-select .mud-input-label.mud-input-label-inputcontrol,
.mud-select .mud-input-label {
    color: var(--nexus-light-text-secondary) !important;
}

.mud-select.mud-input-outlined .mud-input-control .mud-input-adornment .mud-icon-root,
.mud-select .mud-input-control .mud-input-adornment .mud-icon-root,
.mud-select .mud-input-adornment .mud-icon-root {
    color: var(--nexus-light-text-secondary) !important;
}

/* MudChip styling */
.mud-chip {
    font-family: var(--nexus-font-body) !important;
    font-weight: 500 !important;
}

/* MudIconButton styling */
.mud-icon-button {
    color: var(--nexus-text-muted) !important;
}

.mud-icon-button:hover {
    color: var(--nexus-text-primary) !important;
    background: var(--nexus-bg-elevated) !important;
}

/* MudAvatar styling */
.mud-avatar {
    font-family: var(--nexus-font-body) !important;
    font-weight: 600 !important;
}

/* ============================================
   MUDBLAZOR THEME SYNKRONISERING
   ============================================ */

/* 
   MudBlazor Theme Synkroniseringsstrategi:
   
   MudBlazor understøtter ikke CSS variables direkte i MudTheme (C#),
   så vi bruger en to-lags tilgang:
   
   1. MudTheme (NexusMudTheme.cs): Bruger hex-værdier der matcher CSS variables
   2. CSS Overrides (herunder): Overrides MudBlazor's genererede CSS med CSS variables
   
   Dette sikrer at:
   - MudBlazor komponenter får korrekte farver fra MudTheme (hex-værdier)
   - CSS overrides synkroniserer MudBlazor med CSS variables for konsistens
   - Ændringer i CSS variables påvirker både native CSS og MudBlazor komponenter
   
   Når du tilføjer nye palette properties:
   1. Tilføj hex-værdi i NexusMudTheme.cs (mappet fra CSS variable)
   2. Tilføj CSS override herunder for at synkronisere med CSS variable
   3. Dokumenter mapping i begge filer
*/

/* MudBlazor palette overrides - synkroniser med CSS variables */
.mud-palette-primary {
    background-color: var(--nexus-primary) !important;
    color: var(--nexus-primary) !important;
}

.mud-palette-secondary {
    background-color: var(--nexus-primary-hover) !important;
    color: var(--nexus-primary-hover) !important;
}

.mud-palette-background {
    background-color: var(--nexus-bg-primary) !important;
}

.mud-palette-surface {
    background-color: var(--nexus-bg-surface) !important;
}

/* Light theme overrides for landing-page and items pages */
.landing-page .mud-palette-background,
.landing-page .mud-palette-surface {
    background-color: var(--nexus-light-bg-primary) !important;
}

.landing-page .mud-palette-text-primary {
    color: var(--nexus-light-text-primary) !important;
}

.landing-page .mud-palette-text-secondary {
    color: var(--nexus-light-text-secondary) !important;
}

/* Light theme overrides for RealmManagement module */
.realm-detail-container,
.realm-overview-container,
.realm-create-container,
.territory-detail-container,
.territory-overview-container,
.territory-create-container,
.settlement-detail-container,
.settlement-overview-container,
.settlement-create-container {
    background-color: var(--nexus-light-bg-primary) !important;
}

.realm-detail-container .mud-palette-background,
.realm-overview-container .mud-palette-background,
.realm-create-container .mud-palette-background,
.territory-detail-container .mud-palette-background,
.territory-overview-container .mud-palette-background,
.territory-create-container .mud-palette-background,
.settlement-detail-container .mud-palette-background,
.settlement-overview-container .mud-palette-background,
.settlement-create-container .mud-palette-background {
    background-color: var(--nexus-light-bg-primary) !important;
}

.realm-detail-container .mud-palette-surface,
.realm-overview-container .mud-palette-surface,
.realm-create-container .mud-palette-surface,
.territory-detail-container .mud-palette-surface,
.territory-overview-container .mud-palette-surface,
.territory-create-container .mud-palette-surface,
.settlement-detail-container .mud-palette-surface,
.settlement-overview-container .mud-palette-surface,
.settlement-create-container .mud-palette-surface {
    background-color: var(--nexus-light-bg-surface) !important;
}

.realm-detail-container .mud-palette-text-primary,
.realm-overview-container .mud-palette-text-primary,
.realm-create-container .mud-palette-text-primary,
.territory-detail-container .mud-palette-text-primary,
.territory-overview-container .mud-palette-text-primary,
.territory-create-container .mud-palette-text-primary,
.settlement-detail-container .mud-palette-text-primary,
.settlement-overview-container .mud-palette-text-primary,
.settlement-create-container .mud-palette-text-primary {
    color: var(--nexus-light-text-primary) !important;
}

.realm-detail-container .mud-palette-text-secondary,
.realm-overview-container .mud-palette-text-secondary,
.realm-create-container .mud-palette-text-secondary,
.territory-detail-container .mud-palette-text-secondary,
.territory-overview-container .mud-palette-text-secondary,
.territory-create-container .mud-palette-text-secondary,
.settlement-detail-container .mud-palette-text-secondary,
.settlement-overview-container .mud-palette-text-secondary,
.settlement-create-container .mud-palette-text-secondary {
    color: var(--nexus-light-text-secondary) !important;
}

/* Override main-content background when RealmManagement containers are present */
.main-content:has(.realm-detail-container),
.main-content:has(.realm-overview-container),
.main-content:has(.realm-create-container),
.main-content:has(.territory-detail-container),
.main-content:has(.territory-overview-container),
.main-content:has(.territory-create-container),
.main-content:has(.settlement-detail-container),
.main-content:has(.settlement-overview-container),
.main-content:has(.settlement-create-container) {
    background-color: var(--nexus-light-bg-primary) !important;
}

/* Light theme overrides for Chat module */
.chat-container {
    background-color: var(--nexus-light-bg-primary) !important;
}

.chat-overview-container {
    background-color: var(--nexus-light-bg-primary) !important;
}

/* Sørg for at chat-container ikke påvirker sidebar */
.chat-container .chat-sidebar {
    background-color: var(--nexus-light-bg-surface) !important;
    background: var(--nexus-light-bg-surface) !important;
}

/* Chat Sidebar - KRITISK: Tving hvid baggrund på alt */
.chat-sidebar {
    background-color: var(--nexus-light-bg-surface) !important;
    background: var(--nexus-light-bg-surface) !important;
}

/* MudBlazor komponenter i chat-sidebar skal også være hvide */
.chat-sidebar .mud-palette-background,
.chat-sidebar .mud-palette-surface,
.chat-sidebar .mud-list,
.chat-sidebar .mud-list-item,
.chat-sidebar .mud-text-field,
.chat-sidebar .mud-input-control,
.chat-sidebar .mud-input,
.chat-sidebar .mud-alert,
.chat-sidebar .mud-progress-linear,
.chat-sidebar .mud-typography {
    background-color: var(--nexus-light-bg-surface) !important;
}

/* Særlig håndtering af MudList og MudListItem */
.chat-sidebar .mud-list-root {
    background-color: var(--nexus-light-bg-surface) !important;
    background: var(--nexus-light-bg-surface) !important;
}

.chat-sidebar .mud-list-item-root {
    background-color: transparent !important;
}

.chat-sidebar .mud-list-item-root:hover {
    background-color: var(--nexus-light-bg-primary) !important;
}

/* Force white background on all direct children and nested elements */
.chat-sidebar > div,
.chat-sidebar > .chat-sidebar-header,
.chat-sidebar > .chat-tabs,
.chat-sidebar > .chat-search,
.chat-sidebar > .chat-list {
    background-color: var(--nexus-light-bg-surface) !important;
    background: var(--nexus-light-bg-surface) !important;
}

/* Override MudBlazor's generated CSS classes with higher specificity */
.mud-theme-layout .chat-sidebar,
.mud-theme-layout-dark .chat-sidebar,
body .chat-sidebar,
html .chat-sidebar {
    background-color: var(--nexus-light-bg-surface) !important;
    background: var(--nexus-light-bg-surface) !important;
}

.chat-sidebar .mud-palette-text-secondary {
    color: var(--nexus-light-text-secondary) !important;
}

/* MudText komponenter i sidebar - samme farver som i ChatOverview */
.nexus-chat-sidebar .mud-typography-subtitle2:not(.chat-item-preview):not(.chat-item-time),
.chat-sidebar .mud-typography-subtitle2:not(.chat-item-preview):not(.chat-item-time) {
    color: var(--nexus-light-slate-700) !important; /* Samme farve som conversation-name i midten */
}

.chat-sidebar .mud-typography-body2:not(.chat-item-name):not(.chat-item-time) {
    color: var(--nexus-light-text-secondary) !important; /* Samme farve som conversation-preview i midten */
}

/* ChatListItem tekstfarver - samme som i ChatOverview */
.nexus-chat-sidebar .chat-item-name,
.nexus-chat-sidebar .mud-typography-subtitle2.chat-item-name,
.nexus-chat-sidebar .mud-typography-subtitle2,
.chat-sidebar .chat-item-name,
.chat-sidebar .mud-typography-subtitle2.chat-item-name,
.chat-sidebar .mud-typography-subtitle2 {
    color: var(--nexus-light-slate-700) !important; /* Samme farve som conversation-name i midten */
}

.chat-sidebar .chat-item-preview,
.chat-sidebar .mud-typography-body2.chat-item-preview,
.chat-sidebar .mud-typography-body2:not(.chat-item-name) {
    color: var(--nexus-light-text-secondary) !important; /* Samme farve som conversation-preview i midten */
}

.chat-sidebar .chat-item-time,
.chat-sidebar .mud-typography-caption.chat-item-time,
.chat-sidebar .mud-typography-caption {
    color: var(--nexus-light-text-muted) !important; /* Samme farve som conversation-time i midten */
}

/* FriendListItem tekstfarver - samme som ChatListItem */
.nexus-chat-sidebar .friend-item-name,
.nexus-chat-sidebar .mud-typography-subtitle2.friend-item-name,
.chat-sidebar .friend-item-name,
.chat-sidebar .mud-typography-subtitle2.friend-item-name {
    color: var(--nexus-light-slate-700) !important;
}

/* Chat title (h6) i sidebar */
.nexus-chat-sidebar .chat-title,
.nexus-chat-sidebar .mud-typography-h6.chat-title,
.nexus-chat-sidebar .mud-typography-h6,
.chat-sidebar .chat-title,
.chat-sidebar .mud-typography-h6.chat-title,
.chat-sidebar .mud-typography-h6 {
    color: var(--nexus-light-slate-700) !important;
}

.chat-overview-container .mud-palette-background,
.chat-overview-container .mud-palette-surface {
    background-color: var(--nexus-light-bg-primary) !important;
}

.chat-overview-container .mud-palette-text-primary {
    color: var(--nexus-light-slate-700) !important;
}

.chat-overview-container .mud-palette-text-secondary {
    color: var(--nexus-light-text-secondary) !important;
}

/* Override main-content background when Chat containers are present */
.main-content:has(.chat-container),
.main-content:has(.chat-overview-container) {
    background-color: var(--nexus-light-bg-primary) !important;
}

/* RealmManagement module - MudBreadcrumbs overrides */
/* Breadcrumbs are siblings of containers (placed before container in DOM) */
/* Target breadcrumbs when they are in the same parent as RealmManagement containers */
.main-content:has(.realm-detail-container) .mud-breadcrumbs,
.main-content:has(.realm-overview-container) .mud-breadcrumbs,
.main-content:has(.realm-create-container) .mud-breadcrumbs,
.main-content:has(.territory-detail-container) .mud-breadcrumbs,
.main-content:has(.territory-overview-container) .mud-breadcrumbs,
.main-content:has(.territory-create-container) .mud-breadcrumbs,
.main-content:has(.settlement-detail-container) .mud-breadcrumbs,
.main-content:has(.settlement-overview-container) .mud-breadcrumbs,
.main-content:has(.settlement-create-container) .mud-breadcrumbs,
.realm-detail-container .mud-breadcrumbs,
.realm-overview-container .mud-breadcrumbs,
.realm-create-container .mud-breadcrumbs,
.territory-detail-container .mud-breadcrumbs,
.territory-overview-container .mud-breadcrumbs,
.territory-create-container .mud-breadcrumbs,
.settlement-detail-container .mud-breadcrumbs,
.settlement-overview-container .mud-breadcrumbs,
.settlement-create-container .mud-breadcrumbs {
    background-color: transparent !important;
}

.realm-detail-container .mud-breadcrumbs .mud-breadcrumb-item,
.realm-overview-container .mud-breadcrumbs .mud-breadcrumb-item,
.realm-create-container .mud-breadcrumbs .mud-breadcrumb-item,
.territory-detail-container .mud-breadcrumbs .mud-breadcrumb-item,
.territory-overview-container .mud-breadcrumbs .mud-breadcrumb-item,
.territory-create-container .mud-breadcrumbs .mud-breadcrumb-item,
.settlement-detail-container .mud-breadcrumbs .mud-breadcrumb-item,
.settlement-overview-container .mud-breadcrumbs .mud-breadcrumb-item,
.settlement-create-container .mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--nexus-light-text-primary) !important;
}

.realm-detail-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.realm-overview-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.realm-create-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.territory-detail-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.territory-overview-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.territory-create-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.settlement-detail-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.settlement-overview-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled,
.settlement-create-container .mud-breadcrumbs .mud-breadcrumb-item.mud-disabled {
    color: var(--nexus-light-text-secondary) !important;
}

/* RealmManagement module - MudSelect overrides (input field and dropdown menu) */
.realm-detail-container .mud-select .mud-input-control,
.realm-overview-container .mud-select .mud-input-control,
.realm-create-container .mud-select .mud-input-control,
.territory-detail-container .mud-select .mud-input-control,
.territory-overview-container .mud-select .mud-input-control,
.territory-create-container .mud-select .mud-input-control,
.settlement-detail-container .mud-select .mud-input-control,
.settlement-overview-container .mud-select .mud-input-control,
.settlement-create-container .mud-select .mud-input-control {
    background-color: var(--nexus-light-bg-surface) !important;
    border-color: var(--nexus-light-border) !important;
    color: var(--nexus-light-text-primary) !important;
}

.realm-detail-container .mud-select .mud-input-control:hover,
.realm-overview-container .mud-select .mud-input-control:hover,
.realm-create-container .mud-select .mud-input-control:hover,
.territory-detail-container .mud-select .mud-input-control:hover,
.territory-overview-container .mud-select .mud-input-control:hover,
.territory-create-container .mud-select .mud-input-control:hover,
.settlement-detail-container .mud-select .mud-input-control:hover,
.settlement-overview-container .mud-select .mud-input-control:hover,
.settlement-create-container .mud-select .mud-input-control:hover {
    border-color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-select .mud-input-label,
.realm-overview-container .mud-select .mud-input-label,
.realm-create-container .mud-select .mud-input-label,
.territory-detail-container .mud-select .mud-input-label,
.territory-overview-container .mud-select .mud-input-label,
.territory-create-container .mud-select .mud-input-label,
.settlement-detail-container .mud-select .mud-input-label,
.settlement-overview-container .mud-select .mud-input-label,
.settlement-create-container .mud-select .mud-input-label {
    color: var(--nexus-light-text-secondary) !important;
}

.realm-detail-container .mud-select .mud-input-label.mud-input-label-input-focused,
.realm-overview-container .mud-select .mud-input-label.mud-input-label-input-focused,
.realm-create-container .mud-select .mud-input-label.mud-input-label-input-focused,
.territory-detail-container .mud-select .mud-input-label.mud-input-label-input-focused,
.territory-overview-container .mud-select .mud-input-label.mud-input-label-input-focused,
.territory-create-container .mud-select .mud-input-label.mud-input-label-input-focused,
.settlement-detail-container .mud-select .mud-input-label.mud-input-label-input-focused,
.settlement-overview-container .mud-select .mud-input-label.mud-input-label-input-focused,
.settlement-create-container .mud-select .mud-input-label.mud-input-label-input-focused {
    color: var(--nexus-module-realm-text) !important;
}

/* RealmManagement module - MudSelect dropdown menu (popover) overrides */
/* Popovers render in MudPopoverProvider (portal), so we need to target them when RealmManagement containers exist on page */
.main-content:has(.realm-detail-container) ~ * .mud-popover,
.main-content:has(.realm-overview-container) ~ * .mud-popover,
.main-content:has(.realm-create-container) ~ * .mud-popover,
.main-content:has(.territory-detail-container) ~ * .mud-popover,
.main-content:has(.territory-overview-container) ~ * .mud-popover,
.main-content:has(.territory-create-container) ~ * .mud-popover,
.main-content:has(.settlement-detail-container) ~ * .mud-popover,
.main-content:has(.settlement-overview-container) ~ * .mud-popover,
.main-content:has(.settlement-create-container) ~ * .mud-popover,
body:has(.realm-detail-container) .mud-popover,
body:has(.realm-overview-container) .mud-popover,
body:has(.realm-create-container) .mud-popover,
body:has(.territory-detail-container) .mud-popover,
body:has(.territory-overview-container) .mud-popover,
body:has(.territory-create-container) .mud-popover,
body:has(.settlement-detail-container) .mud-popover,
body:has(.settlement-overview-container) .mud-popover,
body:has(.settlement-create-container) .mud-popover,
.realm-detail-container .mud-popover,
.realm-overview-container .mud-popover,
.realm-create-container .mud-popover,
.territory-detail-container .mud-popover,
.territory-overview-container .mud-popover,
.territory-create-container .mud-popover,
.settlement-detail-container .mud-popover,
.settlement-overview-container .mud-popover,
.settlement-create-container .mud-popover {
    background-color: var(--nexus-light-bg-surface) !important;
}

.main-content:has(.realm-detail-container) ~ * .mud-popover-paper,
.main-content:has(.realm-overview-container) ~ * .mud-popover-paper,
.main-content:has(.realm-create-container) ~ * .mud-popover-paper,
.main-content:has(.territory-detail-container) ~ * .mud-popover-paper,
.main-content:has(.territory-overview-container) ~ * .mud-popover-paper,
.main-content:has(.territory-create-container) ~ * .mud-popover-paper,
.main-content:has(.settlement-detail-container) ~ * .mud-popover-paper,
.main-content:has(.settlement-overview-container) ~ * .mud-popover-paper,
.main-content:has(.settlement-create-container) ~ * .mud-popover-paper,
body:has(.realm-detail-container) .mud-popover-paper,
body:has(.realm-overview-container) .mud-popover-paper,
body:has(.realm-create-container) .mud-popover-paper,
body:has(.territory-detail-container) .mud-popover-paper,
body:has(.territory-overview-container) .mud-popover-paper,
body:has(.territory-create-container) .mud-popover-paper,
body:has(.settlement-detail-container) .mud-popover-paper,
body:has(.settlement-overview-container) .mud-popover-paper,
body:has(.settlement-create-container) .mud-popover-paper,
.realm-detail-container .mud-popover-paper,
.realm-overview-container .mud-popover-paper,
.realm-create-container .mud-popover-paper,
.territory-detail-container .mud-popover-paper,
.territory-overview-container .mud-popover-paper,
.territory-create-container .mud-popover-paper,
.settlement-detail-container .mud-popover-paper,
.settlement-overview-container .mud-popover-paper,
.settlement-create-container .mud-popover-paper {
    background-color: var(--nexus-light-bg-surface) !important;
}

.main-content:has(.realm-detail-container) ~ * .mud-popover .mud-list,
.main-content:has(.realm-overview-container) ~ * .mud-popover .mud-list,
.main-content:has(.realm-create-container) ~ * .mud-popover .mud-list,
.main-content:has(.territory-detail-container) ~ * .mud-popover .mud-list,
.main-content:has(.territory-overview-container) ~ * .mud-popover .mud-list,
.main-content:has(.territory-create-container) ~ * .mud-popover .mud-list,
.main-content:has(.settlement-detail-container) ~ * .mud-popover .mud-list,
.main-content:has(.settlement-overview-container) ~ * .mud-popover .mud-list,
.main-content:has(.settlement-create-container) ~ * .mud-popover .mud-list,
body:has(.realm-detail-container) .mud-popover .mud-list,
body:has(.realm-overview-container) .mud-popover .mud-list,
body:has(.realm-create-container) .mud-popover .mud-list,
body:has(.territory-detail-container) .mud-popover .mud-list,
body:has(.territory-overview-container) .mud-popover .mud-list,
body:has(.territory-create-container) .mud-popover .mud-list,
body:has(.settlement-detail-container) .mud-popover .mud-list,
body:has(.settlement-overview-container) .mud-popover .mud-list,
body:has(.settlement-create-container) .mud-popover .mud-list,
.realm-detail-container .mud-popover .mud-list,
.realm-overview-container .mud-popover .mud-list,
.realm-create-container .mud-popover .mud-list,
.territory-detail-container .mud-popover .mud-list,
.territory-overview-container .mud-popover .mud-list,
.territory-create-container .mud-popover .mud-list,
.settlement-detail-container .mud-popover .mud-list,
.settlement-overview-container .mud-popover .mud-list,
.settlement-create-container .mud-popover .mud-list {
    background-color: var(--nexus-light-bg-surface) !important;
}

.main-content:has(.realm-detail-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.realm-overview-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.realm-create-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.territory-detail-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.territory-overview-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.territory-create-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.settlement-detail-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.settlement-overview-container) ~ * .mud-popover .mud-list-item,
.main-content:has(.settlement-create-container) ~ * .mud-popover .mud-list-item,
body:has(.realm-detail-container) .mud-popover .mud-list-item,
body:has(.realm-overview-container) .mud-popover .mud-list-item,
body:has(.realm-create-container) .mud-popover .mud-list-item,
body:has(.territory-detail-container) .mud-popover .mud-list-item,
body:has(.territory-overview-container) .mud-popover .mud-list-item,
body:has(.territory-create-container) .mud-popover .mud-list-item,
body:has(.settlement-detail-container) .mud-popover .mud-list-item,
body:has(.settlement-overview-container) .mud-popover .mud-list-item,
body:has(.settlement-create-container) .mud-popover .mud-list-item,
.realm-detail-container .mud-popover .mud-list-item,
.realm-overview-container .mud-popover .mud-list-item,
.realm-create-container .mud-popover .mud-list-item,
.territory-detail-container .mud-popover .mud-list-item,
.territory-overview-container .mud-popover .mud-list-item,
.territory-create-container .mud-popover .mud-list-item,
.settlement-detail-container .mud-popover .mud-list-item,
.settlement-overview-container .mud-popover .mud-list-item,
.settlement-create-container .mud-popover .mud-list-item {
    color: var(--nexus-light-text-primary) !important;
}

.main-content:has(.realm-detail-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.realm-overview-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.realm-create-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.territory-detail-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.territory-overview-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.territory-create-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.settlement-detail-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.settlement-overview-container) ~ * .mud-popover .mud-list-item:hover,
.main-content:has(.settlement-create-container) ~ * .mud-popover .mud-list-item:hover,
body:has(.realm-detail-container) .mud-popover .mud-list-item:hover,
body:has(.realm-overview-container) .mud-popover .mud-list-item:hover,
body:has(.realm-create-container) .mud-popover .mud-list-item:hover,
body:has(.territory-detail-container) .mud-popover .mud-list-item:hover,
body:has(.territory-overview-container) .mud-popover .mud-list-item:hover,
body:has(.territory-create-container) .mud-popover .mud-list-item:hover,
body:has(.settlement-detail-container) .mud-popover .mud-list-item:hover,
body:has(.settlement-overview-container) .mud-popover .mud-list-item:hover,
body:has(.settlement-create-container) .mud-popover .mud-list-item:hover,
.realm-detail-container .mud-popover .mud-list-item:hover,
.realm-overview-container .mud-popover .mud-list-item:hover,
.realm-create-container .mud-popover .mud-list-item:hover,
.territory-detail-container .mud-popover .mud-list-item:hover,
.territory-overview-container .mud-popover .mud-list-item:hover,
.territory-create-container .mud-popover .mud-list-item:hover,
.settlement-detail-container .mud-popover .mud-list-item:hover,
.settlement-overview-container .mud-popover .mud-list-item:hover,
.settlement-create-container .mud-popover .mud-list-item:hover {
    background-color: var(--nexus-module-realm-bg) !important;
}

.mud-palette-text-primary {
    color: var(--nexus-text-primary) !important;
}

/* Chat sidebar overrides - skal komme EFTER global .mud-palette-text-primary for at have højere specificitet */
.nexus-chat-sidebar .mud-palette-text-primary,
.nexus-chat-sidebar .mud-typography,
.nexus-chat-sidebar .mud-typography-h6,
.nexus-chat-sidebar .mud-typography-subtitle2,
.nexus-chat-sidebar .mud-typography-body2,
.nexus-chat-sidebar .mud-typography-caption,
.chat-sidebar .mud-palette-text-primary,
.chat-sidebar .mud-typography {
    color: var(--nexus-light-slate-700) !important;
}

.mud-palette-text-secondary {
    color: var(--nexus-text-muted) !important;
}

.mud-palette-divider {
    border-color: var(--nexus-border-subtle) !important;
    background-color: var(--nexus-border-subtle) !important;
}

/* MudBlazor komponenter der bruger palette direkte */
.mud-button-text-primary {
    color: var(--nexus-primary) !important;
}

.mud-button-contained-primary {
    background-color: var(--nexus-primary) !important;
}

.mud-button-contained-primary:hover {
    background-color: var(--nexus-primary-hover) !important;
}

.mud-input {
    color: var(--nexus-light-text-primary) !important;
}

.mud-input-label {
    color: var(--nexus-text-muted) !important;
}

.mud-input-helper-text {
    color: var(--nexus-text-muted) !important;
}

/* ============================================
   TOPNAVBAR MUDBLAZOR OVERRIDES
   ============================================ */

/* 
   TopNavBar MudBlazor overrides - Force lysegrå tekst og ikoner.
   
   MudBlazor komponenter (MudButton, MudIcon) har meget høj specificity i deres interne CSS,
   så vi skal bruge meget specifikke selectors med !important for at overskrive dem.
   
   Alle tekst og ikoner i TopNavBar skal være lysegrå (#e2e8f0) for at være læsbare
   på den mørkeblå baggrund (#1e293b).
*/

/* TopNavBar MudButton overrides - Force lysegrå tekst */
.top-navbar .mud-button-root.mud-button-text,
.top-navbar .mud-button-root.mud-button-text .mud-button-label,
.top-navbar .mud-button-root.mud-button-text span,
.top-navbar .mud-button-root.mud-button-text-inherit,
.top-navbar .mud-button-root.mud-button-text-inherit .mud-button-label,
.top-navbar .mud-button-root.mud-button-text-inherit span,
.top-navbar .top-navbar-link.mud-button-root,
.top-navbar .top-navbar-link.mud-button-root .mud-button-label,
.top-navbar .top-navbar-link.mud-button-root span {
    color: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar MudIcon overrides - Force lysegrå ikoner */
.top-navbar .mud-icon,
.top-navbar .mud-icon-root,
.top-navbar .mud-icon svg,
.top-navbar .mud-icon-root svg,
.top-navbar svg {
    color: var(--nexus-topnav-text-muted) !important;
    fill: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar MudIconButton overrides */
.top-navbar .mud-icon-button,
.top-navbar .mud-icon-button-root,
.top-navbar .mud-icon-button .mud-icon,
.top-navbar .mud-icon-button-root .mud-icon {
    color: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar logo link overrides */
.top-navbar .top-navbar-logo,
.top-navbar .top-navbar-logo *,
.top-navbar a.top-navbar-logo,
.top-navbar a.top-navbar-logo * {
    color: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar logo icon overrides */
.top-navbar .top-navbar-logo-icon,
.top-navbar .top-navbar-logo-icon svg,
.top-navbar .top-navbar-logo svg {
    color: var(--nexus-topnav-text-muted) !important;
    fill: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar link icon overrides */
.top-navbar .top-navbar-link-icon,
.top-navbar .top-navbar-link-icon svg,
.top-navbar .top-navbar-link svg {
    color: var(--nexus-topnav-text-muted) !important;
    fill: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar button text overrides (realm context, ruleset, etc.) */
.top-navbar .top-navbar-realm-context-button,
.top-navbar .top-navbar-realm-context-button *,
.top-navbar .top-navbar-ruleset-button,
.top-navbar .top-navbar-ruleset-button * {
    color: var(--nexus-topnav-text-muted) !important;
}

/* TopNavBar MudMenu button overrides */
.top-navbar .mud-menu .mud-button-root,
.top-navbar .mud-menu .mud-button-root .mud-button-label,
.top-navbar .mud-menu .mud-button-root span {
    color: var(--nexus-topnav-text-muted) !important;
}

/*
   TopNavBar MudMenu-flyouts: lys papir + mørk tekst.
   Ved dark MudPalette er TextPrimary ~hvid; TopNavBar tvinger lys menu-baggrund → lav kontrast uden override.
   PopoverClass="top-navbar-menu-dropdown" bruges fordi popover ofte renderes uden for .top-navbar i DOM.
   Bemærk: MudPopover er typisk .mud-popover.mud-paper (uden .mud-menu-paper som barn).
   Denne klassekontrakt må respekteres af moduler der injicerer persisterende global CSS til .mud-popover (fx Combat battlemap.css efter Besøg på /combat).
*/
.top-navbar-menu-dropdown.mud-popover,
.top-navbar-menu-dropdown .mud-menu-paper,
.top-navbar .mud-menu-paper {
    /* Portal-menu: Mud bruger stadig dark-palette vars (lys tekst/ikoner); tving lys popover-semantik. */
    --mud-palette-text-primary: var(--nexus-light-text-primary);
    --mud-palette-text-secondary: var(--nexus-light-text-secondary);
    --mud-palette-action-default: #616161;
    --mud-palette-action-hover: rgba(0, 0, 0, 0.08);
    background-color: var(--nexus-light-bg-primary) !important;
    color: var(--nexus-light-text-primary) !important;
}

.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout),
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-typography,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-menu-item-text,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) > span,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout),
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-typography,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-menu-item-text,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) > span {
    color: var(--nexus-light-text-primary) !important;
}

.top-navbar-menu-dropdown .mud-menu-item.top-navbar-profile-menu-signout,
.top-navbar-menu-dropdown .mud-menu-item.top-navbar-profile-menu-signout span,
.top-navbar .mud-menu-paper .mud-menu-item.top-navbar-profile-menu-signout,
.top-navbar .mud-menu-paper .mud-menu-item.top-navbar-profile-menu-signout span {
    color: var(--nexus-error) !important;
}

.top-navbar-menu-dropdown .top-navbar-profile-menu-name,
.top-navbar .mud-menu-paper .top-navbar-profile-menu-name {
    color: var(--nexus-light-text-primary) !important;
}

.top-navbar-menu-dropdown .top-navbar-profile-menu-email,
.top-navbar .mud-menu-paper .top-navbar-profile-menu-email {
    color: var(--nexus-light-text-secondary) !important;
}

/* Portal-undermenu: mud-menu-item>.mud-icon-root bruger --mud-palette-action-default; top-navbar-link-icon ligger ikke under .top-navbar når Mud teleporter menu. */
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-icon,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-icon-root,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) > .mud-icon-root,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) .top-navbar-link-icon,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) .top-navbar-link-icon svg,
.top-navbar-menu-dropdown .mud-menu-item:not(.top-navbar-profile-menu-signout) svg:not(.mud-chip-root svg):not(.mud-chip svg),
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) .top-navbar-link-icon,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-icon,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) .mud-icon-root,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) > .mud-icon-root,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) .top-navbar-link-icon svg,
.top-navbar .mud-menu-paper .mud-menu-item:not(.top-navbar-profile-menu-signout) svg:not(.mud-chip-root svg):not(.mud-chip svg) {
    color: #616161 !important;
    fill: #616161 !important;
}

.top-navbar-menu-dropdown .mud-menu-item.top-navbar-profile-menu-signout > .mud-icon-root,
.top-navbar-menu-dropdown .mud-menu-item.top-navbar-profile-menu-signout svg,
.top-navbar .mud-menu-paper .mud-menu-item.top-navbar-profile-menu-signout > .mud-icon-root,
.top-navbar .mud-menu-paper .mud-menu-item.top-navbar-profile-menu-signout svg {
    color: var(--nexus-error) !important;
    fill: var(--nexus-error) !important;
}

.top-navbar-menu-dropdown .mud-menu-item .mud-chip .mud-icon,
.top-navbar-menu-dropdown .mud-menu-item .mud-chip svg,
.top-navbar .mud-menu-paper .mud-menu-item .mud-chip .mud-icon,
.top-navbar .mud-menu-paper .mud-menu-item .mud-chip svg {
    color: inherit !important;
    fill: inherit !important;
}

/* ============================================
   CHAT MODULE STYLES
   ============================================ */

/* Chat Window Container - Full-page layout kontrakt */
.nexus-chat-window-container {
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund - override mørk theme */
    height: 100%;
    flex: 1;
    min-height: 0; /* Kritisk for flex children med overflow */
    font-family: var(--nexus-font-body);
}

/* Override main-layout og main-content til light theme */
.main-layout {
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund - override mørk theme */
    color: var(--nexus-light-text-primary) !important;
}

.main-content {
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund - override mørk theme */
}

/* Override navigation tabs i chat området - fjern sorte baggrunde */
.navigation-tabs .nav-tab.active,
.navigation-tabs .mud-button-filled-primary,
.nav-tab.active.mud-button-filled-primary,
.navigation-tabs .mud-button.mud-button-filled-primary,
.navigation-tabs .mud-button-root.mud-button-filled-primary {
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund i stedet for mørk */
    color: var(--nexus-primary) !important; /* Mørk tekst i stedet for hvid */
    border-bottom: 2px solid var(--nexus-primary) !important; /* Understregning for at vise aktiv */
}

/* Override MudBlazor button filled primary i navigation tabs */
.navigation-tabs .mud-button-filled-primary.mud-button-filled,
.navigation-tabs .mud-button-filled-primary.mud-button-filled-primary {
    background-color: var(--nexus-light-bg-primary) !important;
    color: var(--nexus-primary) !important;
}

.navigation-tabs .mud-button-filled-primary.mud-button-filled:hover {
    background-color: var(--nexus-light-bg-surface) !important;
}

.fill-height {
    height: 100vh;
    width: 100vw;
}

/* ============================================
   REALM MANAGEMENT MODULE - MUDBLAZOR OVERRIDES
   ============================================ */

/* 
   RealmManagement module MudBlazor overrides - Amber theme.
   
   Scope: Alle RealmManagement container klasser
   - .realm-detail-container, .realm-overview-container, .realm-create-container
   - .territory-detail-container, .territory-overview-container, .territory-create-container
   - .settlement-detail-container, .settlement-overview-container, .settlement-create-container
   
   Formål: Override MudBlazor komponenter til at bruge realm module's amber farver
   i stedet for standard primary farver.
   
   Farver:
   - Primary: --nexus-module-realm-text (#f59e0b - amber-600)
   - Hover: --nexus-module-realm-text-hover (#d97706 - amber-700)
   - Background: --nexus-module-realm-bg (#fffbeb - amber-50)
*/

/* RealmManagement module - MudButton overrides */
.realm-detail-container .mud-button-filled-primary,
.realm-overview-container .mud-button-filled-primary,
.realm-create-container .mud-button-filled-primary,
.territory-detail-container .mud-button-filled-primary,
.territory-overview-container .mud-button-filled-primary,
.territory-create-container .mud-button-filled-primary,
.settlement-detail-container .mud-button-filled-primary,
.settlement-overview-container .mud-button-filled-primary,
.settlement-create-container .mud-button-filled-primary {
    background-color: var(--nexus-module-realm-text) !important;
    color: var(--nexus-white) !important;
}

.realm-detail-container .mud-button-filled-primary:hover,
.realm-overview-container .mud-button-filled-primary:hover,
.realm-create-container .mud-button-filled-primary:hover,
.territory-detail-container .mud-button-filled-primary:hover,
.territory-overview-container .mud-button-filled-primary:hover,
.territory-create-container .mud-button-filled-primary:hover,
.settlement-detail-container .mud-button-filled-primary:hover,
.settlement-overview-container .mud-button-filled-primary:hover,
.settlement-create-container .mud-button-filled-primary:hover {
    background-color: var(--nexus-module-realm-text-hover) !important;
}

.realm-detail-container .mud-button-outlined-primary,
.realm-overview-container .mud-button-outlined-primary,
.realm-create-container .mud-button-outlined-primary,
.territory-detail-container .mud-button-outlined-primary,
.territory-overview-container .mud-button-outlined-primary,
.territory-create-container .mud-button-outlined-primary,
.settlement-detail-container .mud-button-outlined-primary,
.settlement-overview-container .mud-button-outlined-primary,
.settlement-create-container .mud-button-outlined-primary {
    border-color: var(--nexus-module-realm-text) !important;
    color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-button-outlined-primary:hover,
.realm-overview-container .mud-button-outlined-primary:hover,
.realm-create-container .mud-button-outlined-primary:hover,
.territory-detail-container .mud-button-outlined-primary:hover,
.territory-overview-container .mud-button-outlined-primary:hover,
.territory-create-container .mud-button-outlined-primary:hover,
.settlement-detail-container .mud-button-outlined-primary:hover,
.settlement-overview-container .mud-button-outlined-primary:hover,
.settlement-create-container .mud-button-outlined-primary:hover {
    background-color: var(--nexus-module-realm-bg) !important;
    border-color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-button-text-primary,
.realm-overview-container .mud-button-text-primary,
.realm-create-container .mud-button-text-primary,
.territory-detail-container .mud-button-text-primary,
.territory-overview-container .mud-button-text-primary,
.territory-create-container .mud-button-text-primary,
.settlement-detail-container .mud-button-text-primary,
.settlement-overview-container .mud-button-text-primary,
.settlement-create-container .mud-button-text-primary {
    color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-button-text-primary:hover,
.realm-overview-container .mud-button-text-primary:hover,
.realm-create-container .mud-button-text-primary:hover,
.territory-detail-container .mud-button-text-primary:hover,
.territory-overview-container .mud-button-text-primary:hover,
.territory-create-container .mud-button-text-primary:hover,
.settlement-detail-container .mud-button-text-primary:hover,
.settlement-overview-container .mud-button-text-primary:hover,
.settlement-create-container .mud-button-text-primary:hover {
    background-color: var(--nexus-module-realm-bg) !important;
}

/* RealmManagement module - MudProgress overrides */
.realm-detail-container .mud-progress-circular-primary,
.realm-overview-container .mud-progress-circular-primary,
.realm-create-container .mud-progress-circular-primary,
.territory-detail-container .mud-progress-circular-primary,
.territory-overview-container .mud-progress-circular-primary,
.territory-create-container .mud-progress-circular-primary,
.settlement-detail-container .mud-progress-circular-primary,
.settlement-overview-container .mud-progress-circular-primary,
.settlement-create-container .mud-progress-circular-primary {
    color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-progress-linear-primary,
.realm-overview-container .mud-progress-linear-primary,
.realm-create-container .mud-progress-linear-primary,
.territory-detail-container .mud-progress-linear-primary,
.territory-overview-container .mud-progress-linear-primary,
.territory-create-container .mud-progress-linear-primary,
.settlement-detail-container .mud-progress-linear-primary,
.settlement-overview-container .mud-progress-linear-primary,
.settlement-create-container .mud-progress-linear-primary {
    color: var(--nexus-module-realm-text) !important;
}

/* RealmManagement module - MudTextField overrides */
.realm-detail-container .mud-input-outlined-primary .mud-input-root,
.realm-overview-container .mud-input-outlined-primary .mud-input-root,
.realm-create-container .mud-input-outlined-primary .mud-input-root,
.territory-detail-container .mud-input-outlined-primary .mud-input-root,
.territory-overview-container .mud-input-outlined-primary .mud-input-root,
.territory-create-container .mud-input-outlined-primary .mud-input-root,
.settlement-detail-container .mud-input-outlined-primary .mud-input-root,
.settlement-overview-container .mud-input-outlined-primary .mud-input-root,
.settlement-create-container .mud-input-outlined-primary .mud-input-root {
    border-color: var(--nexus-light-border) !important;
}

.realm-detail-container .mud-input-outlined-primary .mud-input-root:hover,
.realm-overview-container .mud-input-outlined-primary .mud-input-root:hover,
.realm-create-container .mud-input-outlined-primary .mud-input-root:hover,
.territory-detail-container .mud-input-outlined-primary .mud-input-root:hover,
.territory-overview-container .mud-input-outlined-primary .mud-input-root:hover,
.territory-create-container .mud-input-outlined-primary .mud-input-root:hover,
.settlement-detail-container .mud-input-outlined-primary .mud-input-root:hover,
.settlement-overview-container .mud-input-outlined-primary .mud-input-root:hover,
.settlement-create-container .mud-input-outlined-primary .mud-input-root:hover {
    border-color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.realm-overview-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.realm-create-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.territory-detail-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.territory-overview-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.territory-create-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.settlement-detail-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.settlement-overview-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused,
.settlement-create-container .mud-input-outlined-primary .mud-input-root.mud-input-root-focused {
    border-color: var(--nexus-module-realm-text) !important;
}

.realm-detail-container .mud-input-outlined-primary .mud-input-label,
.realm-overview-container .mud-input-outlined-primary .mud-input-label,
.realm-create-container .mud-input-outlined-primary .mud-input-label,
.territory-detail-container .mud-input-outlined-primary .mud-input-label,
.territory-overview-container .mud-input-outlined-primary .mud-input-label,
.territory-create-container .mud-input-outlined-primary .mud-input-label,
.settlement-detail-container .mud-input-outlined-primary .mud-input-label,
.settlement-overview-container .mud-input-outlined-primary .mud-input-label,
.settlement-create-container .mud-input-outlined-primary .mud-input-label {
    color: var(--nexus-light-text-secondary) !important;
}

.realm-detail-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.realm-overview-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.realm-create-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.territory-detail-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.territory-overview-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.territory-create-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.settlement-detail-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.settlement-overview-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused,
.settlement-create-container .mud-input-outlined-primary .mud-input-label.mud-input-label-input-focused {
    color: var(--nexus-module-realm-text) !important;
}

/* RealmManagement module - MudTextField input text color (for edit mode) */
.realm-detail-container .mud-input-outlined-primary input,
.realm-detail-container .mud-input-outlined-primary textarea,
.realm-overview-container .mud-input-outlined-primary input,
.realm-overview-container .mud-input-outlined-primary textarea,
.realm-create-container .mud-input-outlined-primary input,
.realm-create-container .mud-input-outlined-primary textarea,
.territory-detail-container .mud-input-outlined-primary input,
.territory-detail-container .mud-input-outlined-primary textarea,
.territory-overview-container .mud-input-outlined-primary input,
.territory-overview-container .mud-input-outlined-primary textarea,
.territory-create-container .mud-input-outlined-primary input,
.territory-create-container .mud-input-outlined-primary textarea,
.settlement-detail-container .mud-input-outlined-primary input,
.settlement-detail-container .mud-input-outlined-primary textarea,
.settlement-overview-container .mud-input-outlined-primary input,
.settlement-overview-container .mud-input-outlined-primary textarea,
.settlement-create-container .mud-input-outlined-primary input,
.settlement-create-container .mud-input-outlined-primary textarea {
    color: var(--nexus-light-text-primary) !important;
}

/* Global MudTextField input text color (for all modules in edit mode) */
.mud-input-outlined-primary input,
.mud-input-outlined-primary textarea,
.mud-input-outlined input,
.mud-input-outlined textarea,
.mud-input-text input,
.mud-input-text textarea,
.mud-input-underlined input,
.mud-input-underlined textarea {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect input text color (for all modules) */
.mud-select .mud-input-control input,
.mud-select .mud-input-control {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect selected value text color - sikrer at valgte værdi har samme farve som MudTextField */
.mud-select .mud-input-root,
.mud-select .mud-input-root input,
.mud-select .mud-input-root .mud-input,
.mud-select .mud-input-root .mud-select-input,
.mud-select .mud-input-root .mud-input-slot,
.mud-select .mud-input-root .mud-input-slot input {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect chip styling (for multi-select) */
.mud-select .mud-chip {
    color: var(--nexus-light-text-primary) !important;
}

/* MudSelect placeholder text */
.mud-select .mud-input-root .mud-input-placeholder {
    color: var(--nexus-light-text-secondary) !important;
}

/* Chat Sidebar - OBSOLETE: Brug .chat-sidebar i stedet */
.nexus-chat-sidebar {
    width: 350px;
    min-width: 250px;
    background: var(--nexus-light-bg-surface) !important; /* Hvid baggrund */
    border-right: 1px solid var(--nexus-light-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Nexus Chat Sidebar - tekstfarver (slate-700 som Realm modulet) */
.nexus-chat-sidebar .mud-typography,
.nexus-chat-sidebar .mud-typography-h6,
.nexus-chat-sidebar .mud-typography-subtitle2,
.nexus-chat-sidebar .mud-typography-body2,
.nexus-chat-sidebar .mud-typography-caption,
.nexus-chat-sidebar .chat-item-name,
.nexus-chat-sidebar .chat-title,
.nexus-chat-sidebar .friend-item-name {
    color: var(--nexus-light-slate-700) !important;
}

/* Nexus Chat Sidebar - fjern sorte baggrunde */
.nexus-chat-sidebar .mud-list-item,
.nexus-chat-sidebar .mud-list,
.nexus-chat-sidebar .mud-list-root {
    background-color: transparent !important;
}

.nexus-chat-sidebar .mud-list-item:hover {
    background-color: var(--nexus-light-bg-primary) !important;
}

/* Sikr hvid baggrund på alle child elementer */
.nexus-chat-sidebar > * {
    background-color: var(--nexus-light-bg-surface) !important;
}

.nexus-chat-sidebar .mud-list,
.nexus-chat-sidebar .mud-list-root {
    background-color: transparent !important;
}

/* Composer - fjern sorte baggrunde */
.composer,
.composer.mud-paper,
.composer > .mud-paper,
.composer .mud-paper {
    background-color: var(--nexus-light-bg-surface) !important;
}

.composer .mud-input-root,
.composer .mud-input-control,
.composer .mud-input-root > * {
    background-color: var(--nexus-light-bg-primary) !important;
}

/* Friends område - fjern sorte baggrunde */
.friends-content .mud-list,
.friends-content .mud-list-item,
.friends-list-container .mud-list,
.friends-list-container .mud-list-item {
    background-color: transparent !important;
}

.friends-content .mud-list-item:hover,
.friends-list-container .mud-list-item:hover {
    background-color: var(--nexus-light-bg-primary) !important;
}

.chat-sidebar-header {
    padding: var(--nexus-spacing-md);
    border-bottom: 1px solid var(--nexus-border);
}

.chat-title {
    font-family: var(--nexus-font-body);
    font-weight: 600;
    font-size: 20px;
    color: var(--nexus-text-primary);
    margin: 0;
}

.navigation-tabs {
    display: flex;
    flex-direction: row;
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--nexus-border);
}

.nav-tab {
    flex: 1;
    justify-content: center;
    padding: 12px var(--nexus-spacing-md);
    border-radius: 0;
    text-transform: none;
    font-weight: 500;
    min-height: 48px;
}

/* Override MudBlazor filled primary buttons i navigation tabs - fjern sorte baggrunde */
.navigation-tabs .mud-button-filled-primary,
.navigation-tabs .mud-button.mud-button-filled-primary,
.navigation-tabs .mud-button-root.mud-button-filled-primary,
.nav-tab.mud-button-filled-primary {
    background-color: var(--nexus-light-bg-primary) !important; /* Hvid baggrund i stedet for mørk */
    color: var(--nexus-primary) !important; /* Mørk tekst i stedet for hvid */
    border-bottom: 2px solid var(--nexus-primary) !important; /* Understregning for at vise aktiv */
}

.navigation-tabs .mud-button-filled-primary:hover {
    background-color: var(--nexus-light-bg-surface) !important;
}

.nav-tab.active {
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund i stedet for mørk */
    color: var(--nexus-primary) !important; /* Mørk tekst i stedet for hvid */
    border-bottom: 2px solid var(--nexus-primary) !important; /* Understregning for at vise aktiv */
}

.nav-tab:not(.active) {
    background: transparent;
    color: var(--nexus-text-muted);
}

.nav-tab:not(.active):hover {
    background: var(--nexus-bg-elevated);
}

.chat-search {
    padding: 12px var(--nexus-spacing-md);
}

.chat-search-field {
    width: 100%;
}

.chat-list-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--nexus-spacing-sm) 0;
}

.chat-thread-list {
    padding: 0;
}

.chat-list-item {
    margin: 4px var(--nexus-spacing-sm);
    border-radius: var(--nexus-radius-md);
    cursor: pointer;
}

.chat-list-item:hover {
    background: var(--nexus-bg-elevated);
}

.chat-list-item.selected {
    background: var(--nexus-primary-opacity-10);
    border-left: 3px solid var(--nexus-primary);
}

.empty-conversation-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--nexus-spacing-lg);
    color: var(--nexus-text-muted);
}

.empty-message {
    color: var(--nexus-light-text-secondary);
    font-size: 16px;
    margin-bottom: var(--nexus-spacing-md);
}

.friends-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nexus-light-bg-surface) !important; /* Hvid baggrund i stedet for mørk */
}

.create-team-button-container {
    padding: 12px var(--nexus-spacing-md);
}

.create-team-button {
    text-transform: none;
    font-weight: 500;
}

.friends-list-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--nexus-spacing-sm) 0;
}

/* Chat Main Content - Container for chat conversation eller ChatOverview */
.nexus-chat-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund - override mørk theme */
    overflow: hidden; /* Container skal ikke scrolles - kun indhold */
    min-height: 0; /* Kritisk for flex children med overflow */
}

/* Chat Overview - Fylder hele main-content området */
.chat-overview-container,
.nexus-chat-overview {
    flex: 1;
    padding: var(--nexus-spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    background: var(--nexus-light-bg-primary);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Kritisk for flex children med overflow */
}

.welcome-section {
    margin-bottom: var(--nexus-spacing-xl);
}

.welcome-title {
    font-family: var(--nexus-font-heading);
    font-weight: 600;
    font-size: 24px;
    color: var(--nexus-light-text-primary);
    margin: 0 0 var(--nexus-spacing-sm) 0;
    text-transform: none;
}

.welcome-subtitle {
    font-family: var(--nexus-font-body);
    font-size: 16px;
    color: var(--nexus-light-text-secondary);
    margin: 0;
}

.statistics-cards,
.nexus-statistics-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--nexus-spacing-md);
    margin-bottom: var(--nexus-spacing-xl);
}

@media (max-width: 1200px) {
    .statistics-cards,
    .nexus-statistics-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .statistics-cards,
    .nexus-statistics-cards {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background: var(--nexus-light-bg-surface);
    border: 1px solid var(--nexus-light-border);
    border-radius: var(--nexus-radius-lg);
    box-shadow: var(--nexus-light-shadow-sm);
}

.stat-card-content-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--nexus-spacing-md);
    padding: var(--nexus-spacing-sm);
}

.stat-icon {
    flex-shrink: 0;
}

.stat-icon-blue {
    color: var(--nexus-primary);
}

.stat-icon-red {
    color: var(--destructive);
}

.stat-icon-green {
    color: var(--nexus-success);
}

.stat-icon-purple {
    color: var(--nexus-team-icon);
}

.stat-label {
    color: var(--nexus-light-text-secondary);
    font-size: 14px;
    margin: 0;
}

.stat-value {
    color: var(--nexus-light-text-primary);
    font-weight: 600;
    font-size: 32px;
    margin: 0;
}

.recent-conversations-section,
.nexus-recent-conversations {
    margin-bottom: var(--nexus-spacing-xl);
}

.recent-conversations-card {
    background: var(--nexus-light-bg-surface);
    border: 1px solid var(--nexus-light-border);
    border-radius: var(--nexus-radius-lg);
    overflow: hidden;
    box-shadow: var(--nexus-light-shadow-sm);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nexus-spacing-md) var(--nexus-spacing-lg);
    border-bottom: 1px solid var(--nexus-light-border);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--nexus-spacing-sm);
}

.section-icon {
    color: var(--nexus-light-text-secondary);
}

.section-title {
    font-family: var(--nexus-font-body);
    font-weight: 600;
    font-size: 20px;
    color: var(--nexus-light-text-primary);
    margin: 0;
}

.section-count {
    color: var(--nexus-light-text-secondary);
    font-size: 14px;
}

.conversations-list-wrapper {
    display: flex;
    flex-direction: column;
}

.conversations-list {
    display: flex;
    flex-direction: column;
}

.conversation-item {
    border-bottom: 1px solid var(--nexus-light-border);
    cursor: pointer;
    transition: background-color var(--nexus-transition-normal);
}

.conversation-item:last-child {
    border-bottom: none;
}

.conversation-item:hover {
    background: var(--nexus-light-bg-primary);
}

.conversation-item-content {
    display: flex;
    align-items: center;
    gap: var(--nexus-spacing-md);
    padding: var(--nexus-spacing-md) var(--nexus-spacing-lg);
}

.conversation-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--nexus-light-gray-100);
    border: 1px solid var(--nexus-light-border);
}

.conversation-name-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.conversation-group-icon {
    color: var(--nexus-light-text-muted);
    font-size: 16px;
}

.conversation-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nexus-spacing-xs);
}

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nexus-spacing-md);
}

.conversation-name {
    font-family: var(--nexus-font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--nexus-light-text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-time {
    color: var(--nexus-light-text-secondary);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}

.conversation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nexus-spacing-md);
}

.conversation-preview {
    color: var(--nexus-light-text-secondary);
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.conversation-badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--nexus-spacing-xs);
    font-size: 12px;
    font-weight: 600;
}

.unread-badge {
    background: var(--nexus-primary);
    color: var(--primary-foreground);
}

.conversation-members {
    color: var(--nexus-light-text-secondary);
    font-size: 12px;
    margin-top: var(--nexus-spacing-xs);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--nexus-spacing-2xl);
    text-align: center;
}

.create-conversation-button {
    margin-top: var(--nexus-spacing-sm);
}

.quick-tips-section {
    margin-top: var(--nexus-spacing-xl);
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: var(--nexus-spacing-md) 0 0 0;
}

.tips-list li {
    padding: var(--nexus-spacing-sm) 0;
    padding-left: var(--nexus-spacing-lg);
    position: relative;
}

.tips-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--nexus-primary);
    font-size: 20px;
    line-height: 1;
}

.tip-text {
    color: var(--nexus-light-text-secondary);
    font-size: 14px;
    margin: 0;
}

/* Message Bubbles */
.bubble-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 90%;
    min-width: 0;
}

.nexus-message-bubble {
    position: relative;
    margin-bottom: 12px;
}

.bubble {
    padding: 12px var(--nexus-spacing-md);
    border-radius: var(--nexus-radius-xl);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    position: relative;
}

.nexus-message-bubble-mine {
    background: #253348;
    color: #cbd5e1;
    border-top-right-radius: 4px;
    margin-left: auto;
}

.nexus-message-bubble-theirs {
    background: var(--nexus-topnav-bg);
    color: #e2e8f0;
    border-top-left-radius: 4px;
    margin-right: auto;
}

.bubble.theirs .message-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--nexus-text-muted);
    margin-bottom: 4px;
}

.time {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bubble.mine .time {
    justify-content: flex-end;
    color: var(--nexus-white-opacity-70);
}

.bubble.theirs .time {
    justify-content: flex-start;
    color: var(--nexus-text-muted);
}

.message-timestamp {
    font-size: 0.68rem;
    opacity: 0.55;
    margin-top: 3px;
    color: var(--nexus-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-timestamp-mine {
    justify-content: flex-end;
}

.message-timestamp-theirs {
    justify-content: flex-start;
}

.message-actions {
    opacity: 0;
    transition: opacity var(--nexus-transition-normal);
}

.message-container:hover .message-timestamp {
    font-size: 0.68rem;
    opacity: 0.55;
    margin-top: 3px;
    color: var(--nexus-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-timestamp-mine {
    justify-content: flex-end;
}

.message-timestamp-theirs {
    justify-content: flex-start;
}

.message-actions {
    opacity: 1;
}

.character-info {
    display: flex;
    align-items: center;
    gap: var(--nexus-spacing-sm);
    margin-bottom: 4px;
    padding: 0 4px;
}

.character-info-mine {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.character-info-theirs {
    justify-content: flex-start;
}

/* Message Avatar */
.message-avatar {
    align-self: flex-end;
    flex-shrink: 0; /* Forhindrer avatar i at krympe i smalle layouts (fx workspace chat) */
}

/* Message Text Styles */
.message-text-deleted {
    font-style: italic;
    opacity: 0.6;
}

.message-text {
    margin: 0;
}

.message-text-edited {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 4px;
}

/* Message Actions Button */
.message-actions-button {
    min-width: 24px;
    min-height: 24px;
    opacity: 0.7;
}

/* Impersonate Dialog */
.impersonate-card {
    cursor: pointer;
}

.impersonate-card-selected {
    cursor: pointer;
    border: 2px solid var(--nexus-primary);
}

.impersonate-button {
    min-width: 44px;
    min-height: 44px;
}

/* Thread List */
.thread-list-item {
    cursor: pointer;
}

.character-avatar-large {
    font-size: 20px;
    line-height: 1;
}

.character-name-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.character-name {
    font-weight: 600;
    color: var(--nexus-white-opacity-90);
    margin: 0;
}

.bubble.theirs .character-name {
    color: var(--nexus-text-primary);
}

.sender-name {
    font-size: 11px;
    color: var(--nexus-white-opacity-60);
    margin: 0;
}

.bubble.theirs .sender-name {
    color: var(--nexus-text-muted);
}

/* Composer */
.composer {
    display: flex;
    align-items: center;
    background: var(--nexus-light-bg-surface) !important; /* Hvid baggrund i stedet for mørk */
    border-top: 1px solid var(--nexus-light-border);
    padding: 12px var(--nexus-spacing-md);
    gap: 12px;
}

.composer-input {
    flex: 1;
}

.composer-input :global(.mud-input-root) {
    background: var(--nexus-light-bg-primary) !important; /* Hvid baggrund i stedet for mørk */
    border: 1px solid var(--nexus-light-border);
    border-radius: var(--nexus-radius-lg);
}

.composer-input :global(.mud-input-root:hover) {
    border-color: var(--nexus-border-hover);
}

.composer-input :global(.mud-input-root.mud-input-root-focused) {
    border-color: var(--nexus-primary);
}

.composer-send-button {
    flex-shrink: 0;
    color: var(--nexus-primary);
}

.character-selector-container {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.character-selector-button {
    width: 100%;
    justify-content: flex-start;
    text-transform: none;
    border: 2px solid var(--nexus-border);
    background: var(--nexus-bg-elevated);
    padding: var(--nexus-spacing-sm) 12px;
}

.character-selector-button:hover {
    border-color: var(--nexus-border-hover);
    background: var(--nexus-bg-elevated);
}

.character-avatar {
    font-size: 20px;
    margin-right: var(--nexus-spacing-sm);
}

.character-info {
    flex: 1;
    text-align: left;
}

.character-name {
    color: var(--nexus-text-primary);
    font-weight: 500;
    margin: 0;
}

.character-details {
    color: var(--nexus-text-muted);
    font-size: 12px;
    margin: 0;
}

.character-dropdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: transparent;
}

.character-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: var(--nexus-spacing-sm);
    background: var(--nexus-bg-surface);
    border: 1px solid var(--nexus-border);
    border-radius: var(--nexus-radius-md);
    box-shadow: var(--nexus-shadow-lg);
    z-index: 20;
    max-height: 300px;
    overflow-y: auto;
}

.character-dropdown-header {
    padding: 12px var(--nexus-spacing-md);
    border-bottom: 1px solid var(--nexus-border);
}

.character-dropdown-list {
    padding: 4px;
}

.character-option {
    justify-content: flex-start;
    text-transform: none;
    padding: var(--nexus-spacing-sm) 12px;
    margin: 2px 0;
    border-radius: 6px;
}

.character-option:hover {
    background: var(--nexus-bg-elevated);
}

.character-option.selected {
    background: var(--nexus-primary-opacity-10);
}

.character-option-avatar {
    font-size: 24px;
    margin-right: 12px;
}

.character-option-info {
    flex: 1;
    text-align: left;
}

.character-option-details {
    color: var(--nexus-text-muted);
    font-size: 12px;
    margin: 0;
}

/* Conversation View - Fylder hele main-content området */
.conversation-root {
    background: var(--nexus-bg-primary);
    height: 100%;
    flex: 1;
    min-height: 0; /* Kritisk for flex children med overflow */
}

.conversation-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1;
    min-height: 0; /* Kritisk for flex children */
    background: var(--nexus-bg-primary);
}

.conversation-placeholder-text {
    color: var(--nexus-text-muted);
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px var(--nexus-spacing-md);
    background: var(--nexus-bg-surface);
    border-bottom: 1px solid var(--nexus-border);
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    background: var(--nexus-bg-elevated);
    border: 1px solid var(--nexus-border);
}

.chat-header-name {
    font-family: var(--nexus-font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--nexus-text-primary);
    margin: 0;
}

.chat-header-menu {
    color: var(--nexus-text-muted);
}

.messages {
    flex: 1;
    min-height: 0; /* Kritisk for flex children med overflow */
    padding: var(--nexus-spacing-md);
    background: var(--nexus-bg-primary);
    font-family: var(--nexus-font-body);
    font-size: 14px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar styling */
.chat-list-container::-webkit-scrollbar,
.friends-list-container::-webkit-scrollbar,
.character-dropdown::-webkit-scrollbar {
    width: 8px;
}

.chat-list-container::-webkit-scrollbar-track,
.friends-list-container::-webkit-scrollbar-track,
.character-dropdown::-webkit-scrollbar-track {
    background: var(--nexus-bg-primary);
}

.chat-list-container::-webkit-scrollbar-thumb,
.friends-list-container::-webkit-scrollbar-thumb,
.character-dropdown::-webkit-scrollbar-thumb {
    background: var(--nexus-border);
    border-radius: 4px;
}

.chat-list-container::-webkit-scrollbar-thumb:hover,
.friends-list-container::-webkit-scrollbar-thumb:hover,
.character-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--nexus-border-hover);
}

/* ============================================
   EXPANDABLE LIST PATTERN
   ============================================ */

/*
   Genbrugeligt expand/collapse pattern til lister med fold-ud funktionalitet.
   Bruges til: Quest stages, tree views, nested items, accordions, etc.
   
   Struktur:
   .nexus-expandable-list          - Container for hele listen
     .nexus-expandable-item        - Wrapper for et enkelt item med mulig expansion
       .nexus-expandable-header    - Klikbart header row (altid synligt)
         .nexus-expand-toggle      - Expand/collapse knap med ikon
         [content]                 - Item indhold
       .nexus-expandable-content   - Fold-ud indhold (skjult som default)
         .nexus-nested-item        - Nested items i expanded content
*/

/* Expandable list container */
.nexus-expandable-list {
    display: flex;
    flex-direction: column;
    gap: var(--nexus-spacing-sm);
}

/* Individual expandable item wrapper */
.nexus-expandable-item {
    border: 1px solid var(--nexus-light-border);
    border-radius: var(--nexus-radius-lg);
    overflow: hidden;
    background: var(--nexus-light-bg-surface);
}

/* Header row - always visible */
.nexus-expandable-header {
    display: flex;
    align-items: center;
    gap: var(--nexus-spacing-sm);
    padding: var(--nexus-spacing-md);
    transition: background-color var(--nexus-transition-normal);
}

.nexus-expandable-header:hover {
    background-color: var(--nexus-light-bg-primary);
}

/* Expand/collapse toggle button */
.nexus-expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--nexus-radius-sm);
    transition: background-color var(--nexus-transition-normal);
    flex-shrink: 0;
}

.nexus-expand-toggle:hover {
    background-color: var(--nexus-light-bg-primary);
}

/* Expand icon styling */
.nexus-expand-icon {
    color: var(--nexus-light-text-secondary);
    transition: transform var(--nexus-transition-normal);
}

/* Expanded content section */
.nexus-expandable-content {
    background-color: var(--nexus-light-bg-primary);
    border-top: 1px solid var(--nexus-light-border);
    padding: var(--nexus-spacing-sm) var(--nexus-spacing-md);
}

/* Nested item within expanded content */
.nexus-nested-item {
    display: flex;
    align-items: center;
    gap: var(--nexus-spacing-sm);
    padding: var(--nexus-spacing-sm);
    margin-left: 28px;
    border-radius: var(--nexus-radius-md);
    cursor: pointer;
    transition: background-color var(--nexus-transition-normal);
}

.nexus-nested-item:hover {
    background-color: var(--nexus-light-bg-surface);
}

/* Status icon container */
.nexus-status-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Item info container - flexible content area */
.nexus-item-info {
    flex: 1;
    min-width: 0;
}

/* Title row with space-between alignment */
.nexus-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nexus-spacing-md);
}

/* Item title styling */
.nexus-item-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--nexus-light-text-primary);
}

/* Item status text */
.nexus-item-status {
    font-size: 12px;
    color: var(--nexus-light-text-secondary);
    flex-shrink: 0;
}

/* Item description */
.nexus-item-description {
    font-size: 13px;
    color: var(--nexus-light-text-secondary);
    margin-top: 2px;
    display: block;
}

/* Nested item name */
.nexus-nested-item-name {
    flex: 1;
    font-size: 14px;
    color: var(--nexus-light-text-primary);
    font-weight: 500;
}

/* Nested item status */
.nexus-nested-item-status {
    font-size: 12px;
    color: var(--nexus-light-text-secondary);
    flex-shrink: 0;
}

/* Navigation arrow - fades in on hover */
.nexus-nav-arrow {
    color: var(--nexus-light-text-secondary);
    opacity: 0.5;
    transition: opacity var(--nexus-transition-normal);
}

.nexus-nested-item:hover .nexus-nav-arrow {
    opacity: 1;
}

/* Empty state text for expanded content */
.nexus-empty-nested-text {
    color: var(--nexus-light-text-secondary);
    font-size: 13px;
    font-style: italic;
    margin-left: 28px;
    padding: var(--nexus-spacing-sm) 0;
}

/* Clickable info area */
.nexus-clickable-info {
    cursor: pointer;
    flex: 1;
}

/* ============================================
   MUDSWITCH STYLING - Red/Green states
   ============================================ */

/* Switch track - transparent background with visible outline */
.mud-switch .mud-switch-track {
    background-color: var(--switch-background) !important;
    box-shadow: inset 0 0 0 1px var(--ui-border) !important;
    opacity: 1 !important;
}

/* Switch span should not show any outline */
.mud-switch .mud-switch-span {
    background-color: var(--switch-background) !important;
    box-shadow: none !important;
    border: none !important;
}

/* Switch track hover - keep transparent */
.mud-switch:hover .mud-switch-track,
.mud-switch:hover .mud-switch-span {
    background-color: var(--switch-background) !important;
}

.mud-switch.mud-checked:hover .mud-switch-track,
.mud-switch.mud-checked:hover .mud-switch-span {
    background-color: var(--switch-background) !important;
}

/* Ensure checked track stays visible */
.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1 !important;
}

/* Switch thumb - color is driven by currentColor on mud-switch-base */
.mud-switch .mud-switch-base {
    color: var(--switch-off) !important;
    background-color: transparent !important;
}

.mud-switch .mud-switch-base.mud-checked {
    color: var(--switch-on) !important;
    background-color: transparent !important;
}

/* Hover states - slightly darker thumb */
.mud-switch:hover .mud-switch-base {
    color: var(--switch-off-hover) !important;
    background-color: transparent !important;
}

.mud-switch:hover .mud-switch-base.mud-checked,
.mud-switch .mud-switch-base.mud-checked:hover {
    color: var(--switch-on-hover) !important;
    background-color: transparent !important;
}

/* Legacy fallback if MudBlazor outputs thumb spans */
.mud-switch .mud-switch-thumb {
    background-color: var(--switch-off) !important;
}

.mud-switch.mud-checked .mud-switch-thumb {
    background-color: var(--switch-on) !important;
}

.mud-switch:hover .mud-switch-thumb {
    background-color: var(--switch-off-hover) !important;
}

.mud-switch.mud-checked:hover .mud-switch-thumb {
    background-color: var(--switch-on-hover) !important;
}