/* 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;
}


/* Global language selector: keep the globe affordance visible in the crowded top navbar. */
.top-navbar .top-navbar-language-selector,
.top-navbar .top-navbar-language-button {
    flex-shrink: 0;
}

.top-navbar .top-navbar-language-button {
    min-width: 36px !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
}

.top-navbar-menu-dropdown .top-navbar-language-option {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 7rem;
}

.top-navbar-menu-dropdown .top-navbar-language-flag {
    width: 1.25rem;
    height: 0.875rem;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
}

.top-navbar-menu-dropdown .top-navbar-language-flag--da {
    background:
        linear-gradient(90deg, transparent 30%, #fff 30%, #fff 42%, transparent 42%),
        linear-gradient(0deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%),
        #c60c30;
}

.top-navbar-menu-dropdown .top-navbar-language-flag--en {
    background:
        linear-gradient(27deg, transparent 38%, #fff 38%, #fff 45%, #c8102e 45%, #c8102e 52%, #fff 52%, #fff 59%, transparent 59%),
        linear-gradient(153deg, transparent 38%, #fff 38%, #fff 45%, #c8102e 45%, #c8102e 52%, #fff 52%, #fff 59%, transparent 59%),
        linear-gradient(0deg, transparent 36%, #fff 36%, #fff 64%, transparent 64%),
        linear-gradient(90deg, transparent 36%, #fff 36%, #fff 64%, transparent 64%),
        linear-gradient(0deg, transparent 44%, #c8102e 44%, #c8102e 56%, transparent 56%),
        linear-gradient(90deg, transparent 44%, #c8102e 44%, #c8102e 56%, transparent 56%),
        #012169;
}

/* 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;
}


/* =====================================================================
   NEXUS UI V3 ("Bronze") - opt-in tema for /v3 demo
   Additivt. Scopet til .nexus-v3-root + .nexus-v3-pop (popovers/dialoger).
   Classic og V2 er upaavirket. Tokens spejler NexusV3Theme.cs (hex).
   ===================================================================== */
.nexus-v3-root,
.nexus-v3-pop {
    --v3-background: #070605;
    --v3-background-2: #0d0b08;
    --v3-surface: #100e09;
    --v3-surface-raised: #221d12;
    --v3-text-primary: #e8dcc2;
    --v3-text-secondary: #8f7d5e;
    --v3-action-primary: #c4a04c;
    --v3-action-primary-hover: #eedb96;
    --v3-action-primary-text: #070605;
    --v3-action-secondary: #46525c;
    --v3-action-secondary-text: #e8dcc2;
    --v3-border: #4a3a26;
    --v3-border-strong: #84653a;
    --v3-ring: #ffeec0;
    --v3-danger: #7a1d15;
    --v3-danger-text: #f5d6cf;
    --v3-display: var(--nexus-font-lore);
    --v3-body: 'Inter', system-ui, sans-serif;
    --v3-lore: 'Cormorant Garamond', Georgia, serif;

    --ui-background: var(--v3-background);
    --ui-surface: var(--v3-surface);
    --ui-surface-muted: var(--v3-surface-raised);
    --ui-text-primary: var(--v3-text-primary);
    --ui-text-secondary: var(--v3-text-secondary);
    --ui-action-primary: var(--v3-action-primary);
    --ui-action-primary-text: var(--v3-action-primary-text);
    --ui-action-secondary: var(--v3-action-secondary);
    --ui-action-secondary-text: var(--v3-action-secondary-text);
    --ui-error: var(--v3-danger);
    --ui-error-text: var(--v3-danger-text);
    --ui-border: var(--v3-border);
    --ui-ring: var(--v3-ring);
    --ui-radius: var(--radius-md);
}

.nexus-v3-root {
    min-height: 100vh;
    background:
        radial-gradient(900px 460px at 20% 0%, color-mix(in srgb, var(--v3-border-strong) 22%, transparent), transparent 60%),
        linear-gradient(180deg, var(--v3-background-2), var(--v3-background));
    color: var(--ui-text-primary);
    font-family: var(--v3-body);
}

.nexus-v3-root h1,
.nexus-v3-root h2,
.nexus-v3-root h3,
.nexus-v3-root h4,
.nexus-v3-root h5,
.nexus-v3-root h6,
.nexus-v3-root .v3-title,
.nexus-v3-root .v3-shell-brand,
.nexus-v3-root .v3-section-title {
    font-family: var(--v3-display);
}

.nexus-v3-root .mud-palette-primary { background-color: var(--ui-action-primary) !important; color: var(--ui-action-primary) !important; }
.nexus-v3-root .mud-palette-secondary { background-color: var(--ui-action-secondary) !important; color: var(--ui-action-secondary) !important; }
.nexus-v3-root .mud-palette-background { background-color: var(--ui-background) !important; }
.nexus-v3-root .mud-palette-surface { background-color: var(--ui-surface) !important; }
.nexus-v3-root .mud-palette-text-primary { color: var(--ui-text-primary) !important; }
.nexus-v3-root .mud-palette-text-secondary { color: var(--ui-text-secondary) !important; }

.nexus-v3-root .mud-paper,
.nexus-v3-root .mud-card {
    background-color: var(--ui-surface);
    color: var(--ui-text-primary);
    border: 1px solid var(--ui-border);
}

.nexus-v3-root .mud-button-filled-primary {
    background: linear-gradient(180deg, var(--v3-action-primary-hover), var(--ui-action-primary));
    color: var(--ui-action-primary-text);
}

.nexus-v3-root .mud-button-outlined-secondary {
    color: var(--ui-text-primary);
    border-color: var(--v3-border-strong);
}

.nexus-v3-root .mud-input-control,
.nexus-v3-root .mud-input,
.nexus-v3-root .mud-input-slot {
    color: var(--ui-text-primary) !important;
}

.nexus-v3-root .mud-select .mud-input-control,
.nexus-v3-root .mud-select .mud-input-root,
.nexus-v3-root .mud-select .mud-input,
.nexus-v3-root .mud-select .mud-input-slot,
.nexus-v3-root .mud-select .mud-select-input {
    background-color: var(--v3-surface-raised) !important;
    color: var(--ui-text-primary) !important;
    border-radius: var(--ui-radius) !important;
}

.nexus-v3-root .mud-select .mud-input-control {
    border: 0 !important;
}

.nexus-v3-root .mud-select.mud-input-outlined .mud-input-root .mud-input-slot .mud-select-input,
.nexus-v3-root .mud-select.mud-input-outlined .mud-input-root .mud-input-slot,
.nexus-v3-root .mud-select.mud-input-outlined .mud-input-root .mud-select-input,
.nexus-v3-root .mud-select.mud-input-outlined .mud-input-root .mud-input-slot input,
.nexus-v3-root .mud-select .mud-input-root .mud-input-slot .mud-select-input,
.nexus-v3-root .mud-select .mud-input-root .mud-input-slot,
.nexus-v3-root .mud-select .mud-input-root .mud-select-input,
.nexus-v3-root .mud-select .mud-input-root .mud-input-slot input {
    background-color: var(--v3-surface-raised) !important;
    color: var(--ui-text-primary) !important;
}

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

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

.nexus-v3-root .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--v3-border-strong) !important;
}

.nexus-v3-root .mud-select .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
}

.nexus-v3-root .mud-input-control:hover .mud-input.mud-input-outlined .mud-input-outlined-border,
.nexus-v3-root .mud-input-control .mud-input-root.mud-focused .mud-input-outlined-border {
    border-color: var(--ui-ring) !important;
}

.nexus-v3-root .mud-input-label,
.nexus-v3-root .mud-input-adornment .mud-icon-root {
    color: var(--ui-text-secondary) !important;
}

.nexus-v3-pop.mud-popover,
.nexus-v3-pop.mud-popover-paper,
.nexus-v3-pop.mud-paper,
.nexus-v3-pop .mud-popover,
.nexus-v3-pop .mud-popover-paper {
    background-color: var(--v3-surface-raised) !important;
    color: var(--ui-text-primary) !important;
    border: 1px solid var(--v3-border-strong);
}

.nexus-v3-pop.mud-dialog,
.nexus-v3-pop .mud-dialog-container .mud-paper {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text-primary) !important;
    border: 1px solid var(--v3-border-strong);
}

.nexus-v3-pop.mud-popover-paper,
.nexus-v3-pop.mud-paper,
.nexus-v3-pop .mud-popover-paper {
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--v3-background) 72%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--v3-ring) 8%, transparent);
}

.nexus-v3-pop.mud-list,
.nexus-v3-pop .mud-list,
.nexus-v3-pop .mud-list-root,
.nexus-v3-pop .mud-select-list,
.nexus-v3-pop.mud-list-item,
.nexus-v3-pop .mud-list-item,
.nexus-v3-pop .mud-list-item-root,
.nexus-v3-pop .mud-select-item,
.nexus-v3-pop .mud-paper {
    background-color: var(--v3-surface-raised) !important;
    color: var(--ui-text-primary) !important;
}

.nexus-v3-pop .mud-list-item:hover,
.nexus-v3-pop .mud-list-item-root:hover,
.nexus-v3-pop .mud-select-item:hover,
.nexus-v3-pop .mud-list-item.mud-selected,
.nexus-v3-pop .mud-list-item-root.mud-selected,
.nexus-v3-pop .mud-selected-item {
    background-color: var(--ui-surface-muted) !important;
}

.nexus-v3-pop .mud-list-item-text,
.nexus-v3-pop .mud-list-item-text *,
.nexus-v3-pop .mud-select-item,
.nexus-v3-pop .mud-select-item * {
    color: var(--ui-text-primary) !important;
}

.v3-layout { display: flex; flex-direction: column; }

.v3-shell-top {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 64px;
    padding: 0 var(--space-lg);
    background: color-mix(in srgb, var(--v3-background-2) 92%, transparent);
    border-bottom: 1px solid var(--ui-border);
}

