/* ============================================================
   2Do — designsystem
   Tätt och lugnt. Accentfärgen är ljus, aldrig en stor yta.

   Teman byts genom att sätta data-theme på <html>. Allt som
   skiljer sig mellan teman ligger i variablerna nedan, så resten
   av stilmallen behöver inte veta vilket tema som är valt.
   ============================================================ */

:root{
  /* Mörkt guldtema — standard */
  --ink:        #0B0A09;
  --ink-2:      #131110;
  --tint-rgb:   255,255,255;      /* ljusa ytor ovanpå mörk botten */
  --text-rgb:   246,241,231;
  --accent-rgb: 255,199,44;
  --accent2-rgb:255,158,27;
  --cream:      #F6F1E7;
  --on-accent:  #191512;          /* text ovanpå accentfärgen */
  --glow-1:     .10;
  --glow-2:     .05;
  /* Pilen i rullgardinsmenyer. Data-URI kan inte läsa variabler, så varje
     tema sätter om hela bilden med rätt färg. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC72C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --card:   rgba(var(--tint-rgb),.045);
  --card-2: rgba(var(--tint-rgb),.07);
  --line:   rgba(var(--accent-rgb),.16);
  --gold:   rgb(var(--accent-rgb));
  --gold-2: rgb(var(--accent2-rgb));
  --red:    #DA291C;
  --green:  #31C46B;
  /* Höjda 2026-09-22, i två steg — .56→.68/.34→.46 kändes knappt av
     (för litet steg, och mest märkbart vid 10-11px där .stamp/.dim-2
     lever, se select optgroup/.datefield__label nedan som fick samma
     variabel i stället för sin egen hårdkodade opacitet). Andra
     försöket: .56→.78 / .34→.58 — ett rejält, omisskännligt lyft, inte
     bara en nyansskillnad. Gäller bara här i :root, dvs. standardtemat
     och alla andra MÖRKA teman som inte sätter om --dim/--dim-2 själva
     (ingen av dem gör det). De ljusa temana (ros/sand/is/korall) har
     mörk --text-rgb och skulle bli MÖRKARE, inte ljusare, av samma
     höjning — de har därför fått en egen, oförändrad rad nedan (samma
     kontrastnivå som [data-theme="light"] redan använder). */
  --dim:    rgba(var(--text-rgb),.78);
  --dim-2:  rgba(var(--text-rgb),.58);
  /* Egen, fast informationsfärg — samma blå som frågetecken-knappen
     (.tick--info) redan använder. --accent-rgb byter hela tiden med valt
     färgtema, så den ensam räcker inte för att skilja två riktningar åt
     (accent/accent2 ligger för nära varandra i kulör, se row--deleg-*
     nedan); den här blå håller sig konstant mot temats guld/accent så att
     "Delegerat till mig" alltid syns tydligt mot "Delegerat uppåt". Samma
     resonemang för --warn-rgb, den tredje fasta nyansen (se row--deleg-down
     i delegerings-CSS:et längre ner). */
  --info-rgb: 127,180,230;
  --warn-rgb: 200,150,235;
  /* Fjärde fasta nyansen, samma resonemang som info/warn ovan — en egen,
     temaoberoende ton så "Delad delegering" alltid går att skilja från
     "Delegerat uppåt" (up), "Delegerat till mig" (info) och "Delegerade
     uppgifter — svar krävs" (warn). Se row--deleg-shared längre ner. */
  --share-rgb: 90,205,190;
  /* Femte och sista fasta nyansen: "Delegerat uppåt". Den följde tidigare
     --accent-rgb och bytte alltså färg med valt tema, vilket gjorde den
     omöjlig att känna igen — i guldtemat såg den ut som vilken accentuerad
     rad som helst. En egen, varm orange håller sig konstant och krockar
     varken med den blå (in), den lila (down) eller den turkosa (shared).
     Se row--deleg-up längre ner. */
  --up-rgb: 245,166,66;

  /* Typsnittspaket — menyn → Utseende → Typsnitt. Två roller:
     --font-display (rubriker, sidhuvudets titel, arkens rubriker) och
     --font-ui (brödtext, knappar, taggar, formulär). Definierade som HELA
     stackar (inte bara familjenamnet) så att var(--font-ui) går att klistra
     in var som helst i en font-kortform — "Bricolage Grotesque" och
     "Inter Tight" i själva CSS:en nedanför är därför ersatta med dessa två
     variabler rakt igenom, se applyFont() i app.js för växlingen.
     "Azeret Mono" (siffror, klockslag, stämplar) är INTE en del av valet —
     den håller sig konstant så att tabellsiffror alltid radar upp sig,
     oavsett vilket paket man valt. */
  --font-display: "Bricolage Grotesque", "Inter Tight", sans-serif;
  --font-ui:      "Inter Tight", system-ui, -apple-system, sans-serif;

  --r:    14px;
  --r-lg: 18px;
  --pad:  14px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --bounce: cubic-bezier(.2,.9,.25,1.1);
}


/* ------------------------------------------------------------ teman

   Varje tema sätter bara om variablerna. --tint-rgb styr om ytorna
   ovanpå bakgrunden ska vara ljusare (mörka teman) eller mörkare
   (ljust tema), vilket är hela skillnaden mellan ljust och mörkt.
*/

