/* layer: properties */
@property --un-inset-ring-color{syntax:"*";inherits:false;}
@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-inset-shadow-color{syntax:"*";inherits:false;}
@property --un-ring-color{syntax:"*";inherits:false;}
@property --un-ring-inset{syntax:"*";inherits:false;}
@property --un-ring-offset-color{syntax:"*";inherits:false;}
@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}
@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}
@property --un-shadow-color{syntax:"*";inherits:false;}
@property --un-blur{syntax:"*";inherits:false;}
@property --un-brightness{syntax:"*";inherits:false;}
@property --un-contrast{syntax:"*";inherits:false;}
@property --un-drop-shadow{syntax:"*";inherits:false;}
@property --un-grayscale{syntax:"*";inherits:false;}
@property --un-hue-rotate{syntax:"*";inherits:false;}
@property --un-invert{syntax:"*";inherits:false;}
@property --un-saturate{syntax:"*";inherits:false;}
@property --un-sepia{syntax:"*";inherits:false;}
/* layer: theme */
:root, :host { --spacing: 0.25rem; --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); }
/* layer: base */
 *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box;  margin: 0;  padding: 0;  border: 0 solid;  }  html, :host { line-height: 1.5;  -webkit-text-size-adjust: 100%;  tab-size: 4;  font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );  font-feature-settings: var(--default-font-featureSettings, normal);  font-variation-settings: var(--default-font-variationSettings, normal);  -webkit-tap-highlight-color: transparent;  }  hr { height: 0;  color: inherit;  border-top-width: 1px;  }  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }  b, strong { font-weight: bolder; }  code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );  font-feature-settings: var(--default-monoFont-featureSettings, normal);  font-variation-settings: var(--default-monoFont-variationSettings, normal);  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }  table { text-indent: 0;  border-color: inherit;  border-collapse: collapse;  }  :-moz-focusring { outline: auto; }  progress { vertical-align: baseline; }  summary { display: list-item; }  ol, ul, menu { list-style: none; }  img, svg, video, canvas, audio, iframe, embed, object { display: block;  vertical-align: middle;  }  img, video { max-width: 100%; height: auto; }  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit;  font-feature-settings: inherit;  font-variation-settings: inherit;  letter-spacing: inherit;  color: inherit;  border-radius: 0;  background-color: transparent;  opacity: 1;  }  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }  ::file-selector-button { margin-inline-end: 4px; }  ::placeholder { opacity: 1; }  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px)  { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } }  textarea { resize: vertical; }  ::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-date-and-time-value { min-height: 1lh;  text-align: inherit;  }  ::-webkit-datetime-edit { display: inline-flex; }  ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }  ::-webkit-calendar-picker-indicator { line-height: 1; }  :-moz-ui-invalid { box-shadow: none; }  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }  [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }
/* layer: preflights */
/* suppe base design — tokens + components. Injected into the UnoCSS build via
   uno.config.ts preflights; also usable directly as static/uno.css.
   Ports the approved v5 identity: carbon topbar, centered content, semantic
   colour only, table in a bordered panel. */

/* Inter — self-hosted (OFL). Weights 400/500/600/700. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/web/static/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/web/static/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/web/static/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/web/static/fonts/inter-700.woff2') format('woff2');}

:root {
  /* Light theme. Canvas is a near-white cool grey (a chosen neutral biased
     toward the accent), so it reads as white while still giving the borderless
     white cards a ground to sit on. Cards lift with --card-shadow instead of a
     border — the light-mode analog of dark's luminance elevation. */
  --app:#ffffff; --canvas:#f5f7fb; --bg:#ffffff; --alt:#eef1f6;
  --line:#e9ecf1; --line2:#dfe3ea;
  --text:#1b1c1e; --muted:#696e78; --faint:#9096a1; --hi:#26272a; --row-hover:#f4f6fa;
  --logo:#ffffff; /* topbar wordmark — always white; the bar is dark in every theme */
  --logo-stack:#1b1c1e; /* stacked wordmark (login/setup) — adapts: dark on light bg */
  --card-shadow:0 1px 2px rgba(20,26,44,.06), 0 8px 22px rgba(20,26,44,.09);
  /* row hover is a neutral grey; a selected row is a stronger accent tint, so
     the two read as different hues (grey vs blue), not just different shades. */
  --accent:#2f6bff; --accent-weak:rgba(47,107,255,.2); --accent-weak2:rgba(47,107,255,.20); --row-sel:rgba(47,107,255,.15);
  --warn:#c07708; --neg:#d92f49; --pos:#0a9e68; --violet:#7c5cff;
  --carbon:#0c0d10; --con:#eceef1; --con-mut:#888e99; --con-hover:rgba(255,255,255,.07);
  --tip-bg:#22262c; --tip-fg:#f4f6fa; /* tooltip: dark bubble in light mode */
  --row-py:13px; --pad:20px; --fs:16px; --top-h:calc(var(--ctrl-h) + 48px); --maxw:1600px; --gutter:32px; --pane-w:560px;
  --sb-w:250px; --rail-w:404px; --r-pill:999px; --r-lg:16px; --r-md:13px;
  /* --ctrl-h: control height — floored at the 40px design size, grows only for
     larger fonts (never shrinks below 40). --frame-pad: standard main-frame inset. */
  --ctrl-h:max(40px, calc(var(--fs)*2.5)); --frame-pad:32px; --banner-h:0px;
  /* Type scale — all relative to --fs, so changing --fs (density, or a future
     user setting) moves everything. Roles: --fs = body (row/name/subject,
     message body, inputs); --fs-sm = meta (sub-lines, timestamps, label/value,
     controls, status/priority/assignee); --fs-xs/--fs-2xs = captions (uppercase
     labels, chips, tags); --fs-lg/--fs-xl = headings. */
  --fs-2xs:calc(var(--fs)*.72); --fs-xs:calc(var(--fs)*.80); --fs-sm:calc(var(--fs)*.88);
  --fs-lg:calc(var(--fs)*1.22); --fs-xl:calc(var(--fs)*1.42);
  /* Mono dumped — every var(--mono) reference now resolves to the sans stack
     (numeric alignment still comes from font-variant-numeric:tabular-nums). */
  --mono:var(--sans);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-density="compact"]{ --row-py:7px; --pad:15px; --fs:13px; --gutter:22px; --frame-pad:18px; --ctrl-h:34px; }

@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --app:#0f1013; --canvas:#141518; --bg:#1e1f22; --alt:#2a2c31; --line:#2d2f35; --line2:#3a3d43;
  --text:#e9eaec; --muted:#9b9fa4; --faint:#616469; --hi:#e9eaec; --row-hover:#1e1f21;
  --card-shadow:none; /* dark elevates by luminance, not shadow */
  --logo-stack:#ffffff; /* stacked wordmark — white on the dark bg */
  --accent:#4d82ff; --accent-weak:rgba(77,130,255,.16); --accent-weak2:rgba(77,130,255,.30); --row-sel:rgba(77,130,255,.16);
  --warn:#e8a41c; --neg:#f6465d; --pos:#0ecb81; --carbon:#101113; --violet:#a78bfa;
  --tip-bg:#eef1f6; --tip-fg:#1b1d21; /* tooltip: light bubble in dark mode */
}}
:root[data-theme="dark"]{
  --app:#0f1013; --canvas:#141518; --bg:#1e1f22; --alt:#2a2c31; --line:#2d2f35; --line2:#3a3d43;
  --text:#e9eaec; --muted:#9b9fa4; --faint:#616469; --hi:#e9eaec; --row-hover:#1e1f21;
  --card-shadow:none; /* dark elevates by luminance, not shadow */
  --logo-stack:#ffffff; /* stacked wordmark — white on the dark bg */
  --accent:#4d82ff; --accent-weak:rgba(77,130,255,.16); --accent-weak2:rgba(77,130,255,.30); --row-sel:rgba(77,130,255,.16);
  --warn:#e8a41c; --neg:#f6465d; --pos:#0ecb81; --carbon:#101113; --violet:#a78bfa;
  --tip-bg:#eef1f6; --tip-fg:#1b1d21; /* tooltip: light bubble in dark mode */
}

*{box-sizing:border-box;} html,body{height:100%;margin:0;}
body{background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:var(--fs);line-height:1.5;-webkit-font-smoothing:antialiased;}
/* Mono dropped per redesign — keep only tabular alignment for numeric columns. */
.mono{font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:.75;}

/* Topbar — full-width carbon, centered content */
.top{position:fixed;top:0;left:0;right:0;height:var(--top-h);z-index:50;background:var(--carbon);color:var(--con);box-shadow:0 1px 0 rgba(0,0,0,.35);}
.top-inner{max-width:var(--maxw);width:100%;height:100%;margin:0 auto;display:flex;align-items:center;padding:0 var(--gutter);}
/* Brand lockup: mark (suppelogo.svg) + wordmark (suppe.svg), both rendered as
   masks so their colour is set here in CSS. aspect-ratio comes from each SVG's
   viewBox, so only the height needs setting — width follows automatically.
   Horizontal by default (top-bar); vertical + larger with .brand-stack. */
.brand{display:inline-flex;align-items:center;gap:10px;margin-right:32px;}
.brand-mark{flex:0 0 auto;width:auto;height:36px;aspect-ratio:1;background-color:#9f0712;
  -webkit-mask:url('/web/static/suppelogo.svg') no-repeat center/contain;
  mask:url('/web/static/suppelogo.svg') no-repeat center/contain;}
.brand-word{flex:0 0 auto;width:auto;height:23px;aspect-ratio:256/93;background-color:var(--logo);
  -webkit-mask:url('/web/static/suppe.svg') no-repeat center/contain;
  mask:url('/web/static/suppe.svg') no-repeat center/contain;transition:background-color .12s;}
/* .brand:hover .brand-word{background-color:#303033;} */
/* Quick shiver on hover — a rapid damped wobble that returns to rest. */
.brand:hover .brand-mark{animation:brand-shiver .5s linear;}
@keyframes brand-shiver{
  0%{transform:translate(0,0) rotate(0deg);}
  7%{transform:translate(-2px,1px) rotate(22deg);}
  15%{transform:translate(2px,-2px) rotate(-19deg);}
  23%{transform:translate(-2px,-1px) rotate(26deg);}
  32%{transform:translate(1px,2px) rotate(-11deg);}
  41%{transform:translate(-2px,0) rotate(18deg);}
  50%{transform:translate(2px,-2px) rotate(-24deg);}
  59%{transform:translate(-1px,2px) rotate(9deg);}
  68%{transform:translate(2px,1px) rotate(-16deg);}
  77%{transform:translate(-2px,-1px) rotate(12deg);}
  86%{transform:translate(1px,1px) rotate(-7deg);}
  94%{transform:translate(-1px,0) rotate(4deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@media (prefers-reduced-motion:reduce){ .brand:hover .brand-mark{animation:none;} }
.brand-stack{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto 48px;}
.brand-stack .brand-mark{height:52px;}
.brand-stack .brand-word{height:34px;background-color:var(--logo-stack);}
.nav{display:flex;align-items:center;gap:4px;}
/* Direct-child only: the Admin dropdown's <a> items live inside .nav too, but
   they render on a white .dd-menu panel and must NOT inherit these dark-topbar
   link colours (white-on-white on hover). They style via .dd-menu a instead. */
.nav>a{display:flex;align-items:center;padding:8px 14px;border-radius:9px;color:var(--con-mut);font-weight:500;transition:background .12s,color .12s;}
.nav>a:hover{color:var(--con);}
.nav>a.active{color:var(--con);font-weight:600;}
/* Admin dropdown trigger — a nav item that opens a menu (Användare / system /
   audit). Styled like the nav links. */
.nav-dd{align-self:stretch;}
.nav-item{display:flex;align-items:center;height:100%;padding:8px 14px;border:0;background:none;font:inherit;font-weight:500;color:var(--con-mut);border-radius:9px;cursor:pointer;transition:color .12s;}
.nav-item:hover{color:var(--con);}
.nav-item.active{color:var(--con);font-weight:600;}
.sp{flex:1;}

/* Centered content column */
.shell{max-width:var(--maxw);width:100%;margin:var(--top-h) auto 0;min-height:calc(100vh - var(--top-h));display:flex;flex-direction:column;padding:0 var(--gutter) 24px;}
/* Connectivity banner: shown reactively when a user action can't reach the
   server (see layout.stpl). Fixed above the top-bar; pushes it + content down. */
/* z-index above the sidebar (820) so it spans the full page width. */
#conn-banner{position:fixed;top:0;left:0;right:0;height:34px;z-index:1000;display:none;align-items:center;justify-content:center;gap:8px;background:var(--neg);color:#fff;font-size:var(--fs-sm);font-weight:600;padding:0 16px;text-align:center;}
#conn-banner i{font-size:1.15em;}
body.conn-offline #conn-banner{display:flex;}
/* Offline: reserve the banner's height so the whole app sits BELOW it (the
   .app rule reads --banner-h for its height + margin-top). */
body.conn-offline{--banner-h:34px;}
/* In-modal variant: same solid look as the top banner, full modal width. */
.conn-modal-msg{margin:0;padding:10px 16px;background:var(--neg);color:#fff;font-weight:600;font-size:var(--fs-sm);text-align:left;}

/* Sub-bar */
.subbar{display:flex;align-items:center;gap:20px;padding:40px 2px 32px;}
.grp{display:flex;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:3px;}
.grp button,.grp a{font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:6px 14px;border-radius:6px;border:0;background:transparent;color:var(--muted);}
.grp button:hover,.grp a:hover{color:var(--text);}
.grp .on{background:var(--accent-weak);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent);}
.sel-btn{font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:8px 13px;border-radius:9px;border:1px solid var(--line2);background:var(--bg);color:var(--muted);white-space:nowrap;}
.sel-btn:hover{color:var(--text);border-color:var(--muted);}
/* Icon-only variant: borderless like the topbar icons — bg only on hover. */
.sel-btn.ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:20px;background:transparent;border:0;color:var(--muted);transition:background .12s,color .12s;}
.sel-btn.ic:hover{background:var(--alt);color:var(--text);}
/* Larger for the identity icon leading a detail title. */
.cust-head .sel-btn.ic:first-child{font-size:24px;}
.count{color:var(--faint);font-size:var(--fs-sm);}
.search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;color:var(--faint);min-width:260px;font-size:var(--fs);cursor:text;}
.search .kk{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);background:var(--alt);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;color:var(--muted);}
.search-ic{flex:0 0 auto;color:var(--faint);font-size:1.05em;}
.search-input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs);color:var(--text);}
.search-input:focus{outline:none;}
/* Border on the wrapper, so mirror the input hover/focus states there. */
.search{transition:border-color .12s;}
.search:hover{border-color:var(--faint);}
.search:focus-within{border-color:var(--accent);}
/* Inbox subbar: quick-filters (line/view/assignee) + combined Filter popover
   + active chips; count + search pinned to the right edge. */
.subbar{flex-wrap:wrap;}
.subbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.subbar-right .search{margin-left:0;}
.filter-btn{display:inline-flex;align-items:center;gap:7px;}
.filter-btn .i-iconoir-filter-list{font-size:1.15em;}
.filter-btn.on{color:var(--text);border-color:var(--accent);background:var(--accent-weak);}
.filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:var(--fs-2xs);font-weight:700;}
.filter-menu{min-width:212px;padding:6px;}
.filter-lbl{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:9px 9px 4px;}
.filter-opt{display:flex;align-items:center;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);color:var(--text);background:none;border:0;border-radius:7px;padding:7px 9px;cursor:pointer;}
.filter-opt:hover{background:var(--alt);}
.filter-opt.on{background:var(--accent-weak);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent);}
.sorth{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;}
.sorth:hover{color:var(--muted);}
.sorth .sarr{flex:0 0 auto;color:var(--hi);font-size:1.15em;}
.sorth .shint{flex:0 0 auto;color:var(--hi);font-size:1.15em;opacity:0;transition:opacity .1s;}
.sorth:hover .shint{opacity:1;}
.filter-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text);background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--accent);border-radius:8px;padding:3px 6px 3px 10px;}
.filter-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);padding:0 2px;}
.filter-chip button:hover{color:var(--text);}

