/* ===========================================================
   VA Planering – tema och baslayout
   Grafit-UI med dova accent- och statusfärger för skonsam läsning.
   =========================================================== */

:root {
  /* Bakgrunder (mörkt, gråskaligt) */
  --bg-0: #1a1a1a;
  --bg-1: #202020;
  --bg-2: #242424;
  --bg-3: #2c2c2c;
  --bg-hover: #303030;
  --border: #343434;
  --border-strong: #444444;

  /* Text – höjd kontrast för bättre läsbarhet */
  --text: #ececec;
  --text-muted: #b6b6b6;
  --text-faint: #909090;

  /* Accent – Qvadrants varumärkesorange (#FF8A3D enligt logotypguiden) */
  --accent: #ff8a3d;
  --accent-hover: #ff9d5c;
  --accent-soft: rgba(255, 138, 61, 0.16);

  /* Dova statusfärger */
  --status-todo: #8a8a8a;     /* att göra */
  --status-progress: #b8923a; /* pågående */
  --status-done: #5e8c61;     /* klar */
  --status-overdue: #b5544a;  /* försenat */
  --status-soon: #b8923a;     /* deadline inom 7 dagar */

  /* Tydliga signalfärger (Översikt – ADHD-vänligt) */
  --signal-red: #e5534b;
  --signal-orange: #e0883a;
  --signal-yellow: #e3b53f;
  --signal-green: #57bb6c;
  --signal-red-bg: rgba(229, 83, 75, 0.14);
  --signal-orange-bg: rgba(224, 136, 58, 0.14);
  --signal-yellow-bg: rgba(227, 181, 63, 0.14);
  --signal-green-bg: rgba(87, 187, 108, 0.14);

  --danger-text: #e6b3ad;

  /* Sekundär varumärkesfärg för strukturetiketter (eyebrows). Default = faint,
     så icke-Gaida-teman är oförändrade. Gaida sätter den till lila. */
  --brand-2: var(--text-faint);

  --radius: 8px;
  --radius-sm: 5px;
  --transition: 140ms ease;
}

/* ===== Teman =====
   Varje tema = ett varumärke (Qvadrant/Sokigo/Gaida) × läge (mörkt/ljust).
   Signalfärgerna (röd/orange/gul/grön) behåller sin betydelse men tonas per
   tema så dashboarden känns enhetlig: mörkare nyanser på ljus botten, starkare
   tonplattor på Gaidas lila. Egna importerade teman injiceras som [data-theme="custom"]
   av js/theme.js (sätter samma variabler). */

/* Qvadrant ljust */
[data-theme="light"] {
  --bg-0: #ececed;
  --bg-1: #ffffff;
  --bg-2: #f6f6f8;
  --bg-3: #e7e7ea;
  --bg-hover: #dededf;
  --border: #d9d9de;
  --border-strong: #c3c3c9;
  --text: #1d1d1f;
  --text-muted: #56565c;
  --text-faint: #86868c;
  --accent: #ff8a3d;
  --accent-hover: #f5781f;
  --accent-soft: rgba(255, 138, 61, 0.14);
  --danger-text: #a8392f;
}
/* Sokigo – mörk bas med Sokigos turkosa accent */
[data-theme="sokigo"] {
  --accent: #3eb1c8;
  --accent-hover: #54c2d8;
  --accent-soft: rgba(62, 177, 200, 0.16);
}
/* Sokigo ljust – ljus bas med Sokigos turkosa accent */
[data-theme="sokigo-light"] {
  --bg-0: #e9eef0;
  --bg-1: #ffffff;
  --bg-2: #f3f7f8;
  --bg-3: #e4ecee;
  --bg-hover: #dae5e8;
  --border: #d3e0e3;
  --border-strong: #b8ccd1;
  --text: #15282c;
  --text-muted: #4a5c60;
  --text-faint: #7c9398;
  --accent: #2f9cb2;
  --accent-hover: #26889c;
  --accent-soft: rgba(62, 177, 200, 0.13);
  --danger-text: #a8392f;
}
/* Gaida – mörk lila bas (Gaida Purple) med orange accent (Gaida Orange).
   --brand-2 = ljus lila för sektionsetiketter så lila + orange syns ihop. */
[data-theme="gaida"] {
  --bg-0: #1b1330;
  --bg-1: #221938;
  --bg-2: #291f45;
  --bg-3: #332750;
  --bg-hover: #3a2d5b;
  --border: #3a2d5a;
  --border-strong: #4d3d70;
  --text: #f1eef7;
  --text-muted: #bcb4d3;
  --text-faint: #8d84aa;
  --accent: #fe783e;
  --accent-hover: #ff8c59;
  --accent-soft: rgba(254, 120, 62, 0.18);
  --brand-2: #b9a4e8;
  /* Starkare tonplattor så signalkorten läses mot den lila bakgrunden. */
  --signal-red-bg: rgba(229, 83, 75, 0.22);
  --signal-orange-bg: rgba(254, 120, 62, 0.22);
  --signal-yellow-bg: rgba(227, 181, 63, 0.18);
  --signal-green-bg: rgba(87, 187, 108, 0.18);
}
/* Gaida ljust – tydligt lavendel (Gaida Purple urtvättat) + Gaida-orange accent.
   Lila syns i ytor/kanter/etiketter, orange är handlingsfärgen → Gaida-brandat. */
[data-theme="gaida-light"] {
  --bg-0: #ded3ef;
  --bg-1: #f8f5fd;
  --bg-2: #efe9f8;
  --bg-3: #e4dbf3;
  --bg-hover: #d9ccef;
  --border: #d3c5e7;
  --border-strong: #bba6dc;
  --text: #2a1c44;
  --text-muted: #5d5078;
  --text-faint: #897ba8;
  --accent: #fe783e;
  --accent-hover: #ed6122;
  --accent-soft: rgba(254, 120, 62, 0.14);
  --brand-2: #6c3fb0;
  --danger-text: #a8392f;
}

/* Signalfärger för ljusa teman: mörkare nyanser + svagare tonplattor så att
   både den stora siffran och bakgrunden har kontrast mot ljus/lavendel botten. */
[data-theme="light"],
[data-theme="sokigo-light"],
[data-theme="gaida-light"] {
  --status-todo: #7c7c82;
  --status-progress: #b07d12;
  --status-done: #2f9e54;
  --status-overdue: #cc3b30;
  --status-soon: #c2700f;
  --signal-red: #d13a30;
  --signal-orange: #cf6e1c;
  --signal-yellow: #b07d12;
  --signal-green: #2f9e54;
  --signal-red-bg: rgba(209, 58, 48, 0.10);
  --signal-orange-bg: rgba(207, 110, 28, 0.10);
  --signal-yellow-bg: rgba(176, 125, 18, 0.12);
  --signal-green-bg: rgba(47, 158, 84, 0.12);
}

* { box-sizing: border-box; }

/* Knappar ärver tema-typsnitt och textfärg (annars renderas de i mörk standardfärg). */
button { font-family: inherit; color: inherit; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ---- Egen titelrad (ramlöst fönster) ---- */
.titlebar {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  padding: 0 6px 0 16px;
  user-select: none;
  -webkit-app-region: drag; /* hela raden drar fönstret … */
}
.titlebar__brand { display: flex; align-items: center; color: var(--accent); }
.titlebar__brand .brand-logo { height: 24px; width: auto; display: block; }
.titlebar__controls { display: flex; gap: 2px; -webkit-app-region: no-drag; } /* … utom knapparna */
.winbtn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 42px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}
.winbtn:hover { background: var(--bg-3); color: var(--text); }
.winbtn--close:hover { background: #e04434; color: #fff; }
.winbtn svg { width: 12px; height: 12px; display: block; }

/* ---- Valfri bakgrundsbild ----
   #bg-layer bär bilden (sätts via CSSOM), #bg-scrim dämpar mot temabakgrunden
   så texten förblir läsbar. Sidofält/kort är opaka → bilden syns mest i huvudytan. */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-0);
  opacity: var(--bg-scrim, 1);
  pointer-events: none;
}

/* ---- Skelett: sidofält + huvudyta ---- */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  flex: 1;
  min-height: 0;
}

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Panelen rullar INTE som helhet – bara matristrädet gör det (.tree).
     Tidigare låg overflow-y här, så navigeringen överst och kontoknappen
     längst ner rullade bort så fort man hade många matriser. Det som är
     navigation ska stå still; det som är en lista får rulla. */
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  /* Q-figuren ärver accentfärgen; texten sätts via .wordmark__text. */
  color: var(--accent);
}
.brand .brand-logo { height: 26px; width: auto; display: block; }