.v3-shell-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ui-text-primary);
    text-decoration: none;
    font-weight: 700;
}

.v3-shell-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    color: var(--ui-action-primary-text);
    background: linear-gradient(180deg, var(--v3-action-primary-hover), var(--ui-action-primary));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v3-ring) 45%, transparent);
}

.v3-shell-sub { color: var(--ui-text-secondary); }

.v3-shell-links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.v3-shell-link { color: var(--ui-text-secondary) !important; }
.v3-shell-link:hover { color: var(--ui-action-primary) !important; }
.v3-shell-spacer { flex: 1 1 auto; min-width: var(--space-sm); }
.nexus-v3-root .v3-user-menu { display: flex; align-items: center; }
.nexus-v3-root .v3-user-button {
    min-width: 0;
    color: var(--ui-text-secondary) !important;
    font-family: var(--v3-body);
    text-transform: none;
}
.nexus-v3-root .v3-user-button:hover {
    color: var(--ui-action-primary) !important;
    background: color-mix(in srgb, var(--ui-surface-muted) 68%, transparent);
}
.nexus-v3-root .v3-user-button .mud-button-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.nexus-v3-root .v3-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--v3-action-primary-hover), var(--ui-action-primary));
    color: var(--ui-action-primary-text);
    font-family: var(--v3-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}
.nexus-v3-root .v3-user-button-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nexus-v3-root .v3-user-login-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nexus-v3-pop.v3-user-menu-pop.mud-popover,
.nexus-v3-pop.v3-user-menu-pop .mud-popover-paper {
    min-width: 246px;
}
.nexus-v3-pop.v3-user-menu-pop .mud-menu-item {
    min-height: 0;
    padding: 8px 13px;
    color: var(--ui-text-primary) !important;
    font-family: var(--v3-body);
    font-size: 13.5px;
}
.nexus-v3-pop.v3-user-menu-pop .mud-menu-item:hover {
    background-color: var(--ui-surface-muted) !important;
}
.nexus-v3-pop.v3-user-menu-pop .mud-menu-item.mud-disabled {
    opacity: 1;
}
.nexus-v3-pop.v3-user-menu-pop .mud-menu-item span {
    color: inherit !important;
}
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-header {
    min-width: 0;
    padding: 2px 0;
}
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-name {
    font-family: var(--v3-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-text-primary);
}
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ui-text-secondary);
    font-size: 12px;
}
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-icon,
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-icon svg,
.nexus-v3-pop.v3-user-menu-pop .mud-menu-item .mud-icon-root,
.nexus-v3-pop.v3-user-menu-pop .mud-menu-item svg {
    color: var(--ui-action-primary) !important;
}
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-signout,
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-signout span,
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-signout .mud-icon-root,
.nexus-v3-pop.v3-user-menu-pop .v3-user-menu-signout svg {
    color: var(--ui-error-text) !important;
}

.v3-shell-body {
    flex: 1 1 auto;
    min-height: 0;
}

.v3-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.v3-hero-panel,
.v3-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-muted) 64%, transparent), var(--ui-surface));
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.v3-hero-panel { padding: var(--space-xl); }

.v3-kicker {
    color: var(--ui-action-primary);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.v3-title {
    margin: var(--space-sm) 0;
    color: var(--ui-text-primary);
}

.v3-lede {
    max-width: 720px;
    color: var(--ui-text-secondary);
}

.v3-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.v3-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.v3-card .mud-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.v3-section-title {
    color: var(--ui-action-primary);
    font-weight: 700;
}

.v3-token-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ui-text-secondary);
}

.v3-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--v3-border-strong);
}

.v3-swatch-background { background-color: var(--ui-background); }
.v3-swatch-surface { background-color: var(--ui-surface); }
.v3-swatch-primary { background-color: var(--ui-action-primary); }