/* Table — borderless at rest (Binance-clean). Hover = subtle rounded bg fill;
   selection = accent-weak fill. No lines. */
.list{background:transparent;}
/* border-spacing gives a slight vertical gap so adjacent hover/selection fills
   never touch. */
table{width:100%;border-collapse:separate;border-spacing:0 4px;font-variant-numeric:tabular-nums;}
/* "Bleed": the row/header hover + selection fill overhang the content guide
   left/right (cells keep their --pad inset, so text stays on the guide). Bleeds
   into the shell gutter. When the pane is open the right side is clamped so the
   overhang can't collide with the pane. */
.list table{width:calc(100% + var(--pad) * 2);margin-left:calc(var(--pad) * -1);}
.work.split .list table{width:calc(100% + var(--pad));}
/* Inbox: keep auto layout (every other column sizes to its content, so no
   wrapping and the header lines up) and only cap the Ärende column so a long
   subject truncates. Scoped to #list. */
#list tbody td:first-child,#list thead th:first-child{max-width:400px;}
thead th{text-align:left;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:11px var(--pad);white-space:nowrap;}
thead tr:hover th{background:var(--row-hover);}
thead th:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px;}
thead th:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px;}
thead th.r{text-align:right;}
tbody td{padding:var(--row-py) var(--pad);vertical-align:middle;}
tbody td:first-child{border-top-left-radius:9px;border-bottom-left-radius:9px;}
tbody td:last-child{border-top-right-radius:9px;border-bottom-right-radius:9px;}
tbody tr{cursor:pointer;-webkit-user-select:none;user-select:none;} /* rows are click-to-open; no text-select flash on multi-click */
tbody tr:hover td{background:var(--row-hover);}
td.r{text-align:right;}
td.empty{color:var(--faint);text-align:center;padding:56px 48px;cursor:default;}
td.empty i{display:block;font-size:30px;margin:0 auto 12px;opacity:.85;}

/* Status cell: leading new/ping dot, then the status label. */
.st-cell{display:inline-flex;align-items:center;gap:9px;}
.newdot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;--dot:var(--accent);background:var(--dot);position:relative;}
.newdot.support{--dot:var(--violet);}   /* Väntar på support — ball back with us */
/* UptimeRobot-style "ping": a fixed ~1s expanding, fading ring. The interval
   between pings (4–20s, randomized per dot) is driven by JS re-adding .ping. */
.newdot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--dot);opacity:0;}
.newdot.ping::after{animation:newdot-ping .8s ease-out;}
@keyframes newdot-ping{from{transform:scale(1);opacity:.55;}to{transform:scale(5);opacity:0;}}
@media (prefers-reduced-motion:reduce){.newdot::after{display:none;}}
.cust-c{color:var(--muted);}

/* ── Identity text system (name / meta / code) — one consistent treatment for
   showing an entity (customer, contact, subject, key) across all pages.
   Stacked via .id, or inline; .id-lg bumps the name for detail headings. */
.id{display:flex;flex-direction:column;gap:1px;min-width:0;}
.id-name{font-weight:600;color:var(--text);line-height:1.3;min-width:0;}
.id-sub{color:var(--muted);font-size:var(--fs-sm);min-width:0;}
.id-code{font-family:var(--mono);color:var(--faint);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;}
.id-lg .id-name{font-size:var(--fs-lg);font-weight:650;}
/* Inbox: truncate identity lines so rows stay uniform. */
#list .id-name,#list .id-sub,#list .id-code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Inbox weight: titles + customer are quiet by default; only cases that need
   attention (new, or waiting on support) get a heavy title, like unread mail. */
#list .id-name{font-weight:400;color:var(--muted);}
#list .row.attn .id-name{color:var(--text);}
#list .row.attn .subj{font-weight:700;}

/* Status — plain label, no colour blob. Terminal states dim. */
.st{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;}
.st.resolved,.st.cancelled,.st.closed{color:var(--faint);}
/* Status dot — one colour per state (neutral grey for waiting-on-customer). */
.sdot{flex:0 0 auto;width:1.1em;height:1.1em;border-radius:50%;background:var(--muted);}
.st.open .sdot{background:var(--accent);}
.st.in_progress .sdot{background:var(--warn);}
.st.waiting_support .sdot{background:var(--violet);}
.st.resolved .sdot{background:var(--pos);}
.st.cancelled .sdot,.st.closed .sdot{background:var(--faint);}

/* Priority — iconoir glyph carries the level; colour only high/urgent. */
.prio-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);vertical-align:middle;}
.prio-tag i{font-size:1.15em;flex:0 0 auto;}
.prio-high{color:var(--warn);}
.prio-urgent{color:var(--neg);}

/* SLA */
.sla{font-size:var(--fs-sm);color:var(--muted);}
.sla.warn{color:var(--warn);font-weight:600;}
.sla.breach{color:var(--neg);font-weight:700;}

/* Assignee */
.who{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-sm);vertical-align:middle;}
.mava{width:30px;height:30px;box-sizing:border-box;flex:0 0 auto;border-radius:50%;background:var(--alt);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:500;}
.mava.empty{background:transparent;border:1px dashed var(--faint);}
/* Unassigned reads louder — it's a needs-action state. */
.who.unassigned{color:var(--text);font-weight:500;}

/* ── Master–detail: table card + preview pane card ─────────────────── */
.work{display:grid;grid-template-columns:1fr;gap:0;align-items:start;}
.work.split{grid-template-columns:minmax(0,1fr) var(--pane-w);gap:14px;}
.work.split .col-hide{display:none;}
/* In split mode the real last column (Uppdaterad) is hidden, so :last-child
   would round a hidden cell. Round the last VISIBLE cell (SLA = 5th) instead. */
.work.split tbody td:nth-child(5){border-top-right-radius:9px;border-bottom-right-radius:9px;}
/* Selected row (click / j-k nav): accent-weak fill. */
tbody tr.sel td{background:var(--row-sel);}

.pane{display:none;}
.work.split .pane{display:flex;flex-direction:column;position:sticky;top:calc(var(--top-h) + 14px);
  max-height:calc(100vh - var(--top-h) - 40px);background:transparent;overflow:hidden;}

/* Detail body (shared by pane + full page) */
/* Detail sections float as separate --bg segments on the page canvas, with
   thin (4px) seams; only the far edges (header top, thread bottom) are rounded. */
.d-head{padding:2px 2px 14px;flex:0 0 auto;background:transparent;border-bottom:1px solid var(--line);margin-bottom:14px;}
.d-top{display:flex;align-items:center;gap:10px;}
.d-key{display:inline-block;margin-top:16px;color:var(--muted);font-size:var(--fs-sm);}
.d-actions{margin-left:auto;display:flex;gap:4px;align-items:center;}
.d-ico{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs);}
.d-ico:hover{background:var(--alt);color:var(--text);}
/* Modal close: filled round button, same style as the sidebar flyout close. */
.modal-h .d-ico{width:34px;height:34px;background:var(--alt);color:var(--muted);font-size:18px;}
.modal-h .d-ico:hover{background:var(--line2);color:var(--text);}
.d-back{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:var(--fs-sm);}
.d-back:hover{color:var(--text);}
/* Full-page header: customer name (reassign dropdown) pushed to the right. */
.d-cust{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;margin-top:12px;}
/* Customer sits top-left of the card → open its dropdown left-aligned
   (rightward into the card), not right-aligned off the left edge. */
.d-cust .dd-menu{left:0;right:auto;}
.d-key-top{display:inline-flex;align-items:center;gap:6px;margin-bottom:5px;padding:0;border:0;background:none;
  font-family:inherit;font-size:var(--fs-sm);color:var(--faint);cursor:pointer;}
.d-key-top:hover{color:var(--muted);}
.d-key-copy{opacity:0;font-size:14px;transition:opacity .1s ease;}
.d-key-top:hover .d-key-copy{opacity:1;}
.d-key-done{display:none;color:var(--pos);font-weight:600;}
.d-key-top.copied .d-key-copy{display:none;}
.d-key-top.copied .d-key-done{display:inline;}
.d-title{margin:0;flex:1;min-width:0;font-size:calc(var(--fs)*1.7);font-weight:600;letter-spacing:-.015em;line-height:1.2;}
/* Card edit affordance: a filled icon button pinned bottom-right, shown on
   card hover — background by default, deepens on hover. Hidden while editing. */
.d-head,.case-desc{position:relative;}
.card-edit{position:absolute;right:12px;bottom:12px;opacity:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:8px;background:var(--alt);color:var(--muted);cursor:pointer;font-size:16px;transition:opacity .12s,background .12s,color .12s;}
.d-head:hover .card-edit,.case-desc:hover .card-edit{opacity:1;}
/* Full page: reveal the title pencil only when hovering the title row. */
.case-main .d-head:hover .card-edit{opacity:0;}
.case-main .d-top:hover .card-edit{opacity:1;}
.card-edit:hover{background:var(--line2);color:var(--text);}
/* Header edit-title button sits in the top-right actions row (not absolute);
   keeps the base card-edit resting background so it matches the other pencils. */
.d-actions .card-edit{position:static;right:auto;bottom:auto;}
.d-head:has(.edit-input) .card-edit,.case-desc:has(.edit-area) .card-edit{display:none;}
.pane-scroll{overflow:auto;flex:1;min-height:0;}

.meta{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px;}
.mchip{display:inline-flex;align-items:center;gap:6px;background:var(--alt);border-radius:8px;padding:5px 10px;font-size:var(--fs-sm);cursor:pointer;}
.mchip .k{color:var(--faint);}
.mchip .val{font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.mchip .val.empty{color:var(--faint);font-weight:500;font-style:italic;}
/* Inline-edit affordance + editor select */
.editable{cursor:pointer;}
.mchip.editable:hover{outline:1px solid var(--line2);}
.st.editable:hover{color:var(--text);}
.edit-form{display:inline-flex;}
.edit-select{font:inherit;font-size:var(--fs-sm);padding:5px 8px;border-radius:8px;border:1px solid var(--accent);background:var(--bg);color:var(--text);cursor:pointer;}
.edit-select:focus{outline:none;}

.thread{padding:2px;display:flex;flex-direction:column;gap:32px;background:transparent;}
.sys{text-align:center;color:var(--faint);font-size:var(--fs-sm);}
.sys.cont{margin-top:-10px;}
/* Grouped system events: summary = latest change, expandable rest. */
.sys-grp>summary{list-style:none;cursor:pointer;color:var(--faint);}
.sys-grp>summary::-webkit-details-marker{display:none;}
.sys-grp>summary:hover{color:var(--muted);}
.sys-more-n{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);background:var(--alt);border-radius:6px;padding:1px 6px;margin-left:3px;}
.sys-list{margin-top:5px;display:flex;flex-direction:column;gap:3px;}
.sys-item{color:var(--faint);font-size:var(--fs-xs);}
.msg{display:grid;grid-template-columns:30px 1fr;gap:10px;}
.msg .av{width:30px;height:30px;border-radius:50%;background:var(--alt);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:var(--fs-xs);}
.msg.out .av{background:var(--accent);color:#fff;border-color:transparent;}
.bub{min-width:0;}
.bh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.bh .nm{font-weight:600;font-size:var(--fs);}
.bh .tg{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);}
.bh .tg.tg-int{color:var(--warn);}
.bh .tm{color:var(--faint);font-size:var(--fs-sm);}
.bub p{margin:3px 0 0;font-size:var(--fs);white-space:pre-wrap;overflow-wrap:anywhere;}
.note{grid-column:1/-1;background:transparent;border:0;border-left:2px solid var(--warn);border-radius:0;padding:0 12px;}
.note p{margin:4px 0 0;font-size:var(--fs);white-space:pre-wrap;overflow-wrap:anywhere;}

.cust{margin-top:11px;}
.cust-suggest{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 11px;border-radius:9px;font-size:var(--fs-sm);color:var(--text);background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--accent);}
.cust-suggest i{color:var(--accent);flex:0 0 auto;}
.cust-suggest span{min-width:0;}
.suggest-link{margin-left:auto;flex:0 0 auto;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;padding:2px 4px;}
.suggest-link:hover{text-decoration:underline;}
.t5{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:8px;}
.t5-row{display:flex;align-items:center;}
.t5-add{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:none;color:var(--faint);cursor:pointer;font-size:15px;}
.t5-add:hover{background:var(--alt);color:var(--accent);}
/* Customer name is dimmed (the case title is the prominent element); it's a
   dropdown trigger, so hint it on hover. Name + customer-no share a row. */
.cust .id{margin-bottom:6px;}
.cust-name-row{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.trig.cust-org{color:var(--muted);font-weight:600;line-height:1.3;}
.trig.cust-org:hover{color:var(--text);text-decoration:underline;}
.cust-open{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:var(--faint);transition:background .12s,color .12s;}
.cust-open:hover{background:var(--alt);color:var(--text);}
.cust-contact-row{display:flex;align-items:center;gap:6px;min-width:0;margin-top:2px;}
.trig.cust-contact{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:var(--fs-sm);line-height:1.3;}
.trig.cust-contact:hover{color:var(--text);text-decoration:underline;}
.trig.cust-contact-empty{color:var(--faint);font-style:italic;}

.ctx-cards{padding:12px 0;display:flex;flex-direction:column;gap:12px;}
.ctx-card{display:flex;align-items:center;gap:8px;border:1px dashed var(--line2);border-radius:10px;padding:11px 13px;color:var(--muted);font-size:var(--fs-sm);}
.ctx-card i{font-size:1.15em;color:var(--muted);}
.ctx-card span{margin-left:auto;color:var(--faint);}

/* Trigger reset (buttons that act as inline editable tokens). */
.trig{border:0;background:none;font-family:inherit;cursor:pointer;padding:0;color:inherit;}

/* Attribute tokens — value when set, ghost placeholder (name) when unset. */
/* Case meta zones: State (glanceable chips) over Classification (labeled). */
.case-meta{padding:13px 16px;background:var(--bg);margin-bottom:4px;}
.meta-state{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.meta-class{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px;}
.mrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;}
.mrow .dd{justify-self:end;}
.mval{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text);cursor:pointer;padding:3px 0;}
.mval.unset{color:var(--faint);font-weight:500;}
.mval:hover{text-decoration:underline;}
.mval i{font-size:1.1em;margin-right:3px;vertical-align:-2px;}
.mval.prio-high{color:var(--warn);}
.mval.prio-urgent{color:var(--neg);}
/* Rail properties: state and classification are separate cards (like the
   left column's segments). Within a card, ONE grid so headings share a column
   and dropdowns line up: headings (small) left, full-width dropdowns right. */
.prop-grid{display:grid;grid-template-columns:6.2em 1fr;column-gap:12px;row-gap:9px;align-items:center;}
.prop-grid .mrow{display:contents;}
.prop-grid .info-l{font-size:var(--fs-sm);}
.prop-grid .dd{justify-self:stretch;display:block;}
.prop-grid .dd-menu{right:0;left:auto;}
.prop-grid .mval,.prop-grid .st{display:inline-flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;min-width:0;border:1px solid var(--line2);border-radius:8px;padding:6px 9px;background:var(--bg);}
.prop-grid .mval:hover,.prop-grid .st:hover{border-color:var(--faint);background:var(--alt);text-decoration:none;}
.prop-grid .mval::after,.prop-grid .st::after{content:"";margin-left:auto;flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.45;}
.attr{display:inline-flex;align-items:center;gap:6px;background:var(--alt);border-radius:8px;padding:5px 11px;font-size:var(--fs-sm);font-weight:600;color:var(--text);cursor:pointer;}
.attr i{font-size:1.15em;flex:0 0 auto;}
.attr:hover{outline:1px solid var(--line2);}
.attr.unset{background:transparent;border:1px dashed var(--line2);color:var(--faint);font-weight:500;}
.attr.prio-high{color:var(--warn);}
.attr.prio-urgent{color:var(--neg);}

