/* ============ FogiDesk · the two typefaces, served from this host ============
 *
 * ⚠️ THESE USED TO COME FROM fonts.googleapis.com AND fonts.gstatic.com, WHICH
 *    MEANT EVERY PAGE LOAD TOLD GOOGLE THE READER'S IP ADDRESS.
 *
 * Not a performance note. FogiDesk is the processor for a Danish tenant's case
 * content and the sub-processor list does not name Google, so a font request on
 * every page was a third-party data flow the paperwork did not describe. Self
 * hosting removes it rather than documenting it, which is the cheaper of the
 * two fixes and the better one.
 *
 * It also removes two allowances from the Content-Security-Policy —
 * `style-src https://fonts.googleapis.com` and `font-src https://fonts.gstatic.com`
 * — so the policy is now `'self'` for both. A stylesheet from anywhere else is
 * refused by the browser instead of being trusted because the fonts needed it.
 *
 * Both families are variable and SIL OFL 1.1; the licences ship beside them in
 * fonts/. Latin and latin-ext only: this product is Danish and English, and the
 * cyrillic, greek and vietnamese subsets Google also serves would be 200 KB
 * nobody ever renders. The unicode-range on each face is Google's own, so a
 * character outside latin still falls through to the next family in the stack
 * rather than to a box.
 *
 * font-display: swap, deliberately. Text drawn in the fallback and then
 * corrected is worse-looking than text that appears late, and better than a
 * screen that shows nothing while a font loads.
 */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/inter-latin.woff2?v=1') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/inter-latin-ext.woff2?v=1') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/schibsted-latin.woff2?v=1') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/schibsted-latin-ext.woff2?v=1') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ⚠️ DM MONO IS HERE AND NOT IN operator.css ON PURPOSE. Only the operator
 * console names it (`--op-mono`), and operator.html loads BOTH stylesheets — so
 * declaring it there would have worked, and would have left one page still
 * asking Google for a font while every other page had stopped. One place to
 * look, one place to be wrong. It is a static family rather than variable, so
 * the two weights operator.css actually uses are two faces; nothing asks for a
 * third.
 */
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dmmono-400-latin.woff2?v=1') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dmmono-400-latin-ext.woff2?v=1') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/dmmono-500-latin.woff2?v=1') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/dmmono-500-latin-ext.woff2?v=1') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ FogiDesk · full prototype · v1 design system ============ */
:root{
  --brand:#0E4A8C;
  --brand-600:#0C3F77;
  --brand-700:#0A3462;
  --brand-100:#DCE8F6;
  --brand-50:#EFF4FB;
  --ink:#0F1522;
  --text:#1C2433;
  --text-2:#5A6474;
  --text-3:#666D7D; /* audit: #939CAB -> #7C8494 -> her. Se noten nedenfor. */
  --bg:#F4F5F7;
  --card:#FFFFFF;
  --border:#E6E9EF;
  --border-2:#EEF0F4;

  --green:#15803D;   --green-dot:#22A55E;  --green-bg:#E9F6EF;  --green-br:#CBE9D8;
  --amber:#A16003;   --amber-dot:#EFA00B;  --amber-bg:#FCF3E1;  --amber-br:#F3E1BB;
  --red:#BE2D20;     --red-dot:#E2483A;    --red-bg:#FCEDEA;    --red-br:#F5D2CC;

  --shadow-sm: 0 1px 2px rgba(15,21,34,.05);
  --shadow-md: 0 1px 2px rgba(15,21,34,.05), 0 10px 30px -14px rgba(15,21,34,.16);
  --shadow-lg: 0 2px 4px rgba(15,21,34,.06), 0 24px 60px -24px rgba(15,21,34,.24);

  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --font-ui:"Inter",-apple-system,system-ui,sans-serif;
  --font-display:"Schibsted Grotesk",var(--font-ui);
}

/* ⚠️ --text-3 WAS LIFTED TWICE AND STILL DID NOT PASS.
 *
 * #939CAB, then #7C8494 under an audit whose note says "for WCAG-kontrast på
 * hvid" — and on white it reached 3.76:1, on --bg 3.45:1. AA wants 4.5:1 for
 * text under 18.66px, and every single thing wearing this token is small: the
 * nav labels at 10.5px, the sidebar user at 11.5px, the route line at 11px.
 * The measurement was taken against the wrong background and against the wrong
 * threshold, so a fix that felt done was 24% short of its own goal.
 *
 * #666D7D is 4.75:1 on --bg and 5.19:1 on --card, same hue and saturation, and
 * still clearly a step lighter than --text-2 (5.48:1), so the three-step ramp
 * this palette is built on survives. Dark mode already passed at 5.71 to 6.22
 * and is untouched.
 *
 * check.php parses these tokens and measures them, both themes, both
 * backgrounds. A future nudge that drops one under 4.5 fails the build rather
 * than shipping, which is what the two previous lifts needed and did not have.
 */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--font-ui);
  font-size:14px; line-height:1.5;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--brand-100)}
:focus-visible{outline:2px solid rgba(14,74,140,.45);outline-offset:2px;border-radius:6px}

/* ============ Shell ============ */
.shell{display:flex;min-height:100vh}
.side{
  width:242px; flex-shrink:0;
  background:#FBFBFC;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  padding:18px 12px 14px;
}
.side-logo{display:flex;align-items:center;gap:11px;padding:2px 8px 16px}
.side-logo>img{width:38px;height:38px;object-fit:contain;flex:0 0 38px}
/* The square in the corner. Its gradient was two more hardcoded blues, so a
   workspace that had chosen its own colour still had somebody else's mark at
   the top of every screen. Derived now, like everything else that carries the
   brand. */
.logo-mark{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(145deg,var(--brand), var(--brand-700));
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px -2px rgba(15,21,34,.34);
  overflow:hidden;
}
/* A published logo replaces the gradient rather than sitting on it: a mark
   drawn for white paper on a coloured square is the wrong mark. */
.logo-mark.haslogo{background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.logo-mark img{width:78%;height:78%;object-fit:contain;display:block}
.logo-txt b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.logo-txt span{font-size:11.5px;color:var(--text-3);font-weight:500;letter-spacing:.01em}
.side-nav{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px}
.nav-group{margin-top:14px}
.nav-label{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:0 10px 6px}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--text-2);
  transition:background .15s ease,color .15s ease;
  position:relative;text-align:left;
}
.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.75;transition:opacity .15s}
.nav-item:hover{background:#F1F2F5;color:var(--ink)}
.nav-item:hover svg{opacity:1}
.nav-item.active{background:var(--brand-50);color:var(--brand);font-weight:600}
.nav-item.active svg{opacity:1}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;
  background:var(--brand);border-radius:0 3px 3px 0;
}
.nav-badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--amber-dot);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.nav-badge.zero{background:var(--border);color:var(--text-3)}
.nav-cnt{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.side-foot{margin-top:auto;padding-top:12px}
.side-user{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  transition:background .15s;cursor:pointer;
}
.side-user:hover{background:#F1F2F5}
.side-user .avatar{width:32px;height:32px;font-size:12px}
.side-user b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
.side-user span{font-size:11.5px;color:var(--text-3)}
.powered{
  display:flex;align-items:center;gap:7px;
  padding:12px 10px 2px;margin-top:6px;border-top:1px solid var(--border-2);
  font-size:11px;color:var(--text-3);font-weight:500;letter-spacing:.01em;
}
.powered i{width:8px;height:8px;border-radius:3px;background:#104925;display:inline-block}
/* The operating firm's own mark, in place of the dot. Bounded on both axes and
   `contain`, because this is somebody else's artwork at a size we do not
   control: a tall logo must not push the sidebar footer open, and a wide one
   must not crop to nonsense. */
.powered-mark{width:16px;height:16px;object-fit:contain;flex-shrink:0;border-radius:3px}

/* --- Topbar --- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:60px;flex-shrink:0;
  display:flex;align-items:center;gap:12px;
  padding:0 26px;
  background:rgba(244,245,247,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-2);
  position:sticky;top:0;z-index:40;
}
.search{
  display:flex;align-items:center;gap:9px;
  width:340px;height:38px;padding:0 13px;
  background:var(--card);border:1px solid var(--border);border-radius:11px;
  color:var(--text-3);
  transition:box-shadow .18s,border-color .18s,background .15s;
  cursor:pointer;text-align:left;
}
.search:hover{border-color:#CBD6E4;background:#FDFDFE}
/* The magnifier never gives way. On a phone the pill is squeezed to about
   40px and the flex algorithm took the width from the icon first, so every
   console showed a blank white box where search is (wave 2 walk D2). */
.search svg{flex-shrink:0}
.search .ph{flex:1;font-size:13.5px;color:var(--text-3)}
.search kbd{
  font-family:var(--font-ui);font-size:10.5px;color:var(--text-3);
  border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:#FAFAFB;
}
.topbar .grow{flex:1}
.icon-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:var(--text-2);border:1px solid transparent;position:relative;
  transition:background .15s,border-color .15s,color .15s;
}
.icon-btn:hover{background:var(--card);border-color:var(--border);color:var(--ink)}
#langBtn{
  width:56px;padding:0 6px;cursor:pointer;
  background:transparent;font:700 11px/1 var(--font-ui);letter-spacing:.02em;
}
#langBtn:hover{background:var(--card)}
.icon-btn .dot{
  position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--red-dot);border:1.5px solid var(--bg);
}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,#3D6FB0,#0E4A8C);
  color:#fff;font-size:12px;font-weight:650;
  display:grid;place-items:center;letter-spacing:.02em;flex-shrink:0;
}
.avatar.mk{background:linear-gradient(145deg,#2B8A5C,#104925)}
.avatar.jf{background:linear-gradient(145deg,#8A6ED1,#5B3FA8)}
.avatar.mh{background:linear-gradient(145deg,#C2703E,#8F4A1E)}
.avatar.ld{background:linear-gradient(145deg,#4A7B9D,#2C5670)}
.avatar.sys{background:#EDF0F4;color:var(--text-3)}

/* ============ Buttons & chips ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:11px;
  font-size:13.5px;font-weight:600;letter-spacing:.005em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s,color .16s,opacity .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn.sm svg{width:13px;height:13px}
.btn-primary{
  background:var(--brand);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(10,52,98,.3), 0 6px 16px -8px rgba(10,52,98,.5);
}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(10,52,98,.28),0 10px 22px -8px rgba(10,52,98,.55)}
.btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#D5DAE2;background:#FCFCFD;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-danger{background:var(--card);border:1px solid var(--border);color:var(--red);box-shadow:var(--shadow-sm)}
.btn-danger:hover{border-color:var(--red-br);background:var(--red-bg);transform:translateY(-1px)}
.btn-success{background:var(--green);color:#fff;pointer-events:none}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.sm{height:32px;padding:0 13px;font-size:12.5px;border-radius:9px}
.btn .spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
  /* ⚠️ A CHIP NEVER PAINTS OUTSIDE WHAT HOLDS IT.
     white-space:nowrap plus a fixed grid column and no bound is how "Open ·
     awaiting assignment" — 193px of it — came to sit across the priority in a
     168px cell on every case list. The label is its own element so it can
     ellipsis (a bare text node cannot), and the full wording stays in the
     title attribute. The columns are sized so this is a backstop rather than
     the normal case.

     ⚠️ overflow:hidden BELONGS ON THE CHIP AS WELL AS ON THE LABEL, and for a
     different reason. Roughly ninety chips across the consoles are written
     inline — an invoice state, a plan, a tender — and carry a bare text node
     rather than a label element. max-width alone would clamp the pill and let
     the text keep painting past the end of its own background, which reads
     worse than the overlap being fixed here. This clips those; the ones built
     by statusChip get a proper ellipsis from the rule below. */
  max-width:100%;overflow:hidden;
}
.chip i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.chip-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip.green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-br)}
.chip.green i{background:var(--green-dot)}
.chip.amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-br)}
.chip.amber i{background:var(--amber-dot)}
.chip.red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-br)}
.chip.red i{background:var(--red-dot)}
.chip.blue{background:var(--brand-50);color:var(--brand);border:1px solid var(--brand-100)}
.chip.blue i{background:var(--brand)}
.chip.gray{background:#F2F3F6;color:var(--text-2);border:1px solid var(--border)}
.chip.gray i{background:var(--text-3)}

/* The rest of a list. Sits under the rows, so it reads as part of the table
   rather than as a control bar floating above it. */
.list-more{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 16px;border-top:1px solid var(--border-2);
  font-size:12.5px;color:var(--text-3)}
.list-more button{font-size:12.5px;padding:6px 14px}

/* ============ Content ============ */
.content{padding:26px 26px 60px;max-width:1420px;width:100%;margin:0 auto}
.view{animation:viewIn .4s cubic-bezier(.22,.9,.3,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:cardIn .5s cubic-bezier(.22,.9,.3,1) both;animation-delay:calc(var(--i,0)*26ms)}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{
  font-family:var(--font-display);font-size:26px;font-weight:750;letter-spacing:-.025em;color:var(--ink);
  line-height:1.15;
}
.page-head .sub{margin-top:5px;font-size:13.5px;color:var(--text-2)}
.sub .g{color:var(--green);font-weight:600}
.sub .a{color:var(--amber);font-weight:600}
.sub .r{color:var(--red);font-weight:600}
.page-head .actions{display:flex;gap:9px;align-items:center}
.live{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3);font-weight:500;
}
.live i{
  width:8px;height:8px;border-radius:50%;background:var(--green-dot);position:relative;
}
.live i::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(34,165,94,.4);animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:1}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
/* Five figures in one row (Insight's headline since WP31 added "Came back"). */
.kpis.k5{grid-template-columns:repeat(5,1fr)}
.kpi{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 18px 15px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi .lbl{font-size:12px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:7px}
.kpi .lbl i{width:8px;height:8px;border-radius:50%}
.kpi .val{
  font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  margin-top:6px;line-height:1;font-variant-numeric:tabular-nums;
}
.kpi .val small{font-size:15px;font-weight:600;color:var(--text-3);letter-spacing:0}
.kpi .foot{margin-top:8px;font-size:12px;color:var(--text-3)}
.kpi.k-green .lbl i{background:var(--green-dot)} .kpi.k-green .val{color:var(--green)}
.kpi.k-amber .lbl i{background:var(--amber-dot)} .kpi.k-amber .val{color:#B26205}
.kpi.k-red{border-color:var(--red-br);background:linear-gradient(180deg,#FFF, #FFF9F8)}
.kpi.k-red .lbl i{background:var(--red-dot)} .kpi.k-red .val{color:var(--red)}
.kpi.k-red::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(226,72,58,.16);
}

/* Overview grid */
.ov-grid{display:grid;grid-template-columns:1fr 342px;gap:16px;align-items:start}
@media (max-width:1180px){.ov-grid{grid-template-columns:minmax(0,1fr)}.kpis,.kpis.k5{grid-template-columns:repeat(2,1fr)}.search{width:220px}}
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px 0;flex-wrap:wrap}
.panel-h h2{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.panel-h .hint{font-size:12.5px;color:var(--text-3);margin-top:2px}
.panel-h .r{display:flex;gap:8px;align-items:center}

.pills{display:flex;gap:6px;flex-wrap:wrap;padding:14px 18px 4px}
.pills.bare{padding:0}
.pill{
  height:30px;padding:0 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--text-2);
  transition:all .16s ease;
}
.pill:hover{border-color:#CBD3DE;color:var(--ink)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill .n{opacity:.55;font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}

.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px;padding:14px 18px 18px}
.store{
  position:relative;text-align:left;
  border:1px solid var(--border);border-radius:13px;
  background:linear-gradient(180deg,#FDFDFE,#F8FAF9);
  padding:12px 13px 11px;min-height:96px;
  display:flex;flex-direction:column;
  border-left-width:3px;border-left-color:var(--green-dot);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  cursor:pointer;
}
.store:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#D8DDE5;border-left-color:var(--green-dot)}
.store .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.store .nm{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.005em}
.store .st{font-size:11.5px;color:var(--text-2);margin-top:5px;line-height:1.35}
.store .mt{margin-top:auto;padding-top:7px;font-size:10.5px;color:var(--text-3);display:flex;align-items:center;gap:5px}
.store .mt svg{width:11px;height:11px;opacity:0;transform:translateX(-3px);transition:all .18s ease}
.store:hover .mt svg{opacity:.8;transform:none}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--green-dot);flex-shrink:0;margin-top:3px;position:relative}
.store.amber{background:linear-gradient(180deg,#FFFDF8,#FEF8EA);border-left-color:var(--amber-dot)}
.store.amber:hover{border-left-color:var(--amber-dot)}
.store.amber .sdot{background:var(--amber-dot)}
.store.amber .st{color:#8A5A10;font-weight:600}
.store.red{background:linear-gradient(180deg,#FFFBFA,#FDF0EE);border-left-color:var(--red-dot)}
.store.red:hover{border-left-color:var(--red-dot)}
.store.red .sdot{background:var(--red-dot)}
.store.red .sdot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(226,72,58,.4);animation:pulse 1.8s ease-out infinite;
}
.store.red .st{color:var(--red);font-weight:650}
.legend{
  display:flex;align-items:center;gap:18px;padding:0 18px 16px;
  font-size:12px;color:var(--text-2);flex-wrap:wrap;
}
.legend b{font-weight:600}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .lg i{width:8px;height:8px;border-radius:50%}
.legend .right{margin-left:auto;color:var(--text-3)}

/* Grey and quiet (WP29). Grey is "we know nothing yet", drawn as the absence
   of a colour so it never reads as running; quiet is live but silent, the
   amber edge without the amber fill. */
.store.grey{background:linear-gradient(180deg,#FBFBFC,#F4F5F7);border-left-color:#C3C8D1}
.store.grey:hover{border-left-color:#C3C8D1}
.store.grey .sdot{background:#C3C8D1}
.store.grey .nm{color:var(--text-2)}
.store.grey .st{color:var(--text-3)}
.store.quiet{border-left-color:var(--amber-dot)}
.store.quiet:hover{border-left-color:var(--amber-dot)}
.store.quiet .sdot{background:transparent;box-shadow:inset 0 0 0 2px var(--amber-dot)}
.store.quiet .st{color:#8A5A10}
.legend .lg i.green{background:var(--green-dot)}
.legend .lg i.amber{background:var(--amber-dot)}
.legend .lg i.red{background:var(--red-dot)}
.legend .lg i.quiet{background:transparent;box-shadow:inset 0 0 0 2px var(--amber-dot)}
.legend .lg i.grey{background:#C3C8D1}
/* The stats panels' .legend further down is a column; the overview's is a row
   under the tiles, and it lost that fight on source order. */
.legend.tl-legend{flex-direction:row;align-items:center;gap:8px 18px;padding:0 18px 16px;flex:none;min-width:0}
.kpi.k-grey .lbl i{background:#C3C8D1}
.kpi.k-grey .val{color:var(--text-2)}
button.kpi{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}

/* Right rail */
.rail{display:flex;flex-direction:column;gap:14px}
.act-list{padding:6px 8px 8px}
/* ⚠️ UNDER .act-list, NOT BARE (WP31). A bare .act also matched the
   filter row's active state (.fsel.act, .fchip.act), so every chosen filter
   in every console took this width:100% and padding and broke the row onto
   lines of its own. Both action rails sit inside .act-list. */
.act-list .act{
  display:grid;grid-template-columns:10px 1fr auto;gap:11px;align-items:start;
  padding:11px 10px;border-radius:11px;cursor:pointer;text-align:left;width:100%;
  transition:background .15s;
}
.act-list .act:hover{background:#F6F7F9}
.act-list .act + .act{border-top:1px solid var(--border-2)}
.act-list .act .adot{width:8px;height:8px;border-radius:50%;margin-top:5px}
.act-list .act .adot.red{background:var(--red-dot)}
.act-list .act .adot.amber{background:var(--amber-dot)}
.act-list .act .adot.gray{background:#C3C8D1}
.act-list .act.act-line{align-items:center}
.act-list .act.act-line .adot{margin-top:0}
.act-list .act .act-n{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.act-list .act.zero b{color:var(--text-2);font-weight:600}
.act-list .act.zero .act-n{color:var(--text-3)}
.bline-left{font-size:11px;color:var(--text-3);text-align:right;margin:-3px 0 6px}
.bline-left.over{color:var(--red);font-weight:650}
.act-list .act b{font-size:12.5px;font-weight:700;color:var(--ink);display:block}
.act-list .act .is{display:block;font-size:12px;color:var(--text-2);margin-top:1px;line-height:1.35}
.act-list .act .ms{display:block;font-size:10.5px;color:var(--text-3);margin-top:3px}
.tag{
  font-size:9.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;white-space:nowrap;
}
.tag.akut{background:var(--red-dot);color:#fff}
.tag.hoj{background:#FBE4DA;color:#B82800}
.tag.med{background:#FEF3C7;color:#B45309}
.tag.lav{background:#F2F3F6;color:var(--text-2)}

.appr-card{
  border:1px solid var(--amber-br);
  background:linear-gradient(180deg,#FFFDF6,#FDF6E6);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm);
  cursor:pointer;transition:transform .18s,box-shadow .18s;text-align:left;width:100%;
}
.appr-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.appr-card .ttl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.appr-card .ttl svg{width:15px;height:15px}
.appr-card .amt{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:8px;font-variant-numeric:tabular-nums}
.appr-card .what{font-size:12.5px;color:var(--text-2);margin-top:2px}
.appr-card .cta{
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:650;color:var(--brand);
}
.appr-card .cta svg{width:14px;height:14px;transition:transform .18s}
.appr-card:hover .cta svg{transform:translateX(2px)}
.appr-empty{
  border:1px dashed var(--border);border-radius:var(--r-lg);padding:16px;
  font-size:12.5px;color:var(--text-3);background:#FBFBFC;display:flex;align-items:center;gap:9px;
}
.appr-empty svg{width:16px;height:16px;color:var(--green-dot)}

.contact-mini{padding:14px 16px 16px;display:flex;gap:11px;align-items:center}
.contact-mini b{display:block;font-size:13px;font-weight:650;color:var(--ink)}
.contact-mini span{font-size:11.5px;color:var(--text-3)}
.contact-mini .cbtns{margin-left:auto;display:flex;gap:6px}
.cbtn{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;color:var(--brand);transition:all .15s;
}
.cbtn:hover{background:var(--brand-50);border-color:var(--brand-100);transform:translateY(-1px)}
.cbtn svg{width:14px;height:14px}
.cbtn.wide{width:auto;padding:0 12px;height:32px;display:inline-flex;gap:6px;font-size:12px;font-weight:600}

/* ============ Case view ============ */
.back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--text-2);
  padding:6px 10px;margin:-6px 0 14px -10px;border-radius:9px;
  transition:all .15s;
}
.back:hover{color:var(--ink);background:#EDEFF2}
.back svg{width:15px;height:15px;transition:transform .18s}
.back:hover svg{transform:translateX(-2px)}

.case-head{margin-bottom:18px}
.case-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.case-id{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--text-3);background:#EEF0F4;padding:3px 9px;border-radius:7px;
}
.case-head h1{
  font-family:var(--font-display);font-size:24px;font-weight:750;letter-spacing:-.022em;color:var(--ink);
  margin-top:10px;line-height:1.2;
}
.case-sub{margin-top:6px;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.case-sub svg{width:14px;height:14px;color:var(--text-3)}
.case-sub .sep{color:#CBD1DA}

/* stepper */
.stepper{
  display:flex;align-items:flex-start;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 18px 14px;margin-bottom:16px;box-shadow:var(--shadow-sm);
  overflow-x:auto;
}
.step{flex:1;min-width:86px;position:relative;text-align:center}
.step::before{
  content:"";position:absolute;top:11px;left:calc(-50% + 14px);right:calc(50% + 14px);
  height:2px;background:var(--border);border-radius:2px;
}
.step:first-child::before{display:none}
.step.done::before{background:var(--green-dot)}
.step.cur::before{background:linear-gradient(90deg,var(--green-dot),var(--amber-dot))}
.step .ic{
  width:22px;height:22px;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;position:relative;z-index:1;
  background:#EDF0F4;color:var(--text-3);
  border:2px solid #EDF0F4;
  transition:all .3s ease;
}
.step .ic svg{width:11px;height:11px}
.step.done .ic{background:var(--green-dot);border-color:var(--green-dot);color:#fff}
.step.cur .ic{
  background:#fff;border-color:var(--amber-dot);color:var(--amber-dot);
  box-shadow:0 0 0 4px rgba(239,160,11,.14);
}
.step.cur.approved-cur .ic{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(14,74,140,.12)}
.step b{display:block;font-size:11px;font-weight:650;color:var(--ink);margin-top:7px;letter-spacing:.005em}
.step span{display:block;font-size:10px;color:var(--text-3);margin-top:1px}
.step.todo b{color:var(--text-3);font-weight:550}
.step>i{
  width:22px;height:22px;margin:0 auto;display:grid;place-items:center;
  border-radius:50%;background:#EDF0F4;color:var(--text-3);
  font-size:10px;font-style:normal;font-weight:750;position:relative;z-index:1;
}
.step.done>i{background:var(--green-dot);color:#fff}
.step>span>small{display:block;margin-top:2px;font-size:9.5px;line-height:1.35;color:var(--text-3)}

.case-grid{display:grid;grid-template-columns:1fr 324px;gap:16px;align-items:start}
@media (max-width:1180px){.case-grid{grid-template-columns:minmax(0,1fr)}}

/* thread */
.thread{display:flex;flex-direction:column;gap:12px}
.ev{display:flex;gap:12px}
.ev .avatar{width:32px;height:32px;font-size:11.5px;margin-top:2px}
.ev-body{flex:1;min-width:0}
.ev-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ev-head b{font-size:13px;font-weight:650;color:var(--ink)}
.ev-head .role{font-size:11px;color:var(--text-3);font-weight:500}
.ev-head time{font-size:11px;color:var(--text-3);margin-left:auto;white-space:nowrap}
.bubble{
  margin-top:6px;background:var(--card);border:1px solid var(--border);
  border-radius:4px 14px 14px 14px;padding:11px 14px;
  font-size:13.5px;color:var(--text);box-shadow:var(--shadow-sm);
  line-height:1.55;
}
.ev.me .bubble{background:var(--brand-50);border-color:var(--brand-100);border-radius:14px 4px 14px 14px}
.photos{display:flex;gap:8px;margin-top:8px}
.photo{
  width:104px;height:74px;border-radius:10px;border:1px solid var(--border);
  background:
    radial-gradient(140% 90% at 20% 10%, #C7D5E4 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 90%, #97A9BC 0%, transparent 50%),
    linear-gradient(160deg,#B4C2D2,#7F92A6);
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .16s,box-shadow .16s;
}
.photo:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-md)}
.photo svg{position:absolute;right:7px;bottom:6px;width:14px;height:14px;color:rgba(255,255,255,.85)}
.photo span{
  position:absolute;left:7px;bottom:5px;font-size:9px;font-weight:600;color:rgba(255,255,255,.9);
  letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.sysline{
  display:flex;align-items:center;gap:10px;padding:2px 0 2px 44px;
  font-size:12.5px;color:var(--text-2);
}
.sysline .sic{
  width:22px;height:22px;border-radius:8px;background:#EDF0F4;color:var(--text-2);
  display:grid;place-items:center;flex-shrink:0;margin-left:-32px;
}
.sysline .sic svg{width:12px;height:12px}
.sysline b{font-weight:650;color:var(--ink)}
.sysline time{margin-left:auto;font-size:11px;color:var(--text-3);white-space:nowrap}
.sysline.good .sic{background:var(--green-bg);color:var(--green)}

/* offer card */
.offer{
  border:1px solid var(--brand-100);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFFFF, #F7FAFE);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  margin-left:44px;
  position:relative;
}
.offer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),#3D6FB0);
}
.offer.approved::before{background:linear-gradient(90deg,#1FA35C,#15803D)}
.offer-h{display:flex;align-items:center;gap:10px;padding:15px 18px 0;flex-wrap:wrap}
.offer-h .oic{
  width:34px;height:34px;border-radius:10px;background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;flex-shrink:0;
}
.offer-h .oic svg{width:17px;height:17px}
.offer-h b{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);display:block}
.offer-h .v{font-size:11.5px;color:var(--text-3)}
.offer-h .chip{margin-left:auto}
.rev-note{
  margin:12px 18px 0;padding:9px 12px;border-radius:10px;
  background:var(--brand-50);border:1px solid var(--brand-100);
  font-size:12.5px;color:var(--brand-700);display:flex;gap:8px;align-items:flex-start;
}
.rev-note svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.olines{padding:14px 18px 0}
.oline{
  display:flex;justify-content:space-between;gap:14px;
  padding:8.5px 0;border-bottom:1px dashed var(--border);
  font-size:13px;
}
.oline .d{color:var(--text-2)}
.oline .p{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.oline.total{border-bottom:none;padding-top:12px}
.oline.total .d{font-weight:700;color:var(--ink);font-size:13.5px}
.oline.total .p{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.oline.total .p small{font-size:11px;color:var(--text-3);font-weight:500;letter-spacing:0}
.othreshold{
  margin:10px 18px 0;display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--amber);font-weight:600;
  background:var(--amber-bg);border:1px solid var(--amber-br);
  padding:8px 12px;border-radius:10px;
}
.othreshold svg{width:14px;height:14px;flex-shrink:0}
.ometa{display:flex;gap:16px;padding:10px 18px 0;font-size:11.5px;color:var(--text-3);flex-wrap:wrap}
.ometa b{color:var(--text-2);font-weight:600}
.ometa svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px;flex-shrink:0}
.oact{display:flex;gap:9px;padding:15px 18px 17px;flex-wrap:wrap;align-items:center}
.oact .right{margin-left:auto;font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.oact .right svg{width:13px;height:13px}

.approved-note{
  margin:14px 18px 0;padding:12px 14px;border-radius:12px;
  background:var(--green-bg);border:1px solid var(--green-br);
  display:flex;gap:10px;align-items:center;
  animation:cardIn .45s cubic-bezier(.22,.9,.3,1) both;
}
.approved-note .ok{
  width:26px;height:26px;border-radius:50%;background:var(--green-dot);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.approved-note .ok svg{width:13px;height:13px}
.approved-note b{font-size:13px;color:var(--green);display:block}
.approved-note span{font-size:12px;color:#3D7A57}

.revision-box{margin:12px 18px 0;animation:cardIn .3s ease both}
.revision-box textarea{
  width:100%;min-height:74px;resize:vertical;
  border:1px solid var(--border);border-radius:11px;padding:10px 13px;
  font-size:13px;background:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.revision-box textarea:focus{border-color:#B9CDE6;box-shadow:0 0 0 3px rgba(14,74,140,.08)}
.revision-box .rb-act{display:flex;gap:8px;margin-top:9px}

/* composer */
.composer{
  margin-top:4px;margin-left:44px;
  display:flex;gap:9px;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:7px 8px 7px 14px;box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s;
}
.composer:focus-within{border-color:#B9CDE6;box-shadow:0 0 0 3px rgba(14,74,140,.08)}
.composer input{flex:1;border:none;outline:none;background:none;font-size:13.5px}
.composer input::placeholder{color:var(--text-3)}
.composer .attach{color:var(--text-3);width:32px;height:32px;border-radius:9px;display:grid;place-items:center;transition:all .15s}
.composer .attach:hover{background:#F1F2F5;color:var(--text)}
.composer .send{
  width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;
  display:grid;place-items:center;transition:all .15s;
  box-shadow:0 2px 6px -2px rgba(10,52,98,.5);
}
.composer .send:hover{background:var(--brand-600);transform:translateY(-1px)}
.composer .send svg{width:15px;height:15px}

/* rail cards (case) */
.rc{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.rc-h{padding:13px 16px 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.rc-b{padding:11px 16px 14px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6.5px 0;font-size:12.5px}
.kv + .kv{border-top:1px solid var(--border-2)}
.kv .k{color:var(--text-3)}
.kv .v{font-weight:600;color:var(--ink);text-align:right}
.kv .v.link{color:var(--brand);cursor:pointer}
.kv .v.link:hover{text-decoration:underline}

.agent-card{display:flex;gap:11px;align-items:center}
.agent-card .avatar{width:40px;height:40px;font-size:13px}
.agent-card b{display:block;font-size:13.5px;font-weight:650;color:var(--ink)}
.agent-card .r1{font-size:11.5px;color:var(--text-2)}
.agent-card .r2{font-size:10.5px;color:var(--text-3);margin-top:1px}
.agent-actions{display:flex;gap:7px;margin-top:11px}
.agent-actions .cbtn{flex:1;height:32px;display:flex;gap:6px;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:var(--brand)}

.hist{position:relative;padding-left:16px}
.hist::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:var(--border-2);border-radius:2px}
.hi{position:relative;padding:6px 0 6px 6px}
.hi::before{
  content:"";position:absolute;left:-16px;top:12px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2.5px solid #C4CBD6;
}
.hi.cur::before{border-color:var(--amber-dot)}
.hi.ok::before{border-color:var(--green-dot);background:var(--green-dot)}
.hi b{font-size:12.5px;font-weight:650;color:var(--ink);display:flex;justify-content:space-between;gap:8px}
.hi b .pr{font-variant-numeric:tabular-nums}
.hi span{font-size:11px;color:var(--text-3);display:block;margin-top:1px}
.hi .st-note{font-size:11px;font-weight:600;margin-top:2px}
.hi .st-note.amber{color:var(--amber)}
.hi .st-note.green{color:var(--green)}
.hi .st-note.gray{color:var(--text-3)}

.doc{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
.doc + .doc{border-top:1px solid var(--border-2)}
.doc .dic{
  width:30px;height:30px;border-radius:9px;background:#F2F3F6;color:var(--text-2);
  display:grid;place-items:center;flex-shrink:0;
}
.doc .dic svg{width:14px;height:14px}
.doc .dic.pdf{background:var(--red-bg);color:var(--red)}
.doc .dic.img{background:var(--brand-50);color:var(--brand)}
.doc b{font-weight:600;color:var(--ink);display:block;line-height:1.3}
.doc span{font-size:10.5px;color:var(--text-3)}
.doc .sz{margin-left:auto;font-size:10.5px;color:var(--text-3);white-space:nowrap}

/* ============ Tables / list pages ============ */
/* Svartider on Settings (WP33): four urgencies against two or three columns,
   narrow enough to scroll sideways on a phone rather than wrap. */
.sla-grid{width:100%;border-collapse:collapse;font-size:12.5px}
.sla-grid th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text-3);font-weight:600;white-space:nowrap}
.sla-grid td{padding:6px 8px;border-bottom:1px solid var(--border-2);vertical-align:middle}
.tbl{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.tbl-toolbar{display:flex;align-items:center;gap:8px;padding:14px 18px 10px;flex-wrap:wrap}
.tbl-toolbar .grow{flex:1}
.t-search{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;width:250px;
  background:#FAFAFB;border:1px solid var(--border);border-radius:10px;color:var(--text-3);
  transition:border-color .15s,box-shadow .15s;
}
.t-search:focus-within{border-color:#B9CDE6;box-shadow:0 0 0 3px rgba(14,74,140,.08);background:#fff}
.t-search input{border:none;outline:none;background:none;flex:1;font-size:13px;color:var(--text)}
.t-search svg{width:14px;height:14px}
.trow{
  display:grid;align-items:center;gap:12px;
  padding:0 18px;min-height:46px;width:100%;text-align:left;
  font-size:13px;transition:background .13s;
}
/* A grid item defaults to min-width:auto, which means it refuses to shrink
   below its content — so a nowrap chip in a fixed column overflows the column
   instead of the column containing it. This is the half of that fix that
   belongs to the row rather than to the chip. */
.trow > *, .trow-h > *{min-width:0}
.trow + .trow, .trow-h + .trow{border-top:1px solid var(--border-2)}
button.trow:hover{background:#F8F9FB;cursor:pointer}
.trow-h{
  display:grid;align-items:center;gap:12px;padding:10px 18px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);
  background:#FAFAFB;border-top:1px solid var(--border-2);
}
.g-sager{grid-template-columns:86px 1.5fr 1fr 110px 130px 90px 110px}
.g-fakt{grid-template-columns:96px 1fr 1.1fr 110px 110px 110px}
.g-brugere{grid-template-columns:2fr 1.4fr 1.2fr 1fr 90px}
.g-afd{grid-template-columns:1.6fr 100px 130px 1fr 1fr 40px}
.trow .tid{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--text-3)}
.trow .tt b{display:block;font-size:13px;font-weight:650;color:var(--ink);line-height:1.3}
.trow .tt span{font-size:11.5px;color:var(--text-3)}
.trow .mut{color:var(--text-2);font-size:12.5px}
.trow .mut2{color:var(--text-3);font-size:12px}
.trow .amt{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.trow .aend{display:flex;justify-content:flex-end}
.trow .who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.trow .who .avatar{width:24px;height:24px;font-size:9px}
.trow .arr{color:var(--text-3);display:grid;place-items:center}
.trow .arr svg{width:14px;height:14px}
.empty{
  padding:36px 20px;text-align:center;color:var(--text-3);font-size:13px;
}
.rolechip{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:7px;
  font-size:11px;font-weight:650;background:#F2F3F6;color:var(--text-2);border:1px solid var(--border);
}
.rolechip.admin{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.rolechip.mod{background:#F3EEFB;color:#6D3FB8;border-color:#E4D7F6}
.rolechip.afd{background:var(--green-bg);color:var(--green);border-color:var(--green-br)}

/* ============ Insights bars ============ */
.bars{padding:8px 18px 16px}
.bar-row{display:grid;grid-template-columns:150px 1fr 84px;gap:12px;align-items:center;padding:6px 0;font-size:12.5px}
.bar-row .bl{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bv{font-weight:650;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bar-track{height:9px;border-radius:6px;background:#EFF1F4;overflow:hidden}
/* display:block, or the whole chart is empty grey tracks. .bar-fill is a span
   and its parent is not a flex container, so it stays inline and an inline box
   ignores width and height — it renders at its content width, which is zero,
   because a bar has no text in it. The prototype had the same line and the same
   silent nothing; it only shows up once the numbers behind the bars are real. */
.bar-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2E6FB2,var(--brand));transition:width .6s cubic-bezier(.22,.9,.3,1)}
.bar-fill.green{background:linear-gradient(90deg,#35B571,#1F8B4E)}
.bar-fill.amber{background:linear-gradient(90deg,#F3B13C,#DB8E08)}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1180px){.split2{grid-template-columns:minmax(0,1fr)}}

/* ============ Settings ============ */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* minmax(0,1fr), not 1fr: a 1fr track never shrinks below its widest card's
   min-content, so one wide row in one card pushed every settings card to
   476px and the whole page scrolled sideways on a 375px phone (walk, 28 Sep). */
@media (max-width:1180px){.set-grid{grid-template-columns:minmax(0,1fr)}}
.set-b{padding:6px 18px 16px}
.set-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.set-row + .set-row{border-top:1px solid var(--border-2)}
.set-row .si{flex:1}
.set-row .si b{display:block;font-size:13px;font-weight:650;color:var(--ink)}
.set-row .si span{font-size:12px;color:var(--text-3);line-height:1.45;display:block;margin-top:1px}
.f-input{
  height:36px;padding:0 12px;border:1px solid var(--border);border-radius:10px;
  background:#fff;outline:none;font-size:13.5px;
  transition:border-color .15s,box-shadow .15s;
}
.f-input:focus{border-color:#B9CDE6;box-shadow:0 0 0 3px rgba(14,74,140,.08)}
.f-input.amt{width:130px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
select.f-input{width:100%;appearance:auto;cursor:pointer}
textarea.f-input{height:auto;min-height:84px;padding:10px 12px;resize:vertical;width:100%}
.f-label{display:block;font-size:12px;font-weight:650;color:var(--text-2);margin:0 0 5px}
/* ⚠️ AN SVG WITH NO SIZE IS 300x150, NOT "AS BIG AS THE TEXT".
   Every icon in this product is a bare <svg viewBox="0 0 24 24"> with no width
   or height attribute, sized by whatever rule the container carries — .btn svg,
   .nav-item svg, and thirty more. A label had no such rule, so the camera on
   "Add a photo" in the employee report form rendered at the CSS default size
   for a replaced element with no intrinsic dimensions: three hundred pixels
   wide, filling the form. Nothing was wrong with the icon or the markup; the
   rule simply did not exist for this container. */
.f-label svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px;flex-shrink:0}
.f-group{margin-bottom:13px}
.tgl{
  width:40px;height:24px;border-radius:999px;background:#DFE3E9;position:relative;flex-shrink:0;
  transition:background .18s;border:none;cursor:pointer;
}
.tgl::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(15,21,34,.25);
  transition:transform .18s cubic-bezier(.34,1.3,.5,1);
}
.tgl.on{background:var(--green-dot)}
.tgl.on::after{transform:translateX(16px)}
.radio-row{display:flex;gap:8px;flex-wrap:wrap}
.radio-pill{
  border:1px solid var(--border);border-radius:11px;padding:10px 13px;background:#fff;
  text-align:left;flex:1;min-width:180px;transition:all .15s;cursor:pointer;
}
.radio-pill:hover{border-color:#CBD3DE}
.radio-pill.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand)}
.radio-pill b{display:block;font-size:13px;font-weight:650;color:var(--ink)}
.radio-pill span{font-size:11.5px;color:var(--text-2);display:block;margin-top:2px;line-height:1.4}

/* ============ Command palette (from v3, v1-skinned) ============ */
.ov-cmd{
  position:fixed;inset:0;z-index:300;
  background:rgba(20,26,38,.3);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:grid;place-items:start center;padding-top:13vh;
  animation:fadeIn .14s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cmd{
  width:min(600px,92vw);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(15,21,34,.06);
  overflow:hidden;
  animation:cmdPop .2s cubic-bezier(.34,1.3,.5,1) both;
}
@keyframes cmdPop{from{opacity:0;transform:scale(.97) translateY(-7px)}to{opacity:1;transform:none}}
.cmd-in{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--border-2)}
.cmd-in svg{width:17px;height:17px;color:var(--text-3);flex-shrink:0}
.cmd-in input{flex:1;background:none;border:none;outline:none;font-size:15.5px;color:var(--ink)}
.cmd-in input::placeholder{color:var(--text-3)}
.cmd-list{max-height:350px;overflow-y:auto;padding:7px}
.cgroup{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:9px 11px 4px}
.citem{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:8px 11px;border-radius:10px;text-align:left;
  font-size:13.5px;transition:background .1s;
}
.citem .ci{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  background:#F2F3F6;border:1px solid var(--border);color:var(--text-2);
}
.citem .ci svg{width:13.5px;height:13.5px}
.citem .ci.g{background:var(--green-bg);color:var(--green);border-color:var(--green-br)}
.citem .ci.a{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-br)}
.citem .ci.r{background:var(--red-bg);color:var(--red);border-color:var(--red-br)}
.citem .ci.b{background:var(--brand-50);color:var(--brand);border-color:var(--brand-100)}
.citem b{font-weight:550;color:var(--ink)}
.citem .sub{font-size:11.5px;color:var(--text-3);margin-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .k{margin-left:auto}
.citem.sel{background:var(--brand-50)}
.cmd-foot{
  display:flex;gap:15px;padding:10px 15px;border-top:1px solid var(--border-2);
  font-size:11px;color:var(--text-3);
}
.cmd-foot span{display:flex;align-items:center;gap:5px}
.cmd-empty{padding:28px;text-align:center;color:var(--text-3);font-size:13px}

/* ============ Modal ============ */
.m-ov{
  position:fixed;inset:0;z-index:280;
  background:rgba(20,26,38,.34);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:20px;
  animation:fadeIn .15s ease both;
}
.modal{
  width:min(560px,94vw);max-height:88vh;overflow-y:auto;
  background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);
  animation:cmdPop .22s cubic-bezier(.34,1.3,.5,1) both;
}
.m-h{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
.m-h h3{font-family:var(--font-display);font-size:18px;font-weight:750;letter-spacing:-.02em;color:var(--ink);flex:1}
.m-x{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--text-3);
  transition:all .15s;
}
.m-x:hover{background:#F1F2F5;color:var(--ink)}
.m-x svg{width:16px;height:16px}
.m-b{padding:14px 20px 6px}
.m-f{display:flex;gap:9px;justify-content:flex-end;padding:12px 20px 18px}
.f-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* toast */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  padding:11px 18px 11px 14px;border-radius:13px;
  font-size:13px;font-weight:550;
  box-shadow:var(--shadow-lg);
  animation:toastIn .35s cubic-bezier(.22,.9,.3,1) both;
}
.toast.out{animation:toastOut .3s ease both}
.toast .tic{
  width:22px;height:22px;border-radius:50%;background:var(--green-dot);
  display:grid;place-items:center;flex-shrink:0;
}
.toast .tic.info{background:#3D6FB0}
.toast .tic svg{width:12px;height:12px}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

/* proto pill */
.proto{
  position:fixed;right:18px;bottom:16px;z-index:150;
  font-size:10.5px;font-weight:650;letter-spacing:.04em;color:var(--text-3);
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;
}

/* check draw */
.checkdraw{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s .1s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ============ Persona switcher (demo only) ============ */
.switcher{position:fixed;right:18px;bottom:52px;z-index:260;display:flex;justify-content:flex-end}
.sw-btn{
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 14px 0 9px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:650;
  box-shadow:var(--shadow-lg);
  transition:transform .16s ease;
}
.switcher:hover .sw-btn{transform:translateY(-1px)}
.sw-btn .swd{width:19px;height:19px;border-radius:50%;background:linear-gradient(145deg,#3D6FB0,#0E4A8C);display:grid;place-items:center;font-size:8px;font-weight:800;flex-shrink:0}
.sw-menu{
  position:absolute;right:0;bottom:42px;width:262px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;pointer-events:none;transform:translateY(8px) scale(.98);
  transition:opacity .16s ease,transform .18s cubic-bezier(.22,.9,.3,1);
}
/* invisible bridge across the gap to the button, so hover isn't lost mid-move.
   Inherits pointer-events:none while the menu is closed (click-through). */
.sw-menu::before{content:"";position:absolute;left:-8px;right:-8px;bottom:-16px;height:18px}
.switcher:hover .sw-menu,.switcher:focus-within .sw-menu{opacity:1;pointer-events:auto;transform:none}
.sw-t{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:6px 10px 5px}
.sw-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text);transition:background .13s}
.sw-menu a:hover{background:#F4F5F8}
.sw-menu a.on{background:var(--brand-50)}
.sw-menu a .swa{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:750;flex-shrink:0}
.sw-menu a b{display:block;font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.2}
.sw-menu a span{font-size:10.5px;color:var(--text-3)}

/* ============ Auth pages (login + QR) ============ */
.auth-wrap{
  /* The brandline sits UNDER the card in the flow now, not fixed over it: at
     375 wide the fixed one was drawn across the first category tile, and the
     card's 96vw plus this padding was 3px wider than the phone. */
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;align-content:center;gap:18px;
  grid-template-columns:minmax(0,1fr);padding:30px 18px 24px;position:relative;
  background:
    radial-gradient(52% 44% at 10% 0%, rgba(14,74,140,.08), transparent 60%),
    radial-gradient(44% 40% at 100% 100%, rgba(34,165,94,.05), transparent 60%),
    var(--bg);
}
.auth-card{
  width:100%;max-width:432px;min-width:0;background:var(--card);
  border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);
  padding:32px 32px 26px;animation:cmdPop .3s cubic-bezier(.22,.9,.3,1) both;
}
.auth-card.wide{width:100%;max-width:600px;padding:28px 30px 24px}
@media (max-width:480px){.auth-wrap{padding:16px 12px 24px}}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.auth-logo .logo-mark{width:44px;height:44px;border-radius:13px;font-size:17px}
.auth-h1{font-family:var(--font-display);font-size:21px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.auth-sub{font-size:13px;color:var(--text-2);margin-top:4px;line-height:1.55}
.auth-sub svg{width:15px;height:15px;color:var(--text-3);flex-shrink:0;margin-top:2px}
.auth-field{margin-top:15px}
.auth-field label{display:block;font-size:12px;font-weight:650;color:var(--text-2);margin-bottom:6px}
.auth-field .f-input{width:100%;height:42px;border-radius:11px;font-size:14px}
.auth-btn{width:100%;height:42px;margin-top:14px;font-size:14px}
.auth-remember{display:flex;align-items:flex-start;gap:9px;margin-top:13px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer}
.auth-remember input{width:17px;height:17px;margin:1px 0 0;flex-shrink:0;accent-color:var(--brand)}
.auth-remember small{display:block;font-size:11.5px;font-weight:500;color:var(--text-3);margin-top:2px;line-height:1.45}
.auth-alt{width:100%;margin-top:10px;text-align:center;font-size:12.5px;font-weight:600;color:var(--brand);padding:8px;border-radius:9px}
.auth-alt:hover{background:var(--brand-50)}
.auth-sent{margin-top:16px;background:var(--green-bg);border:1px solid var(--green-br);border-radius:14px;padding:15px;display:flex;gap:12px;align-items:flex-start;animation:cardIn .35s ease both}
.auth-sent .aic{width:34px;height:34px;border-radius:10px;background:var(--green-dot);color:#fff;display:grid;place-items:center;flex-shrink:0}
.auth-sent .aic svg{width:16px;height:16px}
.auth-sent b{font-size:13.5px;color:var(--green);display:block}
.auth-sent span{font-size:12px;color:#3D7A57;line-height:1.5;display:block;margin-top:2px}
.auth-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--border-2);font-size:12px;color:var(--text-3);text-align:center;line-height:1.7}
.auth-note a{color:var(--brand);font-weight:600;text-decoration:none;cursor:pointer}
.auth-note a:hover{text-decoration:underline}
.auth-brandline{position:static;text-align:center;font-size:11px;color:var(--text-3);font-weight:500;pointer-events:none}
.auth-brandline b{color:var(--text-2)}
.auth-brandline.brand-lockup{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
/* The lockup's display:flex outranks the hidden attribute, so a working poster
   that hid it (D8) still wore FogiDesk's mark under the store's own card. */
.auth-brandline[hidden]{display:none}
.auth-brandline.brand-lockup img{width:92px;height:auto;display:block}
.auth-brandline.brand-lockup .reverse{display:none}
html.dark .auth-brandline.brand-lockup .primary{display:none}
html.dark .auth-brandline.brand-lockup .reverse{display:block}
.fogidesk-logo{display:block;width:112px;height:auto;max-width:100%}
.fogidesk-symbol{display:block;width:30px;height:32px;object-fit:contain}
html.dark .fogidesk-logo.primary{display:none}
html:not(.dark) .fogidesk-logo.reverse{display:none}
.qr-public-terminal .switcher,.qr-public-terminal .proto{display:none!important}
.demo-strip{margin-top:20px;border-top:1px dashed var(--border);padding-top:15px}
.demo-strip .dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px;text-align:center}
.demo-strip a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--border);margin-top:7px;text-decoration:none;color:var(--text);
  transition:all .15s;background:#FDFDFE;
}
.demo-strip a:hover{border-color:#C8D2DF;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.demo-strip a .swa{width:30px;height:30px;border-radius:9px;color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:750;flex-shrink:0}
.demo-strip a b{display:block;font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.25}
.demo-strip a span{font-size:11px;color:var(--text-3)}
.demo-strip a svg{margin-left:auto;width:14px;height:14px;color:var(--text-3);flex-shrink:0}

/* ============ Rapportér-flow (employee + QR) ============ */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 0 2px}
@media (max-width:760px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
.cat-tile{
  border:1px solid var(--border);border-radius:14px;background:#FDFDFE;
  padding:15px 10px 12px;text-align:center;cursor:pointer;
  transition:all .16s ease;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.cat-tile svg{width:20px;height:20px;color:var(--text-2);transition:color .15s}
.cat-tile b{font-size:12.5px;font-weight:650;color:var(--ink)}
.cat-tile:hover{border-color:#C8D2DF;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cat-tile.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand)}
.cat-tile.on svg{color:var(--brand)}
.urg-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:760px){.urg-row{grid-template-columns:1fr}}
.urg{border:1px solid var(--border);border-radius:13px;background:#fff;padding:12px 13px;text-align:left;cursor:pointer;transition:all .15s}
.urg b{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--ink)}
.urg b i{width:9px;height:9px;border-radius:50%;background:var(--green-dot);flex-shrink:0}
.urg span{display:block;font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.4}
.urg.soon b i{background:var(--amber-dot)}
.urg.acute b i{background:var(--red-dot)}
.urg:hover{border-color:#C8D2DF}
.urg.on{border-color:var(--green-dot);background:var(--green-bg);box-shadow:0 0 0 1px var(--green-dot)}
.urg.soon.on{border-color:var(--amber-dot);background:var(--amber-bg);box-shadow:0 0 0 1px var(--amber-dot)}
.urg.acute.on{border-color:var(--red-dot);background:var(--red-bg);box-shadow:0 0 0 1px var(--red-dot)}
/* The four levels, one tile each, with the tone the priority chip uses:
   Lav grey, Mellem the brand, Høj amber (.soon), Akut red (.acute). */
.urg-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.urg-row.four.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.urg-row.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.urg.low b i{background:var(--text-3)}
.urg.medium b i{background:var(--brand)}
.urg.low.on,.urg.medium.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand)}
.urg-row.err .urg{border-color:var(--red)}
.done-hero{text-align:center;padding:34px 22px 30px}
.done-check{
  width:64px;height:64px;border-radius:50%;background:var(--green-dot);color:#fff;
  display:grid;place-items:center;margin:0 auto 18px;
  box-shadow:0 0 0 10px var(--green-bg);
  animation:popIn .45s cubic-bezier(.34,1.4,.5,1) both;
}
.done-check svg{width:30px;height:30px}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.done-hero h2{font-family:var(--font-display);font-size:22px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.done-hero .did{margin-top:7px;font-size:13px;color:var(--text-2)}
.done-next{margin:22px auto 0;max-width:430px;text-align:left;border:1px solid var(--border);border-radius:14px;background:#FBFCFD;padding:6px 16px}
.done-next .dn{display:flex;gap:11px;align-items:flex-start;padding:10px 0;font-size:12.5px;color:var(--text-2);line-height:1.5}
.done-next .dn + .dn{border-top:1px solid var(--border-2)}
.done-next .dn .n{width:22px;height:22px;border-radius:50%;background:var(--brand-50);color:var(--brand);font-size:11px;font-weight:750;display:grid;place-items:center;flex-shrink:0}
.done-next .dn b{color:var(--ink);font-weight:650}
.done-act{display:flex;gap:9px;justify-content:center;margin-top:22px;flex-wrap:wrap}
/* The photograph step on the poster's confirmation. Deliberately quieter than
   the primary action beneath it: the report is already filed, and this is an
   offer rather than an instruction. */
.qphoto{margin:18px auto 0;max-width:430px;text-align:center;border:1px dashed var(--border);border-radius:14px;padding:16px;background:#FBFCFD}
html.dark .qphoto{background:#141922}
.qphoto-h{font-size:12.5px;color:var(--text-2);line-height:1.5;margin-bottom:11px}
.qphoto .btn{width:100%;justify-content:center}
.qphoto-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:11px}
.qphoto-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--green);background:var(--green-bg);border:1px solid var(--green-br);border-radius:999px;padding:3px 10px}
.qphoto-chip svg{width:11px;height:11px}
.qphoto-note{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:8px}
.qphoto-note.err{color:var(--red)}
.qphoto-note svg{width:15px;height:15px;flex:none}
.cat-glyph{display:inline-flex;flex:none;color:var(--text-2)}
.cat-glyph svg{width:16px;height:16px}
.icon-pick{display:flex;flex-wrap:wrap;gap:6px}
.icon-pick .cbtn{width:38px;height:38px;color:var(--text-2)}
.cbtn:disabled{opacity:.35;cursor:default;transform:none}
.icon-pick .cbtn svg{width:18px;height:18px}
.icon-pick .cbtn.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand);color:var(--brand)}

/* ---- the poster page (qr.html) ----
   The language button lives in the card's own header row rather than fixed
   over the page, where it floated across "Beskriv problemet" when scrolled. */
.qr-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.qr-head .auth-logo{flex:1;min-width:0;margin-bottom:0}
.qr-head .logo-txt{min-width:0}
.qr-head .logo-txt b{overflow-wrap:anywhere}
.qr-head #langBtn{flex-shrink:0;border:1px solid var(--border);background:var(--card);height:34px}
.qr-skel{display:grid;gap:12px;padding:4px 0 8px}
.qr-skel i{display:block;height:14px;border-radius:7px;background:var(--border-2);animation:pulseSkel 1.2s ease-in-out infinite alternate}
.qr-skel i.big{height:44px;width:44px;border-radius:13px}
.qr-skel i.w60{width:60%}
.qr-skel i.tiles{height:150px;border-radius:14px}
@keyframes pulseSkel{from{opacity:.55}to{opacity:1}}
.qr-call{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:13px;border:1px solid var(--red-br);background:var(--red-bg);font-size:13px;line-height:1.5;color:var(--ink);text-align:left}
.qr-call svg{width:18px;height:18px;color:var(--red);flex-shrink:0;margin-top:1px}
.qr-call a{color:var(--red);font-weight:750;text-decoration:none;white-space:nowrap}
.qr-call a:hover{text-decoration:underline}
.qr-call.plain{border-color:var(--border);background:var(--bg)}
.qr-call.plain svg{color:var(--text-3)}
.qr-privacy{margin-top:14px;font-size:12px;color:var(--text-3);line-height:1.6;text-align:left}
.qr-privacy summary{cursor:pointer;font-weight:650;color:var(--text-2);list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.qr-privacy summary::-webkit-details-marker{display:none}
.qr-privacy p{margin-top:6px}
.qr-privacy a{color:var(--brand);font-weight:600}
.qphoto-bar{height:6px;border-radius:3px;background:var(--border-2);overflow:hidden;margin-top:10px}
.qphoto-bar i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .2s}
.report-hero{
  border-radius:var(--r-lg);padding:22px 24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#12579F,#0A3765);
  box-shadow:0 14px 34px -16px rgba(10,55,101,.55);
}
.report-hero::after{content:"";position:absolute;right:-60px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.07)}
.report-hero h2{font-family:var(--font-display);font-size:20px;font-weight:750;letter-spacing:-.02em}
.report-hero p{font-size:13px;color:rgba(255,255,255,.82);margin-top:5px;max-width:440px;line-height:1.55}
.report-hero .btn{margin-top:16px;background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.report-hero .btn:hover{background:#F2F6FB;transform:translateY(-1px)}
.faq details{border:1px solid var(--border);border-radius:12px;background:#fff;margin-bottom:8px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:12px 15px;font-size:13px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:9px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:14px;height:14px;color:var(--text-3);margin-left:auto;flex-shrink:0;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .fa{padding:0 15px 13px;font-size:12.5px;color:var(--text-2);line-height:1.6}

/* ============ Provider console ============ */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.client-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:16px 17px 14px;text-align:left;width:100%;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
  display:flex;flex-direction:column;gap:12px;
}
.client-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#D5DBE4}
.cc-top{display:flex;align-items:center;gap:11px}
.cmark{
  width:40px;height:40px;border-radius:12px;color:#fff;flex-shrink:0;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.cc-top b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em}
.cc-top .dom{font-size:11.5px;color:var(--text-3)}
.cc-top .chip{margin-left:auto}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;border-top:1px solid var(--border-2);padding-top:11px}
.cstat b{display:block;font-family:var(--font-display);font-size:16px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.cstat span{font-size:10px;color:var(--text-3);font-weight:600;letter-spacing:.02em}
.cstat.warn b{color:#B26205}
.cc-note{font-size:11.5px;color:var(--text-2);background:#F7F8FA;border:1px solid var(--border-2);border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:7px;line-height:1.4}
.cc-note svg{width:13px;height:13px;color:var(--amber-dot);flex-shrink:0}
.g-pan{grid-template-columns:1.7fr 130px 1.3fr 90px 90px 110px 40px}
.mini-portal{
  border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg);
  display:flex;height:236px;box-shadow:inset 0 1px 3px rgba(15,21,34,.05);
  --pv:#0E4A8C;
}
.mini-side{width:96px;background:#FBFBFC;border-right:1px solid var(--border-2);padding:9px 7px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.mini-logo{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.mini-mark{width:16px;height:16px;border-radius:5px;background:var(--pv);color:#fff;font-size:7px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.mini-name{font-size:7.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px}
.mini-nav{height:9px;border-radius:4px;background:#EDEFF3;margin:2px 1px}
.mini-nav.on{background:color-mix(in srgb,var(--pv) 16%, white)}
.mini-main{flex:1;padding:9px 10px;display:flex;flex-direction:column;gap:7px;min-width:0}
.mini-top{display:flex;gap:5px;align-items:center}
.mini-search{flex:1;height:11px;border-radius:5px;background:#fff;border:1px solid var(--border-2)}
.mini-btn{width:36px;height:11px;border-radius:5px;background:var(--pv)}
.mini-hello{height:10px;width:46%;border-radius:4px;background:#E3E6EB;margin-top:2px}
.mini-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mini-tile{height:34px;border-radius:6px;background:#fff;border:1px solid var(--border-2);border-left:2.5px solid var(--green-dot)}
.mini-tile.a{border-left-color:var(--amber-dot)}
.mini-tile.r{border-left-color:var(--red-dot)}
.mini-card{flex:1;border-radius:8px;background:#fff;border:1px solid var(--border-2);position:relative;overflow:hidden;min-height:36px}
.mini-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--pv)}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{
  width:32px;height:32px;border-radius:11px;cursor:pointer;position:relative;border:none;
  transition:transform .14s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(15,21,34,.18);
}
.swatch:hover{transform:translateY(-2px) scale(1.05)}
.swatch.on::after{content:"";position:absolute;inset:-5px;border-radius:14px;border:2px solid var(--ink)}
.conn-hero{
  border:1px solid var(--green-br);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FCFFFD,#F0FAF4);box-shadow:var(--shadow-sm);
  padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.conn-hero .cic{
  width:46px;height:46px;border-radius:14px;background:var(--green-dot);color:#fff;
  display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 16px -6px rgba(34,165,94,.6);
}
.conn-hero .cic svg{width:22px;height:22px}
.conn-hero b{display:block;font-family:var(--font-display);font-size:16px;font-weight:750;color:var(--ink);letter-spacing:-.01em}
.conn-hero .cs{font-size:12.5px;color:var(--text-2);margin-top:2px}
.conn-hero .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.feed{padding:4px 18px 12px}
.feedline{display:flex;gap:11px;align-items:flex-start;padding:10px 0;font-size:12.5px;color:var(--text-2);width:100%;text-align:left;line-height:1.45}
.feedline + .feedline{border-top:1px solid var(--border-2)}
.feedline .fic{width:24px;height:24px;border-radius:8px;background:#EFF1F5;color:var(--text-2);display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.feedline .fic svg{width:12px;height:12px}
.feedline .fic.g{background:var(--green-bg);color:var(--green)}
.feedline .fic.b{background:var(--brand-50);color:var(--brand)}
.feedline .fic.a{background:var(--amber-bg);color:var(--amber)}
.feedline b{color:var(--ink);font-weight:650}
.feedline time{margin-left:auto;font-size:11px;color:var(--text-3);white-space:nowrap;padding-top:2px;flex-shrink:0}
.check-item{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:12.5px;color:var(--text-2)}
.check-item + .check-item{border-top:1px solid var(--border-2)}
.check-item .ck{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:grid;place-items:center}
.check-item.done .ck{background:var(--green-dot);color:#fff}
.check-item.done span{color:var(--text-3);text-decoration:line-through}
.check-item:not(.done) .ck{border:2px solid #C9D0DA;color:transparent}
.check-item .ck svg{width:10px;height:10px}
.kv .v code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;background:#F2F3F6;border:1px solid var(--border);padding:2px 7px;border-radius:6px;color:var(--text-2)}
.domrow{display:flex;align-items:center;gap:0;max-width:360px}
.domrow .f-input{flex:1;border-radius:10px 0 0 10px;border-right:none}
.domrow .suffix{
  height:36px;display:flex;align-items:center;padding:0 12px;
  background:#F7F8FA;border:1px solid var(--border);border-radius:0 10px 10px 0;
  font-size:12.5px;color:var(--text-3);font-weight:600;white-space:nowrap;
}

/* ============ Logo upload (brand) ============ */
.logo-drop{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.logo-drop .ld-txt{flex:1;min-width:130px}
.logo-drop .ld-txt b{display:block;font-size:12.5px;font-weight:650;color:var(--ink)}
.logo-drop .ld-txt span{font-size:11px;color:var(--text-3);line-height:1.4;display:block;margin-top:1px}
.cmark img{width:74%;height:74%;object-fit:contain;display:block}
.cmark.haslogo{background:#fff!important;border:1px solid var(--border)}
.mini-mark img{width:82%;height:82%;object-fit:contain;display:block}
.mini-mark.haslogo{background:#fff;border:1px solid var(--border-2)}
.logo-mark img{width:74%;height:74%;object-fit:contain;display:block}
.logo-mark.haslogo{background:#fff!important;border:1px solid var(--border);box-shadow:none}

/* ============ Standalone helpdesk ============ */
.g-tix{grid-template-columns:84px 1.2fr 1.7fr 160px 90px 120px 110px}
.g-esager{grid-template-columns:86px 1.6fr 1fr 170px 96px}
.sla-ok{color:var(--green);font-weight:650;font-size:12px}
.sla-warn{color:var(--amber);font-weight:650;font-size:12px}
.sla-breach{color:var(--red);font-weight:700;font-size:12px}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.sla-summary{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:5px;line-height:1.35}
.sla-mini{font-size:10.5px;color:var(--text-3);font-weight:550}
.sla-mini b{font-weight:700;color:inherit}
.sla-mini.met{color:var(--green)}
.sla-mini.countdown{color:var(--brand)}
.sla-mini.paused{color:var(--amber)}
/* "Something happened here you have not seen." Sits beside the reference in a
   row, which is the first thing the eye lands on when scanning a list. */
.unseen-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--brand);margin-right:6px;vertical-align:middle;flex:none}

.sla-mini.at_risk{color:var(--amber);font-weight:700}
.sla-mini.breach{color:var(--red);font-weight:700}
.sla-card .rc-b{display:flex;flex-direction:column;gap:10px}
.sla-detail{display:grid;grid-template-columns:9px 1fr;gap:9px;align-items:start}
.sla-detail .sla-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:4px}
.sla-detail.met .sla-dot{background:var(--green-dot)}
.sla-detail.paused .sla-dot{background:var(--amber-dot)}
.sla-detail.at_risk .sla-dot{background:var(--amber-dot)}
.sla-detail.breach .sla-dot{background:var(--red-dot)}
.sla-detail > span:last-child{min-width:0}
.sla-detail b{display:block;font-size:11.5px;color:var(--ink)}
.sla-detail > span:last-child > span{display:block;font-size:11px;color:var(--text-2);line-height:1.45;margin-top:2px}
.sla-detail.breach b,.sla-detail.breach > span:last-child > span{color:var(--red)}
.sla-detail.paused b{color:var(--amber)}
.sla-note{font-size:10.5px;color:var(--text-3);line-height:1.5;padding-top:8px;border-top:1px solid var(--border-2)}
.employee-home-case{grid-template-columns:86px minmax(0,1fr) 160px 96px}
.employee-case-list-row{grid-template-columns:86px minmax(0,1.6fr) minmax(110px,1fr) 170px 96px}
.itabs{display:flex;gap:6px;margin:0 0 8px 44px}
.itab{height:26px;padding:0 11px;border-radius:8px;font-size:11.5px;font-weight:650;border:1px solid var(--border);background:#fff;color:var(--text-2);transition:all .13s}
.itab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.itab.on.notetab{background:var(--amber-dot);border-color:var(--amber-dot)}
.bubble.internal{background:var(--amber-bg);border-color:var(--amber-br)}
.int-label{font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:3px}
.of-line{display:flex;gap:8px;margin-bottom:8px}
.of-line .f-input{flex:1;min-width:0}
.of-line .f-input.amt2{width:110px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.komp{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:10.5px;font-weight:650;background:var(--brand-50);color:var(--brand);border:1px solid var(--brand-100);margin:1px 3px 1px 0}

/* ============ v1-full additions (CSAT, notif-matrix, compliance, dupe, AI) ============ */
.stars{display:flex;gap:2px}
.star{font-size:22px;line-height:1;color:#C9D0DA;cursor:pointer;transition:transform .12s,color .12s;background:none;border:none;padding:2px}
.star:hover{transform:scale(1.18)}
.star.on{color:var(--amber-dot)}
.csat-box{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:44px}
.csat-box b{font-size:13px;color:var(--ink)}
.csat-box .done{font-size:12.5px;color:var(--green);font-weight:650}
.nchip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:11px;font-weight:650;color:var(--text-3);cursor:pointer;transition:all .13s}
.nchip.on{background:var(--green-bg);border-color:var(--green-br);color:var(--green)}
.nchips{display:flex;gap:6px;flex-shrink:0}
.g-comp{grid-template-columns:1.4fr 1fr 1fr 1fr}
.g-audit{grid-template-columns:120px 1fr 1.8fr 110px 110px}
.g-plan{grid-template-columns:1.7fr 110px 1fr 120px 110px}
.dupe-warn{margin:10px 0 4px;display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--amber);font-weight:600;background:var(--amber-bg);border:1px solid var(--amber-br);padding:10px 13px;border-radius:11px;flex-wrap:wrap;line-height:1.45}
.dupe-warn svg{width:15px;height:15px;flex-shrink:0}
.dupe-warn .da{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.aibtn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:8px;font-size:11.5px;font-weight:650;border:1px solid var(--brand-100);background:var(--brand-50);color:var(--brand);cursor:pointer;transition:all .13s}
.aibtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.budgetline{margin:10px 18px 0;font-size:11.5px;color:var(--text-2)}
.budgetline b{color:var(--ink)}
.budgetline .bar-track{margin-top:5px;height:6px}
/* CapEx/OpEx kontering */
.capexline{margin:12px 18px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.cx-l{display:flex;align-items:center;gap:9px;min-width:0}
.cx-l>div{display:flex;flex-direction:column;min-width:0}
.cx-l b{font-size:12.5px;color:var(--ink);font-weight:650}
.cx-l>div>span{font-size:11px;color:var(--text-3);line-height:1.4}
.cx-ic{color:var(--brand);flex-shrink:0;display:flex}
.cx-ic svg{width:16px;height:16px;display:block}
.cx-seg{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;flex-shrink:0}
.cx-opt{border:none;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--text-2);padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.cx-opt.on{background:var(--brand);color:#fff}
.cx-opt.cap.on{background:var(--amber);color:#fff}
html.dark .cx-opt.on{color:#0F1319}
.cx-inline{margin:10px 18px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cx-check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.cx-check input{width:16px;height:16px;accent-color:var(--amber);cursor:pointer}
.cx-hint{font-size:11px;color:var(--text-3)}
/* ⚠️ USED NINETEEN TIMES IN fogidesk-chrome.js AND STYLED NOWHERE UNTIL NOW.
   Every "Loading…", every empty bell, every "Nothing matches", every secondary
   line under a search result and under a session was written as secondary text
   and rendered at full weight against the body colour. Nothing looked broken,
   which is why it survived: it looked like a design that simply had no
   de-emphasis. Found because check.php asserts that a class the JS TOGGLES is
   one a stylesheet really styles, and this was the first code to toggle it. */
.muted{color:var(--text-3)}
/* buyer console: tabs, tender bids, segmented control, category chips, invite list */
.tabs{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.tab{border:1px solid var(--border);background:var(--card);color:var(--text-2);font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer}
.tab.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
html.dark .tab.on{color:#0F1319}
.m-act{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.bidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding:14px 16px 18px}
.bidcard{border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.bidcard.best{border-color:var(--green-br);background:var(--green-bg)}
.bidcard.pending{opacity:.92;border-style:dashed}
.bc-top{display:flex;align-items:center;gap:10px}
.bc-id{min-width:0;flex:1}
.bc-id b{display:block;font-size:13px;color:var(--ink);font-weight:650;line-height:1.2}
.bc-id span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3)}
.bc-flag{font-size:10px;font-weight:700;color:var(--green);background:var(--card);border:1px solid var(--green-br);padding:3px 7px;border-radius:20px;white-space:nowrap}
.bc-price{font-family:"Schibsted Grotesk",Inter,sans-serif;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1}
.bc-price small{font-size:13px;font-weight:600;color:var(--text-3)}
.bc-note{font-size:12px;color:var(--text-2);line-height:1.5}
.bc-at{font-size:11px;color:var(--text-3)}
.bc-award{width:100%;justify-content:center;margin-top:2px}
.bc-wait{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-3);padding:6px 0}
.bc-wait svg{width:15px;height:15px;flex-shrink:0}
.rate{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:650;color:var(--amber)}
.rate svg{width:12px;height:12px}
.seg2{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:4px}
.seg2b{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);padding:7px 14px;border-radius:7px;cursor:pointer}
.seg2b.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.chipwrap{display:flex;flex-wrap:wrap;gap:7px}
.pchip{border:1px solid var(--border);background:var(--card);color:var(--text-2);font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer}
.pchip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
html.dark .pchip.on{color:#0F1319}
.invlist{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto;margin-bottom:4px}
.invrow{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer}
.invrow:hover{background:var(--bg)}
.invrow input{width:16px;height:16px;accent-color:var(--brand);flex-shrink:0}
.budget-copy-row .tt{display:flex;min-width:0;flex-direction:column;gap:2px}
.budget-copy-row .tt b{font-size:13px;line-height:1.25;color:var(--ink)}
.budget-copy-row .tt span{font-size:11.5px;line-height:1.4;color:var(--text-3)}
.budget-start-actions{gap:12px}
.approval-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
/* add-on hero (client "Leverandører" · own-subcontractors upsell) */
.addon-hero{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--green-br);background:var(--green-bg);border-radius:14px;margin-bottom:14px}
.ah-ic{width:38px;height:38px;border-radius:11px;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--green);flex-shrink:0}
.ah-ic svg{width:20px;height:20px}
.ah-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ah-txt b{font-size:13px;color:var(--ink);font-weight:650}
.ah-txt>span{font-size:12px;color:var(--text-2);line-height:1.5}
/* accounting connect cards (standalone · Regnskabsintegration) */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;padding:14px 18px 18px}
.acct-card{border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--card)}
.acct-top{display:flex;align-items:center;gap:11px}
.acct-logo{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0;letter-spacing:-.02em}
.acct-id b{display:block;font-size:13.5px;color:var(--ink);font-weight:650;line-height:1.15}
.acct-id span{font-size:11px;color:var(--text-3)}
.acct-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.acct-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-3)}
.acct-status.on{color:var(--green)}
.acct-status i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
/* filter bar (compact · sits under the toolbar/tabs of a list card) */
.filterbar{display:flex;align-items:center;gap:7px;padding:10px 14px;flex-wrap:wrap;border-top:1px solid var(--border-2)}
.tbl>.filterbar:first-child,.filterbar.flush{border-top:none}
.filterbar .ficon{display:inline-flex;color:var(--text-3);flex-shrink:0;margin-right:1px}
.filterbar .ficon svg{width:14px;height:14px;display:block}
.filterbar .fbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-right:1px}
.fsel{position:relative;display:inline-flex}
.fsel select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  height:31px;background:var(--card);border:1px solid var(--border);border-radius:8px;
  font:inherit;font-size:12px;font-weight:600;color:var(--text-2);
  padding:0 27px 0 11px;cursor:pointer;max-width:180px;
  box-shadow:var(--shadow-sm);transition:border-color .14s,color .14s,background .14s;
}
.fsel select:hover{border-color:#CBD6E4;color:var(--ink)}
.fsel select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,74,140,.1)}
.fsel.act select{border-color:var(--brand);color:var(--brand);background:var(--brand-50);font-weight:650}
/* ⚠️ `.act` IS ALSO THE ACTIVITY ROW (above: width:100%, padding, a grid and a
   border between two of them), so every filter that was switched on took a
   whole line of the filter bar, and two side by side got a rule between them.
   Seen on People once state and region were chosen together (WP36). */
.fsel.act{width:auto;padding:0;border-radius:0;cursor:auto}
.fsel.act + .fsel.act{border-top:0}
.fsel.act:hover{background:none}
.fsel::after{content:"";position:absolute;right:11px;top:50%;transform:translateY(-70%) rotate(45deg);width:5px;height:5px;border-right:1.7px solid var(--text-3);border-bottom:1.7px solid var(--text-3);pointer-events:none;transition:border-color .14s}
.fsel.act::after{border-color:var(--brand)}
html.dark .fsel select:hover{border-color:#3A4556}
html.dark .fsel.act select{background:rgba(91,150,224,.14)}
html.dark .fsel select:focus{box-shadow:0 0 0 3px rgba(91,150,224,.12)}
/* toggle-style filter chip (e.g. tags, quick booleans) */
.fchip{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 11px;border-radius:8px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm);font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;transition:border-color .14s,color .14s,background .14s;white-space:nowrap}
.fchip:hover{border-color:#CBD6E4;color:var(--ink)}
.fchip .fdot{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.fchip.act{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
html.dark .fchip:hover{border-color:#3A4556}
html.dark .fchip.act{background:rgba(91,150,224,.14)}
.fclear{border:none;background:none;font:inherit;font-size:12px;font-weight:650;color:var(--brand);cursor:pointer;padding:6px 9px;border-radius:7px}
.fclear:hover{background:var(--brand-50)}
html.dark .fclear:hover{background:rgba(91,150,224,.14)}
/* A day in the filter row (WP31): the two days head office's list is
   reported between, looking like the selects beside them. */
.fdate{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 4px 0 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);box-shadow:var(--shadow-sm)}
.fdate .fbl{margin:0}
.fdate input{border:0;background:transparent;font:inherit;font-size:12px;font-weight:600;color:var(--text-2);outline:0;height:29px}
.fdate.act{border-color:var(--brand);background:var(--brand-50)}
.fdate.act input{color:var(--brand)}
html.dark .fdate.act{background:rgba(91,150,224,.14)}
html.dark .fdate input{color-scheme:dark}
/* The deadline column on a case list: when, and how it stands; red once missed. */
.trow .dl{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.trow .dl b{font-size:12.5px;font-weight:650;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .dl span{font-size:11px;color:var(--text-3)}
.trow .dl.breach b,.trow .dl.breach span{color:var(--red)}
.trow .dl.at_risk span,.trow .dl.paused span{color:var(--amber)}
.trow .dl.met span{color:var(--green)}
.fcount{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;padding-left:6px;white-space:nowrap}

/* ============ Dark theme (html.dark) ============ */
html.dark{
  --brand:#5B96E0; --brand-600:#6BA3E8; --brand-700:#7FB1EE;
  --brand-100:#1D3352; --brand-50:#152840;
  --ink:#F1F5FA; --text:#D8DFE9; --text-2:#9AA6B7; --text-3:#8A96A8; /* audit: kontrastløft i mørkt tema */
  --bg:#0F1319; --card:#171C24; --border:#252D39; --border-2:#1E2530;
  --green:#5BD48E; --green-bg:#0F2818; --green-br:#1E4A2E;
  --amber:#E8B04B; --amber-bg:#2A2110; --amber-br:#4A3A17;
  --red:#F07566; --red-bg:#2C1614; --red-br:#543029;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 60px -24px rgba(0,0,0,.8);
}
html.dark body{background:var(--bg)}
html.dark .side{background:#12161E}
html.dark .nav-item:hover,html.dark .side-user:hover{background:#1B212C}
html.dark .topbar{background:rgba(15,19,25,.86)}
html.dark .search:hover{background:#1B212C;border-color:#334052}
html.dark .search kbd{background:#12161E;border-color:var(--border)}
html.dark .pill.on{color:#0F1319}
html.dark .itab.on{color:#0F1319}
html.dark .itab.on.notetab{color:#fff}
html.dark .sw-btn{color:#0F1319}
html.dark .store{background:#171C24}
html.dark .store.amber{background:#221D11}
html.dark .store.red{background:#251512}
html.dark .store.grey{background:#14181E}
html.dark .store.quiet{background:#1C1A14}
html.dark .trow-h{background:#131820}
html.dark button.trow:hover{background:#1B212C}
html.dark .t-search{background:#12161E}
html.dark .t-search:focus-within{background:#171C24;border-color:#33507A;box-shadow:0 0 0 3px rgba(91,150,224,.12)}
html.dark .f-input{background:#12161E;border-color:var(--border);color:var(--text)}
html.dark .f-input:focus{border-color:#33507A;box-shadow:0 0 0 3px rgba(91,150,224,.12)}
html.dark .composer{background:#171C24}
html.dark .composer:focus-within{border-color:#33507A;box-shadow:0 0 0 3px rgba(91,150,224,.12)}
html.dark .composer input{color:var(--text)}
html.dark .revision-box textarea{background:#12161E;color:var(--text);border-color:var(--border)}
html.dark .tgl{background:#2A3240}
html.dark .radio-pill,html.dark .cat-tile,html.dark .urg,html.dark .faq details{background:#171C24}
html.dark .cat-tile:hover,html.dark .radio-pill:hover,html.dark .urg:hover{border-color:#3A455699}
html.dark .appr-card{background:linear-gradient(180deg,#241D0E,#1E180B)}
html.dark .appr-empty{background:#141922}
html.dark .offer{background:linear-gradient(180deg,#171C24,#151E2C)}
html.dark .cmd{background:rgba(23,28,36,.97);border-color:rgba(255,255,255,.06)}
html.dark .cmd-in input{color:var(--ink)}
html.dark .citem .ci{background:#202734;border-color:var(--border)}
html.dark .citem.sel{background:var(--brand-50)}
html.dark .toast{background:#EAF0F7;color:#0F1319}
html.dark .proto{background:rgba(23,28,36,.85);border-color:var(--border)}
html.dark .doc .dic,html.dark .rolechip,html.dark .case-id,html.dark .step .ic,html.dark .sysline .sic{background:#202734;border-color:var(--border)}
html.dark .step .ic{border-color:#202734}
html.dark .step.done .ic{background:var(--green-dot);border-color:var(--green-dot)}
html.dark .step.cur .ic{background:#171C24}
html.dark .tag.med{background:#3A2E12;color:#E8B04B}
html.dark .tag.hoj{background:#3A211A;color:#F08A66}
html.dark .tag.lav{background:#202734;color:var(--text-2)}
html.dark .bar-track{background:#222938}
html.dark .hi::before{background:#171C24}
html.dark .hi.ok::before{background:var(--green-dot)}
html.dark .cbtn{background:#171C24}
html.dark .cbtn:hover{background:var(--brand-50)}
html.dark .conn-hero{background:linear-gradient(180deg,#12251A,#0F2016)}
html.dark .cc-note{background:#1A202B}
html.dark .kpi.k-red{background:linear-gradient(180deg,#171C24,#241517)}
html.dark .demo-strip a{background:#171C24}
html.dark .demo-strip a:hover{border-color:#3A4556}
html.dark .done-next{background:#141922}
html.dark .domrow .suffix{background:#1A202B}
html.dark .feedline .fic{background:#202734}
html.dark .btn-ghost{background:#1B212C;border-color:var(--border);color:var(--text)}
html.dark .btn-ghost:hover{background:#222938;border-color:#3A4556}
html.dark .btn-danger{background:#1B212C;border-color:var(--border)}
html.dark .btn-danger:hover{background:var(--red-bg);border-color:var(--red-br)}
/* The primary button is the brand on the dark theme too (audit F383): two blue
   literals here threw every customer's own colour away the moment the theme
   flipped. */
html.dark .btn-primary{background:var(--brand)}
html.dark .btn-primary:hover{background:var(--brand-600)}
html.dark .icon-btn:hover{background:#1B212C;border-color:var(--border)}
html.dark .back:hover{background:#1B212C}
html.dark .pill{background:#171C24}
html.dark .csat-box,html.dark .nchip{background:#171C24}
html.dark .nchip.on{background:var(--green-bg)}
html.dark .star{color:#3A4556}
html.dark .star.on{color:var(--amber-dot)}
html.dark ::selection{background:#2A4A73}
html.dark .auth-wrap{background:radial-gradient(52% 44% at 10% 0%, rgba(91,150,224,.10), transparent 60%),radial-gradient(44% 40% at 100% 100%, rgba(34,165,94,.06), transparent 60%),var(--bg)}
/* the mini portal preview stays LIGHT on purpose: it previews the customer's portal */

/* ============ Responsive pass ============ */
.icon-btn.menu{display:none}
.scrim{position:fixed;inset:0;background:rgba(15,21,34,.42);z-index:195;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.show{opacity:1;pointer-events:auto}

@media (max-width:920px){
  .side{
    position:fixed;left:0;top:0;bottom:0;height:100dvh;z-index:220;
    width:min(280px,84vw);
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.22,.9,.3,1);
    box-shadow:none;
  }
  .side.open{transform:none;box-shadow:var(--shadow-lg)}
  /* The page behind the drawer must not scroll under it. */
  body.nav-open{overflow:hidden}
  .icon-btn.menu{display:grid}
  .topbar{padding:0 12px;gap:8px}
  .content{padding:18px 14px 96px}
  .search{width:auto;flex:1;min-width:40px;padding:0 12px}
  .search kbd{display:none}
  .search .ph{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (max-width:820px){
  /* tables: keep the essentials, drop secondary columns */
  .g-sager{grid-template-columns:76px 1.5fr 140px}
  .g-sager > :nth-child(3),.g-sager > :nth-child(4),.g-sager > :nth-child(6),.g-sager > :nth-child(7){display:none}
  .g-fakt{grid-template-columns:88px 1fr 92px 104px}
  .g-fakt > :nth-child(2),.g-fakt > :nth-child(4){display:none}
  .g-brugere{grid-template-columns:2fr 1fr 40px}
  .g-brugere > :nth-child(3),.g-brugere > :nth-child(4){display:none}
  .g-afd{grid-template-columns:1.6fr 118px 40px}
  .g-afd > :nth-child(3),.g-afd > :nth-child(4),.g-afd > :nth-child(5){display:none}
  .g-pan{grid-template-columns:1.7fr 118px 90px 40px}
  .g-pan > :nth-child(3),.g-pan > :nth-child(4),.g-pan > :nth-child(5){display:none}
  .g-tix{grid-template-columns:80px 1.6fr 150px}
  .g-tix > :nth-child(2),.g-tix > :nth-child(5),.g-tix > :nth-child(6),.g-tix > :nth-child(7){display:none}
  .g-esager{grid-template-columns:80px 1.5fr 150px}
  .g-esager > :nth-child(3),.g-esager > :nth-child(5){display:none}
  .g-comp{grid-template-columns:1.4fr 1fr}
  .g-comp > :nth-child(3),.g-comp > :nth-child(4){display:none}
  .g-audit{grid-template-columns:110px 1.6fr}
  .g-audit > :nth-child(2),.g-audit > :nth-child(4),.g-audit > :nth-child(5){display:none}
  .g-plan{grid-template-columns:1.6fr 120px}
  .g-plan > :nth-child(2),.g-plan > :nth-child(3),.g-plan > :nth-child(5){display:none}
}

@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr)!important;gap:10px;margin-bottom:16px}
  .kpi{padding:13px 14px 12px}
  .kpi .val{font-size:25px}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
  /* A stacked column item is sized to its content, and a subtitle holding one
     long token (the guide's "…portalen på carlras.fogidesk.com") made the head
     2px wider than a 375px phone. It may break inside the word instead. */
  .page-head > *{max-width:100%;min-width:0}
  .page-head .sub{overflow-wrap:anywhere}
  /* Two buttons side by side ("Udskriv hele vejledningen" and "Udskriv / gem
     som PDF") are wider than a phone; the second goes under the first. */
  .page-head .actions{flex-wrap:wrap}
  .page-head h1{font-size:22px}
  .case-head h1{font-size:19px}
  .topbar .btn-primary .bl{display:none}
  .topbar .btn-primary{padding:0 12px}
  .f-2col{grid-template-columns:1fr}
  .stores{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:8px;padding:12px 12px 14px}
  .clients-grid{grid-template-columns:1fr}
  .split2{gap:12px}
  .set-grid{gap:12px}
  .auth-card{padding:24px 20px 20px}
  .auth-card.wide{padding:22px 16px 18px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .report-hero{padding:18px 18px 20px}
  .stepper{padding:13px 10px 11px}
  .step{min-width:76px}
  .thread .ev .avatar{width:28px;height:28px;font-size:10px}
  .sysline{padding-left:38px}
  .sysline .sic{margin-left:-28px}
  .offer,.composer{margin-left:0}
  .itabs{margin-left:0}
  .rev-note{margin-left:0!important}
  .ov-cmd{padding-top:7vh}
  .m-ov{padding:10px}
  .modal{border-radius:16px}
  .oact .right{width:100%;margin-left:0}
  .conn-hero .r{margin-left:0;width:100%}
  .done-act{flex-direction:column;align-items:stretch}
  .proto{display:none}
  .switcher{display:none!important}
  .employee-home-case,.employee-case-list-row,.branch-case-row{
    grid-template-columns:70px minmax(0,1fr)!important;
    gap:8px 10px;align-items:start;padding:12px;
  }
  .employee-home-case > .tid,.employee-case-list-row > .tid,.branch-case-row > .tid{grid-column:1;grid-row:1}
  .employee-home-case > .tt,.employee-case-list-row > .tt,.branch-case-row > .tt{grid-column:2;grid-row:1}
  .employee-home-case > .case-row-priority{grid-column:1;grid-row:2}
  .employee-home-case > .case-row-status{grid-column:2;grid-row:2}
  .employee-case-list-row > .mut2{grid-column:2;grid-row:2}
  .employee-case-list-row > .case-row-priority{grid-column:1;grid-row:3}
  .employee-case-list-row > .case-row-status{grid-column:2;grid-row:3}
  .branch-case-row > :nth-child(3){grid-column:2;grid-row:2}
  .branch-case-row > :nth-child(4){grid-column:1;grid-row:2}
  .overview-tender-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:10px 12px;align-items:start;
  }
  .overview-tender-row>:nth-child(3),.overview-tender-row>:nth-child(4){display:none}
  .approval-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:10px 12px;align-items:start;
  }
  .approval-row>.tt{grid-column:1/3;grid-row:1}
  .approval-row>.mut{grid-column:1;grid-row:2}
  .approval-row>.mut2{grid-column:2;grid-row:2;text-align:right}
  .approval-row>.approval-actions{grid-column:1/3;grid-row:3;justify-content:flex-start;width:auto}
  .branch-service-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:10px 12px;align-items:start;
  }
  .branch-service-row>.tt{grid-column:1/3;grid-row:1}
  .branch-service-row>.mut{grid-column:1;grid-row:2}
  .branch-service-row>.mut2{grid-column:2;grid-row:2;text-align:right}
  .branch-service-row>.chip{grid-column:1/3;grid-row:3;justify-self:start}
  .sla-summary{gap:3px 8px}
  .sla-mini{width:100%}
}

/* ============ Tags (labels on tickets/tasks) ============ */
.tagrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ttag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:7px;font-size:11px;font-weight:650;line-height:1;white-space:nowrap;
  background:color-mix(in srgb,var(--tc,#5A6474) 13%,transparent);
  color:var(--tc,#5A6474);
  border:1px solid color-mix(in srgb,var(--tc,#5A6474) 26%,transparent)}
.ttag .tdot{width:7px;height:7px;border-radius:2px;background:var(--tc,#5A6474);flex-shrink:0}
.ttag.rm{padding-right:4px}
.ttag .tx{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:4px;cursor:pointer;opacity:.65}
.ttag .tx:hover{opacity:1;background:color-mix(in srgb,var(--tc,#5A6474) 22%,transparent)}
.ttag .tx svg{width:9px;height:9px}
.tag-add{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:7px;border:1px dashed var(--border);background:none;color:var(--text-3);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .13s,color .13s}
.tag-add:hover{border-color:var(--brand);color:var(--brand)}
.tag-add svg{width:10px;height:10px}
/* tag option (used in the tag picker + tag manager) */
.tagopt{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .13s;
  background:var(--card);color:var(--tc,#5A6474);border:1px solid color-mix(in srgb,var(--tc,#5A6474) 30%,transparent)}
.tagopt .tdot{width:9px;height:9px;border-radius:3px;background:var(--tc,#5A6474);flex-shrink:0}
.tagopt .tk{width:15px;display:inline-flex}.tagopt .tk svg{width:13px;height:13px}
.tagopt.on{background:color-mix(in srgb,var(--tc,#5A6474) 14%,transparent)}
.tagopt:hover{filter:brightness(.99);border-color:var(--tc,#5A6474)}
.tagmgr-row{display:grid;grid-template-columns:1fr 120px 40px;gap:10px;align-items:center;padding:9px 2px;font-size:12.5px}
.tagmgr-row + .tagmgr-row{border-top:1px solid var(--border-2)}
.swatchpick{display:flex;gap:7px;flex-wrap:wrap}
.swatchpick .sw{width:24px;height:24px;border-radius:7px;cursor:pointer;border:2px solid transparent;position:relative}
.swatchpick .sw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--card) inset}

/* ============ Activity log (audit timeline) ============ */
.actlog{padding:8px 4px 4px}
.act-item{display:grid;grid-template-columns:24px 1fr;gap:11px;position:relative;padding:0 0 15px}
.act-item::before{content:"";position:absolute;left:11px;top:25px;bottom:-1px;width:1.5px;background:var(--border-2)}
.act-item:last-child{padding-bottom:2px}
.act-item:last-child::before{display:none}
.act-ic{width:24px;height:24px;border-radius:8px;background:#EFF1F5;color:var(--text-2);display:grid;place-items:center;z-index:1}
.act-ic svg{width:12px;height:12px}
.act-ic.g{background:var(--green-bg);color:var(--green)}
.act-ic.b{background:var(--brand-50);color:var(--brand)}
.act-ic.a{background:var(--amber-bg);color:var(--amber)}
.act-ic.r{background:var(--red-bg);color:var(--red)}
.act-b{font-size:12.5px;color:var(--text-2);line-height:1.5;padding-top:3px;min-width:0}
.act-b b{color:var(--ink);font-weight:650}
.act-t{display:block;font-size:11px;color:var(--text-3);margin-top:1px}
html.dark .act-ic{background:#202734}

/* ============ Stats (breakdowns) ============ */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.donutwrap{display:flex;align-items:center;gap:18px;padding:14px 18px 18px;flex-wrap:wrap}
.donut{position:relative;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.donut::before{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--card)}
.donut .dnum{position:relative;font-family:var(--font-display);font-weight:750;font-size:21px;color:var(--ink);line-height:1;text-align:center}
.donut .dsub{position:relative;font-size:10px;color:var(--text-3);margin-top:3px;text-align:center}
.legend{display:flex;flex-direction:column;gap:10px;flex:1;min-width:130px}
.leg{display:flex;align-items:center;gap:9px;font-size:12.5px}
.leg .lg-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.leg .lg-l{color:var(--text-2)}
.leg .lg-n{margin-left:auto;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.leg .lg-s{font-size:11px;color:var(--text-3);margin-left:6px;font-weight:500}
.stat-tile{border:1px solid var(--border);border-radius:13px;background:var(--card);padding:13px 15px}
.stat-tile .st-l{font-size:11.5px;color:var(--text-2);font-weight:600}
.stat-tile .st-v{font-family:var(--font-display);font-weight:750;font-size:22px;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums}
.stat-tile .st-f{font-size:11px;color:var(--text-3);margin-top:3px}
.bar-fill.cx{background:linear-gradient(90deg,#F3B13C,#DB8E08)}
.bar-fill.pur{background:linear-gradient(90deg,#9A7BE0,#6D3FB8)}
.bar-row .bl.strong{color:var(--ink);font-weight:600}

/* ============ Per-subcontractor isolation (buyer task) ============ */
.subswitch{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 12px}
.subtab{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:10px;border:1px solid var(--border);background:var(--card);cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);transition:all .14s}
.subtab .st-av{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:700;flex-shrink:0}
.subtab .st-m{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.subtab .st-bid{font-size:10.5px;color:var(--text-3);font-weight:600}
.subtab.on{border-color:var(--brand);background:var(--brand-50);color:var(--ink)}
.subtab.on .st-bid{color:var(--brand)}
.subtab:hover{border-color:#CBD6E4}
.subtab .st-badge{width:7px;height:7px;border-radius:50%;background:var(--amber-dot);flex-shrink:0}
.privhead{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--text-3);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:12px;line-height:1.45}
.privhead svg{width:15px;height:15px;flex-shrink:0;color:var(--text-3)}
.privhead b{color:var(--text-2);font-weight:650}

/* ============ Helpdesk parity (collision · followers · bulk · merge) ============ */
.viewing{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-br);border-radius:999px;padding:3px 10px 3px 3px}
.viewing .vw-av{width:18px;height:18px;border-radius:50%;background:var(--amber-dot);color:#fff;display:grid;place-items:center;font-size:8px;font-weight:700}
.viewing svg{width:12px;height:12px}
.follstack{display:flex;align-items:center;padding-left:6px}
.follstack .avatar{margin-left:-7px;border:2px solid var(--card);width:27px;height:27px;font-size:9.5px}
.follstack .fmore{margin-left:-7px;width:27px;height:27px;border-radius:50%;border:2px solid var(--card);background:#EDF0F4;color:var(--text-2);display:grid;place-items:center;font-size:10px;font-weight:700}
html.dark .follstack .fmore{background:#202734}
.bulkbar{display:flex;align-items:center;gap:11px;padding:9px 14px;background:var(--ink);color:#fff;border-radius:11px;margin-bottom:10px;animation:rise .3s both}
.bulkbar .bk-n{font-weight:700}
.bulkbar .bk-act{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.bulkbar .bkbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)}
.bulkbar .bkbtn:hover{background:rgba(255,255,255,.2)}
.bulkbar .bkbtn svg{width:12px;height:12px}
html.dark .bulkbar{background:#202734;border:1px solid var(--border)}
.rowcheck{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.linkline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);padding:7px 11px;border:1px solid var(--border);border-radius:9px;background:var(--bg);margin-bottom:8px}
.linkline svg{width:13px;height:13px;color:var(--text-3);flex-shrink:0}
.linkline b{color:var(--ink);font-weight:650}
.linkline .ll-x{margin-left:auto;color:var(--text-3);cursor:pointer;display:inline-flex}
.linkline .ll-x svg{width:12px;height:12px}
/* clickable div-rows (bulk select) */
.trow.pick{cursor:pointer}
.trow.pick:hover{background:#F8F9FB}
html.dark .trow.pick:hover{background:#1B212C}
.trow.pick.on{background:var(--brand-50)}
html.dark .trow.pick.on{background:rgba(91,150,224,.10)}
.tidcell{display:flex;align-items:center;gap:9px}
.tidcell .rowcheck{margin:0}
/* The tick column. A larger hit area than the box itself, because this is the
   one control on a row where the surrounding click does something else. */
.trow > span > input[type=checkbox],
.trow-h > span > input[type=checkbox]{
  width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--brand);vertical-align:middle;
}
.trow > span:has(> input[type=checkbox]),
.trow-h > span:has(> input[type=checkbox]){display:flex;align-items:center;padding:2px 0}
.savedrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 0 2px}
.pill.saved i{width:7px;height:7px;border-radius:2px;margin-right:5px;display:inline-block}
.pill.ghostpill{background:none;border-style:dashed;color:var(--text-3);display:inline-flex;align-items:center;gap:5px}
.pill.ghostpill:hover{color:var(--brand);border-color:var(--brand)}
.pill svg{width:13px;height:13px;flex-shrink:0;vertical-align:-2px}
/* status control on the ticket (this is where status is changed) */
.statuspick{position:relative;display:inline-flex;align-items:center;gap:6px;height:27px;padding-left:11px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text-2)}
.statuspick i.d{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.statuspick select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;font:inherit;font-size:12px;font-weight:650;color:inherit;padding:0 25px 0 5px;height:27px;cursor:pointer}
.statuspick select:focus{outline:none}
.statuspick::after{content:"";position:absolute;right:11px;top:50%;transform:translateY(-62%) rotate(45deg);width:5px;height:5px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;pointer-events:none;opacity:.65}
.statuspick:hover{filter:brightness(.985)}
.statuspick.s-progress,.statuspick.s-planned{color:var(--brand);background:var(--brand-50);border-color:var(--brand-100)}
.statuspick.s-open,.statuspick.s-approval{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-br)}
.statuspick.s-waiting,.statuspick.s-onhold{color:var(--text-2);background:#F2F3F6;border-color:var(--border)}
.statuspick.s-solved{color:var(--green);background:var(--green-bg);border-color:var(--green-br)}
html.dark .statuspick.s-waiting,html.dark .statuspick.s-onhold{background:#202734}

/* ============================================================
   AUDIT ROUND 2026-07-23 · shared foundation
   ============================================================ */

/* Skip link (a11y) */
.skiplink{position:fixed;top:-48px;left:14px;z-index:200;background:var(--ink);color:var(--card);font-size:12.5px;font-weight:700;padding:9px 15px;border-radius:0 0 10px 10px;transition:top .15s ease;text-decoration:none}
.skiplink:focus-visible{top:0;outline:2px solid var(--brand);outline-offset:2px}

/* Reduced motion: sluk indløbs- og pulsanimationer */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Touch targets på grove pegeredskaber */
@media (pointer: coarse){
  .btn.sm,.cbtn,.fsel select,.tab,.seg2 button,.attach,.send{min-height:44px}
  .nav-item{min-height:44px}
  /* The primary button and the icon buttons were 38px, under the 44px a
     thumb needs; the poster's Send measured 42. */
  .btn,.icon-btn{min-height:44px}
  .icon-btn{min-width:44px}
}
/* ⚠️ iOS ZOOMS THE PAGE ON EVERY FOCUS BELOW 16PX, and every field in the
   product was 13.5 or 14. The layout jumped on each tap. Sixteen on anything
   touch-driven or phone-wide; maximum-scale is deliberately NOT set, so pinch
   zoom stays for the people who need it. */
@media (pointer: coarse), (max-width: 640px){
  .f-input,select.f-input,textarea.f-input,.composer input,.auth-field .f-input{font-size:16px;min-height:44px}
}
/* A modal is never taller than the screen that is left, and on a phone it is
   a sheet from the bottom whose buttons stay in reach above the keyboard. */
.modal{max-height:calc(100dvh - 24px)}
@media (max-width:640px){
  .m-ov{align-items:end;justify-items:stretch;padding:0}
  .modal{width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:calc(100dvh - 12px)}
  .m-f{position:sticky;bottom:0;background:var(--card);padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

/* Inline feltvalidering */
.f-err{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--red);margin-top:5px;line-height:1.35}
.f-err svg{width:12px;height:12px;flex-shrink:0}
.f-input.err{border-color:var(--red) !important;box-shadow:0 0 0 3px rgba(199,74,58,.12)}
html.dark .f-input.err{box-shadow:0 0 0 3px rgba(240,117,102,.14)}

/* Truthful labelling: simuleret vs. roadmap */
.simtag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-br);border-radius:6px;padding:2px 7px;vertical-align:2px}
.roadtag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:none;border:1px dashed var(--border);border-radius:6px;padding:2px 7px;vertical-align:2px}
.roadcard{opacity:.72}
.roadcard:hover{opacity:1}

/* Vedhæftnings-chips (foto i indmeldingsflows) */
.attach-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.attach-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--text);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:9px;padding:6px 8px 6px 10px;max-width:240px}
.attach-chip svg{width:13px;height:13px;color:var(--brand);flex-shrink:0}
.attach-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.attach-chip .rm{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:none;color:var(--text-3);cursor:pointer;border-radius:5px;font-size:13px;line-height:1}
.attach-chip .rm:hover{background:rgba(0,0,0,.07);color:var(--red)}

/* Not-found side */
.nf-wrap{max-width:520px;margin:60px auto 0;text-align:center}
.nf-code{font-family:var(--font-display);font-size:46px;font-weight:800;color:var(--text-3);letter-spacing:.02em}
.nf-wrap h1{margin:6px 0 8px}
.nf-wrap p{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0 0 18px}

/* Økonomi-ordforråd · legend + stacked budget-bar */
.fin-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2);align-items:center}
.fin-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.bgt-bar{position:relative;height:14px;border-radius:7px;background:var(--border-2);overflow:hidden;display:flex}
.bgt-bar .seg{height:100%}
.bgt-bar .seg.actual{background:var(--brand)}
.bgt-bar .seg.commit{background:var(--brand);opacity:.45}
.bgt-bar .seg.forecast{background:repeating-linear-gradient(-45deg,var(--amber-dot) 0 4px,transparent 4px 8px);opacity:.75}
.bgt-bar.over{box-shadow:0 0 0 1.5px var(--red)}
.bgt-row{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr 110px;gap:12px;align-items:center;padding:9px 18px;border-top:1px solid var(--border-2);font-size:12.5px}
.bgt-row:first-child{border-top:none}
.bgt-row .bl{font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgt-row .bl span{display:block;font-weight:500;font-size:11px;color:var(--text-3)}
.bgt-row .bv{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bgt-row .bv small{display:block;font-weight:550;font-size:10.5px;color:var(--text-3)}
.bgt-row.over .bv{color:var(--red)}

/* Budget-KPI'er med præcise begreber */
.finkpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.finkpi .fk{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:12px 14px}
.finkpi .fk .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:6px}
.finkpi .fk .l i{width:8px;height:8px;border-radius:3px;display:inline-block;flex-shrink:0}
.finkpi .fk .v{font-family:var(--font-display);font-size:19px;font-weight:750;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums}
.finkpi .fk .v small{font-size:11.5px;font-weight:600;color:var(--text-3)}
.finkpi .fk .f{font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.4}
.finkpi .fk.neg .v{color:var(--red)}

/* Definition-tooltips på metrikker */
.defhint{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--border);color:var(--text-3);font-size:9.5px;font-weight:800;cursor:help;vertical-align:1px;margin-left:5px}
.defhint:hover::after,.defhint:focus-visible::after{content:attr(data-def);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);width:230px;background:var(--ink);color:var(--card);font-size:11px;font-weight:550;line-height:1.5;padding:9px 11px;border-radius:9px;z-index:60;box-shadow:var(--shadow-lg);text-transform:none;letter-spacing:0;white-space:normal;text-align:left}
html.dark .defhint:hover::after,html.dark .defhint:focus-visible::after{background:#E8EDF4;color:#1A212B}

/* Kilde & friskhed-linje under rapporter */
.srcline{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-3);padding:10px 18px;border-top:1px dashed var(--border)}
.srcline svg{width:12px;height:12px;flex-shrink:0}

/* Fakturadetalje-modal */
.inv-lines{border:1px solid var(--border);border-radius:11px;overflow:hidden;margin:10px 0 4px}
.inv-line{display:grid;grid-template-columns:1fr 90px 110px;gap:10px;padding:9px 13px;font-size:12.5px;border-top:1px solid var(--border-2);align-items:center}
.inv-line:first-child{border-top:none}
.inv-line .t{font-weight:600;color:var(--text)}
.inv-line .t span{display:block;font-weight:500;font-size:11px;color:var(--text-3)}
.inv-line .a{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.inv-line.sum{background:var(--bg);font-weight:750}

/* Historik/audit-blok i modaler */
.audit-line{display:flex;gap:9px;font-size:12px;color:var(--text-2);padding:7px 0;border-top:1px dashed var(--border-2);line-height:1.5}
.audit-line:first-child{border-top:none}
.audit-line .when{flex-shrink:0;font-weight:650;color:var(--text-3);width:88px}

/* Kategori-manager (buyer) */
.catrow{display:grid;grid-template-columns:minmax(140px,1.4fr) 1fr 120px 120px;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid var(--border-2);font-size:12.5px}
.catrow:first-child{border-top:none}
.catrow.archived{opacity:.55}
.catrow .cn{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--text)}
.catrow .cn svg{width:15px;height:15px;color:var(--text-3);flex-shrink:0}
.catrow .cn .cid{font-size:10px;font-weight:600;color:var(--text-3);background:var(--bg);border:1px solid var(--border-2);padding:1px 6px;border-radius:5px}
.catrow .acts{display:flex;gap:6px;justify-content:flex-end}

/* Kontrast: amber-tekst på hvid gjort mørkere hvor den står alene */
.mut-amber{color:#8A5202;font-weight:650}
html.dark .mut-amber{color:var(--amber)}

/* Genbrugelig tom/ikke-fundet tilstand i lister */
.empty-nf{padding:26px 18px;text-align:center;font-size:12.5px;color:var(--text-3);line-height:1.6}

/* Kontering låst efter godkendelse (audit) */
.cx-seg.locked{opacity:.75;position:relative}
.cx-seg.locked .cx-opt{cursor:not-allowed}
.cx-seg.locked .cx-opt.on{cursor:pointer} /* den aktive kan klikkes for ompostering-med-begrundelse */
.cx-seg.locked .cx-opt:not(.on){cursor:pointer} /* klik åbner ompostering-dialogen */

/* Audit P0-05b: tabeller med inline-kolonner må ALDRIG klippes væk på smalle skærme ·
   de scroller i deres egen container, så alt indhold kan nås */
@media (max-width:820px){
  .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl .trow[style*="grid-template-columns"],
  .tbl .trow-h[style*="grid-template-columns"]{min-width:620px}
  .tbl .catrow{min-width:620px}
  /* Head office's case list has seven columns (WP31); it scrolls as one. */
  .tbl .hqlist{min-width:920px}
  /* The location register has up to eight columns, six of them fixed (578px
     before a gap): at 620px its name column came out 0px wide, so the one
     thing a row is for could not be read. */
  .tbl .trow.brow[style*="grid-template-columns"],
  .tbl .trow-h.brow[style*="grid-template-columns"]{min-width:980px}
  /* ⚠️ THE SAME RULE FOR ROWS THAT SIT IN A PANEL RATHER THAN A .tbl. The
     groups under the location register, the SLA targets and "who is on what"
     are inline-column rows inside a .panel, and nothing let them scroll: at
     375px they pushed the whole page 134px and 236px sideways (walk, 28 Sep).
     Their own wrapper scrolls instead, never the panel, whose menus and
     hints must not be cut off. */
  .panel div:has(> .trow[style*="grid-template-columns"]),
  .panel div:has(> .trow-h[style*="grid-template-columns"]){overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Where the rows are the panel's own children (support access, retention
     holds) there is no wrapper, and the panel is the only box that can. */
  .panel:has(> .trow[style*="grid-template-columns"]),
  .panel:has(> .trow-h[style*="grid-template-columns"]){overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 760, not the .tbl's 620: these rows carry more fixed columns (the SLA
     targets alone are 530px of them), and at 620 their one free column, the
     one that says what the row is, came out 6px wide. */
  .panel .trow[style*="grid-template-columns"],
  .panel .trow-h[style*="grid-template-columns"]{min-width:760px}
  .budget-branch-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .budget-branch-table .trow[style*="grid-template-columns"],
  .budget-branch-table .trow-h[style*="grid-template-columns"]{min-width:620px}
  .finkpi{grid-template-columns:repeat(2,1fr)}
  .bgt-row{grid-template-columns:minmax(90px,1fr) 1.4fr 92px;padding:9px 12px}
}
@media (max-width:480px){
  .finkpi{grid-template-columns:1fr 1fr}
  .stepper{
    display:grid;grid-template-columns:1fr;gap:8px;overflow:visible;
    padding:12px 14px!important;
  }
  .step{
    min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);
    gap:9px;text-align:left;align-items:start;
  }
  .step::before{
    top:-9px;bottom:auto;left:11px;right:auto;width:2px;height:9px;
  }
  .step>i{margin:0;width:22px;height:22px;grid-column:1;grid-row:1}
  .step>span{grid-column:2;grid-row:1;margin:0;font-size:inherit}
  .step>span>b{margin:1px 0 0;font-size:11px;line-height:1.25}
  .step>span>small{margin-top:2px;font-size:9.5px;line-height:1.35}
}

/* --------------------------------------------------------------------------
   .callout · 25 jul 2026
   Klassen blev brugt 18 steder i kundeportalen og havde ingen regel overhovedet:
   gennemsigtig baggrund, ingen ramme, ingen luft, og <b> løb direkte ind i
   <span>. Fundet under budgetarbejdet, men det ramte alle eksisterende skærme.
   Formsproget følger .op-callout i operatørkonsollen; farverne kommer fra
   design-tokens, så mørk tilstand følger med af sig selv.
   -------------------------------------------------------------------------- */
.callout{
  display:block;
  padding:11px 12px;
  margin-top:10px;
  border:1px solid var(--border-2);
  border-radius:9px 9px 4px 9px;
  background:var(--bg);
  color:var(--text-2);
  font-size:12px;
  line-height:1.55;
}
/* Kun overskriften er blok. Et <b> inde i brødteksten skal blive inline,
   ellers brækker "70.000 DKK" over to linjer. */
.callout > b:first-child{
  display:block;
  margin-bottom:3px;
  color:var(--text);
  font-weight:600;
}
.callout > span{ display:block }
.callout > span b{ color:var(--text); font-weight:600 }
.callout + .callout{ margin-top:8px }

.callout.warn{
  border-color:var(--amber-br);
  background:var(--amber-bg);
  color:var(--amber);
}
.callout.warn > b:first-child{ color:var(--amber) }

.callout.danger{
  border-color:var(--red-br);
  background:var(--red-bg);
  color:var(--red);
}
.callout.danger > b:first-child{ color:var(--red) }

/* ---------------------------------------------------------------------------
   Fælles organisationslag (fogidesk-org.js) · 25 jul 2026
   Grupperækkerne lånte .bgt-row, som er bygget til budgetsidens tre kolonner
   med white-space:nowrap. I en smallere modal klippede den undertekster midt i
   et ord ("ejer budgetlinj"). Egen række, der må ombryde.
   --------------------------------------------------------------------------- */
.org-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:10px 0;border-top:1px solid var(--border-2);font-size:12.5px}
.org-row:first-of-type{border-top:none}
.org-row .ol{font-weight:650;color:var(--text);min-width:0}
.org-row .ol span{display:block;font-weight:500;font-size:11px;color:var(--text-3);
  line-height:1.5;white-space:normal}
.org-row .oa{display:flex;gap:6px;flex-shrink:0}
.org-empty{padding:18px 0;text-align:center;color:var(--text-3);font-size:13px}
@media (max-width:560px){
  .org-row{flex-direction:column;gap:8px}
  .org-row .oa{width:100%}
  .org-row .oa .btn{flex:1}
}

/* ---------------------------------------------------------------------------
   Budget · redigering dér hvor tallet står (fogidesk-budget.js) · 26 jul 2026
   Ejeren bad tre gange om en LETTERE måde at rette en budgetlinje. Den lette
   måde er ikke en dialog · det er et tal, man kan klikke på.
   --------------------------------------------------------------------------- */
.amt-edit{background:none;border:none;padding:0 2px;margin:0;font:inherit;color:var(--brand);
  cursor:pointer;border-bottom:1px dashed var(--brand);border-radius:0}
.amt-edit:hover{background:var(--brand-bg,rgba(14,74,140,.07))}
.amt-edit:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Beløbskolonnen er 110px, og et åbent felt med modpost er bredere. Rækken
   giver plads MENS den redigeres i stedet for at lade feltet flyde ud over
   panelets kant. */
.bgt-row:has(.amt-inline){grid-template-columns:minmax(100px,1fr) 1.5fr 200px}
.amt-inline{display:flex;flex-direction:column;gap:4px;align-items:stretch;width:100%}
.amt-inline .amt-input{width:100%;text-align:right;font-variant-numeric:tabular-nums;
  font-size:13px;padding:5px 8px;border:1px solid var(--brand);border-radius:7px;
  background:var(--card);color:var(--text)}
.amt-inline .amt-counter{width:100%;font-size:10.5px;padding:3px 5px;
  border:1px solid var(--border-2);border-radius:6px;background:var(--card);color:var(--text-3)}
.lnk-row{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--text);
  cursor:pointer;text-align:left;border-bottom:1px dashed var(--border-2)}
.lnk-row:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* Undertekster i budgetrækker må ombryde. .bl står med nowrap for at holde
   navnet på én linje, men underteksten arvede den og blev klippet midt i et
   ord ("fordelt pr. restaura"). */
.bgt-row .bl span{white-space:normal;line-height:1.45}

/* ---------- your account ----------
   The sessions list inside the account panel. `.pill` already exists as a
   filter chip; here it is a static marker on the row that is this browser, so
   it takes .pill.here rather than a second class that looks like a chip and
   is not clickable. */
.acct-session{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.acct-session:last-child{border-bottom:0}
.acct-session .pill{cursor:default;margin-left:6px}
.acct-session .pill:hover{border-color:var(--line);color:var(--text-3)}

/* ============ "you are running yesterday's code" ============
   Shown when the server's build no longer matches the one this page loaded.
   Deliberately a bar the person dismisses by using it, not a toast that
   disappears: the whole failure it addresses is somebody not knowing there is
   anything to know. */
.build-bar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:500;
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;
  padding:11px 12px 11px 18px;border-radius:12px;
  box-shadow:var(--shadow-lg);
  font-size:13px;font-weight:500;
  max-width:min(560px,calc(100vw - 32px));
}
.build-bar button{
  background:#fff;color:var(--ink);
  border-radius:8px;padding:7px 14px;
  font-size:12.5px;font-weight:650;white-space:nowrap;
}
.build-bar button:hover{background:#EEF1F5}

/* ============ a file in the conversation ============
   The thread used to say "somebody attached a file" and leave you to find it
   in a card on the other side of the screen. A photograph of a leak is the
   message, not a footnote to it.

   ⚠️ EVERY CLASS HERE IS PREFIXED `fl-`, AND THAT IS NOT STYLE PEDANTRY. The
   first version used .photo, .cap and .ph — all three already meant something
   else in this stylesheet. `.photo span` is a caption overlaid on a photo
   tile, `position:absolute`, so the file's own caption was thrown on top of
   its thumbnail. Nothing errored; it just looked broken. A shared stylesheet
   has one namespace and a generic name in it is a name somebody already
   took. */
.fileline{
  display:flex;align-items:center;gap:11px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:10px 12px;margin:2px 0 2px 52px;font-size:12.5px;
  /* ⚠️ WIDTH, NOT align-self:stretch. `.thread` is a column flex container so
     stretch is what should size this, and it does not — the card came out at
     its own content width. Measured both in the browser before choosing. 52px
     is the avatar gutter, so a file lines up with the conversation. */
  width:calc(100% - 52px);
}
.fileline .fl-icon{
  width:30px;height:30px;border-radius:9px;background:#F2F3F6;color:var(--text-2);
  display:grid;place-items:center;flex-shrink:0;
}
.fileline .fl-icon svg{width:14px;height:14px}
.fileline .fl-meta{flex:1;min-width:0}
.fileline .fl-meta b{font-weight:600;color:var(--ink);display:block;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fileline .fl-meta span{font-size:10.5px;color:var(--text-3)}
.fileline .cbtn{flex-shrink:0}

/* The picture itself. A fixed frame so the thread does not jump about while
   each one arrives, and object-fit so nothing is stretched. */
.fileline.fl-image{align-items:flex-start}
.fileline .fl-thumb{
  width:96px;height:72px;flex-shrink:0;padding:0;
  border-radius:9px;overflow:hidden;background:#F2F3F6;
  display:grid;place-items:center;color:var(--text-3);
  border:1px solid var(--border-2);transition:all .15s;
}
.fileline .fl-thumb:hover{border-color:var(--brand-100);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.fileline .fl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fileline .fl-thumb .fl-ph svg{width:16px;height:16px}

/* Larger. The modal supplies the frame, the header and Escape. */
.lightbox{display:flex;justify-content:center;padding:0}
.lightbox img{
  max-width:100%;max-height:70vh;object-fit:contain;
  border-radius:var(--r-md);background:#F2F3F6;
}

@media (max-width:920px){
  .fileline{margin-left:0;width:100%}
  .fileline .fl-thumb{width:78px;height:60px}
}

/* ============ the planning board (provider desk, Wave 3 §6 first slice) ============
 * Seven days across, one row per person. Scrolls sideways inside its own box
 * rather than the page, like every wide table here. */
.board{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow-x:auto}
.board-head,.board-row{display:grid;grid-template-columns:170px repeat(7,minmax(150px,1fr));min-width:1220px}
.board-head{border-bottom:1px solid var(--border)}
.board-head span{padding:10px 12px;font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;display:flex;flex-direction:column;gap:2px}
.board-head span small{text-transform:none;letter-spacing:0;color:var(--text-3);font-size:11px}
.board-head .today b{color:var(--brand)}
.board-row{border-bottom:1px solid var(--border)}
.board-row:last-child{border-bottom:0}
.board-who{padding:12px;display:flex;flex-direction:column;gap:3px;border-right:1px solid var(--border);font-size:13px;min-width:0}
.board-who small{color:var(--text-3);font-size:11.5px}
.board-cell{padding:8px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--border-2);min-height:58px;min-width:0}
.board-cell:last-child{border-right:0}
.board-card{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;width:100%;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-sm);padding:7px 9px;font:inherit;color:var(--text);cursor:pointer;min-width:0}
.board-card:hover,.board-card:focus-visible{border-color:var(--brand);outline:none}
.board-card time{font-size:11px;color:var(--brand);font-weight:600}
.board-card b{font-size:11.5px}
.board-card span{font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.board-card small{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.board-empty{padding:34px 20px;text-align:center;color:var(--text-2);font-size:13px}
.board-note{margin-top:14px;font-size:12.5px;color:var(--text-2)}
.board-note a{color:var(--brand)}

/* --------------------------------------------------------------------------
   The store's profile (WP20): address, phone, contact, hours, the way in.
   One card in the desk's and head office's case rail, on the store's page
   and at the top of the job a craftsman opens on a phone, where the links
   are the thing he taps: big enough for a thumb, the address and each number
   on their own line.
   -------------------------------------------------------------------------- */
.store-card .store-name{font-weight:700;color:var(--ink);font-size:13.5px;margin-bottom:4px}
.store-card .kv{align-items:flex-start}
.store-card .kv .v{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;overflow-wrap:anywhere}
.store-card .kv .v a{color:var(--brand);text-decoration:none;font-weight:650}
.store-card .kv .v a:hover{text-decoration:underline}
.store-card .store-hour{font-weight:600}
.store-card .store-hour.note{font-weight:500;color:var(--text-2)}
.store-card .store-note{display:grid;gap:2px;font-size:12.5px;line-height:1.5;padding:8px 0 2px;border-top:1px solid var(--border-2);color:var(--text-2);overflow-wrap:anywhere}
.store-card .store-note b{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.store-card .store-note.key b{color:var(--amber)}
.thread > .store-card{margin-bottom:14px}
.tt b .chip{margin-right:6px;vertical-align:1px}
.sub-due.red{color:var(--red);font-weight:650}
.sub-due.amber{color:var(--amber);font-weight:650}
@media (max-width:640px){
  .store-card .kv{flex-direction:column;gap:2px}
  .store-card .kv .v{align-items:flex-start;text-align:left}
  .store-card .kv .v a{display:inline-block;padding:4px 0;font-size:15px}
}

/* ⚠️ A PHONE HAD TO SCROLL EVERY LIST SIDEWAYS TO READ THE ONE THING IN IT
   THAT SAYS WHAT TO DO (WP20, audit L12-05). The rule above keeps a desktop
   table whole by making it 620px wide and scrollable, so on a 375px phone
   the status chip of a craftsman's job, and the amount on an approval, sat
   off screen. A list marked `cards` turns into cards under 640px instead:
   the cell marked data-col="ref" and the one marked "status" share the first
   line, everything else stacks below it at full width, the title first. */
@media (max-width:640px){
  .tbl.cards{overflow-x:visible}
  .tbl.cards .trow-h{display:none}
  .tbl.cards .trow[style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) auto!important;min-width:0;gap:4px 10px;padding:12px 14px;align-items:center
  }
  .tbl.cards .trow > *{grid-column:1/-1;order:1}
  .tbl.cards .trow > [data-col="ref"]{grid-column:1;order:-2}
  .tbl.cards .trow > [data-col="status"]{grid-column:2;order:-1;justify-self:end}
  .tbl.cards .trow > [data-col="title"]{order:0}
  .tbl.cards .trow > [data-col="hide"]{display:none}
}

/* ============ The approvals queue and the customer's own note (WP25) ============
   The queue carries what an approver decides on (L03-06): seven columns on a
   desk, and on a phone the reference and amount first, the title, then the
   limit, the wait and the budget as labelled lines. A row this reader may not
   answer says why in amber under the title. */
.appr-queue-row .aq-amt{font-variant-numeric:tabular-nums}
.appr-queue-row .aq-block{display:block;margin-top:3px;color:var(--amber);font-weight:600}
@media (max-width:640px){
  .appr-queue .trow-h{display:none}
  /* Not the 620px floor the other inline-grid tables keep on a phone
     (max-width:820px above): this row re-flows instead of scrolling. */
  .appr-queue-row{grid-template-columns:minmax(0,1fr) auto!important;gap:4px 10px;padding:12px;align-items:start;min-width:0!important}
  .appr-queue-row>.tid{grid-column:1;grid-row:1}
  .appr-queue-row>.aq-amt{grid-column:2;grid-row:1;text-align:right}
  .appr-queue-row>.tt{grid-column:1/3;grid-row:2}
  .appr-queue-row>.aq-store{grid-column:1/3;grid-row:3}
  .appr-queue-row>[data-k]{grid-column:1/3}
  .appr-queue-row>[data-k]:not(:empty)::before{content:attr(data-k) " · ";color:var(--text-3)}
}
.note-switch{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0 44px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px dashed var(--amber-br);background:var(--amber-bg);cursor:pointer;font-size:12.5px;line-height:1.4}
.note-switch input{margin-top:2px;accent-color:var(--amber-dot)}
.note-switch b{display:block;color:var(--amber);font-weight:650}
.note-switch span span{color:var(--text-2);font-size:11.5px}
.composer.is-note{border-color:var(--amber-br);background:var(--amber-bg)}
@media (max-width:640px){.note-switch{margin-left:0}}

/* ---------- a file on its way (api.js FogiDeskUpload, WP23) ----------
   The one panel every upload draws: the poster, the store console, the
   new-case dialog and the paperclip on a case. */
.upl{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card);text-align:left}
.upl.err{border-color:var(--red-br);background:var(--red-bg)}
.upl-h{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--text-2);min-width:0}
.upl-h b{color:var(--ink);font-weight:650;flex:none}
.upl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.upl-bar{height:6px;border-radius:3px;background:var(--border-2);overflow:hidden;margin-top:8px}
.upl-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:3px;transition:width .2s}
.upl-f{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--text-3);flex-wrap:wrap}
.upl-n{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.upl-msg{font-size:12.5px;color:var(--red);margin-top:6px;line-height:1.5}
.qphoto .upl .btn{width:auto}
.upl-host:empty{display:none}

/* A video on a case plays where it is, once somebody asks for it. */
.fileline .fl-play{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:78px;height:60px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text-2);font:inherit;font-size:11px;cursor:pointer;flex-shrink:0}
.fileline .fl-play svg{width:18px;height:18px}
.fileline .fl-play:hover{border-color:var(--brand-100);color:var(--brand)}
.fileline.fl-video{align-items:flex-start;flex-wrap:wrap}
.fileline video{display:block;width:100%;max-width:420px;max-height:320px;border-radius:10px;background:#000;margin-top:6px}
.fileline .fl-heic{border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:600;color:var(--brand);cursor:pointer;white-space:nowrap;flex-shrink:0}
.fileline .fl-heic:hover{text-decoration:underline}
.lightbox-note{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:var(--text-3);padding:10px 16px 0}

/* ================= help, the written guide and the printed sheets (WP40) =================
   The guide reads like a document rather than a form: a list of chapters on
   the left, the chapter on the right at a comfortable measure, and a print
   stylesheet that takes the console away so what comes out of the printer is
   the chapter, or the whole guide, or one A4 sheet for a workshop, under the
   workspace's own mark. */

.doc-wrap + .doc-wrap{border-top:1px solid var(--border-2)}
.doc-wrap .doc + .doc{border-top:0}
.guide-video{display:block;width:100%;max-height:360px;border-radius:var(--r-md);background:#000;margin:4px 0 10px}

.guide-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.guide-grid{grid-template-columns:1fr}}
.guide-nav{position:sticky;top:76px;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
.guide-list{overflow-y:auto;padding:4px 8px 12px}
.guide-aud{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:12px 8px 4px}
.guide-item{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13px;color:var(--text);padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;line-height:1.35}
.guide-item:hover{background:var(--brand-50)}
.guide-item.on{background:var(--brand-50);color:var(--brand);font-weight:600}
.guide-main{padding:22px 26px 20px}
.guide-article{max-width:680px}
.guide-article + .guide-article{margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
.guide-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.guide-article h2{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:4px 0 12px}
.guide-body{font-size:14px;line-height:1.65;color:var(--text)}
.guide-body h2{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 6px}
.guide-body h3{font-size:14px;font-weight:700;color:var(--ink);margin:16px 0 4px}
.guide-body p{margin:0 0 10px}
.guide-body ul,.guide-body ol{margin:0 0 12px;padding-left:22px}
.guide-body li{margin:3px 0}
.guide-body strong{color:var(--ink);font-weight:650}
.guide-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.guide-body .guide-note{margin:14px 0}
.guide-foot{margin-top:18px;font-size:11.5px;color:var(--text-3)}
.guide-actions{margin-top:14px;display:flex;gap:8px}
.guide-actions:empty{display:none}
.print-head{display:none}
.print-logo{height:28px;width:auto;max-width:160px;object-fit:contain}
.print-initials{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:#fff;font-weight:800;font-size:12px}

/* ---- the A4 sheet: paper on screen too, whatever the theme ---- */
.sheet-a4{background:#fff;color:#1B2430;width:100%;max-width:210mm;min-height:297mm;margin:0 auto 24px;padding:14mm 14mm 12mm;box-shadow:var(--shadow-md);border-radius:6px;font-size:12.5px;line-height:1.5;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.sheet-a4 h2{font-family:var(--font-display);font-size:17px;font-weight:800;margin:0 0 8px;color:#0F1522}
.sheet-a4 h3{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A6474;margin:0 0 6px}
.sheet-a4 .kv{padding:5px 0;font-size:12.5px}
.sheet-a4 .kv .k{color:#5A6474}
.sheet-a4 .kv .v{color:#0F1522;overflow-wrap:anywhere;min-width:0}
.sheet-a4 .kv + .kv{border-top:1px solid #E6E9EF}
.sheet-a4 .hint{color:#5A6474;font-size:11.5px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:12px;border-bottom:3px solid}
.sheet-mark{display:flex;align-items:center;gap:12px}
.sheet-mark .print-logo{height:44px;max-width:200px}
.sheet-mark .print-initials{width:44px;height:44px;font-size:16px;border-radius:10px}
.sheet-mark b{display:block;font-family:var(--font-display);font-size:20px;font-weight:800;color:#0F1522;line-height:1.15}
.sheet-mark span{font-size:13px;color:#5A6474}
.sheet-login{display:flex;align-items:center;gap:10px;text-align:right}
.sheet-login span{display:block;font-size:10.5px;color:#5A6474;text-transform:uppercase;letter-spacing:.06em}
.sheet-login b{font-size:14px;color:#0F1522}
.sheet-qr{width:30mm;height:30mm;display:block}
.sheet-steps ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55}
.sheet-steps li{margin:0 0 7px;padding-left:2px}
.sheet-steps strong{font-weight:700}
.sheet-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.sheet-cols section,.sheet-system{border:1px solid #E6E9EF;border-radius:10px;padding:10px 12px}
.sheet-urgent{border-color:#F5D2CC !important;background:#FCEDEA}
.sheet-urgent h3{color:#BE2D20}
.sheet-big{font-family:var(--font-display);font-size:24px;font-weight:800;color:#0F1522}
.sheet-foot{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:10.5px;color:#5A6474;border-top:1px solid #E6E9EF;padding-top:8px}

@page{size:A4;margin:12mm}
@media print{
  html,body{background:#fff !important}
  html.dark{color-scheme:light}
  .side,.topbar,.no-print,.back,.toast,.skiplink,#menuBtn{display:none !important}
  .shell,.main{display:block !important;min-height:0 !important}
  #app,.view{padding:0 !important;margin:0 !important;animation:none !important}
  .rise{animation:none !important;opacity:1 !important;transform:none !important}
  .guide-grid{display:block}
  .guide-main{border:0 !important;box-shadow:none !important;padding:0 !important;background:#fff !important}
  .guide-article{max-width:none;break-inside:auto}
  .guide-article + .guide-article{break-before:page;border-top:0;margin-top:0;padding-top:0}
  .guide-body,.guide-article h2,.guide-body h2,.guide-body h3,.guide-body strong{color:#111 !important}
  .guide-body a{color:#111 !important;text-decoration:none}
  .print-head{display:flex;align-items:center;gap:10px;margin-bottom:12mm;font-size:11px;color:#555;border-bottom:1px solid #ddd;padding-bottom:4mm}
  .sheet-a4{box-shadow:none;border-radius:0;margin:0;padding:0;width:auto;max-width:none;height:272mm;min-height:0;overflow:hidden;break-after:avoid}
}