@media (max-width: 900px) {
    .v3-shell-top {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--space-md);
    }

    .v3-shell-links {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .v3-shell-spacer {
        display: none;
    }

    .v3-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   KARTOGRAF ("Kartografens bord") — tilvalgs-tema for /v2 (ADR: parallel UI)
   Additivt. Scopet til .kartograf-root + .kartograf-pop (popovers/dialoger).
   Klassisk UI er upaavirket. Tokens spejler KartografTheme.cs (hex).
   ===================================================================== */
/* Tokens defineres baade paa .kartograf-root OG .kartograf-pop, da popovers/dialoger
   renderes i den globale provider UDEN for .kartograf-root og ellers mangler --k-* (C2). */
.kartograf-root, .kartograf-pop {
    /* --- Kartograf design tokens (--k-*) --- */
    --k-desk: #f3ecdc; --k-desk-deep: #ece2cc;
    --k-paper: #f7f1e2; --k-card: #faf6ea; --k-card-raised: #fffdf6;
    --k-ink: #33291e; --k-ink-soft: #6b5d4a;
    --k-line: #ddd1b6; --k-line-strong: #b8a787;
    --k-wax: #9b3a32; --k-wax-deep: #7a2a24;
    --k-gold: #a8842f; --k-inkblue: #2d4a66; --k-moss: #5f7349; --k-copper: #8a5a2e;
    --k-ai-ink: #4a3a72; --k-ai-glow: rgba(74,58,114,.07);
    --k-display: 'Cormorant Garamond', Georgia, serif;
    --k-hand: 'IM Fell English', Georgia, serif;
    --k-sans: 'IBM Plex Sans', Inter, system-ui, sans-serif;
}
.kartograf-root {
    background: var(--k-desk);
    color: var(--k-ink);
    font-family: var(--k-sans);
    min-height: 100vh;
}
.kartograf-root h1, .kartograf-root h2, .kartograf-root h3,
.kartograf-root h4, .kartograf-root h5, .kartograf-root h6,
.kartograf-root .k-display { font-family: var(--k-display); }

/* MudBlazor palette-overrides scopet til /v2 — out-specificerer de globale
   single-class !important-regler (fx .mud-palette-primary) via to-klasse-scope. */
.kartograf-root .mud-palette-primary { background-color: var(--k-gold) !important; color: var(--k-gold) !important; }
.kartograf-root .mud-palette-secondary { background-color: var(--k-inkblue) !important; color: var(--k-inkblue) !important; }
.kartograf-root .mud-palette-background { background-color: var(--k-desk) !important; }
.kartograf-root .mud-palette-surface { background-color: var(--k-card) !important; }
.kartograf-root .mud-palette-text-primary { color: var(--k-ink) !important; }
.kartograf-root .mud-palette-text-secondary { color: var(--k-ink-soft) !important; }
.kartograf-root .mud-paper, .kartograf-root .mud-card { background-color: var(--k-card); color: var(--k-ink); }
.kartograf-root .mud-appbar { background-color: var(--k-card) !important; color: var(--k-ink) !important; }

/* C2-fix: popovers/dialoger renderes i den GLOBALE provider udenfor .kartograf-root.
   Komponenter under /v2 saetter PopoverClass/Class="kartograf-pop", saa portal-indhold retmes. */
.kartograf-pop.mud-popover, .kartograf-pop .mud-popover,
.kartograf-pop.mud-dialog, .kartograf-pop .mud-dialog-container .mud-paper {
    background-color: var(--k-card) !important;
    color: var(--k-ink) !important;
    font-family: var(--k-sans);
    border: 1px solid var(--k-line-strong);
}
.kartograf-pop .mud-list-item:hover { background-color: rgba(168,132,47,.10) !important; }

/* === Kartograf form-controls: parkement-look paa MudSelect/MudAutocomplete/MudTextField + popovers ===
   Out-specificerer de globale (klassiske) hvide input/popover-regler via 3-klasse-scope under
   .kartograf-root / .kartograf-pop, saa /v2-dropdowns matcher pergament-temaet (ikke store hvide bokse). */
.kartograf-root .mud-select .mud-input-control,
.kartograf-root .mud-input-control.mud-input-control-margin-dense {
    background: var(--k-card-raised) !important;
    color: var(--k-ink) !important;
}
.kartograf-root .mud-input-control .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--k-line-strong) !important;
}
.kartograf-root .mud-input-control:hover .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--k-gold) !important;
}
.kartograf-root .mud-input.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.kartograf-root .mud-input-control .mud-input-root.mud-focused .mud-input-outlined-border {
    border-color: var(--k-gold) !important;
}
.kartograf-root .mud-select .mud-select-input,
.kartograf-root .mud-input-root input,
.kartograf-root .mud-input-slot input { color: var(--k-ink) !important; }
.kartograf-root .mud-input-label { color: var(--k-ink-soft) !important; font-family: var(--k-sans); }
.kartograf-root .mud-input-label.mud-input-label-input-focused { color: var(--k-gold) !important; }
/* Kompakt hoejde — mindre kluntede felter */
.kartograf-root .mud-input.mud-input-outlined input,
.kartograf-root .mud-input.mud-input-outlined .mud-select-input { padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.kartograf-root .mud-input-adornment .mud-icon-root { color: var(--k-ink-soft) !important; }

/* Dropdown-listen (popover) i pergament, kompakt */
.kartograf-pop .mud-popover-paper,
.kartograf-pop .mud-list,
.kartograf-pop .mud-list-item { background-color: var(--k-card) !important; color: var(--k-ink) !important; }
.kartograf-pop .mud-list { padding-top: 4px; padding-bottom: 4px; }
.kartograf-pop .mud-list-item { font-family: var(--k-sans); font-size: 13.5px; min-height: 0; padding-top: 7px; padding-bottom: 7px; }
.kartograf-pop .mud-list-item.mud-selected,
.kartograf-pop .mud-selected-item { background-color: rgba(168,132,47,.16) !important; }
.kartograf-pop .mud-list-item-text, .kartograf-pop .mud-list-item-text * { color: var(--k-ink) !important; }

/* Lille, diskret tekst-handling (fx "ryd holder") — i stil med resten, ikke en stor knap */
.kartograf-root .k-linkbtn { font-size: 11px; color: var(--k-ink-soft); cursor: pointer;
    border-bottom: 1px dotted var(--k-line-strong); padding: 0; margin-left: 8px; }
.kartograf-root .k-linkbtn:hover { color: var(--k-wax); border-bottom-color: var(--k-wax); }

/* Bredere/pænere dialoger (fx Tidslinjens begivenheds-editor) — ikke smalle og grimme */
.kartograf-pop .mud-dialog-container .mud-paper { min-width: 480px; max-width: 94vw; }
@media (max-width: 560px) { .kartograf-pop .mud-dialog-container .mud-paper { min-width: 0; } }

/* Kartograf shell (spike — fuld dock/chat kommer i naeste Fase 0-increment) */
/* height (ikke min-height) + overflow:hidden binder layoutet til viewporten, så .k-shell-main og
   chat-dock'en (.k-chat) ikke vokser med indholdet og skubber chat-skrivefeltet under viewporten.
   Indre flader scroller selv (.k-shell-body / .k-chat-body har min-height:0 + overflow:auto). */
.k-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.k-shell-top { display: flex; align-items: center; gap: 14px; padding: 10px 20px;
    border-bottom: 2px solid var(--k-ink); background: var(--k-card); }
.k-shell-brand { font-family: var(--k-display); font-weight: 700; font-size: 21px;
    letter-spacing: .06em; display: flex; align-items: center; gap: 9px; }
.k-shell-seal { width: 25px; height: 25px; border-radius: 50%; color: #f6e7d7; font-size: 11px;
    font-weight: 600; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #c0564c, var(--k-wax) 65%, var(--k-wax-deep)); }
.k-shell-sub { font-style: italic; font-size: 16px; color: var(--k-ink-soft); }
.k-shell-spacer { flex: 1; }
.k-shell-classic-link { color: var(--k-ink-soft) !important; font-size: 13px; }
.kartograf-root .k-user-menu { display: flex; align-items: center; }
.kartograf-root .k-user-button {
    min-width: 0;
    color: var(--k-ink-soft) !important;
    font-family: var(--k-sans);
    text-transform: none;
}
.kartograf-root .k-user-button:hover { color: var(--k-ink) !important; background: rgba(51,41,30,.05); }
.kartograf-root .k-user-button .mud-button-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kartograf-root .k-user-avatar {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--k-ink);
    color: var(--k-paper);
    font-family: var(--k-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}
.kartograf-root .k-user-button-text {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kartograf-root .k-user-login-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.kartograf-pop.k-user-menu-pop.mud-popover,
.kartograf-pop.k-user-menu-pop .mud-popover-paper {
    min-width: 244px;
}
.kartograf-pop.k-user-menu-pop .mud-menu-item {
    min-height: 0;
    padding: 8px 13px;
    color: var(--k-ink) !important;
    font-family: var(--k-sans);
    font-size: 13.5px;
}
.kartograf-pop.k-user-menu-pop .mud-menu-item:hover {
    background-color: rgba(168,132,47,.12) !important;
}
.kartograf-pop.k-user-menu-pop .mud-menu-item.mud-disabled {
    opacity: 1;
}
.kartograf-pop.k-user-menu-pop .mud-menu-item span {
    color: inherit !important;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-header {
    min-width: 0;
    padding: 2px 0;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-name {
    font-family: var(--k-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--k-ink);
}
.kartograf-pop.k-user-menu-pop .k-user-menu-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--k-ink-soft);
    font-size: 12px;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-icon,
.kartograf-pop.k-user-menu-pop .k-user-menu-icon svg,
.kartograf-pop.k-user-menu-pop .mud-menu-item .mud-icon-root,
.kartograf-pop.k-user-menu-pop .mud-menu-item svg {
    color: var(--k-gold) !important;
}
.kartograf-pop.k-user-menu-pop .k-user-menu-signout,
.kartograf-pop.k-user-menu-pop .k-user-menu-signout span,
.kartograf-pop.k-user-menu-pop .k-user-menu-signout .mud-icon-root,
.kartograf-pop.k-user-menu-pop .k-user-menu-signout svg {
    color: var(--k-wax) !important;
}
.k-shell-body { flex: 1; min-height: 0; padding: var(--space-lg, 24px); overflow: auto; }
.k-shell-body:has(> .kws-canvas) { overflow: visible; }
.k-card { background: linear-gradient(180deg, var(--k-card-raised), var(--k-card));
    border: 1px solid var(--k-line-strong); border-radius: 5px; padding: 18px 20px;
    box-shadow: 3px 4px 0 rgba(184,167,135,.55); }
.k-kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--k-gold); font-weight: 600; }

/* Kartograf shell layout: reol (venstre) · body · brevvekslingen (hoejre) */
.k-shell-main { flex: 1; display: flex; min-height: 0; }
.kartograf-root .k-dock { position: relative; z-index: 1150; width: 76px; flex-shrink: 0; border-right: 1px solid var(--k-line-strong);
    background: var(--k-desk-deep); display: flex; flex-direction: column; align-items: center;
    padding: 10px 0; gap: 3px; }
.kartograf-root .k-dock-quill { width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 1.5px solid var(--k-ai-ink); color: var(--k-ai-ink); background: var(--k-card);
    display: grid; place-items: center; margin-bottom: 8px; }
.kartograf-root .k-dock-sep { width: 36px; height: 1px; background: var(--k-line); margin: 2px 0 6px; }
.kartograf-root .k-dock-item { width: 64px; padding: 7px 2px 6px; border: none; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--k-ink-soft);
    border-radius: 6px; }
.kartograf-root .k-dock-item:hover { color: var(--k-ink); background: rgba(51,41,30,.05); }
.kartograf-root .k-dock-item.active { color: var(--k-gold); background: rgba(168,132,47,.10);
    box-shadow: inset 2px 0 0 var(--k-gold); }
.kartograf-root .k-dock-lb { font-family: var(--k-display); font-size: 11px; font-weight: 600;
    line-height: 1.05; text-align: center; }
.kartograf-root .k-dock-wrap { position: relative; width: 64px; display: flex; justify-content: center; }
.kartograf-root .k-sub { position: absolute; left: 70px; top: 0; min-width: 212px; z-index: 1200;
    background: var(--k-card-raised); border: 1px solid var(--k-line-strong); border-radius: 6px;
    box-shadow: 0 8px 24px rgba(51,41,30,.22); padding: 5px; }
.kartograf-root .k-sub-h { font-family: var(--k-display); font-weight: 700; font-size: 14px; color: var(--k-gold);
    padding: 6px 10px 7px; border-bottom: 1px dashed var(--k-line); margin-bottom: 4px; }
.kartograf-root .k-sub-i { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 4px;
    cursor: pointer; font-size: 13px; color: var(--k-ink); }
.kartograf-root .k-sub-i:hover { background: rgba(168,132,47,.12); color: var(--k-gold); }
.kartograf-root .k-sub-ic { width: 18px; text-align: center; color: var(--k-ink-soft); font-size: 14px; }
.kartograf-root .k-sub-backdrop { position: fixed; inset: 0; z-index: 1100; background: transparent; }

.kartograf-root .k-chat { width: 300px; flex-shrink: 0; border-left: 1px solid var(--k-line-strong);
    background: var(--k-desk-deep); display: flex; flex-direction: column; transition: width .2s ease; }
.kartograf-root .k-chat.collapsed { width: 42px; }
.kartograf-root .k-chat-mini { position: relative; flex: 1; border: none; background: none; cursor: pointer; display: grid; place-items: center; }
.kartograf-root .k-chat-mini span { writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--k-display); font-weight: 700; font-size: 15px; color: var(--k-ink-soft); letter-spacing: .1em; }
.kartograf-root .k-chat-head { display: flex; align-items: center; padding: 11px 13px;
    border-bottom: 1px solid var(--k-line); }
.kartograf-root .k-chat-title { font-weight: 700; font-size: 18px; flex: 1; }
.kartograf-root .k-chat-min { border: none; background: none; cursor: pointer; color: var(--k-ink-soft); }
.kartograf-root .k-chat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; }
.kartograf-root .k-chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding: 0 2px; }
.kartograf-root .k-chat-msg.mine .k-chat-reactions { justify-content: flex-end; }
.kartograf-root .k-chat-rx { font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--k-line);
    background: var(--k-card); color: var(--k-ink); }
.kartograf-root .k-chat-rx.mine { border-color: var(--k-gold); background: var(--k-card-raised); }
.kartograf-root .k-chat-rx-pick { font-size: 15px; padding: 0 3px; border-radius: 6px; }
.kartograf-root .k-chat-rx-pick:hover { background: var(--k-card); }
.kartograf-root .k-chat-sysmsg { display: flex; gap: 7px; align-items: flex-start; align-self: center; max-width: 94%;
    margin: 7px 0; padding: 5px 11px; background: var(--k-desk); border: 1px dashed var(--k-line-strong);
    border-radius: 9px; font-size: 12.5px; color: var(--k-ink-soft); }