/* Custom dropdown (token stays put; menu drops below). */
.dd{position:relative;display:inline-flex;}
.dd .st{font-size:var(--fs-sm);}
.dd-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:30;min-width:170px;
  background:var(--bg);border:1px solid var(--line2);border-radius:10px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.30);padding:5px;display:none;}
.dd.open .dd-menu{display:block;}
.attr-opt{display:block;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);
  padding:7px 10px;border-radius:7px;border:0;background:none;color:var(--text);cursor:pointer;white-space:nowrap;}
.attr-opt:hover{background:var(--alt);}
.attr-opt.sel{color:var(--accent);font-weight:600;}

/* Organization typeahead picker (in the quickview customer dropdown) */
.org-picker{width:300px;}
.op-search{display:flex;align-items:center;gap:8px;padding:4px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.op-ic{color:var(--faint);font-size:1.05em;flex:0 0 auto;}
.op-input{flex:1;min-width:0;font:inherit;font-size:var(--fs-sm);border:0;background:none;color:var(--text);padding:2px 0;}
.op-input:focus{outline:none;}
.op-results{max-height:280px;overflow-y:auto;}
.op-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);
  padding:7px 10px;border-radius:7px;border:0;background:none;color:var(--text);cursor:pointer;}
.op-opt:hover{background:var(--alt);}
.op-opt.sel{color:var(--accent);font-weight:600;}
.op-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.op-no{flex:0 0 auto;color:var(--faint);font-size:var(--fs-xs);}
/* Two-line result row (contact typeahead): name over email · company. */
.op-opt-2{flex-direction:column;align-items:stretch;gap:1px;}
.op-opt-2 .op-name{flex:none;font-weight:600;}
.op-sub{color:var(--faint);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.op-sub:empty{display:none;}
.op-opt.op-active{background:var(--alt);}
.op-none{color:var(--muted);font-style:italic;}
.op-empty{padding:12px 10px;color:var(--faint);font-size:var(--fs-sm);text-align:center;}
.op-new{display:flex;align-items:center;gap:7px;width:100%;font:inherit;font-size:var(--fs-sm);
  margin-top:4px;padding:8px 10px;border:0;border-top:1px solid var(--line);border-radius:0 0 7px 7px;
  background:none;color:var(--accent);cursor:pointer;}
.op-new:hover{background:var(--alt);}

.sla-row{display:flex;flex-wrap:wrap;gap:18px;padding:0 16px 12px;font-size:var(--fs-sm);color:var(--muted);}
.sla-row .k{color:var(--faint);}

/* Text editors */
.edit-input{font:inherit;font-size:var(--fs-sm);padding:5px 9px;border-radius:8px;border:1px solid var(--accent);background:var(--bg);color:var(--text);width:100%;box-sizing:border-box;}
.edit-input:focus{outline:none;}
/* Subject: a normal input, but keeping the title's size/weight. */
.edit-input.edit-title{display:block;width:100%;margin:9px 0 0;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;
  background:var(--bg);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--text);}
.edit-input.edit-title:focus{border-color:var(--accent);}
/* Pinned opening request — always near the top so the case's premise is
   visible without scrolling to the bottom of the thread. */
.case-desc{padding:0 2px 18px;background:transparent;margin-bottom:18px;border-bottom:1px solid var(--line);}
.desc-h{display:flex;align-items:baseline;gap:10px;margin-bottom:0;}
.desc-tag{flex:0 0 auto;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:6px;padding:2px 7px;}
.desc-body{margin:0;font-size:var(--fs);line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0 6px 0;}
/* "Visa original" — a collapsible showing the untouched inbound message. */
.desc-orig{margin-top:16px;}
.desc-orig>summary{font-size:var(--fs-sm);color:var(--muted);cursor:pointer;width:fit-content;}
.desc-orig>summary:hover{color:var(--text);}
.desc-orig-body{margin:8px 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 11px;background:var(--alt);border-radius:8px;}
.linklike{font:inherit;font-size:var(--fs-sm);color:var(--accent);background:none;border:0;padding:6px 0 0;cursor:pointer;}
.linklike:hover{text-decoration:underline;}
.edit-area{display:block;width:100%;box-sizing:border-box;font-family:var(--sans);font-size:var(--fs);line-height:1.55;color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;resize:vertical;}
.edit-area:focus{outline:none;border-color:var(--accent);}

/* Composer now sits above the (newest-first) thread. */
.composer{padding:0 2px;background:transparent;margin-bottom:22px;}
.ctabs{display:flex;gap:16px;margin-bottom:9px;}
.ctabs button{font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:2px 0;border:0;background:transparent;color:var(--faint);border-bottom:2px solid transparent;}
.ctabs button.on{color:var(--text);border-bottom-color:var(--accent);}
.cbox{display:block;width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text);font-family:var(--sans);font-size:var(--fs);resize:vertical;transition:min-height .12s ease;}
.cbox:focus{outline:none;border-color:var(--accent);}
.cbox::placeholder{color:var(--faint);}
/* Leading reply icon beside the field; removed on focus so the field
   expands to full width. */
.cbox-wrap{display:flex;align-items:center;gap:11px;position:relative;}
/* Composer mode toggle (public reply vs internal note) */
.cmode-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.cmode{display:inline-flex;gap:2px;background:var(--bg);border-radius:8px;padding:2px;}
/* Reply-to contact: appears top-right of the composer once a public reply is
   being written (expanded). Click to change/clear via the contact picker. */
.composer-to{margin-left:auto;display:none;}
.composer[data-mode="public"].expanded .composer-to{display:inline-flex;}
.composer-to-btn{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-sm);color:var(--muted);cursor:pointer;white-space:nowrap;}
.composer-to-btn:hover{color:var(--text);}
.composer-to-nm{font-weight:600;color:var(--text);}
.composer-to-missing{color:var(--warn);}
.composer-to-missing:hover{color:var(--warn);text-decoration:underline;}
.cact-send:disabled{opacity:.45;cursor:not-allowed;}
.cmode-btn{font:inherit;font-size:var(--fs-sm);font-weight:600;padding:4px 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;}
.cmode-btn.on{background:var(--alt);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2);}
.composer.internal .cmode-btn.on{color:var(--warn);}
.composer.internal .cbox{background:color-mix(in srgb,var(--warn) 7%,var(--bg));}
.composer.internal .cbox:focus{border-color:var(--warn);}
.composer.internal .cact-resolve{display:none;}
/* @mention autocomplete popup */
.mention-pop{position:absolute;left:34px;top:calc(100% + 4px);z-index:40;min-width:240px;max-width:320px;background:var(--bg);border-radius:10px;box-shadow:0 8px 24px rgba(20,26,44,.18);padding:4px;display:flex;flex-direction:column;}
.mention-pop .mopt{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);border:0;border-radius:7px;background:none;color:var(--text);padding:7px 9px;cursor:pointer;}
.mention-pop .mopt.on,.mention-pop .mopt:hover{background:var(--accent-weak);}
.mention-pop .mopt-n{font-weight:600;white-space:nowrap;}
.mention-pop .mopt-e{color:var(--faint);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;}
.cbox-wrap .cbox{flex:1;min-width:0;width:auto;}
/* Slim by default; grow + reveal the actions once the composer has focus. */
.composer.expanded .cbox,
.composer:has(.cbox:not(:placeholder-shown)) .cbox{min-height:140px;}
.cact{display:none;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;}
.composer.expanded .cact,
.composer:has(.cbox:not(:placeholder-shown)) .cact{display:flex;}
.cact .chk{margin-left:auto;}
.attach-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border-radius:9px;color:var(--muted);cursor:pointer;font-size:18px;}
.attach-btn:hover{background:var(--alt);color:var(--text);}
/* Chosen files on their own line (never cramps the button row) */
.attach-names{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.attach-names:empty{display:none;}
.fchip{display:inline-flex;align-items:center;max-width:100%;font-size:var(--fs-xs);color:var(--muted);background:var(--alt);border:1px solid var(--line2);border-radius:7px;padding:3px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn{font:inherit;font-weight:600;font-size:var(--fs-sm);cursor:pointer;padding:10px 18px;border-radius:var(--r-pill);border:0;transition:filter .12s,color .12s,background .12s;}
.btn-p:hover{filter:brightness(.93);}
.btn-g:hover{background:var(--line2);color:var(--text);}
/* Buttons sitting inline with inputs match the input height (same font size;
   border-box makes the padding work out equal). */
/* Match the adjacent inputs' height exactly via a fixed control height +
   flex-centering (padding/line-height math isn't reliable — inputs use
   line-height:normal, buttons inherit 1.5). */
.admin-row .btn,.admin-add .btn{font-size:var(--fs-sm);height:36px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;}
.btn-p{background:var(--accent);color:#fff;}
.btn-g{background:var(--alt);color:var(--text);border:0;}
.chk{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--fs-sm);cursor:pointer;}

/* Full page wrapper */
/* Full case page: two columns — the case (left) + a context column (right).
   Cards are background-only, no border. The pane variant is untouched. */
/* margin-top matches the sticky inset (var(--top-h) + 16px is the sticky top),
   so the sticky column's rest position equals its stuck position — otherwise
   sticky shoves it down and the right column looks lower than the left. */
.fullcase{width:100%;max-width:1304px;margin:40px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:24px;align-items:start;}
/* Rounded to match the stacked segments' outer corners (d-head top, thread
   bottom) so the shadow follows the rounded silhouette instead of poking out
   as square corners behind them. */
.case-main{max-width:800px;background:transparent;}
.case-main .pane-scroll{overflow:visible;}
.case-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--top-h) + 16px);}
.side-card,.org-card{background:var(--bg);border-radius:14px;padding:15px 17px;box-shadow:var(--card-shadow);}
.side-card .t5,.org-card .t5{margin-bottom:11px;}
/* Per-card tinting (right-column context cards), echoing the legacy tool's
   alert palette: cases = selected-row blue, backup = good-green (status will
   flip it red/amber later), licenser = action-amber. */
.org-card.cases,.side-card.cases{background:var(--accent-weak);--ink:color-mix(in srgb,var(--accent) 55%,var(--text));}
.org-card.backup,.side-card.backup{background:color-mix(in srgb,var(--pos) 12%,transparent);--ink:color-mix(in srgb,var(--pos) 60%,var(--text));}
.org-card.licens,.side-card.licens{background:color-mix(in srgb,var(--warn) 13%,transparent);--ink:color-mix(in srgb,var(--warn) 62%,var(--text));}
/* Hue-matched ink for the title + placeholder, so text harmonises with the
   tint instead of washing out as grey (mirrors the legacy tool's fg/bg pairs). */
.cases .t5,.backup .t5,.licens .t5{color:var(--ink);}
.backup .side-empty,.licens .side-empty{color:var(--ink);}
/* Icon-first layout for the status cards: a big hue-inked icon in its own
   first column, title + status stacked in the body. */
.side-card.backup,.side-card.licens,.org-card.backup,.org-card.licens{display:flex;align-items:center;gap:15px;}
/* Icon sits (a bit smaller) inside a filled hue disc. Icon on the wrapper
   span, not the <i>, so the disc fill doesn't fight the icon's own mask. */
.card-ico{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;}
.backup .card-ico,.licens .card-ico{color:var(--ink);}
.backup .card-ico{background:color-mix(in srgb,var(--pos) 22%,transparent);}
.licens .card-ico{background:color-mix(in srgb,var(--warn) 24%,transparent);}
.card-body{min-width:0;}
.card-body .t5{margin-bottom:3px;}
.side-empty{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:var(--fs-sm);}
/* Backup-status: once loaded with a program list, top-align the icon and let
   the body fill the width. Any program in error re-tints the whole card red
   (the tint lives on the parent section, which the lazy fragment can't touch,
   so drive it from a descendant `.bk-prog.err` via :has()). */
.side-card.backup:has(.bk-list){align-items:flex-start;}
.backup .card-body{flex:1 1 auto;}
.side-card.backup:has(.bk-prog.err){background:color-mix(in srgb,var(--neg) 12%,transparent);--ink:color-mix(in srgb,var(--neg) 60%,var(--text));}
.side-card.backup:has(.bk-prog.err) .card-ico{background:color-mix(in srgb,var(--neg) 22%,transparent);}
.bk-list{display:flex;flex-direction:column;gap:11px;}
.bk-prog{display:flex;flex-direction:column;gap:2px;}
.bk-prog-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bk-name{font-weight:600;font-size:var(--fs-sm);}
.bk-sub{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--muted);font-size:var(--fs-xs);}
.bk-err{font-size:var(--fs-xs);color:var(--neg);margin-top:1px;}
.bk-streak{opacity:.8;}
/* Licenser card: a list of licensed articles (article · desc · qty). */
.side-card.licens:has(.lic-list){align-items:flex-start;}
.licens .card-body{flex:1 1 auto;}
.lic-list{display:flex;flex-direction:column;gap:7px;}
.lic-row{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm);min-width:0;}
.lic-art{font-weight:600;color:var(--ink);flex:none;}
.lic-desc{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.lic-qty{margin-left:auto;flex:none;font-size:var(--fs-xs);font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--warn) 22%,transparent);border-radius:5px;padding:1px 6px;}
/* Fold-out (first 8 shown), reusing the cases-card expander (.cx-toggle/.cx-btn). */
.lic-row.cx-extra{display:none;}
.cx-toggle:checked ~ .lic-list .lic-row.cx-extra{display:flex;}
.side-card.licens:has(.cx-btn){position:relative;padding-bottom:18px;}
@media (max-width:1080px){
  .fullcase{grid-template-columns:1fr;}
  .case-main{max-width:none;}
  .case-side{position:static;}
}

/* ── Onboarding wizard (full-screen, centered, Linear-style) ───────── */
.setup-body{background:var(--canvas);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.setup{width:100%;max-width:340px;}
/* Login page (reuses .setup layout). Dev = e-mail form; SSO = Microsoft button. */
.login{display:flex;flex-direction:column;align-items:center;text-align:center;}
.login .setup-form{width:100%;}
.login-note{margin-top:16px;font-size:var(--fs-sm);color:var(--faint);max-width:34ch;line-height:1.5;}
/* Settings pages (user + admin share the pattern): a centred column, each
   section = title above a bleeding .admin-card, settings as inline rows that
   auto-save (no Save button). */
/* width:100% is required — as a flex item, margin:0 auto would otherwise
   shrink it to content width and the max-width never applies. */
.settings-col{width:100%;max-width:680px;margin:0 auto;padding:40px var(--pad) 0;}
.settings-col .settings-title{margin-bottom:32px;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:6px 0;}
.set-row + .set-row{border-top:1px solid var(--line);}
.set-label{color:var(--muted);}
.set-value{color:var(--text);text-align:right;}
.set-select{font:inherit;font-size:var(--fs);padding:7px 30px 7px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);cursor:pointer;}
.set-select:hover{border-color:var(--faint);}
.set-select:focus{outline:none;border-color:var(--accent);}
.ms-btn{display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:var(--fs);font-weight:600;color:var(--text);background:var(--alt);border:0;border-radius:var(--r-pill);padding:13px 22px;cursor:pointer;transition:background .12s;}
.ms-btn:hover{background:var(--line2);}
.ms-logo{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;flex:0 0 auto;}
.ms-logo span{display:block;}
.ms-logo span:nth-child(1){background:#f25022;}
.ms-logo span:nth-child(2){background:#7fba00;}
.ms-logo span:nth-child(3){background:#00a4ef;}
.ms-logo span:nth-child(4){background:#ffb900;}
.setup-steps{display:flex;gap:8px;justify-content:center;margin-bottom:30px;}
.setup-steps .dot{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .15s;}
.setup-steps .dot.on{background:var(--accent);}
.setup-h{font-size:calc(var(--fs)*1.6);font-weight:650;letter-spacing:-.02em;text-align:center;margin:0 0 8px;}
.setup-sub{color:var(--muted);text-align:center;margin:0 auto 28px;font-size:var(--fs);line-height:1.55;max-width:38ch;}
/* Status banners — solid, full-width in their parent (card/modal), left-aligned,
   matching the connectivity banner. Full width (side margins 0); a bottom gap
   keeps the following form/content breathing. */
.setup-error{background:var(--neg);color:#fff;font-weight:600;font-size:var(--fs-sm);padding:10px 16px;margin:0 0 18px;text-align:left;}
.setup-ok{background:var(--pos);color:#fff;font-weight:600;font-size:var(--fs-sm);padding:10px 16px;margin:0 0 18px;text-align:left;}
.setup-form{display:flex;flex-direction:column;gap:15px;}
.setup-form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--muted);}
.setup-form input{-webkit-appearance:none;appearance:none;font-family:var(--sans);font-size:var(--fs);padding:13px 18px;border:0;border-radius:var(--r-pill);background:var(--alt);color:var(--text);}
/* Subtle fill lift on hover and focus (same) — no ring, no grow. */
.setup-form input:hover,.setup-form input:focus{outline:none;background:color-mix(in srgb,var(--text) 6%,var(--alt));}
.setup-btn{margin-top:8px;font-family:var(--sans);font-size:var(--fs);font-weight:600;padding:13px;border:0;border-radius:var(--r-pill);background:var(--accent);color:#fff;cursor:pointer;}
.setup-btn:hover{filter:brightness(1.06);}
.opt{color:var(--faint);font-weight:400;}

/* ── Customers (Kunder) ────────────────────────────────────────────── */
.page-h{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.01em;margin:0;}
.page-h .id-code{margin-right:.45em;vertical-align:.05em;}
.search-input{flex:1;min-width:0;font-family:var(--sans);font-size:var(--fs);border:0;background:transparent;color:var(--text);outline:none;}
.search-input::placeholder{color:var(--faint);opacity:.75;}
/* Single-column detail column (contact page). */

/* Customer detail: a narrow identity rail (name + info + contacts, sticky) and
   a wider activity column (backup, licenser, cases). */
.cust-head{width:100%;max-width:1200px;margin:0 auto;padding:40px var(--pad) 0;display:flex;align-items:center;gap:10px;}
.cust-cols{width:100%;max-width:1200px;margin:0 auto;padding:20px var(--pad) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;}
.detail-col{display:flex;flex-direction:column;gap:16px;}
.cust-name{margin:0;font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em;line-height:1.2;}
.info-list{display:flex;flex-direction:column;}
.info-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);}
.info-note{padding:8px 0;border-top:1px solid var(--line);}
.info-note .info-l{display:block;margin-bottom:5px;}
.note-text{color:var(--text);font-size:var(--fs);white-space:pre-wrap;overflow-wrap:anywhere;}
.info-row:first-child{border-top:0;}
.info-l{color:var(--muted);font-size:var(--fs);}
/* ERP provenance footer on a card (icon + "Synkad <date>"). */
.synced{display:flex;align-items:center;gap:6px;margin-top:11px;color:var(--faint);font-size:var(--fs-xs);}
.synced i{font-size:1.1em;}
.info-v{min-width:0;color:var(--text);font-size:var(--fs);overflow-wrap:anywhere;text-align:right;}
.org-cell{display:inline-flex;align-items:center;gap:7px;color:var(--text);text-decoration:none;}
.org-cell:hover .org-name{text-decoration:none;}
.org-cell .info-open{color:var(--faint);font-size:1.05em;}
.org-cell:hover .info-open{color:var(--text);}
/* Contacts — compact stacked rows that fit the narrow rail. */
.contact{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:8px 10px;margin:0 -10px;border-radius:8px;cursor:pointer;}
.contact:hover{background:var(--alt);}
.ct-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.ct-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0;text-align:right;}
.ct-email{font-size:var(--fs-sm);color:var(--muted);}
.ct-phone{font-size:var(--fs-sm);color:var(--faint);}
.ct-l .id-name,.ct-email,.ct-phone{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Cases table inside a card — rows styled like the .contact list: no
   separators, a rounded slightly-inset hover pill (org + contact detail). */
.mini-cases{width:calc(100% + 20px);margin:0 -10px;border-collapse:separate;border-spacing:0;}
.mini-cases td{padding:8px 10px;vertical-align:middle;}
.mini-cases td.r{text-align:right;}
.mini-cases .st{font-size:var(--fs-sm);}
.mini-cases .cust-c{font-size:var(--fs-sm);}
.mini-cases tr.row{cursor:pointer;}
.mini-cases tr.row:hover td{background:var(--alt);}
.cases .mini-cases tr.row:hover td{background:var(--accent-weak2);}
.mini-cases tr.row:hover td:first-child{border-radius:8px 0 0 8px;}
.mini-cases tr.row:hover td:last-child{border-radius:0 8px 8px 0;}
@media (max-width:1000px){
  .cust-cols{grid-template-columns:1fr;}
  .cust-cols .case-side{position:static;}
}

/* ── Topbar icon actions (Ny · tema · profil) ──────────────────────── */
.topbar-actions{display:flex;align-items:center;gap:2px;}
.topbar-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;background:transparent;border:0;color:var(--con-mut);cursor:pointer;font-size:21px;transition:background .12s,color .12s;}
.topbar-ic:hover{color:var(--con);background:var(--con-hover);}
.topbar-dd .dd-menu{right:0;left:auto;top:calc(100% + 4px);}
/* Theme toggle shows the icon of the current effective theme (mirrors tokens). */
.theme-sun{display:none;} .theme-moon{display:inline-block;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-sun{display:inline-block;} :root:not([data-theme="light"]) .theme-moon{display:none;} }
:root[data-theme="dark"] .theme-sun{display:inline-block;} :root[data-theme="dark"] .theme-moon{display:none;}
:root[data-theme="light"] .theme-sun{display:none;} :root[data-theme="light"] .theme-moon{display:inline-block;}
.dd-menu a,.dd-menu .dd-btn{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 12px;border:0;border-radius:7px;background:none;font-family:inherit;font-size:calc(var(--fs)*.933);font-weight:400;text-align:left;color:var(--text);cursor:pointer;white-space:nowrap;}
.dd-menu a i,.dd-menu .dd-btn i{flex:none;font-size:1.3em;opacity:.9;}
/* App-launcher: real brand SVGs (not icon-font) — fixed 18px, rounded. */
.dd-menu a .app-ico{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain;}
.dd-menu a:hover,.dd-menu .dd-btn:hover{background:var(--alt);color:var(--text);}
.dd-menu a.dd-danger,.dd-menu .dd-btn.dd-danger{color:var(--neg);}
.dd-menu a.dd-danger:hover,.dd-menu .dd-btn.dd-danger:hover{color:var(--neg);background:color-mix(in srgb, var(--neg) 12%, transparent);}
.dd-menu .dd-form{margin:0;}
.ny-soon{display:block;padding:8px 11px;font-size:var(--fs-sm);color:var(--faint);white-space:nowrap;}
/* Notification bell + panel */
.notif-btn{position:relative;}
.notif-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--neg);color:#fff;font-size:var(--fs-2xs);font-weight:700;line-height:16px;text-align:center;box-sizing:border-box;pointer-events:none;}
.notif-badge:empty{display:none;}
.notif-menu{width:328px;max-height:72vh;overflow:auto;padding:0;}
.notif-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 9px;font-size:var(--fs-sm);font-weight:650;position:sticky;top:0;background:var(--bg);z-index:1;}
.notif-readall{font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;padding:0;}
.notif-readall:hover{text-decoration:underline;}
.notif-empty{padding:14px 14px 22px;color:var(--faint);font-size:var(--fs-sm);text-align:center;}
.notif-menu .notif-item{display:flex;align-items:flex-start;gap:9px;padding:10px 14px;border-radius:0;color:var(--text);}
.notif-menu .notif-item:hover{background:var(--alt);}
.notif-menu .notif-item.unread{background:var(--accent-weak);}
.notif-menu .notif-item.unread:hover{background:var(--accent-weak2);}
.notif-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px;background:transparent;}
.notif-item.unread .notif-dot{background:var(--accent);}
.notif-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.notif-txt{font-size:var(--fs-sm);line-height:1.35;}
.notif-time{font-size:var(--fs-xs);color:var(--faint);font-family:var(--mono);}

/* ── Modal (create/edit) ───────────────────────────────────────────── */
/* Above the sidebar (820) and shell menus so the whole screen is covered.
   Backdrop lightens in dark (like the shell scrim) so the dark modal pops. */
.modal-backdrop{position:fixed;inset:0;z-index:1100;background:rgba(10,12,16,.5);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .modal-backdrop{background:rgba(226,231,242,.16);} }
:root[data-theme="dark"] .modal-backdrop{background:rgba(226,231,242,.16);}
:root[data-theme="light"] .modal-backdrop{background:rgba(10,12,16,.5);}
/* Confirm dialog — above the edit modal (z 200). */
.confirm-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;}
.confirm-backdrop[hidden]{display:none;}
.confirm-box{width:100%;max-width:380px;background:var(--bg);border-radius:14px;box-shadow:0 20px 60px -10px rgba(0,0,0,.5);padding:20px;}
.confirm-msg{font-size:var(--fs);color:var(--text);margin-bottom:18px;}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;}
.btn-danger{background:var(--neg);color:#fff;}
.btn-danger:hover{filter:brightness(.93);}
/* Cap to the viewport (backdrop pads 80px top/bottom) and scroll the body;
   the header stays pinned. */
.modal{width:100%;max-width:460px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--app);border:0;border-radius:var(--r-lg);box-shadow:none;overflow:hidden;}
.modal-h{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:24px 24px 8px;font-size:calc(var(--fs)*1.28);font-weight:700;}
.modal-form{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:8px 24px 24px;}
.modal-form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs);color:var(--muted);}
/* New-case modal: content single-column, classification in a property grid. */
.modal.modal-wide{max-width:720px;}
.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.nc-grid3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:560px){.nc-grid,.nc-grid3{grid-template-columns:1fr;}}
.mini-link{align-self:flex-start;background:none;border:0;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:2px 0;}
.mini-link:hover{text-decoration:underline;}
.nc-picked{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);}
.nc-lh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.nc-lh .mini-link{align-self:baseline;padding:0;}
.ct-org input{width:100%;}
#nc-new:not([hidden]){display:flex;flex-direction:column;gap:14px;}
.op-org{flex:0 0 auto;margin-left:auto;color:var(--faint);font-size:var(--fs-xs);}

/* Telia CTI: inbound screen-pop stack (bottom-right) + click-to-call status. */
#screen-pop{position:fixed;right:20px;bottom:20px;z-index:900;width:320px;max-width:calc(100vw - 40px);
  max-height:calc(100vh - 40px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
#screen-pop:empty{display:none;}
.scp-call{display:flex;flex-direction:column;}
.scp-call:not(.collapsed){order:1;}   /* the expanded card sits below the waiting strips */
.scp-strip{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;font:inherit;
  color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);}
.scp-strip:hover{border-color:var(--accent);}
.scp-strip-ico{flex:0 0 auto;}
.scp-strip-who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scp-strip-org{margin-left:auto;flex:0 0 auto;max-width:45%;color:var(--faint);font-size:var(--fs-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scp-call:not(.collapsed) .scp-strip{display:none;}
.scp-call.collapsed .scp-card{display:none;}
.scp-card{background:var(--bg);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);overflow:hidden;animation:scp-in .18s ease;}
@keyframes scp-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.scp-card{animation:none;}}
.scp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--alt);border-bottom:1px solid var(--line2);}
.scp-call[data-state="connected"] .scp-head{background:color-mix(in srgb, var(--pos, #16a34a) 14%, var(--alt));}
.scp-ico{font-size:16px;}
.scp-title{font-weight:600;font-size:var(--fs-sm);flex:1;}
.scp-body{padding:12px;display:flex;flex-direction:column;gap:6px;}
.scp-num{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;}
.scp-who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.scp-who a{font-weight:600;}
.scp-org{color:var(--faint);font-size:var(--fs-sm);}
.scp-sub{margin-top:4px;color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;}
.scp-cases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.scp-cases a{display:flex;gap:8px;align-items:baseline;padding:2px 0;font-size:var(--fs-sm);min-width:0;}
.scp-key{color:var(--accent);font-weight:600;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.scp-subj{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scp-muted{color:var(--faint);font-size:var(--fs-sm);}
.scp-actions{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line2);}
.scp-actions .btn{flex:1;text-align:center;}
.ct-call-msg{color:var(--muted);font-size:var(--fs-sm);}
.ct-call-btn{margin-left:8px;background:none;border:0;color:var(--accent);cursor:pointer;padding:2px;vertical-align:middle;font-size:var(--fs);}
.ct-call-btn:hover{color:var(--text);}
.modal-form input,.modal-form textarea,.modal-form select{font-family:var(--sans);font-size:calc(var(--fs)*1.06);padding:11px 13px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.modal-actions .btn{font-size:var(--fs);}
.modal-form select{cursor:pointer;}
.modal-form input:focus,.modal-form textarea:focus,.modal-form select:focus{outline:none;border-color:var(--accent);}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:24px;}
.modal-actions .btn-left{margin-right:auto;}
/* E-postmallar editor */
.mailtpl-form{display:flex;flex-direction:column;gap:14px;}
.mailtpl-label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--muted);}
.mailtpl-input{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:var(--fs);padding:9px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.mailtpl-input:focus{outline:none;border-color:var(--accent);}
.mailtpl-body{resize:vertical;min-height:220px;line-height:1.55;}
.mailtpl-vars{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:var(--fs-sm);color:var(--muted);}
.mailtpl-vars-h{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;}
.mailtpl-var code{font-family:var(--mono);font-size:var(--fs-xs);background:var(--alt);border-radius:5px;padding:1px 5px;color:var(--text);}
/* Mail preview modal */
.mailprev{max-width:560px;}
.mailprev-body{padding:2px 18px 20px;}
.mailprev-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);}
.mailprev-k{flex:0 0 auto;min-width:52px;color:var(--faint);}
.mailprev-v{color:var(--text);}
.mailprev-msg{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs);color:var(--text);line-height:1.55;padding-top:15px;}
/* Help / shortcuts modal */
.help-modal{max-width:440px;}
.help-body{padding:4px 18px 16px;}
.help-sec{padding:12px 0;}
.help-sec + .help-sec{border-top:1px solid var(--line);}
.help-sec-t{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600;margin-bottom:6px;}
.kb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:5px 0;font-size:var(--fs-sm);color:var(--text);}
.kb-row .keys{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:var(--fs-xs);}
.kb-plus{color:var(--faint);}
kbd{font-family:var(--mono);font-size:var(--fs-xs);line-height:1;padding:3px 6px;min-width:12px;text-align:center;background:var(--alt);border-radius:6px;box-shadow:inset 0 -1px 0 var(--line2);color:var(--text);}
.btn-del-text{font:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--neg);background:none;border:0;cursor:pointer;padding:8px 4px;border-radius:8px;}
.btn-del-text:hover{text-decoration:underline;}
.del-reason{font-size:var(--fs-xs);color:var(--muted);max-width:62%;line-height:1.35;}

/* Contact modal: section header w/ add button + the org typeahead field */
.org-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.org-card-h .t5{margin-bottom:0;}
.ct-fixed{font-size:var(--fs-sm);color:var(--muted);}
.ct-fixed b{color:var(--text);font-weight:600;}
.ct-org{position:relative;}
.ct-org-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
  background:var(--bg);border:1px solid var(--line2);border-radius:9px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.30);max-height:220px;overflow-y:auto;padding:4px;}
.ct-org-results:empty{display:none;}
.faint-cell{color:var(--faint);font-style:italic;}
.role-tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--alt);border:1px solid var(--line2);border-radius:6px;padding:1px 7px;}
.cell-link:hover{text-decoration:underline;}
.cinline{color:var(--faint);vertical-align:-2px;margin-right:4px;}

/* ── Admin page: left sub-menu + right cards ───────────────────────── */
/* Admin split into pages (via the topbar Admin dropdown): Systeminställningar
   is a narrow column (reuses .settings-col) with a section switcher; Användare
   and Auditlogg are wider standalone pages. */
.sys-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
.settings-col .sys-head .settings-title{margin-bottom:0;}
.admin-wide{width:100%;max-width:1000px;margin:0 auto;padding:40px var(--pad) 0;}
.admin-layout{display:grid;grid-template-columns:200px minmax(0,850px);gap:64px;align-items:start;padding:0 2px;}
.admin-menu{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--top-h) + 12px);}
/* Nav items bleed like the cards: fill overhangs left/right, label stays put. */
.admin-mi{display:block;padding:9px var(--pad);margin:0 calc(var(--pad) * -1);border-radius:9px;font-size:var(--fs-sm);font-weight:500;color:var(--muted);cursor:pointer;}
.admin-mi:hover{background:var(--alt);color:var(--text);}
.admin-mi.on{background:var(--accent-weak);color:var(--text);font-weight:600;}
.admin-mi.soon{color:var(--faint);cursor:default;display:flex;align-items:center;justify-content:space-between;}
.admin-mi.soon:hover{background:none;}
.soon-tag{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;background:var(--alt);border:1px solid var(--line2);border-radius:5px;padding:0 5px;color:var(--faint);}

/* Card = background only, no border (general rule). Group title + description
   live ABOVE the card (Linear-style), not inside it. */
/* Card bg bleeds past the content guide left/right (into the menu gap / shell
   gutter); the --pad padding keeps content aligned with the title above. */
.admin-card{background:var(--bg);border-radius:14px;padding:20px;margin:0 calc(var(--pad) * -1);}
.admin-section{margin-bottom:26px;}
.admin-section:last-child{margin-bottom:0;}
.admin-section-h{margin:0 0 12px;}
.admin-section-h.row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.admin-title{font-size:var(--fs);font-weight:650;}
.admin-desc{font-size:var(--fs-sm);color:var(--muted);margin-top:3px;}
.admin-rows{display:flex;flex-direction:column;gap:8px;}
.admin-row{display:flex;align-items:center;gap:10px;}
/* Drag-to-sort handle (first column). */
.admin-drag{flex:0 0 auto;width:20px;text-align:center;}
.admin-drag.drag{color:var(--faint);cursor:grab;line-height:1;user-select:none;}
.admin-drag.drag:hover{color:var(--muted);}
.admin-row.dragging{opacity:.5;}
/* Head aligns to the data columns (no extra inset); even gap via the flex gap. */
.admin-row.head{color:var(--faint);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;padding:0;}
/* Column-header labels inherit the caption size (their data-cell classes set
   their own font-size, which would otherwise leak into the header row). */
.admin-row.head span{font-size:inherit;font-family:var(--sans);}
.admin-row.off .admin-name{color:var(--faint);text-decoration:line-through;}
.admin-name{flex:1;min-width:0;height:36px;font-family:var(--sans);font-size:var(--fs-sm);padding:0 10px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.admin-row.head .admin-name{border:0;padding:0 11px;background:none;height:auto;}
.admin-name:focus{outline:none;border-color:var(--accent);}
.admin-sort{width:74px;flex:0 0 auto;height:36px;text-align:center;font-family:var(--mono);font-size:var(--fs-sm);padding:0 6px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.admin-row.head .admin-sort{border:0;padding:0;background:none;height:auto;}
.admin-row.head .admin-del{height:auto;}
.admin-sort:focus{outline:none;border-color:var(--accent);}
.admin-flag{flex:0 0 auto;width:48px;display:flex;align-items:center;justify-content:center;}
.admin-act{flex:0 0 auto;width:84px;}
.admin-del{flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--faint);cursor:pointer;font-size:17px;border-radius:9px;transition:background .12s,color .12s;}
.admin-del:hover{color:var(--neg);background:var(--alt);}
.admin-empty{color:var(--faint);font-size:var(--fs-sm);padding:10px 2px;}
.admin-add{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.admin-lineselect{margin-bottom:16px;}
.admin-lineselect label{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);color:var(--muted);max-width:280px;}
.admin-lineselect select{font-family:var(--sans);font-size:var(--fs);padding:8px 10px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.admin-lineselect select:focus{outline:none;border-color:var(--accent);}
/* Users: read-only rows (edit via modal) */
.admin-uname{flex:1;min-width:0;font-size:var(--fs);}
.admin-umail{flex:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);}
.admin-badge{flex:0 0 auto;width:88px;}
.urow{border-radius:9px;padding:9px 8px;margin:0 -8px;cursor:pointer;}
.urow:hover{background:var(--alt);}
.urow .admin-act{color:var(--muted);display:flex;justify-content:flex-end;font-size:1.3em;opacity:0;transition:opacity .12s;}
.urow:hover .admin-act{opacity:1;}
.urow .admin-act:hover{color:var(--text);}
.admin-act-btn{border:0;background:none;color:inherit;cursor:pointer;font-size:1em;padding:2px;display:inline-flex;border-radius:6px;}
.admin-act-btn:hover{color:var(--text);}
/* Profile page header (admin viewing a user) */
.prof-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.prof-actions{display:flex;gap:10px;}
.prof-actions .sel-btn{display:inline-flex;align-items:center;gap:6px;}
.muted-hint{color:var(--faint);font-weight:400;}
.modal-form .modal-chk{flex-direction:row;align-items:center;gap:8px;color:var(--text);}
.modal-sep{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding-top:12px;margin-top:2px;}

/* Lines & mailboxes */
.line-block{padding:15px 0;}
.line-block:first-child{padding-top:0;}
.line-block + .line-block{border-top:1px solid var(--line);}
.line-block.off{opacity:.6;}
.line-head{display:flex;align-items:center;gap:10px;}
.line-name{font-size:var(--fs);font-weight:650;}
.line-active{display:inline-flex;align-items:center;}
.line-active .chk{font-size:var(--fs-sm);color:var(--muted);}
.mb-list{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;}
.mb-row{display:flex;align-items:center;gap:9px;padding:7px 8px;margin:0 -8px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);}
.mb-row:hover{background:var(--alt);}
.mb-row.off{opacity:.6;}
.mb-addr{font-size:var(--fs-sm);}
.mb-add{align-self:flex-start;margin-top:4px;font:inherit;font-size:var(--fs-sm);color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 8px;margin-left:-8px;border-radius:7px;}
.mb-add:hover{background:var(--alt);}

/* Graph/e-post status card */
.gbadge{display:inline-block;font-size:var(--fs-xs);font-weight:600;border-radius:6px;padding:2px 8px;}
.gbadge.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent);}
.gbadge.bad{color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent);}
.gbadge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent);}
.graph-test:not(:empty){margin-top:12px;}

/* Attachments in the conversation */
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
.att{display:inline-flex;align-items:center;gap:7px;text-decoration:none;}
.att-file{padding:6px 10px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);font-size:var(--fs-sm);max-width:240px;}
.att-file:hover{border-color:var(--muted);}
.att-file i{color:var(--muted);flex:0 0 auto;}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-size{color:var(--faint);font-size:var(--fs-xs);flex:0 0 auto;}
.att-img img{max-width:180px;max-height:140px;border-radius:9px;border:1px solid var(--line2);display:block;object-fit:cover;}
.att-img:hover img{border-color:var(--muted);}

/* Form-control border hover. Placed LAST so it wins the specificity tie
   against component base borders (e.g. `.modal-form input`) on :hover; the
   accent :focus rules are higher-specificity and still win. */
input:hover,select:hover,textarea:hover{border-color:var(--faint);}

/* Auditlogg table */
.audit-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.audit-table th{text-align:left;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.audit-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;}
.audit-table tr:last-child td{border-bottom:0;}

/* API-keys page: create row, one-time reveal banner, table tweaks. */
.apikey-new{display:flex;gap:10px;align-items:center;margin:4px 0 18px;}
.apikey-label{flex:1;max-width:340px;font:inherit;font-size:var(--fs);padding:8px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);}
.apikey-label:hover{border-color:var(--faint);}
.apikey-label:focus{outline:none;border-color:var(--accent);}
.apikey-reveal{border:1px solid var(--pos);border-radius:10px;background:color-mix(in srgb,var(--pos) 8%,transparent);padding:12px 14px;margin-bottom:16px;}
.apikey-reveal-h{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;color:var(--pos);margin-bottom:9px;}
.apikey-reveal-row{display:flex;gap:10px;align-items:center;}
.apikey-secret{flex:1;overflow-x:auto;white-space:nowrap;padding:8px 11px;border-radius:8px;background:var(--bg);border:1px solid var(--line2);user-select:all;}
.apikey-table tr.off td{opacity:.5;}
.apikey-act{width:1%;white-space:nowrap;}
.apikey-act form{display:inline;margin:0;}
.admin-act-btn.danger:hover{color:var(--neg);}
.apikey-envnote{margin-top:14px;}

/* Destructive icon button (e.g. GDPR anonymise) — red on hover. */
.sel-btn.ic.danger:hover{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg);}

/* Numeric/text setting input (auto-save rows) */
.set-input{font:inherit;font-size:var(--fs);padding:7px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--text);width:90px;text-align:right;}
.set-input:hover{border-color:var(--faint);}
.set-input:focus{outline:none;border-color:var(--accent);}
/* Drop the cramped native number spinner — type the value, matches text fields */
.set-input[type=number]{appearance:textfield;-moz-appearance:textfield;}
.set-input[type=number]::-webkit-inner-spin-button,
.set-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

/* Inbox pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:32px 0;flex-wrap:wrap;}
.pager-nav{display:flex;align-items:center;gap:10px;}
.pager-btn{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:7px 12px;cursor:pointer;}
.pager-btn:hover{color:var(--text);border-color:var(--faint);}
.pager-btn.disabled{opacity:.45;cursor:default;}
.pager-btn .i-iconoir-nav-arrow-left,.pager-btn .i-iconoir-nav-arrow-right{font-size:1.2em;}
.pager-pages{display:flex;align-items:center;gap:4px;}
.pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line2);border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;}
button.pager-num:hover{color:var(--text);border-color:var(--faint);}
.pager-num.on{background:var(--accent-weak);color:var(--text);border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent);cursor:default;}
.pager-gap{color:var(--faint);padding:0 2px;}
.pager-size{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);}

/* Expandable cases card (Vercel-style chevron on the bottom edge) */
.cases-exp{position:relative;padding-bottom:16px;}
.mini-cases .row.cx-extra{display:none;}
.cx-toggle:checked ~ .mini-cases .row.cx-extra{display:table-row;}
.cx-all{display:none;text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--accent);padding:12px 0 6px;text-decoration:none;}
.cx-all:hover{text-decoration:underline;}
.cx-toggle:checked ~ .cx-all{display:block;}
.cx-btn{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line2);color:var(--muted);cursor:pointer;transition:transform .16s ease,color .16s,border-color .16s;z-index:1;}
.cx-btn:hover{color:var(--text);border-color:var(--faint);}
.cx-toggle:checked ~ .cx-btn{transform:translate(-50%,50%) rotate(180deg);}

/* Dataskydd (GDPR) — data-subject lookup + actions */
.gdpr-search{margin-left:0;min-width:0;width:100%;}
.gdpr-table{width:100%;margin:4px 0 0;}
.gdpr-table td{padding:11px 2px;vertical-align:middle;border-top:1px solid var(--line);}
.gdpr-table tr:first-child td{border-top:0;}
.gdpr-name{text-decoration:none;color:var(--text);font-weight:600;}
.gdpr-name:hover{color:var(--accent);}
.gdpr-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:3px;}
.gdpr-acts{white-space:nowrap;}
.gdpr-acts .mini-btn + .mini-btn{margin-left:8px;}
.mini-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:5px 10px;cursor:pointer;text-decoration:none;}
.mini-btn:hover{color:var(--text);border-color:var(--faint);}
.mini-btn.danger:hover{color:var(--neg);border-color:var(--neg);}

/* Retention (Gallring) — impact preview + explicit Save */
.ret-impact{font-size:var(--fs-sm);color:var(--muted);padding:14px 0 0;line-height:1.5;text-align:left;}
.ret-impact i{font-size:1.05em;vertical-align:-2px;margin-right:5px;}
.ret-impact.ret-warn{color:var(--warn);}
.ret-impact.ret-warn strong{color:var(--text);}
.ret-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px;}
.ret-save{font:inherit;font-size:var(--fs-sm);font-weight:600;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:9px;padding:7px 16px;cursor:pointer;}
.ret-save:hover{filter:brightness(1.07);}
.ret-save:disabled{opacity:.45;cursor:default;filter:none;}
.ret-saved{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--pos);font-weight:600;}

/* Profile activity heatmap (GitHub-style) */
.heatmap{margin-top:4px;}
.hm-scroll{overflow-x:auto;padding-bottom:4px;}
.hm-inner{display:flex;flex-direction:column;gap:5px;min-width:420px;}
.hm-months{display:grid;grid-template-columns:repeat(53,1fr);gap:3px;font-size:var(--fs-xs);color:var(--muted);height:1em;}
.hm-mon{white-space:nowrap;line-height:1;}
.hm-grid{display:grid;grid-template-columns:repeat(53,1fr);grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:3px;}
.hm-cell{width:10px;height:10px;border-radius:2px;background:color-mix(in srgb, var(--muted) 15%, transparent);}
.hm-grid .hm-cell{width:100%;height:auto;aspect-ratio:1;}
.hm-cell.l1{background:color-mix(in srgb, var(--accent) 32%, transparent);}
.hm-cell.l2{background:color-mix(in srgb, var(--accent) 55%, transparent);}
.hm-cell.l3{background:color-mix(in srgb, var(--accent) 78%, transparent);}
.hm-cell.l4{background:var(--accent);}
.hm-cell.empty{background:transparent;}
.hm-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:12px;font-size:var(--fs-xs);color:var(--muted);}

/* ── Statistik page ─────────────────────────────────────────────────────── */
.stats-page{max-width:1240px;width:100%;margin:0 auto;padding:34px 2px 60px;} /* width:100% so a narrow-content page (Användare) still fills to max-width like Översikt, not shrink-to-fit in the flex-column shell */
.stats-page .num{font-variant-numeric:tabular-nums;}
.stats-page .sbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.stats-page .sbar .sp{flex:1;}
.stats-page .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.stats-page .skpi{background:var(--bg);border-radius:14px;padding:16px 18px;}
.stats-page .skpi .lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.stats-page .skpi .val{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.02em;}
.stats-page .skpi .foot{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-xs);color:var(--muted);}
.stats-page .delta{font-weight:700;}
.stats-page .delta.good{color:var(--pos);} .stats-page .delta.bad{color:var(--neg);} .stats-page .delta.flat{color:var(--muted);}
.stats-page .grid{display:grid;grid-template-columns:1.9fr 1fr;gap:14px;margin-top:14px;}
.stats-page .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;}
.stats-page .panel{background:var(--bg);border-radius:14px;padding:18px 20px;min-width:0;box-shadow:var(--card-shadow);}
.stats-page .p-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px;}
.stats-page .p-h h2{font-size:var(--fs);font-weight:700;margin:0;}
.stats-page .p-h .sub{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;}
.stats-page .legend{display:flex;gap:16px;font-size:var(--fs-xs);color:var(--muted);}
.stats-page .legend b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;}
.stats-page .tchart{width:100%;height:240px;}
.stats-page .nodata{color:var(--faint);font-size:var(--fs-sm);padding:14px 0;}
/* Statistik → Användare */
.stats-page .p-h .p-link{font-size:var(--fs-sm);font-weight:600;color:var(--accent);white-space:nowrap;}
.stats-page .p-h .p-link:hover{text-decoration:underline;}
.stats-page .uview{display:grid;grid-template-columns:320px 1fr;gap:14px;margin-top:14px;align-items:start;}
.stats-page .uview .ucenter{justify-content:center;padding:18px 0 8px;}
.stats-page .udonut{width:220px;height:220px;}
.stats-page .udonut .seg{transition:opacity .12s;}
.stats-page .udonut .seg.dim{opacity:.28;}
.utable tr.hl td{background:var(--accent-weak);}
.utable tr[data-agent]{cursor:default;}
.utable-wrap{overflow-x:auto;}
.utable{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);}
.utable th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:600;padding:6px 10px;white-space:nowrap;}
.utable th.l,.utable td.l{text-align:left;}
.utable th.r,.utable td.r{text-align:right;}
.utable td{padding:9px 10px;border-top:1px solid var(--line);white-space:nowrap;}
.utable td.tot{font-weight:700;}
.utable .udot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle;}
.stats-page .donut-wrap{display:flex;align-items:center;gap:22px;}
.stats-page .donut{flex:none;}
.stats-page .donut .ctr-v{fill:var(--text);font-size:26px;font-weight:700;}
.stats-page .donut .ctr-l{fill:var(--muted);font-size:11px;}
.stats-page .dlist{display:flex;flex-direction:column;gap:11px;flex:1;min-width:0;}
.stats-page .drow{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);}
.stats-page .dot{width:10px;height:10px;border-radius:3px;flex:none;}
.stats-page .drow .nm{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-page .drow .ct{color:var(--muted);font-weight:600;}
.stats-page .bars{display:flex;flex-direction:column;gap:13px;}
.stats-page .brow{display:grid;grid-template-columns:140px 1fr 34px;align-items:center;gap:12px;font-size:var(--fs-sm);}
.stats-page .brow .bn{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-page .track{height:9px;background:var(--alt);border-radius:6px;overflow:hidden;}
.stats-page .fill{height:100%;border-radius:6px;background:var(--accent);}
.stats-page .bars-violet .fill{background:var(--violet);}
.stats-page .bars-pos .fill{background:var(--pos);}
.stats-page .brow .bv{text-align:right;font-weight:700;color:var(--text);}
.stats-page .clist{display:flex;flex-direction:column;}
.stats-page .crow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);}
.stats-page .crow:first-child{border-top:0;}
.stats-page .rank{width:20px;color:var(--faint);font-weight:700;font-size:var(--fs-sm);text-align:right;}
.stats-page .crow .cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stats-page .crow .kk{color:var(--faint);font-size:var(--fs-xs);font-family:var(--mono);}
.stats-page .crow .cc{font-weight:700;}
.stats-page .uplot{font-family:var(--sans);}
@media(max-width:900px){
  .stats-page .kpis{grid-template-columns:repeat(2,1fr);}
  .stats-page .grid,.stats-page .grid2,.stats-page .uview{grid-template-columns:1fr;}
}

/* Placeholder ("kommer snart") page */
.ph{max-width:540px;margin:0 auto;padding:120px 24px;text-align:center;}
.ph-ico{color:var(--faint);margin-bottom:24px;line-height:1;}
.ph-ico i{display:inline-block;font-size:80px;}
.ph-h{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;margin:0 0 12px;}
.ph-sub{color:var(--muted);font-size:var(--fs);line-height:1.65;margin:0;}
.ph-tag{display:inline-block;margin-top:22px;font-size:var(--fs-xs);font-weight:600;color:var(--accent);background:var(--accent-weak);border-radius:20px;padding:6px 15px;}

/* Seeded/demo "Exempel" badge */
.seed-tag{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--warn);background:color-mix(in srgb, var(--warn) 15%, transparent);border-radius:6px;padding:1px 7px;vertical-align:1px;}

/* Systeminställningar — left sub-menu + content */
.admin-cols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;width:100%;max-width:960px;margin:0 auto;padding:40px 0 40px;align-items:start;}
.admin-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--top-h) + 20px);}
.admin-nav-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:6px 12px;margin-bottom:6px;}
.admin-nav-item{display:block;padding:8px 12px;border-radius:9px;font-size:var(--fs-sm);font-weight:500;color:var(--muted);text-decoration:none;}
.admin-nav-item:hover{color:var(--text);background:var(--alt);}
.admin-nav-item.on{color:var(--text);background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600;}
.admin-main{min-width:0;padding:0 var(--pad);}
/* Match the compact --fs-sm content sizing of the lookup sections (info-list
   values + set-row controls otherwise inherit the larger body --fs). */
.admin-main .info-v{font-size:var(--fs-sm);}
.admin-main .set-label,.admin-main .set-value,.admin-main .set-input,.admin-main .set-select{font-size:var(--fs-sm);}
@media(max-width:760px){.admin-cols{grid-template-columns:1fr;gap:8px;}.admin-nav{position:static;flex-direction:row;flex-wrap:wrap;}}

/* Tooltip component — opt in with data-tip="…"; a single reused node is
   positioned + shown by the layout script (controllable delay). Dark bubble in
   light mode, light bubble in dark; centered above the element with a down-arrow. */
.tip{position:fixed;top:0;left:0;z-index:200;max-width:260px;padding:5px 9px;border-radius:7px;
  background:var(--tip-bg);color:var(--tip-fg);font-family:var(--sans);font-size:var(--fs-sm);
  line-height:1.4;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .09s ease;box-shadow:0 4px 16px rgba(0,0,0,.22);}
.tip.on{opacity:1;visibility:visible;}
.tip-arrow{position:absolute;bottom:-5px;width:0;height:0;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--tip-bg);}

/* Title hovercard: the case's opening description, revealed on title hover.
   No scrim behind it, so a lifted surface + shadow separates it from the list. */
.hovercard{position:fixed;top:0;left:0;z-index:210;width:420px;max-width:calc(100vw - 24px);
  padding:18px 20px;border-radius:var(--r-md);background:var(--tip-bg);
  color:var(--tip-fg);font-size:var(--fs);line-height:1.5;pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .1s ease;box-shadow:0 12px 36px -8px rgba(0,0,0,.42);}
.hovercard.on{opacity:1;visibility:visible;}
.hovercard .hc-body{margin:0;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;}
.hovercard .hc-empty{margin:0;opacity:.7;font-style:italic;}

/* ═══════════════════════════════════════════════════════════════════════
   REDESIGN SHELL (Coinbase-style) — full-width, fixed sidebar + topbar,
   framed two-column body. One uniform --app surface; the ONLY borders are
   the region framelines (.sb right, .top bottom, .rail left). No elevation.
   ═══════════════════════════════════════════════════════════════════════ */
body{background:var(--app);}
.app{display:grid;grid-template-columns:var(--sb-w) 1fr;height:calc(100vh - var(--banner-h));margin-top:var(--banner-h);overflow:hidden;}

/* ── Sidebar ── */
.sb{position:relative;z-index:820;background:var(--app);display:flex;flex-direction:column;border-right:1px solid var(--line);padding:0 16px 18px;overflow-y:auto;}
/* Logo: equal top/left inset (~26px). Container pads 16, logo adds 10 → 26. */
.sb-logo{display:flex;align-items:center;gap:11px;padding:26px 0 0 10px;flex:0 0 auto;}
.sb-logo .brand-mark{height:34px;}
.sb-logo .brand-word{height:22px;background-color:var(--text);}
.sb-logo:hover .brand-mark{animation:brand-shiver .5s linear;}
@media (prefers-reduced-motion:reduce){ .sb-logo:hover .brand-mark{animation:none;} }
.sb-nav{display:flex;flex-direction:column;gap:4px;margin-top:32px;}
.nav-i{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border-radius:var(--r-pill);color:var(--text);font-weight:600;font-size:calc(var(--fs)*1.06);white-space:nowrap;border:0;background:none;cursor:pointer;transition:background .12s,color .12s;}
.nav-i i{font-size:1.35em;flex:0 0 auto;}
.nav-i:hover{background:var(--alt);}
.nav-i.active{background:var(--accent-weak);color:var(--accent);}
.nav-i.open{background:var(--alt);}
.nav-chev{margin-left:auto;font-size:1.05em;color:var(--faint);}

/* ── Sidebar flyout (submenu): links only, no header ── */
/* padding-top aligns the first flyout link with the sidebar's first nav item:
   logo inset 26 + logo mark 34 + .sb-nav margin-top 32 = 92px. */
.flyout{position:fixed;top:0;bottom:0;left:var(--sb-w);width:300px;background:var(--app);padding:92px 16px 18px;z-index:840;transform:translateX(-12px);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;overflow-y:auto;}
.flyout.on{transform:none;opacity:1;pointer-events:auto;}
.fly-close{position:absolute;top:18px;right:14px;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--alt);color:var(--muted);border:0;cursor:pointer;font-size:18px;}
.fly-close:hover{background:var(--line2);color:var(--text);}
.fly-links{display:flex;flex-direction:column;gap:4px;margin-top:0;}
.fly-i{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-pill);color:var(--text);font-weight:600;font-size:calc(var(--fs)*1.06);}
.fly-i i{font-size:1.3em;}
.fly-i:hover{background:var(--alt);}
.fly-i.active{background:var(--accent-weak);color:var(--accent);}

/* ── Scrim (shared by topbar dropdowns + sidebar flyout) ── */
#scrim{position:fixed;inset:0;background:rgba(10,12,16,.45);z-index:800;opacity:0;pointer-events:none;transition:opacity .14s;}
#scrim.on{opacity:1;pointer-events:auto;}
/* Topbar/inline dropdowns dim the sidebar too (scrim above .sb's z-index:820);
   the sidebar flyout leaves it at 800 so the sidebar stays lit. */
#scrim.cover-sb{z-index:830;}
/* Dark mode: dim by LIGHTENING (a pale wash) so the lit near-black panels gain
   contrast against the surface, instead of darker-on-dark (which reads as flat). */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #scrim{background:rgba(226,231,242,.14);} }
:root[data-theme="dark"] #scrim{background:rgba(226,231,242,.14);}
:root[data-theme="light"] #scrim{background:rgba(10,12,16,.45);}

/* ── Main column + topbar (overrides the legacy fixed carbon .top) ── */
.main{display:flex;flex-direction:column;min-width:0;height:calc(100vh - var(--banner-h));}
.top{position:static;height:var(--top-h);flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:0 var(--frame-pad);background:var(--app);color:var(--text);border-bottom:1px solid var(--line);box-shadow:none;max-width:none;z-index:auto;}
.top-title{font-size:calc(var(--fs)*1.9);font-weight:600;line-height:1.12;letter-spacing:-.02em;}
.top-sp{flex:1;}
.top-search{display:flex;align-items:center;gap:10px;width:340px;max-width:32vw;height:var(--ctrl-h);background:var(--alt);border:0;border-radius:var(--r-pill);padding:0 18px;color:var(--text);font-size:var(--fs);font-weight:500;cursor:text;}
.top-search i{font-size:1.2em;}
.top-search input{flex:1;background:none;border:0;outline:none;font:inherit;color:var(--text);}
.top-search input::placeholder{color:var(--muted);opacity:1;}
/* Full search box on list-page control rows — wider than the topbar's, since
   there's room; actions stay right-aligned via controls-right's auto margin. */
.top-search.list-search{width:420px;max-width:48vw;}
.topbar-actions{display:flex;align-items:center;gap:8px;}
.topbar-ic{width:var(--ctrl-h);height:var(--ctrl-h);border-radius:50%;background:var(--alt);color:var(--text);border:0;display:inline-flex;align-items:center;justify-content:center;font-size:max(20px,calc(var(--fs)*1.25));cursor:pointer;transition:background .12s,color .12s;}
.topbar-ic:hover{background:var(--line2);color:var(--text);}
/* User menu button — colorized (accent) with the first-name initial. */
.topbar-user{background:var(--accent);color:#fff;font-weight:700;font-size:calc(var(--fs)*1.05);}
.topbar-user:hover{background:var(--accent);color:#fff;filter:brightness(1.08);}
.dd.open{z-index:850;}
/* borderless, elevation-free topbar dropdown — roomier, main-menu-sized items */
.topbar-dd .dd-menu{background:var(--app);border:0;box-shadow:none;border-radius:var(--r-lg);min-width:264px;padding:10px;}
.topbar-dd .dd-menu a,.topbar-dd .dd-menu .dd-btn{font-size:calc(var(--fs)*1.06);font-weight:600;padding:12px 14px;border-radius:var(--r-md);}
.topbar-dd .dd-menu a i,.topbar-dd .dd-menu .dd-btn i{font-size:1.35em;}
/* Theme picker (light/dark/system) inside the user menu — segmented, borderless. */
.theme-seg{display:flex;gap:4px;padding:6px 4px;}
.theme-opt{flex:1;display:inline-flex;align-items:center;justify-content:center;height:var(--ctrl-h);border-radius:var(--r-md);background:var(--alt);color:var(--muted);border:0;cursor:pointer;font-size:max(20px,calc(var(--fs)*1.25));transition:background .12s,color .12s;}
.theme-opt:hover{color:var(--text);}
.theme-opt.on{background:var(--accent-weak);color:var(--accent);}

/* ── Content region + inbox two-column ── */
.content{flex:1;min-height:0;overflow-y:auto;}
/* Inbox is a full-width list now (no preview rail — triage happens inline). */
.major{min-width:0;display:flex;flex-direction:column;}

/* ── Inbox controls row (was .subbar) — pills, segmented view, round buttons ── */
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:var(--frame-pad);}
.controls-right{margin-left:auto;display:flex;align-items:center;gap:18px;}
/* Round action buttons cluster tighter (topbar spacing); the 18px above keeps
   the count at arm's length from them. */
.ctrl-actions{display:flex;align-items:center;gap:8px;}
.count{color:var(--text);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;}

/* Dropdown / filter pill (Linje, Tilldelad, Filter) */
.fpill{display:inline-flex;align-items:center;gap:7px;height:var(--ctrl-h);padding:0 15px;border:0;border-radius:var(--r-pill);background:var(--alt);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;}
.fpill:hover{background:var(--line2);}
.fpill.on{background:var(--accent-weak);color:var(--accent);}
.fpill i{font-size:1.15em;}
.fpill-chev{font-size:1em;color:var(--faint);}
.fpill.on .fpill-chev{color:var(--accent);}
.fpill-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:var(--fs-2xs);font-weight:700;}

/* View — segmented, 40px tall to align with the pills */
.grp{display:inline-flex;align-items:center;height:var(--ctrl-h);background:var(--alt);border:0;border-radius:var(--r-pill);padding:4px;gap:2px;}
.grp button,.grp a{height:calc(var(--ctrl-h) - 8px);display:inline-flex;align-items:center;border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:600;padding:0 15px;border-radius:var(--r-pill);cursor:pointer;}
.grp button:not(.on):hover,.grp a:not(.on):hover{background:var(--line2);color:var(--text);}
.grp .on,.grp .on:hover{background:var(--app);color:var(--accent);box-shadow:none;}

/* Round icon buttons (search, CSV) */
.ic-round{width:var(--ctrl-h);height:var(--ctrl-h);border-radius:50%;background:var(--alt);color:var(--text);border:0;display:inline-flex;align-items:center;justify-content:center;font-size:max(19px,calc(var(--fs)*1.2));cursor:pointer;flex:0 0 auto;transition:background .12s,color .12s;}
.ic-round:hover{background:var(--line2);color:var(--text);}

/* Filter — icon-only round button with an active-count badge */
.ic-round.filter-ic{position:relative;}
.ic-round.filter-ic.on{background:var(--accent-weak);color:var(--accent);}
.ic-badge{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;font-size:var(--fs-2xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}

/* Expanding inline search — the icon stays put; the input grows out to its
   right, so the round button morphs into a search field in place. */
.isearch{display:inline-flex;align-items:center;height:var(--ctrl-h);background:var(--alt);border-radius:var(--r-pill);transition:background .12s;}
.isearch:not(.open):hover{background:var(--line2);}
.isearch-ic{width:var(--ctrl-h);height:var(--ctrl-h);border-radius:50%;background:transparent;border:0;color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:max(19px,calc(var(--fs)*1.2));cursor:pointer;flex:0 0 auto;}
.isearch:not(.open):hover .isearch-ic,.isearch.open .isearch-ic{color:var(--text);}
.isearch-input{width:0;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--text);outline:none;overflow:hidden;opacity:0;transition:width .2s ease,opacity .15s,padding .2s;}
.isearch.open .isearch-input{width:210px;padding-right:16px;opacity:1;}

/* Active-filter chips */
.controls .filter-chip{display:inline-flex;align-items:center;gap:2px;height:var(--ctrl-h);padding:0 6px 0 14px;border:0;box-shadow:none;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;}
.controls .filter-chip button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;font-size:1.05em;}
.controls .filter-chip button:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);}

/* Controls dropdown menus — borderless on --app (match topbar dropdowns) */
.controls .dd-menu{background:var(--app);border:0;box-shadow:none;border-radius:var(--r-lg);padding:8px;min-width:210px;}
.controls .dd-menu .fopt + .fopt{margin-top:3px;}
.controls .dd-menu .fopt{display:flex;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:var(--r-md);background:none;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--text);cursor:pointer;}
.controls .dd-menu .fopt:hover{background:var(--hover);}
.controls .dd-menu .fopt.on{background:var(--accent-weak);color:var(--accent);font-weight:600;}
.controls .dd-menu .filter-lbl{padding:8px 12px 4px;color:var(--faint);font-size:var(--fs-xs);font-weight:600;}
/* Tilldelad → "Annan" submenu: a chevron that rotates when open, and an
   indented, scrollable sub-list of other supporters. */
.controls .dd-menu .fsub-chev{margin-left:auto;color:var(--faint);transition:transform .12s;}
.controls .dd-menu .fopt-sub:has(+ .fsub.open) .fsub-chev{transform:rotate(90deg);}
.controls .dd-menu .fsub{display:none;max-height:260px;overflow-y:auto;margin-top:3px;}
.controls .dd-menu .fsub.open{display:block;}
.controls .dd-menu .fsub .fopt{padding-left:24px;}
.controls .dd-menu .fsub .fopt + .fopt{margin-top:3px;}

/* ── Inputs app-wide: same borderless --alt fill + subtle hover/focus lift as
   the login field (no border, no ring). Checkbox/radio/file left native. ── */
/* Single-line inputs — match the page search: 40px tall, pill, roomy sides. */
.modal-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
.mailtpl-input, .set-input{
  -webkit-appearance:none;appearance:none;height:var(--ctrl-h);padding:0 18px;
  font-size:var(--fs);border:0;box-shadow:none;background:var(--alt);border-radius:var(--r-pill);color:var(--text);
}
/* Selects — same, but keep the native arrow (no appearance:none) + room for it. */
.modal-form select,.set-select{
  height:var(--ctrl-h);padding:0 30px 0 18px;font-size:var(--fs);cursor:pointer;
  border:0;box-shadow:none;background:var(--alt);border-radius:var(--r-pill);color:var(--text);
}
/* Textarea — multiline: rounded (not a stadium), padding-based. */
.modal-form textarea{
  -webkit-appearance:none;appearance:none;padding:11px 18px;font-size:var(--fs);min-height:180px;
  border:0;box-shadow:none;background:var(--alt);border-radius:var(--r-lg);color:var(--text);
}
.modal-form input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
.modal-form input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.modal-form textarea:hover,.modal-form textarea:focus,
.modal-form select:hover,.modal-form select:focus,
.mailtpl-input:hover,.mailtpl-input:focus,
.set-input:hover,.set-input:focus,
.set-select:hover,.set-select:focus{
  outline:none;background:color-mix(in srgb,var(--text) 6%,var(--alt));
}
/* Search fields lift too (the pill container is the field; the input is
   transparent inside). Collapsed inbox search stays a round icon button. */
.top-search:hover,.top-search:focus-within,
.isearch.open:hover,.isearch.open:focus-within{background:color-mix(in srgb,var(--text) 6%,var(--alt));}
/* Bump controls text up to body size (a hair under the ~17px nav) so it reads
   in the same family as the side/top bars. */
.fpill,.grp button,.grp a,.count,.controls .filter-chip,.isearch-input,.controls .dd-menu .fopt{font-size:var(--fs);}

/* ── List table flush in the major column ── */
.major .list{background:transparent;}
.major .list table{width:100%;margin:0;}
/* Header: no hover bg, 24px side padding (the standard main-frame inset),
   tight 8px vertical. Body cells share the 24px sides so columns line up. */
.major .list thead th{padding:8px var(--frame-pad);}
.major .list thead tr:hover th{background:transparent;}
.major .list thead th:first-child,.major .list thead th:last-child{border-radius:0;}
.major .list tbody td:first-child,.major .list tbody td:last-child{border-radius:0;}
.major .list tbody td{padding-left:var(--frame-pad);padding-right:var(--frame-pad);font-size:calc(var(--fs)*1.06);}
/* Cell text a touch above body size so the list reads like the rest of the page. */
.major .list .st,.major .list .prio-tag,.major .list .sla,.major .list .who{font-size:calc(var(--fs)*1.06);}
.major .list .id-code{font-size:var(--fs);color:var(--muted);}
.major .list .ic-sep{margin:0 9px;color:var(--faint);}

/* Needs-action highlight: an amber ROW TINT instead of the old "dim the handled
   rows" trick. So all subjects read at full contrast now; attention comes from
   the background. Precedence: attn tint < hover < attn+hover < selection (blue). */
#list .id-name{color:var(--text);font-weight:500;}
#list .subj{font-weight:600;}
#list .row.attn .subj{font-weight:600;}
/* Needs-action highlight: emphasize the status label (dark + semibold) on the
   actionable rows, rather than a row-level marker. */
.major .list .row:hover td{background:var(--row-hover);}
.major .list .row.sel td,.major .list .row.sel:hover td{background:var(--row-sel);}
.major .list .row.attn .st{color:var(--text);font-weight:600;}
/* Assignee shown as a 3+3 lowercase nick (hover reveals the full name). */
.major .list .nick{color:var(--text);}
.major .list .asg-none{color:var(--faint);}
.major .list .asg-empty{color:#9f0712;display:inline-flex;align-items:center;font-size:1.4em;}

/* Inline-editable cells (Status / Prioritet / Tilldelad): the value is a click
   target that opens a small editor dropdown. Hover affordance signals it. */
.major .list .cell-dd{vertical-align:middle;}
.major .list .cell-edit{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;margin:-6px -12px;border:0;border-radius:var(--r-pill);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.major .list .cell-edit:hover{background:var(--line2);}
/* Menu matches the other dropdowns: borderless on --app, no shadow (scrim), spaced rows. */
.major .list .cell-dd .dd-menu{background:var(--app);border:0;box-shadow:none;border-radius:var(--r-lg);padding:8px;min-width:240px;max-height:400px;overflow-y:auto;}
.major .list .cell-dd .attr-opt{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:var(--r-md);background:none;font:inherit;font-size:var(--fs);font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap;}
.major .list .cell-dd .attr-opt + .attr-opt{margin-top:3px;}
.major .list .cell-dd .attr-opt:hover{background:var(--hover);}
.major .list .cell-dd .attr-opt.sel{background:var(--accent-weak);color:var(--accent);font-weight:600;}
/* Org typeahead (Kund cell) reused from the case view — match the cell dropdowns:
   borderless search, spaced rows, accent-weak selection. The picker scrolls its
   own results, so the menu itself doesn't impose a height. */
.major .list .cell-dd .dd-menu:has(.org-picker){max-height:none;overflow:visible;}
.major .list .cell-dd .org-picker{width:360px;max-width:100%;}
.major .list .cell-dd .op-search{border:0;padding:2px 8px 8px;margin-bottom:2px;}
.major .list .cell-dd .op-input{font-size:var(--fs);}
.major .list .cell-dd .op-results{max-height:400px;}
.major .list .cell-dd .op-opt{padding:9px 12px;border-radius:var(--r-md);font-size:var(--fs);font-weight:500;}
.major .list .cell-dd .op-opt + .op-opt{margin-top:3px;}
.major .list .cell-dd .op-opt:hover,.major .list .cell-dd .op-opt.op-active{background:var(--hover);}
.major .list .cell-dd .op-opt.sel{background:var(--accent-weak);color:var(--accent);font-weight:600;}
.major .list .cell-dd .op-new{border-radius:var(--r-md);}
.major .list .cell-dd .op-new:hover{background:var(--hover);}

/* ── Pager — borderless: range summary, round prev/next, pill page numbers ── */
.major .list .pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:32px var(--frame-pad) 48px;flex-wrap:wrap;}
.major .list .pager-range{color:var(--muted);font-size:var(--fs);}
.major .list .pager-nav{display:flex;align-items:center;gap:6px;}
.major .list .pager-btn{width:var(--ctrl-h);height:var(--ctrl-h);padding:0;border:0;border-radius:50%;background:var(--alt);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:max(19px,calc(var(--fs)*1.2));cursor:pointer;}
.major .list .pager-btn:hover{background:var(--line2);color:var(--text);border:0;}
.major .list .pager-btn.disabled{opacity:.4;cursor:default;background:var(--alt);}
.major .list .pager-pages{display:flex;align-items:center;gap:4px;}
.major .list .pager-num{min-width:var(--ctrl-h);height:var(--ctrl-h);padding:0 10px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text);font-weight:600;font-size:var(--fs);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-variant-numeric:tabular-nums;}
.major .list button.pager-num:hover{background:var(--line2);color:var(--text);border:0;}
.major .list .pager-num.on{background:var(--accent-weak);color:var(--accent);border:0;box-shadow:none;cursor:default;}
.major .list .pager-gap{color:var(--faint);padding:0 4px;}
.major .list .pager-size{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs);color:var(--muted);}
.major .list .pager-size .set-select{border:0;background:var(--alt);border-radius:var(--r-pill);padding:8px 32px 8px 14px;color:var(--text);}
.major .list .pager-size .set-select:hover,.major .list .pager-size .set-select:focus{border:0;outline:none;}

/* ── Notification center (topbar dropdown) — bigger, no header bg, roomier ── */
.topbar-dd .notif-menu{width:392px;max-height:78vh;padding:0 8px 6px;overflow-x:hidden;overflow-y:auto;}
/* Header is full-bleed (negative margin cancels the menu's side padding) so it
   still occludes items scrolling under it; text aligns with the item text. */
.notif-h{margin:0 -8px;padding:14px 20px 10px;font-size:var(--fs);font-weight:700;background:var(--app);}
.notif-readall{font-size:var(--fs-sm);}
/* Items fill the padded content width (no side margin → no overflow); the menu's
   8px padding gives the space around the rounded hover pill. */
.topbar-dd .notif-menu .notif-item{margin:2px 0;padding:12px;gap:11px;border-radius:var(--r-md);}
.notif-txt{font-size:var(--fs);line-height:1.4;overflow-wrap:anywhere;}
.notif-time{font-size:var(--fs-xs);font-family:var(--sans);color:var(--faint);}
.notif-empty{font-size:var(--fs-sm);padding:16px 12px 24px;}

/* ── Subtler menu-item hover (dark jumped too hard to --alt) ── */
:root{--hover:#eef1f6;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--hover:#212429;} }
:root[data-theme="dark"]{--hover:#212429;}
:root[data-theme="light"]{--hover:#eef1f6;}
.nav-i:hover,.nav-i.open,.fly-i:hover,.topbar-dd .dd-menu a:hover,.topbar-dd .dd-menu .dd-btn:hover,.notif-menu .notif-item:hover{background:var(--hover);}
/* Keep the red hover on the logout (danger) item — the rule above would flatten it. */
.topbar-dd .dd-menu .dd-btn.dd-danger:hover{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg);}

/* layer: icons */
.i-iconoir-arrow-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 12H3m0 0l8.5-8.5M3 12l8.5 8.5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-arrow-separate-vertical{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 8l-5-5l-5 5m10 8l-5 5l-5-5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-attachment{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m21.438 11.662l-9.19 9.19a6.003 6.003 0 1 1-8.49-8.49l9.19-9.19a4.002 4.002 0 0 1 5.66 5.66l-9.2 9.19a2.001 2.001 0 1 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-bell{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 8.4c0-1.697-.632-3.325-1.757-4.525S13.59 2 12 2s-3.117.674-4.243 1.875C6.632 5.075 6 6.703 6 8.4C6 15.867 3 18 3 18h18s-3-2.133-3-9.6M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-book{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h13.4a.6.6 0 0 1 .6.6v13.114M6 17h14M6 21h14'/%3E%3Cpath stroke-linejoin='round' d='M6 21a2 2 0 1 1 0-4'/%3E%3Cpath d='M9 7h6'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-building{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 9.01l.01-.011M14 9.01l.01-.011M10 13.01l.01-.011m3.99.011l.01-.011M10 17.01l.01-.011m3.99.011l.01-.011M6 20.4V5.6a.6.6 0 0 1 .6-.6H12V3.6a.6.6 0 0 1 .6-.6h4.8a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H6.6a.6.6 0 0 1-.6-.6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-chat-lines{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 10h8m-8 4h4m0 8c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.821.487 3.53 1.338 5L2.5 21.5l4.5-.838A9.96 9.96 0 0 0 12 22'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-chat-plus-in{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 12h3m3 0h-3m0 0V9m0 3v3m0 7c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.821.487 3.53 1.338 5L2.5 21.5l4.5-.838A9.96 9.96 0 0 0 12 22'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 13l4 4L19 7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-cloud-sync{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M20 17.607c1.494-.585 3-1.918 3-4.607c0-4-3.333-5-5-5c0-2 0-6-6-6S6 6 6 8c-1.667 0-5 1-5 5c0 2.689 1.506 4.022 3 4.607m3.58 1.88l1.768 1.768a4 4 0 0 0 5.657 0l.354-.353'/%3E%3Cpath d='m7.934 21.962l-.353-2.475l2.474.354zm8.364-5.06l-1.768-1.768a4 4 0 0 0-5.657 0l-.353.353'/%3E%3Cpath d='m15.945 14.427l.353 2.475l-2.475-.354z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-cloud-upload{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 22v-9m0 0l3.5 3.5M12 13l-3.5 3.5M20 17.607c1.494-.585 3-1.918 3-4.607c0-4-3.333-5-5-5c0-2 0-6-6-6S6 6 6 8c-1.667 0-5 1-5 5c0 2.689 1.506 4.022 3 4.607'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-coffee-cup{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M17 11.6V15a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6v-3.4a.6.6 0 0 1 .6-.6h12.8a.6.6 0 0 1 .6.6M12 9c0-1 .714-2 2.143-2v0A2.857 2.857 0 0 0 17 4.143V3.5M8 9v-.5a3 3 0 0 1 3-3v0a2 2 0 0 0 2-2V3'/%3E%3Cpath d='M16 11h2.5a2.5 2.5 0 0 1 0 5H17'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-community{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7 18v-1a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v1M1 18v-1a3 3 0 0 1 3-3v0m19 4v-1a3 3 0 0 0-3-3v0m-8-2a3 3 0 1 0 0-6a3 3 0 0 0 0 6m-8 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4m16 0a2 2 0 1 0 0-4a2 2 0 0 0 0 4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-computer{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 21h15m4 0h1'/%3E%3Cpath d='M2 16.4V3.6a.6.6 0 0 1 .6-.6h18.8a.6.6 0 0 1 .6.6v12.8a.6.6 0 0 1-.6.6H2.6a.6.6 0 0 1-.6-.6Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-copy{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M19.4 20H9.6a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h9.8a.6.6 0 0 1 .6.6v9.8a.6.6 0 0 1-.6.6'/%3E%3Cpath d='M15 9V4.6a.6.6 0 0 0-.6-.6H4.6a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6H9'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-dots-grid-3x3{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.5 6a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 6.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 6.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M12 6a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 6.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 6.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m6.5-13a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 6.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m0 6.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-download{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 20h12M12 4v12m0 0l3.5-3.5M12 16l-3.5-3.5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-edit{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 21h18M12.222 5.828L15.05 3L20 7.95l-2.828 2.828m-4.95-4.95l-5.607 5.607a1 1 0 0 0-.293.707v4.536h4.536a1 1 0 0 0 .707-.293l5.607-5.607m-4.95-4.95l4.95 4.95'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-emoji-sing-right-note{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath fill='currentColor' d='M20.8 8.1a.9.9 0 1 1-1.8 0a.9.9 0 0 1 1.8 0'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' d='M20.8 8.1a.9.9 0 1 1-1.8 0a.9.9 0 0 1 1.8 0Zm0 0V3.6a.6.6 0 0 1 .6-.6H23'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M16 17a2 2 0 1 1 0-4a2 2 0 0 1 0 4'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M21.95 13c-.501 5.053-4.765 9-9.95 9c-5.523 0-10-4.477-10-10S6.477 2 12 2a10 10 0 0 1 4 .832'/%3E%3Cpath fill='currentColor' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M8.5 9a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1m7 0a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-enlarge{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 9l5-5m0 0v4m0-4h-4M9 15l-5 5m0 0v-4m0 4h4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-filter-list{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 6h18M7 12h10m-6 6h2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-graph-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M20 20H4V4'/%3E%3Cpath d='M4 16.5L12 9l3 3l4.5-4.5'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-group{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1'/%3E%3Cpath d='M13 14v0a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v.5'/%3E%3Cpath stroke-linejoin='round' d='M8 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8m10-3a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-half-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 11.507a9.493 9.493 0 0 0 18 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.49 9.49 0 0 0 3 11.507'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-help-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10'/%3E%3Cpath d='M9 9c0-3.5 5.5-3.5 5.5 0c0 2.5-2.5 2-2.5 5m0 4.01l.01-.011'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-hexagon-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 12h3m3 0h-3m0 0V9m0 3v3m-.3-13.827a.6.6 0 0 1 .6 0l8.926 5.154a.6.6 0 0 1 .3.52v10.307a.6.6 0 0 1-.3.52L12.3 22.826a.6.6 0 0 1-.6 0l-8.926-5.154a.6.6 0 0 1-.3-.52V6.847a.6.6 0 0 1 .3-.52z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-key{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 12a4 4 0 1 1-8 0a4 4 0 0 1 8 0m0 0h12v3m-4-3v3'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-list{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 6h12M4 6.01l.01-.011M4 12.01l.01-.011M4 18.01l.01-.011M8 12h12M8 18h12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-log-out{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 12h7m0 0l-3 3m3-3l-3-3m3-3V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-mail{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m7 9l5 3.5L17 9'/%3E%3Cpath d='M2 17V7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15 6l-6 6l6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m9 6l6 6l-6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-nav-arrow-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 15l6-6l6 6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-open-in-window{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 21h12.4a.6.6 0 0 0 .6-.6V3.6a.6.6 0 0 0-.6-.6H3.6a.6.6 0 0 0-.6.6V16m.5 4.5L12 12m0 0v4m0-4H8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-page{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M4 21.4V2.6a.6.6 0 0 1 .6-.6h11.652a.6.6 0 0 1 .424.176l3.148 3.148A.6.6 0 0 1 20 5.75V21.4a.6.6 0 0 1-.6.6H4.6a.6.6 0 0 1-.6-.6M8 10h8m-8 8h8m-8-4h4'/%3E%3Cpath d='M16 2v3.4a.6.6 0 0 0 .6.6H20'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-page-edit{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M20 12V5.749a.6.6 0 0 0-.176-.425l-3.148-3.148A.6.6 0 0 0 16.252 2H4.6a.6.6 0 0 0-.6.6v18.8a.6.6 0 0 0 .6.6H11M8 10h8M8 6h4m-4 8h3m6.954 2.94l1-1a1.12 1.12 0 0 1 1.586 0v0a1.12 1.12 0 0 1 0 1.585l-1 1m-1.586-1.586l-2.991 2.991a1 1 0 0 0-.28.553l-.244 1.557l1.557-.243a1 1 0 0 0 .553-.28l2.99-2.992m-1.585-1.586l1.586 1.586'/%3E%3Cpath d='M16 2v3.4a.6.6 0 0 0 .6.6H20'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-pause{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.5' d='M6 18.4V5.6a.6.6 0 0 1 .6-.6h2.8a.6.6 0 0 1 .6.6v12.8a.6.6 0 0 1-.6.6H6.6a.6.6 0 0 1-.6-.6Zm8 0V5.6a.6.6 0 0 1 .6-.6h2.8a.6.6 0 0 1 .6.6v12.8a.6.6 0 0 1-.6.6h-2.8a.6.6 0 0 1-.6-.6Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-phone-income{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M22 5h-6m0 0l3-3m-3 3l3 3m-.882 6.702L14 15.5c-2.782-1.396-4.5-3-5.5-5.5l.77-4.13L7.815 2H4.064c-1.128 0-2.016.932-1.847 2.047c.42 2.783 1.66 7.83 5.283 11.453c3.805 3.805 9.286 5.456 12.302 6.113c1.165.253 2.198-.655 2.198-1.848v-3.584z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-phone-outcome{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 5h6m0 0l-3-3m3 3l-3 3m-.882 6.702L14 15.5c-2.782-1.396-4.5-3-5.5-5.5l.77-4.13L7.815 2H4.064c-1.128 0-2.016.932-1.847 2.047c.42 2.783 1.66 7.83 5.283 11.453c3.805 3.805 9.286 5.456 12.302 6.113c1.165.253 2.198-.655 2.198-1.848v-3.584z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 12h6m6 0h-6m0 0V6m0 6v6'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-plus-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 12h4m4 0h-4m0 0V8m0 4v4m0 6c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.576 1.424a.6.6 0 0 1 .848 0l10.152 10.152a.6.6 0 0 1 0 .848L12.424 22.576a.6.6 0 0 1-.848 0L1.424 12.424a.6.6 0 0 1 0-.848zM12 16l4-4m-4 4l-4-4.167M12 16V7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-medium{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.576 1.424a.6.6 0 0 1 .848 0l10.152 10.152a.6.6 0 0 1 0 .848L12.424 22.576a.6.6 0 0 1-.848 0L1.424 12.424a.6.6 0 0 1 0-.848zM6 12h4m4 0h4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.576 1.424a.6.6 0 0 1 .848 0l10.152 10.152a.6.6 0 0 1 0 .848L12.424 22.576a.6.6 0 0 1-.848 0L1.424 12.424a.6.6 0 0 1 0-.848zM12 7l4 4m-4-4l-4 4.167M12 7v9'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-priority-up-solid{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12.955.893a1.35 1.35 0 0 0-1.91 0L.894 11.045a1.35 1.35 0 0 0 0 1.91l10.151 10.15a1.35 1.35 0 0 0 1.91 0l10.151-10.15a1.35 1.35 0 0 0 0-1.91zM12.53 6.47a.75.75 0 0 0-1.071.01l-4 4.167a.75.75 0 1 0 1.082 1.04l2.709-2.823V16a.75.75 0 0 0 1.5 0V8.81l2.72 2.72a.75.75 0 1 0 1.06-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-profile-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2'/%3E%3Cpath d='M4.271 18.346S6.5 15.5 12 15.5s7.73 2.846 7.73 2.846M12 12a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-search{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 17l4 4M3 11a8 8 0 1 0 16 0a8 8 0 0 0-16 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-settings{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3Cpath d='m19.622 10.395l-1.097-2.65L20 6l-2-2l-1.735 1.483l-2.707-1.113L12.935 2h-1.954l-.632 2.401l-2.645 1.115L6 4L4 6l1.453 1.789l-1.08 2.657L2 11v2l2.401.656L5.516 16.3L4 18l2 2l1.791-1.46l2.606 1.072L11 22h2l.604-2.387l2.651-1.098C16.697 18.832 18 20 18 20l2-2l-1.484-1.75l1.098-2.652l2.386-.62V11z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-shield-xmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.871 14.121L11.993 12m2.121-2.121L11.993 12m0 0L9.87 9.879M11.993 12l2.121 2.121M5 18L3.13 4.913a.996.996 0 0 1 .774-1.114l7.662-1.703a2 2 0 0 1 .868 0L20.096 3.8c.51.113.848.596.774 1.114L19 18c-.07.495-.5 3.5-7 3.5S5.07 18.495 5 18'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-sparks{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='1.5' d='M8 15c4.875 0 7-2.051 7-7c0 4.949 2.11 7 7 7c-4.89 0-7 2.11-7 7c0-4.89-2.125-7-7-7ZM2 6.5c3.134 0 4.5-1.318 4.5-4.5c0 3.182 1.357 4.5 4.5 4.5c-3.143 0-4.5 1.357-4.5 4.5c0-3.143-1.366-4.5-4.5-4.5Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-sun-light{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12m10-6h1M12 2V1m0 22v-1m8-2l-1-1m1-15l-1 1M4 20l1-1M4 4l1 1m-4 7h1'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-trash{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m20 9l-1.995 11.346A2 2 0 0 1 16.035 22h-8.07a2 2 0 0 1-1.97-1.654L4 9m17-3h-5.625M3 6h5.625m0 0V4a2 2 0 0 1 2-2h2.75a2 2 0 0 1 2 2v2m-6.75 0h6.75'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-user{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-user-plus{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 10h3m3 0h-3m0 0V7m0 3v3M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-user-xmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.621 12.121L20.743 10m2.121-2.121L20.743 10m0 0L18.62 7.879M20.743 10l2.121 2.121M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-warning-triangle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M20.043 21H3.957c-1.538 0-2.5-1.664-1.734-2.997l8.043-13.988c.77-1.337 2.699-1.337 3.468 0l8.043 13.988C22.543 19.336 21.58 21 20.043 21ZM12 9v4'/%3E%3Cpath stroke-linejoin='round' d='m12 17.01l.01-.011'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-iconoir-xmark{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-suppe-csv{--un-icon:url("data:image/svg+xml;utf8,%3Csvg width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.5 8.75c0 .69-.56 1.25-1.25 1.25H10V8.5h3v-2h-1.75c-.69 0-1.25-.56-1.25-1.25v-2c0-.69.56-1.25 1.25-1.25H14v1.5h-2.5V5h1.75c.69 0 1.25.56 1.25 1.25zm-3.384 9.925c.245.245.565.365.885.365s.64-.12.885-.365l3.145-3.145l-1.06-1.06l-2.22 2.22V11.5h-1.5v5.19l-2.22-2.22l-1.06 1.06zM19.5 17.5v1.75c0 .69-.56 1.25-1.25 1.25H5.75c-.69 0-1.25-.56-1.25-1.25V17.5H3v1.75A2.755 2.755 0 0 0 5.75 22h12.5A2.755 2.755 0 0 0 21 19.25V17.5zM5.25 10h2.5C8.44 10 9 9.44 9 8.75V7.5H7.5v1h-2v-5h2v1H9V3.25C9 2.56 8.44 2 7.75 2h-2.5C4.56 2 4 2.56 4 3.25v5.5C4 9.44 4.56 10 5.25 10m14.73-7.08L18.345 10h-1.69L15 2.75V2h1.5v.665L17.5 7l1-4.335V2H20z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
.i-suppe-spellbook{--un-icon:url("data:image/svg+xml;utf8,%3Csvg width='1.11em' height='1.11em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M319.61 20.654c13.145 33.114 13.144 33.115-5.46 63.5c33.114-13.145 33.116-13.146 63.5 5.457c-13.145-33.114-13.146-33.113 5.457-63.498c-33.114 13.146-33.113 13.145-63.498-5.459zM113.024 38.021c-11.808 21.04-11.808 21.04-35.724 24.217c21.04 11.809 21.04 11.808 24.217 35.725c11.808-21.04 11.808-21.04 35.724-24.217c-21.04-11.808-21.04-11.808-24.217-35.725m76.55 56.184c-.952 50.588-.95 50.588-41.991 80.18c50.587.95 50.588.95 80.18 41.99c.95-50.588.95-50.588 41.99-80.18c-50.588-.95-50.588-.95-80.18-41.99zm191.177 55.885c-.046 24.127-.048 24.125-19.377 38.564c24.127.047 24.127.046 38.566 19.375c.047-24.126.046-24.125 19.375-38.564c-24.126-.047-24.125-.046-38.564-19.375m-184.086 83.88a96 96 0 0 0-3.492.134c-18.591 1.064-41.868 8.416-77.445 22.556L76.012 433.582c78.487-20.734 132.97-21.909 170.99-4.615V247.71c-18.076-8.813-31.79-13.399-46.707-13.737a91 91 0 0 0-3.629-.002zm122.686 11.42a209 209 0 0 0-8.514.098c-12.81.417-27.638 2.215-45.84 4.522v177.135c43.565-7.825 106.85-4.2 171.244 7.566l-39.78-177.197c-35.904-8.37-56.589-11.91-77.11-12.123zm2.289 16.95c18.889.204 36.852 2.768 53.707 5.02l4.437 16.523c-23.78-3.75-65.966-4.906-92.467-.98l-.636-17.805c11.959-2.154 23.625-2.88 34.959-2.758m-250.483 4.658L60.54 313.002h24.094l10.326-46.004H71.158zm345.881 0l39.742 177.031l2.239 9.973l22.591-.152l-40.855-186.852zm-78.857 57.82c16.993.026 33.67.791 49.146 2.223l3.524 17.174c-32.645-3.08-72.58-2.889-102.995 0l-.709-17.174c16.733-1.533 34.04-2.248 51.034-2.223m-281.793 6.18l-6.924 30.004h24.394l6.735-30.004H56.389zm274.418 27.244c4.656.021 9.487.085 14.716.203l2.555 17.498c-19.97-.471-47.115.56-59.728 1.05l-.7-17.985c16.803-.493 29.189-.828 43.157-.766m41.476.447c8.268.042 16.697.334 24.121.069l2.58 17.74c-8.653-.312-24.87-.83-32.064-.502l-2.807-17.234a257 257 0 0 1 8.17-.073m-326.97 20.309l-17.985 77.928l25.035-.17l17.455-77.758H45.313zm303.164 11.848c19.608-.01 38.66.774 56.449 2.572l2.996 20.787c-34.305-4.244-85.755-7.697-119.1-3.244l-.14-17.922c20.02-1.379 40.186-2.183 59.795-2.193m-166.606 44.05c-30.112.09-67.916 6.25-115.408 19.76l-7.22 2.053l187.759-1.27v-6.347c-16.236-9.206-37.42-14.278-65.13-14.196zm134.41 6.174c-19.63.067-37.112 1.439-51.283 4.182v10.064l177.594-1.203c-44.322-8.634-89.137-13.17-126.31-13.043zM26 475v18h460v-18z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1.11em;height:1.11em;}
/* layer: shortcuts */
.container{width:100%;}
@media (min-width: 40rem){
.container{max-width:40rem;}
}
@media (min-width: 48rem){
.container{max-width:48rem;}
}
@media (min-width: 64rem){
.container{max-width:64rem;}
}
@media (min-width: 80rem){
.container{max-width:80rem;}
}
@media (min-width: 96rem){
.container{max-width:96rem;}
}
/* layer: default */
.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
.m\[1\]{margin:1;}
.my{margin-block:calc(var(--spacing) * 4);}
.me{margin-inline-end:calc(var(--spacing) * 4);}
.px{padding-inline:calc(var(--spacing) * 4);}
.b{border-width:1px;}
.grid{display:grid;}
.inline{display:inline;}
.block{display:block;}
.hidden{display:none;}
.visible{visibility:visible;}
.collapse{visibility:collapse;}
.resize{resize:both;}
.ring{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(1px + var(--un-ring-offset-width)) var(--un-ring-color, currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow{--un-shadow:0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.sticky{position:sticky;}
.static{position:static;}
.blur{--un-blur:blur(8px);filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
.filter{filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
.active-filter:active{filter:var(--un-blur,) var(--un-brightness,) var(--un-contrast,) var(--un-grayscale,) var(--un-hue-rotate,) var(--un-invert,) var(--un-saturate,) var(--un-sepia,) var(--un-drop-shadow,);}
.table{display:table;}