@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ── DESIGN TOKENS: MÅTT ──
   Bredder, höjder, typografi och radier. De här bor BARA på :root, till skillnad från
   färgerna nedan, och skälet är kompaktläget: det sätter om samma variabler på
   .wxr-app-shell--compact. Skrev en behållare längre ned om dem skulle tätheten sluta
   nå in i den behållaren, eftersom en variabel löses mot NÄRMASTE deklarerande
   förfader. Måtten följer alltså användaren överallt; färgerna gör det inte. */
:root {
  /* Bredden på en tvåkolumns formulärgrid. Se .wxr-form-grid. */
  --wxr-form-grid-max: 920px;

  /* Formulärkolumnens andel i CPQ:s tvåspalt (formulär | visualisering).
     DELAS av konfiguratorn, förhandsgranskningen och den publika inbäddningen.
     Fältradernas kolumnbrytning mäts mot den här kolumnens bredd, så olika mått
     på olika sidor betyder att förhandsgranskningen visar en annan layout än
     kunden faktiskt får. Previewn hade 60% mot konfiguratorns 35/50%.

     35% förutsätter gott om bredd. På en smalare skärm blir formuläret för trångt
     för tre inputs per rad medan 3D-vyn har utrymme över, så kolumnerna delar
     lika. Räkneexempel vid 1500px fönster: appens innehållsyta är ungefär 1212px
     (sidomeny 214 + sidpadding 64 + scrollbar 10), vilket ger 424px vid 35% och
     606px vid 50%. Uppmätt, inte räknat: rännan är 10px i Chromium med
     scrollbar-width: thin, inte de 8 webkit-regeln nedan ber om. */
  --wxr-cpq-form-col: 35%;
  /* 214 och inte 200: menyetiketter som "Administration" och "Dokumentmallar"
     bröts eller ellipserades i den smalare menyn. Bredden är EN variabel som
     appskalets grid, menyn, dess hover-expansion och topbarens logotypyta alla
     läser, så den flyttar allt i takt. Kollapsat läge (48px) rörs inte. */
  --wxr-sidebar-width:  214px;
  --wxr-topbar-height:   64px;
  /* Toolbar-höjd matchar modern B2B SaaS (Linear/Stripe ~48px).
     Ger 9px luft över/under 30px-knappar och 6px över/under 36px-stegnav. */
  --wxr-toolbar-height:  48px;
  --wxr-toolbar-secondary-height: 38px;
  /* 8+8 padding + 25px stopp-knapp + 1px kantlinje. Knappen, inte texten, sätter
     höjden — se .wxr-impersonation-banner. */
  --wxr-impersonation-banner-height: 42px;
}

/* ── DESIGN TOKENS: FÄRG ──

   TRE SELEKTORER, INTE EN, och det är det som gör ett mörkt läge möjligt utan att det
   läcker dit det inte hör hemma (docs/plans/ui-preferences.md, beslut 7).

   Den ljusa paletten skrivs EN gång och gäller tre ställen samtidigt:

     :root                             appen
     .wxr-public                       de publika sidorna (inbäddningen, delad
                                       konfiguration, spärrmeddelandet)
     .wxr-embed                        inbäddningens eget kort
     .wxr-canvas, …__viewer            2D/3D-ritytan i konfiguratorn

   När det mörka läget byggs redefinieras färgerna BARA på :root. En variabel löses mot
   det element som stylas och ärver uppåt till NÄRMASTE deklarerande förfader, så allt
   under .wxr-embed och ritytan fortsätter läsa de ljusa värdena hur mörk :root än blir.
   Ingen dubblerad palett, inga värden att hålla i synk.

   Prövat i Chromium innan det skrevs, inte antaget: med data-theme="dark" på :root vände
   appens kort från #ffffff till #0f172a medan ett kort inuti .wxr-embed och ett inuti
   ritytan stod kvar på #ffffff. Samma prov bekräftade att Teleriks
   oklch(from var(...))-härledningar på :root vänder som de ska (0,36 -> 0,95). Den kända
   fällan gäller alltså HÄRLEDDA värden på :root, inte råa var() i en behållare.

   VARFÖR de två undantagen:
   • Inbäddningen renderas på kundens egen webbplats och ska följa DEN sidan, inte
     säljarens personliga val. Att paletten är variabler och inte tal är själva poängen:
     kunden läser in sin egen CSS och skriver över samma namn på .wxr-embed för att
     matcha sina fält och texter. Hårdkodade tal hade tvingat kunden att slåss mot varje
     enskild selektor.
   • Ritytan bär kundens produktfärger, måttstreck och genomskinliga PNG:er, och
     snapshotet därifrån hamnar i offerten på vitt papper. DynaMaker, 3D Studio och
     bild-på-bild bestämmer själva vad som ritas PÅ ytan. GRÄNSSNITTET runt omkring
     (paneler, fält, verktygsrader, BOM-kortet) följer temat som allt annat.

   .wxr-public bär hela viewporten och sin egen bakgrund, så den räcker för att de
   publika sidorna ska stå kvar ljusa. .wxr-embed står kvar ändå, för det är den
   DOKUMENTERADE överskrivningspunkten: kundens CSS sätter om namnen här.

   .wxr-canvas är reserverad: en ny renderingsyta behöver bara bära klassen för att
   omfattas, utan att den här selektorlistan växer. */
:root,
.wxr-public,
.wxr-embed,
.wxr-canvas,
.wxr-cpq-configurator__viewer {
  /* Primary action: green (Save) */
  --wxr-accent:              #1EAF77;
  --wxr-accent-hover:        #179f6a;
  --wxr-accent-light:        rgba(30,175,119,0.10);
  --wxr-accent-light-text:   #166344;
  --wxr-accent-light-border: #6ee7b7;
  /* Samma delning som nav, av samma skäl: --wxr-accent bär text och kanter och ska ljusna,
     --wxr-accent-solid bär spara-knappens fyllning och måste bära ljus text. */
  --wxr-accent-solid:       #1EAF77;
  --wxr-accent-solid-hover: #179f6a;

  /* Navigation: blue */
  --wxr-nav:             #0044B2;
  --wxr-nav-hover:       #003490;
  --wxr-nav-light:       #eff4ff;
  --wxr-nav-light-text:  #0044B2;
  /* FYLLNINGEN, skild från färgen ovan. De två ser identiska ut här och går åt MOTSATT
     håll i ett mörkt läge, vilket är hela skälet till att de är två namn.

     --wxr-nav bär text (24 ställen), kanter (18) och tunna markörer (6). Allt det måste
     LJUSNA mot en mörk botten för att synas.
     --wxr-nav-solid bär fyllda ytor med ljus text ovanpå (30 ställen). Den måste förbli
     MÖRK nog att bära --text-on-color.

     Delningen är räknad, inte tyckt: inget enda blått klarar båda kraven. blue-700 ger
     6,70 för vit text men bara 2,18 som text på kortet; blue-300 ger 8,11 som text men
     1,80 för vit text ovanpå. Samma sak för grönt. */
  --wxr-nav-solid:        #0044B2;
  --wxr-nav-solid-hover:  #003490;
  /* LÄNKFÄRGEN, och appen hade ingen. Startsidan uppfann en egen ljusare blå för hover på
     sina brickor och listrader (nio ställen) därför att det inte fanns något att peka på.
     Den är EGEN roll och inte --wxr-nav: navigationsblått bär var man ÄR, länkblått bär
     vad man kan KLICKA. Att ge den ett namn kostar inget idag (samma tal) och ger nästa
     länk någonstans att bo. */
  --wxr-link:            #1a6fc4;

  /* Surfaces. Fyra steg, och avsiktligt inte fler: vitt, svagaste fyllningen, fylld panel,
     djupaste neutrala ytan. Appen hade tolv nästan-vita i omlopp (#fafbfc, #f9fafb,
     #f7f8fa, #f3f6fb, #f5f7fa, #f0f4f8 …), alla inom dE 0,015 från varandra, alltså
     omöjliga att skilja åt men var och en ett eget hål att fylla i ett mörkt läge. */
  --wxr-surface:           #ffffff;
  /* Svagaste fyllningen: tabellhuvud, kortrubrik, hovrad, läsfält. slate-50. */
  --wxr-surface-muted:     #f8fafc;
  --wxr-surface-secondary: #f1f5f9;
  --wxr-surface-tertiary:  #F0F3F7;
  /* Vänd yta: den mörka brickan (räknare, flikmärke, gruppnummer, nod i flödesschemat).
     EGEN roll och inte --wxr-text återanvänd som bakgrund: i ett mörkt läge ska den här
     ytan LJUSNA medan brödtexten vänder åt andra hållet. Texten på den är
     --wxr-text-on-color. */
  --wxr-surface-inverse:   #1e293b;

  /* Header */
  --wxr-header-bg:      #0f172a;
  /* Topbarens toning går från den här ljusare navyn ner till --header-bg. Två tal, en
     yta: utan namn på det övre hade halva toningen varit token och halva ett tal. */
  --wxr-header-bg-hi:   #131d35;
  /* LJUST PÅ DEN MÖRKA BAREN. Fem steg vitt med olika opacitet, och de följer aldrig
     temat: topbaren är mörk i båda lägena, så texten på den ska vara ljus i båda.

     --header-dim stod på 0,55 och användes ALDRIG, medan brödsmulorna skrev 0,70 och
     separatorn 0,35 för hand. Talet är därför rättat till det som faktiskt används,
     vilket inte ändrar någon pixel eftersom ingen läste det gamla. */
  --wxr-header-text:    rgba(255,255,255,0.90);
  --wxr-header-dim:     rgba(255,255,255,0.70);
  --wxr-header-faint:   rgba(255,255,255,0.35);
  --wxr-header-fill:    rgba(255,255,255,0.12);
  --wxr-header-border:  rgba(255,255,255,0.08);
  --wxr-header-hover:   rgba(255,255,255,0.08);

  /* Sidebar */
  --wxr-sidebar-bg:     #f1f4f8;

  /* Borders. Tre vikter: den framhävda kanten, standardkanten, och hårstrecket mellan
     rader i en lista. Hårstrecket skrevs tidigare som en YTFÄRG (#f0f2f4, #f3f4f6), vilket
     är samma tal men fel roll: i ett mörkt läge ska en skiljelinje ljusna med kanterna,
     inte mörkna med ytorna. */
  --wxr-border-strong: #94a3b8;
  --wxr-border-em:     #cbd5e1;
  --wxr-border:        #e2e8f0;
  --wxr-border-subtle: #f1f5f9;

  /* FOKUS. Egen roll och inte "navigationsblått igen": i ett mörkt läge behöver fokus
     ljusna medan navigationsfärgen ligger still.

     EN RING, inte två. Appen hade tidigare en "mjuk" och en "solid", och skillnaden var
     ingen designavvägning: båda skrevs `outline: 2px solid`, men den ena pekade på ett
     token som var 35 % genomskinligt. Den mjuka var alltså den solida med opacitet
     påklistrad, och den mätte 1,89:1 mot vitt. WCAG 2.2 SC 2.4.11 kräver 3:1 för en
     fokusindikator, så den var inte ett svagare alternativ utan ingen indikator alls.
     Tokenet är därför OGENOMSKINLIGT: 8,50:1 mot vitt, 7,64:1 mot sidkroppen.

     TVÅ FORMER, och regeln för vilken:
       RING  — allt med egen avgränsning som går att tabba till: knappar, växlar, kort,
               listrader, handtag, kryssrutor. `outline: 2px solid var(--wxr-focus-ring)`
               med `outline-offset: 2px`, eller -2px när elementet ligger dikt an mot en
               klippande kant och ringen annars skärs av.
       FÄLT  — textinmatning och comboboxar, där en ring UTANFÖR fältet krockar med
               grannen i ett tätt formulärrutnät. Där bär fältets egen kant beskedet:
               `border-color: var(--wxr-nav)` (8,50:1, alltså indikatorn som klarar kravet)
               plus `--wxr-focus-glow` som halo. Glöden ensam är 1,22:1 och räknas därför
               som dekoration, aldrig som indikatorn.

     En sammansatt kontroll (beloppsfält, antalsstegare) visar FÄLT-formen på sin yttre
     ram via :focus-within, och den inre inputen står bar. Det var vad de `outline: none`
     som fanns förutsatte, utan att någon byggt ramens del. */
  --wxr-focus-ring: #0044B2;
  --wxr-focus-glow: rgba(0, 68, 178, 0.12);

  /* HÖJDSKALAN. Appen hade 25 olika skuggvärden för vad som är fem nivåer, och spridningen
     var drift och inte hierarki: topbaren låg tyngre än dialogen, och inloggningskortet och
     återanslutningskortet hade var sitt värde utan att stå på olika höjd.

     En skugga svarar på EN fråga: hur långt från sidan ligger det här. Fem svar räcker.
     Skalan blir dessutom nödvändig i ett mörkt läge, för då slutar en svart skugga fungera
     mot en mörk botten och varje nivå måste skrivas om. Med fem namn är det fem rader.

     Färgen är slate-900 och inte ren svart. Rent svart ger en grå, smutsig halo mot en ljus
     yta; en skugga i underlagets egen kulör läser som djup. Det är också vad de flesta av
     de 25 redan använde. */
  --wxr-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --wxr-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
  --wxr-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
  --wxr-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.14);
  --wxr-shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.22);
  /* Topbaren är fast krom över rullande innehåll och behöver en tydligare kant nedåt än
     sin höjd antyder, därför egen och inte --shadow-md. */
  --wxr-shadow-bar: 0 2px 8px rgba(15, 23, 42, 0.28);
  /* Panelskuggor ligger i sidled, inte nedåt, och hör därför inte till höjdskalan. */
  --wxr-shadow-panel-left:  -8px 0 24px rgba(15, 23, 42, 0.15);
  --wxr-shadow-panel-right:  4px 0 20px rgba(15, 23, 42, 0.10);

  /* SCRIM: det mörka bakom en dialog, en slideout eller en lightbox. Appen hade fem
     opaciteter mellan 0,40 och 0,65 för samma jobb. Två räcker: en för paneler man kan
     klicka förbi och en för det som kräver ett svar. I ett mörkt läge behöver en scrim bli
     STARKARE, inte svagare, vilket är precis varför den måste vara en token. */
  --wxr-scrim:        rgba(15, 23, 42, 0.45);
  --wxr-scrim-strong: rgba(15, 23, 42, 0.65);
  /* Rullningslisten. Tummen är en ton mörkare än kantlinjen så den syns mot både
     den vita ytan och den grå sidkroppen, utan att konkurrera med innehållet. */
  --wxr-scrollbar-thumb:       #c7d0dc;
  --wxr-scrollbar-thumb-hover: #a3afc0;

  /* Text */
  --wxr-text:       #1e293b;
  --wxr-text-muted: #475569;
  --wxr-text-hint:  #64748b;
  /* Fjärde steget, och det sista: platshållare och avstängd text. Skiljs från --text-hint
     därför att hint SKA läsas (4.5:1) medan den här avsiktligt ligger under, och de två
     måste därför kunna gå åt olika håll när ytan vänds. slate-400. */
  --wxr-text-disabled: #94a3b8;
  /* Text och ikoner som ligger PÅ en mättad yta: primärknappen, det aktiva märket,
     avataren, den mörka topbaren. Samma vita som --wxr-surface idag, men en helt annan
     roll, och det är skillnaden som avgör ett mörkt läge: ytan ska vändas till mörk
     medan texten på en blå knapp förblir ljus. Skrivs de båda som samma tal blir den
     ena med nödvändighet fel. */
  --wxr-text-on-color: #ffffff;
  /* Dämpad text på samma mättade eller mörka yta: överraden i flödesschemats nod. Den
     följer --text-on-color och inte textskalan, alltså ljus i BÅDA lägena. */
  --wxr-text-on-color-dim: #cbd5e1;
  /* Syskonet åt andra hållet: MÖRK text på en LJUS yta som anroparen valt, inte vi.
     CRM:s etiketter är data (kunden plockar färgen i en färgväljare), och en ljusgul
     etikett behöver svart text medan en mörkblå behöver vit. WxrColorChip räknar ut
     vilken. Följer INTE textskalan: en ljus etikett är ljus också i ett mörkt läge, så
     texten på den måste förbli mörk. */
  --wxr-text-on-light: #0f172a;

  /* Semantiska statusfärger (samma värden som knapp-varianterna --danger/--warning/--info) */
  /* Rött i TRE steg, och det är en kontrastskala och inte tre personers smak. Ju tonadare
     underlag, desto mörkare röd krävs för att klara WCAG. Uppmätt mot de bakgrunder de
     faktiskt sitter på (4.5 krävs för brödtext, 3.0 för ikoner):

                     vit     #fef2f2   #fee2e2
       --danger      4.83      4.41      3.95      fylld knapp, ikon, ogiltigt fält
       --strong      6.47      5.91      5.30      märken, radmenyns Ta bort, hover
       --text        8.31      7.60      6.80      feltext i formulär, toast och dialog

     Beviset står i .wxr-dialog__inline-error, som bär två av dem på SAMMA botten: texten
     i --danger-text (7.60) och ikonen i --danger (4.41). Båda är rätt, eftersom en ikon
     får ha lägre kontrast än text som ska läsas. Slås de ihop förlorar antingen
     feltexten sin läsbarhet eller så blir knappen onödigt mörk.

     I ett mörkt läge måste alla tre vändas var för sig: röd på mörk botten ska LJUSNA,
     och skalan går då åt andra hållet. */
  --wxr-danger:        #dc2626;
  /* Fyllningen, skild från --wxr-danger av samma skäl som nav och accent: den röda som
     bär text måste LJUSNA i mörkt läge, den som HAR text ovanpå sig får inte. */
  --wxr-danger-solid:  #dc2626;
  --wxr-danger-border: #fca5a5;
  --wxr-danger-bg:     #fef2f2;
  /* Steg 2: på tonad botten och i hovertillstånd. */
  --wxr-danger-strong:    #b91c1c;
  --wxr-danger-bg-strong: #fee2e2;
  /* Steg 3: feltext som ska läsas, med sin ljusare kant. */
  --wxr-danger-text:        #991b1b;
  --wxr-danger-border-soft: #fecaca;
  --wxr-warning:        #92400e;
  --wxr-warning-border: #fcd34d;
  --wxr-warning-bg:     #fef3c7;
  --wxr-info:           #1d4ed8;
  --wxr-info-border:    #93c5fd;
  --wxr-info-bg:        #dbeafe;
  /* MJUKT steg för info och warning.

     Varje status har två vikter: en TONAD för ett märke man ser tjugo av på en skärm, och
     en KRAFTIG för en banderoll man ser en av. Danger och success hade båda; info och
     warning hade bara den kraftiga, och CPQ-ytorna skrev därför sitt mjuka steg för hand
     (#eff6ff, #bfdbfe, #fffbeb, #fde68a, #b45309). De talen flyttar hit.

     Ingen befintlig färg ändras. .wxr-badge--success läser bg-strong och .wxr-badge--warning
     läser bg, och de är SAMMA nivå (grön 100 och amber 100): vikterna var alltså redan
     samstämmiga, det var bara namnpinnen som fattades.

                mjuk yta          kraftig yta        mjuk kant             kraftig kant
       danger   --danger-bg       --danger-bg-strong --danger-border-soft  --danger-border
       success  --success-bg      --success-bg-strong --success-border     --success-border-strong
       info     --info-bg-soft    --info-bg          --info-border-soft    --info-border
       warning  --warning-bg-soft --warning-bg       --warning-border-soft --warning-border

     Namnen är alltså inte parallella mellan familjerna (danger kallar sin kraftiga kant
     --border, success kallar sin --border-strong). Att räta upp det byter värde på tokens
     som redan används på ett femtiotal ställen, så det är en egen ändring. Tabellen står
     här för att den som väljer ska se nivån och inte bara namnet. */
  --wxr-info-bg-soft:        #eff6ff;
  --wxr-info-border-soft:    #bfdbfe;
  --wxr-warning-bg-soft:     #fffbeb;
  --wxr-warning-border-soft: #fde68a;
  /* Warningtext på den mjuka ytan. --warning (amber-800) är för tung mot amber-50. */
  --wxr-warning-soft:        #b45309;
  /* HOVERKANTEN, ett steg över den kraftiga. .wxr-action-btn--{info,warning,success,purple}
     följde redan samma mönster utan att någon skrivit ner det: bakgrunden hoppar till
     familjens 200-nivå och kanten till 400. 200 fanns redan som token, 400 fanns inte, så
     just kanten stod kvar som fyra lösa tal. Skalan är alltså inte ny, bara namngiven. */
  --wxr-info-border-hover:    #60a5fa;
  --wxr-warning-border-hover: #fbbf24;
  /* Hovertexten går ett steg mörkare än --warning, på samma sätt som danger och success
     redan har ett -strong. */
  --wxr-warning-strong:       #7c2d12;
  /* Success och purple fanns inte, till skillnad från de tre ovan, trots att märken,
     toaster och meddelanden använder dem i samma trio text/kant/bakgrund. Värdena är
     tagna ur .wxr-badge--success och .wxr-badge--purple, som är de mest använda.
     Purple bär ingen status utan är märkets sjätte färg; den ligger här för att den
     hör till samma uppsättning och behöver vändas i ett mörkt läge på samma sätt. */
  /* Grönt i två steg, av samma skäl som rött: märket har mättad botten och ljusare text
     (#15803d på #dcfce7 = 4.57), meddelandet ljus botten och mörkare text (#166534 på
     #f0fdf4 = 6.81). Grundnamnet är den LJUSA nivån, precis som --wxr-danger-bg, så de
     två familjerna läses likadant. */
  --wxr-success:        #166534;
  --wxr-success-border: #bbf7d0;
  --wxr-success-bg:     #f0fdf4;
  --wxr-success-strong:        #15803d;
  --wxr-success-border-strong: #86efac;
  --wxr-success-bg-strong:     #dcfce7;
  --wxr-success-border-hover:  #4ade80;
  /* Purple var den enda familjen utan mjuk kant och utan mörkt textsteg, trots att
     .wxr-action-btn--purple:hover behövde båda. Nu samma fyra pinnar som de andra. */
  --wxr-purple:         #6d28d9;
  --wxr-purple-strong:  #5b21b6;
  --wxr-purple-border:  #c4b5fd;
  --wxr-purple-border-soft:  #ddd6fe;
  --wxr-purple-border-hover: #a78bfa;
  --wxr-purple-bg:      #ede9fe;
  /* Samma mjuka steg som info och warning fick ovan. Behövs av layouteditorns
     tillståndsmarkering, där dold, avstängd och obligatorisk ska väga LIKA: de två andra
     fyllningarna ligger på 50-nivån (--orange-bg, --danger-bg) medan --purple-bg ligger på
     100 och hade gjort den avstängda cellen tyngre än sina grannar. */
  --wxr-purple-bg-soft: #faf5ff;
  /* Orange är en EGEN familj och inte warning en gång till. Texterna ligger visserligen
     nära varandra (#9a3412 mot #92400e, 15 steg), men bottnarna gör det inte: warning är
     gul (#fef3c7) och den här orange (#fff7ed), 38 steg isär. Den bär tre saker som
     hänger ihop i tonläge men inte i ord: impersoneringsbanderollen, prospektstatus och
     varningsposten i profilmenyn. Därför färgens namn och ingen påhittad semantik, precis
     som purple. */
  --wxr-orange:         #9a3412;
  --wxr-orange-border:  #fed7aa;
  --wxr-orange-bg:      #fff7ed;
  /* Mättad orange markör. Familjen ovan är byggd för MÄRKEN (text på 800, kant på 200) och
     saknade helt den ton som markerar ett tillstånd med en kantlinje. Närmaste befintliga
     token låg dE 0,21 bort, alltså en annan färg, så den här kunde inte vikas in någonstans.
     Bärs av dold-markeringen i layouteditorn. Jämför --wxr-danger, som är sin familjs
     mättade steg; orange saknade motsvarigheten. */
  --wxr-orange-solid:   #fd7e14;

  /* Sidebar nav (premium SaaS) */
  --wxr-sidebar-nav-active-bg: rgba(0, 68, 178, 0.09);
  --wxr-sidebar-nav-hover-bg: rgba(15, 23, 42, 0.05);
  --wxr-sidebar-nav-accent: #0044b2;

  /* Legacy compat. Kortrubriken pekar numera på ytskalan i stället för att bära ett eget
     tal: #f4f6f9 låg dE 0,012 från --surface-muted, alltså omöjligt att skilja åt, men var
     en pinne till att hålla i synk när ytorna vänds. Namnet står kvar, för det är
     semantiskt (en kortrubrik får divergera i ett mörkt läge) och används på 12 ställen. */
  --wxr-card-header-bg: var(--wxr-surface-muted);
  --wxr-card-border:    #e2e8f0;

  /* TELERIKS ACCENTFÄRG. Temats default är laxröd (oklch(69.85% 0.1923 27.19deg), ungefär
     #f4603e) och var den enda främmande kulören i gränssnittet: den målade vald sida i
     rutnätets sidnumrering, fokusmarkeringen och markerade rader, mitt i en app där blått
     bär navigation och grönt är åtgärdsfärgen.

     EN rad räcker. Temats nio primary-varianter (-hover, -active, -subtle, -emphasis,
     -on-subtle, -on-primary …) härleds alla med oklch(from var(--kendo-color-primary) …),
     så de följer med. --on-primary räknas dessutom ur ljusheten (vit under 0,75, nästan
     svart över), alltså rätt text på en fylld yta utan att vi säger något.

     Fyllningsvarianten och inte --wxr-nav, av samma skäl som --nav-solid finns: den här
     färgen kan hamna under vit text. I mörkt läge vänder valet, se det blocket. */
  --kendo-color-primary: var(--wxr-nav-solid);

  /* Säger åt WEBBLÄSAREN vilket läge sidan är i, så den ritar sina EGNA kontroller rätt:
     datumväljarens kalender, <select>-listan, rullningslisten och autofyllningens gula
     fält. Utan den står de kvar ljusa mitt i ett mörkt gränssnitt, och det är inget CSS
     når. Att den sitter i det här blocket och inte bara på :root är poängen: den ärvs, så
     inbäddningen och ritytan behåller ljusa kontroller även när appen är mörk. */
  color-scheme: light;
}

/* ATT DEKLARERA TOKEN RÄCKER INTE FÖR ÄRVDA EGENSKAPER. `color` sätts på body och ärvs
   nedåt som ett REDAN UTRÄKNAT värde, så en behållare som bara deklarerar om --wxr-text
   ändrar inget för text den ärver: undantagen fick ljus text på sin ljusa yta så fort
   appen blev mörk. Uppmätt innan den här regeln fanns: ritytan behöll #f0f3f7 som botten
   men texten gick från rgb(30,41,59) till rgb(226,232,240).

   Därför räknas `color` om HÄR, mot behållarens egen ljusa token. Samma sak gäller varje
   ärvd egenskap som bär färg; i dag är det bara den här. */
.wxr-public,
.wxr-embed,
.wxr-canvas,
.wxr-cpq-configurator__viewer {
  color: var(--wxr-text);
}

/* SAMMA FÄLLA ÅT ANDRA HÅLLET. Under prerender bär SKALET det mörka temat (klassen), men
   `color` sätts på body, som ligger UTANFÖR skalet, och ärvs ner som ett redan uträknat
   mörkt värde. Uppmätt: kortets botten blev #1e293b medan texten stod kvar på rgb(30,41,59),
   alltså mörkt på mörkt. Först när JS satt data-theme på <html> räknade body om.
   Skalet räknar därför om `color` mot sina egna token, precis som undantagen gör. */
.wxr-app-shell--dark {
  color: var(--wxr-text);
}

/* ── MÖRKT TEMA ──

   Skriver om färgerna BARA på :root. Allt under .wxr-public, .wxr-embed, .wxr-canvas och
   .wxr-cpq-configurator__viewer läser vidare de ljusa värdena, eftersom en variabel löses
   mot närmaste deklarerande förfader (beslut 7).

   YTSKALAN VÄNDER RIKTNING, den mörknar inte bara. I ljust läge är kortet ljusast och
   sidkroppen mörkast; i mörkt är det tvärtom, medan ROLLERNA står kvar: --surface är
   fortfarande den upphöjda ytan och --surface-tertiary fortfarande marken.

   Spridningen är dessutom medvetet större än i ljust läge, där alla ytor ligger inom
   13 % av varandra. Skälet är att mörkt läge tappar skuggan som höjdsignal (en svart
   skugga syns inte mot svart), så ljushet och kantstyrka måste bära det skuggan bar.
   Kanterna ligger därför på ×1,3 till ×2,2 av ljusa lägets kontrast. Det är avsiktligt,
   inte drift.

   Uppmätt: all text klarar AA mot varje yta den kan hamna på. Svagaste paret är
   --text-hint på --surface-muted, 4,63. Inget par ligger under ljusa lägets kontrast.

   TVÅ SELEKTORER, av samma skäl som kompaktläget har det. Attributet på <html> sätts av
   JS efter första interaktiva renderingen och krävs av Teleriks popuplager och toasterna,
   som ritas UTANFÖR skalet. Klassen sätter skalet självt redan under prerender, så första
   målningen är mörk direkt och sidan blinkar inte vit först. Skalet täcker hela
   viewporten, så det som syns vid första målningen ligger alltid inuti det. */
:root[data-theme="dark"],
.wxr-app-shell--dark {
  color-scheme: dark;

  /* NEUTRAL SKALA, inte slate. Första versionen byggde på Tailwinds slate, som är blå
     (#0f172a, #1e293b), och mot en hel skärm av det läser gränssnittet som "blått" innan
     det läser som mörkt; kortets fält och märkena tävlade dessutom med sidan om samma
     kulör. Verktyg man sitter i hela dagen (Clockify, Linear, GitHub) håller ytorna
     neutrala med en knappt märkbar kall dragning, och lägger kulören BARA där den bär
     betydelse. Skalan här är därför grå med ~2 % blå. Den ligger ljusare än den nästan
     svarta mark (#020617) som gjorde varje ljus text till en lampa, men inte så ljus att
     kortet börjar läsa som en grå platta: kortet på #25282c är ungefär där Clockify och
     Linear lägger sin upphöjda yta.

     KONTRASTEN ÄR MEDVETET LÄGRE än i första versionen. slate-200 på slate-800 gav 11,9,
     och det är för mycket: texten "glöder" och ögat tröttnar. Brödtexten ligger nu på
     ~9,8 mot kortet, dämpad text på ~5,8 och hint på ~4,9, alltså med marginal över AA
     (4,5) men utan att stråla. Rent vitt förekommer bara som --text-on-color. */

  /* Ytor, mörkast (kromet och marken) till ljusast (den upphöjda ytan). Topbar och
     sidomeny delar den mörkaste tonen så ramen läser som ETT stycke krom kring innehållet,
     precis som i ljust läge där båda är ljusa. Utan de här raderna stod topbaren kvar i
     ljusa lägets navy mitt i ett grått gränssnitt. */
  --wxr-header-bg:         #17191c;
  --wxr-header-bg-hi:      #1c1e22;
  --wxr-sidebar-bg:        #17191c;
  --wxr-surface-tertiary:  #1c1e21;
  --wxr-surface-secondary: #202226;
  --wxr-surface:           #25282c;
  /* LJUSARE än kortet, inte mörkare: i mörkt läge betyder ljusare "framhävd", så
     kortrubriken, hovraden och fältet lyfter i stället för att sjunka. */
  --wxr-surface-muted:     #2b2e33;
  /* Brickan som ska sticka ut. I ljust läge gör den det genom att vara mörk, i mörkt
     genom att vara ljus, men den måste fortfarande bära --text-on-color (vit): 6,9. */
  --wxr-surface-inverse:   #555a62;

  /* Kanter, ljusare än ytan de ritas på. Steget mellan kant och yta är större än i ljust
     läge eftersom skuggan inte längre bär höjden. */
  --wxr-border-subtle: #2e3136;
  --wxr-border:        #363a40;
  --wxr-border-em:     #444952;
  --wxr-border-strong: #60666f;

  /* Text. Inte vitt och inte slate-200: en varmgrå ljus ton som ligger stilla mot ytan.
     9,8 mot kortet, 8,6 mot fältet. */
  --wxr-text:          #cfd3d8;
  --wxr-text-muted:    #a0a5ad;
  --wxr-text-hint:     #939aa3;
  --wxr-text-disabled: #646a73;

  --wxr-scrollbar-thumb:       #363a40;
  --wxr-scrollbar-thumb-hover: #444952;

  /* ACCENT OCH NAV. Grundtonen ljusnar, fyllningen gör det inte (se --nav-solid). Båda är
     avmättade jämfört med ljusa läget: en klar sky-blå eller en klar grön mot grått läser
     som neon, och kulören ska peka ut EN sak på skärmen, inte lysa upp den. --nav bär
     också fältets fokuskant, och där syns varje grad av mättnad: #7fa3dc ger 5,8 som text
     mot kortet och en kant som säger "här är du" utan att lysa. */
  --wxr-nav:                 #7fa3dc;
  --wxr-nav-hover:           #9dbbe8;
  --wxr-nav-light:           rgba(127, 163, 220, 0.12);
  --wxr-nav-light-text:      #86abe3;
  --wxr-nav-solid:           #2b5aa8;
  --wxr-nav-solid-hover:     #3567bd;
  --wxr-link:                #7ea6e0;
  --wxr-accent:              #5cc48d;
  --wxr-accent-hover:        #7fd4a5;
  --wxr-accent-light:        rgba(92, 196, 141, 0.12);
  --wxr-accent-light-text:   #8fd8ad;
  --wxr-accent-light-border: rgba(92, 196, 141, 0.35);
  --wxr-accent-solid:        #24875a;
  --wxr-accent-solid-hover:  #2b9a66;
  --wxr-sidebar-nav-active-bg: rgba(127, 163, 220, 0.11);
  --wxr-sidebar-nav-hover-bg:  rgba(255, 255, 255, 0.05);
  --wxr-sidebar-nav-accent:    #86abe3;

  /* STATUS. Första versionen speglade ljusa lägets rampsteg (50 blev 950, 800 blev 200),
     och det gav mättade mörka bottnar med klar text ovanpå: ett märke lyste som en
     neonskylt. Ljusa lägets märken är PASTELL, en svag tonad botten och en dämpad text, och
     det är det uttrycket som ska vändas, inte talen.

     Bottnar och kanter är därför GENOMSKINLIGA: kulören lagd i 9–16 % över den yta märket
     råkar sitta på, och kanten samma kulör i 26–38 %. Då blir märket en svag ton av sin
     färg på kortet, på fältet och på hovraden, i stället för en egen platta som bryter
     ytan. Texten är kulörens ljusa steg, avmättad, och klarar AA mot varje botten den kan
     hamna på (info 5,3, warning 6,0, success 6,4, danger 5,1, purple 5,6 mot kortet).

     Hovertillstånd går fortfarande åt andra hållet mot ljust läge: där mörknar de, här
     ljusnar de (kanten går från 38 till 60 %), eftersom ljusare betyder framhävd. */
  --wxr-danger:             #e57373;
  --wxr-danger-solid:       #c94141;
  --wxr-danger-strong:      #ee8f8f;
  --wxr-danger-text:        #f2a6a6;
  --wxr-danger-border:      rgba(229, 115, 115, 0.38);
  --wxr-danger-border-soft: rgba(229, 115, 115, 0.26);
  --wxr-danger-bg:          rgba(229, 115, 115, 0.10);
  --wxr-danger-bg-strong:   rgba(229, 115, 115, 0.16);

  --wxr-warning:              #e2b467;
  --wxr-warning-soft:         #d8a95c;
  --wxr-warning-strong:       #efc885;
  --wxr-warning-border:       rgba(226, 180, 103, 0.38);
  --wxr-warning-border-soft:  rgba(226, 180, 103, 0.26);
  --wxr-warning-border-hover: rgba(226, 180, 103, 0.60);
  --wxr-warning-bg:           rgba(226, 180, 103, 0.14);
  --wxr-warning-bg-soft:      rgba(226, 180, 103, 0.09);

  --wxr-info:              #8aaee6;
  --wxr-info-border:       rgba(138, 174, 230, 0.38);
  --wxr-info-border-soft:  rgba(138, 174, 230, 0.26);
  --wxr-info-border-hover: rgba(138, 174, 230, 0.60);
  --wxr-info-bg:           rgba(138, 174, 230, 0.14);
  --wxr-info-bg-soft:      rgba(138, 174, 230, 0.09);

  --wxr-success:              #7fcfa0;
  --wxr-success-strong:       #8fd8ad;
  --wxr-success-border:       rgba(92, 196, 141, 0.26);
  --wxr-success-border-strong:rgba(92, 196, 141, 0.38);
  --wxr-success-border-hover: rgba(92, 196, 141, 0.60);
  --wxr-success-bg:           rgba(92, 196, 141, 0.09);
  --wxr-success-bg-strong:    rgba(92, 196, 141, 0.14);

  --wxr-purple:              #b6a5ee;
  --wxr-purple-strong:       #c8bbf3;
  --wxr-purple-border:       rgba(182, 165, 238, 0.38);
  --wxr-purple-border-soft:  rgba(182, 165, 238, 0.26);
  --wxr-purple-border-hover: rgba(182, 165, 238, 0.60);
  --wxr-purple-bg:           rgba(182, 165, 238, 0.14);
  --wxr-purple-bg-soft:      rgba(182, 165, 238, 0.09);

  --wxr-orange:        #e9a36f;
  --wxr-orange-border: rgba(233, 163, 111, 0.38);
  --wxr-orange-bg:     rgba(233, 163, 111, 0.12);
  --wxr-orange-solid:  #d4813f;

  /* FOKUS. Navblått i ljusa lägets valör syns inte mot grått, så ringen ljusnar. Glöden
     är svagare än i ljust läge (0,14 mot 0,12 av en mörkare blå): mot en mörk botten
     läser en ljus halo som en lampa, och kanten bär redan beskedet. */
  --wxr-focus-ring: #7fa3dc;
  --wxr-focus-glow: rgba(127, 163, 220, 0.14);

  /* SKUGGOR. Inte "samma skugga fast mörkare": mot en mörk botten bär en svart skugga
     nästan ingen information, så de blir både djupare och mer ogenomskinliga. Det är
     ljushetsskillnaden mellan ytorna som gör huvudjobbet här, skuggan är understödet. */
  --wxr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --wxr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --wxr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --wxr-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
  --wxr-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.60);
  --wxr-shadow-bar: 0 2px 8px rgba(0, 0, 0, 0.55);
  --wxr-shadow-panel-left:  -8px 0 24px rgba(0, 0, 0, 0.45);
  --wxr-shadow-panel-right:  4px 0 20px rgba(0, 0, 0, 0.40);

  /* SCRIM blir STARKARE, inte svagare: mot en mörk sida krävs mer för att säga
     "det här bakom är avstängt". */
  --wxr-scrim:        rgba(0, 0, 0, 0.65);
  --wxr-scrim-strong: rgba(0, 0, 0, 0.80);

  /* DIAGRAM, SYNTAX OCH FLÖDESSCHEMA. Samma kulörer som märkena, så ett diagram och ett
     märke i samma färg säger samma sak. Avatarerna och foto-överläggen står kvar, de är
     undantagna temat. */
  --wxr-chart-1: #7aa6e3;
  --wxr-chart-2: #4fbe92;
  --wxr-chart-3: #e0995e;
  --wxr-code-string: #8fd8ad;
  --wxr-code-number: #e2b467;
  --wxr-code-bool:   #b6a5ee;
  --wxr-code-null:   #959ba4;
  /* Romben och villkorschippet BÄR vit text, så de får inte ljusna; samma dämpade blå
     som --nav-solid. */
  --wxr-cpq-flow-node: #2b5aa8;
  --wxr-cpq-flow-any:  #e2b467;

  /* TELERIK, sex rader. 112 av temats 127 färgvariabler härleds ur de här med
     oklch(from var(...)) och byter riktning vid ljushet 0,6, så rutnät, celler, rubriker,
     fält, knappar och popuplistan vänder av sig själva. Måste ligga på :root: en
     härledning läser värdet där den DEKLARERAS, inte där den används. */
  --kendo-color-app-surface: var(--wxr-surface);
  --kendo-color-surface:     var(--wxr-surface-muted);
  --kendo-color-base:        var(--wxr-surface);
  --kendo-color-subtle:      var(--wxr-text-muted);
  --kendo-color-border:      var(--wxr-border);
  --kendo-color-border-alt:  var(--wxr-border-em);
  /* Accentfärgen vänder till markörtonen. Aritmetiken tvingar fram det, precis som för
     våra egna nav-token: mot kortet (#25282c) krävs ljushet ~0,27 för att en text ska nå
     4,5, medan vit text ovanpå kräver ~0,18 eller mörkare. Inget enda blått klarar båda.
     Telerik-ytorna hos oss bär färgen som MARKÖR (vald sida i sidnumreringen, fokus,
     markerad rad) och aldrig som fylld knapp, för varje knapp i appen är en Wxr-knapp. */
  --kendo-color-primary:     var(--wxr-nav);

  /* BOOTSTRAP 5.3, som laddas från CDN i varje värds _Host.cshtml och äger mer än man
     tror: tabellerna, textarean, flikarna och listgrupperna. Vår CSS rör dem inte, och de
     stod därför kvar vita mitt i ett mörkt gränssnitt.

     Samma mekanik som Telerik: allt hänger på en handfull variabler. `.table` läser
     --bs-emphasis-color, --bs-body-bg och --bs-border-color; `.form-control` läser
     --bs-body-color, --bs-body-bg och --bs-border-color. Att mappa dem hit i stället för
     att sätta data-bs-theme="dark" ger OSS paletten: Bootstraps egen mörka är gråblå
     (#212529) och hade legat bredvid vår slate utan att stämma.

     -rgb-varianterna måste med: Bootstrap bygger rgba() av dem för randiga rader och
     hovring, och en färg utan sin rgb-tvilling ger en rad som inte tonas alls.

     TEXTAREAN är värd en egen rad. Vår fältregel är `.form-control:not(textarea)`, alltså
     har textarean ALLTID varit Bootstraps. Den följde inte kompaktläget heller. */
  --bs-body-bg:            var(--wxr-surface);
  --bs-body-bg-rgb:        37, 40, 44;
  --bs-body-color:         var(--wxr-text);
  --bs-body-color-rgb:     207, 211, 216;
  --bs-emphasis-color:     var(--wxr-text);
  --bs-emphasis-color-rgb: 207, 211, 216;
  --bs-border-color:       var(--wxr-border);
  --bs-secondary-color:    var(--wxr-text-muted);
  --bs-secondary-bg:       var(--wxr-surface-muted);
  --bs-tertiary-color:     var(--wxr-text-hint);
  --bs-tertiary-bg:        var(--wxr-surface-secondary);
  --bs-heading-color:      var(--wxr-text);
  --bs-link-color:         var(--wxr-link);
  --bs-link-hover-color:   var(--wxr-nav-hover);
  --bs-code-color:         var(--wxr-code-string);
  --bs-highlight-bg:       var(--wxr-warning-bg);

  /* .bg-light läser --bs-light-rgb, som INTE följer med de övriga: Bootstrap bygger
     background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)). Utan den här
     raden stod varje bg-light-yta kvar ljus i mörkt läge, och eftersom fälten inuti
     redan följer temat blev resultatet mörka fält på vit botten. Syns i inbäddningens
     och dokumentmallarnas redigeringskort.

     Ett RGB-tal och inte var(--wxr-surface-muted): Bootstrap stoppar in värdet i rgba(),
     som vill ha tre komponenter och inte en färg. Motsvarar #263244. */
  --bs-light:              var(--wxr-surface-muted);
  --bs-light-rgb:          38, 50, 68;
}