/* Qvadrant-ordmärke: Q i accent (currentColor), "vadrant" i textfärg.
   Inga inline-style-attribut (CSP style-src 'self') – allt via klasser här. */
.brand-logo { color: var(--accent); display: block; }
/* Ordmärket är enfärgat (hela "Qvadrant" i accentfärgen) enligt logotypguiden. */
.wordmark__text {
  fill: currentColor;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sidebar-hint,
.muted {
  color: var(--text-muted);
  font-size: 12px;
}

.main {
  overflow: auto;
  padding: 32px;
  position: relative;
  z-index: 1; /* huvudytans innehåll ovanpå ambient-partiklarna (#ambient-layer z 0) */
}

/* ---- Tomma tillstånd ---- */
.empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: var(--text-muted);
}

.empty-state h1 {
  color: var(--text);
  font-size: 22px;
  margin: 0;
}

/* ---- Knappar ---- */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--bg-hover); }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1a1a; /* mörk text för läsbarhet på den ljusa varumärkesorangen */
}
.btn--accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.row { display: flex; gap: 10px; margin: 14px 0; }

.btn--danger { border-color: var(--status-overdue); color: var(--danger-text); }
.btn--danger:hover {
  background: var(--status-overdue);
  border-color: var(--status-overdue);
  color: #fff;
}

/* ---- Sidofält: navigering ---- */
.sidebar-section { display: flex; flex-direction: column; gap: 6px; }
.sidebar-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--brand-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 8px;
}

.icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.icon-btn:hover { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }
.icon-btn svg { width: 14px; height: 14px; display: block; }

.customer-nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item--active { background: var(--accent-soft); color: var(--text); }
.nav-item--active .nav-item__count { color: var(--accent); }
.nav-item--home { margin-bottom: 4px; }

/* Verktygsrad: Historik / Import / Inställningar som små ikonknappar */
.sidebar-tools { display: flex; gap: 6px; margin-bottom: 4px; }
.sidebar-tool {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition);
}
.sidebar-tool svg { width: 19px; height: 19px; display: block; }
.sidebar-tool:hover { background: var(--bg-3); }
.sidebar-tool.nav-item--active { background: var(--accent-soft); border-color: transparent; }

.nav-item__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item__icon { display: flex; flex: none; color: var(--accent); }
.nav-item__icon svg { width: 16px; height: 16px; display: block; }
.nav-item__count {
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-2);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.nav-item .tree-menu-btn { flex: none; }
.nav-item:hover .tree-menu-btn { opacity: 1; }

.sidebar-empty { color: var(--text-faint); font-size: 12px; padding: 4px 8px; }

/* Tom-läge som en inbjudande, klickbar CTA istället för lös gråtext. */
.sidebar-empty--cta {
  appearance: none;
  width: 100%;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 20px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.sidebar-empty--cta:hover {
  border-color: var(--accent);
  background: var(--bg-2);
  color: var(--text);
}
.sidebar-empty--cta svg { width: 26px; height: 26px; color: var(--accent); }
.sidebar-empty__title { font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; }
.sidebar-empty__hint { font-size: 11px; line-height: 1.4; color: var(--text-faint); }

.section-select { padding: 6px 8px; font-size: 12px; }

/* ---- Sidofälts-träd (nästlade sektioner + kunder) ---- */
/* flex:1 = trädet tar överbliven höjd och krymper vid behov. min-height:0 är
   inte kosmetika: utan den vägrar en flex-item krympa under sitt innehåll och
   .tree får aldrig någon rullning. */
.sidebar-tree { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  color: var(--brand-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.tree-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  margin-bottom: 4px;
}
.tree-search:focus { border-color: var(--accent); }
.tree-search::placeholder { color: var(--text-faint); }
.tree-search-wrap { position: relative; margin-bottom: 4px; }
.tree-search-wrap .tree-search { margin-bottom: 0; padding-left: 30px; }
.tree-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
  display: flex;
}
.tree-search-icon svg { width: 14px; height: 14px; display: block; }

.btn--icon { display: inline-flex; align-items: center; gap: 6px; }
.btn--icon svg { width: 15px; height: 15px; flex: none; }

/* ---- Sidofältets fot: kompakt konto-/profilknapp + popover (Profil, Tema) ---- */
.sidebar-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  position: relative;
}
.account-btn {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.account-btn:hover { border-color: var(--accent); }
.account-btn__avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1a1a;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.account-btn__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.account-btn__chev { flex: none; color: var(--text-faint); display: flex; transition: transform var(--transition); }
.account-btn__chev svg { width: 15px; height: 15px; display: block; }
.account-btn[aria-expanded="true"] .account-btn__chev { transform: rotate(180deg); }

.account-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 50;
  animation: pk-in 120ms ease;
}
.account-panel[hidden] { display: none; }
.account-panel .theme-select { flex: none; width: 100%; }
.account-panel .sidebar-foot__label { margin: 4px 0 1px; }
.account-panel .sidebar-foot__label:first-child { margin-top: 0; }
.sidebar-foot__label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.theme-select {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.theme-select:focus { border-color: var(--accent); }

/* Rullningen sitter här, inte på .sidebar-tree – då står MATRISER-rubriken och
   sökrutan still medan bara raderna rullar. */
.tree { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow-y: auto; }
.tree-folder { display: flex; flex-direction: column; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-2);
  color: var(--text);
  transition: background var(--transition);
}
.tree-row:hover { background: var(--bg-3); }
.tree-caret { width: 10px; flex: none; font-size: 11px; color: var(--accent); }
.tree-folder__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text);
}
.tree-menu-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.tree-row:hover .tree-menu-btn { opacity: 1; }
.tree-menu-btn:hover { color: var(--text); background: var(--bg-3); }
.tree-children { display: flex; flex-direction: column; gap: 1px; }
.tree-empty { color: var(--text-faint); font-size: 11px; padding: 4px 8px; margin: 0; }

/* Prioritetsprickar (sektioner + matriser) */
.prio-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* Sektionsprick: lite större + svag ring så sektionsrubriken syns tydligt. */
.prio-dot--section { width: 10px; height: 10px; box-shadow: 0 0 0 3px var(--accent-soft); margin: 0 1px; }
.prio--high { background: var(--signal-orange); } /* hög prio = orange (frikopplat från alarm-rött) */
.prio--medium { background: var(--signal-yellow); }
.prio--low { background: var(--signal-green); }

