/* 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.)

   H123 (2026-09-21): legacy nexus-praefiks-laget er fjernet i sin helhed
   (0 forekomster i repoet). Ét tokenlag udviklere skal kende: --ui-*,
   --space-*, --radius-*, --shadow-*, --z-*, --motion-*, --font-*.
   
   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;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Cinzel', serif;
  --font-lore: 'Cormorant Garamond', serif;

  /* Motion */
  --motion-fast: 0.15s ease;
  --motion-normal: 0.2s ease;

  /* Elevation/shadows (light default - dark og Nexus V3 er stærkere mod
     mørk grund, jf. H123 fase 2d) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Spacing (ONLY allowed values)
     2026-09-20: --space-2xs og --space-sm-md tilfoejet. Den oprindelige
     6-trins-skala havde intet under 4px og intet mellem 8 og 16, og de taette
     vaerktoejs-flader (Rule Builder, battlemap-panelerne, chips) brugte derfor
     1, 2, 3, 5, 6, 7, 10, 12 og 14px i 2.098 tilfaelde. Med disse to trin
     daekkes 1.627 af dem praecist, og resten rykker hoejst 2px.
     --space-sm-md ligger mellem sm og md; navnet siger hvor, saa det ikke
     skal slaas op. */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm-md: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px; /* H123 fase 2e (2026-09-21): niende trin, undtagelse fra
     otte-trins-loftet. Legacy nexus-spacing-2xl var 48px (23 brug); at runde
     ned til --space-2xl (40px) er en synlig vaerdiaendring 23 steder. Gaten
     accepterer allerede 48 som on-scale (check-design-contract.ps1 $onScale),
     saa dette navngiver blot det gaten allerede tillod. */

  /* Radius. H123 fase 7 (2026-09-21): base --radius fjernet - ingen
     calc()-afhaengighed pegede paa den laengere, 0 brug. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px; /* H123 fase 2f (2026-09-21): genindfoert - fjernet
     2026-09-20 pga. nul brug, men legacy nexus-radius-xl havde 19 reelle
     brug (denne migrering giver dem et navn i kontrakten). */
  --radius-full: 9999px;

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

  --card: #ffffff;

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

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

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

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

/* Dark mode */
.dark {
  /* H123 fase 6b (2026-09-21): nye tokens, intet praecedens i repoet.
     --ui-border-hover WCAG 1.4.11-verificeret >= 3:1 (3.91:1/3.55:1) mod de
     moerke flader i nexus-bg-*-familien (fase 6c). --ui-surface-subtle
     genbruger nexus-bg-elevated's eksisterende moerke tone (samme rolle:
     "let hoejere flade"). */
  --ui-surface-subtle: #1A1D22;
  --ui-border-hover: #64748B;

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

  --card: oklch(0.145 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);

  --destructive: oklch(0.396 0.141 25.723);
  /* 2026-09-20: var oklch(0.637 0.237 25.331) = #fb2c36, som gav 2.63:1 mod
     --destructive (#82181a) — lys roed paa moerk roed, paa fejlbeskeder.
     #fdd8dd giver 7.66:1 og bevarer den toning designet lagde op til.
     En moerkere flade loeser det ikke: selv #42100e naar kun 4.20:1. */
  --destructive-foreground: #fdd8dd;

  --border: oklch(0.269 0 0);
  --ring: oklch(0.439 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 */

  /* Elevation/shadows - staerkere mod moerk grund (H123 fase 2d) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);

  /* Module-specific accent colors - moerk flade + lysere ink (H123 fase 3,
     2026-09-21). Alle kontrastforhold WCAG-kontrolleret >= 4.5:1. */
  --ui-module-characters-bg: #172554;   /* blue-950 */
  --ui-module-characters-text: #93c5fd; /* blue-300 - 8.15:1 */
  --ui-module-adventure-bg: #052e16;    /* green-950 */
  --ui-module-adventure-text: #86efac;  /* green-300 - 10.62:1 */
  --ui-module-chat-bg: #1e293b;         /* slate-800 */
  --ui-module-chat-text: #cbd5e1;       /* slate-300 - 9.85:1 */
  --ui-module-realm-bg: #451a03;        /* amber-950 */
  --ui-module-realm-text: #fcd34d;      /* amber-300 - 10.39:1 */
  --ui-module-realm-text-hover: #fde68a; /* amber-200 - 12.03:1, lysere end
     hviletilstand (modsat lys-tema, hvor hover er moerkere) */
  --ui-module-rules-bg: #1e1b4b;        /* indigo-950 */
  --ui-module-rules-text: #a5b4fc;      /* indigo-300 - 8.02:1 */
  --ui-module-combat-bg: #450a0a;       /* red-950 */
  --ui-module-combat-text: #fca5a5;     /* red-300 - 8.51:1 */
  --ui-module-friends-bg: #3b0764;      /* purple-950 */
  --ui-module-friends-text: #d8b4fe;    /* purple-300 - 8.48:1 */
}

/* 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);
  --ui-surface-subtle: #f8fafc; /* H123 fase 6b (2026-09-21), fra nexus-light-bg-subtle */

  /* 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-border-hover: #94a3b8; /* H123 fase 6b (2026-09-21), fra nexus-light-border-hover */
  --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.
     H123 fase 7 (2026-09-21): --mud-palette-primary-lighten/-warning-
     lighten/-success-lighten/-error-lighten don't exist anywhere in the
     repo's MudBlazor setup (dangling refs, TOKENS.md § 11 #6) - replaced
     with color-mix() tints of the real base palette colors, which is
     mechanically what "-lighten" always meant. --ui-node-subflow still
     aliases --mud-palette-tertiary, which ALSO doesn't exist - that one
     needs an actual new color decision (what represents "subflow"
     visually), not a mechanical fix, and stays an open design-system
     decision rather than a guessed hex. */
  --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 - STADIG uafklaret, se TOKENS.md § 11 #6 */
  --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:  color-mix(in srgb, var(--mud-palette-primary) 20%, white);
  --ui-role-output:    var(--mud-palette-warning);
  --ui-role-output-bg: color-mix(in srgb, var(--mud-palette-warning) 20%, white);
  --ui-role-event:     var(--mud-palette-success);
  --ui-role-event-bg:  color-mix(in srgb, var(--mud-palette-success) 20%, white);
  --ui-role-missing:   var(--mud-palette-error);
  --ui-role-missing-bg: color-mix(in srgb, var(--mud-palette-error) 20%, white);
}

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

/* ============================================
   LEGACY TOKEN COMPATIBILITY (fjernet H123, 2026-09-21)
   ============================================ */

/*
   Legacy nexus-praefiks-laget der stod her er fjernet i sin helhed
   (docs/ai-agents/compliance/DESIGN_LEGACY_CLEANUP.md). Brug --ui-* i UI-kode.
*/

/* Backward compatibility aliases */
/*
   2026-09-20: De 34 --color-*-aliaser er fjernet. De var rene 1:1-genveje til
   base-tokens fra en tidligere migrering, havde nul brug i kodebasen, og
   udvidede valgmulighederne for en udvikler uden at tilfoeje information.

   Samtidig er --radius-sm/-md/-lg/-xl fjernet HER. De blev gendeklareret som
   calc() efter deres foerste deklaration oeverst i filen og vandt i kaskaden,
   saa --radius-sm reelt var 6px hvor TOKENS.md lover 4px. Nu gaelder de
   foerste deklarationer: 4px / 8px / 10px, som dokumenteret. --radius-xl havde
   nul brug og er ikke genindfoert.

   Brug --ui-* i UI-kode. Nye tokens: docs/ai-agents/skills/design-system/SKILL.md
*/
:root {
    /* Font size alias for backward compatibility */
    --font-size: var(--font-size-base);

    /* 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 {
    /* H123 fase 6c (2026-09-21): denne familie var moerke vaerdier deklareret
       udenfor dark-scope (aktive ogsaa i lys tilstand) - en fejl fra en
       tidligere migrering. nexus-bg-primary/-bg-surface/-border-subtle/
       -text-primary/-text-muted havde 0 brug og er slettet. De tre reelt
       brugte (bg-elevated, border, border-hover) er delt: battlemap/combat-
       chrome (bevidst permanent moerk) fik sit eget undtagelsestoken
       lige nedenfor; almindelige indholdskort blev migreret til
       --ui-surface-muted/--ui-border/--ui-border-hover saa de foelger tema. */
    --ui-battlemap-surface-elevated: #1A1D22; /* bevidst permanent moerk - battlemap-chrome skal laese ens i alle temaer, ligesom --ui-nav-* (fase 4) */
    --ui-battlemap-border-hover: #3B424C; /* kun -hover-varianten har forbrugere; base-varianten (nexus-border) blev kun brugt uden for battlemap og mappet til --ui-border i stedet */

    /* Top Navigation Bar - Slate theme (Figma design). H123 fase 4
       (2026-09-21): forfremmet til --ui-nav-* kontrakten. BEVIDST konstant
       paa tvaers af Classic/dark/V2/V3 - ét sted i :root, ingen .dark eller
       flavor-override. Bjaelken skal stå fast, saa brugeren altid ved hvor
       toppen er, uanset tema. Se TOKENS.md § "Navigation tokens" for
       begrundelsen. */
    --ui-nav-bg: #1e293b; /* slate-800 - mørk blå-grå baggrund */
    --ui-nav-border: #334155; /* slate-700 - border farve */
    --ui-nav-height: 64px; /* h-16 = 64px */
    --ui-nav-text: #ffffff; /* Hvid tekst */
    --ui-nav-text-muted: #e2e8f0; /* slate-200 - inactive link tekst */
    --ui-nav-hover: rgba(71, 85, 105, 0.5); /* slate-700/50 - hover state */
    --ui-nav-active: #475569; /* slate-700 - active state */
    --ui-nav-button-bg: #475569; /* slate-700 - button baggrund */
    --ui-nav-button-hover: #334155; /* slate-600 - button hover */
    
    /* Z-index layers (komplet skala - 5 af 8 er ubrugte i dag, behold dem alle
       jf. H123 fase 2c) */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* Module-specific accent colors (for QuickActions and module indicators).
       H123 fase 3 (2026-09-21): forfremmet fra nexus-module-* til
       --ui-module-* kontrakten. Theme-invariante paa tvaers af Classic/V2/V3
       (badges skal laese ens uanset flavor) - kun .dark faar egen, moerkere
       flade + lysere ink, kontrasttjekket >= 4.5:1 nedenfor ved .dark. */
    /* Characters module - Blue theme */
    --ui-module-characters-bg: #eff6ff; /* blue-50 */
    --ui-module-characters-text: #2563eb; /* blue-600 */

    /* Adventure module - Green theme */
    --ui-module-adventure-bg: #f0fdf4; /* green-50 */
    --ui-module-adventure-text: #15803d; /* green-700 — green-600 gav 3.15:1 mod -adventure-bg */

    /* Chat module - Slate theme */
    --ui-module-chat-bg: #f8fafc; /* slate-50 */
    --ui-module-chat-text: #475569; /* slate-600 */

    /* RealmManagement module - Amber theme */
    --ui-module-realm-bg: #fffbeb; /* amber-50 */
    --ui-module-realm-text: #b45309; /* amber-800 — amber-600 gav 2.07:1, amber-700 kun 3.07:1 */
    --ui-module-realm-text-hover: #92400e; /* amber-900 — skal vaere moerkere end hviletilstanden, som nu er amber-800 */

    /* Rules module - Indigo theme */
    --ui-module-rules-bg: #eef2ff; /* indigo-50 */
    --ui-module-rules-text: #4f46e5; /* indigo-600 */

    /* Combat module - Red theme */
    --ui-module-combat-bg: #fef2f2; /* red-50 */
    --ui-module-combat-text: #b91c1c; /* red-700 — red-600 gav 4.41:1 mod -combat-bg */

    /* Friends module - Purple theme */
    --ui-module-friends-bg: #faf5ff; /* purple-50 */
    --ui-module-friends-text: #9333ea; /* purple-600 */
}

/* ============================================
   REDUCED MOTION (H123 fase 2b, 2026-09-21)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0s;
        --motion-normal: 0s;
    }
}

/* ============================================
   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(--font-body);
    font-size: 14px;
    color: var(--ui-text-primary); /* Use light mode text as default */
    background-color: var(--ui-background); /* 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(--space-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(--space-3xl);
}

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

.mud-card.mt-4 .mud-card-content {
    padding-bottom: var(--space-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(--font-heading);
    font-weight: 600;
    font-size: 24px;
    color: var(--ui-text-primary);
}

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

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

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

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

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

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

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

/* App titel */
.nexus-app-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    color: var(--ui-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(--ui-surface-muted) !important;
    border: 1px solid var(--ui-border-hover) !important;
    color: var(--ui-text-primary) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    transition: var(--motion-normal) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.mud-select .mud-input-label.mud-input-label-input-focused {
    color: var(--ui-action-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(--ui-surface) !important;
    /* MudMenu/MudSelect m.fl.: dark MudPalette giver lys tekst — popovers har lys baggrund i Nexus */
    --mud-palette-text-primary: var(--ui-text-primary);
    --mud-palette-text-secondary: var(--ui-text-secondary);
    color: var(--ui-text-primary);
}

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

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

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

.mud-popover .mud-list-item:hover {
    background-color: var(--ui-background) !important;
}

/* Bestiary V2: portal-rendered selects must keep the manual paper surface. */
body:has(.monster-entry-page) .mud-popover:not(.mud-tooltip) > .mud-popover-paper {
    background-color: var(--manual-paper, #f7f1e4) !important;
    border: 1px solid rgba(88, 59, 31, 0.24) !important;
    box-shadow: 0 10px 24px rgba(70, 48, 25, 0.18) !important;
}

body:has(.monster-entry-page) .mud-popover:not(.mud-tooltip) .mud-list,
body:has(.monster-entry-page) .mud-popover:not(.mud-tooltip) .mud-list-item {
    background-color: transparent !important;
    color: var(--manual-ink, #33291e) !important;
}

body:has(.monster-entry-page) .mud-popover:not(.mud-tooltip) .mud-list-item * {
    color: var(--manual-ink, #33291e) !important;
}

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

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

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

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

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

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

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

.mud-popover .mud-list-item.mud-selected:hover * {
    color: var(--ui-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(--ui-text-primary) !important;
}

.mud-popover:not(.mud-tooltip) .mud-menu-item:hover {
    background-color: var(--ui-background) !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(--ui-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(--ui-module-realm-bg) !important;
}

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

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

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

.mud-select .mud-input-adornment:hover {
    color: var(--ui-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(--ui-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(--ui-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(--ui-text-secondary) !important;
}

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

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

.mud-icon-button:hover {
    color: var(--ui-text-primary) !important;
    background: var(--ui-surface-muted) !important;
}

/* MudAvatar styling */
.mud-avatar {
    font-family: var(--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(--ui-action-primary) !important;
    color: var(--ui-action-primary) !important;
}

.mud-palette-secondary {
    background-color: color-mix(in srgb, var(--ui-action-primary) 85%, black) !important;
    color: color-mix(in srgb, var(--ui-action-primary) 85%, black) !important;
}

.mud-palette-background {
    background-color: var(--ui-background) !important;
}

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

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

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

.landing-page .mud-palette-text-secondary {
    color: var(--ui-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(--ui-background) !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(--ui-background) !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(--ui-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(--ui-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(--ui-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(--ui-background) !important;
}

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

.chat-overview-container {
    background-color: var(--ui-background) !important;
}

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

/* Chat Sidebar - KRITISK: Tving hvid baggrund på alt */
.chat-sidebar {
    background: var(--ui-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(--ui-surface) !important;
}

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

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

.chat-sidebar .mud-list-item-root:hover {
    background-color: var(--ui-background) !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: var(--ui-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: var(--ui-surface) !important;
}

.chat-sidebar .mud-palette-text-secondary {
    color: var(--ui-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(--ui-nav-button-bg) !important; /* Samme farve som conversation-name i midten */
}

.chat-sidebar .mud-typography-body2:not(.chat-item-name):not(.chat-item-time) {
    color: var(--ui-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(--ui-nav-button-bg) !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(--ui-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(--ui-text-secondary) !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(--ui-nav-button-bg) !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(--ui-nav-button-bg) !important;
}

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

.chat-overview-container .mud-palette-text-primary {
    color: var(--ui-nav-button-bg) !important;
}

.chat-overview-container .mud-palette-text-secondary {
    color: var(--ui-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(--ui-background) !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(--ui-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(--ui-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(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-module-realm-bg) !important;
}

.mud-palette-text-primary {
    color: var(--ui-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(--ui-nav-button-bg) !important;
}

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

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

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

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

.mud-button-contained-primary:hover {
    background-color: color-mix(in srgb, var(--ui-action-primary) 85%, black) !important;
}

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

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

.mud-input-helper-text {
    color: var(--ui-text-secondary) !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(--ui-nav-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(--ui-nav-text-muted) !important;
    fill: var(--ui-nav-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(--ui-nav-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(--ui-nav-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(--ui-nav-text-muted) !important;
    fill: var(--ui-nav-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(--ui-nav-text-muted) !important;
    fill: var(--ui-nav-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(--ui-nav-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(--ui-nav-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(--ui-text-primary);
    --mud-palette-text-secondary: var(--ui-text-secondary);
    --mud-palette-action-default: #616161;
    --mud-palette-action-hover: rgba(0, 0, 0, 0.08);
    background-color: var(--ui-background) !important;
    color: var(--ui-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(--ui-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(--ui-status-error) !important;
}

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

.top-navbar-menu-dropdown .top-navbar-profile-menu-email,
.top-navbar .mud-menu-paper .top-navbar-profile-menu-email {
    color: var(--ui-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(--ui-status-error) !important;
    fill: var(--ui-status-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(--ui-background) !important; /* Hvid baggrund - override mørk theme */
    height: 100%;
    flex: 1;
    min-height: 0; /* Kritisk for flex children med overflow */
    font-family: var(--font-body);
}

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

.main-content {
    background: var(--ui-background) !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(--ui-background) !important; /* Hvid baggrund i stedet for mørk */
    color: var(--ui-action-primary) !important; /* Mørk tekst i stedet for hvid */
    border-bottom: 2px solid var(--ui-action-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(--ui-background) !important;
    color: var(--ui-action-primary) !important;
}

.navigation-tabs .mud-button-filled-primary.mud-button-filled:hover {
    background-color: var(--ui-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: --ui-module-realm-text (#b45309 - amber-800 i lys tema)
   - Hover: --ui-module-realm-text-hover (#92400e - amber-900 i lys tema)
   - Background: --ui-module-realm-bg (#fffbeb - amber-50 i lys tema)
*/

/* 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(--ui-module-realm-text) !important;
    color: var(--ui-action-primary-text) !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(--ui-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(--ui-module-realm-text) !important;
    color: var(--ui-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(--ui-module-realm-bg) !important;
    border-color: var(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-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(--ui-text-primary) !important;
}

/* MudSelect input text color (for all modules) */
.mud-select .mud-input-control input,
.mud-select .mud-input-control {
    color: var(--ui-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(--ui-text-primary) !important;
}

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

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

/* Chat Sidebar - OBSOLETE: Brug .chat-sidebar i stedet */
.nexus-chat-sidebar {
    width: 350px;
    min-width: 250px;
    background: var(--ui-surface) !important; /* Hvid baggrund */
    border-right: 1px solid var(--ui-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(--ui-nav-button-bg) !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(--ui-background) !important;
}

/* Sikr hvid baggrund på alle child elementer */
.nexus-chat-sidebar > * {
    background-color: var(--ui-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(--ui-surface) !important;
}

.composer .mud-input-root,
.composer .mud-input-control,
.composer .mud-input-root > * {
    background-color: var(--ui-background) !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(--ui-background) !important;
}

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

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

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

.nav-tab {
    flex: 1;
    justify-content: center;
    padding: 12px var(--space-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(--ui-background) !important; /* Hvid baggrund i stedet for mørk */
    color: var(--ui-action-primary) !important; /* Mørk tekst i stedet for hvid */
    border-bottom: 2px solid var(--ui-action-primary) !important; /* Understregning for at vise aktiv */
}

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

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

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

.nav-tab:not(.active):hover {
    background: var(--ui-surface-muted);
}

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

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

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

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

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

.chat-list-item:hover {
    background: var(--ui-surface-muted);
}

.chat-list-item.selected {
    background: color-mix(in srgb, var(--ui-action-primary) 10%, transparent);
    border-left: 3px solid var(--ui-action-primary);
}

.empty-conversation-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    color: var(--ui-text-secondary);
}

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

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

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

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

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

/* Chat Main Content - Container for chat conversation eller ChatOverview */
.nexus-chat-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--ui-background) !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(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    background: var(--ui-background);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Kritisk for flex children med overflow */
}

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

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

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

.statistics-cards,
.nexus-statistics-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-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(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

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

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

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

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

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

.stat-icon-purple {
    color: var(--ui-module-friends-text);
}

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

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

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

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

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

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

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

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

.section-count {
    color: var(--ui-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(--ui-border);
    cursor: pointer;
    transition: background-color var(--motion-normal);
}

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

.conversation-item:hover {
    background: var(--ui-background);
}

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

.conversation-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
}

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

.conversation-group-icon {
    color: var(--ui-text-secondary);
    font-size: 16px;
}

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

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

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

.conversation-time {
    color: var(--ui-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(--space-md);
}

.conversation-preview {
    color: var(--ui-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(--space-xs);
    font-size: 12px;
    font-weight: 600;
}

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

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

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

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

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

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

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

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

.tip-text {
    color: var(--ui-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(--space-md);
    border-radius: var(--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(--ui-nav-bg);
    color: #e2e8f0;
    border-top-left-radius: 4px;
    margin-right: auto;
}

.bubble.theirs .message-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text-secondary);
    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: color-mix(in srgb, var(--ui-action-primary-text) 70%, transparent);
}

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

.message-timestamp {
    font-size: 0.68rem;
    opacity: 0.55;
    margin-top: 3px;
    color: var(--ui-text-secondary);
    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(--motion-normal);
}

.message-container:hover .message-timestamp {
    font-size: 0.68rem;
    opacity: 0.55;
    margin-top: 3px;
    color: var(--ui-text-secondary);
    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(--space-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(--ui-action-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: color-mix(in srgb, var(--ui-action-primary-text) 90%, transparent);
    margin: 0;
}

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

.sender-name {
    font-size: 11px;
    color: color-mix(in srgb, var(--ui-action-primary-text) 60%, transparent);
    margin: 0;
}

.bubble.theirs .sender-name {
    color: var(--ui-text-secondary);
}

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

.composer-input {
    flex: 1;
}

/* Tidligere stod her tre `.composer-input :global(.mud-input-root)`-regler.
   `:global()` er CSS Modules-syntaks og findes ikke i CSS; browseren kasserer
   hele reglen, så de har aldrig haft effekt. Fjernet som død kode i stedet for
   at blive omskrevet — en omskrivning ville aktivere hidtil inaktiv styling. */

.composer-send-button {
    flex-shrink: 0;
    color: var(--ui-action-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(--ui-border);
    background: var(--ui-surface-muted);
    padding: var(--space-sm) 12px;
}

.character-selector-button:hover {
    border-color: var(--ui-border-hover);
    background: var(--ui-surface-muted);
}

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

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

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

.character-details {
    color: var(--ui-text-secondary);
    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(--space-sm);
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 20;
    max-height: 300px;
    overflow-y: auto;
}

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

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

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

.character-option:hover {
    background: var(--ui-surface-muted);
}

.character-option.selected {
    background: color-mix(in srgb, var(--ui-action-primary) 10%, transparent);
}

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

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

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

/* Conversation View - Fylder hele main-content området */
.conversation-root {
    background: var(--ui-background);
    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(--ui-background);
}

.conversation-placeholder-text {
    color: var(--ui-text-secondary);
}

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

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

.chat-header-avatar {
    width: 40px;
    height: 40px;
    background: var(--ui-surface-muted);
    border: 1px solid var(--ui-border);
}

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

.chat-header-menu {
    color: var(--ui-text-secondary);
}

.messages {
    flex: 1;
    min-height: 0; /* Kritisk for flex children med overflow */
    padding: var(--space-md);
    background: var(--ui-background);
    font-family: var(--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(--ui-background);
}

.chat-list-container::-webkit-scrollbar-thumb,
.friends-list-container::-webkit-scrollbar-thumb,
.character-dropdown::-webkit-scrollbar-thumb {
    background: var(--ui-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(--ui-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(--space-sm);
}

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

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

.nexus-expandable-header:hover {
    background-color: var(--ui-background);
}

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

.nexus-expand-toggle:hover {
    background-color: var(--ui-background);
}

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

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

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

.nexus-nested-item:hover {
    background-color: var(--ui-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(--space-md);
}

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

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

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

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

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

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

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

/* Empty state text for expanded content */
.nexus-empty-nested-text {
    color: var(--ui-text-secondary);
    font-size: 13px;
    font-style: italic;
    margin-left: 28px;
    padding: var(--space-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(--font-lore);
    --v3-body: 'Inter', system-ui, sans-serif;

    --ui-background: var(--v3-background);
    --ui-surface: var(--v3-surface);
    --ui-surface-muted: var(--v3-surface-raised);
    --ui-surface-subtle: var(--v3-background-2); /* H123 fase 6b (2026-09-21) */
    --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-border-hover: var(--v3-border-strong); /* H123 fase 6b (2026-09-21) */
    --ui-ring: var(--v3-ring);
    --ui-radius: var(--radius-md);

    /* Elevation/shadows - staerkere mod moerk pergament-grund (H123 fase 2d) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
}

.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,
.nexus-v3-pop .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-text-primary,
.nexus-v3-pop .mud-button-text-primary,
.nexus-v3-root .mud-icon-button-color-primary,
.nexus-v3-pop .mud-icon-button-color-primary,
.nexus-v3-pop .mud-primary-text {
    color: var(--ui-action-primary) !important;
}

.nexus-v3-root .mud-button-text-default,
.nexus-v3-pop .mud-button-text-default,
.nexus-v3-pop .mud-dialog-title,
.nexus-v3-pop .mud-dialog-content,
.nexus-v3-pop .mud-dialog-actions,
.nexus-v3-pop .mud-typography,
.nexus-v3-pop .mud-radio-content,
.nexus-v3-pop .mud-switch-label {
    color: var(--ui-text-primary) !important;
}

.nexus-v3-root .mud-button-filled-error,
.nexus-v3-pop .mud-button-filled-error {
    background-color: var(--ui-error) !important;
    color: var(--ui-error-text) !important;
}

.nexus-v3-root .mud-button-root.mud-disabled,
.nexus-v3-pop .mud-button-root.mud-disabled {
    background-color: var(--ui-surface-muted) !important;
    color: var(--ui-text-secondary) !important;
}

.nexus-v3-root .mud-button-outlined-secondary,
.nexus-v3-pop .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;
}

/* MudBlazor portals render outside .nexus-v3-root. Mirror the V3 input
   contract on .nexus-v3-pop so dialogs and their nested controls stay dark. */
.nexus-v3-pop .mud-input-control,
.nexus-v3-pop .mud-input,
.nexus-v3-pop .mud-input-slot,
.nexus-v3-pop input,
.nexus-v3-pop textarea {
    color: var(--ui-text-primary) !important;
}

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

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

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

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

.nexus-v3-pop .mud-input.mud-input-outlined .mud-input-outlined-border,
.nexus-v3-pop .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-pop .mud-input-control:hover .mud-input.mud-input-outlined .mud-input-outlined-border,
.nexus-v3-pop .mud-input-control .mud-input-root.mud-focused .mud-input-outlined-border {
    border-color: var(--ui-ring) !important;
}

.nexus-v3-pop input::placeholder,
.nexus-v3-pop textarea::placeholder {
    color: var(--ui-text-primary) !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-realm {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ui-text-primary);
    font-size: 12px;
    font-weight: 600;
}
.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 V2: semantisk UI-kontrakt =======================================
   .kartograf-root / .kartograf-pop remapper --ui-* fra --k-*, praecis som
   .nexus-v3-root gor fra --v3-*. Uden dette blok rendrer enhver komponent der
   folger TOKENS.md (kun --ui-*) med Classic-hvid inde i pergament-skallen, og
   /v2 virker kun for MudBlazor-komponenter via !important-overrides nedenfor.

   --k-* er flavor-KILDEN. UI-kode maa aldrig bruge den direkte — kun --ui-*.
   Nye tokens: se docs/ai-agents/skills/design-system/SKILL.md (skal defineres
   i alle tre flavors i samme commit).
   ============================================================================ */
.kartograf-root,
.kartograf-pop {
    /* Fyldt guldflade der kan baere tekst. --k-gold #a8842f naar kun 3.44:1 mod
       #fffdf6 og 4.07:1 mod --k-ink, altsaa ingen ink klarer 4.5:1 paa den.
       --k-gold er uaendret som accent- og linjefarve; kun knapfladen er moerknet. */
    --k-gold-deep: #8f6f24;

    /* Flader */
    --ui-background: var(--k-desk);
    --ui-surface: var(--k-card);
    --ui-surface-muted: var(--k-desk-deep);
    --ui-surface-subtle: var(--k-paper); /* H123 fase 6b (2026-09-21) */

    /* Tekst */
    --ui-text-primary: var(--k-ink);
    --ui-text-secondary: var(--k-ink-soft);

    /* Handlinger */
    --ui-action-primary: var(--k-gold-deep);
    --ui-action-primary-text: var(--k-card-raised);
    --ui-action-secondary: var(--k-inkblue);
    --ui-action-secondary-text: var(--k-card-raised);

    /* Tilstande */
    --ui-error: var(--k-wax);
    --ui-error-text: var(--k-card-raised);

    /* Kant og fokus. Fokusringen er ink, ikke guld: guld paa pergament naar
       2.97:1 og rammer ikke WCAG 1.4.11's 3:1 for fokusindikatorer. */
    --ui-border: var(--k-line);
    --ui-border-hover: var(--k-line-strong); /* H123 fase 6b (2026-09-21) */
    --ui-ring: var(--k-ink);

    /* Radius — spejler KartografTheme.DefaultBorderRadius */
    --ui-radius: 5px;

    /* Status. NB: KartografTheme saetter Warning = Primary = --k-gold, saa
       advarsel og accent deler farve paa /v2. Registreret i TOKENS.md som
       aaben beslutning for design-system-ejeren. */
    --ui-status-success: var(--k-moss);
    --ui-status-warning: var(--k-gold);
    --ui-status-error: var(--k-wax);
    --ui-status-info: var(--k-inkblue);

    /* IKKE mappet her: --ui-node-* og --ui-role-* (Rule Builder,
       ContractVariablesPanel). De aliaser --mud-palette-*, inkl. -tertiary og
       -lighten som ikke findes i repoet. Verificer i browser paa /v2 om de
       arver Kartograf-paletten eller Classic, og luk hullet via design-system. */
}
.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; }
.k-active-team { display: inline-grid; grid-template-columns: auto minmax(150px, 220px); gap: 7px; align-items: center;
    color: var(--k-ink-soft); font-size: 12px; font-weight: 700; }
.k-active-team select { min-height: 30px; border: 1px solid var(--k-line-strong); border-radius: 5px;
    color: var(--k-ink); background: var(--k-paper); font: inherit; font-weight: 600; padding: 3px 28px 3px 8px; }
.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-realm {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--k-ink);
    font-size: 12px;
    font-weight: 600;
}
.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; }
/* Gate-fladerne (foer indgangen: /hjem, /choose-adventure m.fl.) baeres af
   PlayerGateLayout, som ikke har dock og chat-panel. Kroppen havde ingen regel
   overhovedet, og da .k-layout er height:100vh + overflow:hidden kostede det to ting:
   indholdet laa klistret op ad venstre skaermkant, og alt under skaermkanten blev
   KLIPPET uden mulighed for at scrolle. Reglen er bevidst identisk med .k-shell-body
   — foer og efter indgangen maa ikke se forskellige ud i noget saa basalt som marginer. */
.k-gate-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: flex-start; 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.mine { align-self: flex-end; }
.kartograf-root .k-chat-sysmsg.k-pinned { border-style: solid; border-color: var(--k-gold); }
/* v2-chat combat-kort: farvet venstrekant + baggrundstoning pr. kamp-type (bevarer pergament-temaet). */
.kartograf-root .k-chat-sysmsg.k-sys-attack,
.kartograf-root .k-chat-sysmsg.k-sys-damage,
.kartograf-root .k-chat-sysmsg.k-sys-roll { border-left-style: solid; border-left-width: 3px; }
.kartograf-root .k-chat-sysmsg.k-sys-attack { border-left-color: var(--k-wax); background: color-mix(in srgb, var(--k-wax) 7%, var(--k-desk)); }
.kartograf-root .k-chat-sysmsg.k-sys-damage { border-left-color: var(--k-copper); background: color-mix(in srgb, var(--k-copper) 9%, var(--k-desk)); }
.kartograf-root .k-chat-sysmsg.k-sys-roll { border-left-color: var(--k-gold); background: color-mix(in srgb, var(--k-gold) 6%, var(--k-desk)); }
/* V2-chat: systembeskeden er den ENESTE visuelle indpakning. De indlejrede kamp-kort tegner deres
   egen lyse kort-flade (til Classic/mobil) — den ville lande som en hvid kasse midt i pergamentet,
   saa den fjernes her, og kortene arver chattens baggrund og tekstfarve. */
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .damage-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .combat-action-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .combat-roll-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .skill-check-display,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .dice-check-display {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    color: inherit;
    /* Flex-barn i k-chat-sysmsg: skal fylde den ledige bredde og maa gerne braekke linjer. */
    flex: 1 1 auto;
    min-width: 0;
}
/* Chips inde i kortene: kun en tynd kant, ingen udfyldt flade der genskaber kasse-looket. */
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .damage-type-chip,
.kartograf-root .k-chat-v2-surface .k-chat-sysmsg .skill-chip {
    background-color: transparent !important;
    border-color: color-mix(in srgb, var(--k-copper) 30%, transparent) !important;
    color: inherit !important;
}
/* Udregningen der er foldet ud inline under et tal: pergament-skin i stedet for Mud-fladen. */
.kartograf-root .k-chat-v2-surface .roll-total-trigger { color: var(--k-ink); border-bottom: 1px dotted var(--k-line-strong); }
.kartograf-root .k-chat-v2-surface .roll-total-popover {
    background: color-mix(in srgb, var(--k-gold) 7%, transparent);
    border-left-color: var(--k-line-strong);
    color: var(--k-ink-soft);
}
.kartograf-root .k-chat-sysmsg.k-sys-crit { box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-moss) 55%, transparent); }
.kartograf-root .k-chat-sysmsg.k-sys-fumble { box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-wax) 55%, transparent); }
.kartograf-root .k-chat-sysmsg .k-chat-sys-icon { font-size: 15px; line-height: 1.15; }
/* v2-chat: altid-synlig oplæs-knap (🔊) på hver besked; pulserer mens TTS spiller. */
.kartograf-root .k-chat-readaloud-btn { font-size: 12px; line-height: 1; cursor: pointer; opacity: .5; margin-left: 2px;
    transition: opacity .12s ease, transform .12s ease; }
.kartograf-root .k-chat-readaloud-btn:hover { opacity: 1; transform: scale(1.14); }
.kartograf-root .k-chat-readaloud-btn.k-tts-on { opacity: 1; animation: k-tts-pulse 1s ease-in-out infinite; }
@keyframes k-tts-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.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-v2-surface .k-chat-searchresult { align-self: stretch; margin: 4px 0; padding: 2px 4px; background: transparent;
    border: none; border-radius: 0; }
.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; gap: 12px; }
.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: 0; }
.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-v2-surface .k-chat-searchresult-global:hover { color: var(--k-wax); }
.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-v2-surface .k-chat-msg-text { background: transparent; border: none; border-radius: 0;
    padding: 1px 2px; color: var(--k-ink); font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.kartograf-root .k-chat-v2-surface .k-chat-msg.mine .k-chat-msg-text { background: transparent; border-color: transparent; }
.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-v2-surface .k-chat-msg.k-mode-dm .k-chat-msg-text { border-color: transparent; }
.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-visibility-control .k-inline-label { display: inline-flex; align-items: center; gap: 6px; }
.kartograf-root .k-visibility-control .k-inline-value { cursor: default; }
.kartograf-root .k-visibility-control .k-inline-value:hover { color: var(--k-ink); }
.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-page.k-character-sheet-page {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.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); }
/* Kompakt/diskret statgrid-variant (fx Verdensoverblik) — smaa inline-piller i stedet for store bokse */
.kartograf-root .k-statgrid--mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.kartograf-root .k-statgrid--mini .k-statbox { display: inline-flex; align-items: baseline; gap: 5px;
    padding: 2px 9px; background: transparent; border-radius: 999px; text-align: left; }
.kartograf-root .k-statgrid--mini .k-statbox b { display: inline; font-size: 13px; }
.kartograf-root .k-statgrid--mini .k-statbox span { font-size: 9px; }

/* Foldbart afsnit (native <details>) med drejende pil — genbruges af /v2-vinduer */
.kartograf-root .k-collapse { margin: 10px 0; }
.kartograf-root summary.k-collapse-sum { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
    gap: 6px; user-select: none; font-weight: 700; font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--k-ink-soft); }
.kartograf-root summary.k-collapse-sum::-webkit-details-marker { display: none; }
.kartograf-root summary.k-collapse-sum::before { content: "\25B8"; font-size: 11px; transition: transform .15s ease; }
.kartograf-root details.k-collapse[open] > summary.k-collapse-sum::before { transform: rotate(90deg); }
.kartograf-root summary.k-collapse-sum.k-sect { display: flex; text-transform: none; letter-spacing: 0;
    font-size: 17px; color: var(--k-ink); }
.kartograf-root .k-collapse-body { margin-top: 8px; }
/* Skjul selv indholdet naar panelet er lukket — native <details>-collapse er ikke paalidelig
   i app-shell'en, saa vi haandhaever det eksplicit (ellers vises indholdet altid). */
.kartograf-root details.k-collapse:not([open]) > .k-collapse-body { display: none; }

.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 .tactions { display:inline-flex;align-items:center;gap:4px;flex-shrink:0 }
.kartograf-root .tree-add-btn { width:24px;height:24px;display:inline-grid;place-items:center;border:1px solid var(--k-line-strong);border-radius:4px;
  background:rgba(255,248,236,.72);color:var(--k-ink-soft);font-family:var(--k-sans);font-size:15px;font-weight:700;line-height:1;cursor:pointer;padding:0 }
.kartograf-root .tree-add-btn:hover { color:var(--k-gold);border-color:var(--k-gold);background:rgba(168,132,47,.08) }
.kartograf-root .territory-create-btn { margin-left:auto }
.kartograf-root .territory-children-header { display:flex;align-items:center;gap:8px }
.kartograf-root .territory-children-header > span { min-width:0 }
.kartograf-root .tree-create-pop { display:inline-flex;gap:6px;align-items:center;margin:4px 0 6px;padding:5px;border:1px solid var(--k-line);
  border-radius:4px;background:var(--k-card-raised);box-shadow:0 5px 14px rgba(31,24,16,.12) }
.kartograf-root .tree-create-choice { border:1px solid var(--k-line-strong);border-radius:4px;background:rgba(255,248,236,.78);color:var(--k-ink);
  font-family:var(--k-sans);font-size:11.5px;font-weight:600;line-height:1.2;padding:5px 8px;cursor:pointer;white-space:nowrap }
.kartograf-root .tree-create-choice:hover { color:var(--k-gold);border-color:var(--k-gold) }
.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,
.kartograf-root .k-pcnpc button { font-size:11px;font-weight:600;padding:3px 9px;cursor:pointer;color:var(--k-ink-soft);background:transparent;border:0;font-family:var(--k-sans);line-height:1.2 }
.kartograf-root .k-pcnpc span.active,
.kartograf-root .k-pcnpc button.active { background:var(--k-gold);color:#fff8ec }
.kartograf-root .k-pcnpc button:focus-visible { outline:2px solid var(--k-inkblue);outline-offset:-2px }
.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 .ktitle-picker { position:relative;min-width:220px }
.kartograf-root .ktitle-trigger { width:100%;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  color:var(--k-ink);background:var(--k-card-raised);border:1px solid var(--k-line);border-radius:4px;padding:5px 7px;
  font-family:var(--k-sans);font-size:11.5px;text-align:left;cursor:pointer }
.kartograf-root .ktitle-trigger:hover,
.kartograf-root .ktitle-trigger:focus-visible { border-color:var(--k-gold);outline:none }
.kartograf-root .ktitle-trigger span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kartograf-root .ktitle-menu { position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:35;max-height:320px;overflow:auto;
  border:1px solid var(--k-line-strong);border-radius:4px;background:var(--k-card-raised);box-shadow:0 8px 20px rgba(31,24,16,.16);
  padding:6px }
.kartograf-root .ktitle-menu-cascading { right:auto;width:min(680px,calc(100vw - 3rem));max-height:min(360px,calc(100vh - 12rem));
  display:grid;grid-template-columns:minmax(180px,240px) minmax(220px,1fr);overflow:hidden;padding:0 }
.kartograf-root .ktitle-category-list { overflow-y:auto;border-right:1px solid var(--k-line);padding:6px }
.kartograf-root button.ktitle-category-option { width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px;border:0;border-radius:3px;background:transparent;color:var(--k-ink);font-family:var(--k-sans);font-size:12px;text-align:left;cursor:pointer }
.kartograf-root button.ktitle-category-option span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.kartograf-root button.ktitle-category-option:hover,
.kartograf-root button.ktitle-category-option.active { background:rgba(168,132,47,.10);color:var(--k-wax) }
.kartograf-root .ktitle-submenu { overflow-y:auto;padding:6px }
.kartograf-root .ktitle-submenu-title { padding:7px 8px 4px;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--k-gold) }
.kartograf-root .ktitle-submenu-empty { display:flex;align-items:center;min-height:120px;color:var(--k-muted);font-family:var(--k-sans);font-size:12px }
.kartograf-root .ktitle-select-group { display:block;padding:7px 8px 4px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--k-gold) }
.kartograf-root button.ktitle-select-option { display:block;width:100%;padding:7px 8px 7px 18px;border:0;border-radius:3px;background:transparent;
  color:var(--k-ink);font-family:var(--k-display);font-size:14px;text-align:left;cursor:pointer }
.kartograf-root .ktitle-submenu button.ktitle-select-option { padding-left:8px }
.kartograf-root button.ktitle-select-option:hover,
.kartograf-root button.ktitle-select-option.selected { background:rgba(168,132,47,.10);color:var(--k-wax) }
.kartograf-pop .ktitle-select-group { display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--k-gold) }
.kartograf-pop .ktitle-select-option { display:block;padding-left:12px;font-family:var(--k-display);font-size:14px;color:var(--k-ink) }
.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) }
@media (max-width: 680px) {
  .kartograf-root .ktitle-menu-cascading { width:min(92vw,420px);grid-template-columns:1fr;max-height:min(420px,calc(100vh - 10rem)) }
  .kartograf-root .ktitle-category-list { max-height:170px;border-right:0;border-bottom:1px solid var(--k-line) }
}
.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;position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat }
.kartograf-root .flagadd span { font-size:9px;letter-spacing:0;text-transform:none }
.kartograf-root .flagadd .flagadd-symbol { font-size:17px;letter-spacing:0;text-transform:none }
.kartograf-root .flagadd:hover { border-color:var(--k-gold);color:var(--k-gold) }
.kartograf-root .flagadd.has-flag { border-style:solid;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65) }
.kartograf-root .flagadd.has-flag::before { content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,15,12,.08),rgba(18,15,12,.48));z-index:0 }
.kartograf-root .flagadd.has-flag span { position:relative;z-index:1 }
.kartograf-root .flagadd.has-flag .flagadd-symbol { opacity:0 }
.kartograf-root .flagadd.has-flag:hover .flagadd-symbol { opacity:1 }
.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; }

/* Én-vindues-fanen (/v2/vindue, Feature 27): skallen i StandaloneWindow-chrome har ingen header og
   ingen reol; kroppen giver hele fladen til vinduets indhold, og chat-docken (.k-chat) ligger som paa
   bordet til hoejre — sammenfoldet fra start. Indholdet baerer .kwin-body, saa de eksisterende
   vinduesregler (kort uden ramme, timeline, bestiarium) gaelder uaendret. */
.kartograf-root.k-layout-standalone .k-shell-body { padding: 0; display: flex; flex-direction: column; }
.kartograf-root .k-standalone { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kartograf-root .k-standalone-bar { display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--k-line-strong);
  background: var(--k-card); flex-shrink: 0; }
.kartograf-root .k-standalone-board { margin-left: auto; }
.kartograf-root .k-standalone-body { flex: 1; min-height: 0; overflow: auto; }
.kartograf-root .k-standalone-unknown { margin: var(--space-lg); }

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

/* Bestiary editor action bar: global fallback because Monsters UI.Shared scoped CSS is not loaded by the browser shell. */
.kartograf-root .kwin-body [data-testid="monsters-overview"].monster-page.monster-manual-page {
  display:flex !important; height:100% !important; max-height:100% !important; min-height:0 !important;
  overflow:hidden !important; padding:0 !important;
}

.kartograf-root .kwin-body [data-testid="monster-manual-book"] {
  flex:1 1 auto !important; height:100% !important; max-height:100% !important; min-height:0 !important;
  overflow:auto !important;
}

.kartograf-root .kwin-body [data-testid="monster-manual-book"] .monster-workbench.monster-book-spread {
  height:100% !important; max-height:100% !important; min-height:0 !important;
}

.kartograf-root .kwin-body [data-testid="monster-manual-book"] .monster-book-leaf {
  height:100% !important; max-height:100% !important; min-height:0 !important; overflow:hidden !important;
}

.kartograf-root .kwin-body [data-testid="monster-index-page"].monster-panel.monster-index-page {
  display:flex !important; flex-direction:column !important; height:100% !important; max-height:100% !important;
  min-height:0 !important; overflow:hidden !important;
}

.kartograf-root .kwin-body [data-testid="monster-editor"].monster-panel.monster-editor-panel.monster-entry-page {
  height:100% !important; max-height:100% !important; min-height:0 !important;
  overflow-x:hidden !important; overflow-y:auto !important;
}

.kartograf-root .kwin-body [data-testid="monster-editor"] [data-testid="monster-entry-page"] {
  min-height:min-content !important;
}

.kartograf-root .kwin-body [data-testid="monster-index-page"] .monster-filter-bar {
  flex-wrap:nowrap !important;
}

.kartograf-root .kwin-body [data-testid="monster-index-page"] .monster-search-field {
  flex:1 1 auto !important; min-width:10rem !important;
}

.kartograf-root .kwin-body [data-testid="monster-index-page"] .monster-filter-action {
  flex:0 0 auto !important;
}

.monster-entry-page .monster-panel-title {
  position:sticky; top:calc(var(--ui-nav-height, 64px) + .25rem); z-index:30;
  background:linear-gradient(90deg, rgba(255,255,255,.46), transparent 20%, transparent 82%, rgba(110,78,40,.08)), var(--manual-paper, #f7efd5);
}

.monster-entry-page .monster-entry-toolbar-editing {
  position:static; z-index:31;
  border:1px solid rgba(91,55,28,.22); border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.68), rgba(247,239,213,.95)), var(--manual-paper, #f7efd5);
  box-shadow:0 12px 26px rgba(51,35,18,.18); padding:.35rem;
}

@media (max-width:780px) {
  .monster-entry-page .monster-entry-toolbar-editing {
    justify-content:flex-end; width:100%;
  }

  .kartograf-root [data-testid="monsters-overview"] .monster-article-flow > .monster-visual-stack {
    float:none !important;
    margin:0 0 1rem !important;
    width:min(100%, 18rem) !important;
  }
}

/* Bestiary in Kartograf V2: retain the shared manual layout while using the
   V2 tokens and typography. The scope keeps the Classic direct page unchanged.
   This global fallback is intentional: a native V2 window does not reliably
   load the module's CSS isolation bundle in the Browser shell. */
.kartograf-root [data-testid="monsters-overview"].monster-page {
  --manual-ink:var(--k-ink);
  --manual-muted:var(--k-ink-soft);
  --manual-paper:var(--k-card);
  --manual-paper-alt:var(--k-desk);
  --manual-line:var(--k-line);
  --manual-leather:var(--k-ink);
  --manual-leather-2:var(--k-ink-soft);
  --manual-gold:var(--k-gold);
  --manual-verdigris:var(--k-moss);
  --manual-russet:var(--k-wax);
  --manual-red:var(--k-wax);
  color:var(--k-ink);
  font-family:var(--k-sans);
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-page,
.kartograf-root [data-testid="monsters-overview"] .monster-entry-page {
  background:linear-gradient(90deg, rgba(255,255,255,.3), transparent 20%, transparent 80%, rgba(168,132,47,.06)), var(--k-card) !important;
  border-color:var(--k-line) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-page::after,
.kartograf-root [data-testid="monsters-overview"] .monster-entry-page::after {
  border-color:rgba(168,132,47,.22);
}

.kartograf-root [data-testid="monsters-overview"] .monster-entry-page .monster-panel-title,
.kartograf-root [data-testid="monsters-overview"] .monster-entry-page .monster-entry-toolbar-editing {
  background:linear-gradient(90deg, rgba(255,255,255,.3), transparent 20%, transparent 80%, rgba(168,132,47,.06)), var(--k-card) !important;
  border-color:var(--k-line) !important;
  box-shadow:none;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-item {
  display:grid !important;
  grid-template-columns:2.4rem minmax(0,1fr) !important;
  align-items:center !important;
  gap:.35rem !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-entry {
  border-color:var(--k-line) !important;
  background:var(--k-card) !important;
  grid-column:2 !important;
  grid-row:1 !important;
  justify-content:flex-start !important;
  padding-left:.6rem !important;
  padding-right:.6rem !important;
  text-align:left !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-select-card .mud-button-label {
  justify-content:flex-start !important;
  text-align:left !important;
  width:100% !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-select-card .mud-button-label > * {
  min-width:0 !important;
  width:100% !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-entry-actions {
  grid-column:1 !important;
  grid-row:1 !important;
  position:static !important;
  transform:none !important;
  justify-content:center !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-entry.active {
  /* border-left-color:var(--k-wax) var her, men blev overskrevet af
     border-color nedenfor og havde derfor ingen effekt. */
  border-color:var(--k-gold) !important;
  background:rgba(168,132,47,.12) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-index-entry:hover,
.kartograf-root [data-testid="monsters-overview"] .monster-index-entry:focus-within,
.kartograf-root [data-testid="monsters-overview"] .monster-index-entry:focus-visible {
  border-color:var(--k-gold) !important;
  background:rgba(168,132,47,.09) !important;
  box-shadow:0 0 0 3px rgba(168,132,47,.18);
}

.kartograf-root [data-testid="monsters-overview"] .monster-entry-name,
.kartograf-root [data-testid="monsters-overview"] .monster-prose-columns,
.kartograf-root [data-testid="monsters-overview"] .monster-article-summary {
  color:var(--k-ink) !important;
  font-family:var(--k-sans) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-prose-columns {
  column-count:1 !important;
  width:100%;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-mini-table {
  border-collapse:collapse;
  table-layout:fixed;
  white-space:normal;
  width:100%;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-mini-table th,
.kartograf-root [data-testid="monsters-overview"] .monster-rule-mini-table td {
  border-bottom:1px solid rgba(88,59,31,.12);
  padding:.16rem .35rem .16rem 0;
  text-align:left;
  vertical-align:top;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-reader-section .monster-rule-line:first-of-type {
  border-top:0;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-mini-table tbody tr:last-child td {
  border-bottom:0;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-mini-table th {
  color:var(--k-muted);
  font-size:.76rem;
  font-weight:700;
}

.kartograf-root [data-testid="monsters-overview"] .monster-manual-article::after {
  clear:both;
  content:"";
  display:block;
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-flow {
  display:block;
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-flow > .monster-visual-stack {
  float:left;
  margin:0 clamp(1rem, 2vw, 1.75rem) .85rem 0;
  width:clamp(9rem, 18vw, 15rem);
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-flow .monster-prose-columns {
  display:contents;
  width:auto !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-flow .monster-prose-columns p {
  display:inline;
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-flow .monster-prose-columns p + p {
  display:block;
  margin-top:.85rem;
}

.kartograf-root [data-testid="monsters-overview"] .monster-visibility-trigger {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:2rem;
  padding:.3rem .45rem;
  border:1px solid var(--k-line);
  border-radius:.35rem;
  background:var(--k-card);
  color:var(--k-ink);
  font:inherit;
  cursor:pointer;
}

.kartograf-root [data-testid="monsters-overview"] .monster-visibility-trigger:hover,
.kartograf-root [data-testid="monsters-overview"] .monster-visibility-trigger:focus-visible {
  border-color:var(--k-gold);
  outline:none;
}

.kartograf-root [data-testid="monsters-overview"] .monster-visibility-dot {
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(45,35,24,.18);
}

.kartograf-root [data-testid="monsters-overview"] .monster-visibility-dot--private { background:var(--k-wax); }
.kartograf-root [data-testid="monsters-overview"] .monster-visibility-dot--realm { background:var(--k-moss); }
.kartograf-root [data-testid="monsters-overview"] .monster-visibility-dot--adventure { background:var(--k-gold); }
.kartograf-root [data-testid="monsters-overview"] .monster-visibility-dot--public { background:#4f8165; }

.kartograf-root [data-testid="monsters-overview"] .monster-visibility-menu-item {
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:9rem;
}

.kartograf-root [data-testid="monsters-overview"] .monster-visibility-menu-item .mud-icon-root {
  margin-left:auto;
  color:var(--k-moss);
}

.kartograf-root [data-testid="monsters-overview"] .monster-kicker,
.kartograf-root [data-testid="monsters-overview"] .monster-page-label,
.kartograf-root [data-testid="monsters-overview"] .monster-folio-label {
  color:var(--k-ink-soft) !important;
  font-family:var(--k-sans) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-title,
.kartograf-root [data-testid="monsters-overview"] .monster-entry-page .monster-article-title,
.kartograf-root [data-testid="monsters-overview"] .monster-panel-title .mud-typography-h5,
.kartograf-root [data-testid="monsters-overview"] .monster-panel-title .mud-typography-h6,
.kartograf-root [data-testid="monsters-overview"] .monster-rule-reader-section h3,
.kartograf-root [data-testid="monsters-overview"] .monster-scribe-heading .mud-typography-h6 {
  color:var(--k-ink) !important;
  font-family:var(--k-display) !important;
  margin:0;
  text-shadow:none !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-article-summary,
.kartograf-root [data-testid="monsters-overview"] .monster-gm-prose {
  color:var(--k-ink-soft) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-reader-section,
.kartograf-root [data-testid="monsters-overview"] .monster-scribe-panel,
.kartograf-root [data-testid="monsters-overview"] .monster-media-token-editor {
  border-color:var(--k-line) !important;
  background:var(--k-card-raised) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-reader-section h3 {
  color:var(--k-wax) !important;
}

.kartograf-root [data-testid="monsters-overview"] .monster-rule-line,
.kartograf-root [data-testid="monsters-overview"] .monster-folio-nav,
.kartograf-root [data-testid="monsters-overview"] .monster-manual-article {
  border-color:var(--k-line) !important;
}