/* ── DESIGN TOKENS: MÅTT, forts ──
   Typsnitt, radier och kontrollhöjd. På :root av samma skäl som måtten överst:
   kompaktläget sätter om dem. */
:root {

  /* Font */
  --wxr-font:    'Lato', sans-serif;
  /* Kod, artikelnummer och länkar som ska gå att läsa tecken för tecken. Stod förut
     som en fallback på två ställen med olika stackar. */
  --wxr-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
  --wxr-f-base:  14px;
  --wxr-f-sm:    13px;
  --wxr-f-label: 12px;
  /* Minsta steget. Finns för CPQ:s arbetsytor, där reglernas och layoutens etiketter,
     märken och hjälprader ligger under fältetiketterna. Innan den fanns skrevs de som
     11px, 10px, 0.7rem, 0.72rem och 0.65rem om vartannat, alltså fem stavningar av två
     storlekar, och ingen av dem följde med när typografin ändrades. */
  --wxr-f-xs:    11px;

  /* Luft och tabelltypografi som tokens, så det kompakta läget (nedan) kan dra ihop
     dem på ett ställe. Talen är de som stod hårdkodade i respektive regel; en regel som
     rörs framöver byter på samma sätt sitt tal mot en token (docs/plans/ui-preferences.md,
     beslut 5). */
  --wxr-page-body-padding:  16px 32px 40px;
  --wxr-card-gap:           16px;
  --wxr-card-header-padding: 10px 18px;
  --wxr-card-body-padding:  18px 20px;
  --wxr-form-grid-gap:      16px 20px;
  /* Etikett till sitt eget fält. Husets standard är 6px; talet låg hårdkodat i
     regeln och svarade därför inte på kompakt täthet, vilket husets egen regel
     säger att all spacing ska göra. Höj det INTE för att formuläret känns trångt:
     är det trångt sitter felet i avståndet MELLAN fälten, se
     --wxr-form-grid-gap och .wxr-form-section__content. */
  --wxr-field-label-gap:    6px;
  --wxr-table-font:         13px;
  --wxr-table-head-font:    12px;

  /* Telerik binds till vår typografi i stället för att hålla en egen kopia. Temat sätter
     --kendo-font-size: 0.875rem på :root, alltså samma 14px som --wxr-f-base men helt
     frikopplat: ändrar någon vår token glider de isär, och popup-lagret (som läser den
     här och inte våra tokens) står kvar på den gamla storleken. Det var precis vad som
     hände när kompaktläget byggdes. */
  --kendo-font-size: var(--wxr-f-base);

  /* Shape — skarpare för modernt, tidlöst intryck (Linear/Stripe-stil) */
  --wxr-radius:    4px;
  --wxr-radius-lg: 6px;
  --wxr-radius-nav: 8px;

  /* Form controls — något lägre rytm */
  --wxr-control-height-user: 34px;
  /* ALLTID en härledning av användarens steg, aldrig ett eget tal. Skälet är att CPQ:s
     modelltäthet (.is-compact) räknar ETT steg ner från användarens val, och en custom
     property kan inte referera sig själv: calc(var(--wxr-control-height) - 4px) på den
     variabel regeln också skriver är cirkulärt och gör den ogiltig. Två tal som skulle
     hållas i synk hade dessutom glidit isär förr eller senare, precis som Teleriks
     typografi gjorde. Det finns därför ETT tal per läge, och det heter -user. */
  --wxr-control-height: var(--wxr-control-height-user);

  /* SLIM: husets låga kontrollhöjd, för en kontroll som står inuti något annat
     och inte är ett av sidans egna formulärfält. Egen token och inte ett tal i
     regeln, så den följer kompakt täthet som allt annat gör. */
  --wxr-control-height-sm: 27px;
  /* Kryssrutans sida. Bocken räknas ur den (se .wxr-checkbox--square), så storleken är
     en siffra och inte fem. Tidigare satt bocken hårdkodad i pixlar mot en ruta som
     också var hårdkodad, och varje avvikande storlek drog den ur centrum: kategoriraden
     i artikelmodalen fick räkna om alla fyra värdena för att komma åt två pixlar till.
     17 och inte 16: den täta formulärrutan läste som liten bredvid systemets övriga
     kontroller. EN storlek i hela systemet — sätt inte om variabeln lokalt. Kryssrutan ska
     se likadan ut överallt, och känns den fel någonstans är det talet här som ska ändras. */
  --wxr-checkbox-size: 17px;
}

/* ── TÄTHET: KOMPAKT ──
   Personligt val på profilen (UserProfiles.UiDensity). WxrAppShell sätter klassen på sin
   rot under prerender; wxr-ui-prefs.js speglar den till <html> efter första interaktiva
   renderingen, för Teleriks popup-lager och toasts som ritas utanför skalet. Två selektorer
   av det skälet, samma värden.

   Läget krymper RAMVERKET: höjder, luft och ett steg typografi. Ingen kolumn, funktion
   eller text försvinner. Det når bara regler som läser tokens; hårdkodade tal står kvar
   tills regeln rörs (docs/plans/ui-preferences.md, beslut 3 och 5). */
.wxr-app-shell--compact,
html.wxr-density-compact {
  --wxr-f-base:  13px;
  --wxr-f-sm:    12px;
  --wxr-f-label: 11px;
  --wxr-f-xs:    10px;
  /* Samma härledning som i :root, och den måste stå här också: en var() löses mot det
     element där den DEKLARERAS, så :root-raden skulle bära 34px även när det här blocket
     krympt sitt eget -user. */
  --wxr-control-height-user: 30px;
  --wxr-control-height: var(--wxr-control-height-user);
  --wxr-control-height-sm: 24px;
  --wxr-topbar-height:  52px;
  --wxr-toolbar-height: 40px;
  --wxr-toolbar-secondary-height: 32px;
  --wxr-page-body-padding:  10px 20px 32px;
  --wxr-card-gap:           12px;
  --wxr-card-header-padding: 7px 14px;
  --wxr-card-body-padding:  12px 16px;
  --wxr-form-grid-gap:      10px 16px;
  --wxr-field-label-gap:    5px;
  --wxr-table-font:         12px;
  --wxr-table-head-font:    11px;

  /* Räknas om här också, och inte bara i :root: en var() löses mot det element där den
     DEKLARERAS, så :root-raden bär 14px även när skalet krympt sin egen --wxr-f-base.
     html.wxr-density-compact är :root med en klass, alltså högre specificitet än
     Teleriks egen :root-regel, vilket är det som gör att den vinner. */
  --kendo-font-size: var(--wxr-f-base);
}

/* Teleriks radhöjd sätts av temats storleksklass (.k-grid-md: --kendo-spacing-2 i block-
   led), inte av våra tokens. 8+8 blir 4+4 per rad, samma tal som temats egen .k-grid-sm.
   Uppmätt på företagslistan 2026-09-21: 50px per rad blev 42px. Golvet sätts av
   radåtgärdernas ikonknappar, inte av texten, så vinsten är en sjättedel fler rader och
   inte de tio pixlar man räknar fram ur paddingen. */
.wxr-app-shell--compact .k-grid .k-table-td,
.wxr-app-shell--compact .k-grid .k-table-th,
html.wxr-density-compact .k-grid .k-table-td,
html.wxr-density-compact .k-grid .k-table-th {
  padding-block: 4px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--wxr-font);
  font-size: var(--wxr-f-base);
  color: var(--wxr-text);
  background: var(--wxr-surface-tertiary);
  -webkit-font-smoothing: antialiased;

  /* ── Flytande överlagringar (toast, kundvagns-FAB) ──
     De ligger position:fixed och kan därför inte se vad sidan faktiskt har.
     Tidigare bar de var sitt magiska tal (122px respektive 124px) som antog
     BÅDE toolbar och kundvagn: på en sida utan toolbar hamnade toasten mitt
     i innehållet, och utan kundvagn stod den 60px in från kanten utan att
     väja för något.

     Offseten byggs i stället av delar som var och en slås på när sitt element
     finns i DOM:en (reglerna nedan). Varje regel sätter EN variabel, så de kan
     inte skriva över varandra — de summeras. Toolbar och sekundär toolbar
     renderas bara när sidan gett dem innehåll (WxrPage), och kundvagnens FAB
     bara på olåsta kalkyl-underprojekt (ProjectCart), så :has() speglar exakt
     det användaren ser. */
  --wxr-float-banner-offset: 0px;
  --wxr-float-toolbar-offset: 0px;
  --wxr-float-toolbar-secondary-offset: 0px;
  --wxr-float-gap: 12px;
  --wxr-float-right: 24px;
  --wxr-float-top: calc(
    var(--wxr-topbar-height)
    + var(--wxr-float-banner-offset)
    + var(--wxr-float-toolbar-offset)
    + var(--wxr-float-toolbar-secondary-offset)
    + var(--wxr-float-gap));
}

body:has(.wxr-impersonation-banner) { --wxr-float-banner-offset: var(--wxr-impersonation-banner-height); }
body:has(.wxr-page-toolbar)         { --wxr-float-toolbar-offset: var(--wxr-toolbar-height); }
/* Räknas så snart elementet finns, även med .is-hidden: den gömmer med
   visibility, inte display, så bandet tar sin plats i flödet ändå. */
body:has(.wxr-page-toolbar-secondary) {
  --wxr-float-toolbar-secondary-offset: var(--wxr-toolbar-secondary-height);
}
/* Kundvagnsknappen sitter 24px från kanten och är 48px bred — toasten måste
   börja utanför den. Finns ingen vagn ska den ligga i sidans vanliga marginal. */
body:has(.wxr-project-cart__fab) { --wxr-float-right: 85px; }

/* ── RULLNINGSLIST ───────────────────────────────────────────────────────────
   Smal och diskret på HELA appen, i stället för operativsystemets breda default.
   Den syns på varje yta som scrollar (sidkroppen, sidomenyn, dialoger, Teleriks
   listor), och en 15px grå pelare bredvid varje kort drar mer uppmärksamhet än
   innehållet.

   Två uppsättningar med flit. `scrollbar-width`/`scrollbar-color` är standarden
   och det enda Firefox förstår. Webkit-pseudoelementen är kvar för äldre
   Chromium och Safari; i Chromium 121+ vinner standardegenskaperna och
   pseudoelementen ignoreras, vilket är rätt ordning och inte en konflikt.

   `.wxr-page-body` har `scrollbar-gutter: stable`, så den reserverade rännan
   krymper med listen och innehållet får några pixlar till. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--wxr-scrollbar-thumb) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--wxr-scrollbar-thumb);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--wxr-scrollbar-thumb-hover); }
/* Hörnet där en lodrät och en vågrät list möts, annars en vit fyrkant. */
*::-webkit-scrollbar-corner { background: transparent; }

/* Flikraderna döljer sin list helt och ska inte få tillbaka en av regeln ovan. */
.wxr-tab-nav, .wxr-step-nav { scrollbar-width: none; }

/* ── APP SHELL ── CSS Grid: topbar (full width) | sidebar + main */
.wxr-app-shell {
  display: grid;
  grid-template-rows: var(--wxr-topbar-height) 1fr;
  grid-template-columns: var(--wxr-sidebar-width) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 0.22s ease;
}

.wxr-app-shell--sidebar-hidden {
  grid-template-columns: 56px 1fr;
}

/* ── TOPBAR ── spans full width, dark background */
.wxr-app-shell__topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  background: linear-gradient(135deg, var(--wxr-header-bg-hi) 0%, var(--wxr-header-bg) 100%);
  border-bottom: 1px solid var(--wxr-header-border);
  box-shadow: var(--wxr-shadow-bar);
  z-index: 100;
}

.wxr-topbar {
  height: var(--wxr-topbar-height);
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: center;
  z-index: 100;
}

.wxr-topbar__logo-area {
  width: var(--wxr-sidebar-width);
  min-width: var(--wxr-sidebar-width);
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px 0 16px;
  gap: 4px;
  overflow: hidden;
  border-right: 1px solid var(--wxr-header-border);
  transition: width 0.22s ease, min-width 0.22s ease;
}

.wxr-app-shell--sidebar-hidden .wxr-topbar__logo-area {
  width: 100px;
  min-width: 100px;
  padding: 0 8px;
  gap: 8px;
}

.wxr-app-shell--sidebar-hidden .wxr-topbar__logo {
  flex: 0 0 auto;
}

.wxr-app-shell--sidebar-hidden .wxr-topbar__hamburger {
  margin: 0;
}


.wxr-topbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.wxr-topbar__logo-image {
  height: 32px;
  max-height: 32px;
  max-width: 140px;
  width: auto;
  display: block;
}

/* Hamburger button */
.wxr-topbar__hamburger {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--wxr-radius);
  background: transparent;
  color: var(--wxr-header-text);
  cursor: pointer;
  margin: 0 4px 0 8px;
  transition: background 0.13s;
}

.wxr-topbar__hamburger:hover {
  background: var(--wxr-header-hover);
}

.wxr-topbar__hamburger i {
  font-size: 20px;
}

.wxr-topbar__right {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  min-width: 0;
}

/* Breadcrumb */
.wxr-topbar-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--wxr-header-text);
  min-width: 0;
  overflow: hidden;
}

.wxr-topbar-breadcrumb a {
  color: var(--wxr-header-dim);
  text-decoration: none;
  transition: color 0.12s;
  white-space: nowrap;
}

.wxr-topbar-breadcrumb a:hover { color: var(--wxr-header-text); }
.wxr-topbar-breadcrumb__item  { color: var(--wxr-header-dim); white-space: nowrap; font-weight: 400; }
.wxr-topbar-breadcrumb__sep   { color: var(--wxr-header-faint); flex-shrink: 0; font-weight: 300; }
.wxr-topbar-breadcrumb__current { color: var(--wxr-text-on-color); font-weight: 700; white-space: nowrap; }

/* Profile */
/* Triggern i topbaren. Klasserna sitter på WxrMenu:s knapp, som bär sin egen
   grundstil; de här raderna vinner för att de kommer senare i filen. */
.wxr-topbar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: auto;
  height: auto;
  font-size: var(--wxr-f-sm);
  color: var(--wxr-header-dim);
  cursor: pointer;
  padding: 4px 6px;
  border: none;
  border-radius: var(--wxr-radius);
  background: transparent;
  transition: background 0.12s;
}

.wxr-topbar-profile:hover:not(:disabled),
.wxr-topbar-profile[aria-expanded="true"] { background: var(--wxr-header-hover); }

.wxr-topbar-profile__name {
  font-size: var(--wxr-f-sm);
  color: var(--wxr-header-text);
  white-space: nowrap;
}

.wxr-topbar-profile__initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--wxr-header-faint);
  background: var(--wxr-header-fill);
  color: var(--wxr-text-on-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Profilmenyns innehåll. Panelen själv är WxrMenu:s (topplager, placerad av
   wxr-menu.js); det som står kvar här är headern, posterna och kundernas egna
   wxr-profile-dropdown__item, som finns i kundprojekt vi inte bygger om. */
.wxr-profile-dropdown__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  gap: 8px;
}

.wxr-profile-dropdown__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wxr-surface-secondary);
  border: 2px solid var(--wxr-border-em);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wxr-text-muted);
}

.wxr-profile-dropdown__avatar i { font-size: 28px; }

.wxr-profile-dropdown__username {
  font-size: 14px;
  font-weight: 700;
  color: var(--wxr-text);
}

.wxr-profile-dropdown__divider {
  height: 1px;
  background: var(--wxr-border);
  margin: 4px 0;
}

.wxr-profile-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: var(--wxr-f-sm);
  color: var(--wxr-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}

.wxr-profile-dropdown__item:hover { background: var(--wxr-surface-secondary); }

.wxr-profile-dropdown__item i { font-size: 16px; color: var(--wxr-text-muted); }

.wxr-profile-dropdown__item--danger { color: var(--wxr-danger); }
.wxr-profile-dropdown__item--danger i { color: var(--wxr-danger); }
.wxr-profile-dropdown__item--danger:hover { background: var(--wxr-danger-bg); }

/* ── SIDEBAR ── */
.wxr-app-shell__sidebar {
  grid-column: 1;
  grid-row: 2;
  overflow: hidden;
  background: var(--wxr-sidebar-bg);
  border-right: 1px solid var(--wxr-border);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--wxr-header-bg) 4%, transparent);
  display: flex;
  flex-direction: column;
}

/* Collapsed: sidebar cell allows flyout to overflow into content area */
.wxr-app-shell--sidebar-hidden .wxr-app-shell__sidebar {
  overflow: visible;
  border-right: none;
  position: relative;
}

/* ── COLLAPSED SIDEBAR ──
   När sidan minimeras blir sidebaren en 56px ikonkolumn.
   Vid hover expanderar den till full bredd som en flyout över innehållet.
   Premium SaaS-stil: rena ikoner, subtila tillstånd, ingen visuell brusighet
   (inga chevrons, inga tomma group-wrappers, inga labels som "läcker"). */

/* Container — absolut positionerad så flyout kan ligga ovanpå main */
.wxr-app-shell--sidebar-hidden .wxr-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 56px;
  overflow: hidden;
  border-right: 1px solid var(--wxr-border);
  background: var(--wxr-sidebar-bg);
  /* Liten fördröjning innan kollaps tillbaka så cursorn hinner ut */
  transition: width 0.18s ease 0.06s, box-shadow 0.18s ease;
  z-index: 50;
}

.wxr-app-shell--sidebar-hidden .wxr-sidebar:hover {
  width: var(--wxr-sidebar-width);
  box-shadow: var(--wxr-shadow-panel-right);
  /* Vid expansion: ingen fördröjning, känns responsivt */
  transition: width 0.18s ease, box-shadow 0.18s ease;
}

/* Kollapsat läge: behåll ALL default-styling (height, margin, padding-top/bottom)
   och justera bara det minimalt nödvändiga:
   - padding vänster/höger till 0 så ikonen kan centreras
   - justify-content center
   - gap 0
   Genom att inte röra height/margin/nav-padding undviker vi vertikalhopp
   när användaren växlar mellan kollapsat och hover-läge. */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item {
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  gap: 0;
}

/* Dölj ALLT som inte är ren ikon i kollapsat läge.
   Nya strukturen (efter Cursor-refaktor) använder __toggle + nav-children
   istället för __chevron + nav-group. Alla varianter listas för bakåtkomp. */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item__toggle,
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-children,
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item__chevron,
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-group {
  display: none !important;
}

/* Row-containern lämnas orörd (display: flex; align-items: stretch).
   När toggle är display:none försvinner den ur flex-layouten automatiskt
   och nav-item fyller hela raden via sin flex: 1 1 auto. */

/* Labels visuellt dolda men kvar för screen readers */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sub-items (även om de råkar vara i DOM:en) helt dolda i kollapsat läge */
.wxr-app-shell--sidebar-hidden .wxr-sidebar-nav-item--sub {
  display: none;
}

/* När sidebaren expanderar via hover: allt synligt igen */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:hover .wxr-sidebar-nav-item--sub {
  display: flex;
}
.wxr-app-shell--sidebar-hidden .wxr-sidebar:hover .wxr-sidebar-nav-group--open {
  display: flex;
}
/* Toggle och children återställs vid hover (nya strukturen) */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:hover .wxr-sidebar-nav-item__toggle {
  display: inline-flex;
}
.wxr-app-shell--sidebar-hidden .wxr-sidebar:hover .wxr-sidebar-nav-children {
  display: block;
}

/* Tydligare ikoner i kollapsat läge — något större för bättre tap-target */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item i {
  font-size: 18px;
  color: var(--wxr-text-muted);
  transition: color 0.15s ease;
}

/* Hover på enskild ikonknapp: subtil bg-shift */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item:hover {
  background: var(--wxr-sidebar-nav-hover-bg);
}
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item:hover i {
  color: var(--wxr-text);
}

/* Aktivt tillstånd: solid bakgrund + tydlig vänsteraccent (3px bar) */
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item.is-active {
  background: var(--wxr-sidebar-nav-active-bg);
}
.wxr-app-shell--sidebar-hidden .wxr-sidebar:not(:hover) .wxr-sidebar-nav-item.is-active i {
  color: var(--wxr-nav);
}

.wxr-app-shell__main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.wxr-app-shell__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar nav */
.wxr-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 0 0;
  overflow: hidden;
}

.wxr-sidebar__footer {
  padding: 14px 16px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--wxr-text-hint);
  border-top: 1px solid color-mix(in srgb, var(--wxr-border-strong) 35%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.wxr-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.wxr-sidebar-nav-item-row {
  display: flex;
  align-items: stretch;
}

/* Vertical rhythm between top-level clusters */
.wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub) + .wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub) {
  margin-top: 8px;
}

.wxr-sidebar-nav-item--sub + .wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub) {
  margin-top: 12px;
}

/* Slightly tighter group: parent link followed by its children */
.wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub):has(+ .wxr-sidebar-nav-item--sub) {
  margin-bottom: 2px;
}

.wxr-sidebar-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  margin: 2px 0;
  border-radius: 0;
  font-size: var(--wxr-f-base);
  font-weight: 500;
  line-height: 1.45;
  color: var(--wxr-text);
  text-decoration: none;
  border-left: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    font-weight 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
}

.wxr-sidebar-nav-item__toggle {
  width: 34px;
  min-width: 34px;
  margin: 2px 0;
  border: none;
  background: transparent;
  color: var(--wxr-text-hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.wxr-sidebar-nav-item__toggle:hover {
  background: var(--wxr-sidebar-nav-hover-bg);
  color: var(--wxr-text);
}

.wxr-sidebar-nav-item__toggle i {
  font-size: 11px;
}

.wxr-sidebar-nav-item__toggle.is-expanded i {
  transform: rotate(180deg);
}

/* Noder utan länk (t.ex. Administration) renderas som <button> som omfamnar
   hela raden + chevron. Reset:a button-default och låt det inre <span>-elementet
   få exakt samma .wxr-sidebar-nav-item-styling som NavLink-varianten. */
.wxr-sidebar-nav-item-row__toggle-button {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.wxr-sidebar-nav-item-row__toggle-button:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: -2px;
}

/* <span class="wxr-sidebar-nav-item"> inuti toggle-button behöver inte
   <a>-hover-state — knappens hover hanteras på span:et via samma selector
   som NavLink (.wxr-sidebar-nav-item:hover). */
.wxr-sidebar-nav-item-row__toggle-button:hover .wxr-sidebar-nav-item {
  background: var(--wxr-sidebar-nav-hover-bg);
  color: var(--wxr-text);
}

/* Inline-variant av __toggle inuti toggle-button-raden — samma 34px-box,
   samma chevron-storlek, men pointer-events: none så hela raden klickas
   som en enhet (knappen håller onclick). */
.wxr-sidebar-nav-item__toggle--inline {
  pointer-events: none;
}

/* Nestled nivåer: exakta padding-värden per indenteringsnivå (lvl 2 = 46px,
   lvl 3 = 65px). Selektorn räknar nestningsdjup via descendant-selectors. */
.wxr-sidebar-nav-children .wxr-sidebar-nav-children .wxr-sidebar-nav-item--sub {
  padding-left: 65px;
}
.wxr-sidebar-nav-children .wxr-sidebar-nav-children .wxr-sidebar-nav-children .wxr-sidebar-nav-item--sub {
  padding-left: 84px;
}

.wxr-sidebar-nav-item:hover {
  background: var(--wxr-sidebar-nav-hover-bg);
  color: var(--wxr-text);
}

.wxr-sidebar-nav-item.active,
.wxr-sidebar-nav-item.is-active {
  color: var(--wxr-nav);
  background: var(--wxr-sidebar-nav-active-bg);
  font-weight: 700;
  border-left: none;
  box-shadow: none;
}

/* Full-bleed row + flush left accent (same horizontal inset via padding only) */
.wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--wxr-sidebar-nav-accent);
  transform: scaleY(0);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  transform-origin: center;
}

.wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub).active::before,
.wxr-sidebar-nav-item:not(.wxr-sidebar-nav-item--sub).is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.wxr-sidebar-nav-item i {
  font-size: 18px;
  width: 1.25rem;
  flex-shrink: 0;
  text-align: center;
  color: var(--wxr-text);
  opacity: 1;
  transition: color 0.18s ease;
}

.wxr-sidebar-nav-item:hover i {
  color: var(--wxr-text);
}

.wxr-sidebar-nav-item.active i,
.wxr-sidebar-nav-item.is-active i {
  color: var(--wxr-nav);
}

.wxr-sidebar-nav-item__label { overflow: hidden; text-overflow: ellipsis; }

.wxr-sidebar-nav-item--sub {
  padding: 8px 14px 8px 46px;
  margin-top: 1px;
  font-size: var(--wxr-f-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wxr-text);
}

.wxr-sidebar-nav-item--sub:hover {
  color: var(--wxr-text);
}

.wxr-sidebar-nav-item--sub.active,
.wxr-sidebar-nav-item--sub.is-active {
  color: var(--wxr-nav);
  font-weight: 600;
  background: var(--wxr-sidebar-nav-active-bg);
  box-shadow: none;
}

/* ── PAGE ── */
.wxr-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* ── PAGE TOOLBAR ──
   Platt 1px-border istället för skugga (Linear-stil). */
.wxr-page-toolbar {
  flex-shrink: 0;
  height: var(--wxr-toolbar-height);
  background: var(--wxr-surface);
  border-bottom: 1px solid var(--wxr-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.wxr-page-toolbar__left {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 4px;
}

/* När project-shell-nav ligger i toolbar:n behöver dess Produkter-dropdown
   sticka ut nedåt — overflow:hidden på toolbar__left klipper annars allt
   utanför 56px-höjden. :has-stöd är bra i Chrome/Edge/Safari/Firefox 121+. */
.wxr-page-toolbar__left:has(.wxr-project-shell-nav) {
  overflow: visible;
}

.wxr-page-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── GENERIC TOOLBAR ── */
.wxr-toolbar {
  flex-shrink: 0;
  height: var(--wxr-toolbar-height);
  background: var(--wxr-surface);
  border-bottom: 1px solid var(--wxr-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

.wxr-toolbar__nav     { flex: 1; display: flex; align-items: center; }
.wxr-toolbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wxr-toolbar__divider { flex-shrink: 0; width: 1px; height: 20px; background: var(--wxr-border); margin: 0 4px; }

.wxr-toolbar-text-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-direction: row-reverse;
}

/* gap på GRUPPEN och margin nollad på barnen: .wxr-icon-btn bär margin-left: 2px för
   sina egna sammanhang (gridens radåtgärder), medan .wxr-menu__trigger inte gör det. I
   toolbaren blev avståndet därför 4 px mellan två ikonknappar och 2 px fram till en
   meny, alltså ojämnt utan att något sa varför. Gruppen bestämmer avståndet här. */
.wxr-toolbar-icon-actions { display: flex; align-items: center; gap: 6px; }
/* TVÅ klasser, inte `> *`: .wxr-icon-btn väger också (0,1,0) och står senare i filen, så
   universalväljaren förlorade och avståndet blev 8 px mellan två ikonknappar och 6 fram
   till en meny. */
.wxr-toolbar-icon-actions > .wxr-icon-btn { margin-left: 0; }
.wxr-toolbar-bulk-actions  { display: flex; align-items: center; gap: 2px; flex: 1; }

/* Femte åtgärdsgruppen: lokala hjälpåtgärder inne i innehållet (kort, sektion,
   panel). Saknade egen regel och lutade sig därför på whitespace mellan
   inline-flex-knappar, vilket gav ojämna mellanrum. 8px är samma avstånd som
   .wxr-toolbar__actions och .wxr-dialog__footer. Wrap eftersom gruppen ofta
   ligger i en smal kolumn. */
.wxr-inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Stegflödets knapprad (WxrWizardActions). Saknade egen regel, så Tillbaka/Nästa hamnade
   tätt mot varandra och mot steget ovanför. Samma geometri som dialogens fot: högerställd
   med den primära sist, och avståndet uppåt är kortavståndet (formulärets token har två
   värden och duger inte till margin), så raden läses som stegets
   avslut och inte som ett fält till. */
.wxr-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--wxr-card-gap);
}

/* ── PAGE BODY ── */
.wxr-page-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Reservera plats för rullningslisten så innehållet inte hoppar när scrollen
     låses (modal öppnas) eller listen kommer/försvinner. */
  scrollbar-gutter: stable;
  /* Konsekvent rytm: 16/24/40 — bytte bort 15/56 */
  padding: var(--wxr-page-body-padding);
  background: var(--wxr-surface-tertiary);
}

/* Lås bakgrundsscrollen när en dialog är öppen, så hjulet inte rör sidan bakom
   modalen. :has() reagerar på DOM:en → låset släpps automatiskt när dialogen
   stängs (ingen risk för "fastnat lås"). Själva dialogen scrollar via overlayn. */
body:has(.wxr-dialog-overlay) .wxr-page-body {
  overflow: hidden;
}

.wxr-page-body--simple > *:not(.wxr-page-heading) {
  max-width: 960px;
}

/* Formulärflik på en sida som i övrigt är bred: samma läsbara bredd som
   BodyVariant="simple" (960px) utan att sidskalet byter bredd per flik.
   Projektets Beskrivning-sida använder den för Projektinformation, medan
   Sammanställning/Priser/Filer får hela bredden till sina tabeller. */
.wxr-project-info-width {
  max-width: 960px;
}

/* Full-width + full-height list pages (e.g. Telerik data grids) */
.wxr-page-body--simple-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 15px 24px 24px;
  background: var(--wxr-surface-tertiary);
}

.wxr-page-body--simple-fluid > *:not(.wxr-page-heading) {
  max-width: none;
  width: 100%;
}

.wxr-page-body--simple-fluid > .wxr-page-heading {
  flex-shrink: 0;
}

.wxr-page-body--simple-fluid > .wxr-page-header__subtitle {
  flex-shrink: 0;
}

.wxr-page-body--simple-fluid .wxr-page-messages {
  flex-shrink: 0;
}

/* Wide edit layout: full content width + same scroll shell as other edit pages */
.wxr-page-body--simple-wide {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wxr-page-body--simple-wide > *:not(.wxr-page-heading):not(.wxr-page-header__subtitle) {
  max-width: none;
  width: 100%;
  /* Förhindra flex-shrink i flex-column container — annars kollapsar
     kort som ligger efter form (t.ex. Personer & användare) till 0 höjd. */
  flex-shrink: 0;
}

.wxr-page-body--simple-wide > .wxr-page-heading,
.wxr-page-body--simple-wide > .wxr-page-header__subtitle {
  flex-shrink: 0;
}

/* Wide edit pages: form fills body width.
   Tidigare: display:flex + flex:1 sträckte form till hela viewport-höjden vilket
   gjorde att AuditFooter (placerad efter form) hamnade nedan scroll-vyn. Nu är form
   ren block-layout — den får sin naturliga höjd och syskon (AuditFooter) följer direkt under. */
.wxr-page-body--simple-wide > form {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Two-column edit shell — ~57% / ~43% (addresses / contact on the right) */
.wxr-edit-split {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Enkolumns-variant: innehållet (kort/formulär) fyller en BEGRÄNSAD bred kolumn
   i stället för 57/43-spliten med tom högerhalva. Sidans BodyVariant="simple"
   kapar bredden (~960px, centrerad) — används av flik-sidor som inte ska ta
   hela skärmbredden. */
.wxr-edit-single {
  width: 100%;
}

/* Jämbördig tvåkolumns-split INNE i ett kort (t.ex. faktura- vs leveransadress).
   Sidans .wxr-edit-split är 57/43 med avsikt (inmatning vs sammanfattning) — två
   likvärdiga block ska i stället dela lika. Kollapsar med samma brytpunkt. */
/* Klickbar rad i WxrCardTable — sätts bara när tabellen har OnRowClick, så en tabell
   som bara visar data aldrig ser interaktiv ut. Markeringen görs av anroparens egen
   RowClass (table-active); den här regeln bär bara affordansen. */
.wxr-row-clickable {
  cursor: pointer;
}

.wxr-card-split-even {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1199.98px) {
  .wxr-card-split-even {
    grid-template-columns: 1fr;
  }
}

/* Same width as first column on two-column edit pages (search row, role meta, etc.) */
.wxr-layout-primary-col-width {
  width: 100%;
  max-width: 57%;
  box-sizing: border-box;
}

/* Kollapsar till en kolumn vid Bootstrap xl (1200px) snarare än lg (992px).
   Två-kolumns edit-sidor med kort + formulärfält blir trånga redan strax under
   1200px — höger kolumn flyttas under vänster och båda får full bredd. */
@media (max-width: 1199.98px) {
  .wxr-edit-split {
    grid-template-columns: 1fr;
  }
}

/* Omvänd tyngdpunkt: smal vänsterkolumn, bred höger. För ytor där högerkolumnen är det
   man tittar på och vänster bara styr den — en 3D-vy, en förhandsgranskning — till
   skillnad från 57/43, som är gjord för inmatning till vänster och sammanfattning till
   höger. Ligger efter media-frågan ovan med flit, så enkolumnsläget under 1200px
   fortsätter vinna. */
.wxr-edit-split.is-preview-weighted {
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
}

@media (max-width: 1199.98px) {
  .wxr-edit-split.is-preview-weighted {
    grid-template-columns: 1fr;
  }
}

.wxr-edit-split__left,
.wxr-edit-split__right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* WxrMoneyInput: belopp + valuta i en avgränsad box (ram, högerställt tal + valuta). */
.wxr-money-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  max-width: max-content;
}

/* Sammansatt kontroll: den inre inputen står bar (outline: none nedan) och RAMEN bär
   fokus, annars hade två ringar ritats inuti varandra. Fält-formen enligt tokenblocket:
   kanten är indikatorn som klarar 3:1, glöden är dekoration.
   Saknades helt tidigare, så beloppsfältet kunde få tangentbordsfokus utan att synas. */
.wxr-money-input:focus-within {
  border-color: var(--wxr-nav);
  box-shadow: 0 0 0 3px var(--wxr-focus-glow);
}
.wxr-money-input.is-disabled {
  background: var(--wxr-surface-tertiary);
}
.wxr-money-input .wxr-field {
  margin: 0;
}
.wxr-money-input .wxr-input--numeric {
  text-align: right;
  border: none;
  box-shadow: none;
  background: transparent;
  width: 130px;
  padding-right: 4px;
}
.wxr-money-input .wxr-input--numeric:focus {
  outline: none;
  box-shadow: none;
}
.wxr-money-input__suffix {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wxr-text-muted);
  padding-left: 4px;
  border-left: 1px solid var(--wxr-border);
}
.wxr-money-input__currency {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wxr-text);
  width: 56px;
  border: none;
  background: transparent;
  text-transform: uppercase;
  padding-left: 6px;
  border-left: 1px solid var(--wxr-border);
}
.wxr-money-input__currency:focus {
  outline: none;
}

/* Obligatoriska tomma dynamiska egenskapsfält (utan EditContext) ska se ut exakt
   som standardfälten: is-invalid-ikon + meddelande, men INGEN röd ram. */
.wxr-prop-invalid input.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  padding-right: calc(1.5em + 0.75rem);
}

/* Offert-checkout: dokument-/projektnummer som rubrik överst i Offertuppgifter. */
.wxr-offer-docno {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--wxr-text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wxr-border);
}

/* Summering i kundvagnen — radavstånd mellan netto/moms/total. */
.wxr-offer-summary > div {
  padding: 2px 0;
}

/* ── Version-list i Beskrivning-sidan ────────────────────────────────
   Kompakt lista över alla versioner med aktiv-markering, draft/published
   badge och papperskorg per rad. Aktiv-raden får subtilt blå-tint som
   visuell signal. */
.wxr-version-list {
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  overflow: hidden;
}

.wxr-version-list__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-left: 3px solid transparent;
}

.wxr-version-list__item + .wxr-version-list__item {
  border-top: 1px solid var(--wxr-border);
}

.wxr-version-list__item.is-active {
  background: var(--wxr-info-bg-soft);
  border-left-color: var(--wxr-nav);
}

/* Live = den publicerade versionen som konfiguratorn faktiskt använder.
   Subtil grön markering som matchar "Publicerad"-badgen. */
.wxr-version-list__item.is-live {
  background: var(--wxr-success-bg);
  border-left-color: var(--wxr-accent);
}

/* Kolumn 1: versionsnummer. Fast bredd + gap (20px) ger luft till badge-kolumnen. */
.wxr-version-list__no {
  flex: 0 0 auto;
  width: 38px;
  font-size: 15px;
  font-weight: 700;
  color: var(--wxr-text);
}

/* Kolumn 2: badges (+ publicera/byt-aktiv) på rad 1, sublabel vänsterställd på
   rad 2. Växer och äter upp resterande utrymme så datum + ikoner trycks ut. */
.wxr-version-list__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wxr-version-list__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sublabel linjerar med badge-kolumnen (vänsterställd, ingen indrag). */
.wxr-version-list__sublabel {
  font-size: 12px;
  color: var(--wxr-text-muted);
}

/* Kolumn 3: datum — fast bredd + högerställt så datumen linjerar mellan rader. */
.wxr-version-list__meta {
  flex: 0 0 auto;
  min-width: 132px;
  text-align: right;
  font-size: 12px;
  color: var(--wxr-text-muted);
  white-space: nowrap;
}

/* ── Read-only-banner ──────────────────────────────────────────────
   Visas högst upp på editor-sidor (Regler, Layout, Basartiklar, Preview)
   när admin tittar på en publicerad version. Tydlig visuell signal +
   förklaring av att inget kan sparas. */
.wxr-readonly-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--wxr-nav-light);
  border: 1px solid var(--wxr-info-border-soft);
  border-radius: 6px;
  color: var(--wxr-nav);
  font-size: 13px;
  font-weight: 500;
}

.wxr-readonly-banner i {
  font-size: 16px;
  flex: 0 0 auto;
}

/* ── WxrSlideOutPanel — återanvändbar slide-out från höger ──────────
   Backdrop fångar utklick. Panel kommer in med slide-in animation.
   Header med titel + X-stäng, body är scrollbar, footer är valfri. */
.wxr-slideout__backdrop {
  position: fixed;
  inset: 0;
  background: var(--wxr-scrim);
  z-index: 90;
  animation: wxr-slideout-fade-in 0.18s ease;
}

.wxr-slideout__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  background: var(--wxr-surface);
  box-shadow: var(--wxr-shadow-panel-left);
  display: flex;
  flex-direction: column;
  animation: wxr-slideout-slide-in 0.22s ease;
}

@keyframes wxr-slideout-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wxr-slideout-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.wxr-slideout__header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--wxr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.wxr-slideout__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--wxr-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wxr-slideout__close {
  background: transparent;
  border: none;
  color: var(--wxr-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease;
}

.wxr-slideout__close:hover {
  background: var(--wxr-border);
}

.wxr-slideout__body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

/* Panelfoten bär panelens huvudåtgärder och följer därför samma regel som
   .wxr-dialog__footer: högerställda, 8px mellan, primäråtgärden längst ut.
   Utan flex/gap föll knapparna tillbaka på whitespace mellan inline-flex-
   element, vilket gav olika mellanrum beroende på var Razor råkade emittera
   blanksteg. */
.wxr-slideout__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--wxr-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Sekundära åtgärder längst till vänster, commit längst till höger.
   Klassiskt dialogmönster, och det som gör att en fot med flera knappar går att
   läsa: mellanrummet SÄGER att det är två sorters åtgärd. Utan grupperingen
   hamnar arkivera, byt ut och spara i en rad där allt ser lika viktigt ut, och
   då blir den med störst räckvidd lika tyst som den med minst.

   Samma tanke som den medvetna luften framför en Danger-knapp i toolbaren
   (.wxr-toolbar-text-actions .wxr-action-btn--danger). */
.wxr-slideout__footer-secondary {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wxr-version-list__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}


/* Bas-badge för version-list. Liten chip med ikon + text. Modifiers nedan
   ger semantisk färg (aktiv, publicerad, utkast). */
.wxr-version-list__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-right: 6px;
  white-space: nowrap;
}

.wxr-version-list__badge i {
  font-size: 11px;
  line-height: 1;
}

/* Aktiv = wxr-nav (blå) solid. Den enda versionen som faktiskt används
   live i konfigurationer — bär den starkaste visuella vikten. */
.wxr-version-list__badge--active {
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
}

/* Publicerad = accent (grön) tint. Versionen är frusen och valbar som
   aktiv men inte nödvändigtvis vald just nu. */
.wxr-version-list__badge--published {
  background: var(--wxr-success-bg);
  color: var(--wxr-success-strong);
  border: 1px solid var(--wxr-success-border);
}

/* Tidigare publicerad = dämpad grön kontur. Har varit live men ersatts av en
   nyare version. Fortfarande låst för redigering, därför inte "Utkast". */
.wxr-version-list__badge--superseded {
  background: transparent;
  color: var(--wxr-success-strong);
  border: 1px dashed var(--wxr-success-border);
}

/* Utkast = grå subtle. Ännu inte publicerad — editerbar via penn-ikonen. */
.wxr-version-list__badge--draft {
  background: var(--wxr-border);
  color: var(--wxr-text-muted);
  border: 1px solid var(--wxr-border-em);
}

/* Liten outline-knapp för "Byt aktiv version" / "Avmarkera aktiv".
   Discret kontur som inte konkurrerar med toolbar-actions, men tydligt
   klickbar. Använder wxr-nav (blå) som hover-färg. */
.wxr-version-list__set-active-btn {
  background: transparent;
  border: 1px solid var(--wxr-border-em);
  color: var(--wxr-text-muted);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.wxr-version-list__set-active-btn:hover:not(:disabled) {
  background: var(--wxr-nav-light);
  border-color: var(--wxr-nav);
  color: var(--wxr-nav);
}

.wxr-version-list__set-active-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── PAGE HEADING ──
   Eyebrow + h1 ger entiteten identitet ("Modell 1") och kontext för aktuell
   vy ("CPQ-modell · Beskrivning"). Eyebrow är liten och muted; h1 bär namnet. */
.wxr-page-heading__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wxr-text-hint);
  margin: 0 0 4px;
}

/* Märkning bredvid namnet, t.ex. versionschippet. Baslinjen är rubrikens, men märket ska
   inte ärva dess storlek eller vikt: det hör till det man ser på, inte till rubriken. */
.wxr-page-heading__suffix {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  vertical-align: middle;
  font-size: var(--wxr-f-sm);
  font-weight: 400;
}

/* ── Text som redigeras på plats (WxrInlineTextEdit) ──
   Visningen ärver typografin från sin plats (rubrik eller underrubrik). I
   redigeringsläge byts den mot ett VANLIGT fält: samma .form-control som WxrTextInput
   och WxrTextArea, i brödtextstorlek, med spara/avbryt som ikonknappar. Ett fält i
   rubrikstorlek såg inte ut som något annat i systemet. */
.wxr-inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.wxr-inline-edit.is-editing {
  font-size: var(--wxr-f-base);
  font-weight: 400;
  letter-spacing: normal;
  vertical-align: middle;
}

.wxr-inline-edit--multiline {
  align-items: flex-start;
  width: 100%;
}

.wxr-inline-edit__text--placeholder {
  color: var(--wxr-text-hint);
  font-style: italic;
}

.wxr-inline-edit__pen {
  color: var(--wxr-text-muted);
}

/* Fältet tar den bredd texten behöver, inte hela raden: rubriken står kvar där
   den stod. Flerradigt får fälla ut till formulärets bredd. */
.wxr-inline-edit__input.form-control {
  width: auto;
  min-width: 260px;
}

.wxr-inline-edit--multiline .wxr-inline-edit__input.form-control {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  resize: vertical;
}

.wxr-inline-edit__save {
  color: var(--wxr-accent);
}

/* ── Kapad text med "läs mer" på samma rad (WxrReadMoreText) ── */

/* Bara texten bevarar radbrytningar. Länken ligger utanför, så markupens egen
   radbrytning mellan dem kollapsar i stället för att bli en riktig radbrytning. */
.wxr-read-more__text {
  white-space: pre-line;
}

/* Utfällt: vanligt inline-flöde, så länken hamnar efter SISTA raden. En flexrad hade
   linjerat den mot den första. */
.wxr-read-more {
  display: inline;
}

/* Hopfällt: en rad, resten klipps med ellips och länken står kvar bredvid. flex + min-width
   0 är det som låter texten krympa i stället för att trycka ut länken. */
.wxr-read-more.is-collapsed {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
}

.wxr-read-more.is-collapsed .wxr-read-more__text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* nowrap slår över pre-line: en radbrytning i texten blir ett blanksteg på raden. */
  white-space: nowrap;
}

.wxr-read-more.is-collapsed .wxr-read-more__toggle {
  flex: 0 0 auto;
}

.wxr-read-more__toggle {
  background: none;
  border: 0;
  padding: 0;
  /* Avståndet till texten sitter här och inte i markupen: ett blanktecken mellan två
     element försvinner när Razor trimmar, och då stod det "…Visa mindre". */
  margin: 0 0 0 0.35em;
  font: inherit;
  color: var(--wxr-nav);
  cursor: pointer;
  white-space: nowrap;
}

.wxr-read-more__toggle:hover {
  text-decoration: underline;
}

.wxr-page-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--wxr-text);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding: 0;
}

.wxr-page-heading:focus,
.wxr-page-heading h1:focus { outline: none; }

/* Egen marginal i stället för Bootstraps 1rem: rubriken har redan 16px ner till
   underrubriken, och lika mycket under den igen blev ett hål före innehållet. */
.wxr-page-header__subtitle {
  margin-bottom: 8px;
}

/* ── FORM GRID ── */
.wxr-form-grid {
  display: grid;
  gap: var(--wxr-form-grid-gap);
  grid-template-columns: repeat(2, 1fr);
  /* Cap formulär-griden så listboxar/textboxar inte sträcker sig 100% på wide
     screens. ~920px ger ca 450px per kolumn — tillräckligt för att rymma
     längre värden (URL, GUID, sökord) utan att klippa, men inte så brett
     att fältet känns "tomt" och svårt att skanna. Kort behåller full
     bredd — det är bara interna fält som cap:as.

     Måttet ligger i en variabel eftersom kontroller UTANFÖR griden ska kunna
     linjera med den (rollsidans behörighetssökning). Två hårdkodade 920 hade
     glidit isär första gången någon justerade den ena. */
  max-width: var(--wxr-form-grid-max);
}

/* Utility: ett fält som ska spänna över BÅDA kolumnerna i en .wxr-form-grid.
   Behövs sällan — textareor auto-spannar redan (se .wxr-field--textarea nedan).
   Använd den här för andra fälttyper som behöver full bredd, t.ex. en bred
   WxrSelect med långa optioner:
       <div class="wxr-form-grid__full-row"><WxrSelect ... /></div>  */
.wxr-form-grid__full-row {
  grid-column: 1 / -1;
  min-width: 0;
}

/* WxrTextArea auto-spänner full bredd i alla .wxr-form-grid-varianter (2-col, 4-col).
   Det är default-beteendet — textareor är fleråriga och ser tunna ut i en kolumn.
   Sätts av WxrTextArea själv på sin WxrField-wrapper, så sidor behöver inte tänka
   på layouten: lägg bara <WxrTextArea> i samma .wxr-form-grid som dina andra fält
   och den hamnar automatiskt på egen rad med full bredd. */
.wxr-form-grid > .wxr-field--textarea {
  grid-column: 1 / -1;
  min-width: 0;
}

.wxr-field--textarea textarea.form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Utility: spänner 2 kolumner inom en form-grid. I 4-col-grid blir det
   halvbredd, i 2-col-grid full bredd. Använd för medellånga fält (dropdown
   med textetiketter, datum-intervall) som inte ryms i en enda 4-col-cell. */
.wxr-form-grid__span-2 {
  grid-column: span 2;
  min-width: 0;
}

/*
 * 4-kolumns-variant: för cards med många KORTA fält (mått, vikt, koordinater,
 * priser m.m.) där 2-kolumns-griden ger mycket vit yta. Varje kolumn blir
 * ~220px på max-bredd vilket är gott och väl för nummer-/kort-textfält.
 * Kollapsar till 2 kolumner under 1200px, 1 kolumn under 768px.
 *
 *   <div class="wxr-form-grid wxr-form-grid--4col">
 *       <WxrNumberField Label="Vikt (kg)" ... />
 *       <WxrNumberField Label="Volym (m³)" ... />
 *       <WxrNumberField Label="Längd (mm)" ... />
 *       <WxrNumberField Label="Bredd (mm)" ... />
 *   </div>
 */
.wxr-form-grid.wxr-form-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Reflow-trappa: 4 → 3 → 2 → 1 kolumner allt eftersom skärmen krymper.
   Brytpunkterna är medvetet generösa eftersom card-bodyn delar yta med
   sidoraden av cards när skärmen är bred (delvis-split på 1200px+).
   Vid 1500px räcker inte 4 kolumner åt 200px-input längre — då går vi till 3.
   Sidans page-split (1200px) flippar oberoende — när cards stackas vertikalt
   får varje card hela bredden tillbaka. */
@media (max-width: 1499.98px) {
  .wxr-form-grid.wxr-form-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1199.98px) {
  .wxr-form-grid.wxr-form-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .wxr-form-grid.wxr-form-grid--4col {
    grid-template-columns: 1fr;
  }
}

/* Default 2-col-griden går till 1 kolumn på riktigt smala skärmar så fält
   inte blir så squashade att de blir oanvändbara (telefon-portrait). */
@media (max-width: 599.98px) {
  .wxr-form-grid {
    grid-template-columns: 1fr;
  }
}

/* full-row utility fungerar likadant i 4-col som i 2-col tack vare -1-syntaxen. */

/* (Spacing-regeln för .wxr-checkbox finns på .wxr-checkbox själva — 10px margin-top.) */

/*
 * Single-column stack: same grid + .wxr-field label/control rhythm as .wxr-form-grid,
 * but one full-width field per row (modals, narrow panels, future stacked forms).
 * Slightly larger vertical gap than the default 16px row gap so stacked fields breathe more.
 */
.wxr-form-grid.wxr-form-grid--1col {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 22px;
  /* Snävare cap för 1-col eftersom enskilda fält inte ska sträcka sig
     hela 800px. Detta är typiskt dialoger/narrow panels. */
  max-width: 600px;
}

/* Utility för smala fält (datum, nummer, korta koder). Sätts på själva
   <WxrField>-wrappern eller direkt på input-elementet om en komponent
   inte använder Wxr-wrappern. Kapar BÅDE wrapper-bredden (så grid-cellen
   inte ser tom ut) OCH själva input-elementet — på så vis blir Prioritet/
   Sortering/etc. inte sträckta över hela kolumn-bredden. */
.wxr-field--narrow {
  max-width: 220px;
}

.wxr-form-grid.wxr-form-grid--1col > * {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

.wxr-form-grid.wxr-form-grid--1col .wxr-field {
  min-width: 0;
  max-width: 100%;
}

.wxr-form-grid.wxr-form-grid--1col .form-control,
.wxr-form-grid.wxr-form-grid--1col .form-select,
.wxr-form-grid.wxr-form-grid--1col textarea.form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Narrow-overrides MÅSTE komma EFTER .wxr-form-grid--1col-blocket — annars
   vinner 1col-reglerna källkods-ordning och numeriska fält blir bredsträckta.
   Detta är default-utseendet för Prioritet/Sortering oavsett grid-typ. */
.wxr-form-grid .wxr-field--narrow,
.wxr-form-grid--1col .wxr-field--narrow {
  max-width: 220px;
  min-width: 0;
}

/* Tidigare var det här `width: auto` vilket gjorde att <input> föll tillbaka
   till sin default-storlek (~180px). Det fick numeriska fält att stoppa
   reflow under 180px och 4:e/3:e kolumnen i en grid klippes utanför skärmen.
   Nu fyller fältet sin grid-cell (med 220px-cap) och kan krympa fritt. */
.wxr-form-grid .wxr-field--narrow .form-control,
.wxr-form-grid .wxr-field--narrow .form-select,
.wxr-form-grid--1col .wxr-field--narrow .form-control,
.wxr-form-grid--1col .wxr-field--narrow .form-select {
  width: 100%;
  max-width: 220px;
  min-width: 0;
}

/* Grid-cells måste själva kunna krympa under sin min-content — annars
   blockerar inputens default-bredd hela kolumnen. */
.wxr-form-grid > *,
.wxr-form-grid--1col > * {
  min-width: 0;
}

.wxr-field { display: flex; flex-direction: column; gap: var(--wxr-field-label-gap); }

/* Knappfält (CPQ:s BUTTON-input): en knapp ska vara så bred som sin text, inte
   sträckas till cellens bredd som ett inmatningsfält gör via flex-defaulten
   align-items: stretch. */
.wxr-field--button { align-items: flex-start; }

/* En knapp i sidans innehåll står i en layout-kolumn vars bredd etiketten inte
   känner till, så nowrap (som är rätt i toolbaren) gör att en lång etikett växer
   ut över grannkolumnen. Här bryter den rad i stället och stannar i cellen.
   height: auto låter knappen växa; min-height från grund- respektive lg-regeln
   håller kvar 30/38px för en enradig etikett. */
.wxr-field--button .wxr-action-btn {
  max-width: 100%;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
  /* <button> centrerar text i browserns standardstil, vilket ser godtyckligt ut
     när etiketten går över flera rader bredvid en ikon i vänsterkant. */
  text-align: left;
}

.wxr-field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wxr-field__label-row > .wxr-label,
.wxr-field__label-row > .wxr-checkbox { flex: 0 0 auto; width: auto; }

.wxr-field__label-row > .wxr-help-tooltip { margin-left: 0 !important; }

/* Labels — något lättare än 700; en daglig användare ska inte
   "skrikas på" av varje fältrubrik. */
.wxr-label {
  font-size: var(--wxr-f-label);
  font-weight: 600;
  color: var(--wxr-text-muted);
  letter-spacing: 0.01em;
}

.wxr-label__required { color: var(--wxr-danger); margin-left: 2px; opacity: 0.85; }
.wxr-help { font-size: 11px; color: var(--wxr-text-hint); line-height: 1.45; }

.wxr-help-tooltip {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--wxr-border-em);
  border-radius: 50%;
  background: var(--wxr-surface-secondary);
  color: var(--wxr-text-hint);
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
}

/* ── Rik hjälp-popover (WxrHelp med ChildContent): stycken, bilder, listor ── */
.wxr-help-rich {
  position: relative;
  display: inline-flex;
}

.wxr-help-rich .wxr-help-tooltip {
  cursor: pointer;
}

/* Genomskinlig heltäckande yta som fångar klick utanför popovern. */
.wxr-help-rich__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
}

.wxr-help-rich__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1051;
  width: 360px;
  max-width: min(360px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  /* Hindra att scroll "läcker" till WxrPageBody bakom modalen när popovern
     scrollas till kanten (scroll-chaining). */
  overscroll-behavior: contain;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border-em);
  border-radius: 8px;
  box-shadow: var(--wxr-shadow-lg);
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wxr-text);
  cursor: default;
}

.wxr-help-rich__title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

.wxr-help-rich__body > :first-child { margin-top: 0; }
.wxr-help-rich__body > :last-child { margin-bottom: 0; }
.wxr-help-rich__body p { margin: 0 0 8px; }
.wxr-help-rich__body ul,
.wxr-help-rich__body ol { margin: 0 0 8px; padding-left: 18px; }
.wxr-help-rich__body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 6px 0;
}
.wxr-help-rich__body code {
  background: var(--wxr-surface-secondary);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* Funktionsreferens i hjälp-popovern: grupprubrik, signatur, beskrivning, exempel. */
.wxr-func-ref__group {
  font-weight: 700;
  color: var(--wxr-nav);
  margin: 12px 0 5px;
}
.wxr-func-ref__group:first-of-type { margin-top: 4px; }

.wxr-func-ref__item { margin-bottom: 7px; }
.wxr-func-ref__desc { display: block; margin-top: 2px; }
.wxr-func-ref__ex { margin-top: 1px; }
.wxr-func-ref__ex code {
  background: transparent;
  padding: 0;
  color: var(--wxr-text-hint);
}
.wxr-func-ref__note {
  margin-top: 12px;
  font-style: italic;
  color: var(--wxr-text-hint);
}

.wxr-checkbox {
  /* Rutans storlek är en token i :root: --wxr-checkbox-size.

     position: relative anchors the visually-hidden absolute <input> to the label
     itself. Without this the input is positioned relative to the viewport, and
     clicking the slide control triggers an erratic auto-scroll because the
     browser tries to scroll the input "into view" using meaningless coordinates. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Låter hela kontrollen krympa i en smal grid-cell; se .wxr-checkbox__label. */
  min-width: 0;
  max-width: 100%;
  color: var(--wxr-text);
  font-size: var(--wxr-f-sm);
  cursor: pointer;
  user-select: none;
  /* Default andrum mot syskon (TextArea etc.) — Magnus instruktion: alltid 10px. */
  margin-top: 10px;
}

.wxr-checkbox input {
  /* Visually hide the native checkbox while keeping it focusable for keyboard / a11y.
     position: absolute + top/left anchor to the parent .wxr-checkbox (which is
     position: relative). The 1×1 clipped size keeps the element from intercepting
     pointer events or affecting layout. Critically, top:0 + left:0 + a positioned
     parent prevents browser auto-scroll-into-view from jumping the page. */
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.wxr-checkbox__label {
  line-height: 1.4;
  /* Etiketten är ett flex-item och kan annars inte krympa under sitt längsta ord
     ("Vänsterskåp?"). I en smal layout-kolumn växte den då ut över nästa kolumn
     i stället för att bryta rad. Reglerna är verkningslösa när det finns plats. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.wxr-checkbox--square .wxr-checkbox__control {
  width: var(--wxr-checkbox-size);
  height: var(--wxr-checkbox-size);
  border-radius: 4px;
  border: 1px solid var(--wxr-border-em);
  background: var(--wxr-surface);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--wxr-header-bg) 4%, transparent);
  transition: background 0.16s ease, border-color 0.16s ease;
  position: relative;
}

.wxr-checkbox--square input:checked + .wxr-checkbox__control {
  background: var(--wxr-nav-solid);
  border-color: var(--wxr-nav);
}

/* Bocken är andelar av rutan, inte pixlar. Andelarna är tagna ur den gamla 16px-rutan
   (4/16, 8/16, 2/16), så utseendet är oförändrat vid 16 och skalar rätt därifrån.

   Centreringen görs med left/top 50% plus en translate i procent av bockens EGEN storlek,
   alltså också skalande. De extra 12,5 procenten uppåt är optiska: en bock som roterats
   45° bär sin tyngd nedtill och läser som för lågt placerad om dess bounding box
   centreras rakt av. Samma 1px-lyft som handräkningen gav vid 16px. */
.wxr-checkbox--square input:checked + .wxr-checkbox__control::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--wxr-checkbox-size) * 0.25);
  height: calc(var(--wxr-checkbox-size) * 0.5);
  border: solid var(--wxr-text-on-color);
  border-width: 0 calc(var(--wxr-checkbox-size) * 0.125) calc(var(--wxr-checkbox-size) * 0.125) 0;
  transform: translate(-50%, -62.5%) rotate(45deg);
}

.wxr-checkbox--slide .wxr-checkbox__control {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--wxr-border-em);
  background: var(--wxr-border-em);
  transition: background 0.18s ease, border-color 0.18s ease;
  position: relative;
}

.wxr-checkbox--slide .wxr-checkbox__control::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wxr-surface);
  box-shadow: var(--wxr-shadow-sm);
  transition: transform 0.18s ease;
}

/* Kanten är fyllningens egen färg, inte --nav: i ljust läge är de samma tal, men i
   mörkt läge är --nav ljus och ritade en glödande ring runt den blå banan. */
.wxr-checkbox--slide input:checked + .wxr-checkbox__control {
  background: var(--wxr-nav-solid);
  border-color: var(--wxr-nav-solid);
}

/* Knoppen är kortets yta, alltså vit i ljust läge. I mörkt läge hade den blivit en mörk
   punkt på en mörk bana och ingen ser om växeln är på. Den får därför brödtextens ton,
   ljus men inte vit, och tappar skuggan som inte bär något mot mörk botten. */
:root[data-theme="dark"] .wxr-checkbox--slide .wxr-checkbox__control::after,
.wxr-app-shell--dark .wxr-checkbox--slide .wxr-checkbox__control::after {
  background: var(--wxr-text);
  box-shadow: none;
}

.wxr-checkbox--slide input:checked + .wxr-checkbox__control::after {
  transform: translateX(16px);
}

.wxr-checkbox input:focus-visible + .wxr-checkbox__control {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: 2px;
}

.wxr-checkbox input:disabled + .wxr-checkbox__control,
.wxr-checkbox input:disabled ~ .wxr-checkbox__label,
.wxr-checkbox input:disabled ~ .wxr-checkbox__text-stack {
  opacity: 0.55;
  cursor: not-allowed;
}

.wxr-field.wxr-field--checkbox-tile {
  gap: 0;
}

/* Rich checkbox (label + description), same hover affordance as role permission rows */
label.wxr-checkbox.wxr-checkbox--tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
}

label.wxr-checkbox.wxr-checkbox--tile:hover {
  background: var(--wxr-surface-secondary);
}

label.wxr-checkbox.wxr-checkbox--tile .wxr-checkbox__control {
  margin-top: 2px;
  flex-shrink: 0;
}

.wxr-checkbox__text-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

label.wxr-checkbox.wxr-checkbox--tile .wxr-checkbox__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--wxr-text);
  line-height: 1.3;
}

.wxr-checkbox__description {
  font-size: 12px;
  color: var(--wxr-text-hint);
  line-height: 1.3;
  font-weight: 400;
}

.wxr-role-permissions__items > .wxr-field {
  gap: 0;
}

.wxr-validation-message { font-size: 11px; color: var(--wxr-danger); margin-top: 0.25rem; }

/* ── FORM SECTION ── */
.wxr-form-section { margin-bottom: 24px; }

/* Sektionens innehåll stackar med SAMMA luft som raderna inuti en .wxr-form-grid.
   Utan det här låg två grid-syskon kant i kant: en etikett hamnade 0px under
   fältet ovanför medan den stod 6px från sitt eget, alltså närmare fel granne.
   Det är den återkommande "etikett och textbox för nära" som rapporterats flera
   gånger, och felet satt aldrig i etikettavståndet utan här. Ett formulär som
   delas i flera grid (en rad med två kolumner, sedan en med en) är det normala,
   inte undantaget. */
.wxr-form-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--wxr-form-grid-gap);
}

/* ── INLINE-PANEL (ett formulär som fälls ut inuti ett kort) ──────────────────
   Ytan som bär "lägg till"-formuläret under en lista i samma kort. Den låg förut
   som Bootstraps `card card-body bg-light border` på två sidor. `.bg-light` är
   `rgba(var(--bs-light-rgb))`, och --bs-light-rgb är en av de få --bs-variabler
   mörka temat INTE skriver om (det skriver om body, secondary, tertiary och
   border), så panelen stod kvar vit i mörkt läge med mörka fält i sig.

   Token i stället: samma yta som kortets sekundära bakgrund, alltså nedsänkt i
   ljust läge och upphöjd i mörkt, vilket är riktningen hela ytskalan har. */
.wxr-edit-panel {
  background: var(--wxr-surface-secondary);
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius-lg);
  padding: 16px;
}

/* ── WxrFieldGroup ───────────────────────────────────────────────────────────
   Nivån UNDER WxrFormSection: ett rubriksatt block inuti ett kort eller en
   upprepad rad. Sektionen är 11px versal med hårlinje tvärs hela bredden och
   22px luft; den skalan tål inte att staplas tre gånger i varje värderad.

   Hårlinjen sitter på gruppen och tas bort på den första i sin förälder, så
   staplade grupper separeras medan en ensam grupp står utan lös linje. Det är
   CSS och inte en parameter: ett val anroparen kan göra fel blir förr eller
   senare gjort fel. */
.wxr-field-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--wxr-border);
}

.wxr-field-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.wxr-field-group__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

/* Etikettstorlek, INTE basstorlek. Stegen finns redan: kortrubriken är 13px/600 i
   full textfärg och fältetiketten 12px/600 dämpad. Gruppen ligger mellan dem, så
   den delar fältetikettens storlek och vikt men får full textfärg — det är färgen
   som skiljer "namnet på blocket" från "namnet på ett fält i blocket".

   14px var fel: större än kortets egen rubrik, alltså en upp-och-nedvänd hierarki.
   400 hade varit fel åt andra hållet: blockets namn hade vägt lättare än namnen på
   fälten inuti det. Luften och hårlinjen bär skillnaden i stället för typsnittet. */
.wxr-field-group__title {
  font-size: var(--wxr-f-label);
  font-weight: 600;
  color: var(--wxr-text);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Ikonen är en dämpad markör, inte en åtgärd: blått hade lästs som en länk, och
   full textfärg hade tävlat med rubriken. En aning större än texten så den bär
   raden, men inte mer — en 15px-ikon torn över 12px text. */
.wxr-field-group__icon {
  font-size: 13px;
  line-height: 1;
  color: var(--wxr-text-hint);
}

.wxr-field-group__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Låst grupp: innehållet väntar på något användaren måste göra först. Hänglåset
   gör väntan till ett TILLSTÅND i stället för en lös mening — en kursiv grå rad
   utan symbol lästes som att blocket saknade funktion, inte som att det var låst. */
.wxr-field-group__locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--wxr-f-sm);
  color: var(--wxr-text-hint);
}

.wxr-field-group__locked > i {
  font-size: 13px;
  line-height: 1;
}

.wxr-form-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--wxr-text-hint);
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.wxr-form-section__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wxr-border);
  /* order så hårlinjen kan hamna före HeaderActions: pseudo-elementet är alltid
     sista barnet i DOM:en, men flex-order bestämmer den visuella ordningen. */
  order: 2;
}

/* Rubrik med markup i stället för etikett-text: basstorlek, ingen versalisering.
   Innehållet använder då vanliga primitiver (code.small, WxrBadge, text-muted). */
.wxr-form-section__title--rich {
  /* Storleken sätts längre ned, i regeln som matchar inuti .wxr-card__body — den är
     mer specifik och skulle annars vinna. Se kommentaren där. */
  font-size: var(--wxr-f-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--wxr-text);
  /* Tätare mot innehållet än etikettvarianten: rubriken hör ihop med tabellen
     under sig, inte med sektionen ovanför. */
  margin-bottom: 8px;
}

/* Bootstrap färgar <code> rosa (--bs-code-color). I en rubrik är det bara brus —
   dokumentnumret ska läsas som text, monospace räcker som signal. */
.wxr-form-section__title--rich code {
  color: inherit;
  font-size: inherit;
}

/* Åtgärder på rubrikraden (WxrFormSection HeaderActions). Ingen text-transform:
   rubriken versaliserar, men knappar och badges ska inte påverkas. */
.wxr-form-section__actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: normal;
}

/* Renderar HeaderActions-fragmentet inga knappar (alla åtgärder är villkorade bort)
   blir omslaget en tom flex-box. Den har ingen bredd, men rubrikradens gap på 10px
   läggs ändå till EFTER hårlinjen, så linjen slutade 10px från högerkanten.
   :has(*) matchar bara elementbarn, så whitespace från Razor räknas inte. */
.wxr-form-section__actions:not(:has(*)) {
  display: none;
}

/* Nested sections inside card body */
.wxr-card__body > .wxr-form-section {
  margin-bottom: 0;
  padding-bottom: 22px;
}

.wxr-card__body > .wxr-form-section + .wxr-form-section {
  padding-top: 22px;
}

/* Dynamiska egenskaper renderas som en TITELLÖS "fortsättnings-sektion" direkt
   efter de inbyggda fälten (t.ex. "Närmsta anhörig" under person-fälten). Den ska
   flöda ihop med sektionen ovan med samma lucka som mellan fält (16px), inte få
   den fulla 22+22px sektionsluckan som skiljer distinkta, rubriksatta sektioner. */
.wxr-card__body > .wxr-form-section:not(:has(> .wxr-form-section__title)) {
  padding-top: 0;
}
.wxr-card__body > .wxr-form-section:has(+ .wxr-form-section:not(:has(> .wxr-form-section__title))) {
  padding-bottom: 16px;
}

.wxr-card__body > .wxr-form-section .wxr-form-section__title {
  font-size: 11px;
  font-weight: 700;
}

/* Rubrik med markup är ingen etikett och ska inte krympas till 11px. Regeln ovan är
   mer specifik (tre klasser) än .wxr-form-section__title--rich (en), så storleken
   MÅSTE sättas här för att gälla i ett kort — annars vinner 11px tyst. */
.wxr-card__body > .wxr-form-section .wxr-form-section__title--rich {
  /* 13px, samma som kortets egen rubrik (.wxr-card__header) — rubriken bär innehåll
     men ska ligga i nivå med kortet den sitter i, inte konkurrera med det. */
  font-size: var(--wxr-f-sm);
}

/* ── COPY LINK ── */
.wxr-copy-link {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wxr-copy-link input,
.wxr-copy-link textarea {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--wxr-font-mono);
  font-size: 0.8rem;
}

/* Flerradigt: knapparna hamnar under fältet i stället för bredvid. */
.wxr-copy-link--block {
  align-items: flex-end;
}

/* ── DETALJLISTA (WxrDetailList) ─────────────────────────────────────────────
   Läsvyernas etikett/värde-lista. Rutnät och inte Bootstraps row/col: kolumnen ska
   vara lika bred i hela listan oavsett hur många rader som råkar renderas, och den
   ska falla till en kolumn när ytan är smal. */
.wxr-detail-list {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 6px 16px;
  margin: 0;
}

.wxr-detail-list__label {
  margin: 0;
  font-size: var(--wxr-f-sm);
  font-weight: 500;
  color: var(--wxr-text-muted);
}

.wxr-detail-list__value {
  margin: 0;
  font-size: var(--wxr-f-sm);
  color: var(--wxr-text);
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .wxr-detail-list { grid-template-columns: 1fr; gap: 2px; }
  .wxr-detail-list__value { margin-bottom: 8px; }
}

/* ── MENY (WxrMenu) ──────────────────────────────────────────────────────────
   Panelen ligger i TOPPLAGRET via popover och placeras av wxr-menu.js. Därför har
   den varken top/left eller z-index här: JS sätter koordinaterna, och topplagret
   ligger per definition över allt annat. Ingen :has()-regel behövs för att ta sig
   ur en grids overflow, vilket de handrullade menyerna krävde. */
.wxr-menu {
  display: inline-flex;
  position: relative;
}

.wxr-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--wxr-radius);
  background: transparent;
  color: var(--wxr-text-muted);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.wxr-menu__trigger:hover:not(:disabled),
.wxr-menu__trigger[aria-expanded="true"] {
  background: var(--wxr-surface-secondary);
  color: var(--wxr-text);
}

.wxr-menu__trigger:disabled { opacity: 0.5; cursor: default; }

.wxr-menu__trigger i { font-size: 16px; }

/* IKON PLUS PIL får inte plats i en kvadrat. 28 px rymmer inte 16 px ikon + 6 px gap +
   10 px pil, så flexen klämde ihop ikonen och den blev synligt mindre än
   ikonknapparna bredvid — samma knapp, olika stora tecken. Den här varianten är en
   REKTANGEL med flit: den bär två tecken och öppnar en lista, och den formen säger det
   innan man klickar. */
.wxr-menu__trigger--caret {
  width: auto;
  min-width: 42px;
  padding: 0 7px;
  gap: 4px;
}

/* Knappvarianten: trigger med etikett, samma mått som en vanlig sekundärknapp. */
.wxr-menu__trigger--button {
  width: auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--wxr-border);
  background: var(--wxr-surface);
  color: var(--wxr-text);
  font-size: 13px;
  font-weight: 500;
}

/* i-väljaren, inte bara klassen: .wxr-menu__trigger i ovan har specificitet (0,1,1) och
   .wxr-menu__caret bara (0,1,0), så den här regeln har ALDRIG gällt och varje caret i
   systemet har renderats 16px i stället för 10. Det syns tydligast i en trigger utan
   etikett, där en 16px fylld triangel bredvid en 16px ikon fyller hela knappen. */
i.wxr-menu__caret { font-size: 10px; }

/* Split-varianten: ikon och caret hålls ihop av en ram, så knappen läses som EN sak som
   öppnar en lista. Ikonknappen utan ram är för menyer som talar för sig själva. */
/* Profilknappen i topbaren bär namn plus initialcirkel och är alltså bredare än en
   ikonknapp. .wxr-topbar-profile står tidigare i filen och har samma specificitet, så
   28x28 ovan vann: knappen klämdes ihop och cirkeln hamnade utanför fönstret (den syntes
   inte alls på en smal skärm). Två klasser här, så regeln vinner oavsett ordning. */
.wxr-menu__trigger.wxr-topbar-profile {
  width: auto;
  height: auto;
  padding: 4px 6px;
}

/* Hovern likaså: ikonknappens .wxr-menu__trigger:hover målar en ljus yta ur den ljusa
   paletten, och på den mörka topbaren blev det en vit platta över namnet. Topbaren har
   en egen hover-ton. */
.wxr-menu__trigger.wxr-topbar-profile:hover:not(:disabled),
.wxr-menu__trigger.wxr-topbar-profile[aria-expanded="true"] {
  background: var(--wxr-header-hover);
  color: var(--wxr-header-text);
}

.wxr-menu__trigger--split {
  width: auto;
  padding: 0 6px;
  gap: 3px;
  border: 1px solid var(--wxr-border);
  background: var(--wxr-surface);
  color: var(--wxr-text);
}

.wxr-menu__panel {
  position: fixed;
  margin: 0;
  min-width: 240px;
  max-width: min(420px, 92vw);
  padding: 4px 0;
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  background: var(--wxr-surface);
  box-shadow: var(--wxr-shadow-lg);
  overflow-y: auto;
  /* Panelen är tom på padding i sidled: raderna bär sin egen, så en hover-yta går
     kant i kant med panelen. */
  color: var(--wxr-text);
}

/* Fallback för en webbläsare utan popover: panelen ligger kvar i flödet och kan
   klippas av en förälder, men den hamnar rätt och går att använda. */
.wxr-menu__panel:not(:popover-open):not(.is-open) { display: none; }
.wxr-menu__panel.is-open { display: block; z-index: 1050; }

.wxr-menu__header {
  padding: 8px 14px;
  background: var(--wxr-surface-secondary);
  border-bottom: 1px solid var(--wxr-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wxr-text-muted);
}

.wxr-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  text-align: left;
  text-decoration: none;
  color: var(--wxr-text);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.wxr-menu__item:hover:not(:disabled),
.wxr-menu__item:focus-visible {
  background: var(--wxr-surface-secondary);
  color: var(--wxr-text);
}

.wxr-menu__item:disabled { opacity: 0.5; cursor: default; }

.wxr-menu__item i { color: var(--wxr-text-muted); font-size: 14px; }

.wxr-menu__item--danger,
.wxr-menu__item--danger i { color: var(--wxr-danger); }

.wxr-menu__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-menu__group {
  padding: 8px 14px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wxr-text-hint);
}

.wxr-menu__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--wxr-border);
}

/* Spinner medan listan hämtas, och texten när den är tom. Samma rad som en menypost
   men utan hover: det går inte att välja något här. */
.wxr-menu__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--wxr-text-hint);
}

/* ── FORM MESSAGES ── */
.wxr-form-message {
  border-radius: var(--wxr-radius);
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 12px;
  padding: 10px 14px;
}

.wxr-form-message--error   { background: var(--wxr-danger-bg); border: 1px solid var(--wxr-danger-border-soft); color: var(--wxr-danger-text); }
.wxr-form-message--warning { background: var(--wxr-warning-bg-soft); border: 1px solid var(--wxr-warning-border-soft); color: var(--wxr-warning); }
.wxr-form-message--info    { background: var(--wxr-nav-light); border: 1px solid var(--wxr-info-border-soft); color: var(--wxr-info); }
.wxr-form-message--success { background: var(--wxr-success-bg); border: 1px solid var(--wxr-success-border); color: var(--wxr-success); }

.wxr-form-message__toggle {
  margin-top: 6px; padding: 0; border: none;
  background: transparent; color: inherit;
  text-decoration: underline; font-size: 12px; cursor: pointer;
}

.wxr-form-message__details {
  margin: 8px 0 0; padding: 8px; white-space: pre-wrap;
  word-break: break-word; border-radius: 3px;
  background: color-mix(in srgb, var(--wxr-header-bg) 4%, transparent);
}

/* ── BOOTSTRAP INPUT OVERRIDES ── */
.form-control:not(textarea),
.form-select {
  font-family: var(--wxr-font) !important;
  font-size: var(--wxr-f-base) !important;
  color: var(--wxr-text) !important;
  background-color: var(--wxr-surface-muted) !important;
  border: 1px solid var(--wxr-border-em) !important;
  border-radius: var(--wxr-radius) !important;
  height: var(--wxr-control-height);
  min-height: var(--wxr-control-height);
  padding: 0 14px !important;
  line-height: calc(var(--wxr-control-height) - 2px);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
  box-shadow: var(--wxr-shadow-xs) !important;
}

/* SLIMMAD LISTRUTA (WxrSelect Size="Small"). Samma axel som .wxr-action-btn--sm.
   Två klasser slår basens en, men basen sätter font-size, padding och radie med
   !important, så de tre måste bära det också.

   Pilen ritas om i samma svep: Bootstraps bakgrundsbild är placerad och skalad för
   full höjd, och 16px mitt i en 27px hög ruta ser ut som ett misstag. */
.wxr-select--sm.form-select {
  height: var(--wxr-control-height-sm);
  min-height: var(--wxr-control-height-sm);
  padding: 0 26px 0 9px !important;
  font-size: var(--wxr-f-sm) !important;
  line-height: calc(var(--wxr-control-height-sm) - 2px);
  background-position: right 8px center;
  background-size: 11px 8px;
}

/* PILEN I EN <select>. Bootstraps .form-select ritar den som en inbäddad SVG med ett fast
   mörkgrått streck (#343a40), och den följer inte --bs-variablerna vi mappar om: mot ett
   mörkt fält försvann pilen. 5.3 exponerar bilden som --bs-form-select-bg-img, men på
   .form-select SJÄLV och inte på :root, så den måste sättas om med minst samma
   specificitet härifrån. Strecket är --text-muted i mörkt läge. */
:root[data-theme="dark"] .form-select,
.wxr-app-shell--dark .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a5ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Bootstrap .form-control-sm / .form-select-sm — same height as standard in this design system */
.form-control:not(textarea).form-control-sm,
.form-select.form-select-sm {
  height: var(--wxr-control-height) !important;
  min-height: var(--wxr-control-height);
  padding: 0 14px !important;
  font-size: var(--wxr-f-base) !important;
  line-height: calc(var(--wxr-control-height) - 2px);
}

/* Textareas were excluded from the block above (:not(textarea)) — match input typography (14px). */
textarea.form-control {
  font-family: var(--wxr-font) !important;
  font-size: var(--wxr-f-base) !important;
  color: var(--wxr-text) !important;
}

.form-control:hover,
.form-select:hover {
  background-color: var(--wxr-card-header-bg) !important;
  border-color: var(--wxr-border-em) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--wxr-surface) !important;
  border-color: var(--wxr-nav) !important;
  box-shadow: 0 0 0 3px var(--wxr-focus-glow), var(--wxr-shadow-xs) !important;
  outline: none !important;
}

/* AVSTÄNGT OCH SKRIVSKYDDAT. Grundregeln ovan sätter bakgrunden med !important och slog
   därmed ut Bootstraps egen :disabled-bakgrund, så ett avstängt fält såg ut exakt som ett
   aktivt. Ett avstängt fält sjunker ett steg i ytskalan, tappar skuggan och får texten i
   --text-disabled, skalans fjärde steg som finns för just platshållare och avstängd text
   (medvetet under AA: ett avstängt värde ska synas men inte läsas som innehåll). Ett
   skrivskyddat sjunker lika mycket men behåller textfärgen: värdet ska läsas, bara inte
   ändras. Ingen hover på någondera, fältet svarar inte och ska inte se ut att göra det.
   Ligger EFTER hover-regeln med flit: samma specificitet, så ordningen avgör. */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--wxr-surface-secondary) !important;
  border-color: var(--wxr-border) !important;
  box-shadow: none !important;
}
.form-control:disabled,
.form-select:disabled {
  color: var(--wxr-text-disabled) !important;
  cursor: not-allowed;
}
.form-control[readonly] { cursor: default; }

/* is-invalid border — override av basstilens "border: !important" (specificitet vinner) */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.is-invalid:hover,
.form-select.is-invalid:hover {
  border-color: var(--wxr-danger) !important;
}

/* WxrDatePicker: röd ram på Telerik-inputen när värd-divens markerats ogiltig. */
.wxr-datepicker-host.is-invalid .k-input,
.wxr-datepicker-host.is-invalid .k-picker {
  border-color: var(--wxr-danger) !important;
}

/* Tydligare kontrast mellan placeholder och ifyllt värde — default Bootstrap
   gör placeholder för mörk så de blandas ihop. Använder muted-grå för
   placeholder och ärvd text-färg för faktiskt värde. */
.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
  color: var(--wxr-text-disabled) !important;     /* matt grå — tydlig skillnad mot --wxr-text */
  opacity: 1 !important;          /* Firefox default 0.54, normalisera */
  font-style: italic;
}

/* ── INPUT-GROUP BORDER-RADIUS FIX ──────────────────────────────────────
   Vårt globala .form-control-override sätter border-radius !important, vilket
   blockerar Bootstrap:s input-group från att plana ut inre hörn. Åsidosätter
   explicit med högre specificitet + !important. */
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── wxr-slide — inline-switch-wrapper ───────────────────────────────────
   Nollställer den form-standard-marginal (.wxr-checkbox { margin-top: 10px })
   så att WxrSwitch sitter vertikalt centrerat i flex-headers och toolbars.
   Användning: lägg wxr-slide på container-div:en runt WxrSwitch. */
.wxr-slide .wxr-field,
.wxr-slide .wxr-field__label-row {
  margin: 0;
}
.wxr-slide .wxr-checkbox {
  margin-top: 0;
}

/* ── CARD ──
   Premium SaaS: kort ska sitta i layouten, inte "lyfta" som popups.
   En enda subtil skugga, ingen gradient. */
.wxr-card {
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius-lg);
  overflow: hidden;
  margin-bottom: var(--wxr-card-gap);
  /* Tvålagsskugga (Tailwind/Vercel-stil) ger kortet kontrast mot page-bg
     utan att skrika. Tidigare 0.04-skuggan var för svag — kortet smälte
     ihop med --wxr-surface-tertiary (#F0F3F7) och såg "grått" ut. */
  box-shadow: var(--wxr-shadow-sm);
}

/* Plattare, kompaktare header — utan gradient.
   Subtil bakgrund för att visuellt separera från kortkroppen. */
.wxr-card__header {
  padding: var(--wxr-card-header-padding);
  background: var(--wxr-surface);
  border-bottom: 1px solid var(--wxr-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--wxr-f-sm);
  font-weight: 600;
  color: var(--wxr-text);
  letter-spacing: 0.005em;
  margin: 0;
}

/* Kortets EGEN rubrikikon (direkt barn). Knappar i HeaderActions har egna färger —
   utan direktbarn-selektorn grånade den här regeln även t.ex. en primärknapps
   vita ikon. */
.wxr-card__header > i { font-size: 14px; color: var(--wxr-text-hint); flex-shrink: 0; }
.wxr-card__body { padding: var(--wxr-card-body-padding); background: transparent; }
.wxr-card__header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* Hopfällbart kort (opt-in via WxrCard Collapsible). Hela headern är klickbar,
   chevronen är bara en visuell affordans med eget aria-läge. */
.wxr-card.is-collapsible > .wxr-card__header { cursor: pointer; user-select: none; }
.wxr-card.is-collapsible > .wxr-card__header:hover { background: var(--wxr-surface-secondary); }
.wxr-card.is-collapsed > .wxr-card__header { border-bottom: none; }

.wxr-card__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--wxr-radius);
  background: transparent;
  color: var(--wxr-text-hint);
  cursor: pointer;
}

.wxr-card__toggle:hover { background: var(--wxr-surface-tertiary); color: var(--wxr-text); }
.wxr-card__toggle i { font-size: 12px; color: inherit; }
.wxr-card__header-actions + .wxr-card__toggle { margin-left: 4px; }

.wxr-card__header--section {
  margin-top: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius);
}

/* ── LIST TABLE ──
   Standard tabell-styling för "lite-listor" där en full datagrid är overkill
   (t.ex. Personer-listan på företagssidan). Kompaktare fontstorlek än brödtext. */
.wxr-list-table {
  font-size: 13px;
}

.wxr-list-table th {
  font-weight: 600;
  color: var(--wxr-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* In-card-tabellernas rubriker (WxrCardTable). Samma 12px som listsidornas
   rubriker, men utan versalisering: card-tabeller har normal-case rubriker. */
.wxr-card-table > thead > tr > th {
  font-size: var(--wxr-f-label);
}

/* ── LIST-TOOLBAR ──
   Konsekvent toolbar ovanför "lite-listor" — knapp "Lägg till X" med avstånd. */
.wxr-list-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Mindre add-knapp inom list-toolbar (för att inte dominera) */
.wxr-list-toolbar .wxr-action-btn {
  font-size: 13px;
  padding: 4px 12px;
}

/* Wexer-badge bredvid personnamn — gott avstånd och mer subtil. */
.wxr-person-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--wxr-info);
  background: var(--wxr-nav-light);
  border: 1px solid var(--wxr-info-border-soft);
  border-radius: 4px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.wxr-list-table__actions-header {
  width: 1%;
  white-space: nowrap;
}

.wxr-list-table__actions {
  white-space: nowrap;
  text-align: right;
}

/* ── ICON BUTTON ──
   Standard ikon-action-knapp (penna, soptunna, kuvert, lås, ...) för
   tabellrader och grids. Alla ikoner i gridviews använder denna klass —
   28x28 box med 15px-glyf, box-sizing:border-box så storleken är konstant
   oavsett om border är synlig eller togs bort i en action-group. */
/* Färgrutan för egen färg i WxrColorSwatchPicker. Webbläsarens egen kontroll ritar en
   fyrkant med ram; reglerna nedan gör den till en cirkel som de andra swatcharna.
   Pipetten säger att den VÄLJER en färg i stället för att vara ännu en fast sådan. */
.wxr-swatch-row__custom-wrap {
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.wxr-swatch-row__custom-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--wxr-surface);
  color: var(--wxr-text);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wxr-shadow-xs);
  pointer-events: none;
}
.wxr-swatch-row__custom {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 0;
  background: none;
  cursor: pointer;
}
.wxr-swatch-row__custom::-webkit-color-swatch-wrapper { padding: 0; }
.wxr-swatch-row__custom::-webkit-color-swatch { border: none; border-radius: 50%; }
.wxr-swatch-row__custom::-moz-color-swatch { border: none; border-radius: 50%; }

.wxr-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wxr-text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  line-height: 1;
  transition: all 0.12s ease;
}

.wxr-icon-btn:hover {
  background: var(--wxr-surface-secondary);
  border-color: var(--wxr-border);
  color: var(--wxr-text);
}

/* Växlingsknapp som är på (IsActive): samma ton som ett valt läge i en segmentväljare. */
.wxr-icon-btn.is-active,
.wxr-icon-btn.is-active:hover {
  background: var(--wxr-accent-light);
  border-color: var(--wxr-accent);
  color: var(--wxr-accent);
}

.wxr-icon-btn--danger:hover {
  background: var(--wxr-danger-bg-strong);
  border-color: var(--wxr-danger-border);
  color: var(--wxr-danger-strong);
}

.wxr-icon-btn i {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── ACTION GROUP (visuellt hopslagna ikon-knappar) ──
   Wraps en serie wxr-icon-btn/wxr-menu i en sammanhängande grupp med
   en enda omsluten border-radius. Matchar Wengine 4-känslan där åtgärds-
   ikoner ser ut som "ett verktyg" snarare än fyra isolerade knappar.

   width:fit-content + inline-flex tillsammans (med dubbel-class-specificity)
   krockar med wxr-grid-row-actions som har display:flex+justify-content:flex-end.
   Vi vill att ramen sluter exakt vid sista knappen — aldrig sträcker sig
   ut till cellens högerkant.
*/
.wxr-action-group,
.wxr-grid-row-actions.wxr-action-group {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  flex: 0 0 auto;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}

/* Wrapper för flera fysiskt separata action-grupper på samma rad.
   Skiljer dem visuellt åt med gap. Används när olika knapp-flöden inte
   hör ihop logiskt (t.ex. offert/order/neka VS dokument-nedladdning). */
.wxr-row-actions-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

td > .wxr-row-actions-wrapper {
  margin-left: auto;
}

td:has(> .wxr-row-actions-wrapper) {
  text-align: right;
}

/* Fristående lås-indikator. INTE en knapp — visar bara att raden är låst.
   Samma 28x28 storlek + 15px-glyph som wxr-icon-btn, men utan border,
   hover-state eller cursor:pointer. Hör inte ihop med någon action-grupp. */
.wxr-lock-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  color: var(--wxr-text-muted);
  font-size: 15px;
  line-height: 1;
}

/* Högerställ action-gruppen i sin table-cell. text-align:right på TD:n
   funkar för inline-flex-element. På icke-tabell-containers används
   .wxr-action-group--right för samma effekt utan margin-hack. */
td > .wxr-action-group,
td > .wxr-grid-row-actions.wxr-action-group,
.wxr-action-group--right {
  margin-left: auto;
}

/* WxrPublishButton — liten accent-knapp (grön) i ungefär badge-storlek.
   Globe + etikett. Används för publicera-livscykel-actions och smälter in i
   badge-rader utan att dominera. */
.wxr-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--wxr-accent);
  border-radius: 5px;
  background: transparent;
  color: var(--wxr-accent-light-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.wxr-publish-btn:hover:not(:disabled) {
  background: var(--wxr-accent-solid);
  border-color: var(--wxr-accent);
  color: var(--wxr-text-on-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--wxr-accent) 25%, transparent);
}

.wxr-publish-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.wxr-publish-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wxr-publish-btn i {
  font-size: 12px;
  line-height: 1;
}

td:has(> .wxr-action-group),
td:has(> .wxr-grid-row-actions.wxr-action-group) {
  text-align: right;
}

.wxr-action-group > .wxr-icon-btn,
.wxr-action-group > .wxr-menu {
  margin-left: 0;
}

.wxr-action-group > .wxr-icon-btn {
  border: none;
  background: transparent;
}

/* Subtil divider mellan knappar i gruppen — ger struktur utan att skrika */
.wxr-action-group > .wxr-icon-btn + .wxr-icon-btn,
.wxr-action-group > .wxr-icon-btn + .wxr-menu,
.wxr-action-group > .wxr-menu + .wxr-icon-btn,
.wxr-action-group > .wxr-menu + .wxr-menu,
.wxr-action-group > .wxr-icon-btn__lock + .wxr-icon-btn,
.wxr-action-group > .wxr-icon-btn__lock + .wxr-menu,
.wxr-action-group > .wxr-icon-btn + .wxr-icon-btn__lock,
.wxr-action-group > .wxr-menu + .wxr-icon-btn__lock {
  position: relative;
}

.wxr-action-group > .wxr-icon-btn + .wxr-icon-btn::before,
.wxr-action-group > .wxr-icon-btn + .wxr-menu::before,
.wxr-action-group > .wxr-menu + .wxr-icon-btn::before,
.wxr-action-group > .wxr-menu + .wxr-menu::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--wxr-border);
  z-index: 0;
}

/* Inom gruppen: trigger-knappen i wxr-split-btn ska inte ha egen border —
   gruppen ger ramen istället. */
.wxr-action-group .wxr-menu__trigger {
  border: none;
  border-radius: 4px;
}

/* Lås-ikon (statisk indikator) inom action-gruppen får samma höjd
   som knapparna och samma muted-färg. */
.wxr-action-group .wxr-icon-btn__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--wxr-text-muted);
  font-size: 14px;
}

/* Telerik-celler har text-overflow: ellipsis som default. När en action-cell
   är smalare än kebab-knappens 28px + Kendos cellpadding (~24px) triggas
   ellipsis-tecknet (U+2026) och visas som tre små horisontella prickar
   bredvid kebab-knappen. Clip:a istället så knappen står ren oavsett bredd. */
.k-table-td:has(.wxr-menu) {
  text-overflow: clip;
}

/* Section header — gråtonad rubrik i menyn (t.ex. "Underprojekt"). */
/* Innehållet i projektlistans radmeny. Panelen och triggern är WxrMenu:s; det här är
   radernas egen markup, som inte är en platt lista av menyposter. */
.wxr-row-menu__section-header {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wxr-text-hint);
}

/* Item — klickbar rad i menyn. Ikon + label + valbar trailing-action. */
.wxr-row-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--wxr-text);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.wxr-row-menu__item:hover {
  background: var(--wxr-surface-secondary);
}

.wxr-row-menu__item-icon {
  color: var(--wxr-text-muted);
  font-size: 14px;
}

.wxr-row-menu__item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-row-menu__item-trailing {
  color: var(--wxr-nav);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.wxr-row-menu__item:hover .wxr-row-menu__item-trailing {
  background: var(--wxr-info-bg);
}

/* "Inline"-variant — item-label-knapp + action-knappar på samma rad.
   Subproject-rader i project row menu: vänster del navigerar (klick på
   namnet), höger del har pen/eye/copy/trash. */
.wxr-row-menu__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}

.wxr-row-menu__item--inline {
  flex: 1;
  min-width: 0;
}

.wxr-row-menu__row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.wxr-row-menu__icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wxr-text-muted);
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.wxr-row-menu__icon-btn:hover {
  background: var(--wxr-nav-light);
  color: var(--wxr-nav);
}

.wxr-row-menu__icon-btn--danger:hover {
  background: var(--wxr-danger-bg-strong);
  color: var(--wxr-danger-strong);
}

/* Danger-variant av item — för "ta bort hela projektet"-action när menyn
   är tom på subprojekt. */
.wxr-row-menu__item--danger {
  color: var(--wxr-danger-strong);
}

.wxr-row-menu__item--danger:hover {
  background: var(--wxr-danger-bg-strong);
}

.wxr-row-menu__item--danger .wxr-row-menu__item-icon {
  color: var(--wxr-danger-strong);
}

/* Skiljelinje mellan grupper av items i menyn. */
.wxr-row-menu__footer-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  background: var(--wxr-surface-muted);
  border: none;
  border-top: 1px solid var(--wxr-border);
  text-align: left;
  color: var(--wxr-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.wxr-row-menu__footer-action:hover {
  background: var(--wxr-surface-tertiary);
}

.wxr-row-menu__footer-action i {
  color: var(--wxr-text-muted);
  font-size: 14px;
}

/* ── AUDIT FOOTER ──
   Liten metadata-rad längst ner på edit-sidor (skapad/ändrad).
   Tidigare helt ostylad → krockade visuellt med formulärfält.
   Premium SaaS: lågmäld, högerställd, 12px, text-hint färg. */
.wxr-audit-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--wxr-border);
  font-size: 11px;
  color: var(--wxr-text-hint);
  line-height: 1.5;
  opacity: 0.75;
}

.wxr-audit-footer__item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.wxr-audit-footer__label {
  font-weight: 600;
  color: var(--wxr-text-muted);
}

/* ── PAGE MESSAGES ── */
.wxr-page-messages { margin-bottom: 16px; }

.wxr-page-messages__loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--wxr-radius);
  border: 1px solid var(--wxr-info-border-soft);
  background: var(--wxr-nav-light);
  color: var(--wxr-info);
  font-size: 13px;
  font-weight: 500;
}

/* ── SPINNER ── */
.wxr-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--wxr-nav) 15%, transparent);
  border-top-color: var(--wxr-nav);
  border-radius: 50%;
  animation: wxr-spin 0.7s linear infinite;
}

@keyframes wxr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── BUTTONS ──
   Platta knappar utan gradient. Subtila 1px-borders.
   Hover = bakgrundsshift, ingen rörelse (Linear/Stripe-stil). */
.wxr-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-family: var(--wxr-font);
  font-size: var(--wxr-f-sm);
  font-weight: 600;
  border-radius: var(--wxr-radius);
  border: 1px solid var(--wxr-border-em);
  background: var(--wxr-surface);
  color: var(--wxr-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

/* Knappar som bara navigerar renderas som <a> (Href på WxrActionButton/WxrAddButton/
   WxrIconButton) så mushjulsklick och "öppna i ny flik" fungerar. De ärver all
   knappstyling via klassen; bara länkarvet behöver nollas. */
a.wxr-action-btn,
a.wxr-add-btn,
a.wxr-icon-btn,
a.wxr-list-page-search__add,
a.wxr-step-nav-item,
a.wxr-tab-nav-item {
  text-decoration: none;
}

a.wxr-action-btn:hover,
a.wxr-add-btn:hover,
a.wxr-icon-btn:hover,
a.wxr-list-page-search__add:hover,
a.wxr-step-nav-item:hover,
a.wxr-tab-nav-item:hover {
  text-decoration: none;
}

/* .wxr-tab-nav-item saknar egen display och litar på <button>-defaulten för
   vertikal centrering. En <a> är inline och skulle tappa både höjd och
   centrering — sätt boxen explicit. */
a.wxr-tab-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.wxr-action-btn:hover {
  background: var(--wxr-surface-secondary);
  border-color: var(--wxr-border-em);
  color: var(--wxr-text);
}

.wxr-action-btn:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: 2px;
}

.wxr-action-btn i { font-size: 13px; }

/* Stor knapp (Size="Large"): för åtgärder som står i sidans innehåll, där ikonen bär
   betydelse och knappen inte ska se ut som en toolbar-knapp. Färg och ram är samma. */
/* SMALL: för åtgärder som hör till en panel inuti sidan. Fyra pixlar lägre och en
   textstorlek mindre än standardknappen, så panelens egen knapp inte läser som sidans.
   Storleken fanns inte förut, och Size="Small" föll tyst till Default. */
.wxr-action-btn--sm {
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  font-size: var(--wxr-f-label);
}

.wxr-action-btn--sm i { font-size: 12px; }

.wxr-action-btn--lg {
  height: 38px;
  min-height: 38px;
  padding: 0 16px;
  gap: 10px;
  font-size: var(--wxr-f-base);
}

.wxr-action-btn--lg i { font-size: 16px; }

/* Primärknapp = Wengine-grön (Save, primary actions).
   Wexer-blå används för navigation; grön är action-färgen i Wengine.
   Solid, ingen gradient. Subtil 1px-skugga i accent-färgen ger djup. */
.wxr-action-btn--primary {
  background: var(--wxr-accent-solid);
  color: var(--wxr-text-on-color);
  border-color: var(--wxr-accent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wxr-accent) 20%, transparent);
}

.wxr-action-btn--primary:hover {
  background: var(--wxr-accent-solid-hover);
  border-color: var(--wxr-accent-hover);
  color: var(--wxr-text-on-color);
}

/* Danger = red outline */
.wxr-action-btn--danger {
  color: var(--wxr-danger);
  border-color: var(--wxr-danger-border);
  background: var(--wxr-surface);
}

.wxr-action-btn--danger:hover { background: var(--wxr-danger-bg); }

/* Ta-bort-knappen i toolbar separeras ~20px från Avbryt/Cancel — så användaren
   inte råkar klicka fel. Containern har gap:6px och row-reverse, så margin-right
   på Danger-knappen (DOM-sist = visuellt längst till vänster) ger fysisk gap till
   närmsta granne (Cancel). 14 + 6 ≈ 20px. */
.wxr-toolbar-text-actions .wxr-action-btn--danger { margin-right: 14px; }

/* ── IMPERSONATION ──
   Banner högst upp + dropdown-knapp i profil när admin är "Visa som"-läget. */
.wxr-impersonation-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  /* Höjden är ett tal de flytande överlagringarna räknar med (--wxr-float-top).
     Golvet håller tokenet sant så länge raden inte bryts, vilket den inte gör
     över designens minsta bredd (1200px). Bryts den ligger toast och kundvagns-
     knapp en rad för högt — kosmetiskt, och bara i visa-som-läge. */
  min-height: var(--wxr-impersonation-banner-height);
  background: var(--wxr-orange-bg);          /* amber/lead — samma som prospect-badge */
  color: var(--wxr-orange);
  border-bottom: 1px solid var(--wxr-orange-border);
  font-size: 13px;
  font-weight: 500;
}
.wxr-impersonation-banner__text { flex: 1; }
.wxr-impersonation-banner__form { margin: 0; }
.wxr-impersonation-banner__stop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--wxr-orange-solid);
  color: var(--wxr-orange);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.wxr-impersonation-banner__stop:hover { background: var(--wxr-warning-bg); }

/* <button>-items i profile-dropdown (impersonate-menyposterna) ser ut som <a>-items. */
.wxr-profile-dropdown__item[type="button"],
.wxr-profile-dropdown__form button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}
.wxr-profile-dropdown__form { margin: 0; }
.wxr-profile-dropdown__item--warning { color: var(--wxr-orange); }
.wxr-profile-dropdown__item--warning:hover { background: var(--wxr-orange-bg); }

/* Status-badge för Companies/projekt-status etc. Färgkodning matchar affärsregler:
   prospekt = lead (orange/amber), aktiv = kund (grön), inaktiv = avregistrerad (grå). */
/* wxr-status-badge — visuella egenskaper synkade med .wxr-badge så
   företagslistans status-badges ser identiska ut med projekt-/användarlistans.
   Färgvarianterna (prospect/active/inactive) speglar samma palett som
   .wxr-badge--warning/success/secondary. */
.wxr-status-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  /* Token och inte 11px: ett hårdkodat tal följer inte kompaktläget, så märket var det enda
     i raden som inte krympte. --wxr-f-xs är 11px normalt och 10px kompakt, alltså oförändrat
     för den som inte valt tätare. Höjden står kvar på 22px med flit: den sätter radhöjden i
     gridet, och att krympa den är en mätning för sig. */
  font-size: var(--wxr-f-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--wxr-surface-tertiary);
  color: var(--wxr-text-muted);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.wxr-status-badge--prospect {
  background: var(--wxr-orange-bg);
  color: var(--wxr-orange);
  border-color: var(--wxr-orange-border);
}

.wxr-status-badge--active {
  background: var(--wxr-success-bg);
  color: var(--wxr-success);
  border-color: var(--wxr-success-border);
}

.wxr-status-badge--inactive {
  background: var(--wxr-surface-tertiary);
  color: var(--wxr-text-hint);
  border-color: var(--wxr-border);
}

/* ── TAB CARD ──
   Bootstrap-card med nav-tabs i header. Justering så att den känns hemma i Wxr-temat
   och inte sticker ut mot den ljust gråa app-bakgrunden. */
.wxr-tab-card {
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius);
  background: var(--wxr-surface);
  box-shadow: var(--wxr-shadow-xs);
}

.wxr-tab-card__header {
  background: var(--wxr-surface);
  border-bottom: 1px solid var(--wxr-border);
  padding: 8px 16px 0;
}

.wxr-tab-card__header .nav-tabs {
  border-bottom: none;
  margin-bottom: -1px;
}

.wxr-tab-card__body {
  padding: 20px;
}

/* ── TAB STYLING ──
   Linjen bär läget, inte texten. Den aktiva fliken har vanlig textfärg och ett
   2 px navblått streck under sig; den inaktiva har hint-färg och inget streck.
   Tidigare stod den aktiva i navblå text i vikt 600 inne i Bootstraps flikruta,
   och det blocket blå läste som det tyngsta på hela panelen, tyngre än sidans
   egen spara-knapp. Blått står kvar som "var man är", men som en linje: samma
   sak som sidomenyns aktiva markör, och samma form som Pipedrive och Material.

   Bootstraps egen ram och vita platta på .nav-link.active nollas här; utan det
   hade strecket suttit inne i en ruta med tre kanter. */
.wxr-tabs .nav-link {
  color: var(--wxr-text-hint);
  font-weight: 500;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  /* Strecket ska ligga PÅ listans kantlinje, inte ovanför den. */
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.wxr-tabs .nav-link:hover:not(.active):not(.disabled) {
  color: var(--wxr-text);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--wxr-border-em);
}

.wxr-tabs .nav-link.active {
  color: var(--wxr-text);
  font-weight: 600;
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--wxr-nav);
}

.wxr-tabs .nav-link.disabled {
  color: var(--wxr-text-muted);
  opacity: 0.6;
}

/* ── SETTINGS PAGE ──
   Tabell för fält-/adresstyp-synlighet. Smala radio-kolumner, vänsterställd label. */
.wxr-settings-table th,
.wxr-settings-table td {
  vertical-align: middle;
}

.wxr-settings-table__radio {
  width: 90px;
  text-align: center;
}

.wxr-settings-table__radio input[type="radio"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  accent-color: var(--wxr-nav);
}

.wxr-settings-table td .wxr-checkbox {
  margin-top: 0;
}

.wxr-settings-table__label {
  font-weight: 500;
  margin-right: 8px;
}

/* Checkboxar i tabellceller (Inställningar → Adresstyper → Flera):
   wxr-field är flex-column, text-align:center centrerar inte block-element.
   align-items:center på kolumn-flexen + justify-content:center på rad-flexen
   ger samma centrering som de native radio-knapparna bredvid. */
.wxr-settings-table td .wxr-field {
  align-items: center;
  margin: 0;
}
.wxr-settings-table td .wxr-field__label-row {
  justify-content: center;
}
.wxr-settings-table td .wxr-checkbox__control {
  border-color: var(--wxr-border-strong); /* matchar visuell vikt hos de native radio-cirklarna */
}

/* Accent = outline brand green. Sekundär action i samma färgfamilj som Primary.
   Tydligt klickbar utan att konkurrera med Primary-knappens vikt. */
.wxr-action-btn--accent {
  color: var(--wxr-accent);
  border-color: var(--wxr-accent);
  background: transparent;
}

.wxr-action-btn--accent:hover {
  background: var(--wxr-accent-light);
  color: var(--wxr-accent-hover);
  border-color: var(--wxr-accent-hover);
}

/* Tonade kategori-variants — samma palett som WxrBadge så att en
   action-knapp som adderar ett item av en viss typ "speglar" badge-färgen
   för samma typ. Subtila bakgrunder gör att de inte konkurrerar med
   Primary/Accent. */
.wxr-action-btn--success   { background: var(--wxr-success-bg-strong);  border-color: var(--wxr-success-border-strong);  color: var(--wxr-success-strong); }
.wxr-action-btn--success:hover   { background: var(--wxr-success-border);  border-color: var(--wxr-success-border-hover);  color: var(--wxr-success); }

.wxr-action-btn--warning   { background: var(--wxr-warning-bg);  border-color: var(--wxr-warning-border);  color: var(--wxr-warning); }
.wxr-action-btn--warning:hover   { background: var(--wxr-warning-border-soft);  border-color: var(--wxr-warning-border-hover);  color: var(--wxr-warning-strong); }

.wxr-action-btn--info      { background: var(--wxr-info-bg);  border-color: var(--wxr-info-border);  color: var(--wxr-info); }
.wxr-action-btn--info:hover      { background: var(--wxr-info-border-soft);  border-color: var(--wxr-info-border-hover);  color: var(--wxr-info); }

.wxr-action-btn--purple    { background: var(--wxr-purple-bg);  border-color: var(--wxr-purple-border);  color: var(--wxr-purple); }
.wxr-action-btn--purple:hover    { background: var(--wxr-purple-border-soft);  border-color: var(--wxr-purple-border-hover);  color: var(--wxr-purple-strong); }

.wxr-action-btn--secondary { background: var(--wxr-surface-secondary);  border-color: var(--wxr-border-em);  color: var(--wxr-text-muted); }
.wxr-action-btn--secondary:hover { background: var(--wxr-border);  border-color: var(--wxr-border-strong);  color: var(--wxr-text); }

/* ──────────────────────────────────────────────────────────────────────
   WxrSplitButton — standardåtgärd + pil till övriga val

   Två element som ska läsas som ETT. Pilen bär huvudknappens variantklasser och
   ärver därmed all färg; här ligger bara geometrin. Reglerna står efter
   .wxr-menu__trigger i filen med flit: triggern sätter 28px bredd och ingen ram,
   och de måste kunna skrivas över utan !important.
   ────────────────────────────────────────────────────────────────────── */
.wxr-split-btn {
  display: inline-flex;
  align-items: stretch;
}

/* Huvudknappen tappar hörnen mot pilen. */
.wxr-split-btn > .wxr-action-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wxr-split-btn > .wxr-menu {
  display: inline-flex;
}

.wxr-split-btn__toggle {
  /* 28 och inte 26: en nästan kvadratisk ruta bredvid en 30px hög knapp ser klämd ut,
     och pilen fick inte luft omkring sig. */
  width: 28px;
  min-width: 28px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  gap: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* Delad kantlinje: utan den blir det en 2px-söm mitt i knappen. */
  margin-left: -1px;
}

/* Pilen är liten med flit. Den ska läsas som ett tillägg till knappen, inte som
   en egen ikon som konkurrerar med huvudåtgärdens. Chevronen är tunn, så den tål
   11px där den fyllda triangeln såg tung ut redan vid 10. */
.wxr-split-btn__toggle i {
  /* 12 och inte 11: en tunn chevron i accentgrönt på vitt tappar färgen när den är
     för liten, och då ser halvorna ut att ha olika kulör fast de delar token. */
  font-size: 12px;
  /* Bootstrap-ikonernas glyf sitter någon pixel under mitten i en liten ruta. */
  line-height: 1;
}

/* Öppen meny håller pilen nedtryckt, så det syns vilken knapp panelen hör till.
   Varianterna sätter sin egen hover-bakgrund, så bara ramen behöver markeras. */
.wxr-split-btn__toggle[aria-expanded="true"] {
  border-color: currentColor;
}

/* Hela knappen tonas ned tillsammans när den är inaktiverad. */
.wxr-split-btn__toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ──────────────────────────────────────────────────────────────────────
   WxrAddButton — standardiserade "Lägg till"-knappar
   Tre nivåer i Wexer-blå-familjen för tydlig hierarki.
   ────────────────────────────────────────────────────────────────────── */
.wxr-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--wxr-radius);
    font-family: var(--wxr-font);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.wxr-add-btn i { font-size: 14px; line-height: 1; }
.wxr-add-btn:focus-visible {
    outline: 2px solid var(--wxr-focus-ring);
    outline-offset: 2px;
}

.wxr-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* FullWidth — stretchar knappen till hela parent-bredden. Används för
   toppnivå-container-add som "Lägg till villkorsgrupp". */
.wxr-add-btn--full {
    width: 100%;
}

/* Level=Page — solid Wexer-blå, vit text. Använd sparsamt: sidans lägg-till är
   normalt WxrListPageSearch.ShowAddButton, och Level="Page" sitter i dag på ett
   enda ställe (tomvyn i CpqInputsListPage, där ingen verktygsrad finns).

   Höjden var 38px med motiveringen att den matchade Bootstraps form-control.
   Den motiveringen gäller inte längre: fälten i det här designsystemet är
   --wxr-control-height (34px), inte Bootstraps default. 38px gjorde knappen till
   den enda i hela knappfamiljen som var högre än en kontroll, och den stack ut
   mot allt den ställdes bredvid. */
.wxr-add-btn--page {
    height: var(--wxr-control-height);
    padding: 0 16px;
    font-size: var(--wxr-f-sm);
    background: var(--wxr-nav-solid);
    color: var(--wxr-text-on-color);
    border-color: var(--wxr-nav);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--wxr-nav) 20%, transparent);
}

.wxr-add-btn--page:hover:not(:disabled) {
    background: var(--wxr-nav-solid-hover);
    border-color: var(--wxr-nav-hover);
    color: var(--wxr-text-on-color);
}

/* Level=Section — tint-bg + blå text/border. Default-nivå för "Lägg till X"
   inom en sida när det inte är inline. 32px — något lägre än inputs (38px) för en
   mindre tung knapp; sitter normalt fristående (kort-huvud/ovanför tabell), inte
   inline med inputs. */
.wxr-add-btn--section {
    height: 32px;
    padding: 0 14px;
    font-size: var(--wxr-f-sm);
    background: var(--wxr-nav-light);
    color: var(--wxr-nav);
    border-color: var(--wxr-info-border-soft);
}

.wxr-add-btn--section:hover:not(:disabled) {
    background: var(--wxr-info-bg);
    border-color: var(--wxr-nav);
    color: var(--wxr-nav);
}

/* Level=Inline — subtle blå text/ikon på transparent bg, tint på hover.
   För sub-add inuti grupper/sub-listor, ex. "Lägg till villkor". 34px ger
   vertikal balans mot 38px-inputs men signalerar mindre prominens. */
.wxr-add-btn--inline {
    height: 34px;
    padding: 0 10px;
    font-size: var(--wxr-f-sm);
    background: transparent;
    color: var(--wxr-nav);
    border-color: transparent;
}

.wxr-add-btn--inline:hover:not(:disabled) {
    background: var(--wxr-nav-light);
    color: var(--wxr-nav);
    border-color: transparent;
}

/* Spinner-stil för IsLoading=true — samma som wxr-action-btn__spinner men
   med add-btn:s currentColor så det matchar text-färgen per level. */
.wxr-add-btn__spinner {
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, var(--wxr-header-bg) 15%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wxr-add-btn-spin 0.7s linear infinite;
}

@keyframes wxr-add-btn-spin {
    to { transform: rotate(360deg); }
}

/* Gammal .wxr-icon-btn-definition togs bort härifrån — den hade height:32px
   och font-size:16px vilket override:ade den nya definitionen på rad ~1342
   (28px / 14px) pga senare i CSS-cascade. Resulterade i att icon-btn såg
   större ut än split-btn i action-grupperna. Behåller .wxr-sec-btn nedan
   eftersom den är fortsatt unik. */

.wxr-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font-family: var(--wxr-font);
  font-size: var(--wxr-f-sm);
  font-weight: 700;
  color: var(--wxr-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--wxr-radius);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.wxr-sec-btn:hover { background: var(--wxr-surface); border-color: var(--wxr-border); color: var(--wxr-text); }
.wxr-sec-btn i { font-size: 13px; }

.wxr-action-btn:disabled,
.wxr-icon-btn:disabled,
.wxr-sec-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.wxr-action-btn__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--wxr-header-faint);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wxr-spin 0.7s linear infinite;
}

/* ── SECONDARY TOOLBAR ── */
.wxr-page-toolbar-secondary {
  flex-shrink: 0;
  height: var(--wxr-toolbar-secondary-height);
  background: var(--wxr-surface-secondary);
  border-bottom: 1px solid var(--wxr-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 2px;
}

.wxr-page-toolbar-secondary__content { display: flex; align-items: center; width: 100%; }
.wxr-page-toolbar-secondary.is-hidden { visibility: hidden; }

/* ── TAB NAV (free-style pills) ── */
.wxr-tab-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.wxr-tab-nav::-webkit-scrollbar { display: none; }

.wxr-tab-nav-item {
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  font-family: var(--wxr-font);
  font-size: var(--wxr-f-sm);
  font-weight: 700;
  color: var(--wxr-text-muted);
  background: transparent;
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.wxr-tab-nav-item:hover { background: var(--wxr-surface-secondary); color: var(--wxr-text); border-color: var(--wxr-border-em); }
.wxr-tab-nav-item.is-active { background: var(--wxr-nav-solid); color: var(--wxr-text-on-color); border-color: var(--wxr-nav); }

/* ── STEP NAV ──
   Pill-tabs för flik-/wizard-navigering i toolbaren.
   Ingen egen "track"-linje: nav:en är innehållsbred, så en underline under
   raden slutar mitt i toolbaren och läser som ett avklippt streck i stället
   för en kant. Toolbaren har redan en genomgående border-bottom som skiljer
   den från sidkroppen — separationen finns alltså, och flikarna behöver bara
   markera vilken som är vald. Aktiv flik = mjuk brand-platta + brand-text,
   hover = neutral platta. */
.wxr-step-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.wxr-step-nav::-webkit-scrollbar { display: none; }

.wxr-step-nav-item {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: var(--wxr-radius);
  background: transparent;
  color: var(--wxr-text-muted);
  font-family: var(--wxr-font);
  font-size: var(--wxr-f-sm);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  clip-path: none;
  transition: color 0.12s ease, background 0.12s ease;
}

.wxr-step-nav-item:hover:not(.is-disabled):not(.is-active) {
  color: var(--wxr-text);
  background: var(--wxr-surface-secondary);
}

/* Done = dämpat tonas — användaren har varit där men är inte där nu. */
.wxr-step-nav-item.is-done {
  color: var(--wxr-text);
}

.wxr-step-nav-item.is-done .wxr-step-nav-item__check {
  color: var(--wxr-nav);
}

/* Active = mjuk brand-platta. Bär markeringen själv, utan baseline att vila i. */
.wxr-step-nav-item.is-active {
  color: var(--wxr-nav-light-text);
  background: var(--wxr-nav-light);
}

.wxr-step-nav-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wxr-step-nav-item__check {
  font-size: 13px;
  line-height: 1;
  color: var(--wxr-text-hint);
}

.wxr-step-nav-item__label {
  display: inline-block;
}

/* ── Project shell-nav: Produkter-dropdown ──────────────────────────────
   Återanvänder wxr-step-nav-item-styling för knappen, lägger till en
   dropdown-panel under och en backdrop som fångar utklick.

   OBS: .wxr-step-nav har overflow-x:auto → per CSS-spec blir overflow-y
   implicit auto, vilket annars klipper dropdown:en vertikalt 36px ner.
   Vi overrida overflow:visible specifikt på projekt-shell-nav-instansen
   eftersom den bara har 3 fasta items och inte behöver horisontell scroll. */
.wxr-project-shell-nav {
  overflow: visible;
}

.wxr-project-shell-nav__products {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.wxr-project-shell-nav__chevron {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
}

.wxr-project-shell-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: transparent;
}

.wxr-project-shell-nav__dropdown {
  /* Indrag per nivå i kategoriträdet. Styr både rubriker och modellrader. */
  --wxr-nav-step: 20px;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  /* 80% bredare än ursprungliga 240–360 så thumbnail + bredare textstycke får plats */
  min-width: 432px;
  max-width: 648px;
  z-index: 51;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  box-shadow: var(--wxr-shadow-md);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 70vh;
  overflow-y: auto;
}

/* Sökfält i produktmenyn (visas vid många modeller). */
.wxr-project-shell-nav__search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 2px;
  background: var(--wxr-surface);
  border-bottom: 1px solid var(--wxr-border);
}

.wxr-project-shell-nav__search > i { color: var(--wxr-text-disabled); font-size: 13px; }

.wxr-project-shell-nav__search input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: var(--wxr-f-sm);
  background: transparent;
  color: var(--wxr-text);
}

/* Kategori-rubrik i produktmenyn — klickbar för att fälla ut/ihop.
   --wxr-nav-depth sätts per rad och ger trädets indrag. */
.wxr-project-shell-nav__group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px 6px calc(10px + var(--wxr-nav-depth, 0) * var(--wxr-nav-step));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wxr-text-hint);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}

.wxr-project-shell-nav__group-header:hover { background-color: var(--wxr-surface-secondary); color: var(--wxr-text); }

.wxr-project-shell-nav__group-chevron { font-size: 10px; flex: 0 0 auto; }

.wxr-project-shell-nav__group-name { flex: 1; }

.wxr-project-shell-nav__group-count {
  flex: 0 0 auto;
  background: var(--wxr-surface-secondary);
  color: var(--wxr-text-hint);
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
}

/* Kategoribilden: 4:3-liggande, samma proportion som bildväljaren låser
   beskärningen till (CpqProductCategoryListPage), så det man beskar är det som
   visas. Var en 20 px kvadrat, och då klippte cover bort kanterna på en bild som
   nyss beskurits till 4:3. */
.wxr-project-shell-nav__group-header img {
  width: 28px;
  height: 21px;
  border-radius: 4px;
  object-fit: cover;
}

/* Underkategori: gemener och tunnare färg så nivåerna går att skilja på. */
.wxr-project-shell-nav__group-header--child {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wxr-f-sm);
  font-weight: 600;
  color: var(--wxr-text-muted);
}

.wxr-project-shell-nav__empty {
  padding: 14px 12px;
  color: var(--wxr-text-muted);
  font-size: var(--wxr-f-sm);
  text-align: center;
}

/* Två-kolumns-layout: thumbnail (liggande, 3:2) till vänster + text-stack
   till höger. align-items:flex-start så texten startar topp-justerad med
   bilden istället för att centrera vertikalt. */
.wxr-project-shell-nav__dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  color: var(--wxr-text);
  font-size: var(--wxr-f-sm);
  line-height: 1.35;
}

.wxr-project-shell-nav__dropdown-item:hover {
  background-color: var(--wxr-nav-light);
  color: var(--wxr-nav);
}

.wxr-project-shell-nav__dropdown-item--grouped {
  padding-left: calc(10px + var(--wxr-nav-depth, 0) * var(--wxr-nav-step));
}

/* Hjälplinjer: en lodrät linje per nivå ovanför raden, ritad som bakgrund så
   att listan kan vara platt utan nästlade containrar. Antalet linjer följer
   --wxr-nav-depth, och hover-färgen ligger kvar under dem. */
.wxr-project-shell-nav__group-header,
.wxr-project-shell-nav__dropdown-item--grouped {
  background-image: repeating-linear-gradient(
    to right,
    var(--wxr-border) 0 1px,
    transparent 1px var(--wxr-nav-step));
  background-repeat: no-repeat;
  background-position: 15px 0;
  background-size: calc(var(--wxr-nav-depth, 0) * var(--wxr-nav-step)) 100%;
}

/* Produktbilden: 4:3-liggande, samma proportion som bildväljaren låser beskärningen
   till (CpqModelEditDescriptionPage), så det man beskar är det som visas. */
.wxr-project-shell-nav__dropdown-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;        /* 4:3-liggande */
  background: var(--wxr-surface-secondary);
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wxr-text-hint);
  font-size: 20px;
}

.wxr-project-shell-nav__dropdown-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wxr-project-shell-nav__dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.wxr-project-shell-nav__dropdown-name {
  font-size: var(--wxr-f-base);
  font-weight: 600;
  line-height: 1.3;
}

.wxr-project-shell-nav__dropdown-desc {
  font-size: var(--wxr-f-sm);
  color: var(--wxr-text-muted);
  line-height: 1.35;
}

/* ── TOAST ── */
.wxr-toast-host {
  position: fixed;
  /* Följer sidans faktiska överkant och väjer för kundvagnen bara när den
     finns — se --wxr-float-top / --wxr-float-right i tokenblocket. */
  top: var(--wxr-float-top);
  right: var(--wxr-float-right);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 360px;
  max-width: 360px;
}

.wxr-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--wxr-radius);
  border: 1px solid var(--wxr-border);
  background: var(--wxr-surface);
  box-shadow: var(--wxr-shadow-md);
  font-size: 13px;
}

.wxr-toast--success { background: var(--wxr-success-bg); border-color: var(--wxr-success-border); color: var(--wxr-success); }
.wxr-toast--warning { background: var(--wxr-warning-bg-soft); border-color: var(--wxr-warning-border-soft); color: var(--wxr-warning); }
.wxr-toast--error   { background: var(--wxr-danger-bg); border-color: var(--wxr-danger-border-soft); color: var(--wxr-danger-text); }
.wxr-toast--info    { background: var(--wxr-nav-light); border-color: var(--wxr-info-border-soft); color: var(--wxr-info); }

.wxr-toast__content { flex: 1; min-width: 0; }
.wxr-toast__message { font-weight: 700; font-size: 13px; }

/* "Läs mer/Visa mindre"-länk-knapp. Plain text-style — vi vill inte ha en
   knapp-grafik som tävlar med stäng-X. Cursor:pointer + underline-on-hover
   signalerar att det är klickbart. */
.wxr-toast__toggle {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}
.wxr-toast__toggle:hover { opacity: 1; }

/* Detalj-blocket — monospaced så stack-traces och SQL-fel håller indentation.
   max-height + scroll så långa exception-kedjor inte spränger viewporten. */
.wxr-toast__detail {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  background: color-mix(in srgb, var(--wxr-header-bg) 6%, transparent);
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0.95;
}

.wxr-toast__close {
  border: none; background: transparent; color: inherit;
  font-size: 17px; line-height: 1; cursor: pointer;
  padding: 0; opacity: 0.50; transition: opacity 0.12s;
  align-self: flex-start;
}
.wxr-toast__close:hover { opacity: 1; }

/* ── DIALOG ── */
.wxr-dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--wxr-scrim);
  z-index: 1050;
  display: flex;
  /* Scrollbar overlay: en dialog som är högre än skärmen kan scrollas, och
     toppen är alltid nåbar (margin:auto på dialogen centrerar när det finns
     plats men klipper inte toppen vid overflow — till skillnad från
     align-items:center). overscroll-behavior hindrar att scrollen läcker ut. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  /* Override parent max-width-regler (t.ex. .wxr-page-body--simple > *) som
     annars klipper overlay till content-bredden och centrerar dialogen i
     "vänster halvan" av viewporten. Dialog ska alltid täcka hela viewport. */
  max-width: none !important;
  width: 100vw;
}

.wxr-dialog {
  background: var(--wxr-surface);
  border-radius: var(--wxr-radius);
  box-shadow: var(--wxr-shadow-xl);
  width: 440px;
  max-width: calc(100vw - 48px);
  /* Centrerar i overlayn (flex) när det finns plats; vid hög dialog absorberar
     auto-marginalen kvarvarande utrymme utan att klippa toppen. */
  margin: auto;
}

.wxr-dialog__header { padding: 22px 24px 0; display: flex; align-items: center; gap: 10px; }
.wxr-dialog__title  { font-size: 15px; font-weight: 700; color: var(--wxr-text); margin: 0; }

/* Valfri header-ikon (WxrDialog HeaderIcon). Färg följer overlay-severity. */
.wxr-dialog__header-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; color: var(--wxr-nav); }
.wxr-dialog-overlay--warning .wxr-dialog__header-icon { color: var(--wxr-orange-solid); }
.wxr-dialog-overlay--danger  .wxr-dialog__header-icon { color: var(--wxr-danger); }
.wxr-dialog-overlay--success .wxr-dialog__header-icon { color: var(--wxr-accent); }

.wxr-dialog__body {
  padding: 12px 24px 20px;
  font-size: 14px;
  color: var(--wxr-text-muted);
  line-height: 1.55;
}

/* Tillägget under meddelandet i en confirm-dialog (en kryssruta som hör till just den
   bekräftelsen). Marginalen ligger på BARNET och inte på wrappern: ChildContent från
   markup är aldrig null i Blazor, så wrappern renderas även när innehållet är ett
   @if som inte slog till — en marginal där hade gett en glipa i varje dialog utan
   tillägg. */
.wxr-dialog__extra > * {
    margin-top: 14px;
}

/* Inline-error inuti confirm-dialog. Visas under huvudmeddelandet utan att
   stänga dialogen, så användaren ser felet och kan välja avbryta eller försöka igen. */
.wxr-dialog__inline-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--wxr-danger-bg);
  border: 1px solid var(--wxr-danger-border-soft);
  border-radius: 6px;
  color: var(--wxr-danger-text);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.wxr-dialog__inline-error > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--wxr-danger);
}

.wxr-dialog__inline-error-detail {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--wxr-surface) 50%, transparent);
  border: 1px solid var(--wxr-danger-border-soft);
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
  color: var(--wxr-danger-text);
}

.wxr-dialog__inline-error-list {
  margin: 6px 0 0;
  padding-left: 18px;
  max-height: 200px;
  overflow: auto;
}

.wxr-dialog__inline-error-list > li {
  margin: 2px 0;
}

.wxr-dialog__footer {
  padding: 14px 24px;
  border-top: 1px solid var(--wxr-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── FILER PÅ ETT OBJEKT (WxrMediaAttachments) ──
   En rad per fil: ikon, namn som länk, storlek, kryss. Samma form oavsett ägartyp. */
.wxr-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Filerna FLÖDAR som brickor i stället för att var och en ta hela bredden: fem filer
   på en rad i stället för fem rader, och en bricka är det man känner igen som "en
   fil" från operativsystemet. */
.wxr-attachments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wxr-attachments__row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius-lg);
  background: var(--wxr-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.wxr-attachments__row:hover {
  border-color: var(--wxr-border-em);
  box-shadow: var(--wxr-shadow-xs);
}

/* Större ikon än radens text: filen är radens ärende, och en ikon i textstorlek
   försvann bland namnen. */
.wxr-attachments__icon {
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  color: var(--wxr-text-hint);
  font-size: 18px;
  line-height: 1;
}

.wxr-attachments__row:hover .wxr-attachments__icon { color: var(--wxr-link); }

.wxr-attachments__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--wxr-f-sm);
  color: var(--wxr-link);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-attachments__name:hover { text-decoration: underline; }

.wxr-attachments__meta {
  flex: 0 0 auto;
  font-size: var(--wxr-f-label);
  color: var(--wxr-text-hint);
  font-variant-numeric: tabular-nums;
}

.wxr-attachments__empty {
  margin: 0;
  font-size: var(--wxr-f-label);
  color: var(--wxr-text-hint);
}

.wxr-attachments__error {
  margin: 0;
  font-size: var(--wxr-f-label);
  color: var(--wxr-danger-text);
}

/* ── FILTERKNAPP MED KRYSSRUTOR (WxrFilterDropdown) ──
   Triggern bär .form-select och ser därför ut EXAKT som en vanlig listbox: samma ram,
   radie, höjd, bakgrund och pil. Här står bara det som skiljer en knapp från ett
   select-element: vänsterställd text, fast bredd och avkortning.

   Fast bredd med flit: en knapp som växer med det valda namnet flyttar allt annat i
   toolbaren varje gång man byter filter. */
.wxr-filter-dropdown__trigger.wxr-menu__trigger--button.form-select {
  width: 220px;
  min-width: 220px;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
  cursor: pointer;
  /* Knappvarianten är halvfet; en listbox är det inte. */
  font-weight: 400;
  /* Pilen måste sättas här: .wxr-menu__trigger har background: transparent som
     KORTFORM, och den nollar bakgrundsbilden .form-select ritar pilen med. Samma
     data-URI och samma placering som Bootstraps select, så de två ser lika ut. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 11px !important;
  padding-right: 34px !important;
}

/* Samma pil i mörkt läge, av samma skäl som .form-select ovan; !important eftersom
   regeln ovanför sätter sin med !important. */
:root[data-theme="dark"] .wxr-filter-dropdown__trigger.wxr-menu__trigger--button.form-select,
.wxr-app-shell--dark .wxr-filter-dropdown__trigger.wxr-menu__trigger--button.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a5ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.wxr-filter-dropdown__trigger .wxr-menu__trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-filter-dropdown__panel {
  min-width: 260px;
  max-width: 340px;
}

.wxr-filter-dropdown__search {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--wxr-border);
}

.wxr-filter-dropdown__search i {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--wxr-text-muted);
  pointer-events: none;
  z-index: 1;
}

.wxr-filter-dropdown__search .form-control { padding-left: 32px !important; }

.wxr-filter-dropdown__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Raden är bara en träffyta runt systemets kryssruta: hela bredden ska gå att klicka,
   och etiketten kortas i stället för att radbryta. */
.wxr-filter-dropdown__row {
  padding: 5px 12px;
}

.wxr-filter-dropdown__row:hover { background: var(--wxr-surface-secondary); }
.wxr-filter-dropdown__row .wxr-checkbox { width: 100%; margin: 0; }
.wxr-filter-dropdown__row .wxr-checkbox__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-filter-dropdown__row.is-group .wxr-checkbox__label { font-weight: 600; }

.wxr-filter-dropdown__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--wxr-border);
}

.wxr-filter-dropdown__empty {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  color: var(--wxr-text-muted);
}

.wxr-filter-dropdown__footer {
  border-top: 1px solid var(--wxr-border);
  padding: 6px 8px;
}

.wxr-filter-dropdown__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--wxr-text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--wxr-radius);
}

.wxr-filter-dropdown__clear:hover { background: var(--wxr-surface-secondary); color: var(--wxr-text); }

/* ── FÖRLOPPSDIALOG (WxrProgressDialog) ──
   Två lägen i samma ruta: pågår (spinner + obestämd stapel) och klart (ikon + text).
   Stapeln är obestämd med flit — utskicket rapporterar ingen procent. */
.wxr-progress-dialog__busy,
.wxr-progress-dialog__result {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wxr-progress-dialog__text {
  margin: 0;
  font-size: 14px;
  color: var(--wxr-text);
}

.wxr-progress-dialog__detail {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--wxr-text-muted);
  word-break: break-word;
}

.wxr-progress-dialog__result i {
  font-size: 20px;
  line-height: 1;
}

.wxr-progress-dialog__result.is-ok i { color: var(--wxr-success-strong); }
.wxr-progress-dialog__result.is-error i { color: var(--wxr-danger-strong); }
.wxr-progress-dialog__result.is-error .wxr-progress-dialog__text { color: var(--wxr-danger-text); }

.wxr-progress-dialog__track {
  height: 6px;
  margin-top: 14px;
  background: var(--wxr-surface-secondary);
  border-radius: 999px;
  overflow: hidden;
}

/* Stapeln KRYPER: från en tredjedel mot nästan fullt medan anropet pågår, och slutar
   där. Utskicket rapporterar ingen procent, så den sista biten finns inte att visa —
   rutan byter till resultatläget i stället när svaret kommer. En stapel som glider fram
   och tillbaka läses som "hänger sig", och en som står på 100 procent ljuger. */
.wxr-progress-dialog__bar {
  height: 100%;
  width: 8%;
  border-radius: 999px;
  background: var(--wxr-nav);
  animation: wxr-progress-creep 12s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}

@keyframes wxr-progress-creep {
  0%   { width: 8%; }
  35%  { width: 55%; }
  100% { width: 92%; }
}

/* Respektera systemets rörelseinställning: stapeln står still på en bit av vägen. Full
   bredd hade sagt "klart" om något som fortfarande pågår. */
@media (prefers-reduced-motion: reduce) {
  .wxr-progress-dialog__bar { animation: none; width: 40%; }
}

/* Bestämd stapel (Percent satt): bredden är förloppet, ingen krypande animation. Ligger
   efter reduced-motion-regeln så att den inte skrivs över till 40 %. */
.wxr-progress-dialog__bar--determinate {
  animation: none;
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .wxr-progress-dialog__bar--determinate { transition: none; }
}
.wxr-progress-dialog__percent {
  margin: 6px 0 0;
  font-size: var(--wxr-f-sm);
  color: var(--wxr-text-muted);
  text-align: right;
}

/* ── Osparade ändringar-dialog ──
   Avbryt ("Stanna kvar") förankrad vänster, besluten grupperade höger med
   primäråtgärden ("Spara och lämna") längst ut. */
.wxr-dialog--unsaved .wxr-dialog__footer {
  justify-content: space-between;
  align-items: center;
}

.wxr-unsaved__actions {
  display: inline-flex;
  gap: 8px;
}

.wxr-unsaved__intro  { margin: 0 0 8px; color: var(--wxr-text); font-size: 14px; }
.wxr-unsaved__outro  { margin: 0; color: var(--wxr-text-muted); font-size: 12.5px; }

/* ── MISC ── */
/* nowrap — ikonerna ska aldrig hamna ovanpå varandra. När cell-utrymmet
   är för litet ska tabellen scrolla horisontellt istället (.table-responsive). */
.wxr-grid-row-actions    { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; justify-content: flex-end; }

/* ── LIST SEARCH BAR (shared) ── */
.wxr-list-search-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.wxr-list-search-bar__primary {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: var(--wxr-control-height);
  min-height: var(--wxr-control-height);
  max-height: var(--wxr-control-height);
  box-sizing: border-box;
}

.wxr-list-search-bar__input-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: var(--wxr-control-height);
  min-height: var(--wxr-control-height);
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius-lg);
  background: var(--wxr-surface);
  overflow: hidden;
  min-width: 0;
}

.wxr-list-search-bar__leading-icon {
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0 8px 0 10px;
  color: var(--wxr-text-hint);
  font-size: 14px;
}

.wxr-list-search-bar__input-wrap .wxr-field {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wxr-list-search-bar__input-wrap .wxr-field__label-row {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wxr-list-search-bar__input-wrap input.wxr-list-search-bar__input-control {
  width: 100%;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1.25;
  min-width: 0;
  padding: 0 10px 0 0 !important;
  background: transparent;
  color: var(--wxr-text);
}

.wxr-list-search-bar__input-wrap input.wxr-list-search-bar__input-control::placeholder {
  color: var(--wxr-text-hint);
}

.wxr-list-search-bar__input-wrap input.wxr-list-search-bar__input-control::-webkit-search-decoration,
.wxr-list-search-bar__input-wrap input.wxr-list-search-bar__input-control::-webkit-search-cancel-button,
.wxr-list-search-bar__input-wrap input.wxr-list-search-bar__input-control::-webkit-search-results-button,
.wxr-list-search-bar__input-wrap input.wxr-list-search-bar__input-control::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.wxr-list-search-bar__btn.btn,
button.wxr-list-search-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--wxr-control-height) !important;
  min-height: var(--wxr-control-height) !important;
  max-height: var(--wxr-control-height) !important;
  padding: 0 10px !important;
  font-size: 12px;
  line-height: 1;
  border-radius: var(--wxr-radius-lg);
  flex-shrink: 0;
  box-sizing: border-box;
}

.wxr-list-search-bar__toggle {
  align-self: flex-start;
  border: none;
  background: none;
  color: var(--wxr-nav);
  font: inherit;
  font-size: var(--wxr-f-sm);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.wxr-list-search-bar__toggle:hover {
  color: var(--wxr-nav-hover);
}

.wxr-list-search-bar__advanced {
  padding: 12px 14px;
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius-lg);
  background: var(--wxr-surface-secondary);
}

.wxr-list-search-bar__advanced .form-label {
  margin-bottom: 4px;
}

/* ── LIST PAGE LAYOUT (shared) ── */
.wxr-list-page,
.wxr-company-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  gap: 0;
}

/* Flödesvariant: sidor som staplar FLERA kort (t.ex. mallistan grupperad per
   dokumenttyp). Basens flex:1 + min-height:0 låser höjden så att en ensam grid
   kan scrolla internt — med flera kort kläms de i stället ihop och inget
   scrollar. Varianten låter innehållet flöda så WxrPageBody (enda scrollytan)
   tar scrollen. */
.wxr-list-page--flow {
  flex: 0 0 auto;
  min-height: auto;
  gap: 16px;
}

.wxr-list-page__grid-shell,
.wxr-company-list__grid-shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wxr-list-page__toolbar,
.wxr-company-list__toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.wxr-list-page-search {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

/* Ramen runt sök/filter-blocket. Konsekvent för alla list-sidor som default
   (Bordered=true). Inkluderar både primary-row och ev. advanced-section
   inuti samma ram. position: relative behövs för clear-knappens absoluta
   positionering i top-right. */
.wxr-list-page-search--bordered {
  position: relative;
  padding: 12px 14px;
  background: var(--wxr-card-header-bg);
  border: 1px solid var(--wxr-border);
  border-radius: 8px;
}

.wxr-list-page-search {
  position: relative;  /* fallback om Bordered=false */
}

/* Reservera plats i top-right för clear-knappen så __row content aldrig
   hamnar bakom den. 28px (knappens bredd) + 12px (gap). */
.wxr-list-page-search__row {
  padding-right: 40px;
}

/* Primary-raden inom ramen — add + search + extra-filter + clear-X.
   align-items: center valign-centrerar ALLT (sök-input, dropdowns,
   switches, datum-presets) längs samma horisontella linje. */
.wxr-list-page-search__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Avancerad-sektionen renderas INOM samma ram, separerad med en tunn
   linje ovanför. */
.wxr-list-page-search__advanced {
  border-top: 1px solid var(--wxr-border);
  padding-top: 12px;
}

/* Add-knappen flyttad från .wxr-company-list__add (page-specifik) till
   .wxr-list-page-search__add. Behåller gamla klassen som alias nedan
   för bakåtkompabilitet med andra pages.
   align-self: flex-start så knappen ligger på samma höjd som sök-input-
   toppen även när raden växer (t.ex. när avancerad-länken är synlig). */
.wxr-list-page-search__add,
.wxr-company-list__add {
  flex: 0 0 var(--wxr-control-height);
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--wxr-control-height);
  min-width: var(--wxr-control-height);
  max-width: var(--wxr-control-height);
  height: var(--wxr-control-height);
  min-height: var(--wxr-control-height);
  max-height: var(--wxr-control-height);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--wxr-radius-lg);
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
  cursor: pointer;
  box-sizing: border-box;
  line-height: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}

.wxr-list-page-search__add:hover,
.wxr-company-list__add:hover {
  background: var(--wxr-nav-solid-hover);
}

.wxr-list-page-search__add:active,
.wxr-company-list__add:active {
  transform: scale(0.97);
}

.wxr-list-page-search__add i,
.wxr-company-list__add i {
  font-size: 16px;
  line-height: 1;
}

/* Clear-all-knapp i ramens top-right — visas när HasActiveFilters=true.
   Diskret cirkulär X med röd hover (destructive affordance). Absolut
   positionerad så den ligger fast i top-right oavsett om __row wrappas
   eller om advanced-sektionen är expanderad. top:12px / right:14px
   matchar __bordered-paddningen så knappen alignar med padding-kanten. */
.wxr-list-page-search__clear {
  position: absolute;
  top: 15px;
  right: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--wxr-border);
  border-radius: 50%;
  color: var(--wxr-text-hint);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* När Bordered=false (utan padding på ramen) ligger knappen mot 0,0
   så den alignar med innehållets toppkant. */
.wxr-list-page-search:not(.wxr-list-page-search--bordered) .wxr-list-page-search__clear {
  top: 0;
  right: 0;
}

.wxr-list-page-search__clear:hover {
  background: var(--wxr-danger-bg);
  border-color: var(--wxr-danger-border-soft);
  color: var(--wxr-danger);
}

.wxr-list-page-search__clear:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: 2px;
}

.wxr-list-page-search__clear > i {
  font-size: 13px;
}

/* (Tidigare .wxr-list-page-search--edit-primary-width borttagen — ramen
   ska alltid vara 100% bred enligt ny design-konvention.) */

.wxr-company-list__add {
  flex: 0 0 var(--wxr-control-height);
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--wxr-control-height);
  min-width: var(--wxr-control-height);
  max-width: var(--wxr-control-height);
  height: var(--wxr-control-height);
  min-height: var(--wxr-control-height);
  max-height: var(--wxr-control-height);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--wxr-radius-lg);
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
  cursor: pointer;
  box-sizing: border-box;
  line-height: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}

.wxr-company-list__add:hover {
  background: var(--wxr-nav-solid-hover);
}

.wxr-company-list__add:active {
  transform: scale(0.97);
}

.wxr-company-list__add i {
  font-size: 16px;
  line-height: 1;
}

.wxr-list-page-search__search-wrap,
.wxr-company-list__search-wrap {
  flex: 1;
  min-width: 0;
  min-height: var(--wxr-control-height);
}

/* Add + search + inline filters: keep search from stretching; stack filters left next to search */
.wxr-list-page-search--with-filters .wxr-list-page-search__search-wrap {
  flex: 0 1 520px;
  min-width: min(100%, 240px);
  max-width: min(720px, 57vw);
}

/* display: contents gör filtren till flex-items direkt i __row i stället för att
   ligga i en egen wrappande flex-container. Blocket var tidigare
   display: flex + flex-wrap: wrap + flex: 0 0 auto, alltså en nästlad
   wrap-container vars flex-bas är dess intrinsiska bredd. Den bredden räknas
   olika av motorerna: Chrome får plats för filtren på en rad, Firefox landar på
   en smalare bredd och radbryter dem inuti blocket medan raden runt omkring står
   tom (verifierat i Firefox 1700px). Nu ärver filtren radens gap (12px),
   align-items och flex-wrap, så de ligger på en rad och bryter ett och ett först
   när raden faktiskt är full. */
.wxr-list-page-search__extra {
  display: contents;
}

.wxr-list-page-search__extra .wxr-field {
  gap: 0;
  /* Standardiserad bredd för filter-dropdowns i ExtraContent. 180px räcker
     för normala filter-labels ("Alla typer", "Alla roller", "Alla statusar")
     och tillåter fler filter på samma rad på medelstora skärmar. Långa
     option-texter trunkeras via Telerik:s native ellipsis. */
  flex: 0 0 180px;
  min-width: 160px;
}

/* En segmentväljare i filterraden tar sin egen bredd: filterrutans 180 px är för en
   dropdown, och med den hamnade nästa kontroll en bit bort från växlaren. */
.wxr-list-page-search__extra .wxr-field:has(> .wxr-segmented) {
  flex: 0 0 auto;
  min-width: 0;
}

/* En ikonknapp i filterraden står bredvid fält och växlare och får deras höjd och ram. */
.wxr-list-page-search__extra .wxr-icon-btn {
  width: var(--wxr-control-height-user);
  height: var(--wxr-control-height-user);
  margin-left: 0;
  border-color: var(--wxr-border);
  background: var(--wxr-surface);
}

.wxr-list-page-search__extra .wxr-icon-btn.is-active {
  background: var(--wxr-accent-light);
  border-color: var(--wxr-accent);
}

/* WxrCheckbox/WxrSwitch har default margin-top: 10px för andrum mot syskon
   i form-grids. Inom filter-raden är raden redan centrerad, så marginalen
   pushar switchen nedåt och bryter valign. Neutralisera. */
.wxr-list-page-search__extra .wxr-checkbox {
  margin-top: 0;
  align-self: center;
  flex: 0 0 auto;
}

/* Telerik-input inom filterfältet ska ärva wrapper-bredden så hela dropdown
   spannar konsekvent oavsett option-text. */
.wxr-list-page-search__extra .wxr-field .k-input,
.wxr-list-page-search__extra .wxr-field .k-dropdownlist,
.wxr-list-page-search__extra .wxr-field select {
  width: 100%;
}

/* En ikon per roll: ett företag kan bära flera (identity.md §3.1). Raden får inte
   växa i höjd när en andra roll dyker upp, så ikonerna krymper i stället för att
   radbryta, och kolumnen rullar aldrig. */
.wxr-company-list__role-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wxr-company-list__role-icons .wxr-company-list__type-icon {
  width: 26px;
  height: 26px;
}

.wxr-company-list__role-icons .wxr-company-list__type-icon i {
  font-size: 14px;
}

.wxr-company-list__type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--wxr-radius);
  background: var(--wxr-surface-secondary);
  color: var(--wxr-nav);
}

.wxr-company-list__type-icon i {
  font-size: 16px;
}

.wxr-company-list__grid {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  border-radius: var(--wxr-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wxr-border);
  background: var(--wxr-surface);
}

/* Let the grid body scroll inside the viewport (Telerik/Kendo root + content) */
.wxr-company-list__grid .k-grid,
.wxr-company-list__grid.k-grid {
  height: 100%;
  max-height: 100%;
}

.wxr-company-list__grid .k-grid-content,
.wxr-company-list__grid .k-grid-container {
  flex: 1 1 auto;
  min-height: 0;
}

.wxr-company-list__grid .k-grid-header,
.wxr-company-list__grid .k-grid-toolbar {
  background: var(--wxr-surface-secondary);
}

/* ── GENERIC FULL-HEIGHT GRID ──
   Tidigare hade bara company-list full höjd. Nu fyller ALLA grids
   inom en list-page hela tillgängliga ytan (matchar fluid-body). */
.wxr-list-page__grid-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wxr-list-page__grid-shell > .wxr-grid-host,
.wxr-list-page__grid-shell > .wxr-grid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wxr-list-page__grid-shell .k-grid,
.wxr-list-page__grid-shell.k-grid {
  height: 100%;
  max-height: 100%;
}

.wxr-list-page__grid-shell .k-grid-content,
.wxr-list-page__grid-shell .k-grid-container {
  flex: 1 1 auto;
  min-height: 0;
}

.wxr-list-page__grid-shell .k-grid-header {
  background: var(--wxr-surface-secondary);
}

/* ── GRID & TABLE FONT-SIZE ──
   Default för all data i gridviews och tabeller är 13px. Bootstrap default
   är 14px och Telerik följer det; vi vill ha en tightare/proffsigare typo
   för tabulär data. Applicerad på .k-grid (Telerik) + table.table (Bootstrap)
   + våra wxr-list-table-varianter. */
.k-grid,
.k-grid .k-table-td,
.k-grid .k-grid-content td,
.k-grid .k-grid-header th,
.k-grid .k-master-row td,
.k-grid .k-detail-row td,
.k-grid .k-table-th,
table.table,
table.table td,
table.table th,
.wxr-list-table,
.wxr-list-table td,
.wxr-list-table th {
  font-size: var(--wxr-table-font);
}

/* ── WXR MULTISELECT (TelerikMultiSelect-wrapper) ──
   Telerik default-styling är ganska anonymt grå. Vi piffar upp:
   • Tag-chips inom inputen: ljusblå tonad bg + mörkblå text + mjukare hörn
   • Dropdown-rader: hover/active får samma ljusblå som resten av appen
   • Input-fokus: blå outline (matchar form-control:focus) */

.wxr-combobox-host .k-input-solid,
.wxr-combobox-host .k-multiselect {
  border-color: var(--wxr-border-em);
  border-radius: var(--wxr-radius, 6px);
  background: var(--wxr-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Höjd-klamp så Telerik-comboboxen matchar native .form-control/.form-select
   (--wxr-control-height) i stället för Teleriks egen k-input-md-höjd. Annars blir
   sökbara dropdowns (t.ex. i konfiguratorn) lägre än textboxar/native-selects.
   Mer specifika scopade regler (t.ex. regelsidans artikel-rad) vinner över denna. */
.wxr-combobox-host .k-input,
.wxr-combobox-host .k-picker,
.wxr-numerictextbox-host .k-input {
  height: var(--wxr-control-height);
  min-height: var(--wxr-control-height);
}
.wxr-combobox-host .k-input-inner,
.wxr-numerictextbox-host .k-input-inner {
  height: calc(var(--wxr-control-height) - 2px);
}

/* WxrNumericTextBox: samma border/fokus/invalid-look som combobox & native inputs. */
.wxr-numerictextbox-host .k-input-solid {
  border-color: var(--wxr-border-em);
  border-radius: var(--wxr-radius, 6px);
  background: var(--wxr-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wxr-numerictextbox-host .k-input-solid:focus-within {
  border-color: var(--wxr-nav);
  box-shadow: 0 0 0 3px var(--wxr-focus-glow);
}
.wxr-numerictextbox-host.is-invalid .k-input-solid {
  border-color: var(--wxr-danger);
}

.wxr-combobox-host .k-input-solid:focus-within,
.wxr-combobox-host .k-multiselect.k-focus {
  border-color: var(--wxr-nav);
  box-shadow: 0 0 0 3px var(--wxr-focus-glow);
}

/* Chip = vald tagg i input-fältet. Lite mer mättad ljusblå än hover-state
   så de syns tydligt utan att bli skrikiga. */
.wxr-combobox-host .k-chip {
  background: var(--wxr-info-border-soft);
  border: 1px solid var(--wxr-info-border-hover);
  color: var(--wxr-nav-hover);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  height: 24px;
  padding: 0 4px 0 10px;
  transition: background-color 0.12s, border-color 0.12s;
}

.wxr-combobox-host .k-chip:hover {
  background: var(--wxr-info-border);
  border-color: var(--wxr-link);
}

.wxr-combobox-host .k-chip .k-chip-action,
.wxr-combobox-host .k-chip .k-chip-remove-action {
  color: var(--wxr-info);
  opacity: 0.7;
  transition: opacity 0.12s, background-color 0.12s;
  border-radius: 50%;
}

.wxr-combobox-host .k-chip .k-chip-action:hover,
.wxr-combobox-host .k-chip .k-chip-remove-action:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--wxr-info) 12%, transparent);
}

/* Dropdown-listan när användaren expanderar fältet */
.k-popup .k-list-item:hover,
.k-popup .k-list-item.k-hover {
  background: var(--wxr-nav-light);
  color: var(--wxr-nav);
}

/* Selected i dropdown: ljusare tonad blå (inte solid mörkblå) — markerar
   tydligt utan att skrika. Matchar chip-paletten så själected-state är
   konsekvent mellan input-tags och dropdown-list. */
.k-popup .k-list-item.k-selected {
  background: var(--wxr-info-border-soft);
  color: var(--wxr-nav-hover);
  font-weight: 600;
}

.k-popup .k-list-item.k-selected:hover {
  background: var(--wxr-info-border);
}

/* ── BADGES (WxrBadge) ──
   Premium SaaS-pill: liten, ren, färgkodad. Alla varianter har
   ljust tonad bg + mättad 1px border + saturated text — som referens-design.
   Solid och outline-varianter ser nästan identiska ut för konsekvent look.
   Inspirerat av Linear/Stripe. */
.wxr-badge {
  display: inline-flex;
  align-items: center;
  /* Explicit höjd så badges blir identiska oavsett vilken grid-cell, kolumn
     eller variant de hamnar i. Höjden beräknades så font-size + padding
     ger ett resultat som matchar visualtätheten i existerande list-sidor
     (~22px outer height med 1px border). */
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* Varianterna. "outline-" ÄR sin solida motsvarighet, inte ett eget utseende: de sex paren
   stod tidigare som tolv identiska regler, vilket ser ut som två uppsättningar som råkat bli
   lika och inbjuder någon att "rätta" den ena. Namnen står kvar för att de används på ett
   femtiotal ställen, men de delar nu deklaration så de INTE kan glida isär. Vill man någon
   gång ha en riktigt outlinad variant är det en egen uppsättning, inte en ändring här. */
.wxr-badge--success,   .wxr-badge--outline-success   { background: var(--wxr-success-bg-strong);  border-color: var(--wxr-success-border-strong);  color: var(--wxr-success-strong); }
.wxr-badge--warning,   .wxr-badge--outline-warning   { background: var(--wxr-warning-bg);         border-color: var(--wxr-warning-border);         color: var(--wxr-warning); }
.wxr-badge--danger,    .wxr-badge--outline-danger    { background: var(--wxr-danger-bg-strong);   border-color: var(--wxr-danger-border);          color: var(--wxr-danger-strong); }
.wxr-badge--info,      .wxr-badge--outline-info      { background: var(--wxr-info-bg);            border-color: var(--wxr-info-border);            color: var(--wxr-info); }
.wxr-badge--purple,    .wxr-badge--outline-purple    { background: var(--wxr-purple-bg);          border-color: var(--wxr-purple-border);          color: var(--wxr-purple); }
.wxr-badge--secondary, .wxr-badge--outline-secondary { background: var(--wxr-surface-secondary);  border-color: var(--wxr-border-em);              color: var(--wxr-text-muted); }

/* ── PROJECT LIST ── */

/* Status-filter i sökraden: tightare select-bredd */
.wxr-project-list__status-filter {
  min-width: 140px;
  max-width: 180px;
}

/* Currency-värde — högerställt med tabulärt numeriskt typsnitt.
   Scope display:inline-block ENDAST till span-element så det inte
   bryter table-cell-layouten när klassen sätts direkt på th/td. */
span.wxr-project-list__value {
  display: inline-block;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--wxr-text);
}

/* Table-cell-varianten: bara text-alignment, inget display-override */
th.wxr-project-list__value,
td.wxr-project-list__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Egen smal kolumn för hänglåset så att åtgärds-ikonerna linjerar oavsett
   om raden har sälj-flödesknappar eller inte. */
th.wxr-project-list__lock,
td.wxr-project-list__lock {
  width: 28px;
  text-align: center;
  white-space: nowrap;
}

/* Expanderad rad (DetailTemplate) — panel med subproject-tabell.
   Mindre padding och en mjukare bakgrund jämfört med tidigare; målet är
   att panelen ska kännas som en utökning av raden, inte som en separat
   tung sektion. */
.wxr-project-list__subproject-panel {
  padding: 8px 16px 12px 48px;
  background: var(--wxr-surface-secondary);
}

.wxr-project-list__no-subprojects {
  margin: 0;
  padding: 8px 0;
  font-size: 13px;
  color: var(--wxr-text-hint);
  font-style: italic;
}

.wxr-project-list__subproject-table {
  width: auto;
  /* Högerställ hela sub-tabellen inom panelen — matchar referensdesign */
  margin-left: auto;
  margin-right: 0;
  border-collapse: collapse;
  background: var(--wxr-surface);
  /* Lättare border-färg så tabellen inte konkurrerar med huvudraden */
  border: 1px solid color-mix(in srgb, var(--wxr-border) 70%, transparent);
  border-radius: var(--wxr-radius);
  overflow: hidden;
  table-layout: fixed;
}

/* Explicita kolumnbredder — tabellen blir bara så bred som kolumnerna,
   inte 100% av Telerikins DetailTemplate. Det stoppar Row actions från
   att absorbera all tom yta till höger. */
.wxr-project-list__subproject-table th:nth-child(1),
.wxr-project-list__subproject-table td:nth-child(1) { width: 140px; }
.wxr-project-list__subproject-table th:nth-child(2),
.wxr-project-list__subproject-table td:nth-child(2) { width: 160px; }
.wxr-project-list__subproject-table th:nth-child(3),
.wxr-project-list__subproject-table td:nth-child(3) { width: 195px; }
.wxr-project-list__subproject-table th:nth-child(4),
.wxr-project-list__subproject-table td:nth-child(4) { width: 110px; }
.wxr-project-list__subproject-table th:nth-child(5),
.wxr-project-list__subproject-table td:nth-child(5) { width: 110px; }
.wxr-project-list__subproject-table th:nth-child(6),
.wxr-project-list__subproject-table td:nth-child(6) { width: 150px; }

/* "Senast ändrat"-cell på subproject-rader — kompaktare typsnitt eftersom
   den innehåller både datum + tidpunkt (dvs lite längre sträng). */
.wxr-project-list__subproject-changed {
  font-size: 11px;
  color: var(--wxr-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wxr-project-list__subproject-table th:nth-child(7),
.wxr-project-list__subproject-table td:nth-child(7) { width: 170px; }

.wxr-project-list__subproject-table thead th {
  padding: 5px 12px;
  background: var(--wxr-surface-tertiary);
  /* Mjukare separator mellan header och body */
  border-bottom: 1px solid color-mix(in srgb, var(--wxr-border) 70%, transparent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wxr-text-hint);
  text-align: left;
}

.wxr-project-list__subproject-table tbody td {
  padding: 6px 12px;
  border-top: 1px solid color-mix(in srgb, var(--wxr-border) 50%, transparent);
  font-size: 13px;
  color: var(--wxr-text);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover-feedback på sub-rader: subtil bakgrund som styr ögat utan att skrika.
   Matchar W4 där varje rad känns "interaktiv" trots att det är en tabell. */
.wxr-project-list__subproject-table tbody tr {
  transition: background-color 120ms ease;
}

.wxr-project-list__subproject-table tbody tr:hover {
  background: var(--wxr-surface-secondary);
}

.wxr-project-list__subproject-table tbody tr:first-child td {
  border-top: none;
}

/* Subproject-typ med liten färgbar till vänster (visuellt ankra) */
.wxr-project-list__subproject-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.wxr-project-list__subproject-type-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--wxr-nav);
}

.wxr-project-list__subproject-type i {
  font-size: 14px;
  color: var(--wxr-text-muted);
}

.wxr-addresses-actions   { margin: 0 0 14px; }
.wxr-addresses-list      { display: flex; flex-direction: column; gap: 12px; }
.wxr-input--numeric      {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Nummer-fält cap:as så de inte blir absurt breda på wide screens, men
     storleken matchar närliggande select/datum-fält i samma grid-cell.
     Override med .wxr-input--numeric--wide om någon plats behöver full bredd. */
  max-width: 440px;
}
.wxr-input--numeric--wide   { max-width: none; }

/* Visat tal (inte inmatning). Tabulära siffror så kolumner linjerar, och
   nowrap så belopp aldrig delas över två rader. NumberFormat fogar redan
   belopp och valuta med hårt blanksteg; den här klassen skyddar resten av
   cellen (t.ex. "863 600,00 SEK (31,2 %)"). */
.wxr-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── AUTH PAGES ── */
.wxr-auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wxr-header-bg);
}

.wxr-auth-card {
  background: var(--wxr-surface);
  /* Egen, större radie bara för auth-kortet. Rör INTE --wxr-radius (delad med fält/modaler). */
  border-radius: 14px;
  padding: 40px 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--wxr-shadow-xl);
}

.wxr-auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.wxr-auth-logo img {
  height: 72px;
  width: auto;
}

.wxr-auth-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--wxr-text);
  text-align: center;
  margin: 0 0 24px;
}

.wxr-auth-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wxr-auth-submit {
  justify-content: center;
  height: 40px;
  font-size: var(--wxr-f-base);
}

.wxr-auth-footer {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--wxr-text-hint);
}

.wxr-auth-footer a {
  color: var(--wxr-nav);
  text-decoration: none;
}

.wxr-auth-footer a:hover {
  text-decoration: underline;
}

.wxr-auth-info {
  background: var(--wxr-success-bg);
  border: 1px solid var(--wxr-success-border);
  color: var(--wxr-success);
  border-radius: var(--wxr-radius);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Login-scoped: rad med "håll mig inloggad" + glömt-lösenord. Endast auth. */
.wxr-auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin: -4px 0 10px;
}

.wxr-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wxr-text-muted);
  cursor: pointer;
  user-select: none;
}

.wxr-auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--wxr-nav);
  cursor: pointer;
}

.wxr-auth-options a {
  color: var(--wxr-nav);
  text-decoration: none;
  white-space: nowrap;
}

.wxr-auth-options a:hover {
  text-decoration: underline;
}

/* Villkorstext under login-knappen. Endast auth. */
.wxr-auth-terms {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wxr-text-hint);
}

.wxr-auth-terms a {
  color: var(--wxr-nav);
  text-decoration: none;
}

.wxr-auth-terms a:hover {
  text-decoration: underline;
}

/* Bredare auth-kort för dokumentsidor (villkor). Ärver accent + radie. Endast auth. */
.wxr-auth-card--doc {
  max-width: 680px;
  text-align: left;
}

.wxr-auth-doc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wxr-text);
}

.wxr-auth-doc h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 24px 0 6px;
}

.wxr-auth-doc p {
  margin: 0 0 12px;
}

.wxr-auth-doc__note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--wxr-text-hint);
}

/* ── THEME SYNC ──
   `wxr-layout.css` loads after Kendo/Bootstrap in _Host so these win.
   Kendo default grid text (~#3d3d3d) otherwise diverges from sidebar/body token.
   Font-size sätts till 13px för data-täthet — matchar wxr-list-table. */
.wxr-page .k-grid {
  font-size: var(--wxr-table-font);
}

/* Rutnätets kropp. Telerik ritar .k-grid-content i --kendo-color-surface-alt, som är
   rubrikradens yta (--wxr-surface-muted) LJUSAD 0,02 i oklch. I ljust läge är det ett
   nästan vitt ingen skiljer från kortet; i mörkt läge blir det två steg ljusare än kortet
   raderna ligger i, så hela listan stod som en ljus platta på sidan. Kroppen får kortets
   egen yta i båda lägena, rubrikraden behåller sin. */
.wxr-page .k-grid .k-grid-content {
  background-color: var(--wxr-surface);
}

.wxr-page .k-grid .k-table-td,
.wxr-page .k-grid .k-table-tbody .k-table-row .k-table-td {
  color: var(--wxr-text);
}

.wxr-page .k-grid .k-table-th {
  color: var(--wxr-text);
  font-size: var(--wxr-table-head-font);
}

/* Dölj Telerikins expand-kolumn på grids utan DetailTemplate.
   Klassen sätts redan av WxrGrid; CSS-regeln saknades. */
.wxr-grid--no-detail .k-hierarchy-cell,
.wxr-grid--no-detail .k-hierarchy-col,
.wxr-grid--no-detail col.k-hierarchy-col {
  display: none !important;
}

/* ── ROLE EDIT: PERMISSIONS GROUPING ── */
.wxr-role-permissions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Luft ner från fältblocket ovanför: rubriken låg annars tätt under
     rabattgränsens ruta och läste som en etikett till fältet. */
  margin-top: 24px;
}

.wxr-role-permissions__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wxr-role-permissions__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--wxr-text);
}

.wxr-role-permissions__count {
  font-size: 12px;
  color: var(--wxr-text-hint);
}

.wxr-role-permissions__groups {
  display: grid;
  /* auto-fill, inte auto-fit: en filtrerad vy med en enda grupp ska behålla
     kolumnbredden i stället för att breda ut ett kort över hela ytan. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.wxr-role-edit {
  width: 100%;
}

/* Rubriken och sökrutan linjerar med fältgriden ovanför. Samma inramning som
   fälten har: kolumnbredden sitter på wrappern (.wxr-layout-primary-col-width),
   grid-taket här. Ett eget mått hade sett rätt ut vid en viss fönsterbredd och
   glidit isär vid nästa, eftersom kolumnen är procentuell och taket absolut. */
.wxr-role-permissions__controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--wxr-form-grid-max);
}

/* Sökrutans egen bottenmarginal skulle lägga sig ovanpå wrapperns gap. */
.wxr-role-permissions__controls .wxr-list-page-search {
  margin-bottom: 0;
}

/* ── USER EDIT: EFFEKTIV ÅTKOMST (läsvy) ── */
.wxr-effective-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wxr-effective-groups {
  margin-top: 16px;
}

.wxr-effective-perm {
  padding: 8px 12px;
  border-bottom: 1px solid var(--wxr-border);
}

.wxr-effective-perm:last-child {
  border-bottom: none;
}

.wxr-role-permissions__group {
  border: 1px solid var(--wxr-border);
  border-radius: 10px;
  background: var(--wxr-surface);
  box-shadow: var(--wxr-shadow-xs);
  overflow: hidden;
}

.wxr-role-permissions__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wxr-border);
  background: var(--wxr-card-header-bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wxr-text-muted);
}

.wxr-role-permissions__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.wxr-role-permissions__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

.wxr-role-permissions__item:hover {
  background: var(--wxr-surface-secondary);
}

.wxr-role-permissions__item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wxr-role-permissions__item-name {
  font-size: 14px;
  line-height: 1.3;
  color: var(--wxr-text);
}

.wxr-role-permissions__item-code {
  font-size: 12px;
  color: var(--wxr-text-hint);
  line-height: 1.3;
}

/* ── ARTIKELKATEGORI-TRÄD ─────────────────────────────────────────────────
   Inline träd-vy för artikelkategorier — ersätter tidigare grid + separata
   create/edit-sidor. Indrag via --wxr-cat-depth-variabel, satt per nod.
*/

/* Kategorisida: sökraden och trädet ligger i samma behållare. Behållaren tar
   sidbredden från BodyVariant="simple" (960px), och trädet släpper sin egen
   900px-gräns här så raderna slutar på samma kant som sökraden. */
.wxr-category-tree-page .wxr-category-tree {
  max-width: none;
}

.wxr-category-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 900px;
}

.wxr-category-tree__node {
  --wxr-cat-depth: 0;
  padding-left: calc(var(--wxr-cat-depth) * 24px);
}

.wxr-category-tree__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: var(--wxr-surface);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.wxr-category-tree__row:hover {
  background-color: var(--wxr-card-header-bg);
  border-color: var(--wxr-border);
}

.wxr-category-tree__connector {
  color: var(--wxr-text-hint);
  font-size: 14px;
}

/* ── Drag-sortering i kategoriträdet ──
   Samma visuella språk som CPQ-layouteditorns placeringar: grab-cursor på det
   dragbara elementet, halvtransparent källa, och hela målet inramat i stället
   för en tunn linje på en kant. */
.wxr-category-tree__row[draggable="true"] {
  cursor: grab;
  /* Utan detta börjar musnedtryckningen markera text, och webbläsaren drar
     markeringen i stället för raden. */
  user-select: none;
}

.wxr-category-tree__row[draggable="true"]:active {
  cursor: grabbing;
}

.wxr-category-tree__grip {
  color: var(--wxr-text-hint);
  font-size: 14px;
  flex: 0 0 auto;
}

.wxr-category-tree__row.is-dragging {
  opacity: 0.35;
}

/* Insättningszon mellan raderna, som layouteditorns row-gap: knappt synlig i
   vila, växer när ett drag pågår så den är lätt att träffa, och blir en tydlig
   linje när raden landar just där. Indraget följer nodens djup så zonen ligger
   i linje med de syskon den sorterar bland. */
.wxr-category-tree__gap {
  height: 4px;
  margin-left: calc(var(--wxr-cat-depth, 0) * 24px);
  border: 2px solid transparent;
  border-radius: 6px;
  transition: height 0.12s, background 0.12s, border-color 0.12s;
}

.wxr-category-tree__gap.is-drop-active {
  height: 16px;
  background: color-mix(in srgb, var(--wxr-nav) 3%, transparent);
  border: 1.5px dashed var(--wxr-info-border);
}

.wxr-category-tree__gap.is-drop-target {
  height: 30px;
  background: var(--wxr-accent-light);
  border: 2px dashed var(--wxr-accent);
}

.wxr-category-tree__code {
  font-family: var(--wxr-font-mono);
  font-size: 13px;
  color: var(--wxr-text-hint);
  min-width: 100px;
}

.wxr-category-tree__name {
  font-weight: 500;
  color: var(--wxr-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wxr-category-tree__name--inactive {
  color: var(--wxr-text-hint);
  text-decoration: line-through;
}

.wxr-category-tree__actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 120ms ease;
}

.wxr-category-tree__row:hover .wxr-category-tree__actions,
.wxr-category-tree__row:focus-within .wxr-category-tree__actions {
  opacity: 1;
}

.wxr-category-tree__node--editing {
  background-color: var(--wxr-surface-tertiary);
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  padding: 12px;
}

.wxr-category-tree__form {
  display: grid;
  grid-template-columns: 160px 1fr 100px auto;
  gap: 12px;
  align-items: end;
}

.wxr-category-tree__form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.wxr-category-tree__image {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 14px;
}

/* Responsivt: under en viss bredd stackas form-fälten. */
@media (max-width: 720px) {
  .wxr-category-tree__form {
    grid-template-columns: 1fr;
  }
}

/* ── CPQ INPUTS LIST + DETAIL ──
   Två-pane-layout för UI-inputs-admin (CpqVersionOptionsPage). Vänster:
   gruppad lista över alla inputs. Höger: full metadata-form för vald input.
   När detta mönster återkommer i Layout/Basartiklar/Regler ska det
   extraheras till en generisk Wxr-komponent (`WxrListDetailLayout`). */
.wxr-cpq-inputs {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 992px) {
  .wxr-cpq-inputs {
    grid-template-columns: 1fr;
  }
}

.wxr-cpq-inputs__list,
.wxr-cpq-inputs__detail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wxr-cpq-inputs__list > .wxr-card,
.wxr-cpq-inputs__detail > .wxr-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}

.wxr-cpq-inputs__list > .wxr-card > .wxr-card__body,
.wxr-cpq-inputs__detail > .wxr-card > .wxr-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.wxr-cpq-inputs__group {
  margin-bottom: 14px;
}

.wxr-cpq-inputs__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--wxr-border);
  margin-bottom: 6px;
}

.wxr-cpq-inputs__group-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wxr-text-hint);
}

.wxr-cpq-inputs__group-actions {
  display: inline-flex;
  gap: 2px;
}

.wxr-cpq-inputs__empty {
  font-size: 12px;
  color: var(--wxr-text-hint);
  font-style: italic;
  margin: 4px 0 8px;
  padding-left: 4px;
}

.wxr-cpq-inputs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.wxr-cpq-inputs__item:hover {
  background: var(--wxr-surface-secondary);
}

.wxr-cpq-inputs__item--active {
  background: var(--wxr-nav-light);
  border-color: var(--wxr-nav);
}

.wxr-cpq-inputs__item--active .wxr-cpq-inputs__item-name {
  color: var(--wxr-nav);
  font-weight: 600;
}

.wxr-cpq-inputs__item-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.wxr-cpq-inputs__item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--wxr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-cpq-inputs__item-code {
  font-size: 11px;
  color: var(--wxr-text-hint);
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-cpq-inputs__item-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.wxr-cpq-inputs__type-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--wxr-surface-secondary);
  color: var(--wxr-text-muted);
}

.wxr-cpq-inputs__autocalc-badge {
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: var(--wxr-nav);
  padding: 0 4px;
}

.wxr-cpq-inputs__inactive-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--wxr-danger-bg);
  color: var(--wxr-danger-text);
}

.wxr-cpq-inputs__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  color: var(--wxr-text-hint);
  text-align: center;
}

.wxr-cpq-inputs__placeholder i {
  font-size: 32px;
}

.wxr-cpq-inputs__placeholder p {
  margin: 0;
  font-size: 14px;
}

.wxr-cpq-inputs__value-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  background: var(--wxr-surface-secondary);
  border-radius: var(--wxr-radius);
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .wxr-cpq-inputs__value-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── CPQ Basartiklar — katalog + valda artiklar ─────────────
   Två-panels-layout: vänster = filtrerbar artikelkatalog (grid),
   höger = de standardartiklar som alltid följer med modellen.
   Båda panes och deras WxrCards är flex-kolumner med min-height:0
   så de aldrig växer utanför viewport. Innehållet scrollar internt. */
.wxr-cpq-basearticles {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 1200px) {
  .wxr-cpq-basearticles {
    grid-template-columns: 1fr;
  }
}

.wxr-cpq-basearticles__catalog,
.wxr-cpq-basearticles__selected {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wxr-cpq-basearticles__catalog > .wxr-card,
.wxr-cpq-basearticles__selected > .wxr-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}

.wxr-cpq-basearticles__catalog > .wxr-card > .wxr-card__body,
.wxr-cpq-basearticles__selected > .wxr-card > .wxr-card__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wxr-cpq-basearticles__selected > .wxr-card > .wxr-card__body {
  overflow-y: auto;
}

.wxr-cpq-basearticles__filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .wxr-cpq-basearticles__filters {
    grid-template-columns: 1fr;
  }
}

.wxr-cpq-basearticles__catalog-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Propagera flex-höjd ner i Telerik-griden så .k-grid-content scrollar
   istället för att kortet växer obegränsat. Samma mönster som
   .wxr-list-page__grid-shell. */
.wxr-cpq-basearticles__catalog-grid > .wxr-grid-host,
.wxr-cpq-basearticles__catalog-grid > .wxr-grid {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wxr-cpq-basearticles__catalog-grid .k-grid,
.wxr-cpq-basearticles__catalog-grid.k-grid {
  height: 100%;
  max-height: 100%;
}

.wxr-cpq-basearticles__catalog-grid .k-grid-content,
.wxr-cpq-basearticles__catalog-grid .k-grid-container {
  flex: 1 1 auto;
  min-height: 0;
}

.wxr-cpq-basearticles__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--wxr-text-hint);
  text-align: center;
}

.wxr-cpq-basearticles__empty i {
  font-size: 28px;
}

.wxr-cpq-basearticles__empty p {
  margin: 0;
  font-size: 14px;
}

.wxr-cpq-basearticles__selected-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wxr-cpq-basearticles__selected-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  background: var(--wxr-surface);
}

.wxr-cpq-basearticles__selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wxr-cpq-basearticles__selected-tags {
  width: 100%;
}

.wxr-cpq-basearticles__selected-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.wxr-cpq-basearticles__selected-code {
  font-size: 11px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--wxr-text-hint);
}

.wxr-cpq-basearticles__selected-name {
  font-size: 13px;
  color: var(--wxr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxr-cpq-basearticles__selected-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-shrink: 0;
}

.wxr-cpq-basearticles__qty {
  width: 110px;
}

/* Antalsuttryck i stället för stepper — samma höjd som steppern, kapas med ellips.
   inline-block (inte flex): ellips kräver att innehållet är en textrad. */
.wxr-cpq-basearticles__qty-expression {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  max-width: 220px;
  padding: 0 8px;
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius);
  background: var(--wxr-surface-secondary);
  color: var(--wxr-text-hint);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── WxrQuantityStepper — webbshop-stil [-] [tal] [+] ─────── */
.wxr-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  background: var(--wxr-surface);
  overflow: hidden;
  user-select: none;
}

/* Sammansatt kontroll: knapparna har sin egen inåtdragna ring, men INMATNINGEN mellan dem
   stod på outline: none utan att ramen bar något. Stegaren har overflow: hidden, så en
   ring runt inputen hade klippts bort ändå; ramen är rätt bärare. */
.wxr-qty-stepper:focus-within:not(:has(.wxr-qty-stepper__btn:focus-visible)) {
  border-color: var(--wxr-nav);
  box-shadow: 0 0 0 3px var(--wxr-focus-glow);
}

.wxr-qty-stepper--disabled {
  opacity: 0.55;
}

.wxr-qty-stepper__btn {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wxr-surface-secondary);
  border: none;
  color: var(--wxr-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.wxr-qty-stepper__btn:hover:not(:disabled) {
  background: var(--wxr-nav-light);
  color: var(--wxr-nav);
}

.wxr-qty-stepper__btn:active:not(:disabled) {
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
}

.wxr-qty-stepper__btn:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: -2px;
}

.wxr-qty-stepper__btn:disabled {
  cursor: not-allowed;
  color: var(--wxr-text-hint);
}

.wxr-qty-stepper__btn--minus {
  border-right: 1px solid var(--wxr-border);
}

.wxr-qty-stepper__btn--plus {
  border-left: 1px solid var(--wxr-border);
}

.wxr-qty-stepper__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 44px;
  padding: 0 4px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--wxr-text);
  -moz-appearance: textfield;
}

.wxr-qty-stepper__input::-webkit-outer-spin-button,
.wxr-qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wxr-qty-stepper__input:focus {
  outline: none;
  background: var(--wxr-nav-light);
}

.wxr-qty-stepper__input:disabled {
  cursor: not-allowed;
}

/* Formulär-variant (CPQ-konfigurator): samma höjd som en vanlig input
   (--wxr-control-height) med tydliga men lagom stora pilar och luft mot värdet. */
.wxr-qty-stepper--field {
  height: var(--wxr-control-height, 34px);
}
.wxr-qty-stepper--field .wxr-qty-stepper__btn {
  flex: 0 0 30px;
  font-size: 16px;
}
.wxr-qty-stepper--field .wxr-qty-stepper__input {
  width: 60px;
  padding: 0 10px;
  font-size: 14px;
}

/* Kompakt variant för kundkorgen: smal + låg (≈64×20px, 13px text). */
.wxr-qty-stepper--sm {
  height: 20px;
  border-radius: 3px;
}

.wxr-qty-stepper--sm .wxr-qty-stepper__btn {
  flex: 0 0 18px;
  font-size: 10px;
}

.wxr-qty-stepper--sm .wxr-qty-stepper__input {
  width: 28px;
  padding: 0 2px;
  font-size: 13px;
}

/* "Lägg till"-knappen som ersätter stepper:n när Value=0. Designvalet är
   att efterapa stepper:s exakta visuella footprint (samma border, höjd,
   bakgrund som +/–-knapparna har, samma textfärg som chevrons) så
   övergången knapp→stepper inte ger något visuellt hopp. */
.wxr-qty-stepper__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--wxr-surface-secondary);
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  color: var(--wxr-text);
  font-family: var(--wxr-font);
  font-size: var(--wxr-f-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.wxr-qty-stepper__add-btn:hover:not(:disabled) {
  background: var(--wxr-nav-light);
  color: var(--wxr-nav);
}

.wxr-qty-stepper__add-btn:active:not(:disabled) {
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
}

.wxr-qty-stepper__add-btn:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: -2px;
}

.wxr-qty-stepper__add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Cart-mode modifier: båda formerna (knapp + stepper) fyller exakt
   sin parent-cell. Krävs för att övergången inte ska göra ett
   bredd-hopp i Produktlista-griden. */
.wxr-qty-stepper--cart {
  display: flex;
  width: 100%;
}
.wxr-qty-stepper__add-btn.wxr-qty-stepper--cart {
  width: 100%;
}

/* ============================================================
 * WxrEmptyState — kanonisk "inga rader / inget att visa" -block.
 * Tre storlekar: default (full), compact (inuti card), inline (rad).
 * ============================================================ */
.wxr-empty-state {
  display: flex;
  align-items: center;
  text-align: left;
  color: var(--wxr-text);
}

.wxr-empty-state__icon {
  flex: 0 0 auto;
  color: var(--wxr-text-hint);
}

.wxr-empty-state__body {
  flex: 1 1 auto;
  min-width: 0;
}

.wxr-empty-state__title {
  margin: 0;
  font-weight: 600;
  color: var(--wxr-text);
}

.wxr-empty-state__description {
  margin: 0;
  color: var(--wxr-text-hint);
}

.wxr-empty-state__action {
  margin-top: 12px;
}

/* default = full-page tomt-tillstånd */
.wxr-empty-state--default {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  gap: 16px;
}

.wxr-empty-state--default .wxr-empty-state__icon {
  font-size: 48px;
  opacity: 0.5;
}

.wxr-empty-state--default .wxr-empty-state__title {
  font-size: 18px;
}

.wxr-empty-state--default .wxr-empty-state__description {
  font-size: 14px;
  max-width: 480px;
}

/* compact = inuti card, inte hela sidan */
.wxr-empty-state--compact {
  flex-direction: row;
  padding: 20px 16px;
  gap: 14px;
  border: 1px dashed var(--wxr-border);
  border-radius: 8px;
  background: var(--wxr-card-header-bg);
}

.wxr-empty-state--compact .wxr-empty-state__icon {
  font-size: 28px;
}

.wxr-empty-state--compact .wxr-empty-state__title {
  font-size: 14px;
}

.wxr-empty-state--compact .wxr-empty-state__description {
  font-size: 13px;
  margin-top: 2px;
}

.wxr-empty-state--compact .wxr-empty-state__action {
  margin-top: 8px;
}

/* inline = en rad text + ikon, för listor i listor */
.wxr-empty-state--inline {
  flex-direction: row;
  padding: 10px 12px;
  gap: 10px;
}

.wxr-empty-state--inline .wxr-empty-state__icon {
  font-size: 16px;
}

.wxr-empty-state--inline .wxr-empty-state__title {
  font-size: 13px;
  font-weight: 500;
}

.wxr-empty-state--inline .wxr-empty-state__description {
  font-size: 12px;
}

/* ============================================================
 * WxrAvatar — initial-cirkel med deterministisk färg per namn.
 * ============================================================ */
.wxr-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--wxr-text-on-color);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
  flex: 0 0 auto;
  line-height: 1;
}

.wxr-avatar--xs { width: 20px; height: 20px; font-size: 9px;  }
.wxr-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.wxr-avatar--md { width: 32px; height: 32px; font-size: 12px; }
.wxr-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.wxr-avatar--xl { width: 56px; height: 56px; font-size: 20px; }

/* 8 stabila paletter, deterministiskt mappade från namnets hash.
   Färgerna är harmoniska med Wexer-paletten (kalla blå/lila + varma accenter). */
.wxr-avatar--color-0 { background: var(--wxr-avatar-0); }
.wxr-avatar--color-1 { background: var(--wxr-avatar-1); }
.wxr-avatar--color-2 { background: var(--wxr-avatar-2); }
.wxr-avatar--color-3 { background: var(--wxr-avatar-3); }
.wxr-avatar--color-4 { background: var(--wxr-avatar-4); }
.wxr-avatar--color-5 { background: var(--wxr-avatar-5); }
.wxr-avatar--color-6 { background: var(--wxr-avatar-6); }
.wxr-avatar--color-7 { background: var(--wxr-avatar-7); }

/* ============================================================
 * WxrTimeDisplay — kanonisk tidstämpel-rendering. Default inline span.
 * "stacked" lägger relativ + absolut på två rader (för listceller).
 * ============================================================ */
.wxr-time {
  display: inline;
  color: var(--wxr-text);
  white-space: nowrap;
}

.wxr-time--empty {
  color: var(--wxr-text-hint);
}

.wxr-time--stacked {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: normal;
}

.wxr-time__primary {
  font-weight: 500;
  color: var(--wxr-text);
}

.wxr-time__secondary {
  font-size: 11px;
  color: var(--wxr-text-hint);
}

/* ============================================================
 * WxrJsonViewer — pretty-printad JSON med syntax-färgning + copy.
 * ============================================================ */
.wxr-json {
  border: 1px solid var(--wxr-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--wxr-surface);
}

.wxr-json--empty {
  padding: 12px 14px;
  color: var(--wxr-text-hint);
  font-style: italic;
  font-size: 13px;
}

.wxr-json__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--wxr-card-header-bg);
  border-bottom: 1px solid var(--wxr-border);
}

.wxr-json__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--wxr-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wxr-json__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  color: var(--wxr-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.wxr-json__copy-btn:hover {
  background: var(--wxr-surface);
  border-color: var(--wxr-border-em);
  color: var(--wxr-text);
}

.wxr-json__copy-btn:active {
  background: var(--wxr-card-header-bg);
}

.wxr-json__copy-label {
  font-size: 11px;
  font-weight: 500;
}

.wxr-json__body {
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  background: var(--wxr-surface);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--wxr-text);
  white-space: pre;
}

.wxr-json__body code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* Token-färger — anpassade till Wengine-paletten, hög kontrast på vit bakgrund. */
.wxr-json__key    { color: var(--wxr-nav); font-weight: 500; }
.wxr-json__string { color: var(--wxr-code-string); }
.wxr-json__number { color: var(--wxr-code-number); }
.wxr-json__bool   { color: var(--wxr-code-bool); font-weight: 500; }
.wxr-json__null   { color: var(--wxr-code-null); font-style: italic; }
.wxr-json__punct  { color: var(--wxr-text-hint); }

/* ============================================================
 * WxrDateRangePresets — datumintervall med preset-snabbval.
 * Trigger-knapp + popover med preset-list + två native date inputs.
 * ============================================================ */
.wxr-daterange {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.wxr-daterange__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--wxr-text-muted);
}

.wxr-daterange__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  min-height: 32px;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  color: var(--wxr-text-hint);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  white-space: nowrap;
}

.wxr-daterange__trigger:hover:not(:disabled) {
  border-color: var(--wxr-border-em);
}

.wxr-daterange__trigger:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: 2px;
}

.wxr-daterange__trigger:disabled {
  background: var(--wxr-card-header-bg);
  cursor: not-allowed;
  opacity: 0.65;
}

.wxr-daterange__trigger--has-value {
  color: var(--wxr-text);
  border-color: var(--wxr-border-em);
}

.wxr-daterange__trigger > i:first-child {
  color: var(--wxr-text-hint);
}

.wxr-daterange__trigger-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wxr-daterange__trigger-caret {
  font-size: 12px;
  color: var(--wxr-text-hint);
}

/* Click-utanför catch */
.wxr-daterange__overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 998;
}

.wxr-daterange__popover {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 999;
  display: flex;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: 8px;
  box-shadow: var(--wxr-shadow-lg);
  overflow: hidden;
  min-width: 440px;
}

/* Align mot trigger-knappens vänsterkant — popovern växer åt höger.
   Default. */
.wxr-daterange__popover--start {
  left: 0;
  right: auto;
}

/* Align mot trigger-knappens högerkant — popovern växer åt vänster.
   Använd när knappen ligger till höger i sin container. */
.wxr-daterange__popover--end {
  right: 0;
  left: auto;
}

.wxr-daterange__presets {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--wxr-card-header-bg);
  border-right: 1px solid var(--wxr-border);
  min-width: 160px;
}

.wxr-daterange__preset {
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  text-align: left;
  font-size: 13px;
  color: var(--wxr-text);
  cursor: pointer;
  transition: background 0.1s;
}

.wxr-daterange__preset:hover {
  background: var(--wxr-surface);
}

.wxr-daterange__preset--active {
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
  font-weight: 500;
}

.wxr-daterange__preset--active:hover {
  background: var(--wxr-nav-solid);
}

.wxr-daterange__custom {
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 14px;
  flex: 1 1 auto;
}

.wxr-daterange__custom-row {
  display: flex;
  gap: 10px;
}

.wxr-daterange__custom-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wxr-text-hint);
  flex: 1 1 0;
}

.wxr-daterange__input {
  padding: 6px 8px;
  border: 1px solid var(--wxr-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--wxr-text);
  font-family: inherit;
}

.wxr-daterange__input:focus {
  outline: none;
  border-color: var(--wxr-nav);
  box-shadow: 0 0 0 3px var(--wxr-focus-glow);
}

.wxr-daterange__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--wxr-border);
  padding-top: 10px;
  margin-top: auto;
}

.wxr-daterange__action {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.wxr-daterange__action--ghost {
  background: transparent;
  border-color: var(--wxr-border);
  color: var(--wxr-text-muted);
}

.wxr-daterange__action--ghost:hover {
  background: var(--wxr-card-header-bg);
}

.wxr-daterange__action--primary {
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
  border-color: var(--wxr-nav);
}

.wxr-daterange__action--primary:hover {
  background: var(--wxr-nav-solid-hover);
}

/* ── ARCHIVE VIEW SELECT ──
   Lookup-dropdown "Aktiva | Arkiverade" via WxrSelect. Sätter en
   förutsägbar bredd så toggle inte expanderar till hela ExtraContent-slot. */
.wxr-archive-view-select {
  display: inline-block;
}
.wxr-archive-view-select__select {
  min-width: 160px;
}

/* Arkiv-vyn använder samma node-stil men med arkiv-färgad icon för tydlighet. */
.wxr-category-tree--archived .wxr-category-tree__node--archived {
  --wxr-cat-depth: 0;
  opacity: 0.85;
}

.wxr-category-tree--archived .wxr-category-tree__node--archived:hover {
  opacity: 1;
}

/* ── BLAZOR RECONNECT MODAL ──────────────────────────────────────────────
   Ersätter Blazors fula standard-banner med en centrerad modal med backdrop.
   Blazor växlar klasser på #components-reconnect-modal:
     .components-reconnect-show     → försöker återansluta
     .components-reconnect-failed   → misslyckades (visa Ladda om-knapp)
     .components-reconnect-rejected → avvisad (ladda om krävs)
   ─────────────────────────────────────────────────────────────────────── */

#components-reconnect-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--wxr-scrim-strong);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
  animation: wxr-reconnect-fade-in 0.2s ease;
}

@keyframes wxr-reconnect-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wxr-reconnect__card {
  background: var(--wxr-surface);
  border-radius: 16px;
  box-shadow: var(--wxr-shadow-xl);
  padding: 40px 48px 36px;
  max-width: 400px;
  width: calc(100% - 48px);
  text-align: center;
  animation: wxr-reconnect-scale-in 0.25s cubic-bezier(0.16,1,0.3,1);
}

@keyframes wxr-reconnect-scale-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.wxr-reconnect__logo {
  height: 44px;
  width: auto;
  margin-bottom: 28px;
}

.wxr-reconnect__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--wxr-text);
  margin: 0 0 8px;
  line-height: 1.3;
}

.wxr-reconnect__body {
  font-size: 14px;
  color: var(--wxr-text-hint);
  margin: 0;
  line-height: 1.6;
}

.wxr-reconnect__actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.wxr-reconnect__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s, box-shadow 0.15s;
}
.wxr-reconnect__btn--primary {
  background: var(--wxr-nav-solid);
  color: var(--wxr-text-on-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--wxr-nav) 25%, transparent);
}
.wxr-reconnect__btn--primary:hover {
  background: var(--wxr-nav-solid-hover);
  color: var(--wxr-text-on-color);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--wxr-nav) 35%, transparent);
}

/* Loader-dots animation för "återansluter…" */
.wxr-reconnect__dots {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  margin-left: 6px;
}
.wxr-reconnect__dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wxr-nav);
  animation: wxr-bounce 1.2s infinite ease-in-out;
}
.wxr-reconnect__dots span:nth-child(2) { animation-delay: .2s; }
.wxr-reconnect__dots span:nth-child(3) { animation-delay: .4s; }
@keyframes wxr-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-6px); }
}

/* Dölj per default de sektioner som inte är relevanta för aktuellt state */
#components-reconnect-modal .wxr-reconnect--show    { display: none; }
#components-reconnect-modal .wxr-reconnect--failed  { display: none; }
#components-reconnect-modal .wxr-reconnect--rejected{ display: none; }

#components-reconnect-modal.components-reconnect-show     .wxr-reconnect--show     { display: block; }
#components-reconnect-modal.components-reconnect-failed   .wxr-reconnect--failed   { display: block; }
#components-reconnect-modal.components-reconnect-rejected .wxr-reconnect--rejected { display: block; }

/* Blazor unhandled-error-banner. Måste vara dold tills Blazor vid ett faktiskt fel
   sätter inline "display: block" (som vinner via specificitet). Utan display:none-regeln
   — som standardmallens site.css annars äger, men som saknas i värdarnas asset-uppsättning —
   syns bannern permanent på varje sida och maskerar dessutom riktiga fel. */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .7rem 1.25rem;
  background: var(--wxr-danger-strong);
  color: var(--wxr-text-on-color);
  box-shadow: 0 -1px 4px color-mix(in srgb, var(--wxr-header-bg) 25%, transparent);
  z-index: 1000;
}
#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
  color: var(--wxr-text-on-color);
  cursor: pointer;
  margin-left: .5rem;
  text-decoration: underline;
}

/* ============================================================
   Dashboard & diagram (startsidan + framtida statistiksidor)
   Diagramtokens är CVD-validerade ljusare steg ur varumärkeskulörerna
   (docs/plans/dashboard.md). Identitet bärs aldrig av enbart färg:
   staplade diagram har teckenförklaring och tooltips.
   ============================================================ */
:root {
    --wxr-chart-1: #3b76db;
    --wxr-chart-2: #128f5f;
    --wxr-chart-3: #d96300;

    /* CPQ:s flödesschema (wxr-cpq-rules.css) ritar en GRAF och inte gränssnittskrom, så
       det hör hemma här bredvid diagramfärgerna och inte i statusskalan. Två märken bär
       struktur och ingen status: romben som delar flödet, gruppnumret och villkorschippet
       (--flow-node), och behållaren för ELLER-grenar (--flow-any). De hade annars behövt
       tvingas in på --info respektive --warning, vilket mätt upp till dE 0,12, alltså en
       färgändring förklädd till städning.

       Schemats SEMANTISKA noder gör tvärtom: åtgärd, krav, nej-gren och ja-märket läser
       success/warning/danger, för de betyder samma sak där som överallt annars. */
    --wxr-cpq-flow-node: #2563eb;
    --wxr-cpq-flow-any:  #f59e0b;

    /* AVATARFÄRGERNA. En kategorisk IDENTITETSpalett: färgen väljs ur användarens namn och
       är hur man känner igen en person i en lista. Den följer därför aldrig temat, och
       heller inte kundens varumärke — samma person ska ha samma bricka i ljust och mörkt
       läge, precis som en profilbild inte byter ansikte.

       En token per avatar, inte två per toning: det som namnges är BRICKAN, och att den
       råkar vara en toning mellan två steg är hur den ritas. Åtta namn i stället för
       sexton, och en kund som vill ha egna brickor byter hela värdet. */
    --wxr-avatar-0: linear-gradient(135deg, #5b8def 0%, var(--wxr-nav) 100%);
    --wxr-avatar-1: linear-gradient(135deg, #6b73ff 0%, #3a3fcf 100%);
    --wxr-avatar-2: linear-gradient(135deg, #4cc9f0 0%, #178fbf 100%);
    --wxr-avatar-3: linear-gradient(135deg, #06d6a0 0%, #058a64 100%);
    --wxr-avatar-4: linear-gradient(135deg, #ffb627 0%, #d68907 100%);
    --wxr-avatar-5: linear-gradient(135deg, #f95d6a 0%, #c2243b 100%);
    --wxr-avatar-6: linear-gradient(135deg, #b56bff 0%, #7333d1 100%);
    --wxr-avatar-7: linear-gradient(135deg, #4f5d75 0%, #2d3142 100%);

    /* SYNTAXFÄRGERNA i JSON-visaren. Egen palett av samma skäl som flödesschemat: de bär
       DATATYP och inte status, så att peka dem på --success och --warning hade sagt att en
       sträng är bra och ett tal är en varning. Nyckel och skiljetecken läser --nav
       respektive --text-hint, alltså chromefärger, och står kvar där.

       Till skillnad från avatarerna SKA de här vända i ett mörkt läge: en syntaxpalett mot
       mörk botten är ljusare och mindre mättad. Den uppsättningen skrivs när temat byggs. */
    --wxr-code-string: #058a64;
    --wxr-code-number: #c2570b;
    --wxr-code-bool:   #7333d1;
    --wxr-code-null:   #9ca3af;

    /* ÖVERLÄGG PÅ ETT FOTO: zoommärket på en produktbild och markören i bildbeskärningen.
       De ligger inte på en av VÅRA ytor utan på kundens bild, vars färg vi inte känner
       till, och därför är de undantagna temat av samma skäl som ritytan. En vit platta
       och en svart skugga fungerar mot vilket motiv som helst; en temastyrd yta gör det
       inte. Rent svart och rent vitt är avsiktligt här, till skillnad från överallt
       annars i filen. */
    --wxr-overlay-chip:   rgba(255, 255, 255, 0.92);
    /* Mörk scrim PÅ ett foto: zoomikonen som läggs över artikelbilden. Följer inte temat,
       av samma skäl som de två ovan, och skiljs från --wxr-scrim som ska bli STARKARE i
       mörkt läge medan den här ska stå still. */
    --wxr-overlay-scrim:  rgba(0, 0, 0, 0.45);
    --wxr-overlay-shadow: rgba(0, 0, 0, 0.5);
}

/* Anslaget */
.wxr-dash-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--wxr-sidebar-bg);
    border: 1px solid var(--wxr-info-border-soft);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.wxr-dash-notice--warning {
    background: var(--wxr-orange-bg);
    border-color: var(--wxr-orange-border);
}
.wxr-dash-notice__icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wxr-link);
    color: var(--wxr-text-on-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
/* Fylld cirkel med VIT ikon, så färgen måste bära vit text. --orange-solid ger 2,57:1
   och faller under golvet 3:1; --warning-soft ger 5,02. Notisens förvalda ikon är --link
   i samma vikt, så varningsvarianten ska vara en orange av samma tyngd, inte en ljusare. */
.wxr-dash-notice--warning .wxr-dash-notice__icon { background: var(--wxr-warning-soft); }
.wxr-dash-notice__title { font-weight: 700; font-size: 14px; color: var(--wxr-text); }
.wxr-dash-notice__body { font-size: 13px; color: var(--wxr-text-muted); white-space: pre-line; margin-top: 2px; }
.wxr-dash-notice__meta { font-size: 11px; color: var(--wxr-text-hint); margin-top: 6px; }
.wxr-dash-notice__actions { margin-left: auto; flex: none; }

/* Nyckeltalsrutor */
.wxr-dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.wxr-stat-tile {
    background: var(--wxr-surface);
    border: 1px solid var(--wxr-border-em);
    border-radius: 6px;
    padding: 14px 16px;
}
.wxr-stat-tile--clickable { cursor: pointer; transition: border-color .12s ease; }
.wxr-stat-tile--clickable:hover,
.wxr-stat-tile--clickable:focus-visible { outline: 2px solid var(--wxr-focus-ring); outline-offset: 2px; }
.wxr-stat-tile__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wxr-text-hint);
}
.wxr-stat-tile__value { font-size: 26px; font-weight: 700; color: var(--wxr-text); margin-top: 2px; line-height: 1.15; }
.wxr-stat-tile__sub { font-size: 12px; color: var(--wxr-text-muted); }
.wxr-stat-tile__spark { display: block; width: 100%; height: 34px; margin-top: 6px; }
.wxr-stat-tile__spark path { stroke: var(--wxr-chart-1); stroke-width: 2; stroke-linecap: round; }
.wxr-stat-tile__spark circle { fill: var(--wxr-chart-1); stroke: var(--wxr-surface); stroke-width: 1.5; }

/* Dashboardens kortrader */
.wxr-dash-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.wxr-dash-grid--charts { grid-template-columns: 3fr 2fr; }
.wxr-dash-grid--lists { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1400px) {
    .wxr-dash-grid--lists { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
    .wxr-dash-grid--charts { grid-template-columns: 1fr; }
}

/* Diagram */
.wxr-chart { display: block; width: 100%; height: auto; }
.wxr-chart text { font-family: 'Lato', sans-serif; }
.wxr-chart__grid { stroke: var(--wxr-border); stroke-width: 1; }
.wxr-chart__axis { font-size: 10px; fill: var(--wxr-text-hint); }
.wxr-chart__axis--row { font-size: 11px; }
.wxr-chart__bar { fill: var(--wxr-chart-1); }
.wxr-chart__bar:hover, .wxr-chart__seg:hover { opacity: .85; }
.wxr-chart__dlabel { font-size: 10.5px; font-weight: 700; fill: var(--wxr-text); }
.wxr-chart__legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--wxr-text-muted); margin-top: 6px; }
.wxr-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.wxr-chart__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wxr-chart-sub { font-size: 12px; color: var(--wxr-text-hint); margin: -4px 0 10px; }

/* Att göra- och senaste-listor */
/* ── FÄRGAT ORD (WxrColorChip) ────────────────────────────────────────────────
   Bakgrunden kommer som en inline-variabel eftersom den är DATA; textfärgen likaså,
   men räknad av komponenten ur bakgrundens luminans. Utan färg faller båda tillbaka
   på husets neutrala ton, så ett chip utan färg är ett chip och inte ett hål. */
.wxr-color-chip {
  display: inline-block;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--wxr-f-label);
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--wxr-color-chip-bg, var(--wxr-text-hint));
  color: var(--wxr-color-chip-fg, var(--wxr-text-on-color));
}

/* Kortets täta läge: samma chip, mindre av det. */
.wxr-color-chip--sm {
  padding: 0 6px;
  font-size: 10px;
  line-height: 16px;
}

.wxr-dash-list { list-style: none; margin: 0; padding: 0; }
.wxr-dash-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--wxr-border);
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}
.wxr-dash-list__item:last-child { border-bottom: 0; }
a.wxr-dash-list__item:hover .wxr-dash-list__title { color: var(--wxr-link); }
.wxr-dash-list__title { font-weight: 700; }
.wxr-dash-list__meta { font-size: 12px; color: var(--wxr-text-hint); }
.wxr-dash-list__value { margin-left: auto; font-weight: 700; white-space: nowrap; }
.wxr-dash-list__count {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--wxr-border);
    color: var(--wxr-link);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wxr-dash-list__count--warn { background: var(--wxr-orange-bg); color: var(--wxr-warning-soft); }

/* ── Expanderbar att göra-rad (DashboardTodoRow) ──
   Raden är en <button> som fäller ut posterna bakom siffran. Layouten speglar
   .wxr-dash-list__item; list-item-paddingen flyttar in i knappen så träffytan
   blir hela raden. */
.wxr-dash-list__item--todo { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.wxr-dash-list__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.wxr-dash-list__toggle:hover .wxr-dash-list__title,
.wxr-dash-list__toggle:focus-visible .wxr-dash-list__title { color: var(--wxr-link); }
.wxr-dash-list__toggle:focus-visible { outline: 2px solid var(--wxr-focus-ring); outline-offset: -2px; }
.wxr-dash-list__toggle-text { display: flex; flex-direction: column; min-width: 0; }
.wxr-dash-list__chevron { margin-left: auto; font-size: 12px; color: var(--wxr-text-hint); }

.wxr-dash-sublist { list-style: none; margin: 0 0 8px; padding: 0 0 0 38px; }
.wxr-dash-sublist__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
}
.wxr-dash-sublist__item:hover .wxr-dash-sublist__label { color: var(--wxr-link); text-decoration: underline; }
.wxr-dash-sublist__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wxr-dash-sublist__date { margin-left: auto; font-size: 12px; color: var(--wxr-text-hint); white-space: nowrap; }
.wxr-dash-sublist__more { font-size: 12px; color: var(--wxr-text-hint); padding: 4px 0; }

.wxr-dash-empty { font-size: 13px; color: var(--wxr-text-hint); padding: 8px 0; }

/* ============================================================
   Mediabiblioteket (/admin/media) — kortrutnät + detaljpanel
   ============================================================ */
.wxr-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.wxr-media-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--wxr-surface);
    border: 1px solid var(--wxr-border-em);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color .12s ease;
}
.wxr-media-card:hover,
.wxr-media-card:focus-visible { outline: 2px solid var(--wxr-focus-ring); outline-offset: 2px; }
/* Markerat kort i väljarens flerval. Accentfärgen är åtgärdsfärgen, samma som
   primärknappen — hover-blått får inte kunna förväxlas med "vald". */
.wxr-media-card.is-selected {
    border-color: var(--wxr-accent);
    box-shadow: 0 0 0 1px var(--wxr-accent);
}
.wxr-media-card__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    background: var(--wxr-surface-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.wxr-media-card__check {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wxr-accent-solid);
    color: var(--wxr-text-on-color);
    font-size: 12px;
}
.wxr-media-card__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wxr-media-card__thumb i { font-size: 34px; color: var(--wxr-text-hint); }
.wxr-media-card__name {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wxr-media-card__meta { font-size: 11px; color: var(--wxr-text-hint); }
.wxr-media-card__badges { display: flex; gap: 6px; align-items: center; }
.wxr-media-card__chip {
    font-size: 11px;
    font-weight: 700;
    color: var(--wxr-text-hint);
    background: var(--wxr-surface-tertiary);
    border-radius: 999px;
    padding: 1px 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.wxr-media-card__chip--draft { background: var(--wxr-orange-bg); color: var(--wxr-warning-soft); }
.wxr-media-empty { padding: 28px 4px; color: var(--wxr-text-hint); font-size: 14px; }
.wxr-load-more { display: flex; justify-content: center; margin-top: 16px; }

/* Fokuspunkten: knappen krymper till bildens FAKTISKA yta (line-height 0 tar bort
   radhöjden runt <img>), så den normaliserade klickpositionen mäts mot bilden och
   inte mot en ruta med marginal. */
.wxr-media-focal {
    position: relative;
    display: inline-block;
    line-height: 0;
    padding: 0;
    border: 0;
    background: none;
    max-width: 100%;
}
.wxr-media-focal.is-editable { cursor: crosshair; }
.wxr-media-focal img { max-width: 100%; max-height: 320px; }
/* Markören är ett hårkors, inte en prick: en prick döljer just det motiv man siktar på. */
.wxr-media-focal__marker {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--wxr-text-on-color);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--wxr-accent), 0 1px 4px var(--wxr-overlay-shadow);
    pointer-events: none;
}
.wxr-media-focal-previews {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.wxr-media-focal-previews__label { font-size: 12px; color: var(--wxr-text-hint); align-self: center; }
.wxr-media-focal-previews__item { margin: 0; text-align: center; }
.wxr-media-focal-previews__item img {
    display: block;
    width: 96px;
    height: auto;
    border-radius: 4px;
    background: var(--wxr-surface-tertiary);
}
.wxr-media-focal-previews__item figcaption { font-size: 11px; color: var(--wxr-text-hint); margin-top: 2px; }

.wxr-media-detail { display: flex; flex-direction: column; gap: 16px; }
.wxr-media-detail__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wxr-surface-tertiary);
    border-radius: 6px;
    min-height: 140px;
    max-height: 320px;
    overflow: hidden;
}
.wxr-media-detail__preview img { max-width: 100%; max-height: 320px; object-fit: contain; }
.wxr-media-detail__preview i { font-size: 48px; color: var(--wxr-text-hint); padding: 40px 0; }
.wxr-media-detail__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--wxr-text-hint);
    border-top: 1px solid var(--wxr-border);
    padding-top: 10px;
}

/* Nedladdningen hör till FILEN och inte till redigeringen, så den står i
   faktaraden och inte i commit-foten. Den är dessutom en riktig länk, inte en
   åtgärd, vilket syns på att den bär Href och inte OnClick.

   IKONKNAPP och inte textknapp: raden är 12px hjälptext, och en 30px textknapp i
   den är fel vikt. Den flyter dessutom med raden utan margin-left: auto, för med
   auto-marginalen bröt den till en egen rad så fort metadatan blev lång, och
   hamnade halvt under foten. */
.wxr-media-detail__facts .wxr-icon-btn {
    margin-left: 2px;
}
.wxr-media-detail__usages-title { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.wxr-media-usage-kind {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--wxr-link);
    background: var(--wxr-border);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* Mediaväljaren (WxrMediaPicker) */
.wxr-media-picker__search { margin-bottom: 10px; }
.wxr-media-picker__body { max-height: 52vh; overflow-y: auto; }
.wxr-media-grid--picker { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* Kategoriadministrationen: en rad per kategori, namnfältet tar bredden och
   åtgärderna ligger till höger (samma ordning som radåtgärder i listvyerna). */
.wxr-category-manager { display: flex; flex-direction: column; gap: 8px; }
.wxr-category-manager__row { display: flex; align-items: center; gap: 8px; }
.wxr-category-manager__row > :first-child { flex: 1 1 auto; min-width: 0; }
.wxr-category-manager__row .wxr-inline-actions { flex: 0 0 auto; }

/* Bulkraden: syns bara när något är markerat, ligger mellan verktygsraden och
   rutnätet så vyn inte hoppar. */
.wxr-media-bulkbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 12px;
    background: var(--wxr-nav-light);
    border: 1px solid var(--wxr-border); border-radius: 8px;
}
.wxr-media-bulkbar__count { font-weight: 600; }
.wxr-media-bulkbar .wxr-inline-actions { margin-left: auto; align-items: center; }
/* Kategoriväljaren krympte till innehållet i flexraden, så dropdown-pilen låg
   ovanpå platshållartexten. Min-bredden sitter på select-elementet och inte på
   .wxr-field, eftersom taggfältet bredvid delar den wrappern. */
.wxr-media-bulkbar__category { min-width: 200px; }

/* Släppzonen ligger ovanpå rutnätet och renderas BARA under ett drag — annars
   hade den transparenta InputFile-ytan ätit varje klick på ett kort. */
/* min-height: på ett TOMT bibliotek är rutnätet 0 px högt, och då finns ingen yta
   som kan ta emot ett dragenter — släppet blir omöjligt just när det behövs mest. */
.wxr-media-grid-wrap { position: relative; min-height: 160px; }

/* Inputen ligger alltid i DOM:en (den får inte rivas mitt i ett släpp) men är
   bortkopplad tills ett drag pågår, annars äter den varje klick på korten. */
.wxr-media-drop-input {
    position: absolute; inset: 0; z-index: 6;
    opacity: 0; pointer-events: none; cursor: copy;
}
.wxr-media-drop-input.is-armed { pointer-events: auto; }
.wxr-media-dropzone {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: color-mix(in srgb, var(--wxr-surface) 88%, transparent);
    border: 2px dashed var(--wxr-nav); border-radius: 10px;
    color: var(--wxr-nav); font-weight: 600; pointer-events: none;
}
.wxr-media-dropzone .bi { font-size: 2rem; }

/* Markeringshandtaget: egen träffyta i kortets hörn, så kortklicket fortsätter
   betyda "öppna detaljen". */
/* WxrCardCheck: markeringsrutan på ett valbart kort. Ikonen och inte fältets
   kryssruta — rutan ligger mot en bild och måste läsa mot vad som helst, så den är
   stor och har en egen platta under sig.

   Storlek och färg sätts på ikonen med en klass och inte via arv: .wxr-media-card__thumb i
   sätter 34px och --text-hint på VARJE ikon i miniatyren, och den regeln (0,1,1) vinner
   över arv från handtaget. Rutan fick sin storlek därifrån, alltså av en regel som
   egentligen gäller ikonfallbacken för en fil utan förhandsbild. Samma 34px står kvar
   här, nu uttalat, så komponenten ser likadan ut på en yta utan den regeln.

   Plattan är lika stor som rutan man ser (30px mot ikonens ~30px ritade fyrkant), och
   det är också träffytan. Den var förut 24px medan ikonen ritades 34px, så kanterna av
   rutan såg klickbara ut utan att vara det. */
.wxr-card-check {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; cursor: pointer;
    background: color-mix(in srgb, var(--wxr-surface) 85%, transparent);
    transition: background .12s ease;
}
.wxr-card-check:hover, .wxr-card-check:focus-visible { background: var(--wxr-surface); }

.wxr-card-check .bi {
    font-size: 34px;
    line-height: 1;
    color: var(--wxr-text-hint);
}

/* Markerat läge bärs av den FYLLDA ikonen, plus kortets accentram runt om. Ingen egen
   färg på bocken: kortet är redan grönt när det är valt, och en tredje färg i hörnet
   säger inget rutan inte redan säger. */

/* Placeringen ägs av kortet, inte av kryssrutan. */
.wxr-media-card__select { position: absolute; top: 6px; left: 6px; z-index: 2; }

.wxr-media-grid--picker .wxr-media-card__thumb { height: 90px; }

/* Artikelbilder: primärbild + ordning, och miniatyr i artikellistan */
.wxr-article-media__item { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.wxr-article-media__primary {
    position: absolute;
    left: 4px;
    bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--wxr-text-on-color);
    background: var(--wxr-link);
    border-radius: 999px;
    padding: 1px 7px;
}
.wxr-article-list__thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--wxr-surface-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wxr-article-list__thumb--empty i { color: var(--wxr-text-hint); font-size: 18px; }

/* Miniatyren i artikellistan är en knapp som öppnar WxrImageLightbox. Knappen bär
   ingen egen yta, bara bilden och förstoringsglaset som tänds vid hover/fokus. */
.wxr-article-list__thumb-zoom {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: 4px;
    line-height: 0;
}
.wxr-article-list__thumb-zoom:focus-visible {
    outline: 2px solid var(--wxr-focus-ring);
    outline-offset: 2px;
}
.wxr-article-list__thumb-zoom__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--wxr-overlay-scrim);
    color: var(--wxr-text-on-color);
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}
.wxr-article-list__thumb-zoom:hover .wxr-article-list__thumb-zoom__icon,
.wxr-article-list__thumb-zoom:focus-visible .wxr-article-list__thumb-zoom__icon { opacity: 1; }

/* Video + posterbild i mediabibliotekets detaljpanel */
.wxr-media-detail__preview video { max-width: 100%; max-height: 320px; }
.wxr-media-detail__poster { display: flex; align-items: center; gap: 10px; }
.wxr-media-detail__poster img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--wxr-border-em);
}

/* ── WxrImageSelect: bildväljare med utfällbart rutnät ──────────────────────
   Stängt läge är ett kort i ungefär WxrRadioCards höjd (miniatyr + två textrader).
   Utfällningen är en Bootstrap-dropdown: Popper håller den innanför fönsterkanten,
   och .show är det som gör den till ett rutnät. Ordningen spelar roll — den här
   filen laddas EFTER bootstrap.min.css i _Host.cshtml, så .wxr-imgselect__menu.show
   vinner över .dropdown-menu.show (lika specificitet, senare källa). */
.wxr-imgselect {
    /* Default här och INTE på menyn: värdet sätts som inline-style på höljet och ärvs
       ner. En egen deklaration på menyn hade skuggat det ärvda värdet. */
    --wxr-imgselect-cols: 1;
    min-width: 0;
}

/* Kontrollen bär .dropdown (Bootstrap: position: relative), så den är både
   ankare och containing block för menyn. INGEN overflow: hidden här — den hade
   klippt utfällningen. Miniatyren rundar därför sina egna hörn. */
.wxr-choicefield {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    background: var(--wxr-surface);
    border: 1px solid var(--wxr-border-em);
    border-radius: var(--wxr-radius);
}

.wxr-choicefield:focus-within {
    border-color: var(--wxr-nav);
    box-shadow: 0 0 0 3px var(--wxr-focus-glow);
}

/* Hover på hela kontrollen, som på ett vanligt fält: den ska svara på att den går
   att öppna. :not(:focus-within) så hover-ramen inte skriver över fokusramen, och
   :not(.is-invalid) så den inte skriver över den RÖDA ramen — hover har högre
   specificitet än is-invalid-regeln och hade annars gjort ett obligatoriskt tomt
   fält blått så fort pekaren rörde det, med felmeddelandet kvar under. */
/* Lägena sitter på FÄLTET och inte på höljet. Var scopade under .wxr-imgselect, vilket
   betydde att en andra värd (artikelmodalens fält) fick allt utom hover, ogiltigt och
   inaktiverat — alltså såg likadan ut ända tills något hände. Reglerna ska höra till det
   element de färgar. */
.wxr-choicefield:not(.is-disabled):not(.is-invalid):hover:not(:focus-within) {
    border-color: var(--wxr-nav);
}

.wxr-choicefield.is-invalid {
    border-color: var(--wxr-danger);
}

.wxr-choicefield.is-disabled {
    background: var(--wxr-surface-secondary);
}

/* Miniatyren: egen knapp (förstoring), fast bredd så texten börjar på samma
   x-position oavsett om posten har bild. */
.wxr-choicefield__zoom {
    position: relative;
    flex: 0 0 auto;
    /* EXPLICIT höjd, lika med togglens. Utan den föll bildens height:100% tillbaka på auto
       (procent mot en obestämd höjd), så bildens naturliga höjd blev flexradens höjd och
       HELA fältet växte så fort något var valt. Ett fält som byter höjd av ett val flyttar
       allt under sig i formuläret. */
    height: 70px;
    /* Liggande yta mot kontrollens 70px-höjd: liggande bilder är det vanliga, så
       miniatyren är bredare än hög. Håll den i takt med toggle-höjden om den ändras.

       TAKET PÅ 30% är det som gör fältet användbart på en kolumns bredd. Resten av
       bredden är uppbunden: 10px vänsterpadding och 52px till höger åt rensa-knappen och
       chevronen. Med fast 96px blev det i ett 196px-fält 36px text, alltså "Kar…" som
       namn, "GSM…" som artikelnummer och "+12 …" som pris. Andelen räknas mot fältet, så
       den är verkningslös så fort det finns plats: vid två kolumner ligger 30% redan över
       96 och miniatyren står kvar i full bredd. */
    width: min(96px, 30%);
    padding: 0;
    border: none;
    border-right: 1px solid var(--wxr-border);
    /* Kontrollen kan inte klippa (overflow måste vara synligt för menyn), så
       miniatyren rundar sina egna vänsterhörn mot fältets ram. */
    border-radius: calc(var(--wxr-radius) - 1px) 0 0 calc(var(--wxr-radius) - 1px);
    /* Vit, inte grå: samma skäl som kortens bildrutor — produktbilder bär egen
       bakgrund och en grå platta runt dem läses som ett fel. Kantlinjen till höger
       räcker som avgränsning. */
    background: var(--wxr-surface);
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wxr-choicefield__zoom:disabled { cursor: default; }

/* Motivet CENTRERAS i rutan (vågrätt och lodrätt). Rutan är vänsterställd i fältet,
   men bilden inuti den ska ligga i mitten: en liggande bild fyller bredden ändå, och en
   stående som klistras mot vänsterkanten ser ut som ett fel i stället för ett val. */
.wxr-choicefield__zoom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 4px;
}

/* Större än postikonen (22px): den här ikonen är hela innehållet i en 96x70-ruta, och
   en liten ikon i en stor vit ruta läste som att fältet var lägre än det är. */
/* Valt värde som är en färg: rutan fylls med färgen, samma som kortet i listan. */
.wxr-choicefield__zoom-swatch {
    display: block;
    width: 100%;
    height: 100%;
}

.wxr-choicefield__zoom-empty i {
    font-size: 30px;
    color: var(--wxr-text-hint);
}

/* Förstoringsglaset ligger i hörnet av miniatyren, som i en bildbank: det ska
   synas att bilden går att öppna utan att täcka motivet. */
.wxr-choicefield__zoom-badge {
    position: absolute;
    left: 3px;
    bottom: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: var(--wxr-overlay-chip);
    border: 1px solid var(--wxr-border-em);
    color: var(--wxr-text-muted);
    font-size: 10px;
    line-height: 1;
}

.wxr-choicefield__zoom:hover:not(:disabled) .wxr-choicefield__zoom-badge {
    background: var(--wxr-surface);
    color: var(--wxr-nav);
    border-color: var(--wxr-nav);
}

/* Triggern: två textrader + chevron. Höjden sätter kontrollens resning, och
   miniatyren fyller den höjden — därför styr den här siffran hur stor bilden blir.
   padding-right lämnar plats för rensa-knappen och chevronen, som båda ligger
   absolut placerade i kontrollens högerkant.

   FAST höjd, inte min-height: fältet ska vara exakt lika högt tomt som med ett val.
   Med min-height växte kontrollen från 72 till 77px så snart ett långt produktnamn tog
   två rader och artikelnummer + pris radbröt under det (uppmätt i en 190px-kolumn), och
   fälten i formuläret hoppade när man valde. Texten klipps i stället, och regeln nedan
   ser till att det inte behövs. */
.wxr-choicefield__toggle {
    flex: 1 1 auto;
    min-width: 0;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 52px 8px 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.wxr-choicefield__toggle:disabled { cursor: default; }

/* Bootstraps .dropdown-toggle-caret är inte med (ingen ::after), chevronen är ett
   eget element som roterar när menyn står öppen. Absolut placerad i TRIGGERNS högerkant
   (triggern fyller kontrollen), så rensa-knappen får plats mellan texten och den. */
.wxr-choicefield__toggle { position: relative; }

.wxr-choicefield__toggle .wxr-choicefield__caret {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--wxr-text-hint);
    transition: transform 0.12s ease-out;
}

/* Rotationen måste behålla centreringen: transform ersätts, inte adderas. */
.wxr-choicefield__toggle.show .wxr-choicefield__caret {
    transform: translateY(-50%) rotate(180deg);
}

/* Gör valet ogjort. Absolut placerad strax till vänster om chevronen: läsordningen
   blir text, ×, ▾ utan att chevronen behöver flyttas ut ur triggern (och därmed
   tappa sitt klick). Triggerns padding-right håller texten fri från båda. */
.wxr-choicefield__clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--wxr-radius);
    background: transparent;
    color: var(--wxr-text-hint);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.wxr-choicefield__clear:hover {
    background: var(--wxr-surface-secondary);
    color: var(--wxr-danger);
}

.wxr-choicefield__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* Fast triggerhöjd: det som inte ryms klipps i stället för att spränga fältet. */
    overflow: hidden;
}

/* Med metarad räcker EN titelrad. Höjden är fast, och då är det namnet som får ge plats
   åt artikelnummer och pris — namnet står ändå oavkortat i listan under, medan priset
   inte står någon annanstans i stängt läge. Räknat i den smalaste formulärkolumnen:
   titel 19 + 2 + metarad som radbryter 36 = 57 px, alltså inom de 70. */
.wxr-choicefield__text:has(.wxr-choicefield__meta) .wxr-choicefield__title {
    -webkit-line-clamp: 1;
}

.wxr-choicefield__title {
    font-size: var(--wxr-f-sm);
    font-weight: 600;
    color: var(--wxr-text);
    /* Två rader räcker för ett produktnamn i en smal formulärkolumn; längre än så
       klipps med ellips i stället för att växa kontrollen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Artikelnummer + prisetikett. flex-wrap: i den smalaste formulärkolumnen (tre
   kolumner i en halv sida ≈ 190 px) klipptes annars artikelnumret till "URT…" för att
   ge plats åt priset. Nu flyttar priset ned på egen rad i stället. */
.wxr-choicefield__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
}

.wxr-choicefield__sub,
.wxr-choice-card__sub {
    font-size: 12px;
    color: var(--wxr-text-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ellips och min-width: 0 — utan dem kan etiketten inte krympa, och i den smalaste
   formulärkolumnen klipptes "+112 500 kr" tyst till "+112 5", alltså ett annat tal.
   Med ellips syns det att texten är avkortad. */
.wxr-choicefield__badge,
.wxr-choice-card__badge {
    font-size: 12px;
    font-weight: 500;
    color: var(--wxr-text-muted);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wxr-choicefield__placeholder {
    font-size: var(--wxr-f-sm);
    font-style: italic;
    color: var(--wxr-text-hint);
}

/* Utfällningen. display: none/grid styrs av Bootstraps .show. Bredden växer med
   kolumnantalet: 1 = kontrollens bredd, fler = bredare än kontrollen (Popper
   skjuter in den i fönstret när den inte får plats åt höger). */
.wxr-imgselect__menu {
    display: none;
    min-width: 100%;
    /* 210px per kolumn (var 186): korten ska rymma en liggande bild i full bredd. */
    width: max(100%, calc(var(--wxr-imgselect-cols) * 210px));
    max-width: min(88vw, 860px);
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    margin: 0;
    border: 1px solid var(--wxr-border-em);
    border-radius: var(--wxr-radius-lg);
    box-shadow: var(--wxr-shadow-lg);
}

/* Menyn bär bredd, position och skugga; LAYOUTEN ligger i .wxr-choice-grid inuti den.
   Uppdelningen gjordes när kortrutnätet blev en egen komponent: samma rutnät ska kunna
   stå i en modal, där det inte finns någon dropdown-meny att vara. */
.wxr-imgselect__menu.show { display: block; }

/* Kortrutnätet. Delas av bildväljarens utfällning och artikelmodalen. Kolumnantalet är ett
   custom property och sätts av komponenten; radläget (en kolumn) är en klass, för en
   selektor kan inte läsa ett custom propertys värde. */
.wxr-choice-grid {
    display: grid;
    grid-template-columns: repeat(var(--wxr-choice-cols, 1), minmax(0, 1fr));
    gap: 8px;
}

/* Responsivt läge: så många kolumner som ryms, färre när fönstret smalnar. Ersätter ett
   kolumnantal som modelleraren annars hade fått gissa åt varje skärm som någonsin öppnar
   modellen. auto-fill och inte auto-fit: en halvtom sista rad ska behålla kortbredden i
   stället för att blåsa upp två kort till halva fönstret. */
.wxr-choice-grid.is-fluid {
    grid-template-columns: repeat(auto-fill, minmax(var(--wxr-choice-min, 175px), 1fr));
    /* Raderna är lika höga oavsett hur långa namnen är. auto hade låtit den rad som råkar
       innehålla ett tvåradigt namn bli högre än de andra. Höjden kommer från komponenten:
       ett rutnät utan bilder sätter auto, annars hade varje namn fått en bildruta i luft. */
    grid-auto-rows: var(--wxr-choice-row, 248px);
}

/* Bilden fyller kortets BREDD och sitter i överkanten, som i förlagan. Den var indragen
   med egen ram och rundade hörn inne i kortet, vilket gav en ram i en ram och lämnade en
   ojämn vit remsa runt varje motiv. Nu är kortets ram den enda, och bilden möter den. */
.wxr-choice-grid.is-fluid .wxr-choice-card__img {
    /* flex: 0 0 — INGEN krympning. Kortet är en flexkolumn, så ett tvåradigt namn tog
       annars höjd från bilden och gav 131px där grannen hade 148. Bildytan är det som ska
       vara lika i hela rutnätet; det är texten som får anpassa sig. */
    flex: 0 0 148px;
    height: 148px;
    /* Padding RUNT bilden, inte kant i kant. Kant i kant såg renare tomt, men på ett valt
       kort kunde den gröna markeringen då inte gå runt bilden — den bröts av bildens egen
       kant upptill och på sidorna, och valet såg halvt ut. Ramen runt bilden är kortets
       innerkant och markeringen ligger utanför den. */
    margin: 0;
    border: 1px solid var(--wxr-border);
    border-radius: var(--wxr-radius);
    background: var(--wxr-surface-secondary);
}

/* Kortet fyller sin rutnätscell. Utan bredden krympte ett kort UTAN bild till sin ikon,
   och stod som en smal remsa bredvid grannar i full bredd. */
.wxr-choice-grid.is-fluid .wxr-choice-card,
.wxr-choice-grid.is-fluid .wxr-choice-card__pick {
    width: 100%;
}

/* Texten får luft och ligger vänsterställd under bilden, inte centrerad mot den. */
.wxr-choice-grid.is-fluid .wxr-choice-card__text {
    padding: 4px 2px 0;
    text-align: left;
}

/* Namn och nummerrad hör ihop och ska stå ihop. Titeln bar margin-bottom:auto, alltså sköt
   den nummerraden till kortets underkant och lämnade ett hål mitt i kortet. Överskottet
   ligger nu under båda i stället för mellan dem. */
.wxr-choice-grid.is-fluid .wxr-choice-card__title { margin-bottom: 0; }
.wxr-choice-grid.is-fluid .wxr-choice-card__meta { margin-top: 2px; }

/* Namnet får två rader och klipps sedan, så kortet håller sin höjd. */
.wxr-choice-grid.is-fluid .wxr-choice-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wxr-choice-grid__empty {
    grid-column: 1 / -1;
    padding: 10px 6px;
    font-size: var(--wxr-f-sm);
    color: var(--wxr-text-hint);
}

.wxr-choice-card {
    position: relative;
    min-width: 0;
}

/* Alla kort i ett RUTNÄT är lika höga: raden sätts av det längsta namnet annars, och en
   rad med olika höga kort läser som trasig layout. Kortet är i stället lika högt överallt
   och namn som inte får plats klipps med ellips (två rader, se __title nedan).
   Gäller inte radläget, där kortet ÄR en rad. */
.wxr-choice-grid:not(.is-rows) .wxr-choice-card,
.wxr-choice-grid:not(.is-rows) .wxr-choice-card__pick,
.wxr-choice-grid:not(.is-rows) .wxr-choice-card__pick {
    height: 100%;
}

.wxr-choice-grid:not(.is-rows) .wxr-choice-card__text {
    flex: 1 1 auto;
}

/* Kortet: samma formspråk som CPQ:s CARDS-kort, men hela kortet är en knapp och
   ligger i ett rutnät i stället för att flöda. */
/* Klassen dropdown-item stod tidigare i varenda selektor här. Den finns BARA i utfällningen
   (Bootstrap kräver den för tangentbordsnavigering i menyn), så modalens kort fick ingen av
   reglerna alls och föll tillbaka på en vanlig knapp: ingen kolumnlayout, ingen ram, ingen
   vald-markering. Kortets utseende hör till kortet. Behöver Bootstrap-varianten en override
   skrivs den separat, inte som villkor för grundstilen. */
.wxr-choice-card__pick {
    /* En <button> centrerar text som webbläsarens standard. Utfällningens kort råkade se
       rätt ut ändå, för Bootstraps .dropdown-item sätter text-align: inherit — alltså
       hängde vår vänsterställning på en klass som bara finns i menyn. Samma dolda koppling
       som kortets övriga stil hade. Sätts här i stället. */
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 8px;
    /* Bootstraps .dropdown-item är en radpost: nowrap och full bredd utan ram. */
    white-space: normal;
    border: 1.5px solid var(--wxr-border);
    border-radius: var(--wxr-radius-lg);
    background: var(--wxr-surface);
}

/* Hover är NEUTRAL, inte grön: grönt betyder valt, och en grön hover fick varje kort
   att se ut som om det redan var valt. Samma konvention som CPQ:s CARDS-kort. */
.wxr-choice-card__pick:hover:not(:disabled),
.wxr-choice-card__pick:focus-visible {
    border-color: var(--wxr-border-em);
    background: var(--wxr-surface-secondary);
}

.wxr-choice-card__pick:disabled { opacity: 0.55; }

.wxr-choice-card.is-selected .wxr-choice-card__pick {
    border-color: var(--wxr-accent);
    background: var(--wxr-accent-light);
}

/* Valt kort: hovern förstärker ramen i stället för att byta läge. Ligger EFTER
   is-selected-regeln, annars vinner den och hovern syns inte. */
.wxr-choice-card.is-selected .wxr-choice-card__pick:hover:not(:disabled),
.wxr-choice-card.is-selected .wxr-choice-card__pick:focus-visible {
    border-color: var(--wxr-accent-hover);
    background: var(--wxr-accent-light);
}

/* Bildrutan är VIT med ram, aldrig grå: produktbilder har oftast egen vit (eller
   annan) bakgrund, och en grå platta runt dem ser ut som ett fel. Ramen är det som
   visar var bilden slutar. Lägre än bred (86px) eftersom liggande bilder är det
   vanliga — då fyller motivet rutans bredd i stället för att begränsas av höjden. */
.wxr-choice-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 86px i utfällningen, där kortet ska rymmas i en formulärkolumn. I rutnätet får bilden
       ta plats: det är bilden man väljer på, och en låg remsa gör ett materialprov
       oläsbart. Höjden sätts i .is-fluid nedan. */
    height: 86px;
    border: 1px solid var(--wxr-border);
    border-radius: var(--wxr-radius);
    background: var(--wxr-surface);
    overflow: hidden;
}

/* Centrerat i rutan, samma regel som kontrollens miniatyr: rutan är den vänsterställda
   ytan, bilden ligger i mitten av den. */
.wxr-choice-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Platshållarikonen har ingen bild att vänsterställa mot — centrera den i rutan. */
.wxr-choice-card__img i {
    margin: auto;
    font-size: 22px;
    color: var(--wxr-text-hint);
}

/* Textblocket: titel + metarad, samma indelning som kontrollens __text. Fyller kortets
   återstående höjd så titelns auto-marginal har något att trycka meta-raden mot. */
.wxr-choice-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

/* flex-wrap som kontrollens __meta: utan den kan priset inte krympa, och artikelnumret
   pressas till 0px bredd i en smal kolumn (uppmätt: 190px kolumn gav card-sub bredden 0).
   Priset flyttar ned på egen rad i stället. */
.wxr-choice-card__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
}

/* margin-bottom: auto — titeln tar överskottshöjden, så artikelnummer och pris
   linjerar längs nederkanten mellan korten i en rad även när namnen är olika långa. */
.wxr-choice-card__title {
    font-size: var(--wxr-f-sm);
    font-weight: 600;
    color: var(--wxr-text);
    line-height: 1.35;
    margin-bottom: auto;
}

/* Förstoringsglaset på kortet ligger ÖVER pick-knappen (nästlade knappar är ogiltig
   HTML, så det kan inte ligga inuti den). Placeringen räknas mot kortet och inte mot
   bildrutan — bildens höjd får ändras utan att ikonen hamnar fel. Vald-bocken tar
   motsatt hörn så de aldrig krockar. */
.wxr-choice-card__zoom {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--wxr-border-em);
    border-radius: var(--wxr-radius);
    background: var(--wxr-overlay-chip);
    color: var(--wxr-text-muted);
    font-size: 11px;
    cursor: zoom-in;
}

.wxr-choice-card__zoom:hover {
    background: var(--wxr-surface);
    color: var(--wxr-nav);
    border-color: var(--wxr-nav);
}

.wxr-choice-card__check {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 1;
    color: var(--wxr-accent);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}

/* ── Segmenterad väljare (WxrSegmentedControl) ─────────────────────────────────
   Samma höjd som ett fält, så den linjerar med grannarna. Valt läge i accentton, samma
   som ett valt kort: användaren har redan lärt sig att den tonen betyder "vald". */
.wxr-segmented {
    display: inline-flex;
    /* Innehållsbred: som barn i WxrField (en flexkolumn) hade den annars sträckts över
       hela raden, och tre ord i en 700px ram läser som en tom listbox. */
    width: fit-content;
    align-self: flex-start;
    height: var(--wxr-control-height-user);
    border: 1px solid var(--wxr-border);
    border-radius: var(--wxr-radius);
    background: var(--wxr-surface);
    overflow: hidden;
    vertical-align: middle;
}

.wxr-segmented.is-fill { display: flex; width: 100%; align-self: stretch; }
.wxr-segmented.is-fill .wxr-segmented__item { flex: 1 1 0; }

.wxr-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-left: 1px solid var(--wxr-border);
    background: transparent;
    color: var(--wxr-text);
    font-size: var(--wxr-f-sm);
    white-space: nowrap;
    cursor: pointer;
}

.wxr-segmented__item:first-child { border-left: 0; }

.wxr-segmented__item:hover:not(:disabled) { background: var(--wxr-surface-secondary); }

.wxr-segmented__item:focus-visible {
    outline: 2px solid var(--wxr-accent);
    outline-offset: -2px;
}

.wxr-segmented__item.is-selected {
    background: var(--wxr-accent-light);
    color: var(--wxr-accent);
    font-weight: 600;
}

.wxr-segmented__item:disabled { opacity: 0.55; cursor: default; }

/* ── Färgväljare (WxrColorPicker) ──────────────────────────────────────────────
   Färgrutan (Telerik) och hex-fältet sida vid sida, samma höjd. Fältet är smalt med
   flit: nio tecken behöver ingen 220px-ruta, och en bred ruta hade sett ut att vilja
   ha mer än en kod. */
.wxr-colorpicker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wxr-colorpicker .k-colorpicker { height: var(--wxr-control-height-user); }

.wxr-colorpicker__hex {
    width: 130px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

/* Färg i stället för bild: fyller bildytan helt, så ramen runt ytan är det enda som
   skiljer färgen från kortets bakgrund. En vit färg blir då en ram runt vitt, vilket är
   rätt svar: det är så ett vitt materialprov ser ut. */
.wxr-choice-card__swatch {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Kort per värdkolumn ───────────────────────────────────────────────────────
   Kortets bredd är kolumnbredden delad med antalet: rutnätets bredd delad med värdens
   --wxr-choice-host-cols (CPQ-cellen sätter den till sitt kolumnspann) och rutnätets
   --wxr-choice-per-col. Klampad mellan golv och tak, så en staplad rad i en smal panel
   inte ger frimärken och en bred kolumn inte enorma kort. auto-fill med det måttet som
   FAST spår: med minmax(…, 1fr) sträcktes ett ensamt stort kort ut över hela kolumnen
   och taket betydde ingenting. Nu står korten i sin storlek och restbredden blir luft
   till höger. Procent räknas mot rutnätets bredd, vilket är just det vi vill. */
.wxr-choice-grid.is-fluid.is-per-col {
    --wxr-choice-n: calc(var(--wxr-choice-host-cols, 1) * var(--wxr-choice-per-col, 1));
    grid-template-columns: repeat(auto-fill,
        clamp(var(--wxr-choice-min, 44px),
              calc((100% - (var(--wxr-choice-n) - 1) * var(--wxr-choice-gap, 8px)) / var(--wxr-choice-n)),
              var(--wxr-choice-max, 160px)));
    gap: var(--wxr-choice-gap, 8px);
    justify-content: start;
}

/* Storleksatta kort: bilden följer kortets bredd i 4:3 i stället för en fast höjd, en
   148px hög ruta runt en 50px bred bild hade mest varit luft. */
.wxr-choice-grid.is-fluid.is-per-col > .wxr-choice-card {
    /* Rutnätets sträckning gäller bara ett kort med automatisk höjd (100 % mot en obestämd
       rad räknas som innehållets). Med auto blir kortet utan bild lika högt som grannarna. */
    height: auto;
}

.wxr-choice-grid.is-fluid.is-per-col:not(.is-round) .wxr-choice-card__img {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 4 / 3;
}

/* Små kort får tätare innerkant och mindre text, annars äter ramen upp brickan. */
.wxr-choice-grid.is-fluid.is-per-col .wxr-choice-card__pick {
    padding: 4px;
    gap: 4px;
}

.wxr-choice-grid.is-fluid.is-per-col .wxr-choice-card__title {
    font-size: var(--wxr-f-sm);
}

/* ── Kort utan ram: runda kort och kort utan namn ─────────────────────────────
   Ramen på ett kort håller ihop bild och namn och bär vald-markeringen. Utan namn finns
   inget att hålla ihop, och på ett runt kort är cirkeln formen. I båda fallen försvinner
   kortets ram och bakgrund, ytan är kortet och vald-ringen ligger direkt på den. Hårlinjen
   runt ytan står kvar, annars syns inte en vit färg alls. Rutnätet sätter .is-bare när
   .is-round eller .is-no-text gäller, så reglerna finns EN gång. */
.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card__pick,
.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card__pick:hover:not(:disabled),
.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card__pick:focus-visible,
.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card.is-selected .wxr-choice-card__pick {
    border-color: transparent;
    background: transparent;
}

.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card__pick:hover:not(:disabled) .wxr-choice-card__img,
.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card__pick:focus-visible .wxr-choice-card__img {
    border-color: var(--wxr-border-em);
}

.wxr-choice-grid.is-fluid.is-bare .wxr-choice-card.is-selected .wxr-choice-card__img {
    border-color: var(--wxr-accent);
    box-shadow: 0 0 0 3px var(--wxr-accent-light);
}

/* Utan namn fyller ytan kortet, med rundade hörn där kortets hörn var. */
.wxr-choice-grid.is-fluid.is-no-text .wxr-choice-card__pick {
    padding: 0;
}

.wxr-choice-grid.is-fluid.is-no-text:not(.is-round) .wxr-choice-card__img {
    border-radius: var(--wxr-radius-lg);
}

/* ── Runda kort: geometrin ─────────────────────────────────────────────────────
   Bild- eller färgytan blir en cirkel i kortets bredd (högst 148px, som den fyrkantiga
   bildytan) och namnet står centrerat under. 4:3-regeln för storleksatta kort undantar
   runda kort (:not(.is-round) ovan), så ordningen mellan blocken spelar ingen roll. */
.wxr-choice-grid.is-fluid.is-round .wxr-choice-card__pick {
    align-items: center;
}

.wxr-choice-grid.is-fluid.is-round .wxr-choice-card__img {
    flex: 0 0 auto;
    width: min(148px, 100%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 1.5px;
    background: var(--wxr-surface);
}

.wxr-choice-grid.is-fluid.is-round .wxr-choice-card__text {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.wxr-choice-grid.is-fluid.is-round .wxr-choice-card__meta {
    justify-content: center;
}

/* ── En kolumn: listan speglar kontrollen ─────────────────────────────────────
   Samma uppbyggnad som .wxr-choicefield — bild till vänster i samma bredd,
   avgränsad med en linje i stället för en egen ram, text till höger, och samma
   totalhöjd (72px = kontrollens toggle på 70px plus dess ramar). Bilden blir 69px
   hög mot kontrollens 70px, eftersom kortets egen ram tar sin plats inuti höjden.
   Ögat jämför då samma form i listan som i fältet. */
.wxr-choice-grid.is-rows .wxr-choice-card__pick {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    /* FAST höjd, precis som kontrollens trigger: alla rader ska vara lika höga och lika
       höga som fältet. Med min-height växte raden till 97px så snart namnet tog två
       rader, och listan blev en trappa. Texten klipps i stället (hela namnet ligger i
       title-attributet och i den förstorade bilden). */
    height: 72px;
    /* Bilden går ut i kortets kant, så kortet måste klippa den mot sin egen radie. */
    overflow: hidden;
}

.wxr-choice-grid.is-rows .wxr-choice-card__img {
    flex: 0 0 96px;
    /* Fyller radens höjd i stället för kortlägets fasta 86px. */
    height: auto;
    /* 7px, inte 4: på en vald rad är det här utrymmet den gröna ramen runt bilden, och
       4px räckte inte för att läsa som en ram. Mindre än rutnätets kort, som har mer luft
       att ta av — en rad är 70px hög och varje pixel äts från bilden. */
    padding: 7px;
    border: none;
    border-right: 1px solid var(--wxr-border);
    border-radius: 0;
}

/* Texten centreras lodrätt i raden. padding-right lämnar plats för vald-bocken i kortets
   högra hörn, så den aldrig lägger sig över artikelnumret eller prisetiketten. 6px upp
   och ned (inte 8): en metarad som radbryter i den smalaste formulärkolumnen behöver
   titel 18 + 2 + 36 = 56px, och 6px-paddingen lämnar 57px innanför den fasta höjden. */
.wxr-choice-grid.is-rows .wxr-choice-card__text {
    justify-content: center;
    padding: 6px 26px 6px 10px;
    overflow: hidden;
}

/* Ingen auto-marginal i radläget: texten är ett centrerat block. Klippningen speglar
   kontrollen: två titelrader utan metarad, en med — se .wxr-choicefield__text. */
.wxr-choice-grid.is-rows .wxr-choice-card__title {
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wxr-choice-grid.is-rows .wxr-choice-card__text:has(.wxr-choice-card__meta) .wxr-choice-card__title {
    -webkit-line-clamp: 1;
}

/* Förstoringsglaset tar kontrollens plats och mått: bildens nedre vänsterkant, 18px.
   4px från kortets kant = 3px in i bilden (kortramen är 1.5px), alltså samma insteg
   som .wxr-choicefield__zoom-badge har i kontrollen. */
.wxr-choice-grid.is-rows .wxr-choice-card__zoom {
    top: auto;
    bottom: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 10px;
}

/* Stora bilden. popover ritas i topplagret, alltså utanför overflow, stacking
   contexts och container-containment — därför räcker margin: auto för att centrera
   den i fönstret, utan mätning och utan JS. */
.wxr-lightbox {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    max-width: min(90vw, 900px);
    max-height: 88vh;
    margin: auto;
    /* Luft HELA vägen runt bilden. Var 0, och eftersom bilden har object-fit: contain såg
       den brevlådad ut med vitt på sidorna men dikt an mot överkanten — asymmetrin lästes
       som ett fel i bilden i stället för i ramen. */
    padding: 8px;
    border: 1px solid var(--wxr-border-em);
    border-radius: var(--wxr-radius-lg);
    background: var(--wxr-surface);
    box-shadow: var(--wxr-shadow-xl);
    overflow: hidden;
}

.wxr-lightbox::backdrop {
    background: var(--wxr-scrim);
}

.wxr-lightbox img {
    display: block;
    /* Drar av ramens padding (2 x 8) och listen under, annars kan bilden trycka ut
       behållaren förbi max-height och listen hamnar utanför skärmen. */
    max-width: min(90vw - 16px, 884px);
    max-height: calc(88vh - 60px);
    object-fit: contain;
    /* Något mindre radie än ramens, så hörnen följer varandra i stället för att skära. */
    border-radius: calc(var(--wxr-radius-lg) - 4px);
    background: var(--wxr-surface-secondary);
}

.wxr-lightbox__bar {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* Vänsterkanten linjerar med bilden ovanför; ramens padding står för resten. */
    padding: 8px 2px 2px;
    background: var(--wxr-surface);
}

.wxr-lightbox__title {
    font-size: var(--wxr-f-sm);
    font-weight: 600;
    color: var(--wxr-text);
}

.wxr-lightbox__sub {
    font-size: 12px;
    color: var(--wxr-text-hint);
}

.wxr-lightbox__close {
    margin-left: auto;
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--wxr-text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.wxr-lightbox__close:hover { color: var(--wxr-text); }

/* ── Designsystemet (/admin/design) ─────────────────────────────────────────
   Ställning för komponentproverna. Ligger HÄR och inte i en egen fil: varje värd
   måste registrera sina stilmallar i _Host.cshtml, så en ny fil hade tyst saknats
   i kundprojekten. Bara layout — komponenterna bär sitt eget utseende. */
.wxr-ds__note {
    font-size: 13px;
    color: var(--wxr-text-hint);
    margin: 0 0 10px;
    max-width: 78ch;
}

/* Proverna, inte en åtgärdsyta: samma geometri som .wxr-inline-actions men med
   radbrytning, eftersom en variantrad kan bli lång. */
.wxr-ds__specimen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.wxr-ds__specimen:last-child { margin-bottom: 0; }
.wxr-ds__specimen--stack { align-items: flex-start; gap: 20px; }

.wxr-ds__block { margin-top: 16px; }
.wxr-ds__block > .wxr-ds__note { margin-bottom: 6px; }

.wxr-ds__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.wxr-ds__swatch { display: flex; gap: 10px; align-items: flex-start; }
.wxr-ds__swatch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wxr-ds__swatch code { font-size: 12px; }
.wxr-ds__swatch-usage { font-size: 12px; color: var(--wxr-text-hint); line-height: 1.4; }
.wxr-ds__swatch-chip {
    width: 34px; height: 34px; flex: none;
    border-radius: 6px;
    border: 1px solid var(--wxr-border);
}

.wxr-ds__table { max-width: 720px; }

/* Bildväljarprovet: fältet i en SMAL kolumn, som i CPQ-konfiguratorns formulär —
   det är där utfällningen måste vara bredare än fältet och ändå ligga rätt. */
.wxr-ds__imgselect { width: 260px; }
.wxr-ds__imgselect-cols { width: 90px; }
.wxr-ds__stack { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.9; }

/* Bild plus text i en mall-bärande väljare (WxrDropDown/WxrComboBox). */
.wxr-ds__option { display: inline-flex; align-items: center; gap: 8px; }
.wxr-ds__option img {
    width: 40px; height: 20px; flex: none;
    object-fit: contain;
    border-radius: 3px;
    border: 1px solid var(--wxr-border);
}

.wxr-ds__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    max-width: 640px;
}
.wxr-ds__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* Diagrammen är SVG med viewBox och width:100%, så texten skalar med bredden. På en
   simple-fluid-sida blir de tre gånger för stora och ger en missvisande bild av hur de
   ser ut på riktigt — dashboarden ger dem en smal kolumn. Håll provet i den bredden. */
.wxr-ds__chart { max-width: 760px; }

/* ============================================================
   Artikelmodalen: kategorirad, dialoginnehåll och det fält som öppnar den.
   Kortet, rutnätet och den stora bilden ligger i wxr-choice-* / wxr-lightbox
   ovan och delas med bildväljarens utfällning.
   ============================================================ */

/* Kryssrutraden. Egen rad ovanför rutnätet, inte i dialogens huvud: kategorierna hör till
   innehållet och kan vara många nog att radbryta, medan sökrutan är en åtgärd som ska stå
   stilla. */
.wxr-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--wxr-border);
    background: var(--wxr-surface-secondary);
}

.wxr-category-filter__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* WxrCheckbox bär en marginal avsedd för formulärrader; i en filterrad blir den ett hål.

   INGEN storleksavvikelse här. Raden hade 18px mot formulärens 16 med motiveringen att ett
   filter är en primär kontroll på sin yta. Med systemrutan uppe på 17 blev skillnaden en
   pixel, alltså osynlig, och kvar stod bara en till plats där kryssrutan är något annat än
   kryssrutan. En kontroll ska se likadan ut överallt; behövs en avvikelse är det systemets
   storlek som är fel. */
.wxr-category-filter .wxr-checkbox {
    margin: 0;
}

.wxr-category-filter .wxr-checkbox__label {
    font-size: var(--wxr-f-base);
    color: var(--wxr-text);
}

.wxr-category-filter__count {
    font-size: 12px;
    color: var(--wxr-text-hint);
}

/* Dialogens innehåll. Sökrutan och kategoriraden står stilla, bara rutnätet rullar —
   samma regel som sidlayoutens toolbar: det man agerar med rör sig inte. */
.wxr-choice-picker {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Sökrutan i dialogens huvud: begränsad bredd och centrerad. Full bredd över 1240 px
   läste som en textarea, och ögat fick ingen naturlig plats att börja. */
/* Absolut centrerad mot DIALOGEN. Med margin:0 auto i flexraden centrerades den mot det
   som blev över efter rubriken, alltså synligt off-center (359 mot 421 px i mätningen). */
.wxr-choice-picker__search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(460px, 42%);
}

.wxr-dialog__header:has(.wxr-choice-picker__search) { position: relative; }

/* FAST höjd, inte max-höjd. Modalen ska se likadan ut med fyra artiklar som med fyrahundra:
   ett fönster som krymper till innehållet hoppar i storlek varje gång man söker, och det gör
   sökandet till en rörlig måltavla. Tre kortrader syns, resten rullar. */
.wxr-choice-picker__body {
    flex: 1 1 auto;
    height: 600px;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 2px 2px;
}

/* Kategoriraden går ut till dialogens kanter fast innehållet är indraget.
   -24px, inte -16px: .wxr-dialog__body har padding 12px 24px 20px. Med fel siffra slutade
   raden 8px innan kanten på varje sida, vilket läser som slarv snarare än som en rad. */
/* Luft mellan huvudets sökruta och filterraden. Utan den satt de dikt an och lästes som
   ETT block, fast de gör olika saker: den ena söker fritt, den andra grindar mängden. */
.wxr-choice-picker .wxr-category-filter {
    margin: 0 -24px;
}

.wxr-dialog__header:has(.wxr-choice-picker__search) { padding-bottom: 14px; }

/* Fältet som öppnar modalen. Geometrin ligger i .wxr-choicefield, delad med
   bildväljarens stängda läge; här bara det som skiljer. */
.wxr-modalselect { position: relative; }

/* INGEN egen disabled-regel. En sådan fanns här med opacity och pointer-events:none, och den
   gjorde två fel samtidigt: dämpade fältet mer än bildväljaren gör (som skulle vara
   identisk), och släckte förstoringsglaset, fast en inaktiverad väljare fortfarande ska
   kunna visa vad som ÄR valt. Lägets utseende ligger på .wxr-choicefield.is-disabled, delat
   av båda, och knappen är inaktiverad via disabled-attributet. */

/* Ingen egen placeholder eller ikon: fältet ska vara IDENTISKT med bildväljarens stängda
   läge, före och efter val. Skillnaden mellan de två visningstyperna är vad ett klick gör,
   inte hur fältet ser ut. */

/* Dialogens kryss. Samma geometri och dämpning som slide-out-panelens, så de två
   fönstertyperna stängs likadant. */
.wxr-dialog__close {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--wxr-radius);
    background: transparent;
    color: var(--wxr-text-muted);
    font-size: 14px;
    cursor: pointer;
}

.wxr-dialog__close:hover {
    background: var(--wxr-surface-secondary);
    color: var(--wxr-text);
}

/* CPQ:s formulärkolumn delar lika under 1600px. Ligger här och inte i
   konfiguratorns egen fil, eftersom förhandsgranskningen och den publika
   inbäddningen ska följa samma brytpunkt. */
@media (max-width: 1600px) {
  :root { --wxr-cpq-form-col: 50%; }
}

/* ── Draghandtag mellan formulär och visualisering (CPQ) ──────────────────
   Ligger i det gap som redan finns mellan kolumnerna, absolutpositionerat vid
   den bredd formulärkolumnen har. Då behöver varken grid-template-columns eller
   grid-template-areas ändras för att ge det plats. Träffytan är bredare än
   strecket: 4px syns, 16px går att träffa. */
[data-wxr-split] {
  position: relative;
}

.wxr-split-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Mitt i gapet: kolumnens bredd plus halva mellanrummet. */
  left: calc(var(--wxr-cpq-cfg-left, var(--wxr-cpq-form-col)) + 8px);
  width: 16px;
  margin-left: -8px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Bara handtaget ska ta emot pekaren, inte hela höjden av kolumnen bredvid. */
  touch-action: none;
}

.wxr-split-handle__grip {
  width: 4px;
  height: 44px;
  border-radius: 2px;
  background: var(--wxr-border);
  transition: background 0.15s ease, height 0.15s ease;
}

.wxr-split-handle:hover .wxr-split-handle__grip,
.wxr-split-handle:focus-visible .wxr-split-handle__grip,
body.wxr-split-dragging .wxr-split-handle__grip {
  background: var(--wxr-nav);
  height: 72px;
}

.wxr-split-handle:focus-visible {
  outline: 2px solid var(--wxr-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Under dragningen ska inget markeras och inget hovra: pekaren rör sig över
   hela sidan medan knappen hålls nere. */
body.wxr-split-dragging {
  cursor: col-resize;
  user-select: none;
}

body.wxr-split-dragging iframe {
  pointer-events: none;
}

/* Staplat läge: ingen kolumngräns att dra i. */
@media (max-width: 900px) {
  .wxr-split-handle { display: none; }
}

/* Åtgärder i ett inline-formulär: högerställda som i en dialog, så knapparna
   hamnar där blicken slutar. .wxr-inline-actions är vänsterställd som default,
   vilket är rätt för hjälpåtgärder mitt i innehåll men fel för ett formulärs
   avslut. */
.wxr-inline-actions--end {
  justify-content: flex-end;
  margin-top: 4px;
}

/* Ett fält med en åtgärd intill: väljaren tar bredden, knappen ligger i linje med
   fältets nedre kant (inte med etiketten). Används av kundväljaren i projektflödet,
   där snabbvägen till nytt prospekt bor. */
.wxr-field-with-action {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.wxr-field-with-action > :first-child {
  flex: 1;
  min-width: 0;
}

.wxr-field-with-action > .wxr-icon-btn {
  margin-bottom: 2px;
}

/* Dubblettdialogens träfflista (CreateProspectDialog steg två). En rad per befintligt
   företag: identiteten till vänster, åtgärden till höger. Listan och inte en grid, för
   raderna är högst en handfull och beslutet tas per rad. */
.wxr-duplicate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Taket är MaxMatches rader: fler än så ska rulla i stället för att skjuta
     dialogens fot ur bild. */
  max-height: 46vh;
  overflow-y: auto;
}

.wxr-duplicate-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--wxr-border);
  border-radius: var(--wxr-radius);
  background: var(--wxr-surface-secondary);
}

.wxr-duplicate-match__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wxr-duplicate-match__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 600;
  color: var(--wxr-text);
}

.wxr-duplicate-match__role {
  font-size: 13px;
  color: var(--wxr-text-muted);
}

.wxr-duplicate-match__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--wxr-text-muted);
}

/* Anledningen till träffen, avskild från identitetsuppgifterna: den svarar på varför
   raden står här, inte på vem företaget är. */
.wxr-duplicate-match__reason {
  font-style: italic;
}

.wxr-duplicate-match__hint {
  flex: 0 0 auto;
  max-width: 180px;
  font-size: 12px;
  color: var(--wxr-text-muted);
}

/* ──────────────────────────────────────────────────────────────────────
   Enhet inne i ett numeriskt fält (WxrNumberField/WxrIntegerInput Suffix).
   "12 %" i stället för etiketten "Kundrabatt (%)" med ett naket 12 i rutan.

   Enheten är ett överlagrat element och inte en del av värdet, så inmatningen
   är oförändrad. pointer-events: none gör att ett klick på enheten går rakt
   igenom och fokuserar fältet, i stället för att kännas som en död yta.
   ────────────────────────────────────────────────────────────────────── */
.wxr-input-affix {
  position: relative;
  display: block;
}

/* Högermarginalen reserveras för enheten. Bredden kommer som en inline-variabel
   räknad i ch ur enhetens längd, så "%" och "kr/st" får var sitt utrymme utan
   en CSS-regel per enhet. Fältet är högerställt (.wxr-input--numeric), så
   siffran lägger sig precis till vänster om enheten.

   !important krävs: den globala .form-control-overriden sätter `padding: 0 14px
   !important`, och utan det här hamnar siffran UNDER enheten. Samma skäl som
   noten om border-radius vid .input-group-reglerna. Selektorn speglar
   :not(textarea) från den regeln så specificiteten jämförs mot rätt sak. */
.wxr-input-affix > .form-control:not(textarea) {
  padding-right: calc(16px + var(--wxr-affix-w, 1ch)) !important;
}

/* Enheten sitter på WRAPPERN och inte på fältet, och wrappern är ett block. I ett smalt
   fält (220px-taket ligger på .form-control, inte på wrappern) blev wrappern därför kvar
   i full bredd och enheten svävade långt till höger om rutan den hör till: "12" i fältet
   och "dagar" en bit ut i tomma luften. Wrappern får samma tak som fältet den omsluter. */
.wxr-form-grid .wxr-field--narrow .wxr-input-affix,
.wxr-form-grid--1col .wxr-field--narrow .wxr-input-affix {
  max-width: 220px;
}

.wxr-input-affix__unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 13px;
  color: var(--wxr-text-hint);
  white-space: nowrap;
}

.wxr-input-affix.is-disabled .wxr-input-affix__unit {
  opacity: 0.65;
}

/* Bootstraps is-invalid lägger en felikon i EXAKT samma hörn som enheten
   (background-position: calc(100% - 8.25px) center), så de hamnade ovanpå
   varandra. Appens egen is-invalid-regel byter bara ramfärg och tar inte bort
   bilden, vilket är lätt att missa.

   Ikonen får gå. Den säger samma sak som den röda ramen OCH det röda
   meddelandet under fältet, alltså tredje kopian av ett budskap, medan enheten
   är bestående information om värdet. Trängs de om samma hörn vinner det som
   inte finns någon annanstans. Gäller även .wxr-prop-invalid, som sätter en
   egen ikon på dynamiska egenskapsfält. */
.wxr-input-affix > .form-control.is-invalid,
.wxr-prop-invalid .wxr-input-affix > input.form-control {
  background-image: none;
}

/* ── Statussida (WxrStatusPage) ───────────────────────────────────────────────
   Sidan som svarar när du inte ser det du sökte: adressen finns inte, du behöver
   logga in, länken är stängd. Används både innanför app-ramen och utanför den, så
   den bär sitt eget varumärke och sin egen centrering utan att kräva WxrPage. */

.wxr-status {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 100% och inte 100vh: den publika sidan äger sin EGEN rullning (body har
     overflow:hidden), och en viewport-höjd inuti den ytan lägger till en andra
     rullningslist. Med 100% fyller kortet det utrymme föräldern faktiskt har. */
  min-height: 100%;
  padding: 32px 20px;
  background: var(--wxr-surface-muted);
}

/* Innanför app-ramen finns redan topbar och meny; då ska kortet inte kräva en hel
   skärmhöjd till, och bakgrunden ägs av WxrPageBody. */
.wxr-status--compact {
  min-height: 0;
  padding: 40px 20px;
  background: transparent;
}

.wxr-status__card {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 36px 28px 32px;
  background: var(--wxr-surface);
  border: 1px solid var(--wxr-border);
  border-radius: 14px;
  box-shadow: var(--wxr-shadow-md);
}

.wxr-status__brand {
  margin-bottom: 6px;
}

.wxr-status__logo {
  height: 44px;
  width: auto;
  display: block;
}

.wxr-status__wordmark {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wxr-text);
}

.wxr-status__icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--wxr-text-muted);
}

.wxr-status__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--wxr-text);
}

/* Routern flyttar fokus till sidans h1 vid varje navigering (FocusOnNavigate i App.razor),
   och webbläsaren ritar då sin fokusram runt rubriken. På en klickbar sak är ramen rätt, på
   en rubrik ser den ut som ett fel. Tangentbordsnavigeringen tappar ingenting: fokus flyttas
   fortfarande dit och skärmläsaren läser rubriken. */
.wxr-status__title:focus,
.wxr-status__title:focus-visible {
  outline: none;
}

.wxr-status__message {
  margin: 0;
  max-width: 42ch;
  color: var(--wxr-text-muted);
  font-size: var(--wxr-f-sm, 13px);
  line-height: 1.55;
}

.wxr-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

/* ── Synkade fält ────────────────────────────────────────────────────────────
   Ett fält som ägs av en extern källa (IFieldOwnershipService) är disablat och ser ut som
   ett disablat fält, med en diskret blå vänsterkant och en låsikon till VÄNSTER så den
   aldrig krockar med högerställda tal eller en selects pil. Märket WxrSyncBadge överst på
   posten bär samma kant, så förklaringen och fälten hör ihop utan text under varje ruta.
   Klassen sätts av sidorna via fältens Class-parameter.

   !important med avsikt: grundregeln för .form-control/.form-select sätter färg, bakgrund,
   ram och padding med !important, och det låsta läget måste vinna över den. */
.form-control.wxr-input--synced,
.form-select.wxr-input--synced,
.wxr-combobox-host.wxr-input--synced,
.form-control.wxr-input--synced:disabled,
.form-select.wxr-input--synced:disabled {
    border-color: var(--wxr-border-em) !important;
    border-left: 3px solid var(--wxr-info-border) !important;
    background-color: var(--wxr-surface-tertiary) !important;
    color: var(--wxr-text-muted) !important;
    opacity: 1;
    cursor: not-allowed;
}
.form-control.wxr-input--synced,
.wxr-combobox-host.wxr-input--synced {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393c5fd'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: .7rem center !important;
    background-size: .75rem .75rem !important;
    padding-left: 2rem !important;
}

.wxr-sync-badge {
    display: inline-flex;
    flex-direction: column;
    gap: .2rem;
    margin-bottom: 1rem;
    padding: .4rem .8rem .4rem .7rem;
    border: 1px solid var(--wxr-border-em);
    border-left: 3px solid var(--wxr-info-border);
    border-radius: 6px;
    background: var(--wxr-surface-tertiary);
    color: var(--wxr-text-muted);
    font-size: .85rem;
}
.wxr-sync-badge__row { display: flex; align-items: center; flex-wrap: wrap; }
.wxr-sync-badge__row .bi { color: var(--wxr-info); }
.wxr-sync-badge__time { margin-left: .75rem; color: var(--wxr-text-hint); }

/* ── WxrRadioCards ──
   Färgerna låg inline i komponenten som hårdkodade tal och var därför de enda korten som
   stod kvar vita när appen blev mörk. Vald = accentram plus tonad accentbotten, alltså
   samma språk som resten av systemet i stället för sina egna gröna. */
.wxr-radio-card {
    text-align: left;
    border: 1.5px solid var(--wxr-border);
    background: var(--wxr-surface);
    border-radius: 8px;
    padding: 12px 14px;
}

.wxr-radio-card.is-selected {
    border-color: var(--wxr-accent);
    background: var(--wxr-accent-light);
}

.wxr-radio-card:focus-visible {
    outline: 2px solid var(--wxr-focus-ring);
    outline-offset: 2px;
}

.wxr-radio-card__title {
    font-weight: 600;
    font-size: var(--wxr-f-sm);
    color: var(--wxr-text);
}

.wxr-radio-card__badge {
    background: var(--wxr-accent-solid);
    color: var(--wxr-text-on-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: var(--wxr-f-xs);
    font-weight: 700;
    letter-spacing: .04em;
}

.wxr-radio-card__desc {
    color: var(--wxr-text-muted);
    font-size: var(--wxr-f-label);
    margin-top: 4px;
    line-height: 1.4;
}

/* ── WxrStatusCell ──
   Statusens normalläge, alltså nästan varje rad. Den ska LÄSAS men inte ropa: samma
   storlek som märket bredvid så kolumnen inte hoppar mellan rader, men utan platta och
   ram. Dämpad text, för det som ska fånga ögat i en statuskolumn är avvikelsen. */
.wxr-status-cell {
    display: inline-block;
    font-size: var(--wxr-f-label);
    line-height: 18px;
    padding: 2px 0;
    color: var(--wxr-text-muted);
    white-space: nowrap;
}

/* Litet märke, för när det sitter inuti en rad text och inte i en egen kolumn. Ersätter
   style="font-size:0.65em" som satt inline på ett par ställen: en relativ storlek ovanpå
   en fast gör märket olika stort beroende på var det hamnar, och den följde inte
   kompaktläget. Höjden krymper med texten så märket inte blir en avlång platta. */
.wxr-badge--xs {
    height: 18px;
    min-height: 18px;
    padding: 0 6px;
    font-size: var(--wxr-f-xs);
}

/* Lägg till-knappen UNDER en korttabell (WxrCardTable AddBelow). Luft ovanför, ingen
   under, så knappen hänger ihop med tabellen och inte med nästa kort. */
.wxr-card-table__add--below { margin: 10px 0 0; }