/* ---- Popup-meny (kontextmeny) ---- */
.ctx-menu {
  position: fixed;
  z-index: 1100;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 4px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
}
.ctx-menu__item {
  appearance: none;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 4px;
  transition: background var(--transition);
}
.ctx-menu__item:hover { background: var(--bg-3); }
.ctx-menu__item--active { color: var(--accent); font-weight: 600; }
.ctx-menu__item--danger { color: #e08b80; }
.ctx-menu__item--danger:hover { background: var(--status-overdue); color: #fff; }
.ctx-menu__sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ---- Historik ---- */
.history { max-width: 820px; }
.history-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin: 14px 0 16px;
}
.history-search:focus { border-color: var(--accent); }
.history-search::placeholder { color: var(--text-faint); }

.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-row {
  appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: background var(--transition), border-color var(--transition);
}
.history-row:hover { background: var(--bg-3); border-color: var(--border-strong); }
.history-row--archived { cursor: default; opacity: 0.85; }
.history-row--archived:hover { background: var(--bg-2); border-color: var(--border); }
.history-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 7px;
}
.history-check { margin-top: 0; pointer-events: none; }
.history-row__info { flex: 1; min-width: 0; }
.history-row__title { font-size: 14px; }
.history-row__path {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-row__date { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.history-empty { color: var(--text-faint); font-size: 13px; }

/* ---- Översiktslogga ---- */
.home-header { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 26px; }
.home-brand { display: flex; flex-direction: column; gap: 8px; }
.home-logo { display: block; color: var(--accent); }
.home-logo .brand-logo { height: 50px; width: auto; display: block; }
.home-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand-2);
  padding-left: 3px;
}
.home-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.home-action {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.home-action:hover { background: var(--bg-3); color: var(--text); }
.home-action--accent { color: var(--accent); border-color: var(--accent); }
.home-action--accent:hover { background: var(--accent); color: #1a1a1a; }
.home-action--on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.home-action--note { display: inline-flex; align-items: center; gap: 7px; color: var(--text); padding-left: 8px; }
.home-action--note:hover { border-color: var(--accent); }
.home-action__icon { width: 20px; height: 20px; border-radius: 5px; display: block; }

/* Fokuskort – lugn ingång högst upp på Översikt */
.home-focus {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.home-focus__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.home-focus__task {
  appearance: none;
  border: none;
  background: none;
  text-align: left;
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.home-focus__task:hover { color: var(--accent); }
.home-focus__task--empty { font-size: 15px; font-weight: 500; color: var(--text-muted); cursor: default; }
.home-focus__sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.home-focus__status { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.home-focus__stat strong { font-weight: 700; }
.home-focus__stat--red strong { color: var(--signal-red); }
.home-focus__stat--orange strong { color: var(--signal-orange); }
.home-focus__stat--yellow strong { color: var(--signal-yellow); }
.home-focus__stat--green strong { color: var(--signal-green); }

/* Topprad i fokuskortet: dagsrubrik till vänster, ingången till
   veckoplaneringen till höger. Knappen är diskret – den ska finnas när man
   söker den, inte ropa varje gång man öppnar Översikt. */
.home-focus__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.home-focus__topp .home-focus__eyebrow { margin-bottom: 0; }
/* Planera veckan är veckans enda riktiga uppmaning på Översikt — den ska synas.
   Fylld accent (orange) med fet text i stället för en tunn kontur. */
.home-focus__plan {
  appearance: none;
  margin-left: auto;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #1a1a1a;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition), transform var(--transition);
}
.home-focus__plan:hover { filter: brightness(1.08); }
.home-focus__plan:active { transform: translateY(1px); }

/* Dagens att göra: raderna man själv lagt på idag, ovanför Härnäst.
   Raderna är home-row (samma som Översiktens listor) så de ärver klarbock,
   prio-färg och deadline-chip utan en andra implementation. En tunn linje
   under skiljer planen från appens eget förslag. */
.home-focus__dag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -8px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}
.home-focus__dag .home-row { background: none; border: none; }
.home-focus__dag .home-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* "kvar sedan tis" – dämpad, inte alarmerande. Att något ligger kvar är
   information, inte en anklagelse. */
.home-focus__kvar {
  color: var(--text-muted);
  border-color: var(--border);
  font-style: italic;
  white-space: nowrap;
}

/* Edit-läge: kontroller per element */
.widget-tools { display: inline-flex; gap: 4px; margin-left: 8px; }
.widget-tool {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.widget-tool:hover { background: var(--bg-3); color: var(--text); }
.widget-tool--danger:hover { background: var(--status-overdue); color: #fff; border-color: var(--status-overdue); }
.home-widget--dim { opacity: 0.55; }
.home-widgets--edit .home-widget { outline: 1px dashed var(--border-strong); outline-offset: 2px; }

/* Stort tal (egna "Antal"-element) */
.metric { font-size: 38px; font-weight: 700; line-height: 1; color: var(--accent); }
/* Enfärgad accent-stapel (egna fördelnings-element) */
.seg--accent { background: var(--accent); }

/* Element-byggaren (modal) */
.wb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.wb-field { display: flex; flex-direction: column; gap: 5px; }
.wb-field .detail__select, .wb-field .modal__input { width: 100%; }
@media (max-width: 520px) { .wb-grid { grid-template-columns: 1fr; } }

/* ---- Inställningar ---- */
.settings { max-width: 880px; }
.settings__section {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.settings__section:first-of-type { margin-top: 16px; border-top: none; padding-top: 0; }

/* Sektionsnavigering (en sektion i taget) */
.settings-layout { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: start; margin-top: 8px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; }
.settings-navitem {
  appearance: none;
  border: none;
  background: none;
  text-align: left;
  color: var(--text-muted);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.settings-navitem:hover { background: var(--bg-2); color: var(--text); }
.settings-navitem--active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-nav__group {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-faint); padding: 13px 12px 4px; user-select: none;
}
.settings-nav__group:first-child { padding-top: 2px; }
.settings-panels { min-width: 0; }
/* I panel-läget är varje sektion fristående – ingen topp-kant/marginal. */
.settings-panels .settings__section { margin-top: 0; border-top: none; padding-top: 0; }
@media (max-width: 640px) {
  .settings-layout { grid-template-columns: 1fr; gap: 14px; }
  .settings-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .settings-nav__group { width: 100%; padding: 8px 2px 2px; }
}
.settings__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.settings__path { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.7; }
.settings__path code {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}

/* Egna teman – lista i Inställningar */
.theme-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.theme-list__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.theme-list__item--hidden { opacity: 0.55; }
.theme-list__name { font-size: 13px; font-weight: 600; }
.theme-list__cat {
  width: 120px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.theme-list__cat:focus { border-color: var(--accent); }
.theme-list__base {
  font-size: 11px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 8px;
}
.theme-list__item .btn { padding: 5px 10px; font-size: 12px; }
/* Första knappen ("Använd") putar knapp-gruppen till höger. */
.theme-list__item button:first-of-type { margin-left: auto; }

/* Varumärke: förhandsvisning av aktuellt ordmärke/logga */
.brand-preview {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  overflow: hidden;
}
.brand-preview .brand-logo { height: 32px; width: auto; display: block; }
.brand-logo--img { object-fit: contain; max-width: 100%; }
.brand-dim { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 320px; }
.brand-dim input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }

/* =========================================================
   Översikt (startsida) – ADHD-vänlig, färgkodad
   ========================================================= */
.home { max-width: 1180px; }
.home .page__title { margin-bottom: 18px; }

/* Signalkort */
.signal-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.signal-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  transition: background var(--transition);
}
.signal-card:hover { background: var(--bg-2); }
.signal-card__value { font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); }
.signal-card__label { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.signal-card--red .signal-card__value { color: var(--signal-red); }
.signal-card--orange .signal-card__value { color: var(--signal-orange); }
.signal-card--yellow .signal-card__value { color: var(--signal-yellow); }
.signal-card--green .signal-card__value { color: var(--signal-green); }

/* Prioritetslistor */
.home-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.home-list {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: var(--radius);
  padding: 14px;
}
.home-list--red { border-top-color: var(--signal-red); }
.home-list--yellow { border-top-color: var(--signal-yellow); }
.home-list--orange { border-top-color: var(--signal-orange); }
.home-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.home-list__title { font-size: 14px; font-weight: 600; }
.home-list__count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-3);
  border-radius: 10px;
  padding: 1px 8px;
}
.home-list__empty { color: var(--text-faint); font-size: 13px; margin: 6px 0; }
.home-list__body { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }

.home-row {
  appearance: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  transition: background var(--transition), border-color var(--transition);
}
.home-row:hover { background: var(--bg-3); border-color: var(--border-strong); }
.home-row.prio--high { border-left: 3px solid var(--signal-orange); }
.home-row.prio--low { border-left: 3px solid var(--signal-green); }
.home-row__info { flex: 1; min-width: 0; }
.home-row__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-row__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Diagram */
.home-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}
.chart-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.chart-card__title { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.chart-card__hint { font-size: 11px; color: var(--text-faint); margin: 10px 0 0; }

/* Segmentfärger */
.seg--orange { background: var(--signal-orange); }
.seg--yellow { background: var(--signal-yellow); }
.seg--green { background: var(--signal-green); }
.seg--red { background: var(--signal-red); }

/* Stapel (status totalt) */
.stack-bar {
  display: flex;
  height: 22px;
  width: 100%;
  background: var(--bg-3);
  border-radius: 6px;
  overflow: hidden;
}
.stack-bar__seg { height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Per kund */
.cust-bars { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.cust-bar {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.cust-bar__name {
  width: 110px;
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.cust-bar:hover .cust-bar__name { color: var(--text); }
.cust-bar--static { cursor: default; }
.cust-bar__track { flex: 1; height: 16px; background: var(--bg-3); border-radius: 5px; overflow: hidden; }
.cust-bar__fill { display: flex; height: 100%; min-width: 2px; }
.cust-bar__fill > div { height: 100%; }
.cust-bar__num { width: 26px; flex: none; text-align: right; font-size: 12px; color: var(--text-muted); }

/* Avklarat per vecka */
.week-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; }
.week-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.week-col__bar {
  width: 100%;
  max-width: 34px;
  margin-top: auto;
  min-height: 2px;
  background: var(--signal-green);
  border-radius: 4px 4px 0 0;
  position: relative;
}
.week-col__num { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--text-muted); }
.week-col__label { font-size: 10px; color: var(--text-faint); margin-top: 6px; }

/* ---- Flyttbara dashboard-widgets ---- */
.home-filter {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  margin-bottom: 18px;
}
.home-filter:focus { border-color: var(--accent); }
.home-filter::placeholder { color: var(--text-faint); }

.home-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.home-widget {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: opacity var(--transition);
}
.home-widget--wide { grid-column: 1 / -1; }
/* Färgade toppramar borttagna – korten hålls jämna och lugna. Tomma listkort tonas ner. */
.home-widget--empty { opacity: 0.58; }
.home-widget--dragging { opacity: 0.45; }
.home-widget--over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.home-widget .signal-cards { margin-bottom: 0; }

.widget-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.widget-grip { cursor: grab; color: var(--text-faint); display: inline-flex; }
.widget-grip svg { width: 16px; height: 16px; display: block; }
.widget-grip:active { cursor: grabbing; }
.widget-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
.widget-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-3);
  border-radius: 10px;
  padding: 1px 8px;
}

/* ---- Matris-filter ---- */
.matrix-toolbar { margin-bottom: 12px; flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.matrix-aibtn { display: inline-flex; align-items: center; gap: 6px; }
.matrix-aibtn svg { width: 15px; height: 15px; display: block; }
.matrix-filter {
  width: 100%;
  max-width: 360px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.matrix-filter:focus { border-color: var(--accent); }
.matrix-filter::placeholder { color: var(--text-faint); }

/* ---- Sidhuvud i huvudytan ---- */
.page { max-width: 1100px; }
.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page__title { font-size: 22px; margin: 0; }
.page__actions { display: flex; gap: 8px; }

.matrix-placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
  color: var(--text-faint);
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  z-index: 900;
}
.modal {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 420px;
  max-width: calc(100vw - 48px);
  padding: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.modal__title { font-size: 16px; margin: 0 0 12px; }
.modal__body { margin-bottom: 18px; color: var(--text); }
.modal__label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.modal__input {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 14px;
  outline: none;
}
.modal__input:focus { border-color: var(--accent); }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Veckoplanering (modal) ----
   Bredare än en vanlig dialog: sju dagchips på en rad plus en uppgiftslista.
   Höjden hålls innanför fönstret och listan rullar för sig, så toppraden med
   veckan och dagarna alltid är kvar. Rullningslisten ärvs från den globala
   ::-webkit-scrollbar-stylingen – sätt inte scrollbar-width här (Chromium
   121+ slår då av den). */
.modal--vecka { width: 720px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.modal--vecka .modal__body { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.veckoplan__topp { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.veckoplan__vecka { font-size: 14px; font-weight: 600; min-width: 170px; }
.veckoplan__nav,
.veckoplan__nu {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.veckoplan__nav { width: 28px; height: 28px; font-size: 16px; line-height: 1; }
.veckoplan__nu { margin-left: auto; padding: 5px 12px; font-size: 12px; }
/* Föreslå: samma form som "Denna vecka", men accentkontur — det är en åtgärd,
   inte en navigering. Fylld orange hör till Översikt; två fyllda knappar i
   samma rad hade tävlat. */
.veckoplan__ai {
  appearance: none;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.veckoplan__ai:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.veckoplan__ai:disabled { opacity: .6; cursor: default; }

/* Ledig dag: nedtonad, men fullt klickbar. Den föreslås aldrig — den är inte
   förbjuden. Skillnaden är hela poängen med inställningen. */
.veckoplan__dag--ledig { opacity: .45; }
.veckoplan__dag--ledig:hover { opacity: .75; }

/* Veckodagsvalen i Inställningar. */
.veckodagar { flex-wrap: wrap; gap: 10px 14px; }
.veckodagar__dag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.veckodagar__dag:hover { color: var(--text); }

/* Granskningslistan för AI-förslaget. */
.forslag { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.forslag__rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.forslag__rad:hover { background: var(--bg-1); }
.forslag__titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.forslag__dag { flex: none; font-size: 12px; color: var(--accent); font-weight: 600; }
.veckoplan__nav:hover,
.veckoplan__nu:hover { color: var(--accent); border-color: var(--accent); }

.veckoplan__dagar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }
.veckoplan__dag {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.veckoplan__dag:hover { border-color: var(--accent); }
.veckoplan__dag-namn { font-size: 11px; white-space: nowrap; }
.veckoplan__dag-antal { font-size: 15px; font-weight: 700; color: var(--text); }
/* Bokad kalendertid – en upplysning under siffran, aldrig en varning.
   Fylls i asynkront och saknas helt utan kalenderfeed. */
.veckoplan__dag-bokat { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.veckoplan__dag--idag { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.veckoplan__dag--idag .veckoplan__dag-namn { color: var(--accent); font-weight: 700; }
.veckoplan__dag--vald { background: color-mix(in srgb, var(--accent) 16%, var(--bg-1)); border-color: var(--accent); }
/* Dagen har nått det tak man satt själv. Ingen signalfärg, ingen ram som
   skriker – bara en mättad, lugn yta och en dämpad siffra. Taket är en
   påminnelse man gett sig själv, inte ett fel appen upptäckt. */
.veckoplan__dag--full { background: var(--bg-0); }
.veckoplan__dag--full .veckoplan__dag-antal { color: var(--text-muted); font-weight: 600; }
.veckoplan__dag-tak { font-size: 10px; color: var(--text-faint); }

/* Kvarvarande från tidigare veckor. Upplysning, inte tillrättavisning –
   därför neutral yta och inga varningsfärger. */
.veckoplan__kvarklump {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  font-size: 13px;
  color: var(--text-muted);
}
.veckoplan__klumpknapp {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.veckoplan__klumpknapp:first-of-type { margin-left: auto; }
.veckoplan__klumpknapp:hover { color: var(--accent); border-color: var(--accent); }

.veckoplan__sok {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.veckoplan__sok:focus { border-color: var(--accent); }
.veckoplan__framtid { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin: 8px 0 4px; cursor: pointer; }

.veckoplan__lista { overflow-y: auto; min-height: 0; flex: 1; margin: 0 -6px; padding: 0 6px; }
.veckoplan__lista .home-row { background: none; }
.veckoplan__tom { color: var(--text-muted); font-size: 13px; padding: 18px 2px; }

/* Dagväljaren på varje rad. Utan dag = tyst; med dag = accent.
   Krock med deadline markeras med en STRECKAD ram och dämpad text – inte en
   signalfärg. Planering ska kännas lugn; en orange etikett mitt i en lista man
   just håller på att fylla läser som en tillrättavisning. Strecket säger
   "titta här" utan att höja rösten, och förklaringen ligger i title. */
.veckoplan__dagval { cursor: pointer; white-space: nowrap; font-family: inherit; }
.veckoplan__dagval--satt { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.veckoplan__dagval--krock {
  color: var(--text-muted);
  border-style: dashed;
  border-color: var(--border-strong);
}
/* Ingress + punktlista i en dialog (uppdateringsrutan, "Vad som är nytt"). */
.modal__lead { margin: 0 0 10px; }
.modal__list { margin: 6px 0 12px; padding-left: 18px; color: var(--text-muted); font-size: 13px; }
.modal__list li { margin-bottom: 4px; }

/* ---- Kundvy: matris fyller, Avklarat-list under ---- */
.customer-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px); /* fönsterhöjd minus .main-padding */
}
.matrix-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
}

/* ---- Eisenhower-matris ---- */
.matrix {
  display: grid;
  grid-template-columns: 22px 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.matrix__axis {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.matrix__axis--left { writing-mode: vertical-rl; transform: rotate(180deg); }

.quadrant {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Subtil, dov topkant per kvadrant. */
.quadrant--do { border-top: 2px solid var(--status-overdue); }
.quadrant--schedule { border-top: 2px solid var(--status-progress); }
.quadrant--delegate { border-top: 2px solid var(--status-todo); }
.quadrant--drop { border-top: 2px solid var(--bg-hover); }

.quadrant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.quadrant__titlewrap { display: flex; align-items: center; gap: 8px; }
.quadrant__title { font-size: 13px; font-weight: 600; cursor: text; }
.quadrant__title:hover { text-decoration: underline dotted var(--text-faint); text-underline-offset: 3px; }
/* "Ny uppgift"-knapp per kvadrant: ren accent-ikon (inte den gamla gråa rutan). */
.quadrant__add {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--accent);
  width: 24px;
  height: 24px;
  border-radius: 7px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.75;
  transition: background var(--transition), opacity var(--transition);
}
.quadrant__add svg { width: 16px; height: 16px; display: block; }
.quadrant__add:hover { background: var(--accent-soft); opacity: 1; }
.quadrant__count {
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-3);
  border-radius: 10px;
  padding: 1px 7px;
}

.quadrant__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background var(--transition);
}
.quadrant__body--over { background: var(--accent-soft); }
.quadrant__empty {
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
  padding: 16px 0;
}

/* ---- Parkering ----
   Ligger utanför rutnätet (matrisen har explicita grid-positioner). Alltid
   synlig, även tom, eftersom den annars inte går att släppa något på.
   Låg och neutral: den ska inte konkurrera med matrisen om uppmärksamheten. */
.parkering {
  margin-bottom: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-1);
}
.parkering__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
}
.parkering__title { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.parkering__hint { font-size: 12px; color: var(--text-faint); flex: 1; }
.parkering__header .quadrant__count { margin-right: auto; }
.parkering__body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px 8px;
  min-height: 8px;
}
.parkering__body:empty { padding-bottom: 4px; }
.parkering__body > .task-card { flex: 1 1 220px; max-width: 340px; }

/* ---- Gallringsrad (fjärde kvadranten) ----
   Appen tjatar, användaren bestämmer. Neutral ton – det här är inte ett fel. */
.gallring {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--bg-2);
}
.gallring__text { flex: 1; font-size: 12px; color: var(--text-muted); }
.gallring__btn {
  flex: none;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.gallring__btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Uppgiftskort ---- */
.task-card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.task-card:hover { background: var(--bg-3); border-color: var(--border-strong); }
.task-card--dragging { opacity: 0.5; }

/* Prioritets-strip (hög = röd, låg = grön; mellan = neutral) */
.task-card.prio--high { border-left: 3px solid var(--signal-orange); }
.task-card.prio--low { border-left: 3px solid var(--signal-green); }

.task-card__body { flex: 1; min-width: 0; padding-right: 10px; }

/* Snabbåtgärder – syns vid hover */
.task-card__actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.task-card:hover .task-card__actions { opacity: 1; }
.task-card__act {
  appearance: none;
  border: none;
  background: var(--bg-3);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background var(--transition), color var(--transition);
}
.task-card__act:hover { background: var(--accent); color: #1a1a1a; }
.task-card__act--danger:hover { background: var(--status-overdue); color: #fff; }
.task-card__act svg { width: 15px; height: 15px; display: block; }
.task-card__title { font-size: 13px; line-height: 1.35; word-break: break-word; }
.task-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  flex: none;
}
.status-dot--todo { background: var(--status-todo); }
.status-dot--progress { background: var(--status-progress); }
.status-dot--done { background: var(--status-done); }

/* ---- Klarmarkering (bock-cirkel) ---- */
.task-check {
  appearance: none;
  flex: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--status-todo);
  background: transparent;
  color: var(--signal-green);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
/* Bock ritad med CSS (ingen glyf): roterad ruta med höger+nedre kant. */
.task-check::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
  opacity: 0;
  transition: opacity var(--transition);
}
.task-check:hover { border-color: var(--signal-green); transform: scale(1.1); }
.task-check:hover::after { opacity: 0.55; }
.task-check--progress { border-color: var(--signal-yellow); }
.task-check--done {
  background: var(--signal-green);
  border-color: var(--signal-green);
  color: #fff;
}
.task-check--done::after { opacity: 1; }
.task-check--done:hover { background: var(--signal-green); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--text-muted);
}
.chip svg { width: 12px; height: 12px; flex: none; }
/* Klickbar deadline-chip (öppnar datumväljaren direkt på kortet). */
.chip--btn { appearance: none; border: none; cursor: pointer; transition: filter var(--transition); }
.chip--btn:hover { filter: brightness(1.18); }
/* Ägar-chip: åtgärd som faller på någon annan (delegerad). */
.chip--owner { background: var(--accent-soft); color: var(--accent); }

/* Dold datumväljare per kort – öppnas via kalenderknapp/chip (showPicker). */
.task-card__dateinput {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.deadline--normal { color: var(--text-muted); }
.deadline--soon { color: #d8b86a; background: rgba(184, 146, 58, 0.16); }
.deadline--overdue { color: #e08b80; background: rgba(181, 84, 74, 0.18); }

/* ---- Uppgiftsdetalj ---- */
.detail { max-width: 720px; }

.back-link {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.back-link svg { width: 15px; height: 15px; }
.back-link:hover { color: var(--accent); }

.detail__title {
  font-size: 22px;
  margin: 0 0 18px -4px;
  padding: 2px 4px;
  cursor: text;
  border-radius: 4px;
}
.detail__title:hover { background: var(--bg-2); }
.detail__title-input {
  font-size: 22px;
  font-weight: 700;
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: 0 0 18px -4px;
  font-family: inherit;
  outline: none;
}

.detail__row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
}

.detail__select,
.detail__date,
.detail__owner {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.detail__select:focus,
.detail__date:focus,
.detail__owner:focus { border-color: var(--accent); }
.detail__owner::placeholder { color: var(--text-faint); }

/* Taggar – editor i detaljvyn */
.detail__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  min-height: 38px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px;
  padding: 3px 4px 3px 8px;
  font-size: 12px;
}
.tag-chip svg { width: 11px; height: 11px; }
.tag-chip__x {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  opacity: 0.6;
}
.tag-chip__x:hover { opacity: 1; }
.detail__taginput {
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 110px;
  flex: 1;
  padding: 3px 2px;
}
.detail__taginput::placeholder { color: var(--text-faint); }
/* Tagg-chip på kort (subtilare än ägar-chip) */
.chip--tag { background: var(--bg-2); color: var(--text-muted); border: 1px solid var(--border); }
/* Ålder i fjärde kvadranten – syns först när gränsen passerats, dämpad ton:
   det är en upplysning, inte en varning. */
.chip--gammal { background: transparent; color: var(--text-faint); border: 1px dashed var(--border-strong); }
/* Mörk kalenderikon i datumfältet */
.detail__date::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.date-field { display: flex; align-items: center; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.detail__hint { font-size: 11px; color: var(--text-faint); margin: 10px 0 0; }

/* ---- Kalendervy (agenda från .ics-feed) ---- */
.calendar { max-width: 1080px; }
.calendar__status { color: var(--text-muted); font-size: 13px; }
.calendar__status--error { color: var(--danger-text); }
.calendar__empty { text-align: center; color: var(--text-muted); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.calendar__empty p { max-width: 460px; margin: 0; }

/* Header + verktygsrad (vy-väljare, navigering) */
.calendar__titlewrap { display: flex; flex-direction: column; gap: 2px; }
.calendar__range { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.calendar__headactions { display: flex; gap: 8px; align-items: center; }
.calendar__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.calendar__nav { display: flex; align-items: center; gap: 6px; }
.calendar__navbtn { min-width: 30px; font-size: 15px; line-height: 1; padding: 5px 9px; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg__btn {
  appearance: none; border: none; background: transparent; color: var(--text-muted);
  padding: 5px 14px; font-size: 12.5px; font-family: inherit; border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.seg__btn:hover { color: var(--text); }
.seg__btn--on { background: var(--accent); color: #1a1a1a; }

/* Veckovy: 7 dagkolumner */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: start; }
.week__col { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; min-height: 120px; }
.week__col--today { border-color: var(--accent); }
.week__head { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 9px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.week__wd { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); }
.week__dn { font-size: 14px; font-weight: 700; color: var(--text); }
.week__col--today .week__dn { color: var(--accent); }
.week__events { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.week__empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 6px 0; }

/* Månadsvy: 6-veckors rutnät */
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.month__wd { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); text-align: center; padding-bottom: 2px; }
.month__cell { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 92px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.month__cell--out { opacity: 0.45; }
.month__cell--today { border-color: var(--accent); }
.month__dn { font-size: 12px; font-weight: 600; color: var(--text-muted); align-self: flex-end; }
.month__cell--today .month__dn { color: var(--accent); }
.month__more { font-size: 11px; color: var(--text-faint); padding-left: 2px; }

/* Händelsechips (vecka + månad) */
.cal-chip {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--bg-2); border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 5px 7px; cursor: default; overflow: hidden;
}
.cal-chip__time { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-chip__title { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip--month {
  flex-direction: row; gap: 0; padding: 2px 6px; font-size: 11px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.cal-help ol { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cal-help ol li { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.cal-help ol li strong { color: var(--text); font-weight: 600; }
@media (max-width: 720px) { .week { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.agenda { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.agenda__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 8px;
}
.agenda__events { display: flex; flex-direction: column; gap: 6px; }
.agenda__event {
  display: flex;
  gap: 14px;
  align-items: baseline;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.agenda__time { flex: none; width: 96px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.agenda__info { min-width: 0; }
.agenda__title { font-size: 14px; color: var(--text); }
.agenda__loc { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.calendar__empty-lead { font-size: 14px; color: var(--text); max-width: 560px; }

/* Steg-för-steg: hämta .ics-länk (i Inställningar + tom kalendervy) */
.cal-help {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
  width: 100%;
  max-width: 580px;
  text-align: left;
}
.cal-help__title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.cal-help__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cal-help__h { font-size: 11px; font-weight: 700; color: var(--brand-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.cal-help__col ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.cal-help__col li { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.cal-help__col li strong { color: var(--text); font-weight: 600; }
.cal-help code { background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 11px; }
.cal-help__note { font-size: 12px; color: var(--text-faint); margin-top: 12px; }
@media (max-width: 560px) { .cal-help__cols { grid-template-columns: 1fr; } }

.detail__desc {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
}
.detail__desc:focus { border-color: var(--accent); }

.detail__section { margin-top: 26px; }
.detail__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.detail__section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.att-list { display: flex; flex-direction: column; gap: 6px; }
.att-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.att-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.att-row__size { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.att-row__actions { display: flex; gap: 2px; }
.att-empty { color: var(--text-faint); font-size: 12px; margin: 0; }

.link-btn {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 7px;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}
.link-btn:hover { color: var(--text); background: var(--bg-3); }
.link-btn--danger:hover { color: #e08b80; }

.detail__footer {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* ---- Avklarat-list (under matrisen) ---- */
.done-strip {
  flex: none;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.done-strip__toggle {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 0;
}
.done-strip__toggle:hover { color: var(--text); }
.done-strip__caret { color: var(--text-faint); width: 10px; }
.done-strip__count {
  background: var(--bg-3);
  color: var(--text-faint);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
}
.done-strip__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.done-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.done-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
  cursor: pointer;
}
.done-row__title:hover { color: var(--text); }
.done-row__quadrant { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* ---- Importdialog ---- */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.modal--wide { width: 600px; }
.modal__hint { color: var(--text-muted); font-size: 12px; margin: -4px 0 14px; }

/* Snabbanteckning (AI/Ollama) */
.import__notes {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
}
.import__notes:focus { border-color: var(--accent); }
.import__airow { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.import__recgroup { display: flex; gap: 8px; }
.import__aibtn { margin-left: auto; }
.import__aistatus { font-size: 12px; color: var(--text-muted); flex-basis: 100%; min-height: 15px; }
/* Live-nivåmätare under inspelning (visar att ljud fångas). */
.rec-meter { height: 6px; background: var(--bg-2); border-radius: 999px; margin: 4px 0 8px; opacity: 0; transition: opacity 160ms ease; }
.rec-meter--on { opacity: 1; }
.rec-meter__fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 90ms linear; }

/* Fota anteckning: bild-ruta */
.photo-drop { border: 1.5px dashed var(--border); border-radius: 12px; min-height: 150px; display: grid; place-items: center; cursor: pointer; padding: 16px; text-align: center; margin-bottom: 12px; transition: border-color var(--transition), background var(--transition); }
.photo-drop:hover, .photo-drop.is-over { border-color: var(--accent); background: var(--bg-2); }
.photo-drop.has-img { border-style: solid; padding: 8px; cursor: default; }
.photo-drop__hint { color: var(--text-muted); font-size: 13px; }
.photo-drop.has-img .photo-drop__hint { display: none; }
.photo-preview { max-width: 100%; max-height: 280px; border-radius: 8px; display: block; }

/* AI-laddningsindikator: obestämd (rörlig stripe) – LLM:en kan inte ge exakt ETA. */
.ai-progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin: 2px 0 8px;
}
.ai-progress__bar {
  height: 100%;
  width: 40%;
  background: var(--accent);
  border-radius: 3px;
  animation: ai-indeterminate 1.1s ease-in-out infinite;
}
@keyframes ai-indeterminate {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
.import__divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 14px 0 10px;
}
.import__divider::before,
.import__divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
  margin: 0 10px;
}

.progress {
  width: 100%;
  max-width: 360px;
  height: 8px;
  background: var(--bg-3);
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 200ms ease;
}

.settings__input {
  width: 100%;
  max-width: 360px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.settings__input:focus { border-color: var(--accent); }

.import__tools { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.import__textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  line-height: 1.5;
  outline: none;
}
.import__textarea:focus { border-color: var(--accent); }
.import__previewbtn { margin-top: 10px; }

.import__preview { margin-top: 14px; }
.import__error { color: #e08b80; font-size: 13px; margin: 0; }
.import__target { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.import__previewhint { font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; }
.import__list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.import__row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.import__row input[type="checkbox"] { accent-color: var(--accent); flex: none; }
.import__rowinfo { flex: 1; min-width: 0; }
.import__rowtitle { font-size: 13px; }
.import__rowmeta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.import__rowtarget { flex: none; max-width: 170px; font-size: 12px; padding: 5px 8px; }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 1000;
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--error { border-color: var(--status-overdue); }
.toast--success { border-color: var(--status-done); }

/* ---- Egna datum-/tidväljare (VA.picker) ---- */
.pk-field {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  text-align: left;
}
.pk-field:hover { border-color: var(--accent); }
.pk-field__icon { display: flex; color: var(--accent); }
.pk-field__icon svg { width: 15px; height: 15px; display: block; }
.pk-field__label { flex: 1; }
.pk-field--empty .pk-field__label { color: var(--text-faint); }

.picker-overlay { position: fixed; inset: 0; z-index: 60; }
.picker-pop {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  padding: 10px;
  animation: pk-in 120ms ease;
}
@keyframes pk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.pk-navbtn {
  appearance: none; border: none; background: transparent; color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 6px; font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.pk-navbtn:hover { background: var(--bg-3); color: var(--text); }

/* Kalender-popover */
.pk-cal { width: 264px; }
.pk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pk-cal__title { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.pk-cal__wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.pk-cal__wd span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); text-align: center; }
.pk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pk-cal__day {
  appearance: none; border: 1px solid transparent; background: transparent; color: var(--text);
  height: 32px; border-radius: 7px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.pk-cal__day:hover { background: var(--bg-3); }
.pk-cal__day--out { color: var(--text-faint); opacity: 0.6; }
.pk-cal__day--today { border-color: var(--border); }
.pk-cal__day--sel { background: var(--accent); color: #1a1a1a; font-weight: 600; }
.pk-cal__day--sel:hover { background: var(--accent); }
.pk-cal__foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.pk-cal__act {
  flex: 1; appearance: none; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-muted);
  padding: 6px 0; border-radius: var(--radius-sm); font-size: 12px; font-family: inherit; cursor: pointer;
}
.pk-cal__act:hover { border-color: var(--accent); color: var(--text); }

/* Tid: scroll-hjul */
.pk-time__cols { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }
.pk-time__band {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 36px; transform: translateY(-50%);
  background: var(--accent-soft); border-radius: 8px; pointer-events: none;
}
.pk-time__sep { font-size: 18px; font-weight: 600; color: var(--text-muted); padding-bottom: 2px; }
.pk-wheel {
  position: relative; z-index: 1; height: 144px; overflow-y: auto; scroll-snap-type: y mandatory;
  width: 60px; scrollbar-width: none;
}
.pk-wheel::-webkit-scrollbar { display: none; }
.pk-wheel__inner { padding: 54px 0; } /* (144-36)/2 så första/sista kan centreras */
.pk-wheel__item {
  height: 36px; display: grid; place-items: center; scroll-snap-align: center;
  font-size: 16px; color: var(--text-faint); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}
.pk-wheel__item--on { color: var(--text); font-weight: 600; transform: scale(1.12); }
.pk-time__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.pk-time__foot { justify-content: space-between; align-items: center; gap: 8px; }
.pk-cal__act--auto { flex: 0 0 auto; padding: 6px 12px; }

/* ---- FAQ-dragspel (kalenderhjälp) ---- */
.faq { display: flex; flex-direction: column; gap: 6px; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-1); overflow: hidden; }
.faq__item--open { border-color: var(--accent); }
.faq__q {
  appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  text-align: left; padding: 11px 13px; cursor: pointer; transition: background var(--transition);
}
.faq__q:hover { background: var(--bg-2); }
.faq__chev { display: flex; color: var(--text-faint); transition: transform var(--transition); }
.faq__chev svg { width: 16px; height: 16px; display: block; }
.faq__item--open .faq__chev { transform: rotate(180deg); color: var(--accent); }
.faq__a { display: none; padding: 0 13px 12px; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.faq__item--open .faq__a { display: block; }
.faq__a p { margin: 0 0 6px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ol { margin: 0 0 6px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.faq__a strong { color: var(--text); font-weight: 600; }
.faq__a code { background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 11px; }

/* ---- Röstinspelning i Snabbanteckning ---- */
.import__rec { display: inline-flex; align-items: center; gap: 6px; }
.import__rec svg { width: 15px; height: 15px; display: block; }
.import__rec--on {
  background: var(--status-overdue);
  border-color: var(--status-overdue);
  color: #fff;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.72; } }

/* ---- "Ny sektion/matris"-knapp i trädhuvudet (tidigare ensam +-ruta) ---- */
.tree-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tree-add svg { width: 16px; height: 16px; display: block; }
.tree-add:hover { background: var(--bg-2); color: var(--accent); }

/* ---- Claude-förslag i detaljvyn ---- */
.detail__suggest { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; flex-wrap: wrap; }
.detail__suggest-btn { display: inline-flex; align-items: center; gap: 6px; }
.detail__suggest-btn svg { width: 15px; height: 15px; color: var(--accent); display: block; }
.detail__suggest-status { font-size: 12px; }

/* ---- Inställningar: underrubriker (t.ex. AI → Lokal/Claude) ---- */
.settings__sub { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings__subtitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand-2); margin-bottom: 10px; }

/* ---- Dold API-guide (fälls ut) ---- */
.apiguide { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 4px 0 12px; overflow: hidden; }
.apiguide__toggle { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; padding: 10px 12px; cursor: pointer; }
.apiguide__toggle:hover { background: var(--bg-2); }
.apiguide__chev { display: flex; color: var(--text-faint); transition: transform var(--transition); }
.apiguide__chev svg { width: 16px; height: 16px; display: block; }
.apiguide--open .apiguide__chev { transform: rotate(180deg); color: var(--accent); }
.apiguide__body { padding: 0 14px 12px; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.apiguide__body ol { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.apiguide__body strong { color: var(--text); }
.apiguide__body code { background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; font-size: 11px; }

/* ---- Titelradens verktygsknappar (Historik/Kalender/Inställningar) ---- */
.titlebar__tools { display: flex; gap: 2px; -webkit-app-region: no-drag; }
.titlebar__tool {
  appearance: none; border: none; background: transparent; color: var(--text-muted);
  width: 34px; height: 30px; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transition), color var(--transition);
}
.titlebar__tool svg { width: 18px; height: 18px; display: block; }
.titlebar__tool:hover { background: var(--bg-3); color: var(--text); }
.titlebar__tool.nav-item--active { background: var(--accent-soft); color: var(--accent); }


/* Antal-badge på Inkorg-navet. */
.nav-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: #1a1a1a;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

/* ---- Inkorg-vy ---- */
.inbox__header { margin-bottom: 18px; }
.inbox__title { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.inbox__sub { margin: 0; }
.inbox__empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 60px 20px; color: var(--text-muted); text-align: center;
}
.inbox__empty svg { width: 40px; height: 40px; opacity: 0.5; }
.inbox__list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.inbox__item {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.inbox__head { display: flex; align-items: center; gap: 9px; }
.inbox__srcico { color: var(--text-muted); flex: 0 0 auto; display: grid; place-items: center; }
.inbox__srcico svg { width: 17px; height: 17px; display: block; }
.inbox__topic { font-weight: 600; font-size: 15px; }
.inbox__topic--pending { color: var(--accent); font-weight: 500; }
.inbox__date {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-muted); background: var(--bg-2);
  padding: 3px 9px; border-radius: 999px;
}
.inbox__date svg { width: 13px; height: 13px; display: block; }
.inbox__raw {
  margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox__actions { display: flex; gap: 8px; align-items: center; }
.inbox__btn { display: inline-flex; align-items: center; gap: 6px; }
.inbox__btn svg { width: 16px; height: 16px; display: block; }
.inbox__btn--ghost { margin-left: auto; color: var(--text-muted); padding: 6px 8px; }
.inbox__btn--ghost:hover { color: var(--status-overdue); }

/* ---- Liten "?"-hjälpknapp ---- */
.help-btn {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 700; line-height: 1; display: inline-grid; place-items: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.help-btn:hover { background: var(--accent); color: #1a1a1a; border-color: var(--accent); }
.help-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.help-body p { margin: 0 0 10px; }
.help-body ul, .help-body ol { margin: 0 0 10px; padding-left: 20px; }
.help-body li { margin: 3px 0; }
.help-body code { background: var(--bg-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.help-row { display: flex; align-items: center; gap: 8px; }
.help-row .modal__title { margin-bottom: 0; }
.modal .help-row { margin-bottom: 12px; }

/* ---- Rundtur (onboarding-genomgång) ---- */
.tour-root { position: fixed; inset: 0; z-index: 200; }
.tour-blocker { position: fixed; inset: 0; z-index: 1; }
.tour-dim { position: fixed; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.55); display: none; }
.tour-ring {
  position: fixed; z-index: 3; border-radius: 10px; border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); pointer-events: none;
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease;
}
.tour-card {
  position: fixed; z-index: 4; width: 340px; max-width: calc(100vw - 16px);
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); padding: 16px 18px;
}
.tour-card__step { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.tour-card__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.tour-card__body { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.tour-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 10px; }
.tour-card__nav { display: flex; gap: 8px; }
.tour-card__skip { font-size: 13px; }
.tour-intro { font-size: 14px; line-height: 1.55; }

/* ---- Insikter-vy ---- */
.insights__header { margin-bottom: 16px; }
.insights__title { font-size: 24px; font-weight: 700; margin: 0; }
.insights__content { max-width: 820px; }
.insights__toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.insights__range { font-size: 13px; color: var(--text-muted); text-transform: capitalize; }
.insights__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.insights__stat { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.insights__stat-label { font-size: 13px; color: var(--text-muted); }
.insights__stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.insights__stat-value--accent { color: var(--accent); }
.insights__table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.insights__row { display: grid; grid-template-columns: 1fr 84px 116px 104px 34px; gap: 8px 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 14px; }
.insights__row:first-child { border-top: none; }
.insights__row--head { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.insights__row--muted { color: var(--text-muted); }
.insights__row--zero { color: var(--text-muted); }
.insights__row--zero .insights__dot { background: var(--text-muted); }
.insights__row--total { font-weight: 700; background: var(--bg-1); }
.insights__cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.insights__cell.r { justify-content: flex-end; text-align: right; }
.insights__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.insights__rate { width: 70px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 4px 6px; font-size: 13px; text-align: right; outline: none; }
.insights__rate:focus { border-color: var(--accent); }
.insights__rate-suf { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.insights__kw { appearance: none; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; }
.insights__kw svg { width: 15px; height: 15px; display: block; }
.insights__kw:hover { color: var(--accent); background: var(--bg-2); }
.insights__ask { background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.insights__ask-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.insights__ask-label svg { width: 15px; height: 15px; color: var(--accent); }
.insights__ask-row { display: flex; gap: 8px; }
.insights__ask-input { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 14px; font-family: inherit; outline: none; }
.insights__ask-input:focus { border-color: var(--accent); }
.insights__ask-priv { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.insights__answer { margin-top: 12px; padding: 12px 14px; background: var(--bg-2); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.insights__note { font-size: 12px; color: var(--text-muted); margin-top: 14px; }
.insights__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; color: var(--text-muted); }
.insights__msg { font-size: 14px; color: var(--text-muted); padding: 14px 16px; }
.insights__msg--err { color: var(--status-overdue); }

/* ---- Fidget (lugna pauser) ---- */
.fidget-modal { width: 420px; max-width: calc(100vw - 24px); }
.fidget-seg { margin: 4px 0 12px; }
.fidget-area { height: 260px; display: grid; place-items: center; position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-2); }
/* Andning */
.fidget-breath { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fidget-breath__orb {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--accent), transparent 72%);
  border: 2px solid var(--accent);
  animation: qv-breathe 8s ease-in-out infinite;
}
.fidget-breath__lbl { font-size: 14px; color: var(--text-muted); letter-spacing: 0.3px; }
@keyframes qv-breathe {
  0%, 100% { transform: scale(0.7); opacity: 0.55; }
  50% { transform: scale(1.25); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fidget-breath__orb { animation: none; transform: scale(1); } }
/* Bubblor */
.fidget-bubbles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 18px; }
.fidget-bubbles__b {
  appearance: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), color-mix(in srgb, var(--accent) 55%, #000) 90%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25); transition: transform 120ms ease, opacity 120ms ease;
}
.fidget-bubbles__b:hover { transform: scale(1.06); }
.fidget-bubbles__b.is-pop { transform: scale(0.2); opacity: 0; pointer-events: none; }
/* Ripples */
.fidget-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }

/* ---- Städa titlar (review) ---- */
.clean-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; margin: 4px 0; }
.clean-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.clean-row input { margin-top: 3px; flex: 0 0 auto; }
.clean-texts { min-width: 0; }
.clean-from { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.clean-to { font-size: 14px; color: var(--text); }

/* ---- Schema-popover (uppgiftskortets "Lägg i kalender") ---- */
.ics-sched { width: 224px; display: flex; flex-direction: column; gap: 9px; }
.ics-sched__title { font-size: 13px; font-weight: 600; }
.ics-sched__row { display: flex; flex-direction: column; gap: 4px; }
.ics-sched__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); }
.ics-sched .pk-field { width: 100%; }
.ics-sched__foot { display: flex; margin-top: 2px; }
.ics-sched__desktop { width: 100%; justify-content: center; }
.ics-sched__web { display: flex; gap: 6px; }
.ics-sched__web .btn { flex: 1; justify-content: center; }

.detail__calbtns { display: flex; gap: 8px; }

/* ===========================================================
   Login-skärm – animerad Qvadrant-inloggning (Moln-synk).
   Möter dig vid start om du inte är inloggad. All animation här
   (CSP tillåter extern stylesheet men inte inline <style>).
   =========================================================== */
.login-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0);
  opacity: 0; transition: opacity .32s ease;
  overflow: hidden;
}
.login-overlay--in { opacity: 1; }
.login-overlay--out { opacity: 0; pointer-events: none; }
.login-overlay--busy { cursor: progress; }

/* Animerad bakgrund: mjuka drivande accent-blobs */
.login-bg { position: absolute; inset: 0; overflow: hidden; }
.login-blob {
  position: absolute; border-radius: 50%; filter: blur(72px);
  background: radial-gradient(circle at 50% 50%, var(--accent), transparent 70%);
  animation: login-blob 19s ease-in-out infinite;
}
.login-blob--1 { width: 480px; height: 480px; top: -130px; left: -110px; opacity: .42; }
.login-blob--2 { width: 420px; height: 420px; bottom: -150px; right: -90px; opacity: .32; animation-delay: -6s; }
.login-blob--3 { width: 320px; height: 320px; top: 42%; left: 56%; opacity: .24; animation-delay: -12s; }
@keyframes login-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(42px, -32px) scale(1.12); }
  66% { transform: translate(-28px, 26px) scale(.94); }
}

/* Kort */
.login-card {
  position: relative; z-index: 1;
  width: min(400px, calc(100vw - 48px));
  padding: 40px 36px 26px; text-align: center;
  background: var(--bg-1);
  background: color-mix(in srgb, var(--bg-1) 84%, transparent);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(24px) scale(.96);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}
.login-overlay--in .login-card { opacity: 1; transform: none; }
.login-card--success { opacity: 0; transform: scale(1.03); transition: transform .5s ease, opacity .5s ease; }

/* Varumärke: 2×2 kvadrant-mark (Eisenhower) + ordmärke */
.login-brand { margin-bottom: 6px; }
.login-mark {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
  width: 80px; height: 80px; margin: 6px auto 20px;
  animation: login-float 5s ease-in-out infinite;
}
.login-mark__tile {
  border-radius: 7px; background: var(--accent-soft); border: 1.5px solid var(--accent);
  opacity: 0; transform: scale(0);
  animation: login-tile-in .55s cubic-bezier(.2, .9, .3, 1.5) forwards;
}
.login-mark__tile:nth-child(1) { background: var(--accent); animation-delay: .12s; }
.login-mark__tile:nth-child(2) { animation-delay: .22s; }
.login-mark__tile:nth-child(3) { animation-delay: .32s; }
.login-mark__tile:nth-child(4) { animation-delay: .42s; }
@keyframes login-tile-in { to { opacity: 1; transform: scale(1); } }
@keyframes login-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.login-wordmark { font-size: 30px; font-weight: 700; letter-spacing: .4px; color: var(--text); }
.login-tagline { margin: 8px 0 24px; font-size: 14px; color: var(--text-muted); }

/* Formulär */
.login-form { display: flex; flex-direction: column; gap: 13px; text-align: left; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field__label { font-size: 12px; color: var(--text-muted); }
.login-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border-radius: 11px; background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-error { min-height: 18px; margin: 2px 0 0; font-size: 12.5px; color: var(--danger-text); }
.login-submit {
  margin-top: 4px; padding: 12px 16px; border-radius: 11px;
  background: var(--accent); color: #17130f; border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
.login-submit:hover { background: var(--accent-hover); }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { opacity: .6; cursor: default; }
.login-toggle { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--text-muted); }
.login-link { background: none; border: none; padding: 0; color: var(--accent); font-size: 13px; cursor: pointer; }
.login-link:hover { text-decoration: underline; }
.login-link:disabled { opacity: .6; cursor: default; }
.login-skip {
  display: block; margin: 22px auto 0; padding: 0;
  background: none; border: none; color: var(--text-faint); font-size: 12.5px; cursor: pointer;
}
.login-skip:hover { color: var(--text-muted); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .login-overlay, .login-card { transition: opacity .2s ease; }
  .login-card { transform: none; }
  .login-blob, .login-mark { animation: none; }
  .login-mark__tile { animation: none; opacity: 1; transform: none; }
}

/* Instruktionstext i login-stegen (bekräfta konto / återställ lösenord) */
.login-hint { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); text-align: left; line-height: 1.5; }

/* Moln-synk-status i kontopopovern */
.cloud-status { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.cloud-status__text { font-size: 12px; color: var(--text-muted); }
.cloud-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-faint); }
.cloud-dot--synced { background: var(--signal-green); }
.cloud-dot--syncing { background: var(--accent); animation: cloud-pulse 1s ease-in-out infinite; }
.cloud-dot--error { background: var(--signal-red); }
.cloud-dot--offline { background: var(--signal-yellow); }
.cloud-dot--signedout { background: var(--text-faint); }
@keyframes cloud-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.cloud-action {
  width: 100%; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
  font-size: 12.5px; font-family: inherit; transition: background .15s ease, border-color .15s ease;
}
.cloud-action:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.cloud-action:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .cloud-dot--syncing { animation: none; } }

/* ===========================================================
   Rullningslister – lugna och tema-följsamma.
   Windows standardlist (ljusgrå med pilknappar) skar sig mot appens
   mörka ytor. Chromium-pseudoelementen ger full kontroll, och färgerna
   hämtas ur temavariablerna så ljusa teman och EGNA teman följer med
   automatiskt (de sätter samma variabler via CSSOM).
   OBS: sätt INTE scrollbar-color/scrollbar-width globalt – i Chromium
   121+ slår de av ::-webkit-scrollbar-stylingen helt.
   =========================================================== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  /* Genomskinlig ram + padding-box = ett flytande pill med luft runt om. */
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  min-height: 40px;   /* blir aldrig en oklickbar prick i långa listor */
  min-width: 40px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--text-muted); background-clip: padding-box; }
/* Bort med Windows pilknappar och hörnrutan. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* Rullningsbeteende på ytor som faktiskt rullar.
   `overscroll-behavior: contain` stoppar scroll-chaining: når man botten av en
   lista fortsätter hjulet annars att rulla sidan BAKOM, vilket i en modal
   känns som att appen glider undan.
   `scrollbar-gutter: stable` reserverar listens plats, så innehållet inte
   hoppar i sidled i det ögonblick en lista blir tillräckligt lång.
   OBS: `scrollbar-gutter` är INTE samma sak som `scrollbar-width`/-color —
   den slår inte av ::-webkit-scrollbar. Verifierat i appen (listen mätt till
   12 px efteråt), men kontrollera om raden någonsin flyttas. */
.modal__body,
.forslag,
.veckoplan__lista,
.sidebar-tree,
.main {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* ===========================================================
   EGNA KRYSSRUTOR
   Windows standardkryssruta är blå, fyrkantig och tar ingen hänsyn till
   temat – samma skäl som gjorde att datum- och tidväljarna byttes ut.
   Ren CSS: `appearance: none` + ett bockat ::after. Ingen inline style
   (CSP `style-src 'self'` tillåter den inte) och ingen SVG som måste
   färgas om per tema.
   =========================================================== */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-1);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
/* Bocken: två kanter av en ruta, vriden 45°. Mörk mot accentfärgen, samma
   kontrastval som knapparna med fylld accent. */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5px;
  width: 4px;
  height: 8px;
  border: solid #1a1a1a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: default;
  border-color: var(--border);
}

/* Blockerande vy när datafilen inte gick att läsa (state.loadFailed).
   Medvetet allvarlig men lugn – ingen panik, tydligt att inget skrivits över. */
.loadfail {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: 24px;
  background: var(--bg-0);
}
.loadfail__card {
  width: min(520px, 100%); padding: 32px 30px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.loadfail__title { margin: 0 0 10px; font-size: 21px; color: var(--text); }
.loadfail__lead { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.loadfail__detail {
  margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-faint);
  word-break: break-word;
}
.loadfail__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }