/* ============ 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}
.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}
.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:1fr}.kpis{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)}

/* Right rail */
.rail{display:flex;flex-direction:column;gap:14px}
.act-list{padding:6px 8px 8px}
.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:hover{background:#F6F7F9}
.act + .act{border-top:1px solid var(--border-2)}
.act .adot{width:8px;height:8px;border-radius:50%;margin-top:5px}
.act .adot.red{background:var(--red-dot)}
.act .adot.amber{background:var(--amber-dot)}
.act b{font-size:12.5px;font-weight:700;color:var(--ink);display:block}
.act .is{display:block;font-size:12px;color:var(--text-2);margin-top:1px;line-height:1.35}
.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: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 ============ */
.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:1fr}}

/* ============ Settings ============ */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:1180px){.set-grid{grid-template-columns: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}
.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{
  min-height:100vh;display:grid;place-items:center;padding:30px 18px 74px;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:min(432px,96vw);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:min(600px,96vw);padding:28px 30px 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-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:fixed;bottom:16px;left:0;right:0;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}
.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)}
.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)}
.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}
.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)}
.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 .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)}
html.dark .btn-primary{background:#2D6CB8}
html.dark .btn-primary:hover{background:#3B7CC9}
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:0}
  .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}
  .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}
}

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