.kartograf-root .k-chat-sysmsg.k-pinned { border-style: solid; border-color: var(--k-gold); }
.kartograf-root .k-chat-sys-icon { flex-shrink: 0; }
.kartograf-root .k-chat-sys-text { white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-sys-rich { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kartograf-root .k-chat-sys-head { font-weight: 700; color: var(--k-ink); }
.kartograf-root .k-chat-sys-calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.kartograf-root .k-chat-sys-formula { font-family: var(--k-display); color: var(--k-ink-soft); }
.kartograf-root .k-chat-sys-total { font-weight: 700; color: var(--k-ink); border-bottom: 1px dotted var(--k-line-strong); }
.kartograf-root .k-chat-sysmsg.k-sys-crit .k-chat-sys-total { color: var(--k-moss); }
.kartograf-root .k-chat-sysmsg.k-sys-fumble .k-chat-sys-total { color: var(--k-wax); }
.kartograf-root .k-chat-sys-breakdown { margin: 3px 0 0; padding-left: 16px; list-style: disc; color: var(--k-ink-soft); }
.kartograf-root .k-chat-sys-breakdown li { margin: 1px 0; }
.kartograf-root .k-chat-badge { position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--k-wax); color: var(--k-paper); font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center; }
.kartograf-root .k-chat-pin { margin-left: 4px; font-size: 11px; }
.kartograf-root .k-chat-loadolder.active { background: var(--k-gold); color: var(--k-paper); border-color: var(--k-gold); }
.kartograf-root .chat-feature { min-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.kartograf-root .chat-feature-head,
.kartograf-root .chat-feature-actions,
.kartograf-root .chat-feature-row,
.kartograf-root .chat-feature-row-actions { display: flex; align-items: center; gap: 10px; }
.kartograf-root .chat-feature-head { justify-content: space-between; }
.kartograf-root .chat-feature-actions { flex-wrap: wrap; }
.kartograf-root .chat-feature-grid { display: grid; gap: 10px; }
.kartograf-root .chat-feature-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartograf-root .chat-feature-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartograf-root .chat-feature-input,
.kartograf-root .chat-feature-btn,
.kartograf-root .chat-feature-tab { min-height: 36px; border: 1px solid var(--k-line); border-radius: 6px; background: var(--k-card-raised); color: inherit; }
.kartograf-root .chat-feature-input { width: 100%; min-width: 0; padding: 7px 9px; }
.kartograf-root .chat-feature-btn,
.kartograf-root .chat-feature-tab { padding: 0 10px; font-weight: 700; }
.kartograf-root .chat-feature-btn.primary,
.kartograf-root .chat-feature-tab.active { border-color: var(--k-gold); }
.kartograf-root .chat-feature-btn.danger { color: var(--k-danger, #9f2f2f); }
.kartograf-root .chat-feature-check { min-height: 36px; display: flex; align-items: center; gap: 8px; }
.kartograf-root .chat-feature-tabs,
.kartograf-root .chat-feature-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.kartograf-root .chat-feature-stats div,
.kartograf-root .chat-feature-callout,
.kartograf-root .chat-feature-row { border: 1px solid var(--k-line); border-radius: 6px; background: var(--k-card); }
.kartograf-root .chat-feature-stats div { min-width: 110px; padding: 9px 10px; }
.kartograf-root .chat-feature-stats span,
.kartograf-root .chat-feature-row span,
.kartograf-root .chat-feature-callout span { color: var(--k-ink-soft); font-size: 0.82rem; }
.kartograf-root .chat-feature-stats strong { display: block; margin-top: 3px; font-size: 1.1rem; }
.kartograf-root .chat-feature-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.kartograf-root .chat-feature-row { justify-content: space-between; padding: 9px 10px; }
.kartograf-root .chat-feature-row.strong { border-color: var(--k-gold); }
.kartograf-root .chat-feature-row.compact { padding: 7px 8px; }
.kartograf-root .chat-feature-row > div:first-child { min-width: 0; }
.kartograf-root .chat-feature-row p,
.kartograf-root .chat-feature-callout p { margin: 3px 0; color: var(--k-ink-soft); }
.kartograf-root .chat-feature-callout { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.kartograf-root .chat-feature-progress { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) {
    .kartograf-root .chat-feature-head,
    .kartograf-root .chat-feature-row { align-items: stretch; flex-direction: column; }
    .kartograf-root .chat-feature-grid.two,
    .kartograf-root .chat-feature-grid.three { grid-template-columns: 1fr; }
}
.kartograf-root .k-chat-reportmenu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; padding: 3px 2px; }
.kartograf-root .k-chat-act.k-reported { color: var(--k-moss); text-decoration: none; }
.kartograf-root .k-chat-searchbar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-bottom: 1px solid var(--k-line); }
.kartograf-root .k-chat-searchinput { flex: 1; font-size: 13px; color: var(--k-ink); background: var(--k-card);
    border: 1px solid var(--k-line); border-radius: 12px; padding: 4px 10px; }
.kartograf-root .k-chat-searchinput:focus { outline: none; border-color: var(--k-gold); }
.kartograf-root .k-chat-searchclear { color: var(--k-ink-soft); font-size: 12px; }
.kartograf-root .k-chat-searchmeta { font-size: 11px; color: var(--k-ink-soft); padding: 2px 2px 6px; align-self: center; }
.kartograf-root .k-chat-searchresult { align-self: stretch; margin: 4px 0; padding: 6px 10px; background: var(--k-card);
    border: 1px solid var(--k-line); border-radius: 9px; }
.kartograf-root .k-chat-searchresult .k-chat-msg-text { white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-searchresult mark { background: var(--k-gold); color: var(--k-paper); border-radius: 3px; padding: 0 2px; }
.kartograf-root .k-chat-voicepicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px;
    padding: 4px 6px; background: var(--k-card); border: 1px solid var(--k-line); border-radius: 8px; }
.kartograf-root .k-chat-ttserror { flex-shrink: 0; padding: 4px 12px; font-size: 12px; color: var(--k-wax); }
.kartograf-root .k-chat-grouperror { padding: 4px 2px 0; font-size: 12px; color: var(--k-wax); }
.kartograf-root .k-chat-online { width: 7px; height: 7px; border-radius: 50%; background: var(--k-moss);
    display: inline-block; flex-shrink: 0; margin-right: 1px; }
.kartograf-root .k-chat-mentions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 12px;
    border-top: 1px solid var(--k-line); background: var(--k-card); }
.kartograf-root .k-chat-mention-item { font-size: 12px; font-weight: 700; color: var(--k-inkblue);
    padding: 2px 9px; border-radius: 10px; border: 1px solid var(--k-line-strong); background: var(--k-card-raised); }
.kartograf-root .k-chat-mention-item:hover { border-color: var(--k-gold); }
.kartograf-root .k-chat-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.kartograf-root .k-chat-att-img { max-width: 180px; max-height: 140px; border-radius: 6px; border: 1px solid var(--k-line); display: block; }
.kartograf-root .k-chat-att-file { font-size: 12px; color: var(--k-inkblue); text-decoration: underline; }
.kartograf-root .k-chat-pending { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 12px; }
.kartograf-root .k-chat-pending-item { font-size: 11px; color: var(--k-ink-soft); background: var(--k-card);
    border: 1px solid var(--k-line); border-radius: 9px; padding: 2px 8px; }
.kartograf-root .k-chat-attach { display: grid; place-items: center; width: 30px; height: 36px; color: var(--k-ink-soft); }
.kartograf-root .k-chat-attach:hover { color: var(--k-wax); }
.kartograf-root .k-chat-fileinput { display: none; }
.kartograf-root .k-chat-leave { font-size: 11px; color: var(--k-ink-soft); text-decoration: underline; }
.kartograf-root .k-chat-leave:hover { color: var(--k-wax); }
.kartograf-root .k-chat-newchatbar { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 5px 12px 0; }
.kartograf-root .k-chat-newchat { font-size: 11px; font-family: var(--k-display); font-weight: 700; color: var(--k-gold); }
.kartograf-root .k-chat-newchat:hover { color: var(--k-wax); }
.kartograf-root .k-chat-newchatbar .k-chat-newchat + .k-chat-newchat { margin-left: 12px; }
.kartograf-root .k-chat-newchatlist { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 12px;
    border-bottom: 1px solid var(--k-line); }
/* Full-only: gruppe-oprettelse (navn + multi-select af venner). */
.kartograf-root .k-chat-groupform { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
    border-bottom: 1px solid var(--k-line); background: var(--k-card); }
.kartograf-root .k-chat-groupfriends { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
.kartograf-root .k-chat-groupfriend { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--k-ink); }
.kartograf-root .k-chat-groupfriend input { accent-color: var(--k-gold); }
.kartograf-root .k-chat-groupactions { display: flex; justify-content: flex-end; }
.kartograf-root .k-chat-groupbtn { font-family: var(--k-display); font-size: 12px; font-weight: 700; color: var(--k-paper);
    background: var(--k-gold); border: 1px solid var(--k-line-strong); border-radius: 12px; padding: 4px 14px; cursor: pointer; }
.kartograf-root .k-chat-groupbtn:hover { background: var(--k-wax); }
.kartograf-root .k-chat-groupbtn:disabled { opacity: .5; cursor: default; }
/* Full-only: søge-scope-toggle + globale træffere med trådnavn. */
.kartograf-root .k-chat-searchscope { flex-shrink: 0; font-family: var(--k-display); font-size: 11px; font-weight: 700;
    color: var(--k-ink-soft); background: var(--k-card); border: 1px solid var(--k-line-strong); border-radius: 12px;
    padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.kartograf-root .k-chat-searchscope:hover { color: var(--k-wax); border-color: var(--k-gold); }
.kartograf-root .k-chat-searchscope.active { color: var(--k-paper); background: var(--k-gold); border-color: var(--k-gold); }
.kartograf-root .k-chat-searchresult-global { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; cursor: pointer; }
.kartograf-root .k-chat-searchresult-global:hover { border-color: var(--k-gold); }
.kartograf-root .k-chat-searchresult-thread { font-family: var(--k-display); font-size: 11px; font-weight: 700; color: var(--k-gold); }
.kartograf-root .k-chat-threadbar { flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid var(--k-line); }
.kartograf-root .k-chat-threadsel { width: 100%; font-family: var(--k-display); font-size: 14px; color: var(--k-ink);
    background: var(--k-card); border: 1px solid var(--k-line-strong); border-radius: 4px; padding: 5px 8px; cursor: pointer; }
.kartograf-root .k-chat-loading { margin: auto; }
.kartograf-root .k-chat-loadolder { flex-shrink: 0; align-self: center; margin: 0 0 10px; padding: 4px 14px;
    font-family: var(--k-display); font-size: 12px; font-weight: 700; color: var(--k-ink-soft);
    background: var(--k-card); border: 1px solid var(--k-line-strong); border-radius: 12px; cursor: pointer; }
.kartograf-root .k-chat-loadolder:hover { color: var(--k-wax); }
.kartograf-root .k-chat-loadolder:disabled { opacity: .5; cursor: default; }
.kartograf-root .k-chat-msg { margin-bottom: 12px; max-width: 92%; }
.kartograf-root .k-chat-msg.mine { align-self: flex-end; }
.kartograf-root .k-chat-msg-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; padding: 0 2px; }
.kartograf-root .k-chat-msg.mine .k-chat-msg-meta { justify-content: flex-end; }
.kartograf-root .k-chat-msg-author { font-family: var(--k-display); font-weight: 700; font-size: 13px; color: var(--k-wax); }
.kartograf-root .k-chat-msg.mine .k-chat-msg-author { color: var(--k-moss); }
.kartograf-root .k-chat-msg-time { font-size: 11px; color: var(--k-ink-soft); }
.kartograf-root .k-chat-msg-text { background: var(--k-card); border: 1px solid var(--k-line); border-radius: 8px;
    padding: 7px 10px; color: var(--k-ink); font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-msg.mine .k-chat-msg-text { background: var(--k-card-raised); border-color: var(--k-line-strong); }
.kartograf-root .k-chat-compose { flex-shrink: 0; display: flex; gap: 6px; padding: 10px 12px;
    border-top: 1px solid var(--k-line); align-items: center; }
.kartograf-root .k-chat-input { flex: 1; font-family: inherit; font-size: 14px; color: var(--k-ink);
    background: var(--k-card-raised); border: 1px solid var(--k-line-strong); border-radius: 6px; padding: 8px 10px; }
.kartograf-root .k-chat-input:focus { outline: none; border-color: var(--k-gold); }
.kartograf-root .k-chat-send { display: grid; place-items: center; width: 38px; height: 36px; border: none;
    border-radius: 6px; background: var(--k-wax); color: var(--k-paper); cursor: pointer; }
.kartograf-root .k-chat-send:disabled { opacity: .45; cursor: default; }
.kartograf-root .k-chat-toolbtn { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 34px;
    border: 1px solid var(--k-line); border-radius: 6px; background: var(--k-card); color: var(--k-ink-soft);
    cursor: pointer; }
.kartograf-root .k-chat-toolbtn:hover { color: var(--k-wax); border-color: var(--k-gold); }
.kartograf-root .k-chat-slot { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kartograf-root .k-chat-slot.k-hidden { display: none; }
.kartograf-root .k-chat-msg-text.k-deleted { font-style: italic; color: var(--k-ink-soft); background: transparent;
    border-style: dashed; }
.kartograf-root .k-chat-msg-actions { display: flex; gap: 10px; margin-top: 3px; padding: 0 2px;
    opacity: 0; transition: opacity .12s ease; }
.kartograf-root .k-chat-msg:hover .k-chat-msg-actions { opacity: 1; }
.kartograf-root .k-chat-msg.mine .k-chat-msg-actions { justify-content: flex-end; }
.kartograf-root .k-chat-act { font-size: 11px; color: var(--k-ink-soft); text-decoration: underline; }
.kartograf-root .k-chat-act:hover { color: var(--k-wax); }
.kartograf-root .k-chat-edit { display: flex; gap: 4px; align-items: center; }
.kartograf-root .k-chat-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border: none;
    border-radius: 5px; background: var(--k-card); color: var(--k-ink-soft); cursor: pointer; }
.kartograf-root .k-chat-iconbtn:hover { color: var(--k-wax); }
.kartograf-root .k-chat-typing { flex-shrink: 0; padding: 3px 13px; font-size: 12px; font-style: italic;
    color: var(--k-ink-soft); }
.kartograf-root .k-chat-modebar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 4px 12px 0; }
.kartograf-root .k-chat-modelabel { font-size: 11px; font-family: var(--k-display); font-weight: 700; color: var(--k-ink-soft); }
.kartograf-root .k-chat-modesel { font-size: 12px; color: var(--k-ink); background: var(--k-card);
    border: 1px solid var(--k-line-strong); border-radius: 10px; padding: 2px 8px; cursor: pointer; max-width: 190px; }
.kartograf-root .k-chat-input.k-as-dm { border-color: var(--k-gold); }
.kartograf-root .k-chat-msg.k-mode-dm .k-chat-msg-author { color: var(--k-gold); }
.kartograf-root .k-chat-msg.k-mode-dm .k-chat-msg-text { border-color: var(--k-gold); }
.kartograf-root .k-chat-structured { margin-top: 6px; max-width: min(100%, 34rem); }
.kartograf-root .k-chat-msg.mine .k-chat-structured { margin-left: auto; }
.kartograf-root .k-chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px;
    font-size: 11px; color: var(--k-ink-soft); }
.kartograf-root .k-chat-msg.mine .k-chat-sources { justify-content: flex-end; }
.kartograf-root .k-chat-sources-label { font-family: var(--k-display); font-weight: 700; color: var(--k-ink); }
.kartograf-root .k-chat-source { border: 1px solid var(--k-line); border-radius: 999px; padding: 1px 7px;
    background: var(--k-card); color: var(--k-ink-soft); }

/* --- Forenet chat: Full-layout (samme KartografChatPanel i et KWindow) ---
   Panelet wrappes altid i .k-chat-panelroot. I dock'en (Compact) er wrapperen transparent
   (display:contents) saa dock-flexet er UAENDRET. I et vindue (.k-chat-full) bliver den en flex-
   kolonne der fylder vinduet: .k-chat-body vokser+scroller, compose forbliver fastlaast nederst. */
.kartograf-root .k-chat-panelroot { display: contents; }
.kartograf-root .kwin-body .chat-conv-host { height: 100%; padding: 0; display: flex; flex-direction: column; min-height: 0; }
/* Compact: konversations-kolonnen er transparent saa dock'ens flex er HELT uaendret. */
.kartograf-root .k-chat-panelroot:not(.k-chat-full) .k-chat-col { display: contents; }

/* Full: 3-zone-grid [sidebar | konversation | side-rude]. Side-ruden vises kun naar et vaerktoej er valgt. */
.kartograf-root .k-chat-panelroot.k-chat-full {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
    flex: 1 1 auto; min-height: 0; gap: 10px;
}
.kartograf-root .k-chat-panelroot.k-chat-full .k-chat-col {
    min-width: 0; min-height: 0; display: flex; flex-direction: column;
    grid-column: 2; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-card);
    overflow: hidden;
}
.kartograf-root .k-chat-panelroot.k-chat-full .k-chat-body { flex: 1 1 auto; min-height: 0; }
.kartograf-root .k-chat-panelroot.k-chat-full .k-chat-msg { max-width: 72%; }