[data-theme="light"]{
  --ink:        #F4F1EC;
  --ink-2:      #FFFFFF;
  --tint-rgb:   26,23,20;         /* mörka ytor ovanpå ljus botten */
  --text-rgb:   26,23,20;
  --accent-rgb: 176,120,0;        /* mörkare guld, läsbart mot ljust */
  --accent2-rgb:214,146,0;
  --cream:      #1A1714;          /* "cream" är textfärgen — mörk här */
  --on-accent:  #FFFFFF;
  --glow-1:     .07;
  --glow-2:     .05;

  --card:   rgba(var(--tint-rgb),.035);
  --card-2: rgba(var(--tint-rgb),.06);
  --line:   rgba(var(--accent-rgb),.26);
  --dim:    rgba(var(--text-rgb),.62);
  --dim-2:  rgba(var(--text-rgb),.42);
  --green:  #1E9E52;
  --red:    #C1231A;
  --info-rgb: 47,111,168;         /* samma blå som .tick--info i ljust läge */
  --warn-rgb: 130,66,168;         /* mörkare lila, läsbart mot ljust */
  --share-rgb: 15,130,115;        /* mörkare teal, läsbart mot ljust */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B07800' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="blue"]{
  --ink:        #070E18;
  --ink-2:      #0D1626;
  --accent-rgb: 74,158,255;
  --accent2-rgb:38,110,220;
  --line:       rgba(var(--accent-rgb),.2);
  --on-accent:  #06101E;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A9EFF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="green"]{
  --ink:        #07120C;
  --ink-2:      #0C1D14;
  --accent-rgb: 61,204,120;
  --accent2-rgb:30,158,82;
  --line:       rgba(var(--accent-rgb),.2);
  --on-accent:  #05170D;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DCC78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="red"]{
  --ink:        #120708;
  --ink-2:      #1E0D0E;
  --accent-rgb: 240,92,80;
  --accent2-rgb:200,45,35;
  --line:       rgba(var(--accent-rgb),.22);
  --on-accent:  #1A0605;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F05C50' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ fler teman

   Bygger på samma mönster som ovan. Varje tema sätter bara om variablerna;
   inget mer JS eller HTML behövs. */

[data-theme="midnight"]{
  --ink: #0A0F1D; --ink-2: #101830; --accent-rgb: 143,180,255; --accent2-rgb: 92,140,255;
  --line: rgba(var(--accent-rgb),.22); --on-accent: #06101F;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB4FF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="forest"]{
  --ink: #0B1210; --ink-2: #131E18; --accent-rgb: 168,209,110; --accent2-rgb: 122,167,74;
  --line: rgba(var(--accent-rgb),.22); --on-accent: #0A140B;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8D16E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="rose"]{
  --ink: #F6EFEC; --ink-2: #FFFFFF; --tint-rgb: 40,20,25; --text-rgb: 40,20,25;
  --accent-rgb: 190,60,90; --accent2-rgb: 220,90,120; --cream: #28141A; --on-accent: #FFFFFF;
  --line: rgba(var(--accent-rgb),.24);
  /* Ljust tema (mörk text på ljus botten) — ska INTE ärva :root:s höjda
     mörk-temavärden (se kommentaren där), då blir dim-texten mörkare i
     stället för ljusare. Samma nivå som [data-theme="light"]. */
  --dim: rgba(var(--text-rgb),.62); --dim-2: rgba(var(--text-rgb),.42);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BE3C5A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="sand"]{
  --ink: #F5EEE1; --ink-2: #FFF9EC; --tint-rgb: 60,42,20; --text-rgb: 60,42,20;
  --accent-rgb: 168,110,42; --accent2-rgb: 202,138,60; --cream: #3C2A14; --on-accent: #FFFFFF;
  --line: rgba(var(--accent-rgb),.26);
  /* Se motiveringen vid [data-theme="rose"] ovan — samma sak här. */
  --dim: rgba(var(--text-rgb),.62); --dim-2: rgba(var(--text-rgb),.42);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A86E2A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="mono"]{
  --ink: #0A0A0A; --ink-2: #141414; --accent-rgb: 235,235,235; --accent2-rgb: 190,190,190;
  --line: rgba(var(--accent-rgb),.18); --on-accent: #0A0A0A;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBEBEB' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="cyber"]{
  --ink: #06060A; --ink-2: #0D0C18; --accent-rgb: 255,0,180; --accent2-rgb: 0,220,255;
  --line: rgba(var(--accent-rgb),.35); --on-accent: #FFFFFF;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF00B4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="matrix"]{
  --ink: #030805; --ink-2: #061A0E; --accent-rgb: 0,255,120; --accent2-rgb: 0,200,90;
  --text-rgb: 180,255,200; --cream: #B4FFC8; --line: rgba(var(--accent-rgb),.25); --on-accent: #000000;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300FF78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="sunset"]{
  --ink: #180810; --ink-2: #2A1018; --accent-rgb: 255,150,80; --accent2-rgb: 240,80,160;
  --line: rgba(var(--accent-rgb),.28); --on-accent: #1A0808;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9650' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="royal"]{
  --ink: #0B0820; --ink-2: #14102E; --accent-rgb: 200,160,255; --accent2-rgb: 160,120,240;
  --line: rgba(var(--accent-rgb),.22); --on-accent: #14102E;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A0FF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="terminal"]{
  --ink: #0D0D0D; --ink-2: #171717; --accent-rgb: 255,176,0; --accent2-rgb: 255,140,0;
  --text-rgb: 255,176,0; --cream: #FFB000; --line: rgba(var(--accent-rgb),.3); --on-accent: #0D0D0D;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Sex till, för att fylla temaväljarens rad (7 dotar/rad i menyn) jämnt:
   15 teman lämnade en ensam dot sist på en tredje rad — 21 blir tre hela
   rader av sju. Varje ny kulör vald för att inte krocka med någon
   befintlig: turkos ligger mellan blå/grön, koppar är varmare och mattare
   än sand/solnedgång/terminal, plommon är mörkare och rödare än royal och
   mindre neon än cyber, lime är gulare/skarpare än grön/skog/matrix. Is
   och korall är de två nya LJUSA temana (bredvid ljust/ros/sand). */
[data-theme="teal"]{
  --ink: #051512; --ink-2: #0A211C; --accent-rgb: 45,212,191; --accent2-rgb: 20,166,150;
  --line: rgba(var(--accent-rgb),.22); --on-accent: #04120F;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="plum"]{
  --ink: #170A1A; --ink-2: #26102B; --accent-rgb: 216,90,190; --accent2-rgb: 165,60,150;
  --line: rgba(var(--accent-rgb),.24); --on-accent: #1C0A1F;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D85ABE' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="copper"]{
  --ink: #170D08; --ink-2: #241608; --accent-rgb: 205,120,60; --accent2-rgb: 175,90,40;
  --line: rgba(var(--accent-rgb),.24); --on-accent: #170D08;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CD783C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="ice"]{
  --ink: #EEF6FA; --ink-2: #FFFFFF; --tint-rgb: 15,35,48; --text-rgb: 15,35,48;
  --accent-rgb: 25,120,175; --accent2-rgb: 55,150,205; --cream: #0F2330; --on-accent: #FFFFFF;
  --line: rgba(var(--accent-rgb),.26);
  /* Se motiveringen vid [data-theme="rose"] — samma sak här. */
  --dim: rgba(var(--text-rgb),.62); --dim-2: rgba(var(--text-rgb),.42);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231978AF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="lime"]{
  --ink: #0E1306; --ink-2: #182008; --accent-rgb: 175,225,55; --accent2-rgb: 140,190,35;
  --line: rgba(var(--accent-rgb),.24); --on-accent: #10160A;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AFE137' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="coral"]{
  --ink: #FBF0EC; --ink-2: #FFFFFF; --tint-rgb: 55,25,18; --text-rgb: 55,25,18;
  --accent-rgb: 220,95,65; --accent2-rgb: 200,70,45; --cream: #371912; --on-accent: #FFFFFF;
  --line: rgba(var(--accent-rgb),.26);
  /* Se motiveringen vid [data-theme="rose"] — samma sak här. */
  --dim: rgba(var(--text-rgb),.62); --dim-2: rgba(var(--text-rgb),.42);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC5F41' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}


/* Ljust tema: några ställen behöver lite mer kontrast för att inte
   flyta ihop med bakgrunden. */
[data-theme="light"] .card,
[data-theme="light"] .row{ border-color:rgba(var(--tint-rgb),.1); }

/* ALLA ljusa teman (light, rose, sand, ice, coral) — några färger i
   basstilarna är justerade för att läsas mot en MÖRK botten (ljus text/
   ikon på nästan svart) och blir för svaga mot en ljus botten: den bleka
   blåa på "?"-knappen, den bleka laxröda på nedåtpilar/varningar i
   Liveboard, den svaga opaciteten på stämplar/klockslag. Det här var
   tidigare bara lappat för "light" (den första ljusa temat) — ice och
   coral (2026-09-14) hade exakt samma problem, olöst, fram tills nu.
   :is() håller ihop de fem själektorerna i en regel i stället för att
   skriva ut dem fem gånger var. */
/* Grönt är mörkare mot ljus botten, så kvitteringsringen behöver mer kraft */
:is([data-theme="light"], [data-theme="rose"], [data-theme="sand"], [data-theme="ice"], [data-theme="coral"]) .tick:not([class*="tick--"]){ border-color:rgba(30,158,82,.55); }
:is([data-theme="light"], [data-theme="rose"], [data-theme="sand"], [data-theme="ice"], [data-theme="coral"]) .tick--info{ color:#2F6FA8; }
:is([data-theme="light"], [data-theme="rose"], [data-theme="sand"], [data-theme="ice"], [data-theme="coral"]) .stamp,
:is([data-theme="light"], [data-theme="rose"], [data-theme="sand"], [data-theme="ice"], [data-theme="coral"]) .cal__w{ color:rgba(var(--text-rgb),.5); }
:is([data-theme="light"], [data-theme="rose"], [data-theme="sand"], [data-theme="ice"], [data-theme="coral"]) .lb-num.is-down{ color:#C0392B; }
:is([data-theme="light"], [data-theme="rose"], [data-theme="sand"], [data-theme="ice"], [data-theme="coral"]) .lb-num.is-alert{ color:#A93226; }


/* ------------------------------------------------------------ typsnitt

   Sju paket, valda i menyn → Utseende → Typsnitt (se applyFont() i
   app.js). Byts genom data-font på <html>, precis som data-theme byter
   färg — bara --font-display och --font-ui skrivs om, resten av CSS:en
   känner inte till vilket paket som är valt. "Standard" (ingen data-font,
   eller data-font="default") behöver ingen egen regel: den är redan
   :root-värdena. Valda för att ligga så långt ifrån varandra som möjligt
   — grotesk, rundad, serif, mono, en ANNAN neutral grotesk, en tung
   displaytypsnitt och handskrift — så växlingen känns som en påtaglig
   skillnad, inte fem varianter av samma sak.
     rounded — Quicksand rakt igenom. Mjuk, rundad, vänlig känsla.
     serif   — Lora rakt igenom. Lugnare, mer redaktionell känsla.
     mono    — Azeret Mono rakt igenom — samma typsnitt som redan bär
               siffrorna/klockslagen, så hela gränssnittet får en
               "terminal"-känsla utan att en enda ny fil behöver laddas.
     roboto  — Roboto rakt igenom. Androids systemtypsnitt — en annan,
               rundare grotesk än Inter Tight; den som vill ha ett
               "neutralt" typsnitt men inte just standardvalet.
     bold    — Archivo rakt igenom, tyngre snitt (600–800) på det som
               redan är fetstilt. Bred, kraftfull, väldigt läsbar på
               långt håll — passar den som vill att allt ska synas tydligt.
     hand    — Caveat rakt igenom. Handskriven, personlig, lekfull — den
               mest avvikande av alla sju, ett medvetet stilbrott. */
[data-font="rounded"]{
  --font-display: "Quicksand", system-ui, sans-serif;
  --font-ui:      "Quicksand", system-ui, sans-serif;
}
[data-font="serif"]{
  --font-display: "Lora", Georgia, serif;
  --font-ui:      "Lora", Georgia, serif;
}
[data-font="mono"]{
  --font-display: "Azeret Mono", ui-monospace, monospace;
  --font-ui:      "Azeret Mono", ui-monospace, monospace;
}
[data-font="roboto"]{
  --font-display: "Roboto", system-ui, sans-serif;
  --font-ui:      "Roboto", system-ui, sans-serif;
}
[data-font="bold"]{
  --font-display: "Archivo", system-ui, sans-serif;
  --font-ui:      "Archivo", system-ui, sans-serif;
}
[data-font="hand"]{
  --font-display: "Caveat", cursive;
  --font-ui:      "Caveat", cursive;
}

/* Temaväljaren i menyn */
.themes{ display:flex; gap:8px; flex-wrap:wrap; padding:6px 2px 2px; }
.theme-dot{
  width:34px; height:34px; border-radius:11px; cursor:pointer;
  border:2px solid transparent; padding:0;
  display:grid; place-items:center;
  transition:transform .14s var(--ease), border-color .2s var(--ease);
}
.theme-dot:active{ transform:scale(.9); }
.theme-dot[aria-pressed="true"]{ border-color:var(--cream); }
.theme-dot span{
  width:100%; height:100%; border-radius:9px; display:block;
  border:1px solid rgba(var(--tint-rgb),.14);
}

/* Kortstorlek (zoom) i menyn → Utseende. Samma format som färgprickarna:
   fem steg på rad, det valda inramat. Bokstaven på knappen ritas i samma
   storlek som steget skalar korten, så raden i sig visar vad man väljer. */
.zooms{ display:flex; gap:8px; flex-wrap:wrap; padding:6px 2px 2px; }
.zoom-step{
  min-width:38px; height:34px; padding:0 8px; cursor:pointer;
  border-radius:11px; border:2px solid rgba(var(--tint-rgb),.14);
  background:rgba(var(--tint-rgb),.05); color:var(--dim);
  font:700 12px/1 var(--font-ui),sans-serif; letter-spacing:.02em;
  display:grid; place-items:center;
  transition:transform .14s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.zoom-step:active{ transform:scale(.9); }
.zoom-step[aria-pressed="true"]{ border-color:var(--cream); color:var(--cream); background:rgba(var(--accent-rgb),.12); }
.zoom-step[data-zoom-pick="0.7"]{ font-size:9px; }
.zoom-step[data-zoom-pick="0.85"]{ font-size:10.5px; }
.zoom-step[data-zoom-pick="1"]{ font-size:12px; }
.zoom-step[data-zoom-pick="1.12"]{ font-size:13.5px; }
.zoom-step[data-zoom-pick="1.25"]{ font-size:15px; }

/* Typsnittsväljaren i menyn. Samma inramade-vid-val mönster som färg-
   prickarna och zoom-stegen, men varje knapp visar ett eget "Aa"-prov i
   PAKETETS egna typsnitt (hårdkodat per data-font-pick, inte via
   --font-display/--font-ui) — annars hade alla fyra visat samma typsnitt
   som råkar vara aktivt just nu i stället för vad man faktiskt väljer. */
.fonts{ display:flex; gap:8px; flex-wrap:wrap; padding:6px 2px 2px; }
.font-pick{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:62px; padding:8px 10px; cursor:pointer;
  border-radius:11px; border:2px solid rgba(var(--tint-rgb),.14);
  background:rgba(var(--tint-rgb),.05); color:var(--dim);
  transition:transform .14s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.font-pick:active{ transform:scale(.94); }
.font-pick[aria-pressed="true"]{ border-color:var(--cream); color:var(--cream); background:rgba(var(--accent-rgb),.12); }
.font-pick__sample{ font-size:19px; line-height:1; font-weight:700; color:var(--cream); }
.font-pick__label{ font:600 10px/1 var(--font-ui); letter-spacing:.02em; }
.font-pick[data-font-pick="default"] .font-pick__sample{ font-family:"Bricolage Grotesque","Inter Tight",sans-serif; }
.font-pick[data-font-pick="rounded"] .font-pick__sample{ font-family:"Quicksand",system-ui,sans-serif; }
.font-pick[data-font-pick="serif"]   .font-pick__sample{ font-family:"Lora",Georgia,serif; }
.font-pick[data-font-pick="mono"]    .font-pick__sample{ font-family:"Azeret Mono",ui-monospace,monospace; }
.font-pick[data-font-pick="roboto"]  .font-pick__sample{ font-family:"Roboto",system-ui,sans-serif; }
.font-pick[data-font-pick="bold"]    .font-pick__sample{ font-family:"Archivo",system-ui,sans-serif; font-weight:800; }
.font-pick[data-font-pick="hand"]    .font-pick__sample{ font-family:"Caveat",cursive; font-size:24px; font-weight:600; }

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--cream);
  font:400 15px/1.45 var(--font-ui), system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}

/* Diskret värme i bakgrunden — inte en yta, bara ljus */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(var(--accent2-rgb),var(--glow-1)), transparent 62%),
    radial-gradient(700px 380px at 0% 4%, rgba(var(--accent-rgb),var(--glow-2)), transparent 60%);
}

/* ------------------------------------------------------------ rullningslister
   Telefonens lister ligger som overlay och rörs inte. På desktop i webbläsare
   ritar systemet annars en bred grå/vit list som bryter helt mot appens ton —
   här görs den smal, rundad och i accentfärgen mot en genomskinlig ränna.
   .sheet och .gat-target__menu har egna, snävare list-regler som vinner på
   specificitet; .stats/.tabs/.lb-board döljer sin list på samma sätt. */
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--accent-rgb),.32) transparent;
}
@media (hover:hover) and (pointer:fine){
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{
    background:rgba(var(--accent-rgb),.26);
    border-radius:999px;
    border:3px solid transparent;
    background-clip:padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{
    background:rgba(var(--accent-rgb),.5);
    background-clip:padding-box;
  }
  *::-webkit-scrollbar-corner{ background:transparent; }
}

h1,h2,h3{
  font-family:var(--font-display), var(--font-ui), sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  margin:0;
}
h1{ font-size:25px; }
h2{ font-size:18px; letter-spacing:-.02em; }
h3{ font-size:15px; font-weight:600; letter-spacing:-.02em; }

a{ color:var(--gold); text-decoration:none; }

.num{ font-family:"Azeret Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:700; }

.label{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); font-weight:600;
}

.dim{ color:var(--dim); }
.dim-2{ color:var(--dim-2); }
.stamp{ font-family:"Azeret Mono", monospace; font-variant-numeric:tabular-nums; font-size:10px; color:var(--dim-2); }

/* Ingen z-index här: den skulle fånga menyn i ett eget lager under topplisten */
.wrap{ position:relative; max-width:620px; margin:0 auto; padding:0 var(--pad); }

/* ------------------------------------------------------------ topplist */

/* color-mix(), inte en hårdkodad rgba(11,10,9,…) — den låg fast på
   standardtemats mörka ink oavsett valt tema, så alla LJUSA teman (light,
   rose, sand, ice, korall) fick en mörk remsa ovanpå sin egen ljusa botten
   i stället för att smälta ihop med den. color-mix() blandar mot vilken
   --ink temat än har satt, så topplisten alltid tonar ut i sin EGEN
   bakgrund — fungerar automatiskt för varje nytt tema utan en egen
   [data-theme="…"] .top-regel. */
.top{
  position:sticky; top:0; z-index:40;
  padding:calc(7px + env(safe-area-inset-top)) 0 10px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 92%, transparent),
    color-mix(in srgb, var(--ink) 72%, transparent) 70%,
    transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.top__inner{ display:flex; align-items:center; gap:10px; max-width:620px; margin:0 auto; padding:0 var(--pad); }
.top__id{ min-width:0; flex:1; }
.top__id .label{ display:block; }
.top__id strong{
  display:block; font-family:var(--font-display),sans-serif; font-weight:600;
  font-size:16px; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Livesiffror precis under topbarens ikonrad, i samma klistrade huvud
   (mäts in i --top-h av measureTop() i app.js). MFY / R2P / OEPE utspridda
   över hela bredden, litet versaltypsnitt som "Försenad sedan"-taggen. */
.livebar{ margin-top:8px; border-top:1px solid var(--line); }
.livebar__inner{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  max-width:620px; margin:0 auto; padding:6px var(--pad) 0;
}
.livebar__kpi{
  display:inline-flex; align-items:baseline; gap:5px;
  font-size:10px; letter-spacing:.03em; text-transform:uppercase; font-weight:600;
  color:var(--dim); white-space:nowrap;
}
.livebar__kpi .num{ font-size:12px; letter-spacing:-.01em; text-transform:none; }
.livebar__kpi.is-ok .num{ color:var(--green); }
.livebar__kpi.is-alert .num{ color:#FF7A6E; }
.livebar__kpi.is-empty .num{ color:var(--dim-2); }

.avatar{
  width:36px; height:36px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  color:var(--on-accent); font-weight:700; font-size:13px; letter-spacing:-.02em;
}
.avatar--ghost{ background:var(--card-2); color:var(--cream); border:1px solid var(--line); }
.avatar--sm{ width:30px; height:30px; border-radius:9px; font-size:11px; }

/* Porträttstorlek i en flerradig lista (t.ex. användarlistan) — nyttjar
   hela radens höjd i stället för en liten fyrkant, eftersom bilden är ett
   porträtt (högre än bred). align-self:stretch gör att den automatiskt
   matchar hur hög raden än blir (två eller tre textrader, radbrytning
   på smala skärmar osv), utan att vi behöver gissa ett pixelvärde. */
.avatar--row{ align-self:stretch; width:48px; height:auto; border-radius:calc(var(--r) - 2px); }

/* Avatar + notisstatus-prick i användarlistan. Wrappen ligger UTANFÖR
   foto-knappens overflow:hidden, annars klipps prickens hörn bort. */
.avatar-wrap{ position:relative; align-self:stretch; flex:0 0 auto; width:48px; }
.avatar-wrap > .avatar--row{ width:100%; height:100%; }
.notif-dot{
  position:absolute; right:-5px; bottom:-5px; width:19px; height:19px;
  border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--card);
}
.notif-dot svg{ width:11px; height:11px; }
.notif-dot--on { background:#3FBF6F; color:#082014; }
.notif-dot--off{ background:var(--card-2); color:var(--dim); border-color:var(--card); }

/* Åtgärdsmeny i en sheet (t.ex. /anvandare) — en lista av alternativ med
   ikon, rubrik och kort beskrivning, i stället för flera små ikonknappar
   på samma rad. */
.action-menu{ display:flex; flex-direction:column; gap:6px; }
.action-menu__item{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; text-align:left; cursor:pointer;
  color:var(--cream); font:inherit; appearance:none;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.action-menu__item:active{ transform:scale(.98); background:var(--card); }
.action-menu__item svg{ flex:0 0 auto; width:20px; height:20px; color:var(--gold); }
.action-menu__item strong{ display:block; font-size:14px; font-weight:600; }
.action-menu__item .stamp{ display:block; margin-top:2px; }
.action-menu__item--danger{ border-color:rgba(218,41,28,.35); background:rgba(218,41,28,.08); margin-top:6px; }
.action-menu__item--danger svg{ color:#FF7A6E; }
.action-menu__item--danger strong{ color:#FF7A6E; }

/* Porträttbeskärare (user_edit.php) — en fast 4:5-ram där bilden dras och
   zoomas innan den bakas till en fast storlek på servern. */
/* left/right/top/height i stället för inset:0 — se --vv-h/--vv-top vid
   .sheet: lagret ska täcka den synliga ytan, inte layoutvyn. */
.crop-overlay{
  position:fixed; left:0; right:0; top:var(--vv-top, 0px); height:var(--vv-h, 100svh);
  z-index:200; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
  touch-action:none; overscroll-behavior:contain;
}
.crop-overlay.is-open{ opacity:1; pointer-events:auto; }
.crop-overlay__box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; width:100%; max-width:360px;
}
.crop-frame{
  position:relative; width:min(100%, 48vh * 4 / 5); aspect-ratio:4/5;
  margin:0 auto; overflow:hidden; border-radius:calc(var(--r) - 2px);
  background:var(--card-2); touch-action:none; cursor:grab;
}
.crop-frame:active{ cursor:grabbing; }
.crop-frame img{
  position:absolute; top:0; left:0; max-width:none; pointer-events:none;
  user-select:none; -webkit-user-drag:none; will-change:transform;
}

/* Avatar som visar rosterns porträttfoto i stället för initialer.
   Renderas som <button data-image="..."> så samma lightbox som
   används för uppgiftsbilder kan öppna den i stort. */
button.avatar--photo{
  appearance:none; padding:0; border:1px solid var(--line); cursor:pointer;
  background:var(--card-2); overflow:hidden;
  transition:transform .13s var(--ease);
}
button.avatar--photo:active{ transform:scale(.93); }
button.avatar--photo:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.avatar--photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  border-radius:inherit; display:block;
}

.iconbtn{
  width:38px; height:38px; flex:0 0 auto;
  position:relative;
  display:grid; place-items:center;
  border-radius:11px; border:1px solid rgba(var(--tint-rgb),.1);
  background:rgba(var(--tint-rgb),.06); color:var(--cream);
  cursor:pointer; transition:transform .13s var(--ease), background .2s var(--ease);
}
.iconbtn:active{ transform:scale(.93); background:var(--card-2); }
.iconbtn svg{ width:18px; height:18px; }
/* osynlig träffyta så knappen fortfarande är 44px att träffa */
.iconbtn::after{ content:""; position:absolute; inset:-3px; }

/* Lägg till-knappen i toppheadern — enda ikonknappen som ska sticka ut,
   så den bär samma guldgradient och glöd som .btn--primary i stället för
   den tysta ikon-stilen alla andra knappar i headern har. */
.iconbtn--accent{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:var(--on-accent); border:0;
  box-shadow:0 6px 18px -6px rgba(var(--accent2-rgb),.65);
}
.iconbtn--accent:active{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); }
.iconbtn--accent svg{ width:19px; height:19px; }

/* ------------------------------------------------------------ knappar */

.btn{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:11px 17px;
  border-radius:999px;
  font:600 14px/1 var(--font-ui),sans-serif; letter-spacing:-.01em;
  background:rgba(var(--tint-rgb),.06); color:var(--cream);
  border:1px solid rgba(var(--tint-rgb),.1);
  transition:transform .13s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.btn--primary{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:var(--on-accent); font-weight:700; border:0;
  padding:12px 18px;
  box-shadow:0 10px 30px -10px rgba(var(--accent2-rgb),.65);
}
.btn--danger{ background:rgba(218,41,28,.15); color:#FF7A6E; border:1px solid rgba(218,41,28,.4); }
/* Kort kvitto på knappen när en punkt lagts till — lugnt, inget firande. */
.btn--primary.is-confirmed{ background:linear-gradient(180deg,var(--green),var(--green)); color:#fff; box-shadow:none; }
.btn--block{ width:100%; }
.btn--sm{ min-height:34px; padding:8px 14px; font-size:13px; }

/* Crew food — datumväljaren ligger inuti "Visa"-knappen i stället för ett
   eget fält bredvid: en osynlig date-input täcker hela knappytan, se
   liveboard_crew_food.php. */
.cf-visabtn{ position:relative; overflow:hidden; }
.cf-visabtn input[type=date]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:0; padding:0; cursor:pointer;
}

/* Radknappar
   ----------------------------------------------------------------
   En rad kan ha upp till fyra knappar. Tidigare hade alla samma
   tyngd — tre färgade rutor som konkurrerade om blicken. Nu bär
   kvitteringsknappen ensam färg och form, och de övriga är tysta
   ikoner som stiger fram först när man rör vid dem.

   Kvitteringsknappen är en ring som fylls: den läser som en ruta
   att bocka av, och fyllningen blir kvittot på att det är gjort. */

.tick{
  width:38px; height:38px; flex:0 0 auto;
  position:relative;
  border-radius:50%;
  border:1px solid transparent;
  background:transparent;
  color:var(--dim);
  display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .13s var(--ease), background .18s var(--ease),
             color .18s var(--ease), border-color .18s var(--ease);
}
.tick svg{ width:18px; height:18px; }
/* Osynlig träffyta: knappen syns som 38px men träffas som 46px */
.tick::after{ content:""; position:absolute; inset:-4px; }
.tick:active{ transform:scale(.9); }
.tick:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* Bilage-pricken (gem) — <button data-file-menu>, öppnar Visa/Skicka-menyn */
.tick--file{ color:var(--gold); }

/* Primärhandlingen: kvittera. Ringen fylls när man trycker. */
.tick:not([class*="tick--"]){
  border-color:rgba(49,196,107,.45);
  color:var(--green);
}
.tick:not([class*="tick--"]):active{
  background:var(--green);
  border-color:var(--green);
  color:var(--ink);
}

/* Sekundära handlingar: ingen ram, men en svag yta så att de läses som
   knappar även på en telefon, där det inte finns någon hovring att lita på. */
.tick--muted,
.tick--gold,
.tick--info,
.tick--danger{ background:rgba(var(--tint-rgb),.06); }

.tick--muted{ color:var(--dim); }
.tick--gold { color:var(--gold); }
.tick--info { color:#7FB4E6; font:700 16px/1 var(--font-ui),sans-serif; }
.tick--danger{ color:#E8776B; }

.tick--muted:active,
.tick--gold:active,
.tick--info:active,
.tick--danger:active{ background:rgba(var(--tint-rgb),.14); }

/* Kvitterad rad: ringen är ifylld och blir kvittot */
.row.is-done .tick:not([class*="tick--"]){
  background:var(--green);
  border-color:var(--green);
  color:var(--ink);
}

@media (hover:hover){
  .tick--muted:hover, .tick--gold:hover,
  .tick--info:hover, .tick--danger:hover{ background:rgba(var(--tint-rgb),.14); }
  .tick--muted:hover{ color:var(--cream); }
  .tick:not([class*="tick--"]):hover{
    background:rgba(49,196,107,.16); border-color:var(--green);
  }
}

/* ------------------------------------------------------------ kort */

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.card + .card{ margin-top:9px; }
.card--feature{
  background:linear-gradient(140deg, rgba(var(--accent-rgb),.1), rgba(var(--tint-rgb),.02) 65%);
  border-color:rgba(var(--accent-rgb),.3);
}
.card--tight{ padding:11px 13px; border-radius:var(--r); }

/* ---------------------------------------------------------- installations-/notisgrind
   Fullskärmsrutor som tvingar fram uppmärksamhet: först "lägg till på
   hemskärmen", sedan (i tur och ordning) "slå på notiser". Ligger ovanpå
   allt annat i appen, inklusive lightbox och sheets. Går att hoppa över
   (per session — se app.js) eftersom vi aldrig kan garantera att det går
   att tvinga fram en installation rent tekniskt, särskilt på iOS.
*/
.gate{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(6,5,4,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.gate__card{
  width:100%; max-width:420px;
  background:var(--ink-2);
  border:1px solid rgba(var(--accent-rgb),.4);
  border-radius:var(--r-lg);
  padding:34px 26px 22px;
  text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.gate--push .gate__card{ border-color:rgba(49,196,107,.4); }
.gate__icon{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.18); color:var(--gold);
}
.gate--push .gate__icon{ background:rgba(49,196,107,.18); color:var(--green); }
/* Push-grinden saknar en beskrivande text under rubriken (borttagen på
   begäran), så titeln får själv lite extra andrum ner mot knappen. */
.gate--push .gate__title{ margin-bottom:26px; }
.gate__icon svg{ width:32px; height:32px; }
.gate__title{ font:800 21px/1.3 var(--font-ui),sans-serif; color:var(--cream); margin:0 0 10px; }
.gate__text{ margin:0 0 24px; font-size:14.5px; line-height:1.55; color:var(--dim); }
.gate__skip{
  appearance:none; -webkit-appearance:none; background:none; border:0;
  display:block; width:100%; margin-top:14px; padding:6px; cursor:pointer;
  color:var(--dim); font:600 12.5px/1 var(--font-ui),sans-serif;
  text-decoration:underline; text-underline-offset:3px;
}
@media (min-width:640px){
  .gate__card{ padding:40px 34px 26px; }
  .gate__icon{ width:72px; height:72px; }
  .gate__icon svg{ width:36px; height:36px; }
  .gate__title{ font-size:23px; }
  .gate__text{ font-size:15px; }
}
.card--compact{ padding:11px; }
.card--compact .field{ margin-bottom:7px; }
.card--compact textarea{ min-height:44px; padding:9px 12px; }
.card--compact select{ min-height:40px; padding:9px 12px; padding-right:34px; }
.card--compact .more{ padding:3px 0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.section{ margin:15px 0 7px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.section h2{ min-width:0; }

/* ------------------------------------------------------------ rader */

/* Kortstorlek (menyn → Utseende → Storlek på uppgiftskort). Valet sparas
   per enhet i localStorage och sätts som --card-zoom på <html> redan i
   sidhuvudet, innan något ritas — se boot-skriptet i layout.php.

   zoom (inte transform:scale) därför att zoom skalar elementets FAKTISKA
   layout: en rad med automatisk bredd fyller fortfarande sin spalt, allt
   inuti — text, taggar, de 38 px stora knapparna och luften mellan
   raderna — krymper proportionellt, och inget hamnar utanför eller lämnar
   ett tomt hål efter sig som en transform hade gjort. */
.rows{ display:flex; flex-direction:column; gap:6px; zoom:var(--card-zoom, 1); }

/* "Visa N till" — sektioner begränsade till ett antal synliga rader
   (t.ex. render_section()s opts.limit, alla dashboard-sektionerna i
   app/views/layout.php). row--limit-hidden/row--peek sätts av PHP:s
   row_limit_opts() vid sidladdning och av refreshRowLimit() i app.js
   efter varje ändring — en klass per rad i stället för en strukturell
   :nth-child-regel, eftersom en del sektioner (Delegerat till mig,
   Frågor från <handyman>) blandar flera .rows-nivåer eller flera block
   i en och samma räkning, där radens plats i DOM:en inte räcker för att
   avgöra vilken som är "fjärde".
   .row.row--limit-hidden (dubbel klass, inte bara .row--limit-hidden) —
   annars vinner .row{ display:flex } längre ner i arket över display:none
   vid lika specificitet, och raden syntes ändå. */
.row.row--limit-hidden{ display:none; }
/* Fjärde raden (row--peek): en RIKTIG tonings-gradient över radens EGNA
   innehåll (inte en platt opacity på hela raden — då blev "Visa N till"
   lika urblekt som resten, och man såg ändå hela titeln, bara matt).
   Bara en smal strimma längst upp lämnas orörd (en glimt, inte halva
   kortet), sedan tonar den snabbt ut mot en tät skärm — justera 15%/50%
   nedan om det fortfarande syns för mycket eller för lite.
   "Visa N till" ligger centrerat, mitt i kortet, helt läsbart i full
   styrka. pointer-events:none på radens EGNA barn + ett klick fångas i
   stället alltid av själva raden (se app.js) — annars kunde ett tryck
   träffa kryssrutan/knapparna under skärmen i stället för att fälla ut
   sektionen. */
.row--peek{ cursor:pointer; }
.row--peek > *{ pointer-events:none; }
.row--peek::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  /* var(--ink-2) i stället för --tint-rgb: den senare är gjord för
     mycket låg alfa (.045–.07, se --card/--card-2) — vid hög alfa (för
     en riktig skärm) blir den ett grällt vitt/svart block i mörkt/ljust
     tema. --ink-2 är redan en färdig, temaanpassad YTFÄRG. */
  background:linear-gradient(180deg, transparent 0%, transparent 15%, var(--ink-2) 50%);
}
.row--peek::after{
  content:attr(data-peek-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:inherit;
  font:700 13px/1 var(--font-ui),sans-serif; color:var(--gold);
  white-space:nowrap;
}

.row{
  position:relative;
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:9px 10px 9px 12px;
  transition:transform .13s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
}

/* Siri-badgen — se siri_badge_html() i layout.php. Sitter i hörnet av
   kortet som en liten diskret markör, inte en knapp: tar ingen plats i
   flödet (absolut positionerad, ur DOM-flödet innan .row__actions/.row__main
   läggs ut) och stjäl inga klick. Dämpad färg (--dim-2) i stället för
   guldaccenten, så den inte konkurrerar med riktiga statustaggar. */
.row__siri{
  position:absolute; top:-6px; right:-6px;
  display:flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%;
  background:var(--card-2); border:1px solid var(--line);
  color:var(--dim-2); pointer-events:none;
}
.row__siri svg{ width:9px; height:9px; }
.row:active{ background:var(--card-2); transform:scale(.99); }
/* Långtryck öppnar ändra-panelen på kort som får det (se initLongPressEdit
   i app.js) — hindra iOS callout-menyn ("Kopiera"/"Slå upp") och
   textmarkeringen från att ta över innan hålltiden hinner lösa ut. */
.row[data-edit]{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.row__main{ flex:1; min-width:0; }
.row__title{ font-size:14px; line-height:1.35; word-break:break-word; }
a.autolink{ text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.row__meta{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:4px; }
.row__actions{ display:flex; gap:6px; flex:0 0 auto; }
.row.is-done{ opacity:.45; }
.row.is-done .row__title{ text-decoration:line-through; text-decoration-color:var(--dim-2); }
.row.is-leaving{ opacity:0; transform:translateX(14px) scale(.98); }

/* Snabbvalen för "Skjut upp" i Ändra uppgift-panelen (initLongPressEdit i
   app.js) — knappar i .grid-2, samma bredd som gridcellerna i stället för
   att bara krympa till sin text. */
.grid-2 > .btn{ width:100%; }

/* ---------------------------------------------- text runt knapparna

   .row--wrap: uppgiftskortets text flyter RUNT knapparna (bild, penna,
   bock) i stället för att trängas i en smal kolumn bredvid dem. Knapparna
   tar ~38 px per styck, så på en telefon åt de tidigare upp halva
   radbredden och en lång titel blev fyra rader i en smal spalt. Nu klarar
   den sig med två: de första raderna viker undan för knapparna, resten
   löper över hela bredden.

   Två saker krävs för att det ska fungera:
     1. .row__actions måste ligga FÖRE .row__main i DOM:en (en float
        påverkar bara text som kommer efter den i källan) — det är därför
        renderarna i layout.php skriver ut knapparna först. Klassen
        row--wrap sätts på just de rader som har den ordningen.
     2. Raden får display:flow-root, alltså en egen
        blockformateringskontext, så floaten innesluts av radens ram utan
        att någon clearfix behövs (::after är upptagen av kvitterings-
        animationens ljusvåg).

   Radens egen luft flyttas ner i titeln (padding-top på .row__main), så
   att en enradig titel hamnar i optisk mitt bredvid de 38 px höga
   knapparna samtidigt som kortet blir lägre än förut. */
.row--wrap{
  display:flow-root;
  padding-top:4px; padding-bottom:4px;
}
.row--wrap > .row__actions{ float:right; margin-left:8px; }
.row--wrap > .row__main{ padding-top:7px; padding-bottom:3px; }

/* ---------------------------------------------- kvitteringsanimation

   Tre saker i följd, ~600 ms totalt:
   1. Bocken studsar till och en ring pulsar ut
   2. En grön ljusvåg sveper genom raden
   3. Raden viker ihop sig på höjden i stället för att bara försvinna

   Partiklarna ritas i JS eftersom antal och riktning slumpas.
*/

.row.is-celebrating{
  position:relative; overflow:hidden;
  border-color:rgba(49,196,107,.55);
  animation:row-pop .42s var(--bounce);
}
@keyframes row-pop{
  0%   { transform:scale(1); }
  32%  { transform:scale(1.022); }
  100% { transform:scale(1); }
}

/* Ljusvågen som sveper från vänster */
.row.is-celebrating::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(49,196,107,.05) 30%,
    rgba(49,196,107,.28) 50%,
    rgba(49,196,107,.05) 70%,
    transparent 100%);
  transform:translateX(-100%);
  animation:row-sweep .5s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes row-sweep{ to{ transform:translateX(100%); } }

/* Raden viker ihop sig i stället för att bara tonas ut */
.row.is-collapsing{
  animation:row-collapse .34s cubic-bezier(.55,0,.35,1) forwards;
  overflow:hidden; pointer-events:none;
}
/* --h sätts från JS till radens verkliga höjd, annars hoppar långa rader
   till startvärdet innan de viker ihop sig. */
/* Ingen padding i 0%-steget: då utgår animationen från radens EGNA luft
   (den varierar mellan mobil, dator och .row--wrap) i stället för att
   först hoppa till ett fast värde. */
@keyframes row-collapse{
  0%   { opacity:1; transform:scale(1);   max-height:var(--h, 260px); margin-bottom:8px; }
  45%  { opacity:.5; transform:scale(.97); }
  100% { opacity:0; transform:scale(.92); max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0; }
}

/* Bocken: studs + ring som pulsar ut */
.tick.is-celebrating{
  animation:tick-pop .45s var(--bounce);
  background:rgba(49,196,107,.28); border-color:var(--green); color:#fff;
}
@keyframes tick-pop{
  0%   { transform:scale(1); }
  28%  { transform:scale(1.32) rotate(-7deg); }
  55%  { transform:scale(.94) rotate(3deg); }
  100% { transform:scale(1) rotate(0); }
}
.tick.is-celebrating::before{
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  border:2px solid var(--green);
  animation:tick-ring .5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes tick-ring{
  0%   { opacity:.85; transform:scale(1); }
  100% { opacity:0;   transform:scale(1.85); }
}

/* Partiklarna. Riktning och avstånd sätts som CSS-variabler från JS. */
.burst{
  position:fixed; left:0; top:0; z-index:75;
  width:7px; height:7px; border-radius:2px;
  pointer-events:none; will-change:transform, opacity;
  animation:burst-fly var(--dur, 620ms) cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes burst-fly{
  0%{
    opacity:1;
    transform:translate(var(--x0), var(--y0)) scale(.4) rotate(0deg);
  }
  70%{ opacity:1; }
  100%{
    opacity:0;
    transform:translate(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--dy)))
              scale(.9) rotate(var(--rot, 180deg));
  }
}

@media (prefers-reduced-motion: reduce){
  .row.is-celebrating, .row.is-celebrating::after,
  .tick.is-celebrating, .tick.is-celebrating::before{ animation:none; }
  .row.is-collapsing{ animation-duration:.01ms; }
  .burst{ display:none; }
}
.row--accent{ border-color:rgba(var(--accent-rgb),.3); background:linear-gradient(140deg, rgba(var(--accent-rgb),.1), rgba(var(--tint-rgb),.02) 65%); }

/* Delegerade rader på startsidan: egen, tydlig nyans per riktning så
   "Delegerat uppåt", "Delegerat till mig" och "Delegerade uppgifter — svar
   krävs" går att skilja från varandra och från vanliga rader på en snabb
   blick — en stark kantrand i vänster kant plus en synlig bakgrundston,
   inte bara en antydan.
     row--deleg-up   — en fast orange (--up-rgb). Följde tidigare temats
                       accentfärg, men försvann då in i allt annat guld/
                       accentfärgat i temat; nu en egen kulör som inte
                       delas med något annat i appen.
     row--deleg-in   — en fast blå (--info-rgb, samma som frågetecken-
                       knappen .tick--info) i stället för --accent2-rgb:
                       accent/accent2 ligger för nära varandra i kulör i
                       alla teman för att gå att skilja åt, medan en
                       konstant kulör alltid kontrasterar mot temats guld.
     row--deleg-down — en fast lila (--warn-rgb), samma resonemang: en
                       tredje, egen kulör som varken krockar med guldet
                       eller den fasta blåa.
     row--deleg-shared — en fjärde fast kulör (--share-rgb, teal), för
                       "Delad delegering" — en uppgift utdelad till flera
                       personer på en gång. */
.row--deleg-up{
  border-color:rgba(var(--up-rgb),.45);
  border-left:3px solid rgb(var(--up-rgb));
  background:linear-gradient(140deg, rgba(var(--up-rgb),.22), rgba(var(--tint-rgb),.02) 75%);
}
.row--deleg-in{
  border-color:rgba(var(--info-rgb),.45);
  border-left:3px solid rgb(var(--info-rgb));
  background:linear-gradient(140deg, rgba(var(--info-rgb),.22), rgba(var(--tint-rgb),.02) 75%);
}
.row--deleg-down{
  border-color:rgba(var(--warn-rgb),.45);
  border-left:3px solid rgb(var(--warn-rgb));
  background:linear-gradient(140deg, rgba(var(--warn-rgb),.22), rgba(var(--tint-rgb),.02) 75%);
}
.row--deleg-shared{
  border-color:rgba(var(--share-rgb),.45);
  border-left:3px solid rgb(var(--share-rgb));
  background:linear-gradient(140deg, rgba(var(--share-rgb),.22), rgba(var(--tint-rgb),.02) 75%);
}

/* .row--danger (försenad) efter riktningsnyanserna, så röd kant alltid
   vinner över dem — en försenad delegerad punkt ska synas som försenad. */
.row--danger{ border-color:rgba(218,41,28,.35); }

/* Skift ToDo — kantfärg efter prioritet (1 Säkerhet röd … 4 Restaurangens
   funktion gul), samma kulörer som .tag--red/--blue/--green/--yellow
   nedan. Se SKIFT_PRIORITY_TAG_CLASS i app/tasks.php. */
.row--skift-1{ border-color:rgba(218,41,28,.35); }
.row--skift-2{ border-color:rgba(127,180,230,.35); }
.row--skift-3{ border-color:rgba(49,196,107,.35); }
.row--skift-4{ border-color:rgba(232,180,0,.35); }

.tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; letter-spacing:.03em; text-transform:uppercase; font-weight:600;
  padding:2px 7px; border-radius:999px;
  background:rgba(var(--tint-rgb),.06); color:var(--dim); border:1px solid rgba(var(--tint-rgb),.08);
}
.tag--gold{ background:rgba(var(--accent-rgb),.12); color:var(--gold); border-color:var(--line); }
.tag--red{ background:rgba(218,41,28,.15); color:#FF7A6E; border-color:rgba(218,41,28,.4); }
.tag--green{ background:rgba(49,196,107,.13); color:var(--green); border-color:rgba(49,196,107,.3); }
.tag--blue{ background:rgba(127,180,230,.15); color:#8FC4FF; border-color:rgba(127,180,230,.4); }
.tag--yellow{ background:rgba(232,180,0,.16); color:#F2C94C; border-color:rgba(232,180,0,.4); }

/* ------------------------------------------------------------ statistikpillar */

.stats{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.stats::-webkit-scrollbar{ display:none; }
.stat{
  flex:0 0 auto; min-width:92px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:9px 11px;
}
.stat .num{ font-size:21px; letter-spacing:-.02em; display:block; margin-top:2px; }
.stat--gold .num{ color:var(--gold); }
.stat--green .num{ color:var(--green); }
.stat--red .num{ color:#FF7A6E; }

/* ------------------------------------------------------------ progress */

.progress{ height:5px; border-radius:999px; background:rgba(var(--tint-rgb),.09); overflow:hidden; }
.progress span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transition:width .56s var(--ease);
}

.progress--slim{ display:block; height:4px; margin-top:8px; }

/* Diskret pekare högst upp på dashboarden mot något nytt att titta på —
   i dag bara "Ny! Hjälp inför budgetering" (se
   _dashboard_budget_help_notice.php), men generisk för fler sådana
   framöver. Lugnare än .rctp-btn nedan: en rad, ingen egen färgblock. */
.dash-notice{
  display:flex; align-items:center; gap:7px;
  margin:0 0 10px; padding:7px 10px; border-radius:var(--r);
  background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25);
  color:var(--cream); text-decoration:none;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.dash-notice:active{ transform:scale(.99); background:rgba(var(--accent-rgb),.14); }
.dash-notice__text{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 12.5px/1.3 var(--font-ui),sans-serif;
}
.dash-notice svg{ flex:0 0 auto; color:var(--dim); }

/* ---------------------------------------------------------------- RCTP

   Knappen högst upp hos restaurangchefen och checklistan bakom den.
*/

.rctp-btn{
  display:block; width:100%;
  margin:12px 0 4px; padding:14px 16px;
  border-radius:var(--r); border:1px solid rgba(var(--accent-rgb),.35);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.07));
  color:var(--cream); text-decoration:none;
  transition:transform .13s var(--ease), border-color .2s var(--ease);
}
.rctp-btn:active{ transform:scale(.99); }
.rctp-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.rctp-btn__row{ display:flex; align-items:center; gap:10px; }
.rctp-btn__row svg{ color:var(--gold); flex:0 0 auto; }
.rctp-btn__row strong{
  flex:1; font:800 19px/1 var(--font-display),sans-serif; letter-spacing:.01em;
}
.rctp-btn__pct{
  font:700 15px/1 "Azeret Mono",monospace; color:var(--gold);
}
.rctp-btn__meta{
  display:block; margin-top:6px;
  color:var(--dim); font:600 12px/1.3 var(--font-ui),sans-serif;
}
.rctp-btn.is-started{ border-color:rgba(var(--accent-rgb),.5); }

/* Rubrik och totalräknare (RCTP och förskiftschecklistan) klistras under
   topplisten, så man alltid ser hur långt man kommit i rundan även efter
   att ha scrollat ner bland punkterna. Höjden på .top mäts i JS och
   skrivs till --top-h, eftersom sidhuvudet växer med iPhonens safe-area
   och därför inte har en fast höjd att räkna med. */
.rctp__head{
  position:sticky; top:var(--top-h, 64px); z-index:6;
  padding-bottom:10px; margin-bottom:4px;
  background:var(--ink);
  box-shadow:0 12px 18px -14px rgba(0,0,0,.9);
}

/* Lägg till-knapp följer med när man scrollar i checklistan, så nya
   punkter kan skrivas in mitt i avbetningen. Nålas under sidhuvudet, som
   är klistrat självt (se .rctp__head ovan). */
.rctp__add{
  position:sticky; top:var(--top-h, 64px); z-index:5;
  padding:10px 0 12px;
  background:var(--ink);
  box-shadow:0 12px 18px -14px rgba(0,0,0,.9);
}

/* Fokus — en Operations manager/supervisor kan markera en delegerad punkt
   (kryssrutan i render_add_task_modal(), se create_task() i app/tasks.php)
   så den blir sticky överst hos mottagaren, i stället för att ligga bland
   de vanliga punkterna. Samma sticky-mönster som .rctp__head/.rctp__add
   ovan — nålad under sidhuvudet (--top-h mäts i JS), z-index 7 så den
   ligger över RCTP/förskift-knapparna om båda vore synliga samtidigt.
   Se render_focus_section() i layout.php. */
.focus-sticky{
  position:sticky; top:var(--top-h, 64px); z-index:7;
  padding:10px 0 12px;
  background:var(--ink);
  box-shadow:0 12px 18px -14px rgba(0,0,0,.9);
}
.focus-sticky h2{ display:flex; align-items:center; gap:6px; }
.focus-sticky h2 svg{ color:var(--gold); flex:0 0 auto; }

.tag--focus{
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  color:var(--on-accent); font-weight:700; border:0;
}

/* Kortet: pulserande kant (focusPulse) + ett diagonalt ljusstråk som sveper
   över (focusShimmer, ::after ovanpå innehållet men pointer-events:none så
   det aldrig stjäl ett klick). overflow:hidden klipper strået mot rundade
   hörn — .row är redan position:relative (se .row ovan), så bara
   overflow:hidden krävs här. */
.row--focus{
  overflow:hidden;
  border-color:rgba(var(--accent-rgb),.55);
  animation:focusPulse 2.4s ease-in-out infinite;
}
.row--focus::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  background-size:220% 100%; background-position:150% 0;
  animation:focusShimmer 2.8s ease-in-out infinite;
}
@keyframes focusPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5); }
  50%{ box-shadow:0 0 0 7px rgba(var(--accent-rgb),0); }
}
@keyframes focusShimmer{
  0%{ background-position:150% 0; }
  55%, 100%{ background-position:-50% 0; }
}
@media (prefers-reduced-motion: reduce){
  .row--focus{ animation:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.4); }
  .row--focus::after{ display:none; }
}

/* Kortet ett klick från en notis (delegerad uppgift, eller svar/fråga på
   en) scrollar till — se focusTaskCard() i app.js. Till skillnad från
   .row--focus (permanent flagga, pulserar oändligt) är den här ett
   engångs-drag som klingar av av sig själv; JS tar bort klassen efter att
   den hunnit gå igenom, timern där är satt lite längre än animationen så
   den alltid hinner klart. Två separata animationer på samma klass: den
   guldfärgade ringen pulserar två varv (som förut), medan studsen
   (justArrivedBounce, samma --bounce-fjädring som .is-celebrating/row-pop)
   bara kör en gång — annars ser kortet ut att hoppa till om och om igen. */
.row--just-arrived{
  animation:justArrived 1.6s ease-out 2, justArrivedBounce .45s var(--bounce) 1;
}
@keyframes justArrived{
  0%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),.65); background-color:rgba(var(--accent-rgb),.14); }
  70%{ box-shadow:0 0 0 10px rgba(var(--accent-rgb),0); }
  100%{ background-color:transparent; }
}
@keyframes justArrivedBounce{
  0%   { transform:scale(1); }
  40%  { transform:scale(1.04); }
  100% { transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .row--just-arrived{ animation:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.5); }
}

/* -------------------------------------------------- Åtgärd krävs
   Avvikelsekontrollernas frågor högst upp på startsidan, se
   app/views/_dashboard_action_required.php. Röd kant i stället för guld:
   det här är den ENDA sektionen i appen som kräver ett skrivet svar innan
   den går bort, och den ska inte gå att förväxla med Fokus (guld, pulsande)
   direkt under. Ingen animation på kortet — en rad obesvarade frågor som
   alla pulserar blir oläsbar. */
.action-req{ margin-bottom:14px; }
.action-req.is-empty{ display:none; }
.action-req h2{ display:flex; align-items:center; gap:6px; }
.action-req h2 svg{ color:var(--red); flex:0 0 auto; }

.action-req__card{
  border-color:rgba(218,41,28,.4);
  background:linear-gradient(140deg, rgba(218,41,28,.09), rgba(var(--tint-rgb),.03) 65%);
  /* Kortet tas bort ur flödet av JS efter att övergången spelat klart, se
     lyssnaren på [data-action-form] i app.js. */
  transition:opacity .25s ease, transform .25s ease;
}
.action-req__head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:8px;
}
.action-req__head .stamp{ margin-left:auto; }
.action-req__msg{
  margin:0 0 10px;
  font-size:14.5px; line-height:1.45;
}
.action-req__form{ margin:0; }
.action-req__form textarea{ min-height:52px; }

/* Besvarad: glider ut i stället för att bara försvinna, så det syns att
   svaret togs emot innan kortet lämnar listan. */
.action-req__card--done{ opacity:0; transform:translateX(14px); }
@media (prefers-reduced-motion: reduce){
  .action-req__card{ transition:none; }
  .action-req__card--done{ opacity:0; transform:none; }
}

/* Områdesrubriker: rundan gås område för område, så rubriken ska vara
   lätt att hitta när man scrollar men inte ta över listan. */
.section--zone{ margin-top:18px; }
.section--zone h2{
  font:700 13px/1 var(--font-ui),sans-serif;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold);
}
.section--zone .num{ font-size:12px; }
.section--zone.is-complete h2{ color:var(--green); }
.section--zone.is-complete h2::after{ content:" ✓"; }

/* Alla RCTP-punkter gäller dagens pass, så en deadline-etikett säger inget
   och stängs av i vyn. Metaraden står därför tom tills punkten kvitteras, då
   den visar klockslaget. :empty duger inte — radbrytningarna i HTML:en räknas
   som innehåll — så vi tittar efter etiketter i stället. */
#rctp-list .row__meta:not(:has(.tag, .stamp)){ display:none; }
#rctp-list .row__title{ margin:0; }

/* Kvitterade punkter ligger kvar och stryks i stället för att försvinna */
#rctp-list .row.is-done{ opacity:1; background:transparent; border-color:rgba(var(--tint-rgb),.08); }
#rctp-list .row.is-done .row__title{
  color:var(--dim-2);
  text-decoration:line-through;
  text-decoration-color:rgba(49,196,107,.7);
  text-decoration-thickness:2px;
}
#rctp-list .row.is-done .row__meta{ opacity:.5; }

/* ------------------------------------------------- hopfällbara grupper

   Fasta listan blir lång när alla punkter ligger utfällda. Varje grupp är
   därför ett eget kort som öppnas vid behov. */

.acc{
  margin:8px 0;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
  overflow:hidden;
}
.acc__head{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:13px 15px;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--cream);
  font:600 15px/1.2 var(--font-ui),sans-serif;
}
.acc__head:active{ background:var(--card-2); }
.acc__head:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.acc__label{ flex:1; min-width:0; }
.acc__head svg{ color:var(--dim); transition:transform .2s var(--ease); }
.acc__head[aria-expanded="true"]{ color:var(--gold); }
.acc__head[aria-expanded="true"] svg{ transform:scaleY(-1); color:var(--gold); }
.acc .rows{ padding:0 10px 10px; }
.acc .row{ background:var(--ink); }

@media (hover:hover){
  .acc__head:hover{ background:var(--card-2); }
}

/* ------------------------------------------------- app-inställningar

   Kort med radio i vänsterkanten för effektval, och en grid av
   miniatyrknappar för teman. */

.row--pick{ cursor:pointer; }
.row--pick input[type=radio]{
  flex:0 0 auto; width:22px; height:22px; margin:0 4px 0 0;
  accent-color:var(--gold);
}
.row--pick:has(input[type=radio]:checked){
  border-color:var(--gold);
  background:rgba(var(--accent-rgb),.06);
}

.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
}
.theme-pick{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:12px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.theme-pick input{ position:absolute; opacity:0; pointer-events:none; }
.theme-pick:hover{ background:var(--card-2); }
.theme-pick.is-checked{
  border-color:var(--gold);
  background:rgba(var(--accent-rgb),.08);
}
.theme-pick.is-locked{ opacity:.75; cursor:default; }
.theme-pick.is-locked::after{
  content:"Alltid på";
  position:absolute; top:6px; right:8px;
  font:600 10px/1 var(--font-ui),sans-serif;
  color:var(--dim-2); letter-spacing:.05em; text-transform:uppercase;
}
.theme-pick__swatch{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(var(--tint-rgb),.15);
  pointer-events:none;
}
.theme-pick__label{
  font:600 14px/1 var(--font-ui),sans-serif;
  pointer-events:none;
}

/* ------------------------------------------------------------ flikar */

.tabs{
  display:flex; gap:3px; padding:4px;
  background:rgba(var(--tint-rgb),.05); border-radius:999px;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto; border:0; cursor:pointer;
  padding:8px 14px; border-radius:999px; min-height:34px;
  background:transparent; color:var(--dim);
  font:600 13px/1 var(--font-ui),sans-serif;
  transition:background .2s var(--ease), color .2s var(--ease), transform .13s var(--ease);
}
.tab:active{ transform:scale(.97); }
.tab.is-active{ background:var(--gold); color:var(--on-accent); }

/* ------------------------------------------------------------ formulär */

/* ------------------------------------------------------------ laddning */

/* En enda spinner används överallt: knappar, miniatyrer, bildmodal. */
.spinner{
  width:16px; height:16px; flex:0 0 auto;
  border-radius:50%;
  border:2px solid rgba(25,21,18,.25);
  border-top-color:currentColor;
  animation:spin .6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* På mörk botten är ringen ljus istället för mörk */
.thumb .spinner, .lightbox .spinner, .tick .spinner,
.btn:not(.btn--primary) .spinner{
  border-color:rgba(var(--text-rgb),.2);
  border-top-color:var(--gold);
}

.btn .spinner{ margin-right:2px; }
.btn[disabled]{ opacity:.75; cursor:default; }

/* Kvitteringsknappen: ikonen byts mot en spinner utan att knappen hoppar */
.tick.is-loading svg{ display:none; }
.tick.is-loading::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(var(--text-rgb),.2); border-top-color:currentColor;
  animation:spin .6s linear infinite;
}

/* Listval som byter vy */
.list-pick a.is-loading{ opacity:.55; }
.list-pick a.is-loading svg{ animation:spin .6s linear infinite; }

.lightbox.is-loading img{ display:none; }
.lightbox.is-loading::before{
  content:""; width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(var(--text-rgb),.18); border-top-color:var(--gold);
  animation:spin .7s linear infinite;
}

/* ------------------------------------------------------------ miniatyr */

.thumb{
  position:relative;
  margin:10px auto 0;
  width:100%; max-width:190px;
  text-align:center;
}
.thumb img{
  display:block; width:100%;
  max-height:190px; object-fit:contain;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:rgba(var(--tint-rgb),.03);
}
.thumb__load{
  display:grid; place-items:center;
  height:110px;
  border-radius:var(--r);
  border:1px dashed var(--line);
  background:rgba(var(--tint-rgb),.03);
}
.thumb__x{
  position:absolute; top:-7px; right:-7px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--ink-2); color:var(--cream);
  border:1px solid var(--line);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.8);
}
.thumb__x svg{ width:14px; height:14px; }
.thumb__x::after{ content:""; position:absolute; inset:-8px; }
.thumb__size{
  display:block; margin-top:5px;
  font-family:"Azeret Mono",monospace; font-size:10px; color:var(--dim-2);
}
.thumb__size em{ font-style:normal; color:var(--green); }

