/* ==========================================================================
   Handling – gemensam stil. Alla visuella inställningar definieras här.

   Grafisk profil enligt CSMOB grafisk manual v1:
   - Primär blå #174290 (bärande färg). Komplement: mörkgrå #2e3137, blågrön #5c8590,
     vinröd #872a3b, beige (RGB 254,226,189). Färgerna får tonas 75/50/25 %. Svart sparsamt.
   - Typsnitt: Bodoni för huvudrubriker, Trade Gothic för underrubriker och tabeller,
     Georgia för brödtext, Arial som digitalt komplement. Webben saknar Bodoni och
     Trade Gothic, så de ersätts av närmaste systemtypsnitt (se --font-*).
   Tolkningar: manualens HEX för vinröd och beige stämmer inte med RGB; vinröd följer
   angivet HEX, beige följer RGB (#fee2bd). Statusfärger (grönt/gult) finns inte i
   paletten och används bara dämpat i brickor där betydelsen kräver det.
   ========================================================================== */

:root {
  /* Profilfärger */
  --blue: #174290;
  --blue-75: #517199;
  --blue-50: #8ba0c7;
  --blue-25: #c5d0e3;
  --blue-10: #e8ecf4;
  --grey: #2e3137;
  --grey-75: #626469;
  --grey-50: #96989b;
  --grey-25: #cacbcd;
  --grey-10: #ebebec;
  --teal: #5c8590;
  --teal-25: #d6e1e3;
  --teal-10: #eef3f4;
  --wine: #872a3b;
  --wine-25: #e1cace;
  --wine-10: #f3eaec;
  --beige: #fee2bd;
  --beige-50: #fef1de;
  --beige-25: #fff8ee;

  /* Semantik */
  --text: var(--grey);
  --text-muted: var(--grey-75);
  --bg: #fff;
  --bg-soft: #f6f7f9;
  --line: var(--grey-25);
  --line-soft: var(--grey-10);
  --focus: #e4a11b;            /* synligt fokus mot både blått och vitt */
  --danger: var(--wine);
  --ok: #2f6b3a;               /* dämpat grönt, bara i statusbrickor */
  --ok-bg: #e3efe5;
  --warn: #7a5200;
  --warn-bg: var(--beige-50);

  /* Typografi */
  --font-ui: "Trade Gothic LT Std", "Helvetica Neue", Arial, sans-serif;   /* underrubriker, tabeller, kontroller */
  --font-body: Georgia, "Times New Roman", serif;                            /* brödtext i mejl och längre text */
  --font-display: "Bodoni MT", "Bodoni 72", Didot, Georgia, serif;          /* huvudrubrik (appens namn) */
  --fs: 14px;
  --fs-small: 12px;
  --fs-h2: 17px;
  --fs-h3: 14px;
  --lh: 1.4;

  /* Rytm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --radius: 3px;
  --radius-lg: 3px;
  --control-h: 28px;
  --nav-h: 44px;
  --page-x: 16px;

  /* Ytor (temat Modern ändrar dessa) */
  --surface: #fff;
  --shadow: none;
  --topbar-bg: var(--blue);
  --topbar-fg: #fff;
  --topbar-border: transparent;
  --topbar-active: rgba(255,255,255,.18);
  --topbar-hover: rgba(255,255,255,.12);
  --th-bg: var(--bg-soft);
}

/* ---------------------------------------------------------------- grund */
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden-attributet ska alltid vinna över display-regler nedan */
html { font-size: var(--fs); }
body { margin: 0; font-family: var(--font-ui); font-size: var(--fs); line-height: var(--lh); color: var(--text); background: var(--bg); min-height: 100vh; }
a { color: var(--blue); }
a:hover { color: var(--grey); }
code { font-family: Consolas, "Courier New", monospace; font-size: .92em; background: var(--grey-10); padding: 0 .3em; border-radius: var(--radius); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
h1, h2, h3, h4 { font-family: var(--font-ui); margin: 0; line-height: 1.25; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }
h4 { font-size: var(--fs); font-weight: 700; margin-top: var(--sp-3); }
p { margin: 0 0 var(--sp-2); }
ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.2em; }
.muted { color: var(--text-muted); }
.small, .muted.small { font-size: var(--fs-small); }

/* ---------------------------------------------------------------- navigation */
.topbar { height: var(--nav-h); background: var(--topbar-bg); color: var(--topbar-fg); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--page-x); border-bottom: 1px solid var(--topbar-border); }
.topbar .brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--topbar-fg); text-decoration: none; }
.topbar .brand img { height: 24px; width: auto; display: block; }
.topbar .brand .wordmark { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; }
.topbar .brand .product { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; opacity: .85; padding-left: var(--sp-2); border-left: 1px solid currentColor; }
.topbar nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-3); }
.topbar nav a, .topbar nav button { color: var(--topbar-fg); text-decoration: none; padding: 0 var(--sp-3); height: var(--nav-h); line-height: var(--nav-h); display: inline-block; background: none; border: 0; font: inherit; cursor: pointer; opacity: .9; }
.topbar nav a:hover, .topbar nav button:hover { background: var(--topbar-hover); opacity: 1; color: var(--topbar-fg); }
.topbar nav a.active { background: var(--topbar-active); opacity: 1; font-weight: 700; }
.topbar .theme { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); opacity: .9; white-space: nowrap; }
.topbar .theme select { height: 24px; border-radius: var(--radius); border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: var(--fs-small); padding: 0 var(--sp-1); }
.topbar .theme select option { color: #2e3137; background: #fff; }
.topbar .spacer { flex: 1; }
.topbar .user { font-size: var(--fs-small); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.topbar nav form { display: inline; }
.page { padding: var(--sp-3) var(--page-x) var(--sp-5); }

/* ---------------------------------------------------------------- meddelanden */
.flash { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); margin: 0 0 var(--sp-3); border-left: 3px solid; font-size: var(--fs); }
.flash.error { background: var(--wine-10); color: var(--wine); border-color: var(--wine); }
.flash.info { background: var(--blue-10); color: var(--blue); border-color: var(--blue); }
#page-notice { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- knappar */
.button { display: inline-flex; align-items: center; justify-content: center; height: var(--control-h); padding: 0 var(--sp-3); border-radius: var(--radius); border: 1px solid var(--grey-50); background: #fff; color: var(--text); text-decoration: none; cursor: pointer; font: inherit; font-weight: 600; white-space: nowrap; line-height: 1; }
.button:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--grey-75); color: var(--text); }
.button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.button.primary:hover:not(:disabled) { background: #113373; border-color: #113373; color: #fff; }
.button.danger { border-color: var(--wine); color: var(--wine); }
.button.danger:hover:not(:disabled) { background: var(--wine-10); color: var(--wine); }
.button.small { height: 24px; padding: 0 var(--sp-2); font-size: var(--fs-small); font-weight: 600; }
.button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- sidverktyg */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.toolbar-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
#sync-status { margin: 0 0 var(--sp-2); }
.lead { max-width: 70ch; }

/* ---------------------------------------------------------------- tabeller */
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
table.cases { width: 100%; border-collapse: collapse; font-size: var(--fs); }
table.cases th, table.cases td { text-align: left; vertical-align: middle; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line-soft); }
table.cases th { background: var(--th-bg); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
table.cases tbody tr { height: 34px; }
table.cases tbody tr:last-child td { border-bottom: 0; }
table.cases tr.case-row { cursor: pointer; }
table.cases tr.case-row:hover, table.cases tr.case-row:focus { background: var(--blue-10); outline: none; }
table.cases tr.case-row:focus-visible { box-shadow: inset 2px 0 0 var(--focus); }
table.cases td.subject { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
table.cases td.recipient { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.cases td.recipient .muted { display: block; }
.date { white-space: nowrap; color: var(--text-muted); font-size: var(--fs-small); }
.num { text-align: right; white-space: nowrap; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .button + .button { margin-left: var(--sp-1); }
.row-actions a.button { text-decoration: none; }
.empty { color: var(--text-muted); padding: var(--sp-5) 0; text-align: center; }
td.subject { cursor: help; }

/* ---------------------------------------------------------------- brickor */
.status, .assess { display: inline-block; padding: 0 var(--sp-2); height: 20px; line-height: 20px; border-radius: var(--radius); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; text-decoration: none; }
.status.draft { background: var(--beige-50); color: var(--warn); }
.status.sent { background: var(--blue-10); color: var(--blue); }
.status.replied { background: var(--blue); color: #fff; }
.status.parked { background: var(--grey-10); color: var(--grey-75); }
.status.closed_delivered { background: var(--ok-bg); color: var(--ok); }
.status.closed_not_delivered { background: var(--wine-10); color: var(--wine); }
.assess.delivered { background: var(--ok-bg); color: var(--ok); }
.assess.partial { background: var(--beige-50); color: var(--warn); }
.assess.not_delivered { background: var(--wine-10); color: var(--wine); }
.assess.unclear { background: var(--grey-10); color: var(--grey-75); }
.assess.pending { background: var(--teal-10); color: var(--teal); font-style: italic; }
.assess.failed { background: var(--wine-10); color: var(--wine); text-decoration: underline; }
a.assess:hover { filter: brightness(.95); }
.assess-cell { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach { font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: var(--sp-1); }
.icon { vertical-align: -.15em; }

/* ---------------------------------------------------------------- förhandsvisning (hover) */
.preview-pop { position: fixed; z-index: 50; max-width: 34rem; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); pointer-events: none; }
.preview-pop .preview-head { margin-bottom: var(--sp-1); }
.preview-pop #preview-text { white-space: pre-wrap; word-wrap: break-word; max-height: 12rem; overflow: hidden; font-family: var(--font-body); font-size: 13px; }

/* ---------------------------------------------------------------- detaljvy */
.function-bar { position: sticky; top: 0; z-index: 10; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; background: #fff; padding: var(--sp-2) 0; margin: calc(-1 * var(--sp-3)) 0 var(--sp-3); border-bottom: 1px solid var(--line); }
.case-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-4); align-items: start; }
.case-main { min-width: 0; }
.case-side { display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: calc(var(--control-h) + var(--sp-3) + var(--sp-2)); }
.case-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-1); }
.case-head h2 { overflow-wrap: anywhere; }
.meta { font-size: var(--fs-small); color: var(--text-muted); overflow-wrap: anywhere; }
.section-title { margin: var(--sp-3) 0 var(--sp-2); }
.conversation { display: flex; flex-direction: column; gap: var(--sp-2); }
.message { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-3); background: var(--surface); box-shadow: var(--shadow); }
.message.incoming { border-left: 3px solid var(--blue); background: var(--bg-soft); }
.message.outgoing { border-left: 3px solid var(--teal); margin-left: var(--sp-5); }
.message header { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-muted); overflow-wrap: anywhere; }
.msg-subject { font-weight: 700; margin: var(--sp-1) 0; overflow-wrap: anywhere; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 14px; line-height: 1.5; margin: var(--sp-1) 0 0; max-width: 80ch; }
.attachments { list-style: none; padding: var(--sp-2) 0 0; margin: var(--sp-2) 0 0; border-top: 1px dashed var(--line); font-size: var(--fs-small); }
.attachments li { margin: var(--sp-1) 0; }
.attachment-chip { display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--blue-10); border-radius: var(--radius); padding: 2px var(--sp-2); margin: 2px var(--sp-1) 2px 0; max-width: 100%; }
.attachment-chip a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
a.small { font-size: var(--fs-small); margin-left: var(--sp-1); }

/* sidokolumnens paneler */
.panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel > .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.panel > .panel-body { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); }
.panel .count { background: var(--blue); color: #fff; border-radius: 10px; padding: 0 var(--sp-2); font-size: 11px; line-height: 18px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-2); font-size: var(--fs-small); }
.kv dt { color: var(--text-muted); white-space: nowrap; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.attachment-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.attachment-card { display: grid; gap: 2px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-soft); }
.attachment-card:last-child { border-bottom: 0; padding-bottom: 0; }
.attachment-card .name { font-weight: 700; overflow-wrap: anywhere; }
.attachment-card .meta { color: var(--text-muted); }
.attachment-card .links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* bedömning */
.ai-panel { border-color: var(--blue-25); }
.ai-panel .ai-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--blue-10); border-bottom: 1px solid var(--blue-25); }
.ai-panel .ai-body { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); }
.ai-panel h4 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: var(--sp-2) 0 var(--sp-1); }
.ai-panel ul { margin: 0; padding-left: 1.1em; }
.ai-overall { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-1); font-size: var(--fs); }
.ai-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ai-items li { display: grid; gap: 2px; }
.ai-items .item-head { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.ai-items .item-head strong { overflow-wrap: anywhere; }
.ai-items .evidence { color: var(--text-muted); }
.ai-history { margin-top: var(--sp-2); }
.ai-history summary { cursor: pointer; }
.ai-history li { margin: var(--sp-1) 0; }
details.inline { display: inline; }

/* ---------------------------------------------------------------- dialoger och formulär */
dialog { width: min(40rem, 94vw); margin: auto; border: 0; border-top: 4px solid var(--blue); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-4) var(--sp-3); box-shadow: 0 12px 40px rgba(0,0,0,.3); color: var(--text); }
dialog.small { width: min(26rem, 94vw); }
dialog::backdrop { background: rgba(46,49,55,.55); }
dialog form { position: relative; }
dialog h2 { margin-right: var(--sp-5); margin-bottom: var(--sp-2); }
.dialog-x { position: absolute; top: calc(-1 * var(--sp-2)); right: calc(-1 * var(--sp-2)); width: 28px; height: 28px; border: 0; border-radius: var(--radius); background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.dialog-x:hover { background: var(--grey-10); color: var(--text); }
dialog label, .panel label { display: block; margin: var(--sp-2) 0 0; font-weight: 600; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
dialog input, dialog textarea, dialog select, .panel textarea { display: block; width: 100%; margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2); min-height: var(--control-h); border: 1px solid var(--grey-50); border-radius: var(--radius); font: inherit; font-size: var(--fs); color: var(--text); background: #fff; text-transform: none; letter-spacing: 0; }
dialog textarea { font-family: var(--font-body); line-height: 1.45; }
dialog input:focus, dialog textarea:focus, dialog select:focus { border-color: var(--blue); outline: 2px solid var(--focus); outline-offset: 0; }
dialog input:read-only, dialog textarea:read-only { background: var(--bg-soft); color: var(--text-muted); }
dialog .actions, .panel .actions, .actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; align-items: center; }
.field-row { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1); }
.field-row-head { justify-content: space-between; margin-top: var(--sp-2); }
.field-row-head label { margin: 0; }
.check-list { display: grid; gap: 2px; margin-top: var(--sp-1); max-height: 12rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-1) var(--sp-2); background: var(--bg-soft); }
.check-list .check { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs); color: var(--text); cursor: pointer; }
.check-list input[type=checkbox] { width: auto; margin: 0; min-height: 0; }
.tag { display: inline-block; background: var(--blue-10); color: var(--blue); border-radius: var(--radius); padding: 0 var(--sp-2); font-size: var(--fs-small); margin: 1px var(--sp-1) 1px 0; }
.field-row select { flex: 1; margin-top: 0; }
#recipient-input { margin-top: var(--sp-1); }
.placeholder-mark { background: var(--beige); color: var(--warn); padding: 0 .15em; border-radius: 2px; font-weight: 600; }
.placeholder-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--warn); background: var(--beige-25); border: 1px solid var(--beige); border-radius: var(--radius); padding: var(--sp-1) var(--sp-2); }
.placeholder-help { margin-top: var(--sp-2); font-size: var(--fs-small); background: var(--bg-soft); border-radius: var(--radius); padding: var(--sp-1) var(--sp-2); }
.placeholder-help summary { cursor: pointer; font-weight: 600; }
.placeholder-help ul { margin: var(--sp-1) 0; }
.preview-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 14px; line-height: 1.5; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0; max-height: 50vh; overflow: auto; }
.msg-subject.preview { margin-bottom: var(--sp-1); }

/* ---------------------------------------------------------------- inloggning och felsidor */
.login { max-width: 28rem; margin: 10vh auto 0; text-align: center; }
.login h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin-bottom: var(--sp-2); }
.login .button { height: 36px; padding: 0 var(--sp-4); margin-top: var(--sp-3); }

/* ---------------------------------------------------------------- mindre skärmar */
@media (max-width: 64rem) {
  .case-layout { grid-template-columns: 1fr; }
  .case-side { position: static; }
}
@media (max-width: 48rem) {
  :root { --page-x: 12px; }
  .topbar { gap: var(--sp-2); }
  .topbar .brand .product { display: none; }
  .topbar .user { display: none; }
  .topbar { overflow-x: auto; scrollbar-width: none; }   /* hela raden rullar i sidled i stället för att klippas */
  .topbar nav a, .topbar nav button { padding: 0 var(--sp-2); white-space: nowrap; }
  .function-bar { margin-top: calc(-1 * var(--sp-3)); }
  .message.outgoing { margin-left: var(--sp-3); }
  table.cases td.subject { max-width: 14rem; }
  /* Tabellen rullar i sidled (.table-wrap); knapparna får inte radbrytas så att raderna blir höga. */
  .row-actions { white-space: nowrap; }
  dialog { width: 96vw; padding: var(--sp-3); }
}


/* ==========================================================================
   Tema "Modern": samma profilfärger, ljus grå bakgrund, vita kort med mjuka hörn
   och skuggor, vit navigationsrad med blå accent. Väljs i navigationsraden och
   sparas i webbläsaren (data-theme på <html>).
   ========================================================================== */
html[data-theme="modern"] {
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #f3f5f9;
  --bg-soft: #f7f8fb;
  --surface: #fff;
  --line: #e2e6ee;
  --line-soft: #edf0f5;
  --radius: 6px;
  --radius-lg: 10px;
  --control-h: 32px;
  --nav-h: 52px;
  --page-x: 24px;
  --shadow: 0 1px 2px rgba(23,66,144,.06), 0 4px 14px rgba(23,66,144,.06);
  --topbar-bg: #fff;
  --topbar-fg: var(--grey);
  --topbar-border: var(--line);
  --topbar-active: var(--blue-10);
  --topbar-hover: var(--bg-soft);
  --th-bg: #fff;
}
html[data-theme="modern"] .topbar, html.palette-theme .topbar { box-shadow: 0 1px 0 var(--line); }
html[data-theme="modern"] .topbar .brand .wordmark, html.palette-theme .topbar .brand .wordmark { font-weight: 800; letter-spacing: -.02em; color: var(--blue); }
html[data-theme="modern"] .topbar .brand .product, html.palette-theme .topbar .brand .product { color: var(--text-muted); border-left-color: var(--line); }
html[data-theme="modern"] .topbar nav a, html[data-theme="modern"] .topbar nav button, html.palette-theme .topbar nav a, html.palette-theme .topbar nav button { height: 32px; line-height: 32px; border-radius: 999px; margin: 0 2px; font-weight: 500; }
html[data-theme="modern"] .topbar nav a.active, html.palette-theme .topbar nav a.active { color: var(--blue); }
html[data-theme="modern"] .topbar .user, html.palette-theme .topbar .user { color: var(--text-muted); }
html[data-theme="modern"] .topbar .theme select, html.palette-theme .topbar .theme select { border-color: var(--line); background: #fff; }
html[data-theme="modern"] h2, html.palette-theme h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
html[data-theme="modern"] h3, html.palette-theme h3 { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-muted); font-weight: 600; }
html[data-theme="modern"] .page, html.palette-theme .page { padding-top: var(--sp-4); }
html[data-theme="modern"] .button, html.palette-theme .button { border-radius: 8px; border-color: var(--line); box-shadow: 0 1px 1px rgba(0,0,0,.04); font-weight: 600; }
html[data-theme="modern"] .button:hover:not(:disabled), html.palette-theme .button:hover:not(:disabled) { border-color: var(--grey-25); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
html[data-theme="modern"] .button.primary, html.palette-theme .button.primary { box-shadow: 0 2px 8px rgba(23,66,144,.3); }
html[data-theme="modern"] .button.small, html.palette-theme .button.small { height: 26px; border-radius: 6px; }
html[data-theme="modern"] table.cases th, html.palette-theme table.cases th { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--text-muted); border-bottom: 1px solid var(--line); padding: var(--sp-2); }
html[data-theme="modern"] table.cases tbody tr, html.palette-theme table.cases tbody tr { height: 42px; }
html[data-theme="modern"] table.cases td, html.palette-theme table.cases td { padding: var(--sp-2); }
html[data-theme="modern"] table.cases tr.case-row:hover, html.palette-theme table.cases tr.case-row:hover { background: var(--bg-soft); }
html[data-theme="modern"] .status, html[data-theme="modern"] .assess, html.palette-theme .status, html.palette-theme .assess { border-radius: 999px; height: 22px; line-height: 22px; padding: 0 10px; font-weight: 600; }
html[data-theme="modern"] .status::before, html[data-theme="modern"] a.assess::before, html.palette-theme .status::before, html.palette-theme a.assess::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 2px; opacity: .8; }
html[data-theme="modern"] .flash, html.palette-theme .flash { border-left: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
html[data-theme="modern"] .function-bar, html.palette-theme .function-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); box-shadow: var(--shadow); top: var(--sp-2); }
html[data-theme="modern"] .message.incoming, html.palette-theme .message.incoming { border-left: 0; background: #fff; }
html[data-theme="modern"] .message.outgoing, html.palette-theme .message.outgoing { border-left: 0; background: var(--blue-10); border-color: var(--blue-25); margin-left: var(--sp-5); }
html[data-theme="modern"] .message .who strong, html.palette-theme .message .who strong { color: var(--blue); }
html[data-theme="modern"] .msg-body, html.palette-theme .msg-body { font-size: 14px; line-height: 1.55; }
html[data-theme="modern"] .panel > .panel-head, html[data-theme="modern"] .ai-panel .ai-head, html.palette-theme .panel > .panel-head, html.palette-theme .ai-panel .ai-head { background: #fff; border-bottom: 1px solid var(--line-soft); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
html[data-theme="modern"] .panel > .panel-body, html[data-theme="modern"] .ai-panel .ai-body, html.palette-theme .panel > .panel-body, html.palette-theme .ai-panel .ai-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
html[data-theme="modern"] .ai-panel, html.palette-theme .ai-panel { border-color: var(--line); }
html[data-theme="modern"] .ai-panel h3, html.palette-theme .ai-panel h3 { color: var(--blue); }
html[data-theme="modern"] .ai-panel h4, html.palette-theme .ai-panel h4 { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--text); }
html[data-theme="modern"] .attachment-chip, html.palette-theme .attachment-chip { border-radius: 999px; }
html[data-theme="modern"] dialog, html.palette-theme dialog { border-top: 0; border-radius: 14px; padding: var(--sp-5); box-shadow: 0 24px 60px rgba(23,66,144,.25); }
html[data-theme="modern"] dialog h2, html.palette-theme dialog h2 { font-size: 18px; }
html[data-theme="modern"] dialog label, html[data-theme="modern"] .panel label, html.palette-theme dialog label, html.palette-theme .panel label { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--text); }
html[data-theme="modern"] dialog input, html[data-theme="modern"] dialog textarea, html[data-theme="modern"] dialog select, html.palette-theme dialog input, html.palette-theme dialog textarea, html.palette-theme dialog select { border-radius: 8px; border-color: var(--line); background: var(--bg-soft); padding: var(--sp-2) var(--sp-3); }
html[data-theme="modern"] dialog input:focus, html[data-theme="modern"] dialog textarea:focus, html[data-theme="modern"] dialog select:focus, html.palette-theme dialog input:focus, html.palette-theme dialog textarea:focus, html.palette-theme dialog select:focus { background: #fff; border-color: var(--blue); outline: 3px solid var(--blue-25); }
html[data-theme="modern"] .dialog-x, html.palette-theme .dialog-x { border-radius: 50%; }
html[data-theme="modern"] .login, html.palette-theme .login { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: var(--sp-5); }
html[data-theme="modern"] .login h2, html.palette-theme .login h2 { font-weight: 800; letter-spacing: -.02em; color: var(--blue); }
html[data-theme="modern"] .preview-pop, html.palette-theme .preview-pop { border-left: 0; border-radius: var(--radius-lg); }

/* ==========================================================================
   Palettstilar (themes.json). Sex färger per stil sätts som --p-* på <html> av base.html;
   allt annat (toner, bakgrund, linjer, brickor) härleds här med color-mix(). Formspråket
   delas med Modern (reglerna ovan gäller även html.palette-theme).
   ========================================================================== */
html.palette-theme {
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --blue: var(--p-primary);
  --blue-75: color-mix(in srgb, var(--p-primary) 75%, white);
  --blue-50: color-mix(in srgb, var(--p-primary) 50%, white);
  --blue-25: color-mix(in srgb, var(--p-primary) 25%, white);
  --blue-10: color-mix(in srgb, var(--p-primary) 10%, white);
  --teal: var(--p-accent);
  --teal-25: color-mix(in srgb, var(--p-accent) 25%, white);
  --teal-10: color-mix(in srgb, var(--p-accent) 10%, white);
  --text: color-mix(in srgb, var(--p-primary) 35%, #1f2933);
  --text-muted: color-mix(in srgb, var(--p-primary) 35%, #6b7280);
  --bg: color-mix(in srgb, var(--p-accent) 7%, white);
  --bg-soft: color-mix(in srgb, var(--p-accent) 4%, white);
  --surface: #fff;
  --line: color-mix(in srgb, var(--p-accent) 22%, white);
  --line-soft: color-mix(in srgb, var(--p-accent) 12%, white);
  --ok: color-mix(in srgb, var(--p-success) 70%, black);
  --ok-bg: color-mix(in srgb, var(--p-success) 25%, white);
  --warn: color-mix(in srgb, var(--p-warn) 55%, black);
  --warn-bg: color-mix(in srgb, var(--p-warn) 25%, white);
  --danger: var(--p-danger);
  --wine: var(--p-danger);
  --wine-25: color-mix(in srgb, var(--p-danger) 25%, white);
  --wine-10: color-mix(in srgb, var(--p-danger) 10%, white);
  --beige: var(--p-highlight);
  --beige-50: color-mix(in srgb, var(--p-highlight) 50%, white);
  --beige-25: color-mix(in srgb, var(--p-highlight) 25%, white);
  --focus: #e4a11b;
  --radius: 6px;
  --radius-lg: 10px;
  --control-h: 32px;
  --nav-h: 52px;
  --page-x: 24px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--p-primary) 8%, transparent), 0 4px 14px color-mix(in srgb, var(--p-primary) 10%, transparent);
  --topbar-bg: linear-gradient(90deg, var(--p-primary) 0%, color-mix(in srgb, var(--p-accent) 45%, var(--p-primary)) 100%);
  --topbar-fg: var(--p-on-primary);
  --topbar-border: transparent;
  --topbar-active: rgba(255,255,255,.2);
  --topbar-hover: rgba(255,255,255,.12);
  --th-bg: #fff;
}
html.palette-theme .topbar { box-shadow: 0 2px 10px color-mix(in srgb, var(--p-primary) 30%, transparent); }
html.palette-theme .topbar .brand .wordmark { color: var(--p-on-primary); }
html.palette-theme .topbar .brand .product { color: var(--p-highlight); border-left-color: rgba(255,255,255,.4); }
html.palette-theme .topbar nav a.active { color: var(--p-on-primary); background: rgba(255,255,255,.22); }
html.palette-theme .topbar .user { color: var(--p-on-primary); opacity: .85; }
html.palette-theme .topbar .theme select { border-color: currentColor; background: transparent; color: var(--p-on-primary); }
html.palette-theme .button.primary { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--p-accent) 40%, transparent); }
html.palette-theme .button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--p-accent) 85%, black); border-color: color-mix(in srgb, var(--p-accent) 85%, black); color: var(--p-on-accent); }
html.palette-theme a { color: color-mix(in srgb, var(--p-accent) 80%, var(--text)); }  /* länkar: lite mörkare än accenten för läsbarhet */
html.palette-theme a:hover { color: var(--p-primary); }
html.palette-theme h3, html.palette-theme .ai-panel h3 { color: color-mix(in srgb, var(--p-accent) 80%, var(--text)); }
/* Brickor i palettens egna färger, fyllda, så att paletten faktiskt syns i listan. */
html.palette-theme .status.draft { background: var(--p-highlight); color: color-mix(in srgb, var(--p-highlight) 25%, black); }
html.palette-theme .status.sent { background: var(--p-accent); color: var(--p-on-accent); }
html.palette-theme .status.replied { background: var(--p-primary); color: var(--p-on-primary); }
html.palette-theme .status.parked { background: var(--line); color: var(--text); }
html.palette-theme .status.closed_delivered { background: var(--p-success); color: var(--p-on-success); }
html.palette-theme .status.closed_not_delivered { background: var(--p-danger); color: var(--p-on-danger); }
html.palette-theme .assess.delivered { background: var(--p-success); color: var(--p-on-success); }
html.palette-theme .assess.partial { background: var(--p-warn); color: var(--p-on-warn); }
html.palette-theme .assess.not_delivered { background: var(--p-danger); color: var(--p-on-danger); }
html.palette-theme .assess.unclear { background: var(--line); color: var(--text); }
html.palette-theme .assess.pending { background: var(--teal-10); color: var(--p-accent); border: 1px solid var(--teal-25); }
html.palette-theme .assess.failed { background: var(--p-danger); color: var(--p-on-danger); }
html.palette-theme .status::before, html.palette-theme a.assess::before { opacity: .9; }
html.palette-theme a.assess:hover { filter: brightness(1.08); }
html.palette-theme table.cases tr.case-row:hover { background: var(--bg-soft); }
html.palette-theme .message.outgoing { background: var(--teal-10); border-color: var(--teal-25); }
html.palette-theme .message .who strong { color: var(--p-primary); }
html.palette-theme .attach { color: var(--p-accent); }
html.palette-theme .attachment-chip { background: var(--teal-10); }
html.palette-theme .tag { background: var(--teal-10); color: var(--p-accent); }
html.palette-theme .flash.info { background: var(--teal-10); color: var(--p-primary); border-color: var(--p-accent); }
html.palette-theme .flash.error { background: var(--wine-10); color: var(--p-danger); border-color: var(--p-danger); }
html.palette-theme .button.danger { border-color: var(--p-danger); color: var(--p-danger); }
html.palette-theme .placeholder-mark { background: var(--p-highlight); color: color-mix(in srgb, var(--p-highlight) 35%, black); }
html.palette-theme .placeholder-hint { background: var(--beige-25); border-color: var(--p-highlight); color: color-mix(in srgb, var(--p-highlight) 35%, black); }
html.palette-theme dialog { box-shadow: 0 24px 60px color-mix(in srgb, var(--p-primary) 35%, transparent); }
html.palette-theme dialog input:focus, html.palette-theme dialog textarea:focus, html.palette-theme dialog select:focus { border-color: var(--p-accent); outline-color: var(--teal-25); }
html.palette-theme .login h2 { color: var(--p-primary); }