/* Full: traad-liste-sidebar (venstre kolonne) */
.kartograf-root .k-chat-sidebar {
    grid-column: 1; min-height: 0; overflow: auto; padding: 8px;
    border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-card);
    display: flex; flex-direction: column; gap: 4px;
}
.kartograf-root .k-chat-sidehead {
    margin: 2px 4px 6px; color: var(--k-ink-soft); font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
}
.kartograf-root .k-chat-sideempty { padding: 8px; color: var(--k-ink-soft); font-size: 0.85rem; }
.kartograf-root .k-chat-sidethread {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid transparent; border-radius: 6px; padding: 8px; background: transparent;
    color: inherit; text-align: left; cursor: pointer;
}
.kartograf-root .k-chat-sidethread:hover { border-color: var(--k-line); }
.kartograf-root .k-chat-sidethread.active { border-color: var(--k-gold); background: var(--k-card-raised); }
.kartograf-root .k-chat-sidethread-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartograf-root .k-chat-sideunread {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--k-gold); color: var(--k-paper); font-weight: 700; font-size: 0.78rem;
}

/* Full: offline-/sync-banner */
.kartograf-root .k-chat-offline {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--k-line); background: var(--k-card-raised);
    color: var(--k-ink-soft); font-weight: 700;
}
.kartograf-root .k-chat-offline-sync {
    min-height: 28px; padding: 0 10px; cursor: pointer; color: var(--k-ink-soft);
    background: var(--k-card); border: 1px solid var(--k-line-strong); border-radius: 6px; font-weight: 700;
}
.kartograf-root .k-chat-offline-sync:hover:not(:disabled) { color: var(--k-wax); border-color: var(--k-gold); }
.kartograf-root .k-chat-offline-sync:disabled { opacity: 0.5; cursor: default; }

/* Full: Fastgjorte/Filer vaerktoejslinje */
.kartograf-root .k-chat-tools { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; }
.kartograf-root .k-chat-tool {
    min-height: 28px; padding: 0 10px; cursor: pointer; color: var(--k-ink-soft);
    background: var(--k-card); border: 1px solid var(--k-line-strong); border-radius: 6px; font-weight: 700; font-size: 12px;
}
.kartograf-root .k-chat-tool:hover { color: var(--k-wax); border-color: var(--k-gold); }
.kartograf-root .k-chat-tool.active { color: var(--k-paper); background: var(--k-wax); border-color: var(--k-wax); }

/* Full: side-rude (hoejre kolonne) med Fastgjorte/Filer */
.kartograf-root .k-chat-sidepane {
    grid-column: 3; width: 240px; min-height: 0; overflow: auto; padding: 8px;
    border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-card);
    display: flex; flex-direction: column; gap: 6px;
}
.kartograf-root .k-chat-sideitem {
    display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--k-line); border-radius: 6px;
    padding: 7px 8px; background: var(--k-card-raised); color: inherit; text-align: left;
    text-decoration: none; cursor: pointer;
}
.kartograf-root .k-chat-sideitem:hover { border-color: var(--k-gold); }
.kartograf-root .k-chat-sideitem-author { color: var(--k-ink-soft); font-weight: 700; font-size: 0.8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartograf-root .k-chat-sideitem-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Markdown-værktøjslinje + preview (kun Full-layout) + saneret markdown-rendering --- */
.kartograf-root .k-chat-formatbar { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px;
    padding: 6px 12px 0; }
.kartograf-root .k-chat-fmt { font-size: 12px; min-width: 30px; height: 26px; padding: 0 8px; cursor: pointer;
    color: var(--k-ink-soft); background: var(--k-card); border: 1px solid var(--k-line-strong); border-radius: 6px; }
.kartograf-root .k-chat-fmt:hover { color: var(--k-wax); border-color: var(--k-gold); }
.kartograf-root .k-chat-fmt.active { color: var(--k-paper); background: var(--k-wax); border-color: var(--k-wax); }
.kartograf-root .k-chat-preview { flex-shrink: 0; margin: 6px 12px 0; max-height: 120px; overflow: auto;
    padding: 8px 10px; font-size: 14px; line-height: 1.4; color: var(--k-ink);
    background: var(--k-card); border: 1px solid var(--k-line); border-radius: 8px; }
.kartograf-root .k-chat-md blockquote { margin: 4px 0; padding-left: 9px; border-left: 3px solid var(--k-gold);
    color: var(--k-ink-soft); }
.kartograf-root .k-chat-md code { font-family: var(--k-mono, monospace); font-size: 0.92em; padding: 1px 4px;
    background: var(--k-card-raised); border: 1px solid var(--k-line); border-radius: 4px; }
.kartograf-root .k-chat-md li { margin-left: 16px; list-style: disc; }

.kartograf-root .k-empty { text-align: center; color: var(--k-ink-soft); padding: 30px 10px;
    font-style: italic; display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Kartograf inline-edit primitiver (KInlineField / KInlineSelect) */
.kartograf-root .k-inline { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.kartograf-root .k-inline-label { font-size: 11px; letter-spacing: .04em; color: var(--k-ink-soft); }
.kartograf-root .k-inline-value { font-family: var(--k-display); font-weight: 600; font-size: 16px;
    color: var(--k-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 3px; }
.kartograf-root .k-inline-value.empty { color: var(--k-ink-soft); font-weight: 400; font-style: italic; }
.kartograf-root .k-inline-value:hover { color: var(--k-gold); }
.kartograf-root .k-inline-pencil { opacity: 0; color: var(--k-ink-soft); }
.kartograf-root .k-inline-value:hover .k-inline-pencil { opacity: .7; }
.kartograf-root .k-inline-edit { display: flex; align-items: flex-start; gap: 6px; }
.kartograf-root .k-inline-edit .mud-input-control { min-width: 220px; }
.kartograf-root .k-inline-unit { font-size: 12px; font-weight: 400; color: var(--k-ink-soft); margin-left: 2px; }
/* KToggle — bool inline-felt som pergament-chip */
.kartograf-root .k-toggle { align-self: flex-start; font-family: var(--k-display); font-weight: 600; font-size: 13px;
    padding: 1px 12px; border-radius: 11px; border: 1px solid var(--k-line-strong); }
.kartograf-root .k-toggle.on { background: var(--k-moss); color: var(--k-paper); border-color: var(--k-moss); }
.kartograf-root .k-toggle.off { background: var(--k-card); color: var(--k-ink-soft); }
.kartograf-root .k-toggle.k-clickable:hover { border-color: var(--k-gold); }

/* Kartograf indholdssektioner (brev/grid) — genbruges af /v2-modulsider */
.kartograf-root .k-page { max-width: 1100px; }
.kartograf-root .k-sect { font-family: var(--k-display); font-weight: 700; font-size: 17px;
    border-bottom: 1px dashed var(--k-line); padding-bottom: 6px; margin: 14px 0 8px; }
.kartograf-root .k-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.kartograf-root .k-statbox { border: 1px solid var(--k-line); border-radius: 4px; background: var(--k-card-raised);
    padding: 9px 7px; text-align: center; }
.kartograf-root .k-statbox b { font-family: var(--k-display); font-weight: 700; font-size: 18px; display: block; }
.kartograf-root .k-statbox span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--k-ink-soft); }
.kartograf-root .k-lrow { display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    border-bottom: 1px dashed var(--k-line); cursor: pointer; }
.kartograf-root .k-lrow:hover { background: rgba(168,132,47,.07); }
.kartograf-root .k-lrow .nm { font-family: var(--k-display); font-weight: 600; font-size: 16px; }
.kartograf-root .k-lrow .sub { font-size: 12px; color: var(--k-ink-soft); }
.kartograf-root .k-tag { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--k-gold); color: var(--k-gold); border-radius: 3px; padding: 1px 6px; }
.kartograf-root .k-lrow-main { flex: 1; min-width: 0; }
/* Tidslinjen: farve-segl for tidsaldre + nuvaerende kalenderdato */
.kartograf-root .k-era-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid var(--k-line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.kartograf-root .k-datecard { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    font-family: var(--k-display); padding: 8px 0; }
.kartograf-root .k-datecard .big { font-size: 22px; font-weight: 700; color: var(--k-ink); }
.kartograf-root .k-datecard .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--k-gold); }
.kartograf-root .k-toprow { display: flex; align-items: flex-start; gap: 14px; }
.kartograf-root .k-toprow-main { flex: 1; min-width: 0; }
.kartograf-root .k-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 768px) { .kartograf-root .k-twocol, .kartograf-root .k-statgrid { grid-template-columns: 1fr; } }
.kartograf-root .k-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }

/* === Kartograf mockup-komponenter (charter/gauges/faner/traer/tags) — porteret fra mockup, scopet === */
.kartograf-root .desc { font-family:var(--k-display);font-style:italic;font-size:15.5px;line-height:1.4;color:var(--k-ink);margin-bottom:10px }
.kartograf-root .sect { font-family:var(--k-display);font-weight:700;font-size:15px;border-bottom:1px dashed var(--k-line);padding-bottom:5px;margin:11px 0 7px;display:flex;align-items:baseline;gap:8px }
.kartograf-root .sect .n { font-size:11px;color:var(--k-gold);font-family:var(--k-sans);font-weight:600 }
.kartograf-root .lrow { display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px dashed var(--k-line);border-radius:3px }
.kartograf-root .lrow:last-child { border-bottom:none }
.kartograf-root .lrow.click { cursor:pointer }
.kartograf-root .lrow.click:hover { background:rgba(168,132,47,.09) }
.kartograf-root .lrow .pic { width:30px;height:30px;border-radius:50%;border:1.5px solid var(--k-line-strong);display:grid;place-items:center;
  font-family:var(--k-display);font-weight:700;font-size:13px;background:var(--k-desk-deep);color:var(--k-gold);flex-shrink:0 }
.kartograf-root .lrow .nm { font-family:var(--k-display);font-weight:600;font-size:15px;line-height:1.15 }
.kartograf-root .lrow .nm a { color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .12s ease,color .12s ease }
.kartograf-root .lrow .nm a:hover { color:var(--k-gold);border-bottom-color:currentColor }
.kartograf-root .lrow .sub { font-size:11.5px;color:var(--k-ink-soft) }
.kartograf-root .lrow .arr { margin-left:auto;color:var(--k-ink-soft);font-size:11px }
.kartograf-root .lrow.click:hover .arr { color:var(--k-gold) }
.kartograf-root .readaloud { border:1px solid var(--k-line-strong);border-left:3px solid var(--k-gold);border-radius:0 5px 5px 0;background:rgba(168,132,47,.07);padding:10px 12px;margin:8px 0 }
.kartograf-root .readaloud p { font-family:var(--k-display);font-style:italic;font-size:15px;line-height:1.4 }
.kartograf-root .mnote { font-family:var(--k-hand);font-size:13.5px;line-height:1.45;color:var(--k-ai-ink);padding:9px 11px;position:relative;margin-bottom:9px;
  background:var(--k-ai-glow);border-left:2px solid var(--k-ai-ink);border-radius:0 5px 5px 0 }
.kartograf-root .mnote .pin2 { position:absolute;top:-6px;left:10px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #c0564c, var(--k-wax));box-shadow:0 1px 3px rgba(0,0,0,.3) }
.kartograf-root .mnote .act { display:inline-block;font-family:var(--k-sans);font-size:10.5px;font-weight:600;color:#faf6ea;background:var(--k-ai-ink);border-radius:3px;padding:3px 9px;margin-top:5px;cursor:pointer }
.kartograf-root /* window tabs (karakterark m.fl.) */
.wtabs { display:flex;gap:2px;border-bottom:1px solid var(--k-line);margin:10px 0 10px }
.kartograf-root .wt { font-family:var(--k-display);font-weight:600;font-size:13.5px;color:var(--k-ink-soft);padding:5px 11px 7px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap }
.kartograf-root .wt:hover { color:var(--k-ink) }
.kartograf-root .wt.active { color:var(--k-wax);border-bottom-color:var(--k-wax) }
.kartograf-root .wpane { display:none }
.kartograf-root .wpane.active { display:block }
.kartograf-root /* overbliks-koncepter */
.trow { display:flex;align-items:center;gap:7px;padding:4px 2px;border-bottom:1px dashed var(--k-line);font-size:12.5px }
.kartograf-root .twist { width:14px;text-align:center;cursor:pointer;color:var(--k-gold);font-size:11px;user-select:none }
.kartograf-root .twist.leaf { color:var(--k-line-strong);cursor:default }
.kartograf-root .tdot { width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block }
.kartograf-root .tname { font-family:var(--k-display);font-weight:600;font-size:15px;cursor:pointer }
.kartograf-root .tname:hover { color:var(--k-gold);text-decoration:underline }
.kartograf-root .ttype { font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-gold);
  border:1px solid var(--k-gold);border-radius:3px;padding:1px 6px;white-space:nowrap;flex-shrink:0 }
.kartograf-root .ttype.set { color:var(--k-inkblue);border-color:var(--k-inkblue) }
.kartograf-root .tmeta { color:var(--k-ink-soft);font-size:11px;margin-left:auto;white-space:nowrap }
.kartograf-root .k-clickable { cursor:pointer }
.kartograf-root .k-flex1 { flex:1;min-width:0 }
.kartograf-root .k-w64 { width:64px;flex:0 0 64px }
.kartograf-root .k-stab-blue { --st:var(--k-inkblue) }
.kartograf-root .k-sigil-wax { --kc:var(--k-wax) }
.kartograf-root .k-sigil-blue { --kc:var(--k-inkblue) }
.kartograf-root .k-sigil-gold { --kc:var(--k-gold) }
.kartograf-root .ktitle-assign { display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap }
.kartograf-root .k-pcnpc { display:inline-flex;border:1px solid var(--k-line-strong);border-radius:4px;overflow:hidden;flex-shrink:0 }
.kartograf-root .k-pcnpc span { font-size:11px;font-weight:600;padding:3px 9px;cursor:pointer;color:var(--k-ink-soft) }
.kartograf-root .k-pcnpc span.active { background:var(--k-gold);color:#fff8ec }
.kartograf-root .ktitle-unlink { color:var(--k-ink-soft);font-size:13px;align-self:flex-start;padding:2px 4px }
.kartograf-root .ktitle-unlink:hover { color:var(--k-wax) }
.kartograf-root .ktitle-edit { color:var(--k-ink-soft);font-size:13px;align-self:flex-start;padding:2px 4px }
.kartograf-root .ktitle-edit:hover { color:var(--k-gold) }
.kartograf-root .ttype.k-tag-wax { color:var(--k-wax);border-color:var(--k-wax) }
.kartograf-root .k-mapsheet-sm { height:240px }
.kartograf-root .tsearch { flex:1 }
.kartograf-root .k-dot-moss { background:var(--k-moss) }
.kartograf-root .k-dot-gold { background:var(--k-gold) }
.kartograf-root .k-dot-wax { background:var(--k-wax) }
.kartograf-root .k-dot-copper { background:var(--k-copper) }
.kartograf-root .k-dot-faint { background:var(--k-line-strong) }
.kartograf-root .addrow { display:flex;gap:6px;align-items:center;padding:8px;border:1px dashed var(--k-line-strong);border-radius:4px;
  background:rgba(168,132,47,.04);margin:8px 0;flex-wrap:wrap }
.kartograf-root .ainp { font-family:var(--k-sans);font-size:11.5px;color:var(--k-ink);background:var(--k-card-raised);
  border:1px solid var(--k-line);border-radius:3px;padding:5px 7px;min-width:0 }
.kartograf-root .ainp:focus { outline:none;border-color:var(--k-gold) }
.kartograf-root .btnx { display:inline-block;font-size:11.5px;font-weight:600;border-radius:4px;padding:6px 12px;cursor:pointer;
  border:1px solid var(--k-line-strong);color:var(--k-ink-soft);margin:0 }
.kartograf-root .btnx:hover { color:var(--k-gold);border-color:var(--k-gold) }
.kartograf-root .tkids { display:none }
.kartograf-root .tnode.open > .tkids { display:block }
.kartograf-root .tlegend { display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--k-ink-soft);margin:6px 0 }
.kartograf-root .charter-head { display:flex;gap:12px;align-items:flex-start;border:1px solid var(--k-line-strong);border-radius:4px;
  background:var(--k-paper);padding:12px 14px;margin-bottom:10px }
.kartograf-root .charter-seal { width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#f6e7d7;font-size:18px;
  background:radial-gradient(circle at 35% 30%, #c0564c, var(--k-wax) 65%, var(--k-wax-deep));box-shadow:inset 0 -2px 5px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.25) }
.kartograf-root .charter-name { font-family:var(--k-display);font-weight:700;font-size:30px;line-height:1;color:var(--k-ink) }
/* klik-til-rediger overskrift */
.kartograf-root .k-name-view { display:inline-block;border-radius:4px;padding:1px 4px;margin:-1px -4px;cursor:pointer }
.kartograf-root .k-name-view:hover { background:rgba(168,132,47,.10);box-shadow:inset 0 -2px 0 var(--k-gold) }
.kartograf-root .k-name-edit { display:block;width:100%;color:var(--k-ink);background:var(--k-card-raised);
  border:1px solid var(--k-gold);border-radius:4px;padding:2px 6px;outline:none }
.kartograf-root .k-subtle { font-size:12px;color:var(--k-ink-soft) }
.kartograf-root .charter-stab { font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--st, var(--k-moss));
  border:1.5px solid var(--st, var(--k-moss));border-radius:3px;padding:4px 10px;transform:rotate(3deg);align-self:center }
.kartograf-root .statgrid { display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0 }
.kartograf-root .statbox { border:1px solid var(--k-line);border-radius:4px;background:var(--k-card-raised);padding:8px 6px;text-align:center }
.kartograf-root .statbox b { font-family:var(--k-display);font-weight:700;font-size:16px;display:block;line-height:1.1 }
.kartograf-root .statbox span { font-size:9.5px;color:var(--k-ink-soft);letter-spacing:.06em;text-transform:uppercase }
.kartograf-root .twocol { display:grid;grid-template-columns:1fr 1fr;gap:0 18px }
.kartograf-root .mapsheet { position:relative;height:330px;border:1.5px solid var(--k-line-strong);border-radius:4px;overflow:hidden;
  background:radial-gradient(500px 250px at 50% 30%, rgba(168,132,47,.06), transparent), var(--k-paper) }
.kartograf-root .maprose { position:absolute;top:8px;right:12px;text-align:center;color:var(--k-gold);font-size:18px;line-height:.9;z-index:3 }
.kartograf-root .maprose span { font-size:9px;letter-spacing:.2em }
.kartograf-root .mapland { position:absolute;left:18%;top:7%;width:60%;height:55%;border:2px dashed var(--k-line-strong);
  border-radius:42% 58% 55% 45% / 55% 45% 58% 42%;background:rgba(168,132,47,.07) }
.kartograf-root .maplabel { font-family:var(--k-display);font-weight:700;font-size:19px;letter-spacing:.3em;color:var(--k-ink);text-align:center;margin-top:14px;opacity:.75 }
.kartograf-root .maplabel.sm { font-size:12px;letter-spacing:.18em;margin-top:8px }
.kartograf-root .mapcap { position:absolute;left:24%;top:42%;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap }
.kartograf-root .mapcap .crown { color:var(--k-gold);font-size:13px }
.kartograf-root .mapcap:hover, .kartograf-root .mapset:hover { color:var(--k-wax) }
.kartograf-root .mapset { position:absolute;font-size:10px;cursor:pointer;color:var(--k-ink);white-space:nowrap }
.kartograf-root .mapisle { position:absolute;border:2px dashed var(--k-line-strong);border-radius:55% 45% 48% 52% / 45% 55% 52% 48%;
  background:rgba(45,74,102,.05);cursor:pointer }
.kartograf-root .mapisle:hover { background:rgba(168,132,47,.1) }
.kartograf-root .mapsea { position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:var(--k-display);font-style:italic;
  font-size:11px;color:var(--k-inkblue);opacity:.7;letter-spacing:.2em }
.kartograf-root .gaugerow { display:flex;gap:14px;justify-content:space-around;margin:12px 0 4px }
.kartograf-root .gauge { text-align:center }
.kartograf-root .gring { position:relative;width:52px;height:52px;margin:0 auto;border:1px solid var(--k-line);border-radius:50%;
  display:grid;place-items:center;background:var(--k-paper) }
.kartograf-root .gseg { position:absolute;left:50%;top:50%;width:4px;height:8px;margin:-4px 0 0 -2px;border-radius:2px;background:var(--k-line) }
.kartograf-root .gseg.f { background:var(--k-gold);box-shadow:0 0 4px rgba(168,132,47,.5) }
.kartograf-root .gval { font-family:var(--k-display);font-weight:700;font-size:16px }
.kartograf-root .glab { font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-soft);margin-top:5px }
.kartograf-root /* flag, .kartograf-root kort-upload, .kartograf-root hoffet */
.flagadd { width:52px;height:64px;border:1.5px dashed var(--k-line-strong);border-radius:4px;display:grid;place-items:center;
  text-align:center;color:var(--k-ink-soft);font-size:15px;line-height:1.1;cursor:pointer;flex-shrink:0 }
.kartograf-root .flagadd span { font-size:8.5px;letter-spacing:.14em;text-transform:uppercase }
.kartograf-root .flagadd:hover { border-color:var(--k-gold);color:var(--k-gold) }
.kartograf-root .flagbox { width:52px;height:64px;border:1px solid var(--k-line-strong);border-radius:3px;flex-shrink:0;cursor:pointer;position:relative;
  background:linear-gradient(0deg,transparent 42%,#f3ecdc 42%,#f3ecdc 58%,transparent 58%),
             linear-gradient(90deg,transparent 26%,#f3ecdc 26%,#f3ecdc 42%,transparent 42%), var(--k-wax);
  box-shadow:1px 2px 0 rgba(184,167,135,.5) }
.kartograf-root .flagbox .flagx { position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;background:var(--k-card);
  border:1px solid var(--k-line-strong);display:grid;place-items:center;font-size:8px;color:var(--k-ink-soft);visibility:hidden }
.kartograf-root .flagbox:hover .flagx { visibility:visible }
.kartograf-root .charter-head-main { flex:1;min-width:0 }
/* Genstands-billede som klikbar firkant i charter-hovedet (afløser .k-item-media-blokken). */
.kartograf-root .k-item-sigil-col { display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0 }
.kartograf-root .k-item-sigil { position:relative;width:60px;height:60px;flex-shrink:0;border-radius:6px;overflow:hidden;
  display:grid;place-items:center;background:var(--k-paper);background-size:cover;background-position:center;background-repeat:no-repeat;
  border:2px solid var(--kc,var(--k-line-strong));box-shadow:1px 2px 0 rgba(184,167,135,.4) }
.kartograf-root label.k-item-sigil { cursor:pointer }
.kartograf-root label.k-item-sigil:hover { border-color:var(--k-gold);box-shadow:0 0 0 2px rgba(168,132,47,.25),1px 2px 0 rgba(184,167,135,.4) }
.kartograf-root .k-item-sigil-glyph { font-family:var(--k-display);font-weight:700;font-size:24px;line-height:1;color:var(--kc,var(--k-gold)) }
.kartograf-root .k-item-sigil-hint { position:absolute;left:0;right:0;bottom:0;padding:2px 0;text-align:center;font-size:9.5px;font-weight:600;
  color:#fff;background:rgba(43,38,32,.62);opacity:0;transition:opacity .15s }
.kartograf-root label.k-item-sigil:hover .k-item-sigil-hint { opacity:1 }
.kartograf-root .k-hidden-file { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.kartograf-root .k-img-clear { background:none;border:none;padding:0;cursor:pointer;font-size:10.5px;font-weight:600;color:var(--k-ink-soft) }
.kartograf-root .k-img-clear:hover:not(:disabled) { color:var(--k-wax) }
.kartograf-root .k-img-clear:disabled { opacity:.5;cursor:default }
.kartograf-root .courtline { font-size:12px;color:var(--k-ink-soft);margin-top:4px }
.kartograf-root .courtline b { font-family:var(--k-display);font-size:14px;color:var(--k-ink) }
.kartograf-root .uploadbox { border:1.5px dashed var(--k-line-strong);border-radius:4px;padding:12px;text-align:center;cursor:pointer;
  color:var(--k-ink-soft);font-size:12.5px;font-weight:600;margin-bottom:8px;background:rgba(168,132,47,.03) }
.kartograf-root .uploadbox span { display:block;font-weight:400;font-size:10.5px;margin-top:2px }
.kartograf-root .uploadbox:hover { border-color:var(--k-gold);color:var(--k-gold) }
.kartograf-root .mapuploaded { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--k-moss);margin-bottom:8px;font-weight:600 }
.kartograf-root .mapdraft { position:absolute;top:6px;left:10px;font-size:9.5px;font-style:italic;color:var(--k-ink-soft);z-index:3 }
.kartograf-root .langchip { display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--k-inkblue);border:1px solid var(--k-inkblue);border-radius:3px;padding:1px 6px;margin:1px 0 1px 3px }
.kartograf-root .langchip .langx { font-size:8px;cursor:pointer;color:var(--k-ink-soft) }
.kartograf-root .langchip .langx:hover { color:var(--k-wax) }
.kartograf-root /* organisationer */
.sigil { position:relative;width:52px;height:60px;flex-shrink:0;display:grid;place-items:center;font-family:var(--k-display);font-weight:700;font-size:22px;color:var(--kc,var(--k-gold));
  background:var(--kc,var(--k-line-strong));cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);filter:drop-shadow(1px 2px 0 rgba(184,167,135,.4)) }
/* Skjold-rammen: clip-path klipper en almindelig border væk paa de skraa kanter, saa hele skjoldet
   mangler ramme forneden. I stedet tegnes rammen som sigil'ens baggrund (--kc) med et 2px-indrykket
   paper-lag ovenpaa i samme skjold-form — saa rammen foelger hele konturen (ogsaa spidsen). */
.kartograf-root .sigil::before { content:"";position:absolute;inset:2px;background:var(--k-paper);
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);z-index:-1 }
.kartograf-root .sigil.sm { width:40px;height:48px;font-size:17px;margin:0 auto }
.kartograf-root /* forseglet befaling */
.sealedbox { border:1px solid var(--k-line-strong);border-radius:4px;background:var(--k-paper);padding:12px 14px;margin-top:4px }
.kartograf-root .sealedbox.empty { display:flex;gap:8px;align-items:center;border-style:dashed;background:rgba(155,58,50,.03) }
.kartograf-root .sealedbox.sealed { display:flex;gap:12px;align-items:center;cursor:pointer;background:rgba(155,58,50,.05);border-color:var(--k-wax) }
.kartograf-root .sealedbox.sealed:hover { box-shadow:0 0 0 1.5px var(--k-wax) }
.kartograf-root .sealwax { width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#f6e7d7;font-size:13px;
  background:radial-gradient(circle at 35% 30%, #c0564c, var(--k-wax) 65%, var(--k-wax-deep));
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.25) }
.kartograf-root .sealtitle { font-family:var(--k-display);font-weight:700;font-size:16px;color:var(--k-wax) }
.kartograf-root .sealsub { font-size:11px;color:var(--k-ink-soft) }
.kartograf-root .agendatext { font-family:var(--k-display);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--k-ink);
  border-left:3px solid var(--k-wax);padding:6px 10px;background:rgba(155,58,50,.04);border-radius:0 4px 4px 0 }

/* ===================================================================== */
/* Kartografens bord — tomt 2D workspace (/v2): canvas-flade + pergament-vinduer */
/* Alt scopet under .kartograf-root; rører ikke det klassiske workspace.        */
/* ===================================================================== */
/* Bordet er bare en tom pult-flade (ingen permanent vaerktoejslinje). Baggrunden er
   gennemsigtig, saa shell'ens desk-farve gaar igennem og fladen smelter sammen med
   omgivelserne; et svagt gitter giver pult-tekstur. */
.kartograf-root .kws-canvas { position:relative; overflow:visible; min-height:calc(100vh - 110px);
  background:
    linear-gradient(0deg, rgba(184,167,135,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,167,135,.10) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px; }

/* Rige-vælger (flydende bar øverst på bordet) */
.kartograf-root .k-realmbar { position:absolute; top:12px; left:16px; z-index:5; display:flex; align-items:center; gap:8px;
  background:var(--k-card); border:1px solid var(--k-line-strong); border-radius:5px; padding:3px 10px;
  box-shadow:2px 3px 0 rgba(184,167,135,.45); }
.kartograf-root .k-realmbar-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--k-gold); font-weight:600; }
.kartograf-root .k-realmbar-select { min-width:170px; }

/* Pergament-vindue */
.kartograf-root .kwin { position:absolute; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, var(--k-card-raised), var(--k-card));
  border:1px solid var(--k-line-strong); border-radius:6px;
  box-shadow:0 6px 22px rgba(51,41,30,.22), 0 2px 6px rgba(51,41,30,.16); }
.kartograf-root .kwin.maximized { inset:8px !important; width:auto !important; height:auto !important; }
.kartograf-root .kwin-bar { display:flex; align-items:center; gap:9px; padding:7px 10px; cursor:move; user-select:none;
  background:linear-gradient(180deg,#f3ecdc,#ece2cd); border-bottom:1px solid var(--k-line-strong); }
.kartograf-root .kwin-seal { width:22px; height:22px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  font-size:12px; color:#f6e7d7;
  background:radial-gradient(circle at 35% 30%, #c0564c, var(--k-wax) 65%, var(--k-wax-deep));
  box-shadow:inset 0 -1px 3px rgba(0,0,0,.35); }
.kartograf-root .kwin-title { flex:1; min-width:0; font-family:var(--k-display); font-weight:700; font-size:15px;
  color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kartograf-root .kwin-ctrls { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.kartograf-root .kwin-btn { width:22px; height:22px; display:grid; place-items:center; cursor:pointer; font-size:12px;
  line-height:1; color:var(--k-ink-soft); background:transparent; border:1px solid transparent; border-radius:4px; }
.kartograf-root .kwin-btn:hover { color:var(--k-ink); border-color:var(--k-line-strong); background:var(--k-card-raised); }
.kartograf-root .kwin-btn-close:hover { color:#f6e7d7; border-color:transparent;
  background:radial-gradient(circle at 35% 30%, #c0564c, var(--k-wax) 65%, var(--k-wax-deep)); }
.kartograf-root .kwin-body { flex:1; min-height:0; overflow:auto; }
/* Indhold i vindue: flad k-card-rammen, lad vindueschrome vaere rammen */
.kartograf-root .kwin-body .k-card { border:none; border-radius:0; box-shadow:none; background:transparent; max-width:none; margin:0; }
.kartograf-root .kwin-body .timeline-v2-page { height:100%; overflow:hidden; }
.kartograf-root .kwin-body .timeline-v2-page .timeline-v2-pane.active { display:flex; flex:1 1 auto; min-height:0; overflow:hidden; }

/* Resize-haandtag */
.kartograf-root .kwin-rz { position:absolute; z-index:2; }
.kartograf-root .kwin-rz-e  { top:0; right:0; width:6px; height:100%; cursor:ew-resize; }
.kartograf-root .kwin-rz-w  { top:0; left:0; width:6px; height:100%; cursor:ew-resize; }
.kartograf-root .kwin-rz-s  { left:0; bottom:0; width:100%; height:6px; cursor:ns-resize; }
.kartograf-root .kwin-rz-se { right:0; bottom:0; width:13px; height:13px; cursor:nwse-resize; }
.kartograf-root .kwin-rz-sw { left:0; bottom:0; width:13px; height:13px; cursor:nesw-resize; }
.kartograf-root .kwin-drag-overlay { position:fixed; inset:0; z-index:9999; cursor:grabbing; }