.filepick.is-busy{ opacity:.6; pointer-events:none; }

/* Vald dokumentbilaga (PDF/Word/Excel/PowerPoint) — filnamn + storlek + ångra.
   Ingen miniatyr, till skillnad från .thumb för bilder. */
.filetag{
  display:flex; align-items:center; gap:8px;
  width:100%; margin:8px 0 2px;
  padding:7px 9px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:rgba(var(--tint-rgb),.04);
  font-size:12px;
}
.filetag__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filetag__size{ flex:0 0 auto; font-family:"Azeret Mono",monospace; font-size:10px; color:var(--dim-2); }
.filetag__x{
  flex:0 0 auto; position:relative;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--ink-2); color:var(--cream);
  border:1px solid var(--line);
}
.filetag__x svg{ width:12px; height:12px; }
.filetag__x::after{ content:""; position:absolute; inset:-8px; }

.field{ margin-bottom:9px; }
.field > .label{ display:block; margin-bottom:5px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=search], input[type=tel], input[type=number], select, textarea{
  width:100%; min-height:42px;
  padding:10px 12px;
  background:rgba(var(--tint-rgb),.05);
  border:1px solid rgba(var(--tint-rgb),.1);
  border-radius:var(--r);
  color:var(--cream);
  /* 16px krävs annars zoomar iOS in vid fokus */
  font:400 16px/1.35 var(--font-ui),sans-serif;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
textarea{ min-height:62px; resize:vertical; }
textarea[data-autogrow]{ min-height:0; resize:none; overflow:hidden; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--tint-rgb),.07);
}
input::placeholder, textarea::placeholder{ color:var(--dim-2); }
select{
  appearance:none;
  background-image:var(--select-arrow);
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px;
  padding-right:28px;
  text-overflow:ellipsis;
}
/* Två fält i bredd blir trångt på telefon — krymp texten hellre än att klippa den */
.grid-2 select, .grid-2 input{ font-size:15px; padding-left:10px; }
.grid-2 select{ padding-right:25px; background-position:right 7px center; background-size:14px; }
/* Native dropdown-popupen på desktop: utan egna regler får <optgroup>-
   rubrikerna webbläsarens standard — ljusgrå text på vit botten. Sätt om
   både gruppens rubrik och raderna till appens mörka toner. Font-size och
   text-transform ignoreras av popupen, så rubriken markeras med vikt. */
select optgroup{
  background:var(--ink-2);
  color:var(--dim);
  font-weight:700; font-style:normal;
}
select option{
  background:var(--ink-2);
  color:var(--cream);
  font-weight:400;
}
/* «Hamnar i»- och «Delegera uppåt»-listorna får långa rader (restaurang +
   RC-namn i klartext). Mindre text så raderna ryms på en rad i stället för
   att radbrytas i Android-dropdownen. */
#gat-target, #dl-to{ font-size:14px; }
#gat-target optgroup, #gat-target option,
#dl-to optgroup, #dl-to option{ font-size:12.5px; }
/* Ändra uppgift-panelens textarea (#ed-title, initLongPressEdit() i
   app.js) — mer plats att redigera längre uppgiftstexter i. Fonten ligger
   kvar på basreglens 16px (se input/select/textarea-regeln ovan) — under
   16px zoomar Safari på iPhone in hela sidan vid fokus. */
#ed-title{ min-height:140px; }
input[type=date]{
  font-family:"Azeret Mono",monospace; font-size:14px;
  min-width:0; width:100%;
}
/* iOS ger fältet en egen inre bredd — låt den krympa med kolumnen */
input[type=date]::-webkit-date-and-time-value{ text-align:left; min-width:0; }
.grid-2 input[type=date]{
  font-size:13px; padding-left:9px; padding-right:4px;
  width:100%; min-width:0; max-width:100%;
  -webkit-appearance:none; appearance:none;
}
/* iOS lägger en egen inre container i date-fält som också måste få krympa */
.grid-2 input[type=date]::-webkit-datetime-edit{ min-width:0; overflow:hidden; }
::-webkit-calendar-picker-indicator{ filter:invert(78%) sepia(63%) saturate(1000%) hue-rotate(346deg); }

/* Datumfält med egen platshållartext ("Direkt"/"Ingen deadline") i stället
   för ett tomt fält. Själva <input type="date"> ligger kvar overallt
   (kalenderikonen är opåverkad, den styrs av filtret ovan, inte av color)
   — vi gömmer bara fältets EGEN text och ritar vår egen ovanpå. Overlayn
   har pointer-events:none, så ett klick/tryck alltid går igenom till det
   riktiga fältet under och öppnar datumväljaren som vanligt. */
.datefield{ position:relative; }
.datefield input[type=date]{ color:transparent; }
.datefield__label{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  pointer-events:none; max-width:calc(100% - 26px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 13px/1 "Azeret Mono",monospace; color:var(--cream);
}
.datefield__label.is-placeholder{
  font:500 13px/1 var(--font-ui),sans-serif; color:var(--dim-2);
}

/* Kompakt variant: en liten chip (som .chip) i stället för ett fullbrett
   fält — "onödigt stort för bara ett datum". Samma osynliga-input-med-
   egen-label-teknik ovan, bara i sin naturliga bredd (inline-flex) med
   input-elementets egna bakgrund/kant/bredd nollställda till förmån för
   .datefield--chip:s egna (pill-formade). Webbläsarens inbyggda
   kalenderikon (redan omfärgad guld, se ::-webkit-calendar-picker-
   indicator ovan) sitter kvar till höger — ingen egen ikon behövs. */
.datefield--chip{
  display:inline-flex; min-height:36px; border-radius:999px;
  background:rgba(var(--tint-rgb),.06); border:1px solid rgba(var(--tint-rgb),.1);
}
.datefield--chip input[type=date]{
  width:auto; min-width:0; min-height:0; height:100%;
  padding:8px 8px 8px 14px; margin:0;
  background:transparent; border:0; border-radius:0;
  cursor:pointer;
}
.datefield--chip .datefield__label{ left:14px; max-width:none; }

.grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
/* Native date-fält har en inbyggd minsta bredd som annars spränger rutnätet
   och får kolumnerna att gå in i varandra på en telefon. */
.grid-2 > *{ min-width:0; }
.grid-2 input, .grid-2 select, .grid-2 textarea{ min-width:0; max-width:100%; }
/* Fält med långa värden (restaurangnamn) får hellre egen rad än avklippt text */
.grid-2--wide{ grid-template-columns:1fr; gap:0; }

/* Filväljare som knapp */
/* Rad med små åtgärdsknappar i formuläret. Ligger tydligt skild från
   primärknappen så man inte råkar skicka in när man vill lägga till bild. */
.addrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.chip{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:8px 14px; border-radius:999px;
  background:rgba(var(--tint-rgb),.06); border:1px solid rgba(var(--tint-rgb),.1);
  color:var(--cream); font:600 13px/1 var(--font-ui),sans-serif;
  transition:transform .13s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.chip:active{ transform:scale(.97); }
.chip[aria-expanded="true"], .chip[aria-pressed="true"], .chip.has-file{
  border-color:var(--line); background:rgba(var(--accent-rgb),.12); color:var(--gold);
}
.chip input[type=file]{ display:none; }
.chip svg{ width:15px; height:15px; }

/* Kryssruta förklädd till chip — Kvittojournals filter (Typ/Kanal/
   Betalsätt, se realinsights_kvittojournal.php). Checkboxen finns kvar i
   DOM:en (tillgänglig, skickas med i formuläret) men syns inte själv;
   :has() målar om själva chipen efter dess läge — ingen JS behövs. */
.chip input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0; }
.chip:has(input[type=checkbox]:checked){
  border-color:var(--line); background:rgba(var(--accent-rgb),.12); color:var(--gold);
}
.chip:has(input[type=checkbox]:not(:checked)){ opacity:.5; }

.filepick{
  display:inline-flex; align-items:center; gap:7px;
  min-height:38px; padding:9px 15px; border-radius:999px;
  background:rgba(var(--tint-rgb),.06); border:1px solid rgba(var(--tint-rgb),.1);
  font:600 13px/1 var(--font-ui),sans-serif; cursor:pointer;
}
.filepick input{ display:none; }
.filepick.has-file{ border-color:var(--line); color:var(--gold); background:rgba(var(--accent-rgb),.1); }

/* Behövs/inköp — radvis lista i "Lägg till uppgift"/"Ändra uppgift" (bara
   handymanlistan), se wireShoppingList() i app.js. Varje rad är en artikel
   med en knapp för att ta bort den igen. */
.shoplist{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.shoplist__row{ display:flex; align-items:center; gap:6px; }
.shoplist__row input{ flex:1; min-width:0; min-height:38px; }
.shoplist__row button{
  flex:0 0 auto; appearance:none; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--tint-rgb),.06); border:1px solid rgba(var(--tint-rgb),.1);
  color:var(--dim); cursor:pointer;
}
.shoplist__row button:active{ transform:scale(.93); background:var(--card-2); }
.shoplist__row button svg{ width:13px; height:13px; }

.more{
  display:flex; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:6px 0;
  color:var(--dim); font:600 12px/1 var(--font-ui),sans-serif;
}
.more svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
.more[aria-expanded="true"] svg{ transform:rotate(180deg); }
.collapse{ display:none; }
.collapse.is-open{ display:block; }

/* ---- Restaurangväljaren på startsidan (_restaurant_picker.php med
   $pickerCollapsible). Basens .collapse växlar bara display; här vill vi ha
   en mjuk utfällning. Grid-rows-tricket (0fr → 1fr) animerar lådan till
   innehållets verkliga höjd utan fast max-height, och listan glider
   samtidigt uppåt på plats. */
.acc--pick{ margin:12px 0 4px; }
.acc--pick .collapse{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease);
}
.acc--pick .collapse > .list-pick{
  /* Lodrät padding bara när utfälld (se .is-open nedan) — annars lämnade
     de 8px:en kvar en tunn, osynlig remsa av listans kant precis under
     rubrikknappen även i hopfällt läge (grid-rows-tricket krymper SJÄLVA
     raden till 0, men padding på barnet räknas inte bort av det). Klickade
     man där gick man rakt till första restaurangen i stället för att
     fälla ut lådan. pointer-events:none är ett andra skyddsnät mot samma
     sak om någon pixel ändå skulle bli kvar. */
  overflow:hidden; min-height:0; padding:0 8px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .32s var(--ease), padding .32s var(--ease);
}
.acc--pick .collapse.is-open{ display:grid; grid-template-rows:1fr; }
.acc--pick .collapse.is-open > .list-pick{ padding:8px; opacity:1; transform:none; pointer-events:auto; }
@media (prefers-reduced-motion:reduce){
  .acc--pick .collapse,
  .acc--pick .collapse > .list-pick{ transition-duration:1ms; }
}

/* ------------------------------------------------------ restauranggrupp
   Expanderbara containrar per restaurang, t.ex. i användarlistan. Admins/
   supervisors som inte hör till någon restaurang ligger utanför, i en
   vanlig platt .rows-lista ovanför grupperna.
*/
.rgroup{ margin-top:12px; }
.rgroup__head{
  appearance:none; -webkit-appearance:none; width:100%;
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px 14px; cursor:pointer;
  color:var(--cream); font:700 14px/1.3 var(--font-ui),sans-serif;
  transition:background .2s var(--ease), transform .13s var(--ease);
}
.rgroup__head:active{ transform:scale(.99); }
.rgroup__head svg:first-child{ flex:0 0 auto; opacity:.7; }
.rgroup__name{ flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rgroup__head svg:last-child{ flex:0 0 auto; opacity:.6; transition:transform .2s var(--ease); }
.rgroup__head[aria-expanded="true"] svg:last-child{ transform:rotate(180deg); }
.rgroup__head[aria-expanded="true"]{ border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom-color:transparent; }
.rgroup__rows{
  border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:6px; background:rgba(var(--tint-rgb),.02);
}
.rgroup__rows.is-open{ display:flex; flex-direction:column; gap:6px; }

/* "Behövs/inköp – totalt" — sammanfattningskort överst i en handymanlistas
   punkter (handymannens startsida OCH Handymanlistan för besökande RC/
   supervisor/Operations manager), se render_handyman_shopping_summary() i
   app/views/layout.php. Ligger som första kort i samma .rows-behållare som
   punkterna, därav egen accentfärg i stället för radernas vanliga .card-ton
   — annars är den lätt att missa bland punkterna. */
.shopsummary{
  background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:var(--r); padding:10px 12px;
}
.shopsummary__head{
  display:flex; align-items:center; gap:8px;
  font:700 13px/1.3 var(--font-ui),sans-serif; color:var(--gold);
  margin-bottom:6px;
}
.shopsummary__head svg{ flex:0 0 auto; opacity:.85; }
.shopsummary__head .num{ margin-left:auto; }
.shoplist-summary{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.shoplist-summary li{ font:500 13px/1.4 var(--font-ui),sans-serif; color:var(--cream); }

/* Knapp som fäller ut ett dolt kort, t.ex. "Lägg till uppgift" på startsidan */
/* Plusikonen vrids till ett kryss när formuläret är utfällt. Gäller bara
   knappar som faktiskt visar ett plus — grupprubriker med pil har en egen
   regel, annars roteras även deras pil 45 grader. */
.js-collapse-toggle svg{ transition:transform .2s var(--ease); }
.btn.js-collapse-toggle[aria-expanded="true"] svg{ transform:rotate(45deg); }

/* ------------------------------------------------- breda datatabeller

   Tabellerna från HR är för breda för en telefon i stående läge. I stället
   för att krympa dem till oläslighet låter vi dem behålla sin bredd och
   scrollas i sidled, med två saker fastnålade:

     - namnkolumnen till vänster, så man alltid vet vems rad man läser
     - rubrikraden upptill, så man kan sortera var man än befinner sig

   Sidledsscroll gör att elementet blir en scrollcontainer i *båda*
   riktningar. Därför får det en maxhöjd — annars kan rubrikraden inte
   nålas fast vertikalt, eftersom det inte finns någon vertikal scroll
   inuti containern att nåla den mot.
*/

.dtable{
  margin:0 calc(var(--pad) * -1);       /* ut i skärmkanterna på mobil */
  /* Fyller resten av skärmen. Rubrik, sökrad och radräknare tar ~190px;
     dvh följer med när Safaris adressfält fälls in och ut. */
  max-height:calc(100dvh - 190px);
  min-height:220px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.dtable table{
  width:100%;
  border-collapse:separate;            /* separate krävs för sticky-kanter */
  border-spacing:0;
  font:500 12px/1.25 var(--font-ui),sans-serif;
}

.dtable th,
.dtable td{
  padding:9px 11px;
  white-space:nowrap;
  text-align:right;                    /* siffror högerställs som standard */
  border-bottom:1px solid rgba(var(--tint-rgb),.07);
}
.dtable td{ color:var(--cream); }
.dtable td.t{ text-align:left; }        /* textkolumner vänsterställs */
.dtable td.dim{ color:var(--dim); }

/* Rubrikrad — nålad upptill, klickbar för sortering */
.dtable thead th{
  position:sticky; top:0; z-index:2;
  background:var(--ink-2);
  color:var(--dim);
  font:700 10px/1.2 var(--font-ui),sans-serif;
  text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  border-bottom:1px solid var(--line);
}
.dtable thead th:hover{ color:var(--cream); }

/* Sorteringspil. Tar plats även osorterad så rubriken inte hoppar. */
.dtable thead th::after{
  content:"↕"; margin-left:5px; opacity:.3; font-size:10px;
}
.dtable thead th[aria-sort="ascending"]::after{ content:"↑"; opacity:1; color:var(--gold); }
.dtable thead th[aria-sort="descending"]::after{ content:"↓"; opacity:1; color:var(--gold); }
.dtable thead th[aria-sort]{ color:var(--gold); }

/* Namnkolumnen fryses i sidled */
.dtable th:first-child,
.dtable td:first-child{
  position:sticky; left:0; z-index:1;
  text-align:left;
  background:var(--ink);
  font-weight:600;
  /* Skuggan visar att innehållet fortsätter bakom kolumnen */
  box-shadow:1px 0 0 var(--line), 6px 0 12px -6px rgba(0,0,0,.55);
}
.dtable thead th:first-child{ z-index:3; background:var(--ink-2); }

.dtable tbody tr:active td{ background:var(--card-2); }
.dtable tbody tr:active td:first-child{ background:var(--card-2); }

/* Färgade celler: grönt = klart/finns, rött = saknas eller kräver koll */
.dtable td.ok  { background:rgba(49,196,107,.15);  color:var(--green); }
.dtable td.bad { background:rgba(218,41,28,.18);   color:#FF8B80; }
.dtable td.warn{ background:rgba(var(--accent-rgb),.14); color:var(--gold); }

/* Raden under tabellen: antal träffar */
.dtable-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:8px 2px 0;
  color:var(--dim); font:600 12px/1 var(--font-ui),sans-serif;
}

/* Sökfält och filterknappar ovanför tabellen */
.dtable-tools{ display:flex; gap:8px; margin:10px 0; }
.dtable-tools input{ flex:1; min-width:0; min-height:38px; padding:9px 13px; }
.dtable-tools input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; cursor:pointer;
  background:var(--dim) ; border-radius:999px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/12px no-repeat;
}

@media (min-width:1024px){
  .dtable{
    margin:0;
    max-height:calc(100dvh - 240px);
    border-radius:var(--r);
    border:1px solid var(--line);
  }
  .dtable table{ font-size:13px; }
  .dtable th, .dtable td{ padding:10px 13px; }
  .dtable tbody tr:hover td{ background:var(--card); }
  .dtable tbody tr:hover td:first-child{ background:var(--card-2); }
}


/* Etikett/värde-lista i arket när man trycker på en tabellrad */
.kv{ display:flex; flex-direction:column; gap:1px; }
.kv__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 2px; border-bottom:1px solid rgba(var(--tint-rgb),.06);
}
.kv__row:last-child{ border-bottom:0; }
.kv__k{ color:var(--dim); font:600 12px/1.2 var(--font-ui),sans-serif;
        text-transform:uppercase; letter-spacing:.04em; }
.kv__v{ color:var(--cream); font:600 14px/1.2 var(--font-ui),sans-serif;
        text-align:right; min-width:0; }
.kv__more{ margin-top:12px; }

/* Kvittots artikelrader — lazy-laddat i .kv__more, se
   _kvittojournal_kvitto.php och tbl-kvitto i realinsights_kvittojournal.php. */
.kvitto-items{ display:flex; flex-direction:column; gap:3px; }
.kvitto-items__row{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; line-height:1.35; }
.kvitto-items__qty{ flex:0 0 18px; color:var(--dim); font-weight:700; }
.kvitto-items__name{ flex:1; min-width:0; color:var(--cream); }
.kvitto-items__price{ flex:0 0 auto; color:var(--dim); font-variant-numeric:tabular-nums; }
.kvitto-items__row--sub .kvitto-items__name{ color:var(--dim); font-size:11.5px; padding-left:10px; }
.kvitto-items__row--refund,
.kvitto-items__row--refund .kvitto-items__price{ color:#FF8B80; }

/* Receptets råvarudetalj — lazy-laddat i .kv__more, se
   _liveboard_recept_detalj.php och tbl-recept i liveboard_recept.php. */
.recipe-items{ display:flex; flex-direction:column; gap:3px; }
.recipe-items__row{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; line-height:1.35;
                    width:100%; padding:3px 0; margin:0; background:none; border:0; color:inherit;
                    font-family:inherit; text-align:left; cursor:pointer; }
.recipe-items__row[aria-expanded="true"] .recipe-items__name{ color:var(--gold); }
.recipe-items__name{ flex:1; min-width:0; color:var(--cream); }
.recipe-items__serving{ flex:0 0 76px; white-space:nowrap; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }
.recipe-items__cost{ flex:0 0 62px; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }
.recipe-items__cost--paper{ color:var(--dim-2); }

/* Råvarans prishistorik — utfälld under raden, se _liveboard_recept_pris.php. */
.pricewatch-slot{ margin:2px 0 8px; padding:8px 10px; border-radius:10px; background:var(--card); }
.pricewatch__chart{ display:block; width:100%; height:90px; }
.pricewatch__line{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; }
.pricewatch__line--old{ stroke:var(--dim-2); stroke-dasharray:3 3; }
.pricewatch__axis{ display:flex; justify-content:space-between; gap:8px; margin:3px 0 8px;
                   font-size:10.5px; color:var(--dim-2); font-variant-numeric:tabular-nums; }
.pricewatch__rows{ display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto; }
.pricewatch__sub{ margin-top:4px; font-size:11px; color:var(--dim-2); }
.pricewatch__row{ display:flex; gap:8px; font-size:12px; font-variant-numeric:tabular-nums; }
.pricewatch__date{ flex:1; color:var(--dim); }
.pricewatch__price{ flex:0 0 auto; color:var(--cream); }
.pricewatch__chg{ flex:0 0 52px; text-align:right; color:var(--dim-2); }
.pricewatch__chg.is-up{ color:#FF8B80; }
.pricewatch__chg.is-down{ color:var(--green); }

/* Markdown-rendrerad brödtext (manual_md_to_html(), se app/manual.php) i
   friare, längre textblock — RealInsights ▸ Hjälp inför budgetering i dag
   (se .bh-post nedan), fler kan återanvända klassen framöver. h1–h3 har
   redan sin storlek/vikt globalt (se toppen av filen); här bara avstånden
   runt dem och runt stycken/listor/citat, som annars saknas helt. */
.prose{ font-size:13.5px; line-height:1.55; color:var(--cream); }
.prose > *:first-child{ margin-top:0; }
.prose > *:last-child{ margin-bottom:0; }
.prose p{ margin:0 0 10px; }
/* Egna storlekar/vikt i stället för att ärva h1–h3-regeln ovan rakt av —
   annars blir en "##"-underrubrik i brödtexten (800/15.5px) STÖRRE och
   fetare än kortets egen titel (bara h3, 600/15px, se .bh-post__head). */
.prose h2{ margin:16px 0 6px; font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.prose h3{ margin:12px 0 5px; font-size:13.5px; font-weight:700; letter-spacing:-.01em; }
.prose ul, .prose ol{ margin:0 0 10px; padding-left:20px; }
.prose li{ margin-bottom:3px; }
.prose li > ul, .prose li > ol{ margin-top:3px; margin-bottom:0; }
.prose strong{ font-weight:700; color:var(--cream); }
.prose em{ font-style:italic; }
.prose blockquote{
  margin:0 0 10px; padding:2px 0 2px 12px;
  border-left:2px solid rgba(var(--tint-rgb),.25); color:var(--dim);
}
.prose code{
  font:500 12px/1.3 "Azeret Mono", ui-monospace, monospace;
  background:rgba(var(--tint-rgb),.08); padding:1px 5px; border-radius:5px;
}
.prose hr{ margin:14px 0; border:0; border-top:1px solid var(--line); }

/* RealInsights ▸ Hjälp inför budgetering — ett kort per inlägg, se
   budget_help_render_card() i app/budget_help.php. */
.bh-post__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.bh-post__head h3{ margin:0; }
.bh-post__meta{ margin:2px 0 10px; font-size:11.5px; }

/* ------------------------------------------------------------ meny */

.scrim{
  position:fixed; inset:0; z-index:50;
  background:rgba(6,5,5,.7);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .24s var(--ease);
}
.scrim.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; z-index:51; inset:0 0 0 auto;
  width:min(88vw, 380px);
  background:var(--ink-2);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:transform .34s var(--ease);
  display:flex; flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.drawer.is-open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; gap:10px; padding:0 var(--pad) 12px; }
.drawer nav{ padding:0 12px; }

.drawer__badge{
  display:block; flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  overflow:hidden; line-height:0; transition:transform .15s var(--ease);
}
.drawer__badge:active{ transform:scale(.93); }
.drawer__badge img{ width:100%; height:100%; display:block; object-fit:cover; }

.mi{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; width:100%; text-align:left; cursor:pointer;
  font:500 15px/1.4 var(--font-ui),sans-serif;
  display:flex; align-items:center; gap:12px;
  min-height:42px; padding:9px 12px; border-radius:var(--r);
  color:var(--cream); font-size:14px; font-weight:500;
  transition:background .2s var(--ease), transform .13s var(--ease);
}
.mi:active{ transform:scale(.98); background:var(--card-2); }
.mi.is-active{ background:rgba(var(--accent-rgb),.12); color:var(--gold); font-weight:700; }
.mi.is-active svg{ opacity:1; }
/* Gruppknappen dämpas normalt — den man står i lyfts fram lite */
.mgroup > .mi[aria-expanded="true"]{ color:var(--cream); }
.mgroup > .mi svg:last-child{ transition:transform .2s var(--ease); }
.mgroup > .mi[aria-expanded="true"] svg:last-child{ transform:rotate(180deg); }
.mi svg{ width:17px; height:17px; flex:0 0 auto; opacity:.85; }

/* Kortet längst ned i menyn — länken alla roller ser för att lösa in en
   presentcheck. En genererad miniatyr av den riktiga checken, betydligt
   större än en vanlig menyrad-ikon, så den syns som en egen genväg. */
.pcheck-card{
  display:flex; align-items:center; gap:14px;
  margin-top:8px; padding:12px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line);
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.pcheck-card:active{ transform:scale(.97); background:var(--card-2); }
.pcheck-card__thumb{
  flex:0 0 auto; display:flex; border-radius:10px; overflow:hidden;
  filter:drop-shadow(0 6px 16px rgba(var(--accent-rgb),.28));
}
.pcheck-card__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pcheck-card__text strong{ color:var(--cream); font:700 15px/1.3 var(--font-ui),sans-serif; }
.pcheck-card__text .dim{ font-size:12px; }

.mgroup{ margin-top:6px; }
.mgroup > .mi{ color:var(--dim); }
.mgroup__label{ padding:12px 12px 4px; }
.mgroup__items{ margin-left:14px; padding-left:12px; border-left:1px solid var(--line); }

/* Notisstatus längst ned i menyn — hopfälld med samma data-toggle-group
   som undermenyerna. Ren avläsning av enhetens push-läge. */
.ndiag{ margin-top:10px; border-top:1px solid var(--line); padding-top:4px; }
.ndiag > .mi{ color:var(--dim); }
.ndiag > .mi svg:last-child{ transition:transform .2s var(--ease); }
.ndiag > .mi[aria-expanded="true"] svg:last-child{ transform:rotate(180deg); }
.ndiag__body{ padding:2px 12px 10px; }
.ndiag__list{ margin:0; display:flex; flex-direction:column; gap:7px; }
.ndiag__list > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ndiag__list dt{ color:var(--dim); font-size:12px; }
.ndiag__list dd{ margin:0; font-size:12px; font-weight:600; color:var(--cream); text-align:right; }
.ndiag__list dd.is-good{ color:var(--green); }
.ndiag__list dd.is-bad{ color:var(--red); }
.ndiag__verdict{ margin:10px 0 0; font-size:12px; line-height:1.5; color:var(--dim); }
.ndiag__verdict:empty{ display:none; }
.ndiag__verdict.is-actionable{ color:var(--gold); }

/* ------------------------------------------------------------ sheet */

/* --vv-top/--vv-h är den SYNLIGA ytan (window.visualViewport), mätt av
   syncViewport() i app.js — inte layoutvyn, som position:fixed annars
   utgår ifrån. Skillnaden märks så fort man scrollat: webbläsarens
   adressfält glider bort när man drar nedåt och tillbaka in när något
   öppnas, och en panel som är nålad till layoutvyns topp hamnar då delvis
   ovanför skärmkanten. Samma sak när tangentbordet är uppe. Faller
   tillbaka på 100svh/0 om visualViewport saknas. */
.sheet{
  position:fixed; left:0; right:0;
  top:calc(var(--vv-top, 0px) + var(--top-h, 64px)); z-index:52;
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:10px var(--pad) calc(24px + env(safe-area-inset-bottom));
  transform:translateY(-10px); opacity:0; pointer-events:none;
  transition:transform .12s var(--ease), opacity .12s var(--ease);
  max-height:calc(var(--vv-h, 100svh) - var(--top-h, 64px) - 24px); overflow-y:auto;
}
/* Lägg till uppgift- och Ändra uppgift-arken är korta på höjd att jobba
   med (man börjar oftast skriva direkt i första fältet) och tangentbordet
   på iPhone äter nedre halvan av den synliga ytan. Nålat under headern
   (som vanligt ovan) hinner tangentbordet ändå täcka de nedersta fälten.
   sheet--flush hoppar över header-avståndet och lägger sig direkt i
   toppen av --vv-h i stället (headern hamnar bakom, den har lägre
   z-index) — mer luft kvar ovanför tangentbordet.

   env(safe-area-inset-top) läggs på för att INTE hamna under statusfältet
   (klockan) eller kameran/Dynamic Island — annars döljs sheetens egen
   rubrik där. Samma marginal dras bort från max-height så nederkanten
   inte flyttar sig, bara toppen. Den lilla paddingen/marginalerna runt
   knapparna i formuläret (se inline style="margin-top" i
   render_add_task_modal(), layout.php) är neddragna för att kompensera —
   annars hade den extra höjden uppe ätit upp lika mycket åt andra hållet.
   Bara mobilfallet; den centrerade desktopvarianten nedan har redan gott
   om plats. */
.sheet--flush{
  top:calc(var(--vv-top, 0px) + env(safe-area-inset-top, 0px) + 8px);
  max-height:calc(var(--vv-h, 100svh) - env(safe-area-inset-top, 0px) - 16px);
  padding-top:6px;
}
.sheet--flush .sheet__head{ margin-bottom:8px; }

/* Notisklockans modal (data-notis-open, se app.js): ska alltid kännas som
   en stor, fullstor ruta — inte krympa till bara innehållets höjd. Base-
   reglerna för .sheet ovan sätter bara max-height (ett tak), så en lugn
   period med få notiser gav en modal som bara täckte en bit av skärmen —
   såg ut som en bugg. height (i stället för/utöver max-height) tvingar
   samma mått till en fast boxhöjd oavsett antal rader; egen scroll
   (overflow-y:auto, ärvt från .sheet) tar hand om dagar med mycket
   innehåll precis som förut. Samma calc som .sheet's egen max-height. */
.sheet--notiser{
  height:calc(var(--vv-h, 100svh) - var(--top-h, 64px) - 24px);
  /* Skyddsnät oberoende av JS. --vv-h mäts av app.js ur visualViewport, och
     på iOS kan den mätningen bli inaktuell efter ett appbyte (se
     syncViewport() och dess rimlighetsspärr). Slår den ändå fel ska arket
     inte kunna kollapsa till en fjärdedel av skärmen och klippa listan —
     svh är en STABIL enhet som inte påverkas av tangentbordet, så det här
     golvet håller även när --vv-h ljuger. Bara notisarket: det innehåller
     ingen textinmatning, så det finns aldrig ett legitimt skäl för det att
     vara kort (till skillnad från formulärarken, som medvetet krymper när
     tangentbordet fälls upp). Taket i min() gör att golvet aldrig kan bli
     högre än den plats som faktiskt finns. */
  min-height:min(62svh, calc(100svh - var(--top-h, 64px) - 24px));
}

.sheet.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.sheet__grip{ display:none; }
.sheet h2{ margin-bottom:0; }
/* Rubrik + stäng-knapp (X) på samma rad. Att bara lita på klick utanför
   arket (scrim) är osynligt som stängningsväg, särskilt i den centrerade
   desktop-varianten där bakgrunden syns knappt. */
.sheet__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:11px; }
.sheet__close{ margin-top:-2px; }
/* Egen, tunn rullningslist i appens toner i stället för webbläsarens fula
   grå/vita standard — syns bara om innehållet faktiskt är för högt för
   sheeten (kort skärm, långt formulär). */
.sheet{ scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.35) transparent; }
.sheet::-webkit-scrollbar{ width:8px; }
.sheet::-webkit-scrollbar-track{ background:transparent; }
.sheet::-webkit-scrollbar-thumb{ background:rgba(var(--accent-rgb),.35); border-radius:999px; border:2px solid var(--ink-2); }
.sheet::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.55); }

/* Samma sak här som för .sheet: bilden centreras i den synliga ytan, inte i
   layoutvyn — annars kunde bildens överkant hamna bakom/ovanför
   adressfältet när man öppnade den efter att ha scrollat. */
.lightbox{
  position:fixed; left:0; right:0;
  top:var(--vv-top, 0px); height:var(--vv-h, 100svh); z-index:60;
  background:rgba(6,5,5,.86);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .24s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:100%; max-height:calc(var(--vv-h, 100svh) * .82);
  border-radius:var(--r); border:1px solid var(--line);
}

/* ------------------------------------------------------------ kalender */

.cal__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.cal{ width:100%; border-collapse:collapse; table-layout:fixed; }
.cal th{
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dim); font-weight:600; padding:4px 0; text-align:center;
}
.cal td{ text-align:center; padding:1px; }
.cal td a{
  display:grid; place-items:center;
  width:100%; aspect-ratio:1; max-height:40px;
  border-radius:9px; color:var(--cream);
  font-variant-numeric:tabular-nums; font-size:13px;
}
.cal__w{ font-family:"Azeret Mono",monospace; font-size:10px; color:var(--dim-2); width:22px; }
.cal__out a{ color:var(--dim-2); opacity:.4; }
.cal__today a{ box-shadow:inset 0 0 0 1px var(--gold); }
.cal__sel a{ background:rgba(var(--accent-rgb),.2); color:var(--gold); font-weight:700; }
.cal__work a{ background:rgba(49,196,107,.18); color:var(--green); font-weight:700; }
.cal__work.cal__sel a{ background:rgba(49,196,107,.32); }
.cal td a:active{ transform:scale(.92); }

/* ------------------------------------------------------------ toast */

.toasts{
  position:fixed; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:70; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; padding:0 var(--pad);
}
.toast{
  max-width:min(92vw, 420px);
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:16px; padding:13px 18px;
  font-size:14px; font-weight:600; line-height:1.4; text-align:left;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  animation:toast-in .34s var(--bounce);
  pointer-events:auto;
}
.toast--ok{ border-color:rgba(49,196,107,.4); color:var(--green); }
.toast--err{ border-color:rgba(218,41,28,.45); color:#FF7A6E; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(14px) scale(.96);} to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------ övrigt */

.empty{
  border:1px dashed var(--line); border-radius:var(--r);
  padding:14px; text-align:center; color:var(--dim); font-size:13px;
}

/* Egen «Hamnar i»-panel på desktop — native <select>-popupen kan inte
   stylas fullt ut (optgroup-etiketter ignorerar ofta appens mörka tema på
   Windows/Chrome och blir oformliga vita fält). Mobil/iOS behåller den vanliga
   <select>en — den redan ser bra ut där — se enhanceTargetSelect() i app.js. */
.gat-target{ position:relative; }
.gat-target select.is-enhanced{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.gat-target__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  min-height:44px; padding:10px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); color:var(--cream); font-size:14px; font-weight:500; text-align:left;
  cursor:pointer; transition:border-color .15s var(--ease);
}
.gat-target__trigger:hover{ border-color:rgba(var(--accent-rgb),.4); }
.gat-target__trigger svg{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; transition:transform .15s var(--ease); }
.gat-target__trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.gat-target__menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; max-height:280px;
  overflow-y:auto; padding:6px; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 12px 32px rgba(0,0,0,.4);
  scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.35) transparent;
}
.gat-target__menu::-webkit-scrollbar{ width:8px; }
.gat-target__menu::-webkit-scrollbar-track{ background:transparent; }
.gat-target__menu::-webkit-scrollbar-thumb{
  background:rgba(var(--accent-rgb),.35); border-radius:999px; border:2px solid var(--ink-2);
}
.gat-target__menu::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.55); }
.gat-target__group{
  padding:9px 10px 4px; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); font-weight:600;
}
.gat-target__opt{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px;
  background:none; border:0; color:var(--cream); font-size:12.5px; line-height:1.3; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gat-target__opt:hover, .gat-target__opt:focus-visible{ background:var(--card-2); }
.gat-target__opt.is-selected{ background:rgba(var(--accent-rgb),.16); color:var(--gold); font-weight:600; }

.list-pick{ display:flex; flex-direction:column; gap:5px; }
.list-pick a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px; padding:10px 13px; font-size:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  color:var(--cream); font-weight:500;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.list-pick a:active{ transform:scale(.99); background:var(--card-2); }
.list-pick a svg{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; }

/* Två restauranger per rad i restaurangväljaren (_restaurant_picker.php)
   — sparar plats för den som har access till många enheter. Egen modifier
   i stället för att återanvända .grid-2: den ligger tidigare i arket och
   dess display:grid/gap hade ändå tappat mot .list-pick:s egna flex-regler
   ovan. min-width:0 + ellipsis på namnet, annars kan en lång restaurang
   (t.ex. "Jönköping, A6 McDrive") tvinga fram sidledsscroll i halva
   bredden. */
.list-pick--grid2{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.list-pick--grid2 a{ min-width:0; }
.list-pick--grid2 a span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ text-align:left; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding:6px 8px; font-weight:600; }
.table td{ padding:7px 8px; border-top:1px solid rgba(var(--tint-rgb),.07); vertical-align:middle; }

.switch{ display:inline-flex; align-items:center; gap:9px; min-height:38px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{
  width:40px; height:24px; border-radius:999px; flex:0 0 auto;
  background:rgba(var(--tint-rgb),.09); border:1px solid rgba(var(--tint-rgb),.12);
  position:relative; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.switch__track::after{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:999px; background:var(--dim);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.switch input:checked + .switch__track{ background:rgba(var(--accent-rgb),.25); border-color:rgba(var(--accent-rgb),.5); }
.switch input:checked + .switch__track::after{ transform:translateX(16px); background:var(--gold); }
.switch input:focus-visible + .switch__track{ outline:2px solid var(--gold); outline-offset:2px; }

/* Switchlista i kort, t.ex. automatiska notishändelser i adminpanelen —
   varje rad avdelad utom den sista. */
.switchlist__row{ border-bottom:1px solid var(--line); }
.switchlist__row:last-child{ border-bottom:0; }

.auth{ display:grid; place-items:center; min-height:100svh; padding:var(--pad); }
.auth .card{ width:100%; max-width:400px; }
.brand{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.brand__mark{
  width:42px; height:42px; border-radius:12px;
  display:block; object-fit:cover;
  box-shadow:0 10px 30px -10px rgba(var(--accent2-rgb),.65);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   DATOR
   Appen är byggd mobil först. Från 1024px får den en fast
   sidomeny, bredare innehållsyta och två kolumner — i stället för
   att bara vara en uppförstorad telefonvy.
   ============================================================ */

@media (min-width: 1024px){
  :root{
    --pad:   24px;
    --r:     16px;
    --r-lg:  20px;
    --nav-w: 260px;
  }

  body{ font-size:15px; }

  /* Sidomenyn ligger kvar, ingen hamburgare */
  .drawer{
    position:fixed; inset:0 auto 0 0;
    width:var(--nav-w);
    transform:none;
    border-left:0; border-right:1px solid var(--line);
    background:var(--ink-2);
    padding-top:20px;
  }
  .drawer__head button[data-menu-close]{ display:none; }
  .scrim{ display:none; }
  [data-menu-open]{ display:none; }

  /* Innehållet flyttas in bredvid menyn. Samma color-mix()-resonemang som
     mobilvarianten av .top ovan — annars var det bara på desktop-bredd
     som ljusa teman fick en mörk remsa i huvudet. */
  .top{
    padding-left:var(--nav-w);
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 94%, transparent),
      color-mix(in srgb, var(--ink) 75%, transparent) 70%,
      transparent);
  }
  .top__inner{ max-width:1080px; padding:0 32px; }
  .livebar__inner{ max-width:1080px; padding:6px 32px 0; }
  .top .avatar{ display:none; }          /* identiteten står redan i sidomenyn */

  .wrap{
    max-width:1080px;
    margin-left:calc(var(--nav-w) + max(0px, (100vw - var(--nav-w) - 1080px) / 2));
    margin-right:auto;
    padding:0 32px;
  }
  .auth{ padding-left:0; }               /* inloggning har ingen meny */

  h1{ font-size:30px; }
  h2{ font-size:21px; }

  /* Två kolumner: formuläret stannar kvar till vänster medan
     listorna rullar bredvid. */
  .desk{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:28px;
    align-items:start;
  }
  .desk__aside{ position:sticky; top:84px; }

  .row{ padding:12px 14px 12px 16px; }
  /* Samma uppdelning som på mobil: radens lodräta luft ligger i titeln, så
     en enradig titel möter knapparnas mitt. Se .row--wrap ovan. */
  .row--wrap{ padding-top:7px; padding-bottom:7px; }
  .row--wrap > .row__main{ padding-top:6px; padding-bottom:2px; }
  .row__title{ font-size:15px; }
  .rows{ gap:8px; }
  .section{ margin:20px 0 10px; }

  /* Muspekare får hover, till skillnad från fingret */
  .row:hover{ background:var(--card-2); }
  .list-pick a:hover{ background:var(--card-2); }
  .mi:hover{ background:rgba(var(--tint-rgb),.05); }
  .btn:hover{ filter:brightness(1.06); }
  .tick:hover{ filter:brightness(1.15); }

  /* Underlägg blir dialog mitt på skärmen i stället för att glida upp.
     Bredare och med mer höjd att röra sig på än på mobil — annars får
     kortare formulär (t.ex. lägg till uppgift) en egen rullningslist i
     onödan bara för att den ärver mobilens snävare max-height. */
  .sheet{
    left:50%; right:auto; bottom:auto;
    /* Mitten av den SYNLIGA ytan (se --vv-h/--vv-top vid .sheet ovan), inte
       mitten av layoutvyn — annars kan dialogens överkant hamna utanför
       skärmen upptill när sidan är scrollad eller tangentbordet är uppe. */
    top:calc(var(--vv-top, 0px) + var(--vv-h, 100svh) / 2);
    width:min(560px, 92vw);
    max-height:min(760px, calc(var(--vv-h, 100svh) - 64px));
    transform:translate(-50%, -46%) scale(.98);
    border-radius:var(--r-lg);
    border:1px solid var(--line);
    opacity:0;
    transition:transform .15s var(--ease), opacity .15s var(--ease);
  }
  .sheet.is-open{ transform:translate(-50%, -50%) scale(1); opacity:1; }
  .sheet__grip{ display:none; }

  /* Presentcheckens ark (bild + status + uppgifter + två formulär) är
     längre än de flesta — 760px-taket gav en egen rullningslist i onödan
     på en vanlig bildskärm. Dubbelt så högt tak i stället för att höja
     det för ALLA ark: sheet.classList.add('sheet--tall') efter
     opsSheet.open(), se data-pcheck-open i presentcheck_list.php. Ingen
     motsvarande regel behövs på mobil — där ligger .sheet redan uppe vid
     den fulla synliga höjden (se max-height ovanför denna @media). */
  .sheet--tall{ max-height:min(1520px, calc(var(--vv-h, 100svh) - 64px)); }

  /* Notisklockans modal (data-notis-open, se app.js) — upp till 14 dagars
     notiser i en enda lista, ofta fler rader än ett vanligt formulär.
     Bredare OCH högre än standardstorleken, av samma skäl som
     .sheet--tall ovan (ingen egen rullningslist i onödan på en bildskärm).
     height (inte bara max-height) så boxen inte krymper till innehållets
     höjd på en lugn dag med få notiser — se mobilvarianten av
     .sheet--notiser ovanför denna @media, samma resonemang. max-height
     måste sättas om här också — annars vinner .sheet's egna 760px-tak
     (samma specificitet, men max-height klipper alltid en större height
     oavsett cascade-ordning) och height-värdet ovan klipps av i onödan. */
  .sheet--notiser{
    width:min(640px, 92vw);
    height:min(1400px, calc(var(--vv-h, 100svh) - 64px));
    max-height:min(1400px, calc(var(--vv-h, 100svh) - 64px));
    /* Mobilregelns skyddsgolv måste bort här. Arket är centrerat på dator
       och har redan gott om plats — och min-height VINNER över max-height i
       CSS, så ett kvarglömt golv hade kunnat trycka ut ett centrerat ark
       utanför ett kort fönster. */
    min-height:0;
  }

  .toasts{ bottom:28px; }
}

/* Väldigt breda skärmar: låt inte raderna bli oläsligt långa */
@media (min-width: 1500px){
  .wrap{ max-width:1180px; }
  .top__inner{ max-width:1180px; }
  .livebar__inner{ max-width:1180px; }
}

/* ------------------------------------------------------------ roster

   Managementteamets personkort. Mätaren till höger är batteriet i ny
   tappning: en stege där varje uppnådd nivå tänds underifrån och upp.
   Allt färgat kommer ur accentvariablerna, så kortet följer med i alla
   teman utan egna färgvärden.
*/

.roster{ display:grid; gap:12px; }
@media (min-width:1024px){ .roster{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.rcard{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:
    "name name name"
    "portrait body ladder";
  gap:14px; align-items:stretch;
  padding:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  /* Korten glider in med en liten förskjutning så listan känns levande */
  opacity:0; transform:translateY(10px);
  animation:rcard-in .5s var(--ease) forwards;
  animation-delay:calc(var(--card-i, 0) * 60ms);
}
@keyframes rcard-in{ to{ opacity:1; transform:none; } }

/* Porträttet är kortets tyngdpunkt — man ska känna igen personen på en
   armlängds avstånd. Höjden följer stegens höjd (grid stretch) så det
   fyller allt tillgängligt utrymme i raden, bredden växer i takt. */
.rcard__portrait{
  grid-area:portrait;
  width:clamp(140px, 40vw, 220px);
  height:100%;
  border-radius:var(--r);
  overflow:hidden; position:relative;
  background:var(--card-2);
  border:1px solid rgba(var(--tint-rgb),.08);
  display:grid; place-items:center;
}
.rcard__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.rcard__fallback{
  font:700 30px/1 var(--font-ui),sans-serif;
  color:rgba(var(--text-rgb),.35); letter-spacing:.02em;
}

.rcard__body{ grid-area:body; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.rcard__name{
  grid-area:name;
  margin:0; font:800 clamp(24px, 6vw, 32px)/1.15 var(--font-ui),sans-serif;
  letter-spacing:-.02em; color:var(--cream);
  overflow-wrap:anywhere;
}
.rcard__role{ margin:0; font-size:14px; font-weight:600; color:var(--dim); }
.rcard__note{
  margin:6px 0 0; font-size:12.5px; font-style:italic;
  color:var(--dim); overflow-wrap:anywhere;
}

/* Stegen ------------------------------------------------------------- */

.ladder{
  grid-area:ladder;
  position:relative;
  display:flex; flex-direction:column-reverse;   /* lägsta nivån i DOM = längst ned */
  gap:3px; width:58px; flex:0 0 auto;
  padding:5px; border-radius:12px;
  background:rgba(var(--tint-rgb),.04);
  border:1px solid rgba(var(--tint-rgb),.07);
}
/* Batteriets pol — enda kvarvarande nicken åt originalet */
.ladder__cap{
  position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:22px; height:4px; border-radius:999px;
  background:rgba(var(--tint-rgb),.16);
}

.ladder__step{
  height:19px; border-radius:6px;
  display:grid; place-items:center;
  font:700 9px/1 var(--font-ui),sans-serif;
  letter-spacing:.02em; text-transform:uppercase;
  background:rgba(var(--tint-rgb),.05);
  color:rgba(var(--text-rgb),.28);
  border:1px solid rgba(var(--tint-rgb),.05);
  /* Utgångsläge: hopsjunket och släckt. .is-lit på .ladder tänder. */
  transform:scaleY(.34); opacity:.35; transform-origin:bottom;
  transition:transform .42s var(--bounce), opacity .42s var(--ease),
             background .42s var(--ease), color .3s var(--ease),
             box-shadow .42s var(--ease);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.ladder.is-lit .ladder__step{ transform:scaleY(1); opacity:1; }

.ladder.is-lit .ladder__step.is-on{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:var(--on-accent);
  border-color:transparent;
  box-shadow:0 2px 12px -4px rgba(var(--accent2-rgb),.75);
}

/* Den översta uppnådda nivån andas, så blicken hittar nivån direkt */
.ladder.is-lit .ladder__step.is-top{
  animation:ladder-breathe 2.6s var(--ease) infinite;
  animation-delay:calc(var(--i, 0) * 55ms + .5s);
}
@keyframes ladder-breathe{
  0%,100%{ box-shadow:0 2px 12px -4px rgba(var(--accent2-rgb),.75); }
  50%    { box-shadow:0 3px 20px -2px rgba(var(--accent2-rgb),.95); }
}

/* Ingen nivå satt: stegen står kvar men helt dämpad, aldrig tom yta */
.ladder.is-lit .ladder__step:not(.is-on){ opacity:.5; }

@media (prefers-reduced-motion: reduce){
  .rcard{ animation:none; opacity:1; transform:none; }
  .ladder__step{ transition:none; transform:scaleY(1); opacity:1; }
  .ladder.is-lit .ladder__step.is-top{ animation:none; }
}

/* ---------------------------------------------------------- Fasta listan

   Administratörens vy över allt som rullas ut automatiskt. Byggd för
   dator: formuläret står stilla i vänsterspalten medan listorna rullar
   bredvid. Egna radblock (.trow) i stället för .row, eftersom varje punkt
   behöver en tredje våning för restaurangmarkerna. */

.fform__head{
  display:flex; align-items:center; gap:8px;
  margin:-2px 0 10px; padding-bottom:9px;
  border-bottom:1px solid var(--line);
  color:var(--gold); font:600 13px/1 var(--font-ui),sans-serif;
  letter-spacing:.02em; text-transform:uppercase;
}
.fform__head svg{ flex:0 0 auto; }

/* --- filterrutan högst upp i högerspalten --- */

.ffilter{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:0 13px; margin-bottom:4px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card);
  transition:border-color .18s var(--ease);
}
.ffilter:focus-within{ border-color:var(--gold); }
.ffilter > svg{ flex:0 0 auto; color:var(--dim); }
.ffilter input{
  flex:1; min-width:0;
  min-height:42px; padding:0; margin:0;
  background:none; border:0; border-radius:0;
  color:var(--cream); font:400 14px/1 var(--font-ui),sans-serif;
}
.ffilter input:focus{ outline:none; box-shadow:none; }
.ffilter input::-webkit-search-cancel-button{ display:none; }
.ffilter__x{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; border:0; border-radius:999px;
  background:rgba(var(--tint-rgb),.08); color:var(--dim); cursor:pointer;
}
.ffilter__x:active{ transform:scale(.9); }
.ffilter__hint{ margin:7px 2px 0; font-size:12.5px; color:var(--dim); }

/* --- en punkt i listan --- */

.trows{ display:flex; flex-direction:column; gap:7px; padding:0 10px 10px; }

.trow{
  padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink);
}
.trow.is-paused{ opacity:.55; }
.trow.is-editing{
  border-color:var(--gold);
  background:rgba(var(--accent-rgb),.07);
}
.trow__head{ display:flex; align-items:flex-start; gap:10px; }
.trow__title{ flex:1; min-width:0; font-size:14px; line-height:1.35; word-break:break-word; }
.trow__actions{ display:flex; gap:6px; flex:0 0 auto; }
.trow__meta{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:6px; }

/* --- restaurangmarkerna på varje punkt --- */

.rchips{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:8px; }
.rchips form{ display:inline-flex; margin:0; }

.rchip{
  display:inline-flex; align-items:center; gap:5px;
  min-height:26px; padding:3px 9px; border-radius:999px;
  background:rgba(var(--tint-rgb),.06); border:1px solid rgba(var(--tint-rgb),.12);
  color:var(--cream); font:600 12px/1 var(--font-ui),sans-serif;
  white-space:nowrap;
}
.rchip svg{ flex:0 0 auto; }

.rchip--all{
  background:rgba(var(--accent-rgb),.14); border-color:var(--line); color:var(--gold);
  letter-spacing:.06em;
}
.rchip--ghost,
.rchip--add{
  appearance:none; cursor:pointer;
  background:none; border:1px dashed rgba(var(--tint-rgb),.22);
  color:var(--dim);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.rchip--ghost:active,
.rchip--add:active{ transform:scale(.96); }

.rchip__x{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-right:-3px; padding:0;
  border:0; border-radius:999px; cursor:pointer;
  background:rgba(var(--tint-rgb),.12); color:var(--dim);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.rchip__x:active{ transform:scale(.85); }

/* Menyn bakom "+ Restaurang". <details> gör den öppningsbar utan JS. */
.raddm{ position:relative; display:inline-flex; }
.raddm > summary{ list-style:none; cursor:pointer; }
.raddm > summary::-webkit-details-marker{ display:none; }
.raddm[open] > summary{ color:var(--gold); border-color:var(--gold); border-style:solid; }
.raddm__menu{
  position:absolute; z-index:30; top:calc(100% + 5px); left:0;
  min-width:170px; max-height:260px; overflow:auto;
  padding:5px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card-2);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.raddm__menu form{ display:block; }
.raddm__menu button{
  display:block; width:100%; padding:8px 10px;
  border:0; border-radius:9px; cursor:pointer; text-align:left;
  background:none; color:var(--cream);
  font:500 13px/1.2 var(--font-ui),sans-serif;
}
.raddm__menu button:active{ background:rgba(var(--tint-rgb),.12); }

/* --- restaurangurvalet i formuläret --- */

.scope{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:7px; }
.scope__opt{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(var(--tint-rgb),.12); background:rgba(var(--tint-rgb),.05);
  font:600 12.5px/1 var(--font-ui),sans-serif; color:var(--dim);
}
.scope__opt input{ width:15px; height:15px; margin:0; accent-color:var(--gold); }
.scope__opt:has(input:checked){
  border-color:var(--gold); background:rgba(var(--accent-rgb),.1); color:var(--gold);
}
.scope__list{
  padding:9px; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(var(--tint-rgb),.03);
  max-height:230px; overflow:auto;
}
.scope__rest{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:6px 4px; font-size:13.5px; line-height:1.2;
}
.scope__rest input{ width:16px; height:16px; margin:0; flex:0 0 auto; accent-color:var(--gold); }
.scope__bulk{ display:flex; gap:7px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.scope__bulk .btn{ flex:1; }

/* --- personliga punkter: två nivåer av grupper inne i delen --- */

.pgroup{ margin:7px 0; border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden; }
.pgroup--sub{ margin:6px 8px; background:var(--ink); }
.pgroup__head{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:11px 13px;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--cream); font:600 14px/1.2 var(--font-ui),sans-serif;
}
.pgroup__head > svg:first-child{ color:var(--dim); flex:0 0 auto; }
.pgroup__label{ flex:1; min-width:0; }
.pgroup__head svg:last-child{ color:var(--dim); transition:transform .2s var(--ease); }
.pgroup__head[aria-expanded="true"]{ color:var(--gold); }
.pgroup__head[aria-expanded="true"] svg{ color:var(--gold); }
.pgroup__head[aria-expanded="true"] svg:last-child{ transform:scaleY(-1); }
.pgroup > .collapse.is-open{ padding:0 0 6px; }
.pgroup .acc{ margin:6px 8px; background:var(--ink); }
.pgroup--sub .acc{ background:var(--card); }

/* --- delrubrikerna --- */

.acc--group{ margin-top:14px; }
.acc__label--lg{ font-size:16.5px; font-weight:600; }
.acc__note{ margin:0 15px 4px; font-size:12.5px; line-height:1.45; color:var(--dim); }
.acc--group > .collapse.is-open{ padding:2px 5px 8px; }

@media (hover:hover){
  .pgroup__head:hover{ background:var(--card-2); }
  .rchip--ghost:hover, .rchip--add:hover{ color:var(--gold); border-color:var(--gold); }
  .rchip__x:hover{ background:rgba(218,41,28,.3); color:#FF7A6E; }
  .raddm__menu button:hover{ background:rgba(var(--tint-rgb),.12); }
  .ffilter__x:hover{ color:var(--cream); }
}

/* På dator får vänsterspalten en egen rullning, så ett långt formulär
   inte tvingar hela sidan att bli lika lång som listan bredvid. */
@media (min-width:1024px){
  .desk__aside{ max-height:calc(100svh - 108px); overflow:auto; padding-right:4px; }
  .trow{ padding:12px 14px; }
  .trow__title{ font-size:14.5px; }
  .acc--group{ margin-top:18px; }
}

/* ------------------------------------------------------------ personaluppställning: datumfältet på iPhone

   Appens befintliga fix för iOS:s överdimensionerade date-fält ligger
   bara på .grid-2 input[type=date] (två fält bredvid varandra). Mitt
   datumfält står ensamt på egen rad, inte i en .grid-2, så det ärvde
   bara den generella width:100%-regeln — inte max-width, inte appearance:
   none, inte den krympbara ::-webkit-datetime-edit. Utan de bitarna
   räknar iOS ut en egen inre bredd på klockslagsdelen som ignorerar
   width:100% och trycker hela fältet ut över kortkanten. Speglar därför
   hela .grid-2-varianten rakt av i stället för att bara ta en del av den.
*/
#up-datum{
  font-size:13px; padding-left:9px; padding-right:4px;
  width:100%; min-width:0; max-width:100%;
  -webkit-appearance:none; appearance:none;
}
#up-datum::-webkit-datetime-edit{ min-width:0; overflow:hidden; }

/* ------------------------------------------------------------ personaluppställning: tavla (helskärm, liggande)

   Öppnas från uppstallning.php via #upBoardOpen. Döljd som standard;
   .is-open sätts av sidans egen <script>. I stående läge visas bara
   vänd-uppmaningen — själva tavlan (.up-board__grid) kräver liggande
   för att få plats med tre kolumner, precis som det gamla plan_edit.php.
*/

.up-board{
  display:none; position:fixed; inset:0; z-index:9999;
  background:var(--ink); color:var(--cream);
}
.up-board.is-open{ display:block; }

.up-board__exit{
  position:absolute; top:10px; right:10px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--line); color:var(--cream);
  cursor:pointer;
}
.up-board__exit:active{ transform:scale(.93); background:var(--card-2); }

.up-board__rotate{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px;
}
.up-board__rotate svg{ color:var(--gold); animation:up-rotate-hint 1.8s ease-in-out infinite; }
@keyframes up-rotate-hint{
  0%, 15%  { transform:rotate(0deg); }
  50%, 65% { transform:rotate(-90deg); }
  100%     { transform:rotate(0deg); }
}
.up-board__rotate p{ font-size:15px; color:var(--dim); max-width:240px; margin:0; }

.up-board__grid{ display:none; height:100%; box-sizing:border-box; padding:10px 14px; flex-direction:column; }

@media (orientation:landscape){
  .up-board__rotate{ display:none; }
  .up-board__grid{ display:flex; }
}

.up-board__head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:2px 40px 8px 4px; border-bottom:1px solid var(--line); margin-bottom:8px; flex-shrink:0;
}
.up-board__head h1{ font-size:17px; font-weight:800; color:var(--gold); margin:0; }

.up-board__cols{ flex:1; display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:10px; min-height:0; }

.up-board__col{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:8px; overflow-y:auto; min-height:0;
}
.up-board__col h2{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--gold); text-align:center; margin:0 0 4px; padding-bottom:4px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--card);
}
.up-board__block + .up-board__block h2{ margin-top:10px; }
.up-board__col h3{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:var(--gold); opacity:.7; text-align:center; margin:8px 0 3px;
}

.up-board__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px;
  padding:2px 3px; font-size:12px; border-bottom:1px solid rgba(var(--tint-rgb),.05);
}
.up-board__row .lbl{ color:var(--dim); flex-shrink:0; font-size:10.5px; }
.up-board__row .val{ font-weight:600; text-align:right; }
.up-board__row .val.is-empty{ color:var(--dim-2); font-weight:400; font-style:italic; }
.up-board__row .t{ font-family:"Azeret Mono",monospace; font-size:10px; color:var(--dim); margin-left:5px; }

/* Tomma stationer (och underrubriker/block utan någon tilldelad) döljs —
   utom i redigeringsläget, där de behövs för att kunna fyllas i.
   .is-blank sätts av refreshBlank() i uppstallning.php. */
.up-board:not(.is-editing) .up-board__row.is-empty,
.up-board:not(.is-editing) .is-blank{ display:none; }

.up-board__edit{ margin-left:auto; }
.up-board__flash{ font-size:12px; font-weight:600; color:var(--green, #3fb950); }
.up-board__flash.is-err{ color:#FF7A6E; }
.up-board.is-editing .up-board__row{ cursor:pointer; border-radius:6px; }
.up-board.is-editing .up-board__row:hover,
.up-board.is-editing .up-board__row:active{ background:rgba(var(--tint-rgb),.07); }
.up-board.is-editing .up-board__row.is-empty .val{ color:var(--gold); opacity:.6; font-style:normal; }

/* Redigeringspanel för en station (inuti tavlan, se #upEdit). Två kolumner
   i liggande läge: dagens schemalagda till vänster, fritext/tider till höger. */
.up-edit{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); padding:10px;
}
.up-edit[hidden]{ display:none; }
.up-edit__card{
  width:min(640px, 100%); max-height:100%; display:flex; flex-direction:column;
  background:var(--ink); background-image:linear-gradient(var(--card), var(--card));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.up-edit__head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--line); }
.up-edit__head h2{ font-size:15px; font-weight:800; color:var(--gold); margin:0; }
.up-edit__x{ background:none; border:0; color:var(--cream); width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.up-edit__body{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; padding:10px 12px; min-height:0; overflow:hidden; }
.up-edit__workers{ overflow-y:auto; min-height:0; max-height:calc(100dvh - 90px); }
.up-edit__lbl{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--dim); margin:0 0 4px; }
.up-edit__none{ font-size:12.5px; color:var(--dim); margin:4px 0; }
.up-edit__w{
  display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid rgba(var(--tint-rgb),.06);
  color:var(--cream); padding:6px 6px; cursor:pointer; border-radius:6px; font:inherit;
}
.up-edit__w:hover, .up-edit__w:active{ background:rgba(var(--tint-rgb),.07); }
.up-edit__w .n{ font-size:13px; font-weight:600; }
.up-edit__w .m{ font-size:11px; color:var(--dim); font-family:"Azeret Mono",monospace; }
.up-edit__w .m em{ font-style:normal; font-family:inherit; color:var(--gold); margin-left:6px; }
.up-edit__w.is-placed .n{ color:var(--dim); }
.up-edit__w.is-on{ background:rgba(255,199,44,.12); }
.up-edit__form{ display:flex; flex-direction:column; gap:6px; }
.up-edit__form input{
  width:100%; box-sizing:border-box; min-height:36px; padding:6px 10px; font:inherit; font-size:14px;
  background:var(--card-2); color:var(--cream); border:1px solid var(--line); border-radius:8px;
  color-scheme:dark;
}
:root[data-theme="light"] .up-edit__form input{ color-scheme:light; }
.up-edit__times{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.up-edit__actions{ display:flex; justify-content:space-between; gap:8px; margin-top:6px; }
@media (max-width:520px){
  .up-edit__body{ grid-template-columns:1fr; overflow-y:auto; }
  .up-edit__workers{ max-height:none; }
}

/* ------------------------------------------------------------ managementschema

   Öppnas från topbaren via data-mgmt-open (app/views/layout.php + app.js),
   som ett vanligt .sheet-ark — se app/views/managementschema.php. Ingen
   egen overlay-CSS behövs: veckonavet återanvänder .cal__head rakt av.

   En hel vecka med flera restauranger blev för mycket innehåll för den
   vanliga sheet-storleken (radlistan .row/.rows tog en hel rad höjd per
   person) — .sheet--mgmt gör arket större på breda skärmar (mobilen har
   redan i princip hela höjden under topbaren, se .sheet ovan), och
   dagarnas personer visas i ett tätt rutnät (.mgmt-day__grid) i stället
   för vanliga .row-rader: ~3 per rad på en telefon, fler ju bredare
   arket är (auto-fill, ingen egen brytpunkt behövs) — så fler dagar
   syns samtidigt utan att scrolla.
*/

@media (min-width:700px){
  .sheet.sheet--mgmt{
    width:min(1040px, 94vw);
    max-height:min(900px, calc(var(--vv-h, 100svh) - 40px));
  }
}

/* Horisontell avdelare mellan dagarna — men inte ovanför den allra
   första, den ligger redan direkt under veckonavet (.cal__head). */
.mgmt-day + .mgmt-day{
  border-top:1px solid var(--line);
  margin-top:12px; padding-top:12px;
}

.mgmt-day__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:6px;
}
.mgmt-day__chip{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:4px 6px; min-width:0; line-height:1.3;
}
.mgmt-day__name, .mgmt-day__rest{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mgmt-day__name{ font-weight:700; font-size:11px; }
.mgmt-day__rest{ font-weight:400; font-size:9.5px; color:var(--dim); }
.mgmt-day__time{
  display:block; font-family:"Azeret Mono",monospace; font-size:10px; color:var(--dim);
}

/* ---------------------------------------------- dra för att sortera ----
   Dubbeltryck på en punkt öppnar sorteringsläge → draghandtag på varje rad.
   Se initReorder() i app.js. */
.rows[data-reorder] .row,
[data-reorder] .trow[data-tpl]{
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;            /* inget dubbeltryck-zoom på iOS */
}

.reorder-hint{
  font-size:12px; color:var(--dim);
  padding:2px 2px 9px;
}
.reorder-hint::before{ content:"⠿  "; color:var(--gold); font-size:13px; }

/* Draghandtaget — dyker upp när sorteringsläget är på. */
.reorder-grip{
  flex:0 0 auto; width:38px; height:38px;
  display:grid; place-items:center;
  border:0; background:transparent; padding:0;
  color:var(--gold); cursor:grab;
  touch-action:none;                    /* nyckeln: webbläsaren tar aldrig gesten */
  -webkit-tap-highlight-color:transparent;
  animation:grip-in .15s var(--ease);
}
.reorder-grip:active{ cursor:grabbing; }
.reorder-grip svg{ fill:currentColor; }
@keyframes grip-in{ from{ opacity:0; transform:translateX(10px); } }

/* Rader i öppet sorteringsläge: lugn markering + dämpade övriga knappar. */
[data-reorder].is-reorder-mode .row,
[data-reorder].is-reorder-mode .trow{
  background:var(--card-2);
  border-color:rgba(var(--accent-rgb),.28);
}
[data-reorder].is-reorder-mode .tick{ opacity:.35; pointer-events:none; }

body.is-reordering{
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}

[data-reorder] .row.is-dragging,
[data-reorder] .trow.is-dragging{
  cursor:grabbing;
  background:var(--card-2);
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:0 16px 38px rgba(0,0,0,.4);
  transform:scale(1.03);
  opacity:.98;
  position:relative; z-index:6;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  [data-reorder] .row.is-dragging,
  [data-reorder] .trow.is-dragging{ transform:none; transition:none; }
  .reorder-grip{ animation:none; }
}

/* Prioriterad rad: tunn guldkant till vänster. Prioriterade ligger alltid
   före oprioriterade, så nya punkter hamnar efter den lägst prioriterade. */
.rows[data-reorder] .row[data-prio]{
  box-shadow:inset 2px 0 0 rgba(var(--accent-rgb),.75);
}

/* ------------------------------------------- delegerade uppgifter ------
   Rader i "Delegerat uppåt" / "Delegerat till mig" och svarspanelen. */
.row--deleg .row__actions{ align-items:center; }
.row--deleg .btn--sm{ min-height:34px; }

.deleg-task{
  font-weight:600; font-size:15px; line-height:1.35;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid var(--line);
}

.deleg-thread{
  display:flex; flex-direction:column; gap:8px;
  max-height:38vh; overflow-y:auto;
  margin-bottom:4px;
}
.deleg-msg{
  padding:8px 11px; border-radius:12px;
  background:rgba(var(--tint-rgb),.06);
  border:1px solid var(--line);
}
.deleg-msg--mine{
  background:rgba(var(--accent-rgb),.10);
  border-color:rgba(var(--accent-rgb),.28);
}
.deleg-msg__who{ font-size:11px; color:var(--dim); margin-bottom:3px; }
.deleg-msg__at{ color:var(--dim-2); }
.deleg-msg__body{ font-size:14px; line-height:1.4; word-break:break-word; }

.deleg-doner{
  display:flex; gap:9px; align-items:center;
  margin:10px 0 0; font-size:14px; cursor:pointer;
}
.deleg-doner input{ width:18px; height:18px; accent-color:var(--gold); }

/* Generisk kryssruta+etikett-rad i ett formulär (se t.ex. Fokus-kryssrutan
   i render_add_task_modal(), layout.php) — samma grundmönster som
   .deleg-doner ovan men under ett neutralt namn för återanvändning. */
.check-row{
  display:flex; gap:9px; align-items:center;
  margin-top:8px; padding:9px 12px; border-radius:var(--r);
  font-size:14px; cursor:pointer;
  background:rgba(var(--tint-rgb),.06); border:1px solid rgba(var(--tint-rgb),.1);
}
.check-row input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--gold); }
.check-row--focus:has(input:checked){
  border-color:rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.1);
}

/* Delegerad uppgift som överordnad markerat klar: ligger kvar hos den
   underordnade som kvitto, nedtonad men läsbar (ingen genomstrykning). */
.row--deleg.row--resolved{ opacity:.72; border-color:rgba(49,196,107,.28); }
.row--deleg.row--resolved .row__title{ text-decoration:none; }

/* Bild i Svara-panelen */
.deleg-img{
  display:block; width:100%; max-height:34vh; object-fit:cover;
  border-radius:12px; border:1px solid var(--line); margin-bottom:10px;
}

/* Dokumentbilaga i Svara-panelen — och som inläggsbilaga i tråden.
   Renderas som <button data-file-menu> (öppnar Visa/Skicka-menyn). */
.deleg-file{
  display:flex; align-items:center; gap:8px; width:100%;
  margin-bottom:10px; padding:9px 11px;
  border-radius:12px; border:1px solid var(--line);
  background:rgba(var(--tint-rgb),.04);
  color:var(--gold); text-decoration:none; font:inherit; font-size:13px;
  text-align:left; cursor:pointer;
}
.deleg-file svg{ flex:0 0 auto; }
.deleg-file span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deleg-file:active{ transform:scale(.99); }

/* Bilaga inuti ett trådinlägg */
.deleg-msg__img{
  display:block; margin-top:6px;
  max-width:180px; max-height:150px; width:auto;
  border-radius:10px; border:1px solid var(--line); cursor:zoom-in;
}
.deleg-msg .deleg-file{ margin:6px 0 0; font-size:12px; padding:7px 9px; }

/* Filbilagemeny (Visa / Skicka) — eget lager ovanpå ark och lightbox */
/* Samma synliga yta som övriga lager, se --vv-h/--vv-top vid .sheet. */
.filemenu{
  position:fixed; left:0; right:0; top:var(--vv-top, 0px); height:var(--vv-h, 100svh);
  z-index:80; display:none;
}
.filemenu.is-open{ display:block; }
.filemenu__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.filemenu__card{
  position:absolute; left:50%; bottom:22px;
  transform:translateX(-50%);
  width:min(360px, calc(100vw - 32px));
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.7);
}
@media (min-width:768px){ .filemenu__card{ bottom:auto; top:50%; transform:translate(-50%,-50%); } }
.filemenu__name{
  margin:2px 0 12px; font-size:13px; color:var(--dim);
  overflow-wrap:anywhere; text-align:center;
}

/* ---------------------------------------------- laddindikator vid navigering
   Klassiskt överlägg med centrerad spinner medan en ny sida laddar —
   restaurangbyte, RCTP/förskift, menyval, vanliga formulär. Se
   navProgress() i app.js. */
#nav-overlay{
  position:fixed; inset:0; z-index:12000;
  display:none; place-items:center;
  background:rgba(0,0,0,.52);
  /* Rör aldrig klick — bara visuell återkoppling. Annars äter överlägget
     upp samma tap som skulle navigera vidare. */
  pointer-events:none;
  /* eget lager + inget opacity-fade: iOS ska inte skjuta upp målningen */
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
#nav-overlay.is-on{ display:grid; }
#nav-overlay .nav-overlay__box{
  width:66px; height:66px; border-radius:18px;
  display:grid; place-items:center;
  background:var(--ink-2);
  border:1px solid var(--line);
  box-shadow:0 20px 55px -14px rgba(0,0,0,.65);
}
#nav-overlay .spinner{
  width:30px; height:30px; border-width:3px;
  border-color:rgba(var(--text-rgb),.16);
  border-top-color:var(--gold);
}

/* Den tappade länken (eller .dtable-raden, se [data-href] i navTarget(),
   app.js) tonas ned; ikonen i den snurrar om den finns. */
.is-navigating{ opacity:.55; }
a.is-navigating svg{ animation:spin .6s linear infinite; }

@media (prefers-reduced-motion: reduce){
  a.is-navigating svg{ animation:none; }
}

/* ------------------------------------------- dra nedåt för att uppdatera ---- */
#ptr{
  position:fixed; left:50%; top:0; z-index:90;
  margin-top:calc(env(safe-area-inset-top) + 6px);
  transform:translate(-50%,-70px);
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink-2);
  border:1px solid var(--line);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
  pointer-events:none;
}
#ptr.is-armed{ border-color:rgba(var(--accent-rgb),.6); }
#ptr .ptr__spin{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(var(--text-rgb),.2);
  border-top-color:var(--gold);
}
#ptr.is-loading .ptr__spin{ animation:spin .6s linear infinite; }

/* ------------------------------------------- svep in från vänsterkanten ----

   Hel yta som glider in från vänsterkanten och puttar undan sidan (topbar +
   innehåll skjuts åt höger lika mycket i app.js), så gesten syns tydligt.
   Panelens högerkant möter sidans vänsterkant exakt — den ligger ovanpå men
   överlappar inte.

   BUGG (2026-09-14): panelen skapas redan vid första beröringen nära
   vänsterkanten (se getPanel() i app.js) — även av en vanlig scroll som
   råkar börja där, inte bara ett fullbordat svep — och tas ALDRIG bort ur
   DOM:en igen, bara flyttas tillbaka till viloläget. box-shadow:en nedan
   är en STATISK regel, inte kopplad till någon klass, så den ritas
   OAVSETT var panelen står. I viloläget (translateX(-100%)) hamnar
   panelens högerkant exakt vid skärmens vänsterkant, och skuggan
   (22px offset + 50px oskärpa − 16px spridning) läcker då ändå ut
   ~56 px in på skärmen, permanent, så fort panelen väl skapats en gång.
   Osynligt mot en mörk botten (skugga mot nästan svart), men en tydlig
   mörk gradient längs hela vänsterkanten mot en LJUS botten (light, rose,
   sand, ice, coral) — det användaren rapporterade.
   Fix: en extra fast marginal (EDGE_HIDE) utöver -100% i viloläget, så
   skuggans läckage hamnar utanför skärmen i stället för precis innanför
   den. Får bara påverka VILOLÄGET (denna regel + resetInstant() i app.js)
   — inte den pixelbaserade formeln i paint() som styr panelen medan man
   faktiskt drar i den, annars slutar den följa fingret exakt. */
#edgeback{
  position:fixed; left:0; top:0; bottom:0; z-index:120;
  width:min(320px, 82vw);
  transform:translateX(calc(-100% - 80px));
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:26px;
  background:var(--ink-2);
  border-right:1px solid var(--line);
  box-shadow:22px 0 50px -16px rgba(0,0,0,.6);
  color:var(--dim); pointer-events:none;
}
#edgeback.is-armed{ color:var(--gold); border-right-color:rgba(var(--accent-rgb),.6); }
/* Medan sidan skjuts åt höger: klipp bort det som annars skulle ge en
   vågrät scrollbar. overflow-x:clip rör inte position:sticky. */
html.edgeswiping{ overflow-x:hidden; overflow-x:clip; }

/* ============================================================
   LIVEBOARD (/liveboard)

   Målet är hela driftdygnet på en skärmhöjd: 24 timrader plus rubrik och
   totalrad ryms i en stående telefon utan att man scrollar lodrätt.
   Därför tighta radhöjder (--lb-row) och nästan ingen luft i chromet
   ovanför. Tavlan dras i sidled; tidkolumnen, rubrikerna och totalraden
   ligger kvar med position:sticky.
   ============================================================ */

.lb{
  --lb-row:   14px;    /* timrad */
  --lb-rowq:  12px;    /* kvartsrad */
  --lb-font:  9px;
  --lb-grouph: 11px;   /* grupprubriksradens höjd — cols-raden fryser strax under */
  --lb-timew: 48px;    /* tidkolumnens bredd — fast, så försäljningskolumnen
                          kan ligga sticky precis intill den */
  margin:0 calc(var(--pad) * -1);
  display:flex; flex-direction:column; min-height:0;
}
.lb > *{ padding-left:var(--pad); padding-right:var(--pad); }

/* ------------------------------------------------------- enhetsval */

.lb-units{
  display:flex; gap:5px; overflow-x:auto;
  scrollbar-width:none; padding-bottom:6px; flex:0 0 auto;
}
.lb-units::-webkit-scrollbar{ display:none; }
/* padding-right kollapsar i en flex-scroller — en distansbit i stället, så
   sista chippet inte ligger klistrat mot skärmkanten när man scrollat ut. */
.lb-units::after{ content:''; flex:0 0 calc(var(--pad) - 5px); }
.lb-unit{
  flex:0 0 auto; white-space:nowrap; text-decoration:none;
  padding:5px 11px; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  color:var(--dim); font:600 12px/1 var(--font-ui),sans-serif;
}
.lb-unit.is-active{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border-color:transparent; color:var(--on-accent);
}

/* ------------------------------------------------------- datumrad */

.lb-date{ display:flex; align-items:center; gap:6px; padding-bottom:6px; flex:0 0 auto; }
.lb-step{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); color:var(--cream);
}
.lb-step:active{ transform:scale(.93); }
.lb-datebtn{
  flex:1; min-width:0; padding:5px 12px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line); color:var(--cream);
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.lb-datebtn:active{ background:var(--card-2); }
.lb-datebtn__main{ font:600 13px/1.25 var(--font-ui),sans-serif; }
.lb-datebtn__sub{ font-size:10px; color:var(--gold); }

/* Period-väljaren i datumarket: två datumfält i EN rad/pill med en pil
   emellan, i stället för två separata fält under varandra man måste öppna
   var för sig ("två datumväljare"). Fälten behåller sin vanliga
   type="date"-funktion (native kalender på tryck) — det är bara ramen
   runt om som slås ihop till en enda kontroll. */
.lb-daterange{
  display:flex; align-items:center; gap:6px;
  background:rgba(var(--tint-rgb),.05);
  border:1px solid rgba(var(--tint-rgb),.1);
  border-radius:var(--r);
  padding:0 4px;
}
.lb-daterange input[type=date]{
  min-height:42px; border:none; background:none; padding:10px 6px;
  width:0; flex:1 1 0; min-width:0;
}
.lb-daterange input[type=date]:focus{ outline:none; background:rgba(var(--tint-rgb),.07); }
.lb-daterange__sep{
  flex:0 0 auto; display:flex; color:rgba(var(--text-rgb),.4);
}

/* ------------------------------------------------------- larm/tomt */

.lb-alert{
  display:flex; align-items:center; gap:7px; margin-bottom:6px; flex:0 0 auto;
  width:100%; padding:5px 8px 5px 9px; border-radius:var(--r);
  background:rgba(218,41,28,.1); border:1px solid rgba(218,41,28,.3);
  font:400 11.5px/1.3 var(--font-ui),sans-serif; color:var(--cream);
  text-align:left; overflow:hidden;
}
.lb-alert:active{ background:rgba(218,41,28,.16); }
.lb-alert .tag{ flex:0 0 auto; }
.lb-alert__list{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lb-alert__more{
  flex:0 0 auto; display:flex; align-items:center; gap:1px;
  color:#FF7A6E; font-weight:600; font-size:11px;
}

/* ------------------------------------------------------- snabbknappar

   Fyra rapporter som hör till liveboarden men lever på egna sidor:
   Produktstopp, PMX, Crew food och Instämplade. Ett 2×2-rutnät i stället
   för fyra fritt flytande "more"-länkar — det här är sidans huvudsakliga
   vägar vidare, inte finstilt, så de får se ut som knappar. Produktstopp
   får en röd variant + räknare när något faktiskt är slut just nu (samma
   signal som larmbanden nedanför, bara som en genväg). */
.lb-quick{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  margin-bottom:10px; flex:0 0 auto;
}
.lb-quick__btn{
  display:flex; align-items:center; gap:6px;
  padding:7px 8px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line);
  color:var(--cream); text-decoration:none;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.lb-quick__btn:active{ transform:scale(.97); background:var(--card-2); }
.lb-quick__btn svg{ flex:0 0 auto; width:15px; height:15px; color:var(--gold); }
.lb-quick__label{
  flex:1; min-width:0; font:600 11px/1.2 var(--font-ui),sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-quick__btn--alert{ border-color:rgba(218,41,28,.4); background:rgba(218,41,28,.1); }
.lb-quick__btn--alert svg{ color:#FF7A6E; }
.lb-quick__badge{
  flex:0 0 auto; min-width:15px; height:15px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px;
  background:#DA291C; color:#fff; font:700 10px/1 var(--font-ui),sans-serif;
}
@media (min-width:520px){
  .lb-quick{ grid-template-columns:repeat(5,1fr); }
}

/* Listan i produktstopp-arket */
.lb-outage{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:5px;
}
.lb-outage li{
  padding:7px 10px; border-radius:10px;
  background:rgba(218,41,28,.09); border:1px solid rgba(218,41,28,.22);
  font-size:12.5px; color:var(--cream);
}
.lb-empty{ text-align:center; }
.lb-empty p{ margin:0; font-size:14px; }
.lb-empty p + p{ margin-top:5px; font-size:12.5px; }

/* ------------------------------------------------------- tavlan */

.lb-boardwrap{
  position:relative; padding-left:0; padding-right:0;
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
.lb-board{
  overflow:auto; scrollbar-width:none;
  flex:1 1 auto; min-height:0;
  max-height:72dvh;                 /* utan JS: fortfarande rimligt */
  overscroll-behavior:contain;
}
.lb-board::-webkit-scrollbar{ display:none; }

.lb-table{
  border-collapse:separate; border-spacing:0;
  width:max-content; min-width:100%;
  font-family:"Azeret Mono",monospace;
}

/* Rubriker */
.lb-table thead th{
  position:sticky; z-index:3;
  background:var(--ink-2);
  font-family:var(--font-ui),sans-serif; font-weight:600; color:var(--dim);
  white-space:nowrap; text-align:center;
}
.lb-table thead .lb-table__groups th{
  top:0; height:var(--lb-grouph); padding:0 3px;
  font-size:7px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--gold); text-align:center;
  border-bottom:1px solid rgba(var(--accent-rgb),.16);
}
.lb-table__cols th{
  top:var(--lb-grouph); padding:0 3px 1px;
  font-size:8px; line-height:1.08;
  border-bottom:1px solid rgba(var(--tint-rgb),.14);
}
.lb-table__cols th span{ display:block; color:var(--cream); }
.lb-table__cols th em{
  display:block; font-style:normal; font-size:6px; color:var(--dim-2);
  text-transform:lowercase; letter-spacing:0;
}

/* Rutnätet: en tunn linje mellan varje kolumn, lika diskret som linjen
   mellan raderna, och en tydligt kraftigare där en kolumngrupp börjar. */
.lb-table thead th,
.lb-table tbody td,
.lb-table tfoot td{ border-left:1px solid rgba(var(--tint-rgb),.09); }

.lb-table__groups th + th,
.lb-table th.is-groupstart,
.lb-table td.is-groupstart{ border-left:2px solid rgba(var(--accent-rgb),.3); }

/* Cellen närmast den frysta tidkolumnen behöver ingen egen linje —
   tidkolumnens border-right gör redan jobbet. */
.lb-table .lb-th-time + td,
.lb-table .lb-th-time + th{ border-left:0; }

/* Fryst tidkolumn */
.lb-th-time{
  position:sticky; left:0; z-index:4;
  width:var(--lb-timew); min-width:var(--lb-timew); max-width:var(--lb-timew);
  overflow:hidden;
  background:var(--ink-2);
  text-align:left!important; padding:0!important;
  border-right:2px solid rgba(var(--accent-rgb),.3);
}
.lb-table thead .lb-th-time{ z-index:5; }
.lb-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Andra frusna kolumnen: dagens försäljning fryser precis intill
   tidkolumnen, så tid + sålt alltid syns när tavlan dras i sidled. Gäller
   kolumnrubriken ("Idag/kr"), alla timrader och båda fotraderna — men inte
   grupprubriksraden, där "Försäljning" spänner över fyra kolumner. */
.lb-table__cols .lb-th-time + th,
.lb-table tbody .lb-th-time + .lb-num,
.lb-table tfoot .lb-th-time + .lb-num{
  position:sticky; left:var(--lb-timew);
  border-right:1px solid rgba(var(--tint-rgb),.16);
}
.lb-table tbody .lb-th-time + .lb-num{ z-index:2; background-color:var(--ink); }
.lb-table__cols .lb-th-time + th{ z-index:4; }
.lb-table tfoot .lb-th-time + .lb-num{ z-index:4; }

.lb-hour, .lb-expand{
  display:flex; align-items:center; gap:3px;
  width:100%; height:var(--lb-row); padding:0 2px;
  font:600 var(--lb-font)/1 "Azeret Mono",monospace; color:var(--cream);
  background:none; border:0; text-align:left; white-space:nowrap;
}
.lb-hour--q{
  height:var(--lb-rowq); font-size:8px; color:var(--dim); padding-left:9px;
}
.lb-expand__icon{
  width:5px; height:5px; flex:0 0 auto;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg); transition:transform .16s var(--ease);
}
.lb-expand[aria-expanded="true"] .lb-expand__icon{ transform:rotate(45deg); }

/* Celler */
.lb-num{
  background-color:var(--ink);
  padding:0 2px; height:var(--lb-row);
  font:500 var(--lb-font)/var(--lb-row) "Azeret Mono",monospace;
  color:var(--cream); text-align:right; white-space:nowrap;
  border-bottom:1px solid rgba(var(--tint-rgb),.05);
}
.lb-num:empty::after{ content:"–"; color:var(--dim-2); }
.lb-num.is-up{ color:var(--green); }
.lb-num.is-down{ color:#FF7A6E; }
/* Solid botten även här — en genomskinlig cell lyser igenom den frysta
   tidkolumnen när tavlan dras i sidled. */
.lb-num.is-warn{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.12));
  color:var(--gold);
}
.lb-num.is-alert{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(218,41,28,.16),rgba(218,41,28,.16));
  color:#FF8A7E; font-weight:700;
}

.lb-row .lb-th-time{ border-bottom:1px solid rgba(var(--tint-rgb),.05); }
.lb-row:nth-child(4n+1) .lb-num{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(var(--tint-rgb),.022),rgba(var(--tint-rgb),.022));
}
.lb-row.is-now .lb-num{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.09));
}
.lb-row.is-now .lb-th-time{
  background-color:var(--ink-2);
  background-image:linear-gradient(rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.09));
}
.lb-row.is-now .lb-hour, .lb-row.is-now .lb-expand{ color:var(--gold); }
.lb-row--quarter .lb-num{
  height:var(--lb-rowq); line-height:var(--lb-rowq); font-size:8px;
  color:var(--dim);
  background-color:var(--ink);
  background-image:linear-gradient(rgba(var(--tint-rgb),.028),rgba(var(--tint-rgb),.028));
}
.lb-row--quarter .lb-th-time{
  background-color:var(--ink-2);
  background-image:linear-gradient(rgba(var(--tint-rgb),.028),rgba(var(--tint-rgb),.028));
}
.lb-row--quarter .lb-num.is-up{ color:rgba(49,196,107,.8); }
.lb-row--quarter .lb-num.is-down{ color:rgba(255,122,110,.8); }

.lb-table tfoot .lb-num, .lb-table tfoot .lb-th-time{
  position:sticky; bottom:0; z-index:3;
  background:var(--ink-2);
  border-top:1px solid rgba(var(--accent-rgb),.3); border-bottom:0;
  font-weight:700;
}
.lb-table tfoot .lb-th-time{ z-index:5; }   /* över den frusna försäljningskolumnen (4) */
.lb-table tfoot .lb-hour{ color:var(--gold); font-size:8px; letter-spacing:-.02em; }

/* Två fastnitade fotrader — "Hittills" längst ner, totalen precis ovanför.
   Finns bara totalraden är den både :first-child och :last-child; :last-child-
   regeln ligger sist och vinner, så den hamnar rätt vid botten ändå. */
.lb-table tfoot tr:first-child .lb-num,
.lb-table tfoot tr:first-child .lb-th-time{ bottom:var(--lb-row); }
.lb-table tfoot tr:last-child .lb-num,
.lb-table tfoot tr:last-child .lb-th-time{ bottom:0; }
.lb-row--sofar .lb-num, .lb-row--sofar .lb-th-time{ font-weight:600; }
.lb-table tfoot .lb-row--sofar .lb-hour{ color:var(--dim); font-size:8px; }

.lb-hint{
  position:absolute; right:8px; bottom:4px; z-index:6; pointer-events:none;
  padding:3px 8px; border-radius:999px;
  background:var(--ink-2); border:1px solid var(--line);
  font:500 9.5px/1 var(--font-ui),sans-serif; color:var(--dim);
  transition:opacity .3s var(--ease);
}
.lb-hint.is-gone{ opacity:0; }

/* ------------------------------------------------------- datumark */

.lb-days{ display:flex; gap:5px; flex-wrap:wrap; }
.lb-day{
  flex:1 1 40px; display:flex; align-items:center; justify-content:center;
  min-width:40px; height:38px; border-radius:10px; cursor:pointer;
  background:rgba(var(--tint-rgb),.05); border:1px solid rgba(var(--tint-rgb),.1);
  font:600 12px/1 var(--font-ui),sans-serif; color:var(--dim);
}
.lb-day input{ position:absolute; opacity:0; width:0; height:0; }
.lb-day:has(input:checked){
  background:rgba(var(--accent-rgb),.15); border-color:rgba(var(--accent-rgb),.45); color:var(--gold);
}

/* Lite mer luft för muspekare på surfplatta/dator, men långt tightare än
   förr — appen är ändå kapad till ~620px bred, så varje extra pixel i
   cellen är en kolumn mindre som syns innan man måste dra i sidled. */
@media (min-width:520px){
  .lb{ --lb-row:16px; --lb-rowq:14px; --lb-font:9.5px; }
  .lb-num{ padding:0 3px; }
  .lb-hour, .lb-expand{ padding:0 3px; }
}

/* Ljust tema: appens ljusröda ton blir för svag mot vit botten, och här
   är halva tavlan röda tal. */
[data-theme="light"] .lb-num.is-down{ color:#C0392B; }
[data-theme="light"] .lb-num.is-alert{ color:#A93226; }

/* ------------------------------------------------- Totaler-vyn
   En rad per restaurang för dagen och för perioden. Till skillnad från
   timtavlan ska den INTE pressas in på en skärmhöjd (fitBoard i
   liveboard.js rör den inte, se data-lbt-scroll) — två tabeller med ett
   tjugotal rader får scrolla på sidan som vanligt. */

/* Timtavlan pressar in hela driftdygnet (24 timrader + kvartar) på en
   skärmhöjd och måste därför vara tight. Totaler har en rad per
   restaurang — ett tiotal, inte hundra — och har ingen anledning att ärva
   den trängseln. Måtten sätts därför om här i stället för att röra .lb. */
.lb--totaler{
  display:block;
  /* Tätt, men inte lika tätt som timtavlan (14px) — den måste få plats med
     hela driftdygnet på en skärmhöjd, den här bara med en rad per
     restaurang. Måtten är satta efter förlagan vast.php på iPhone. */
  --lb-row:   19px;
  --lb-font:  9px;
  --lb-timew: 92px;    /* längsta namnen klipps med ellips */
}

/* Rubrikraden ska låsas i SIDLED (Restaurang och Net sales följer med när
   man drar), men inte förskjutas i höjdled.
   Timtavlan har en `.lb-board` med max-height som scrollar lodrätt, och
   där fungerar `top:var(--lb-grouph)` som avsett — värdet är höjden på
   grupprubriksraden ovanför. Totaler har `max-height:none` och scrollar
   bara i sidled, och har ingen grupprubriksrad: samma regel blev därför
   bara "tryck ner rubriken 11px", rakt över första restaurangen.
   `top:auto` tar bort den vertikala tröskeln men lämnar `position:sticky`
   och `left` orörda, så låsningen i sidled finns kvar.
   (Ett tidigare försök satte `position:static` på hela rubriken. Det slog
   ut `left:0` på Restaurang-kolumnen — men INTE på Net sales, vars regel
   `.lb-table__cols .lb-th-time + th` har högre specificitet och behöll
   både sticky och sin nedtryckta top.) */
.lb--totaler .lb-table__cols th{ top:auto; }

/* Tätare kolumner, mätt mot målet att få nio i bild på en iPhone (390px)
   som förlagan gör. Uppmätt i Chrome med de här värdena: kolumn 9 (Crew)
   slutar på 389px, och 10 av 12 restaurangnamn får plats oklippta.
   Marginalen är alltså en pixel — ändrar man --lb-timew, padding eller
   någon rubriktext ryker den nionde kolumnen.

   Kolumnbredden sätts omväxlande av RUBRIKEN ("Net sales", "Takeout") och
   av CELLEN ("27,02%", "-1 234"), så både padding och teckenstorlek
   behövde ner — inte bara den ena. */
.lbt-table .lb-num,
.lbt-table thead th{ padding-left:2px; padding-right:2px; }
.lbt-section{ margin-bottom:16px; }

/* Rubrikraden, som i förlagan: etikett, sedan periodvalen inline, och
   datumintervallet längst till höger på samma rad. */
.lbt-head{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  padding:2px 2px 4px;
}
.lbt-head__label{ font:700 11px/1.3 var(--font-ui),sans-serif; color:var(--cream); }
.lbt-head__sub{ font-size:10.5px; color:var(--dim); }
.lbt-head__range{ margin-left:auto; font-size:10px; color:var(--dim-2); white-space:nowrap; }

.lbt-board{ max-height:none; overflow-x:auto; }
.lbt-table .lb-th-time{ text-align:left; }
.lbt-table thead th{ padding-top:3px; padding-bottom:3px; }

/* Restaurangnamnet ärvde .lb-hour, som är satt i Azeret Mono för att
   klockslag ska stå i en rak kolumn. Ett namn i siffertypsnitt ser fel
   ut — här gäller appens vanliga UI-typsnitt, normal vikt. Ingen
   display:block: .lb-hour centrerar lodrätt med flex, och block slog ut
   den centreringen. */
.lbt-name{
  /* Roboto Condensed, som förlagan — inte för formens skull utan för att
     det är enda sättet att få både hela restaurangnamn OCH nio kolumner i
     bild på en telefon. "Jönköping, A6 McDrive" tar 128px i Inter Tight
     men 96px här, och varje pixel namnkolumnen slipper är en pixel till
     siffrorna. Faller tillbaka på appens vanliga UI-typsnitt. */
  font-family:"Roboto Condensed",var(--font-ui),sans-serif;
  font-weight:400; font-size:11px; letter-spacing:0;
  padding:0 4px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; display:block;
  line-height:var(--lb-row);
}
.lbt-table tfoot .lb-hour{
  font-family:"Roboto Condensed",var(--font-ui),sans-serif; font-size:11px;
}

/* Varannan rad svagt ljusare, som i förlagan — med tjugotvå kolumner är
   det det som håller ögat kvar på rätt rad när man drar i sidled.
   Bakgrunden måste sättas solid (inte genomskinlig) även här, annars
   lyser raden igenom den frysta namnkolumnen. */
.lbt-table tbody tr:nth-child(even) .lb-num{ background-color:var(--ink-2); }
.lbt-table tbody tr:nth-child(even) .lb-th-time{ background-color:var(--ink); }

.lbt-none{ margin:0 2px 4px; font-size:11.5px; }
.lbt-foot{ margin:2px 2px 12px; font-size:10.5px; }

/* Periodvalen ligger inline i rubrikraden, som i förlagan: bara text, med
   den valda i vitt och fetstil. Chips hade tagit en egen rad och gjort
   rubriken dubbelt så hög — och det är tabellen som ska ha höjden. */
.lbt-periods{
  display:flex; gap:9px; align-items:baseline;
  overflow-x:auto; scrollbar-width:none; min-width:0;
}
.lbt-periods::-webkit-scrollbar{ display:none; }
.lbt-period{
  flex:0 0 auto; white-space:nowrap; text-decoration:none;
  color:var(--dim); font:500 10.5px/1.3 var(--font-ui),sans-serif;
}
.lbt-period.is-active{ color:var(--cream); font-weight:700; }
.lbt-period:active{ opacity:.55; }
.lbt-period.is-custom{ color:var(--gold); }

/* Varning när perioden når bakom den punkt där momsen började redovisas
   per kanal — utan den ser nettotalen ut att gälla, fast de inte gör det. */
.lbt-warn{
  margin:0 0 8px; padding:7px 10px; border-radius:var(--r);
  background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.3);
  font-size:11.5px; line-height:1.45; color:var(--cream);
}

/* Ett klickbart nyckeltal ser ut som talet självt. Ingen understrykning
   och ingen ram: tjugotvå understrukna tal per rad blev ett rutmönster
   som drog blicken från siffrorna, som är det man kommer för. Signalen
   ligger i stället i kolumnrubriken (.is-chart nedan) — en per kolumn i
   stället för en per cell — plus att cellen svarar på tryck. */
.lbt-cell{
  appearance:none; background:none; border:0; padding:0; font:inherit;
  color:inherit; cursor:pointer;
}
.lbt-cell:active{ opacity:.5; }
@media (hover:hover){
  .lbt-cell:hover{ text-decoration:underline; text-underline-offset:3px; }
}

/* Kolumner som har ett diagram bakom sig känns igen på att rubriken är
   guldfärgad. (Tidigare satt här även ett ▾ efter texten — det fick gå
   när rubrikerna blev sorteringsknappar, eftersom sorteringspilen sitter
   på samma plats och två pilar i samma rubrik bara förvirrar.) */
.lbt-table thead th.is-chart span{ color:var(--gold); }

/* Rubriken sorterar tabellen. Innehållet ligger i en riktig <button> som
   fyller hela cellen: trycket landar då på ett element som är byggt för
   att tryckas på (och går att nå med tangentbord), i stället för att
   förlita sig på att klicket bubblar upp från ett sticky <th> i en
   container som scrollar i sidled — den kombinationen åt upp trycket på
   iOS. Knappen ärver rubrikens typografi och lägger ingen egen höjd. */
.lbt-table thead th[data-lbt-sort]{ padding:0; }
.lbt-sort{
  display:block; width:100%; height:100%;
  appearance:none; background:none; border:0;
  padding:3px 2px; margin:0;
  font:inherit; color:inherit; text-align:inherit;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
.lbt-sort:active{ opacity:.55; }
.lbt-table thead .lb-th-time .lbt-sort{ text-align:left; padding-left:4px; }
.lbt-table thead th.is-sorted span::after{
  content:"▾"; font-size:7px; margin-left:2px; vertical-align:middle;
}
.lbt-table thead th.is-sorted.is-asc span::after{ content:"▴"; }

/* ----------------------------------------------- diagrammodalen
   Helskärm och eget lager (inte .sheet): ett diagram med tjugo punkter
   på x-axeln behöver hela ytan, och på telefon betyder det liggande
   läge. Därför rotationsuppmaningen nedan, som ligger kvar över
   diagrammet tills telefonen faktiskt vrids. */

.lbchart{
  position:fixed; inset:0; z-index:1200;
  display:none; flex-direction:column;
  background:#121212; color:#fff;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.lbchart.is-open{ display:flex; }

.lbchart__bar{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px 8px; border-bottom:1px solid #2a2a2a; flex:0 0 auto;
}
.lbchart__bar button,
.lbchart__bar select,
.lbchart__bar input{
  background:#1c1c1e; color:#eee; border:1px solid #3a3a3c;
  border-radius:7px; padding:4px 8px;
  font:600 12px/1.3 var(--font-ui),sans-serif;
}
.lbchart__close{ font-size:14px; line-height:1; padding:4px 9px; }
.lbchart__pick{ flex:1 1 120px; min-width:0; }
.lbchart__grain{ display:flex; gap:4px; }
.lbchart__grain button.is-active{
  background:var(--gold,#c8a24a); border-color:transparent; color:#1a1a1a;
}
.lbchart__range{ display:flex; align-items:center; gap:4px; font-size:11px; color:#999; }
.lbchart__range input{ padding:3px 5px; font-size:11px; }
.lbchart__save{ margin-left:auto; }

.lbchart__body{ position:relative; flex:1 1 auto; min-height:0; padding:6px 8px 10px; }
.lbchart__body canvas{ width:100%!important; height:100%!important; }
.lbchart__msg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  margin:0; font-size:13px; color:#999; background:#121212;
}

/* Rotationsuppmaningen: bara i stående läge, och bara när modalen är
   öppen. Ligger över hela modalen — diagrammet är ändå oläsbart på
   bredden i portrait, så det är ingen idé att visa halva. */
.lbchart__rotate{ display:none; }
@media (orientation:portrait) and (max-width:820px){
  .lbchart.is-open .lbchart__rotate{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; background:#121212; text-align:center; padding:0 28px;
  }
  .lbchart.is-open .lbchart__rotate p{
    margin:0; font:600 15px/1.45 var(--font-ui),sans-serif; color:#eee;
  }
  /* En telefon som vrider sig ett kvarts varv, om och om igen. */
  .lbchart__phone{
    width:46px; height:76px; border:2.5px solid #eee; border-radius:9px;
    animation:lbc-rotate 2.4s ease-in-out infinite;
  }
  @keyframes lbc-rotate{
    0%,25%   { transform:rotate(0deg); }
    45%,75%  { transform:rotate(-90deg); }
    100%     { transform:rotate(0deg); }
  }
  @media (prefers-reduced-motion:reduce){
    .lbchart__phone{ animation:none; transform:rotate(-90deg); }
  }
  /* Kontrollerna hör till diagrammet och ska inte ligga och locka
     ovanför en uppmaning att vrida först. */
  .lbchart.is-open .lbchart__bar{ position:relative; z-index:3; }
  .lbchart.is-open .lbchart__bar > :not([data-lbc-close]){ display:none; }
}

/* ------------------------------------------------------------ notiser
   Röd oläst-badge (klock-knappen i headern + "Notiser" i menyn) och
   listan under /notiser. */
.nav-bell{ text-decoration:none; }
.nbadge{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:2px solid var(--ink);
  background:var(--red); color:#fff;
  font:700 10px/1 "Azeret Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:0;
  pointer-events:none;
}
.nbadge[hidden]{ display:none; }
/* I menyraden sitter siffran i flödet, längst ut till höger — ingen ring. */
.nbadge--inline{
  position:static; margin-left:auto; border:0; height:18px;
}

.note-day{
  margin:18px 2px 8px;
  font:700 12px/1 var(--font-ui), sans-serif;
  letter-spacing:.03em; text-transform:uppercase; color:var(--dim);
}
.note-day:first-of-type{ margin-top:6px; }
.note{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 14px; margin-bottom:8px;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--card); color:var(--cream); text-decoration:none;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.note:active{ transform:scale(.99); background:var(--card-2); }
.note__dot{
  flex:0 0 auto; width:8px; height:8px; margin-top:6px;
  border-radius:50%; background:transparent;
}
.note--unread{ border-color:rgba(var(--accent-rgb),.4); }
.note--unread .note__dot{ background:var(--gold); }
.note__body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.note__title{ font:700 14px/1.35 var(--font-ui), sans-serif; }
.note__text{ font-size:13px; color:var(--dim); }
.note__time{
  margin-top:3px; color:var(--dim-2);
  font:600 11px/1 "Azeret Mono", ui-monospace, monospace;
}

/* RealInsights (Inventering/Waste + råvarudetaljen) återanvänder .dtable
   rakt av — samma "bred tabell på en telefon"-problem som HR:s listor
   redan löser (sticky rubrik + namnkolumn, sortering, sök). Enda
   tillägget: en fryst totalrad (tfoot), som ingen av HR-tabellerna
   behövt förut. */
.dtable tfoot td{
  position:sticky; bottom:0; z-index:2;
  background:var(--ink-2); color:var(--cream); font-weight:700;
  border-top:1px solid rgba(var(--accent-rgb),.35); border-bottom:0;
}
.dtable tfoot td:first-child{ z-index:3; background:var(--ink-2); }

/* Färgade totalceller (t.ex. negativ summa = .bad) måste ha en OGENOMSKINLIG
   botten under tinten — annars lyser raden som råkar hamna bakom den frysta
   totalraden igenom när man scrollar. Tinten läggs som ett lager ovanpå
   --ink-2 i stället för att ersätta bakgrunden. */
.dtable tfoot td.bad{
  background:linear-gradient(rgba(218,41,28,.18), rgba(218,41,28,.18)), var(--ink-2);
  color:#FF8B80;
}
.dtable tfoot td.ok{
  background:linear-gradient(rgba(49,196,107,.15), rgba(49,196,107,.15)), var(--ink-2);
  color:var(--green);
}

/* Råvarukolumnen (namnet) får ett tak i bredd så Inventering/Waste ryms utan
   sidledsscroll på telefon. Hela namnet finns kvar i radens detaljark. */
#tbl-inv td:first-child,
#tbl-waste-item td:first-child{
  max-width:min(42vw, 260px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* PMX och Recept — långa artikelnamn gjorde förstakolumnen (Artikel)
   orimligt bred på telefon, och listorna har fler artiklar än de flesta
   andra dtable-listor så tightare padding ger fler rader synliga utan
   scroll. Hela namnet finns kvar i radens detaljark (PosRef-prefixet
   räcker för att skilja likartade namn åt i den avkapade listan). */
#tbl-pmx th,
#tbl-pmx td,
#tbl-recept th,
#tbl-recept td{
  padding:6px 8px;
}
#tbl-pmx td:first-child,
#tbl-recept td:first-child{
  max-width:min(42vw, 220px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Markerar raden för vald period (Waste: dagen man just nu tittar på). */
.dtable tbody tr.is-current td{ background:rgba(var(--accent-rgb),.12); }
.dtable tbody tr.is-current td:first-child{ background:rgba(var(--accent-rgb),.14); }

/* ============================================================ RealInsights: Food cost
   Jämförelsediagram mellan samtliga restauranger i organisationen (se
   realinsights_food_cost_compare() i app/realinsights.php) — handritad SVG
   i stället för ett tredjepartsbibliotek, se
   public/assets/js/realinsights_food_cost.js. */
.ri-rotate-hint{
  display:none; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 13px; margin:0 0 14px; font-size:12.5px; color:var(--dim);
}
.ri-rotate-hint svg{ flex:0 0 auto; color:var(--gold); }
@media (max-width:700px) and (orientation:portrait){
  .ri-rotate-hint{ display:flex; }
}

.ri-fc-chartwrap{ margin-bottom:18px; }
.ri-fc-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
.ri-fc-export{
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  color:var(--cream); font:600 12px/1 var(--font-ui), sans-serif;
  padding:7px 13px; white-space:nowrap;
}
.ri-fc-export:active{ transform:scale(.96); background:var(--card-2); }

.ri-fc-chart{
  position:relative; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:6px 2px;
}
.ri-fc-svg{ width:100%; height:auto; display:block; touch-action:pan-y; }
.ri-fc-series.ri-fc-hidden{ display:none; }
.ri-fc-guide{ display:none; }
.ri-fc-guide.is-shown{ display:block; }

.ri-fc-tip{
  position:absolute; top:8px; z-index:4; pointer-events:none;
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; font-size:11.5px; line-height:1.5; min-width:120px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.ri-fc-tip__date{ font-weight:700; color:var(--cream); margin-bottom:3px; }
.ri-fc-tip__row{ display:flex; align-items:center; gap:6px; color:var(--dim); white-space:nowrap; }
.ri-fc-tip__row span{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }

.ri-fc-legend{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ri-fc-chip{
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px 5px 8px; font:600 11.5px/1 var(--font-ui), sans-serif;
  color:var(--dim); opacity:.55;
}
.ri-fc-chip.is-on{ opacity:1; color:var(--cream); background:var(--card-2); }
.ri-fc-chip.is-org{ font-weight:700; }
.ri-fc-chip:active{ transform:scale(.96); }
.ri-fc-chip__dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--chip-color, currentColor);
}

/* ============================================================ Veckobrev
   Kortet på supervisorns startsida. Ett öppet veckobrev per gång; det
   försvinner härifrån när det bockats bort (finns kvar i /veckobrev). */
.wbrief{
  margin:14px 0 6px; padding:15px 15px 13px;
  border:1px solid rgba(var(--accent-rgb),.35); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.05));
}
.wbrief__head{ display:flex; align-items:center; gap:10px; }
.wbrief__eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font:800 12px/1 var(--font-display),sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold);
}
.wbrief__eyebrow svg{ flex:0 0 auto; }
.wbrief__period{ margin-left:auto; color:var(--dim); font:600 12px/1 "Azeret Mono",monospace; }
.wbrief__intro{
  margin:10px 0 4px; color:var(--cream); font-size:13.5px; line-height:1.5;
}

.wbrief__rest{
  margin-top:8px; border-top:1px solid var(--line); padding-top:8px;
}
.wbrief__rest:first-of-type{ margin-top:10px; }
.wbrief__sum{
  display:block; cursor:pointer; list-style:none;
  padding:4px 0; color:var(--cream);
}
.wbrief__sum::-webkit-details-marker{ display:none; }
.wbrief__row1{
  display:flex; align-items:center; gap:8px;
  font:700 15px/1.2 var(--font-ui),sans-serif;
}
.wbrief__rname{ flex:1; min-width:0; }
.wbrief__done{ color:var(--green); display:inline-flex; }
.wbrief__chev{ color:var(--dim); display:inline-flex; transition:transform .2s var(--ease); }
.wbrief__rest[open] .wbrief__chev{ transform:rotate(90deg); }

.wbrief__chips{ display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0; padding-left:2px; }
.wbrief__chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px;
  font:600 11px/1.5 "Azeret Mono",monospace;
  background:rgba(var(--tint-rgb),.06); color:var(--dim); border:1px solid rgba(var(--tint-rgb),.08);
}
.wbrief__chip i{ font-style:normal; opacity:.6; text-transform:uppercase; letter-spacing:.03em; }
.wbrief__chip.is-ok{ color:var(--green); border-color:rgba(49,196,107,.3); }
.wbrief__chip.is-warn{ color:var(--gold); border-color:var(--line); }
.wbrief__chip.is-bad{ color:#FF7A6E; border-color:rgba(218,41,28,.4); background:rgba(218,41,28,.12); }

.wbrief__prose{ margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--cream); }
.wbrief__clabel{
  display:block; margin-bottom:4px;
  font:600 11px/1 var(--font-ui),sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--dim);
}
.wbrief__comment{
  width:100%; box-sizing:border-box; resize:vertical; min-height:44px;
  padding:9px 11px; border-radius:var(--r);
  background:var(--ink); color:var(--cream);
  border:1px solid var(--line); font:500 13px/1.5 var(--font-ui),sans-serif;
}
.wbrief__comment:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.wbrief__comment.is-saved{ border-color:rgba(49,196,107,.5); }

/* Dagskommentaren på /schema, se app/views/schedule.php */
.schema-comment.is-saved{ border-color:rgba(49,196,107,.5); }

.wbrief__foot{
  display:flex; align-items:center; gap:12px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
}
.wbrief__count{ flex:1; color:var(--dim); font:600 12px/1 var(--font-ui),sans-serif; }
.wbrief__count.is-ready{ color:var(--green); }
.wbrief[data-leaving]{ opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); }

/* Veckobrevsarkivet (/veckobrev) — läsvy, ett hopfällbart kort per brev. */
.wbarch{
  margin:8px 0; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); overflow:hidden;
}
.wbarch__sum{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:12px 14px; color:var(--cream); font:600 14px/1.2 var(--font-ui),sans-serif;
}
.wbarch__sum::-webkit-details-marker{ display:none; }
.wbarch__period{ font:700 14px/1 "Azeret Mono",monospace; color:var(--gold); }
.wbarch__sup{ flex:1; min-width:0; color:var(--dim); }
.wbarch__sum .tag{ flex:0 0 auto; margin-left:auto; }
.wbarch__sum .wbarch__sup ~ .tag{ margin-left:0; }
.wbarch__chev{ color:var(--dim); display:inline-flex; transition:transform .2s var(--ease); flex:0 0 auto; }
.wbarch[open] .wbarch__chev{ transform:rotate(90deg); }
.wbarch__body{ padding:2px 14px 14px; border-top:1px solid var(--line); }
.wbarch__rest{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.wbarch__rest:first-of-type{ border-top:0; }
.wbarch__comment{
  margin-top:8px; padding:9px 11px; border-radius:var(--r);
  background:rgba(49,196,107,.08); border:1px solid rgba(49,196,107,.28);
  font-size:13px; line-height:1.5; color:var(--cream);
}
.wbarch__clabel{
  display:block; margin-bottom:3px;
  font:600 10px/1 var(--font-ui),sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--green);
}
.wbarch__nocomment{ margin:8px 0 0; color:var(--dim); font-size:12px; font-style:italic; }

/* Ledningsbrevet (ops mgr) — bygger på veckobrevets kort (.wbrief) och
   lägger till områdessumman, fokuspunkterna och den hopfällbara
   restauranglistan under varje supervisor. */
.obrief__area{
  margin-top:10px; padding:9px 11px; border-radius:var(--r);
  background:rgba(255,199,44,.06); border:1px solid rgba(255,199,44,.22);
}
.obrief__arealabel{
  display:block; margin-bottom:6px;
  font:600 10px/1 var(--font-ui),sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--gold);
}
.obrief__area .wbrief__chips{ margin:0; }
.obrief__prios{ margin-top:10px; }
.obrief__prioslabel{
  display:block; margin-bottom:4px;
  font:600 10px/1 var(--font-ui),sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--dim);
}
.obrief__prios ol{ margin:0; padding-left:18px; }
.obrief__prios li{ margin:3px 0; font-size:13px; line-height:1.5; color:var(--cream); }
.obrief__count{
  flex:0 0 auto; color:var(--dim); font:600 11px/1 "Azeret Mono",monospace;
}
.obrief__followup{
  margin:0 0 10px; padding-left:9px; border-left:2px solid var(--line);
  font-size:12px; line-height:1.5; color:var(--dim);
}
.obrief__rests{ margin:0 0 10px; }
.obrief__rests > summary{
  display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font:600 11px/1 var(--font-ui),sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--dim);
}
.obrief__rests > summary::-webkit-details-marker{ display:none; }
.obrief__rests[open] > summary .wbrief__chev{ transform:rotate(90deg); }
.obrief__rest{ margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); }
.obrief__restname{ font:700 13px/1.3 var(--font-ui),sans-serif; color:var(--cream); }
.obrief__facts{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px;
  margin:7px 0 0; font-size:12px; line-height:1.45;
}
.obrief__facts dt{ color:var(--dim); white-space:nowrap; }
.obrief__facts dd{ margin:0; color:var(--cream); }

/* ===================================================== Differensanalys
   RealInsights ▸ Differensanalys (/realinsights/differensanalys). Bygger på
   veckobrevets kort (.wbrief/.obrief) — samma korntyp: en sammanfattning,
   chips med periodens tal och ett hopfällbart kort per post. Det som är
   eget här är fyndkortet (.dax__item), där rubrikraden bär artikelnamn +
   kronor och modellens text ligger i en egen ram inuti. */
.dax-run__btns{ display:flex; flex-wrap:wrap; gap:8px; }
.dax-run__btns .btn{ flex:1 1 auto; min-width:150px; }
.dax-run__btns .btn.is-loading{ opacity:.7; }
.dax-result{ margin-top:14px; }

.dax{
  margin:0 0 6px; padding:15px 15px 13px;
  border:1px solid rgba(var(--accent-rgb),.35); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.05));
}
.dax__head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.dax__lead{ margin:9px 0 2px; color:var(--dim); font-size:12.5px; line-height:1.5; }
.dax__lead strong{ color:var(--gold); font-weight:700; }
.dax__section{
  margin:15px 0 2px;
  font:800 11px/1 var(--font-display),sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold);
}

/* Ett fynd: artikel + kronor + hypotestaggar, med talen inuti. */
.dax__item{ margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
.dax__sum{ display:block; cursor:pointer; list-style:none; padding:3px 0; }
.dax__sum::-webkit-details-marker{ display:none; }
.dax__row1{
  display:flex; align-items:baseline; gap:8px;
  font:700 14.5px/1.3 var(--font-ui),sans-serif; color:var(--cream);
}
.dax__name{ flex:1; min-width:0; }
.dax__kr{ flex:0 0 auto; font:700 14px/1.3 "Azeret Mono",monospace; }
.dax__kr.is-bad{ color:#FF8B80; }
.dax__kr.is-ok{ color:var(--green); }
.dax__item .wbrief__chev{ align-self:center; }
.dax__item[open] .wbrief__chev{ transform:rotate(90deg); }

/* Modellens text — tydligt avgränsad från talen, så det syns var
   tolkningen slutar och underlaget börjar. */
.dax__ai{
  margin:9px 0 2px; padding:10px 11px; border-radius:var(--r);
  background:rgba(var(--tint-rgb),.04); border:1px solid var(--line);
}
.dax__ailabel{
  display:block; margin:0 0 3px;
  font:600 10px/1 var(--font-ui),sans-serif; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dim);
}
.dax__ai p{ margin:0 0 9px; font-size:13px; line-height:1.55; color:var(--cream); }
.dax__ai p:last-child{ margin-bottom:0; }
.dax__ai .dax__action{ color:var(--gold); }
.dax__ai .dax__ailabel + p{ margin-top:0; }
.dax__ai .dax__ailabel:not(:first-child){ margin-top:10px; }

.dax__item .obrief__facts{ margin-top:9px; }
.dax__link{
  display:inline-flex; align-items:center; gap:5px; margin:10px 0 4px;
  font:600 11.5px/1 var(--font-ui),sans-serif; color:var(--gold); text-decoration:none;
}
.dax__link svg{ flex:0 0 auto; }

.dax__quality{
  margin:15px 0 4px; padding:10px 11px; border-radius:var(--r);
  background:rgba(255,199,44,.06); border:1px solid rgba(255,199,44,.22);
}
.dax__quality p{ margin:0; font-size:13px; line-height:1.55; color:var(--cream); }
.dax__stamp{ margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line); white-space:normal; line-height:1.5; }

/* De två hinkarna som inte är avvikelser — normalt hopfällda. */
.dax__bucket{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.dax__bucket > summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font:600 11px/1 var(--font-ui),sans-serif; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dim);
}
.dax__bucket > summary::-webkit-details-marker{ display:none; }
.dax__bucket > summary span:first-child{ flex:1; }
.dax__bucket[open] > summary .wbrief__chev{ transform:rotate(90deg); }
.dax__explain{ margin:9px 0 10px; font-size:12px; line-height:1.5; color:var(--dim); }

/* ------------------------------------------------------------ interninformation

   Infoskärmarnas innehåll (app/views/interninformation.php). Egna
   klasser prefixade "ii-" för att inte krocka med resten av arket; ".row"/
   ".rows"/".tabs"/".card"/".field"/".switch" ovan återanvänds rakt av för
   själva listorna och lägg-till-formulären.
*/

/* .ii-row/.ii-row__main lägger om den vanliga .row från rad (bild bredvid
   text, knappar längst ut) till en stapel: bild+text överst, knapprad
   under — .ii-thumb är för stor nu för att dela rad med fem knappar utan
   att klämmas. Rör bara dessa rader, inte .row i stort. */
.ii-row{ flex-direction:column; align-items:stretch; }
.ii-row__main{ display:flex; align-items:center; gap:12px; }

.ii-thumb{
  width:88px; height:88px; border-radius:var(--r); object-fit:cover;
  flex:0 0 auto; background:var(--card-2);
}
.ii-thumb--icon{
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
img.ii-thumb{ cursor:pointer; }
.ii-row-actions{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
}

/* Draghandtaget för omordning — egen klass, egen JS (interninformation.js),
   men samma prickvisuella som appens .reorder-grip (app.js/app.css). */
.ii-drag-handle{
  flex:0 0 auto; width:38px; height:38px;
  display:grid; place-items:center;
  border:0; background:transparent; padding:0;
  color:var(--gold); cursor:grab;
  touch-action:none;                    /* nyckeln: webbläsaren tar aldrig gesten */
  -webkit-tap-highlight-color:transparent;
}
.ii-drag-handle:active{ cursor:grabbing; }
.ii-drag-handle svg{ fill:currentColor; }
.ii-row.is-dragging{
  cursor:grabbing;
  background:var(--card-2);
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:0 16px 38px rgba(0,0,0,.4);
  transform:scale(1.02);
  opacity:.98;
  position:relative; z-index:6;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .ii-row.is-dragging{ transform:none; transition:none; }
}
.ii-edit-form{ margin-top:8px; }
.ii-edit-form[hidden]{ display:none; }

.ii-canvas-wrap{
  position:relative; width:100%; max-width:720px; margin:0 auto 16px;
  aspect-ratio:450/620; background:#111; border-radius:var(--r);
  overflow:hidden; touch-action:none;
}
.ii-canvas-wrap canvas{ width:100%; height:100%; display:block; }

/* Beskärningsrutan för "Bild"-uppladdningen (Cropper.js). Ingen forcerad
   CSS aspect-ratio här — höjden sätts i JS utifrån uppmätt bredd, samma
   teknik som tcmcds display_admin.php redan använder, så Cropper.js får
   räkna på verkliga mått i stället för att klämmas in i en CSS-ruta. */
.ii-crop-wrap{
  position:relative; width:100%; max-width:363px; margin:0 auto 14px;
  overflow:hidden; border-radius:var(--r); background:#0b0d13;
}
/* Rutmönster = ytor som blir transparenta vid export, se saveaEditorImage()
   och iiCropImageInput-hanteringen i interninformation.js. */
.ii-crop-wrap.is-transparent{
  background-image:
    linear-gradient(45deg,#2a2d38 25%,transparent 25%),
    linear-gradient(-45deg,#2a2d38 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#2a2d38 75%),
    linear-gradient(-45deg,transparent 75%,#2a2d38 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
  background-color:#0b0d13;
}
.ii-fill-picker{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 14px; padding:9px 10px; border-radius:var(--r);
  background:rgba(var(--tint-rgb),.04); border:1px solid var(--line);
}
.ii-fill-picker .btn.is-active{ border-color:var(--gold); color:var(--gold); }
.ii-fill-picker input[type=color]{
  width:28px; height:28px; padding:0; border:1px solid var(--line);
  border-radius:6px; background:none; cursor:pointer;
}
.ii-fill-picker input[type=color]:disabled{ opacity:.4; cursor:not-allowed; }
.ii-fill-swatch{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  cursor:pointer; padding:0;
}

.ii-creator-section{ margin-top:16px; }
.ii-section-label{
  font:600 11px/1 var(--font-ui),sans-serif; letter-spacing:.04em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px;
}
.ii-gradient-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.ii-grad-opt{
  width:38px; height:38px; border-radius:10px; cursor:pointer; flex:0 0 auto;
  border:2px solid transparent; transition:transform .15s var(--ease);
}
.ii-grad-opt:active{ transform:scale(.92); }
.ii-grad-opt.selected{ border-color:var(--gold); transform:scale(1.05); }

.ii-layer{
  border:1px solid var(--line); border-radius:var(--r); padding:10px;
  margin-bottom:8px; background:var(--card);
}
.ii-layer.selected{ border-color:var(--gold); background:var(--card-2); }
.ii-layer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ii-layer__order{ display:flex; gap:2px; }
.ii-layer__order button{ background:none; border:0; color:var(--dim); cursor:pointer; font-size:11px; padding:2px 4px; }
.ii-layer__remove{ background:none; border:0; color:var(--dim); cursor:pointer; font-size:14px; }
.ii-layer textarea{
  width:100%; padding:9px 10px; border:1.5px solid var(--line); border-radius:var(--r);
  font:13px/1.4 var(--font-ui),sans-serif; color:var(--cream); background:var(--ink-2); resize:vertical;
}
.ii-layer select{ width:100%; margin-bottom:8px; }
.ii-style-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.ii-style-btn{
  min-width:32px; height:32px; padding:0 8px; border-radius:8px; border:1px solid var(--line);
  background:var(--ink-2); color:var(--dim); cursor:pointer; font-size:13px;
}
.ii-style-btn.active{ border-color:var(--gold); color:var(--gold); background:rgba(var(--accent-rgb),.12); }
.ii-color-dot{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.ii-color-dot.selected{ border-color:var(--gold); }
.ii-layer img.ii-layer__preview{ max-width:100%; max-height:100px; border-radius:8px; margin-bottom:8px; display:block; }
.ii-resize-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:11px; color:var(--dim); }
.ii-resize-row input[type=range]{ flex:1; }



/* ============================================================
   REALINSIGHTS ▸ KOSTNADSPROGNOS

   Byggd för att likna originalet den porterades ifrån
   (/var/www/tcmcd/public/prognos/index.php) mer än den liknar
   resten av 2do: en tät, LJUS rapportyta (vit botten, svart
   text, en dov mörk rubrikrad med guldtext) i stället för
   appens vanliga mörka kort. Det är ett medvetet undantag —
   den fristående prognossidan såg sådan ut i flera år, och den
   som använder den ska känna igen sig, inte lära om en
   presentation som redan fungerar. Appens eget mörka skal
   (header, sidomeny, flikrad, restaurangväljare, datumnavigering)
   rörs INTE här — bara det som är unikt för P&L Prognos
   (.kp-*) får den ljusa paletten. Egna, hårdkodade färgvariabler
   (kp-*) i stället för appens --ink/--cream-tokens, av samma skäl.

   Desktop är förstahandsmålet (originalet var det, byggt för en
   bred skärm på kontoret) — det är där både densitet och
   Jämförelsetabellens fjorton kolumner ska sitta perfekt.
   Mobilen får en enkel, fungerande nedbrytning (staplade kort,
   kolumner som döljs) men är inte finputsad lika hårt.
   ============================================================ */

.kp-scope{
  --kp-bg:     #f5f5f0;
  --kp-card:   #ffffff;
  --kp-alt:    #edece6;
  --kp-hdr:    #27251f;
  --kp-hdrtxt: #ffc72c;
  --kp-red:    #da291c;
  --kp-gold:   #ffc72c;
  --kp-dkgold: #8a7400;
  --kp-txt:    #1a1a1a;
  --kp-dim:    #767672;
  --kp-bdr:    #d8d3c9;
  --kp-zebra:  rgba(0,0,0,.028);
  --kp-green:  #16a34a;
  --kp-yellow: #ca8a04;
  --kp-rd:     #dc2626;
  --kp-wknd:   rgba(218,41,28,.05);
  --kp-mono:   "Azeret Mono",ui-monospace,monospace;

  background:var(--kp-bg); color:var(--kp-txt);
  border-radius:var(--r-lg); padding:14px;
  font:13px/1.35 var(--font-ui),sans-serif;
}
.kp-scope .dim{ color:var(--kp-dim) !important; }

.kp-warn{
  background:rgba(202,138,4,.10); border:1px solid var(--kp-yellow);
  border-radius:6px; padding:8px 12px; margin:0 0 10px;
  font-size:12.5px; line-height:1.5; color:#7a5a00;
}
.kp-warn strong{ color:var(--kp-red); display:block; margin-bottom:2px; }
.kp-warn ul{ margin:4px 0 0; padding-left:18px; }
.kp-warn li{ color:var(--kp-dim); }

/* ---------------------------------------------------- nyckeltal */

.kp-kpis{
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:0 0 10px;
}
.kp-kpis--inline{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:8px; }
.kp-kpi{
  background:var(--kp-card); border-radius:5px; padding:4px 10px;
  border-left:3px solid var(--kp-dkgold); box-shadow:0 1px 2px rgba(0,0,0,.07);
  min-width:0;
}
.kp-kpi__l{
  display:block; font-size:10.5px; color:var(--kp-dim); text-transform:uppercase; letter-spacing:.04em;
}
.kp-kpi__v{
  display:block; margin-top:1px; font:700 17px/1.25 var(--font-ui),sans-serif;
  color:var(--kp-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kp-kpi.ok  { border-left-color:var(--kp-green); } .kp-kpi.ok  .kp-kpi__v{ color:var(--kp-green); }
.kp-kpi.bad { border-left-color:var(--kp-rd); }    .kp-kpi.bad .kp-kpi__v{ color:var(--kp-rd); }
.kp-kpi.warn{ border-left-color:var(--kp-yellow); }.kp-kpi.warn .kp-kpi__v{ color:var(--kp-yellow); }

/* ------------------------------------------------------ knappar */

.kp-actions{ display:flex; gap:6px; margin:0 0 8px; flex-wrap:wrap; }
.kp-btn{
  display:inline-flex; align-items:center; gap:6px; flex:1 1 auto; justify-content:center;
  min-height:38px; padding:0 16px; border-radius:5px; border:0;
  background:var(--kp-alt); color:var(--kp-txt);
  font:700 13px/1 var(--font-ui),sans-serif; cursor:pointer;
  transition:filter .12s, transform .08s;
}
.kp-btn:active{ transform:scale(.97); }
.kp-btn:disabled{ opacity:.5; cursor:default; }
.kp-btn:hover:not(:disabled){ filter:brightness(.93); }
.kp-btn--primary{ background:var(--kp-red); color:#fff; }
.kp-btn--utfall{ background:var(--kp-gold); color:var(--kp-hdr); }
.kp-btn--send{ background:var(--kp-green); color:#fff; }
.kp-btn--ghost{
  flex:0 0 auto; min-width:38px; background:var(--kp-card); color:var(--kp-dim);
  text-decoration:none; border:1px solid var(--kp-bdr);
}
.kp-btn.is-loading{ opacity:.85; }

.kp-stamps{
  display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 10px; padding:4px 2px;
  font-size:11px; color:var(--kp-dim);
}
.kp-stamps b{ color:var(--kp-txt); font-weight:600; }

/* -------------------------------------------------------- flikar */

.kp-tabs{
  display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--kp-card); border:1px solid var(--kp-bdr); border-radius:6px 6px 0 0;
  padding:4px; margin-bottom:0;
}
.kp-tab{
  padding:7px 16px; background:none; color:var(--kp-dim); border:0; border-radius:4px;
  cursor:pointer; font:600 12.5px/1 var(--font-ui),sans-serif; white-space:nowrap;
  border-bottom:2px solid transparent; transition:.12s;
}
.kp-tab:hover{ color:var(--kp-txt); }
.kp-tab.is-active{ background:var(--kp-red); color:#fff; font-weight:700; border-bottom-color:var(--kp-gold); }

.kp-panel{
  display:none; background:var(--kp-card); border:1px solid var(--kp-bdr); border-top:0;
  border-radius:0 0 6px 6px; padding:12px; margin-bottom:14px;
}
.kp-panel.is-active{ display:block; }
.kp-panel .kp-tablewrap{ border:1px solid var(--kp-bdr); }

.kp-grid{ display:grid; gap:12px; }
.kp-side{ display:grid; gap:10px; align-content:start; }

/* ------------------------------------------------------ PAC-kort */

.kp-pac__box{
  position:relative; overflow:hidden;
  border:3px solid var(--kp-bdr); border-radius:8px;
  padding:16px 14px; background:var(--kp-card); text-align:center;
}
.kp-pac__box.is-ok  { border-color:var(--kp-green); }
.kp-pac__box.is-bad { border-color:var(--kp-rd); }
.kp-pac__box > *{ position:relative; z-index:1; }
.kp-pac__box canvas.kp-fw{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
}
.kp-pac__status{ font:900 20px/1.15 var(--font-ui),sans-serif; color:var(--kp-dim); }
.kp-pac__box.is-ok  .kp-pac__status{ color:var(--kp-green); }
.kp-pac__box.is-bad .kp-pac__status{ color:var(--kp-rd); }
.kp-pac__diff{
  font:900 32px/1.15 var(--kp-mono); margin:2px 0 12px; color:var(--kp-txt);
}
.kp-pac__box.is-ok  .kp-pac__diff{ color:var(--kp-green); }
.kp-pac__box.is-bad .kp-pac__diff{ color:var(--kp-rd); }
.kp-pac__rows{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr));
  gap:8px; text-align:center; font-size:13px;
}
.kp-pac__rows--ni{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--kp-bdr);
}
.kp-pac__rows > div > span{ display:block; color:var(--kp-dim); font-size:11.5px; margin-bottom:2px; }
.kp-pac__rows > div > b{ font:700 15px/1.2 var(--font-ui),sans-serif; color:var(--kp-txt); }
.kp-pac__rows b.ok { color:var(--kp-green); }
.kp-pac__rows b.bad{ color:var(--kp-rd); }
.kp-pac__hint{
  margin-top:12px; padding:9px 12px; border-radius:5px; text-align:left;
  background:rgba(202,138,4,.10); color:#7a5a00; font-size:12.5px; line-height:1.5;
}
.kp-pac__hint b{ color:var(--kp-txt); }
.kp-pac--compact{ margin-bottom:10px; }
.kp-pac--compact .kp-pac__box{ padding:12px; }
.kp-pac--compact .kp-pac__diff{ font-size:24px; margin-bottom:8px; }

/* --------------------------------------------------------- kort */

.kp-card{
  background:var(--kp-card); border:1px solid var(--kp-bdr); border-radius:6px;
  padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.kp-card__title{
  font:700 11.5px/1.2 var(--font-ui),sans-serif; color:var(--kp-red);
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:9px;
}
.kp-field{ display:block; margin-bottom:8px; }
.kp-field > span{ display:block; font-size:11.5px; color:var(--kp-dim); margin-bottom:3px; }
.kp-field input{
  width:100%; min-height:36px; padding:6px 10px; border-radius:4px;
  border:1px solid var(--kp-bdr); background:#fff; color:var(--kp-txt);
  font:600 14px/1.2 var(--kp-mono);
}
.kp-field input:focus{ outline:none; border-color:var(--kp-red); }
.kp-hint{ margin:2px 0 0; font-size:11px; color:var(--kp-dim); line-height:1.45; }

.kp-kv{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:2px 0; }
.kp-kv span{ color:var(--kp-dim); }
.kp-kv b{ font:600 13px/1.2 var(--kp-mono); color:var(--kp-txt); }
.kp-kv b.ok { color:var(--kp-green); }
.kp-kv b.bad{ color:var(--kp-rd); }
.kp-kv--top{ border-top:1px solid var(--kp-bdr); margin-top:5px; padding-top:6px; }

/* ------------------------------------------------------ tabeller */

.kp-tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--kp-bdr); border-radius:6px; background:var(--kp-card);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.kp-tablewrap table{
  width:100%; border-collapse:collapse; font:12.5px/1.3 var(--font-ui),sans-serif;
}
/* INGET forcerat min-width här längre — tabellen ska krympa till sitt
   eget innehåll (white-space:nowrap på cellerna räcker för att hålla
   kolumnerna hela) och bara falla tillbaka på sidledig scroll om skärmen
   verkligen tar slut, i stället för att som förr tvinga fram 1180px scroll
   även när kolumnerna gott och väl fick plats på en vanlig laptop. */
.kp-tablewrap th{
  position:sticky; top:0; z-index:2;
  background:var(--kp-hdr); color:var(--kp-hdrtxt);
  font:700 11px/1.2 var(--font-ui),sans-serif; letter-spacing:.01em;
  padding:4px 8px; text-align:left; white-space:nowrap;
}
.kp-tablewrap td{
  padding:2px 8px; border-bottom:1px solid var(--kp-bdr);
  color:var(--kp-txt); white-space:nowrap;
}
.kp-tablewrap th.r, .kp-tablewrap td.r{ text-align:right; }
.kp-tablewrap tbody tr:nth-child(even) td{ background:var(--kp-zebra); }
.kp-tablewrap tbody tr:hover td{ background:rgba(218,41,28,.045); }
.kp-tablewrap td.dim{ color:var(--kp-dim); }
.kp-tablewrap td.ok { color:var(--kp-green); }
.kp-tablewrap td.bad{ color:var(--kp-rd); }
.kp-tablewrap tr.is-weekend td{ background:var(--kp-wknd) !important; }
.kp-tablewrap tr.is-future td{ opacity:.5; }

.kp-pnl__name{ text-align:left; white-space:normal !important; min-width:190px; }
.kp-pnl__sec td{
  background:var(--kp-alt); color:var(--kp-red);
  font:700 11px/1.3 var(--font-ui),sans-serif; letter-spacing:.03em; text-transform:uppercase;
  padding:5px 8px;
}
.kp-pnl__row--head td{ font-weight:800; background:var(--kp-alt); }
.kp-pnl__row--sub  td{ font-weight:700; color:var(--kp-dim); border-top:1px solid var(--kp-bdr); }
.kp-pnl__row--head.is-ok  td{ background:rgba(22,163,74,.10); }
.kp-pnl__row--head.is-bad td{ background:rgba(220,38,38,.08); }
.kp-pnl__row--line .kp-pnl__name{ padding-left:20px; }
.kp-pnl__split{ border-left:2px solid var(--kp-red); }
.kp-pnl__row.is-expandable{ cursor:pointer; }
.kp-pnl__caret{ color:var(--kp-dim); margin-left:5px; font-size:11px; }
.kp-pnl__unit td{
  background:rgba(0,0,0,.02); color:var(--kp-dim); font-size:11.5px;
  padding-top:2px; padding-bottom:2px;
}
.kp-pnl__unit .kp-pnl__name{ padding-left:30px; }
.kp-pnl__desc td{
  white-space:normal; font:12px/1.5 var(--font-ui),sans-serif;
  color:var(--kp-dim); background:rgba(202,138,4,.06); padding:8px 12px;
}
.kp-pnl__foot td{ color:var(--kp-dim); font-size:11px; text-align:right; padding:6px 8px; }

.kp-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-right:5px; border-radius:50%;
  background:var(--kp-dim); color:#fff; font:700 9px/1 var(--font-ui),sans-serif;
  cursor:help; vertical-align:1px; border:0;
}

.kp-day__wk{ width:30px; color:var(--kp-dim) !important; font-size:10.5px; font-weight:700; }
/* Hela veckodagsnamnet ("Torsdag") och hela datumet ("2026-09-24") —
   bredare än originalets ihopklämda "Tor 24/09", så kolumnen behöver
   mer plats för att inte radbryta. */
.kp-day__name{ text-align:left; min-width:150px; }
.kp-day__name b{ font-weight:700; }
.kp-day__name span{ margin-left:6px; color:var(--kp-dim); font-size:11px; }
.kp-day__tot td{
  background:var(--kp-alt); font-weight:800; border-top:2px solid var(--kp-red);
  border-bottom:0; position:sticky; bottom:0;
}

/* Jämförelsetabellen: originalets fjorton kolumner kräver den tätaste
   packningen i hela modulen — 2px lodrätt/3px vågrätt, aldrig 5-8px som
   resten av appens tabeller. Tunna kolumngrupps-avdelare i stället för
   tjocka. PAC-rutan och McFeedback bor i en sidokolumn bredvid tabellen
   (.kp-grid--cmp nedan) — sidan har numera hela skärmbredden att röra sig
   på (se body:has(.kp-scope) bland brytpunkterna), så tabellen ryms ändå
   utan scroll trots sidokolumnen. */
.kp-cmp{ font-size:11px !important; }
.kp-cmp th, .kp-cmp td{ padding:2px 4px !important; }
.kp-cmp__head{
  text-align:center !important; font-size:9.5px !important; letter-spacing:.05em; padding:4px 6px !important;
}

.kp-cmp__head--bud { color:var(--kp-gold); }
.kp-cmp__head--act { color:#7ee0a0; }
.kp-cmp__head--diff{ color:#9fd3ff; }
.kp-cmp__edge{ border-right:1px solid var(--kp-bdr); }

.kp-tag{
  display:inline-block; padding:1px 7px; border-radius:9px;
  font:700 9.5px/1.6 var(--font-ui),sans-serif; letter-spacing:.02em;
}
.kp-tag--act{ background:rgba(22,163,74,.14); color:var(--kp-green); }
.kp-tag--bud{ background:rgba(255,199,44,.25); color:var(--kp-dkgold); }

.kp-toggle{
  display:block; width:100%; margin-top:8px; min-height:34px;
  border:1px dashed var(--kp-bdr); border-radius:5px;
  background:none; color:var(--kp-dim); cursor:pointer;
  font:600 12px/1 var(--font-ui),sans-serif;
}
.kp-toggle:hover{ background:var(--kp-alt); }

/* --------------------------------------------------- veckodagar */

.kp-weekdays{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.kp-wd{ padding:9px 11px; }
.kp-wd__head{
  font:700 12px/1.2 var(--font-ui),sans-serif; color:var(--kp-red);
  margin-bottom:5px; letter-spacing:.01em;
}
.kp-wd__row{
  display:grid; grid-template-columns:1fr auto 42px; gap:8px; align-items:baseline;
  font:11.5px/1.65 var(--kp-mono); color:var(--kp-dim);
  border-bottom:1px solid var(--kp-bdr); padding:1px 0;
}
.kp-wd__row b{ text-align:right; color:var(--kp-txt); font-weight:700; }
.kp-wd__row--avg{
  margin-top:3px; padding-top:4px; border-top:1px solid var(--kp-red); border-bottom:0;
  color:var(--kp-txt); font-weight:700;
}

/* McFeedback-kortet bor i en smal sidokolumn (~300px) bredvid
   jämförelsetabellen — samma stapel av fält, en under den andra, som
   originalets .cd i sin sidokolumn. Att i stället lägga fälten i ett
   2- eller 4-kolumners rutnät (som här förut) klämmer varje input till
   under 70px, för smalt för tal som "480" eller "54,9". */
.kp-ptw{ margin-top:12px; }
.kp-ptw__grid{ display:block; }

/* --------------------------------------------- inställningsvyn */

/* th var text-align:right men td:s inputfält (fast 82px, floats till
   cellens vänsterkant i en bredare kolumn) hamnade då aldrig under sin
   egen rubrik. Centrerat i stället — rubrik och inputfält radar upp sig
   lodrätt, kolumn för kolumn. */
.kp-set-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.kp-set-table th{
  font:700 10.5px/1.2 var(--font-ui),sans-serif; text-transform:uppercase; letter-spacing:.03em;
  color:var(--kp-hdrtxt); background:var(--kp-hdr); text-align:center; padding:5px 6px; white-space:nowrap;
}
.kp-set-table th:first-child{ text-align:left; }
.kp-set-table td{ padding:3px 6px; border-bottom:1px solid var(--kp-bdr); text-align:center; }
.kp-set-table tbody tr:nth-child(even) td{ background:var(--kp-zebra); }
.kp-set-table td:first-child{ color:var(--kp-txt); font-weight:600; text-align:left; }
.kp-set-table input{
  width:82px; min-height:32px; padding:4px 7px; border-radius:4px; text-align:right;
  border:1px solid var(--kp-bdr); background:#fff; color:var(--kp-txt);
  font:600 12px/1 var(--kp-mono);
}
.kp-set-table input:focus{ outline:none; border-color:var(--kp-red); }
.kp-set-desc{ display:grid; gap:10px; }
.kp-set-desc__row > span{
  display:block; font:600 12px/1.3 var(--font-ui),sans-serif; color:var(--kp-txt); margin-bottom:4px;
}
.kp-set-desc textarea{
  width:100%; min-height:64px; padding:7px 10px; border-radius:5px;
  border:1px solid var(--kp-bdr); background:#fff; color:var(--kp-txt);
  font:12px/1.5 var(--font-ui),sans-serif; resize:vertical;
}
.kp-set-desc textarea:focus{ outline:none; border-color:var(--kp-red); }

/* ----------------------------------------------------- brytpunkter

   Desktop är förstahandsmålet — brytpunkten för sidopanelen ligger
   därför lägre (900px) än appens vanliga 1024px, så att layouten så
   snart som möjligt blir originalets tvåkolumnslayout. Mobilstilarna
   nedanför är en enkel, fungerande nedbrytning, inte en finputsad
   egen design. */

@media (max-width: 899px){
  .kp-hide-sm{ display:none !important; }
  .kp-scope{ padding:10px; border-radius:0; margin:0 calc(var(--pad) * -1); }
}

@media (min-width: 560px){
  .kp-kpis{ grid-template-columns:repeat(4,1fr); }
  .kp-weekdays{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width: 900px){
  .kp-grid{ grid-template-columns:minmax(0,760px) 300px; align-items:start; }
  .kp-main{ order:1; min-width:0; }
  .kp-side{ order:2; position:sticky; top:12px; }
  .kp-kpis{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
  .kp-weekdays{ grid-template-columns:repeat(4,1fr); }
  .kp-btn{ flex:0 0 auto; }

  /* Jämförelsetabellen (fjorton kolumner) ska få så mycket bredd den kan —
     till skillnad från P&L-rutans huvudkolumn, som originalet höll fast vid
     650px, låter vi den här växa fritt. Sidan har hela skärmbredden att
     röra sig på (se body:has(.kp-scope) nedan), så en 300px sidokolumn för
     PAC-rutan/McFeedback tränger inte undan tabellen. */
  .kp-grid--cmp{ grid-template-columns:minmax(0,1fr) 300px; }
}

/* ------------------------------------------------------------
   Full bredd på desktop.

   Resten av appen håller innehållet till max 1080-1180px brett
   (.wrap i appens allmänna CSS) — en medveten gräns för att
   uppgiftsrader och checklistor inte ska bli oläsligt långa på en
   bred skärm. P&L Prognos är motsatsen: en tät rapport med en
   tabell på fjorton kolumner, som VILL ha varenda tillgänglig
   pixel. body:has(.kp-scope) gör att den här sidan (och dess
   inställningsvy) breder ut sig ända ut mot skärmkanten bortom
   sidomenyn, utan att röra bredden på någon annan sida i appen. */
@media (min-width: 1024px){
  body:has(.kp-scope) .wrap{
    max-width:none;
    margin-left:var(--nav-w);
    margin-right:0;
  }
}

/* ==================================================================
   Tävlingar — startsidans ställning + adminsidans produktväljare.
   Se app/competitions.php. Skärmvyn har egen CSS inline
   (app/views/competition_screen.php).
   ================================================================== */

.comp-live{ margin:0 0 14px; }
.comp-card{ padding:14px 14px 8px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.10), var(--card) 60%); }
.comp-card + .comp-card{ margin-top:10px; }
.comp-card__head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.comp-card__icon{ display:inline-flex; width:38px; height:38px; flex:0 0 auto; align-items:center;
  justify-content:center; border-radius:12px; color:var(--gold); background:rgba(var(--accent-rgb),.14); }
.comp-card__title{ margin:0; font-size:18px; line-height:1.2; }
.comp-card__sub{ display:block; margin-top:2px; font:500 12.5px/1.35 var(--font-ui),sans-serif; color:var(--dim); }

.comp-table{ width:100%; border-collapse:collapse; font:500 14px/1.3 var(--font-ui),sans-serif;
  font-variant-numeric:tabular-nums; }
.comp-table th{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); text-align:right; padding:6px 8px; border-bottom:1px solid var(--line); }
.comp-table td{ text-align:right; padding:8px; color:var(--cream);
  border-bottom:1px solid rgba(var(--tint-rgb),.06); }
.comp-table tr:last-child td{ border-bottom:0; }
.comp-table .t{ text-align:left; }
.comp-table .comp-rank{ width:34px; text-align:center; font-weight:700; color:var(--dim); }
.comp-table .comp-upt{ font-weight:700; }
.comp-table tr.is-top1 .comp-rank,
.comp-table tr.is-top1 .comp-upt{ color:var(--gold); }
.comp-table tr.is-top1 td{ background:rgba(var(--accent-rgb),.10); }
.comp-table tr.is-mine td.t{ font-weight:700; }
.comp-table tr.is-mine td.t::after{ content:" · du"; font-weight:500; color:var(--dim); font-size:12px; }

.comp-tag--past{ opacity:.6; }
.comp-actions{ display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.comp-actions form{ margin:0; }

.comp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.comp-chip{ border:1px solid var(--line); background:rgba(var(--accent-rgb),.12); color:var(--cream);
  border-radius:999px; padding:4px 10px; font:500 12.5px var(--font-ui),sans-serif; cursor:pointer; }
.comp-picker{ margin-top:6px; max-height:260px; overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:12px; }
.comp-pick{ display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer;
  border-bottom:1px solid rgba(var(--tint-rgb),.06); font-size:14px; }
.comp-pick[hidden]{ display:none; }
.comp-pick span:first-of-type{ flex:1; min-width:0; }
.comp-pick input{ flex:0 0 auto; }
.comp-row{ flex-wrap:wrap; }
.comp-row .row__main{ flex:1 1 100%; }
.comp-row .comp-actions{ flex:1 1 100%; justify-content:flex-end; margin-top:8px; }
.comp-rest-all{ float:right; text-transform:none; letter-spacing:0; }
.comp-rest-all .linkbtn{ background:none; border:0; padding:0; color:var(--gold); font:600 12px var(--font-ui),sans-serif; cursor:pointer; }
.comp-rest{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px; margin-top:6px; }
.comp-rest__item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; font-size:14px; cursor:pointer; }
.comp-rest__item span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ==================================================================
   Tävlingar — animerad resultattabell i appen (startsidan +
   Tävlingsresultat). Ritas av competitions.js; samma känsla som
   skärmvyn men i appens tema (tokens), så den fungerar i alla teman.
   ================================================================== */
.cb{ --cb-row:46px; position:relative; }
.cb-cols,
.cb-row{ display:grid; grid-template-columns:40px minmax(0,1fr) 70px 58px; align-items:center; }
.cb-cols{ padding:0 10px 6px; font:600 10.5px var(--font-ui),sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.cb-cols span:first-child{ text-align:center; }
.cb-cols span:nth-child(n+3){ text-align:right; }
.cb-board{ position:relative; transition:height .4s ease; }
.cb-row{
  position:absolute; left:0; right:0; top:0; height:calc(var(--cb-row) - 5px);
  padding:0 10px; border-radius:12px; overflow:hidden;
  background:rgba(var(--tint-rgb),.05);
  font:600 14.5px var(--font-ui),sans-serif; color:var(--cream);
  font-variant-numeric:tabular-nums;
  transition:transform .8s cubic-bezier(.3,1.25,.4,1), background-color .4s;
}
.cb-row > *{ position:relative; z-index:2; }
.cb-row > .cb-bar{
  position:absolute; z-index:0; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.06), rgba(var(--accent-rgb),.16));
  transition:width 1.2s cubic-bezier(.2,.8,.2,1);
}
.cb-row.is-enter{ animation:cbIn .55s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes cbIn{ from{ opacity:0; margin-left:-24px; margin-right:24px; } }
.cb-rank{ display:grid; place-items:center; }
.cb-medal{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font:800 13px var(--font-ui),sans-serif; color:var(--dim); background:rgba(var(--tint-rgb),.07);
}
.cb-name{ min-width:0; display:flex; align-items:center; gap:6px; padding-left:6px; white-space:nowrap; overflow:hidden; }
.cb-nm{ overflow:hidden; text-overflow:ellipsis; }
.cb-upt,.cb-sold{ text-align:right; }
.cb-upt{ font-weight:800; }
.cb-sold{ color:var(--dim); font-weight:500; }

.cb-row.p1{ background:rgba(var(--accent-rgb),.12); box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.55); }
.cb-row.p1 > .cb-bar{ background:linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.32)); }
.cb-row.p1 .cb-upt{ color:var(--gold); }
.cb-row.p1::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.2) 50%, transparent 65%);
  transform:translateX(-120%); animation:cbSweep 5s ease-in-out 2s infinite;
}
@keyframes cbSweep{ 0%,60%{ transform:translateX(-120%); } 90%,100%{ transform:translateX(120%); } }
.cb-row.p1 .cb-medal{ color:#3A2600; background:radial-gradient(circle at 35% 30%, #FFF1B8, #FFC72C 45%, #C98A00); box-shadow:0 0 10px rgba(255,199,44,.55); }
.cb-row.p2 .cb-medal{ color:#262A30; background:radial-gradient(circle at 35% 30%, #fff, #E3E7EE 45%, #9AA3AF); }
.cb-row.p3 .cb-medal{ color:#3A1E08; background:radial-gradient(circle at 35% 30%, #FFD8B0, #E09A5C 45%, #9A5A26); }

.cb-crown{ display:inline-block; width:17px; height:13px; flex:0 0 auto; color:var(--gold);
  filter:drop-shadow(0 0 3px rgba(255,199,44,.6)); transform-origin:50% 90%; animation:cbCrown 2.8s ease-in-out infinite; }
.cb-crown svg{ width:100%; height:100%; display:block; }
.cb-crown.is-drop{ animation:cbCrownDrop .9s cubic-bezier(.3,1.6,.5,1) both, cbCrown 2.8s ease-in-out .9s infinite; }
@keyframes cbCrown{ 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg) translateY(-1px); } }
@keyframes cbCrownDrop{ from{ transform:translateY(-120%) scale(1.8); opacity:0; } }

.cb-row.is-mine{ box-shadow:inset 0 0 0 2px var(--gold); }
.cb-you{ flex:0 0 auto; font:800 9.5px var(--font-ui),sans-serif; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:99px; background:var(--gold); color:var(--on-accent, #1A1300); }

.cb-row.is-bump{ animation:cbBump 1.2s ease; }
@keyframes cbBump{ 15%{ background-color:rgba(61,220,132,.24); } }
.cb-row > .cb-plus{ position:absolute; right:66px; top:10%; z-index:3; font:800 12px var(--font-ui),sans-serif; color:#2FBF6E;
  animation:cbPlus 1.8s ease-out forwards; pointer-events:none; }
@keyframes cbPlus{ from{ opacity:0; transform:translateY(20%); } 20%{ opacity:1; } to{ opacity:0; transform:translateY(-120%); } }

.cb-empty{ padding:14px 10px; color:var(--dim); font-size:13.5px; }

/* Konfetti när ledaren byts — inom kortet */
.comp-card{ position:relative; overflow:hidden; }
.cb-confetti{ position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.cb-confetti i{ position:absolute; top:-12px; width:7px; height:11px; border-radius:2px;
  animation:cbFall var(--d) cubic-bezier(.25,.5,.5,1) var(--delay) forwards; }
@keyframes cbFall{ to{ transform:translate(var(--x), 520px) rotate(var(--r)); opacity:0; } }

/* Tävlingskortet: lite mer liv i huvudet också */
.comp-card .comp-card__icon{ position:relative; overflow:hidden; animation:cbBob 3.2s ease-in-out infinite; }
.comp-card .comp-card__icon::after{ content:""; position:absolute; inset:-50%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform:translateX(-100%); animation:cbSheen 4.5s ease-in-out 1s infinite; }
@keyframes cbBob{ 50%{ transform:translateY(-2px) rotate(-3deg); } }
@keyframes cbSheen{ 0%,55%{ transform:translateX(-100%); } 85%,100%{ transform:translateX(100%); } }

@media (max-width:380px){
  .cb-cols,.cb-row{ grid-template-columns:34px minmax(0,1fr) 62px 48px; }
  .cb-row{ font-size:13.5px; }
}
@media (prefers-reduced-motion: reduce){
  .cb-row, .cb-row > .cb-bar, .cb-board{ transition:none; }
  .cb-row.is-enter, .cb-row.p1::after, .cb-crown, .cb-crown.is-drop,
  .comp-card .comp-card__icon, .comp-card .comp-card__icon::after{ animation:none; }
}

/* ============================================================
   UNDERHÅLL — PM-kalendern (/underhall, se app/underhall.php)
   Bygger på samma rader/taggar/kort som resten av appen. Egna delar:
   veckobläddraren, ringen, sektionsgrupperna, kortchipsen och
   PDF-modalen (.pdfv). Röd ton = ej utfört från tidigare veckor.
   ============================================================ */

.pm-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 12px; }
.pm-head__id{ min-width:0; }
.pm-head__id .label{ display:block; margin-bottom:3px; }
.pm-head__id h1{ line-height:1.05; }
.pm-head__links{ display:flex; gap:8px; flex-wrap:wrap; }
.pm-rtabs{ margin:0 0 12px; }
.pm-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#FF7A6E; margin-left:4px; vertical-align:middle; }

/* Veckobläddraren */
.pm-weeknav{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:10px; margin:0 0 12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
}
.pm-weeknav__mid{ flex:1; min-width:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.pm-weeknav__mid strong{ font:800 22px/1.05 var(--font-display),sans-serif; letter-spacing:-.03em; }
.pm-weeknav__mid .dim{ font-size:12px; }
.pm-weeknav__today{
  position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  font:700 11px/1 var(--font-ui),sans-serif; color:var(--on-accent);
  background:linear-gradient(180deg,var(--gold),var(--gold-2)); padding:5px 10px; border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(var(--accent2-rgb),.7); white-space:nowrap;
}

/* Sammanfattning med ring */
.pm-summary{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 14px; margin:18px 0 6px;
  background:linear-gradient(140deg, rgba(var(--accent-rgb),.09), rgba(var(--tint-rgb),.02) 65%);
  border:1px solid rgba(var(--accent-rgb),.26); border-radius:var(--r-lg);
}
.pm-summary__ring{ position:relative; width:64px; height:64px; flex:0 0 auto; }
.pm-summary__ring .pm-ring{ width:64px; height:64px; }
.pm-summary__ring .num{ position:absolute; inset:0; display:grid; place-items:center; font-size:14px; }
.pm-ring{ transform:rotate(-90deg); }
.pm-ring__bg{ fill:none; stroke:rgba(var(--tint-rgb),.1); stroke-width:7; }
.pm-ring__fg{ fill:none; stroke:var(--gold); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .6s var(--ease); }
.pm-summary__text{ flex:1; min-width:150px; display:flex; flex-direction:column; gap:3px; }
.pm-summary__text strong{ font-size:16px; }
.pm-summary__text .dim{ font-size:13px; }
.pm-summary__bad{ color:#FF7A6E; font-weight:600; font-size:13px; }
.pm-filter{ flex:0 0 auto; }

/* Ej utfört från tidigare veckor */
.pm-late{
  margin:14px 0 4px; padding:10px 10px 12px;
  border:1px solid rgba(218,41,28,.45); border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(218,41,28,.13), rgba(218,41,28,.03) 70%);
}
.pm-late .pm-group__head h2{ color:#FF7A6E; display:flex; align-items:center; gap:6px; }
.pm-late .pm-group__head .num{ color:#FF7A6E; }

/* Sektionsgrupper */
.pm-groups{ margin-top:6px; }
.pm-group{ margin:14px 0 0; break-inside:avoid; }
.pm-group[hidden]{ display:none; }
.pm-group__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 2px 7px; }
.pm-group__head h2{ font-size:16px; }
.pm-group.is-complete .pm-group__head h2{ color:var(--green); }
.pm-group.is-complete .pm-group__head h2::after{ content:" ✓"; }
.pm-group.is-complete .pm-group__head .num{ color:var(--green); }

/* Raderna */
.pm-row[hidden]{ display:none !important; }
.pm-eq{
  font:700 10px/1.2 var(--font-ui),sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); margin-bottom:2px;
}
.pm-seq{ font-size:11px; color:var(--dim); margin-left:4px; }
.pm-note{ font-size:12.5px; color:var(--dim); margin-top:5px; line-height:1.4; }
.pm-row .tag svg{ width:10px; height:10px; }
.pm-row--late{ border-color:rgba(218,41,28,.45); background:linear-gradient(140deg, rgba(218,41,28,.10), rgba(var(--tint-rgb),.02) 60%); }
.pm-row--warn{ border-color:rgba(218,41,28,.4); box-shadow:inset 3px 0 0 rgba(218,41,28,.75); }
.pm-row--missed{ opacity:.8; border-style:dashed; border-color:rgba(218,41,28,.4); }
.pm-row--missed .row__title{ text-decoration:line-through; text-decoration-color:rgba(218,41,28,.6); }
.pm-row--planned{ border-style:dashed; }
.pm-row.is-done{ opacity:.62; }
.pm-row.is-done .row__title{ text-decoration:none; }
.pm-missed-mark{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:#FF7A6E; background:rgba(218,41,28,.12); }
.pm-flash{ animation:pm-flash 1.4s var(--ease); }
@keyframes pm-flash{ 0%{ box-shadow:0 0 0 2px var(--gold); } 100%{ box-shadow:0 0 0 0 transparent; } }

/* Kortchips — öppnar underhållskortet i PDF-modalen */
.pm-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.pm-chip{
  appearance:none; cursor:pointer; position:relative;
  display:inline-flex; align-items:center; gap:5px;
  min-height:28px; padding:4px 10px 4px 8px; border-radius:9px;
  background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.32);
  color:var(--gold); font:700 12px/1 "Azeret Mono",ui-monospace,monospace; letter-spacing:-.01em;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.pm-chip::after{ content:""; position:absolute; inset:-4px; }
.pm-chip:active{ transform:scale(.95); background:rgba(var(--accent-rgb),.2); }
.pm-chip svg{ width:13px; height:13px; flex:0 0 auto; }
.pm-chip--missing{ cursor:default; color:var(--dim-2); background:transparent; border-style:dashed; border-color:rgba(var(--tint-rgb),.18); }
.pm-chips--compact{ margin-top:0; }
.pm-chips--compact .pm-chip{ min-height:24px; padding:3px 8px 3px 6px; font-size:11px; }
.pm-chip__open, .pm-chip__x{ appearance:none; border:0; background:none; color:inherit; font:inherit; cursor:pointer; padding:0; }
.pm-chip__x{ margin-left:4px; font-size:15px; line-height:1; opacity:.7; }
@media (hover:hover){ .pm-chip:not(.pm-chip--missing):hover{ background:rgba(var(--accent-rgb),.18); } }

/* Översikt över flera restauranger */
.pm-ov{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:9px; margin-top:4px; }
.pm-ov__card{
  display:flex; flex-direction:column; gap:7px; padding:12px; min-height:118px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--cream);
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.pm-ov__card:active{ transform:scale(.98); }
.pm-ov__card.has-late{ border-color:rgba(218,41,28,.45); }
.pm-ov__card.is-off{ border-style:dashed; opacity:.7; }
.pm-ov__name{ font:800 16px/1.1 var(--font-display),sans-serif; letter-spacing:-.02em; }
.pm-ov__pct{ font-size:26px; line-height:1; color:var(--gold); }
.pm-ov__pct small{ font-size:13px; margin-left:1px; }
.pm-ov__state{ font-size:12px; color:var(--dim); }
.pm-ov__card .tag{ align-self:flex-start; }
@media (hover:hover){ .pm-ov__card:hover{ background:var(--card-2); } }

/* Ej inställd / planerad vecka */
.pm-setup-cta{ text-align:center; padding:26px 18px; margin-top:16px; }
.pm-setup-cta__icon{ width:54px; height:54px; margin:0 auto 10px; border-radius:16px; display:grid; place-items:center; color:var(--gold); background:rgba(var(--accent-rgb),.12); }
.pm-setup-cta h2{ margin-bottom:6px; }
.pm-setup-cta p{ max-width:440px; margin:0 auto 14px; font-size:14px; line-height:1.5; }
.pm-plan-note{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; }
.pm-plan-note svg{ color:var(--gold); flex:0 0 auto; margin-top:2px; }
.pm-plan-note > div{ display:flex; flex-direction:column; gap:3px; font-size:13px; }

/* Utrustning per restaurang */
.pm-eqstate{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; border-color:rgba(218,41,28,.4); }
.pm-eqstate.is-set{ border-color:var(--line); }
.pm-eqstate__text{ display:flex; flex-direction:column; gap:3px; min-width:200px; flex:1; }
.pm-eqstate__text .dim{ font-size:12.5px; line-height:1.4; }
.pm-eqstate__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pm-copy{ display:flex; gap:6px; }
.pm-copy select{ min-height:34px; padding-top:6px; padding-bottom:6px; font-size:13px; max-width:210px; }
.pm-eqgrid{ display:grid; grid-template-columns:1fr; gap:9px; }
.pm-eqgrid .card + .card{ margin-top:0; }
.pm-eqsec{ padding:10px 14px 4px; }
.pm-eqsec__head{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.pm-eqsec__head h2{ font-size:15px; flex:1; }
.pm-eqsec__all{ appearance:none; border:0; background:none; color:var(--gold); font:600 12px/1 var(--font-ui),sans-serif; cursor:pointer; padding:6px 0; }
.pm-eqrow{ display:flex; width:100%; justify-content:space-between; padding:6px 0; border-top:1px solid rgba(var(--tint-rgb),.06); }
.pm-eqrow__name{ display:flex; flex-direction:column; gap:2px; font-size:14px; min-width:0; }
.pm-eqadm{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid rgba(var(--tint-rgb),.06); }
.pm-eqadm.is-off{ opacity:.5; }

/* Historik */
.pm-hfilter{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.pm-hfilter .field{ flex:1 1 150px; margin:0; }
.pm-hweeks{ display:flex; flex-direction:column; gap:6px; }
.pm-hweek{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); color:var(--cream);
}
.pm-hweek.is-empty{ opacity:.55; }
.pm-hweek > svg{ color:var(--dim-2); flex:0 0 auto; }
.pm-hweek__wk{ display:flex; flex-direction:column; gap:1px; width:96px; flex:0 0 auto; }
.pm-hweek__wk strong{ font-size:15px; }
.pm-hweek__bar{ flex:1; height:8px; display:flex; border-radius:999px; overflow:hidden; background:rgba(var(--tint-rgb),.09); min-width:40px; }
.pm-hweek__bar .is-done{ background:var(--green); }
.pm-hweek__bar .is-missed{ background:rgba(218,41,28,.75); }
.pm-hweek__num{ font-size:12px; width:46px; text-align:right; }
.pm-hweek__none{ flex:1; font-size:13px; }
.pm-hweek .tag{ flex:0 0 auto; }
@media (max-width:520px){ .pm-hweek .tag{ display:none; } }
.pm-eqhist-head{ display:flex; flex-direction:column; gap:3px; margin:4px 2px 10px; }
.pm-tl{ position:relative; margin:0 0 14px; padding-left:16px; border-left:2px solid rgba(var(--accent-rgb),.2); margin-left:6px; }
.pm-tl__month{ margin:0 0 8px -16px; padding-left:16px; position:relative; }
.pm-tl__item{ position:relative; margin:0 0 9px; padding:9px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
.pm-tl__dot{ position:absolute; left:-24px; top:14px; width:12px; height:12px; border-radius:50%; background:var(--green); border:2px solid var(--ink); }
.pm-tl__item.is-missed{ border-color:rgba(218,41,28,.4); }
.pm-tl__item.is-missed .pm-tl__dot{ background:#DA291C; }
.pm-tl__item.is-open .pm-tl__dot{ background:var(--gold); }
.pm-tl__when{ font-size:13px; }
.pm-tl__title{ font-size:14px; margin:3px 0 4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pm-bad{ color:#FF7A6E; }

/* Kalenderredigeraren */
.pm-cattabs{ margin:0 0 12px; }
.pm-cattabs .num{ font-size:11px; margin-left:3px; opacity:.75; }
.pm-catbar{ display:flex; gap:8px; margin:0 0 10px; }
.pm-catbar input{ flex:1; min-width:0; }
.pm-catbar select{ flex:0 0 auto; max-width:45%; }
.pm-warn{ display:flex; gap:7px; align-items:flex-start; font-size:12.5px; color:#F2C94C; background:rgba(232,180,0,.1); border:1px solid rgba(232,180,0,.3); border-radius:var(--r); padding:8px 10px; margin:0 0 8px; }
.pm-warn svg{ flex:0 0 auto; margin-top:1px; }
.pm-lead{ font-size:13px; line-height:1.5; margin:0 0 10px; }
.pm-cat{ cursor:pointer; }
.pm-cat[hidden]{ display:none !important; }
.pm-cat--off{ opacity:.5; }
.pm-cat__foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; }
.pm-months{ display:inline-flex; gap:2px; }
.pm-months__d{
  width:14px; height:16px; border-radius:4px; display:grid; place-items:center;
  font:700 8.5px/1 var(--font-ui),sans-serif; color:var(--dim-2); background:rgba(var(--tint-rgb),.05);
}
.pm-months__d.is-on{ color:var(--on-accent); background:var(--gold); }
.pm-upload{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.pm-upload .dim{ font-size:12.5px; }
.pm-upload__row{ display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
.pm-upload__row input[type=text]{ flex:1 1 130px; min-width:0; }
.pm-upload__file{ cursor:pointer; }
.pm-cardrow{ gap:10px; padding:7px 10px; }
.pm-cardrow[hidden]{ display:none; }
.pm-cardrow .pm-chip{ flex:0 0 auto; min-width:86px; }
.pm-cardrow__title{ flex:1; min-width:0; min-height:34px !important; padding:6px 10px !important; font-size:13px !important; background:transparent !important; }
.pm-cardrow__use{ flex:0 0 auto; text-align:right; }
@media (max-width:520px){ .pm-cardrow__use{ display:none; } }
.pm-editor .grid-2{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
.pm-editor [hidden]{ display:none; }
.pm-editor__hint{ font-size:12px; line-height:1.45; margin:4px 0 12px; }
.pm-eqpick, .pm-cardpick, .pm-mchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.pm-eqpick .chip{ min-height:32px; padding:6px 12px; font-size:12.5px; position:relative; }
.pm-mchip{ min-height:32px; padding:6px 11px; font-size:12.5px; position:relative; text-transform:capitalize; }
.pm-linkbtn{ appearance:none; border:0; background:none; color:var(--gold); font:600 12px/1 var(--font-ui),sans-serif; cursor:pointer; padding:4px 0; }

/* PDF-modalen */
.pdfv{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--ink) 96%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .18s var(--ease);
}
.pdfv.is-open{ opacity:1; }
.pdfv[hidden]{ display:none; }
.pdfv__bar{
  display:flex; align-items:center; gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  border-bottom:1px solid var(--line); background:var(--ink-2);
}
.pdfv__id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pdfv__id strong{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdfv__pages{ font-size:11px; color:var(--dim); white-space:nowrap; }
.pdfv__body{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:12px 12px calc(24px + env(safe-area-inset-bottom)); text-align:center; }
.pdfv__page{ display:block; margin:0 auto 12px; background:#fff; border-radius:6px; box-shadow:0 18px 50px -18px rgba(0,0,0,.6); }
.pdfv__spin{ width:40px; height:40px; margin:22vh auto 0; border-radius:50%; border:3px solid rgba(var(--tint-rgb),.15); border-top-color:var(--gold); animation:spin .7s linear infinite; }
.pdfv__err{ margin:18vh auto 0; max-width:320px; color:var(--dim); line-height:1.6; }
.pdfv__err .btn{ margin-top:12px; }
@media (max-width:520px){ .pdfv__pages{ display:none; } }

@media (min-width:1024px){
  .pm-groups{ column-count:2; column-gap:22px; }
  .pm-groups > .empty{ column-span:all; }
  .pm-group{ margin:0 0 18px; display:inline-block; width:100%; }
  .pm-eqgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
  .pm-summary{ padding:14px 18px; }
  .pm-ov{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
  .pdfv{ left:var(--nav-w); }
}
@media (min-width:1500px){
  .pm-eqgrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.pm-dash--late{ border-color:rgba(218,41,28,.5) !important; }
.pm-chip--code{ cursor:default; min-width:52px; justify-content:center; }

/* Underhållskort per modell (Underhåll ▸ Utrustning) */
.pm-models{ margin-top:22px; }
.pm-models__head h2{ display:flex; align-items:center; gap:7px; }
.pm-models__head p{ font-size:13px; line-height:1.5; margin:5px 0 12px; max-width:720px; }
.pm-models__grid{ display:grid; grid-template-columns:1fr; gap:9px; }
.pm-models__grid .card + .card{ margin-top:0; }
.pm-modeltask[hidden]{ display:none; }
.pm-modeltask.is-none{ border-color:rgba(232,180,0,.45); }
.pm-modeltask__title{ font-size:14px; margin:1px 0 9px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pm-modeltask__warn{ display:none; margin:8px 0 0; font-size:12px; color:#F2C94C; }
.pm-modeltask.is-none .pm-modeltask__warn{ display:block; }
.pm-modelchips{ display:flex; flex-direction:column; gap:6px; }
.pm-modelchip{
  display:flex; align-items:stretch; border-radius:11px; overflow:hidden;
  border:1px dashed rgba(var(--tint-rgb),.18); background:transparent; opacity:.6;
  transition:opacity .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.pm-modelchip.is-on{ opacity:1; border-style:solid; border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.09); }
.pm-modelchip__toggle{
  flex:1; min-width:0; appearance:none; border:0; background:none; color:var(--cream); cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:8px 10px; text-align:left; font:inherit;
}
.pm-modelchip__box{
  width:20px; height:20px; flex:0 0 auto; border-radius:6px; display:grid; place-items:center;
  border:1.5px solid rgba(var(--tint-rgb),.3); color:transparent;
}
.pm-modelchip.is-on .pm-modelchip__box{ background:var(--gold); border-color:var(--gold); color:var(--on-accent); }
.pm-modelchip__text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pm-modelchip__text strong{ font-size:12px; color:var(--gold); }
.pm-modelchip:not(.is-on) .pm-modelchip__text strong{ color:var(--dim); text-decoration:line-through; }
.pm-modelchip__text span{ font-size:13.5px; }
.pm-modelchip__open{
  appearance:none; border:0; border-left:1px solid rgba(var(--tint-rgb),.1); background:rgba(var(--tint-rgb),.04);
  color:var(--gold); width:46px; display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
}
.pm-modelchip__open:active{ background:rgba(var(--accent-rgb),.18); }
@media (min-width:1024px){ .pm-models__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; } }
@media (min-width:1500px){ .pm-models__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.pm-cardrow__model{ flex:0 1 220px; min-width:0; min-height:34px !important; padding:6px 10px !important; font-size:13px !important; background:transparent !important; color:var(--gold) !important; }
@media (max-width:520px){ .pm-cardrow{ flex-wrap:wrap; } .pm-cardrow__model{ flex:1 1 40%; } }

/* Testa användare (spegling) — se app/spegling.php */
.sp-row{ width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--cream); gap:12px; }
.sp-row[hidden]{ display:none; }
.sp-row__img{ width:36px; height:36px; border-radius:20%; object-fit:cover; object-position:top; flex:0 0 auto; }
.sp-row > svg{ color:var(--dim); flex:0 0 auto; }
.sp-row .row__title{ display:block; }
.sp-stop{ margin:16px 0 calc(12px + env(safe-area-inset-bottom)); }

/* Notiser: "Skicka till uppföljning" (app/notis_uppfoljning.php). Knappen
   ligger ovanpå notiskortets nedre högra hörn — kortet själv är en länk,
   och en knapp får inte ligga inuti en <a>. */
.note-wrap{ position:relative; }
.note--followable{ padding-bottom:44px; }
.note__follow{
  position:absolute; right:12px; bottom:18px;
  display:inline-flex; align-items:center; gap:6px;
  min-height:28px; padding:5px 11px; border-radius:999px; cursor:pointer;
  background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.32); color:var(--gold);
  font:600 12px/1 var(--font-ui),sans-serif;
  transition:transform .13s var(--ease), background .2s var(--ease);
}
.note__follow::after{ content:""; position:absolute; inset:-6px; }
.note__follow:active{ transform:scale(.96); background:rgba(var(--accent-rgb),.2); }
.note__follow svg{ width:13px; height:13px; }
.note__follow.is-sent{ cursor:default; background:rgba(49,196,107,.12); border-color:rgba(49,196,107,.35); color:var(--green); }
.nf-card .field{ margin:12px 0 10px; }
.nf-note{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); font-size:13px; }
.nf-note span{ color:var(--dim); }
.nf-hint{ font-size:12px; margin:-4px 0 12px; }