/* =========================================================
   styles.css — Kundregister
   -----------------------------------------------------------
   Designtanke: ett digitalt kortregister. Den vertikala
   alfabetflik-listan till vänster om tabellen och det
   utdragbara "kundkortet" till höger återger känslan av ett
   fysiskt registerskåp/rullkortex, fast digitalt.
   ========================================================= */

/* Samma självhostade Inter-variabelfont som B4Fire ISMS (kopierad rakt av
   från dess public/fonts/, 2026-08-19) - enda typsnittet i hela systemet,
   inget separat rubrik-/mono-typsnitt längre, för att matcha ISMS exakt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Variable.woff2") format("woff2");
}

:root {
  /* Färger */
  --bg: #F5F4EF;
  --surface: #FFFFFF;
  --surface-soft: #FBFAF6;
  --ink: #1E2A32;
  --ink-soft: #5C6B72;
  --ink-faint: #93A0A6;
  --accent: #E52325;
  --accent-dark: #B81A1C;
  --accent-soft: #FBDEDB;
  --border: #E4E1D6;
  --border-strong: #CFC9B8;

  --status-lead-fg: #6B7488;
  --status-lead-bg: #EAECF1;
  --status-prospekt-fg: #97650F;
  --status-prospekt-bg: #FAEDD2;
  --status-kund-fg: #2E7048;
  --status-kund-bg: #E1F2E6;
  --status-avslutad-fg: #56677D;
  --status-avslutad-bg: #E7ECF1;
  --status-ejaktuell-fg: #A03F41;
  --status-ejaktuell-bg: #F8E4E3;

  /* Typografi - samma enda typsnitt (Inter) överallt som B4Fire ISMS,
     istället för tre olika (Space Grotesk/Inter/IBM Plex Mono). Alla tre
     variabler pekar på samma typsnitt så att övriga regler i filen (som
     alla redan använder var(--font-display)/var(--font-mono) istället för
     hårdkodade namn) inte behövde ändras en och en. */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Övrigt */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-drawer: -24px 0 48px -12px rgba(30, 42, 50, 0.18);
  --shadow-card: 0 1px 2px rgba(30, 42, 50, 0.06), 0 1px 1px rgba(30, 42, 50, 0.04);
  --transition-fast: 160ms ease;
  --transition-med: 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

/* Säkerställer att attributet hidden alltid vinner över display:flex/grid
   som annars har samma specificitet och skulle kunna visa dolda vyer
   (t.ex. adminvyer) ovanpå/under varandra. */
[hidden] {
  display: none !important;
}

/* ---------- Inloggningsspärr (Microsoft Entra ID) ---------- */
/* Ligger ovanpå hela appen tills MSAL-inloggningen är klar. app.js/data-
   lagren initieras som vanligt i bakgrunden (ofarligt, ingen data att visa
   förrän man är inloggad ändå) — spärren tas bara bort ur DOM:en av
   auth-bootstrap-scriptet i index.html när ensureLoggedIn() lyckats. */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 32px;
}

.login-gate-card .brand-mark {
  width: 64px;
  height: 64px;
}

.login-gate-card p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 320px;
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */

.app {
  min-height: 100%;
  display: grid;
  grid-template-columns: 208px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidenav content";
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  margin-right: 4px;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

/* ---------- Global sidomeny ---------- */

.sidenav {
  grid-area: sidenav;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.sidenav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.sidenav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidenav-link:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.sidenav-link.active {
  background: var(--accent);
  color: #fff;
}

/* Positionerad som kundkortets dra-handtag (.drawer-resize-handle): en
   liten "flik" som sticker ut vid sidomenyns kant, vertikalcentrerad i
   viewporten - försvinner aldrig långt ner även om menyn har många poster
   eller är scrollad. Flyttar sig automatiskt när menyn fälls ihop, eftersom
   "right" är relativt sidomenyns egen (då smalare) bredd. */
.sidenav-collapse-toggle {
  position: fixed;
  top: 50%;
  left: 208px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink-faint);
  cursor: pointer;
  z-index: 21;
  transition: left var(--transition-med), color var(--transition-fast);
}

.sidenav-collapse-toggle span {
  display: none;
}

.sidenav-collapse-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.sidenav-collapse-toggle:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
}

.app.sidenav-collapsed .sidenav-collapse-toggle {
  left: 64px;
}

/* ---------- Kollapsad sidomeny (ikon-läge, desktop) -----------
   Grid-kolumnbredden gäller bara på desktop (@media-guardad) - annars
   skulle klassen (satt via JS/localStorage, oberoende av skärmbredd)
   kunna vinna över mobilens "grid-template-columns: 1fr" på specificitet
   och lämna en tom 64px-kolumn på mobil. */
@media (min-width: 901px) {
  .app.sidenav-collapsed {
    grid-template-columns: 64px 1fr;
  }
}

.sidenav.collapsed .sidenav-link {
  justify-content: center;
  padding: 9px;
}

.sidenav.collapsed .sidenav-link span,
.sidenav.collapsed .sidenav-collapse-toggle span {
  display: none;
}

.sidenav.collapsed .sidenav-collapse-toggle {
  justify-content: center;
}

.sidenav.collapsed .sidenav-collapse-toggle svg {
  transform: rotate(180deg);
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 33, 0.32);
  z-index: 24;
}

.nav-overlay.open {
  display: block;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
}

.brand-text h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-text p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.global-search {
  position: relative;
  display: flex;
  align-items: center;
}

.global-search input {
  width: 220px;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), width var(--transition-fast);
}

.global-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
  width: 280px;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(30, 42, 50, 0.16);
  z-index: 60;
}

.global-search-group-label {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
}

.global-search-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.global-search-item:hover {
  background: var(--accent-soft);
}

.global-search-item-title {
  font-size: 13px;
  font-weight: 600;
}

.global-search-item-meta {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.global-search-empty {
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.icon-search {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  pointer-events: none;
}

.search-box input {
  width: 240px;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.filter-select,
select {
  padding: 9px 30px 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="%235C6B72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat right 8px center / 16px;
  appearance: none;
  cursor: pointer;
}

/* ---------- Knappar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.btn-danger {
  background: transparent;
  color: var(--status-ejaktuell-fg);
  border-color: transparent;
}

.btn-danger:hover {
  background: var(--status-ejaktuell-bg);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.icon-btn-ghost {
  width: 26px;
  height: 26px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.icon-btn-ghost svg {
  width: 14px;
  height: 14px;
}

.contact-item:hover .icon-btn-ghost,
.history-head:hover .icon-btn-ghost {
  opacity: 1;
}

.icon-plus {
  width: 16px;
  height: 16px;
}

/* ---------- Huvudlayout: register-flik + lista ---------- */

.main-layout {
  grid-area: content;
  min-width: 0;
  display: flex;
  align-items: flex-start;
}

.index-rail {
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  flex-shrink: 0;
}

.rail-tab {
  border: none;
  background: transparent;
  color: var(--border-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px 3px 14px;
  text-align: left;
  cursor: default;
  border-left: 2px solid transparent;
  letter-spacing: 0.02em;
}

.rail-tab-active {
  color: var(--accent-dark);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.rail-tab-active:hover {
  background: var(--accent-soft);
}

.list-panel {
  flex: 1;
  min-width: 0;
  padding: 20px 28px 60px;
}

/* ---------- Inställningar: snabbhopp-index (mellan sidomenyn och formuläret) ---------- */

.settings-index {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 172px;
  padding: 24px 12px;
  position: sticky;
  /* .topbar är också position:sticky/top:0 (rad 161-163) - utan en offset
     här hamnar det här indexet bakom headern så fort man scrollar, eftersom
     båda tävlar om samma sticky-position. 74px ≈ .topbar:s renderade höjd
     på desktopbredd (~72.5px uppmätt) + någon px marginal. Mät om
     .topbar-höjden ändras (nytt element i headern e.dyl). Bara relevant på
     desktop - under 900px är .settings-index redan display:none. */
  top: 74px;
  align-self: flex-start;
}

.settings-index-link {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.settings-index-link:hover {
  background: var(--surface-soft);
  color: var(--accent-dark);
  border-left-color: var(--accent);
}

.list-meta {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- Huvudflikar (Dashboard/Kunder/Offerter/Avtal/Uppgifter) ----------
   Flikknapparna själva flyttade till den globala sidomenyn (.sidenav) - denna
   sektion styr bara vilken panel som visas. */

.main-tab-panel {
  display: none;
}

.main-tab-panel.active {
  display: block;
}

/* ---------- Filterrad (flyttad ner ovanför tabellerna) ---------- */

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-row-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Genomgående standard: primärknappen för "lägg till ny post" sitter alltid
   längst till höger i sin rad, oavsett om raden är en filter-row, ett
   admin-panel-head eller ett kortflik-huvud (.doc-list-head). Denna klass
   är den explicita markören för det mönstret - används tillsammans med
   filter-row-count ovan (som redan får margin-left:auto) eller ensam. */
.filter-row-add {
  margin-left: auto;
}

.num-col {
  text-align: right;
}

.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable-th:hover {
  color: var(--ink-soft);
}

.sortable-th::after {
  content: "";
  display: inline-block;
  width: 10px;
  margin-left: 4px;
  opacity: 0.35;
}

.sortable-th.sort-asc::after {
  content: "▲";
  opacity: 1;
}

.sortable-th.sort-desc::after {
  content: "▼";
  opacity: 1;
}

/* ---------- Lagerdiagram (offertstock / avtalsstock) ---------- */

.stock-summary {
  margin-bottom: 20px;
}

.stock-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}

.stock-chart-head {
  margin-bottom: 16px;
}

.stock-chart-total {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}

.stock-chart-total-label {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.stock-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  height: 130px;
  padding-top: 6px;
}

.stock-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}

/* Klickbara diagramstaplar (backlog-punkt 2, 2026-08-24) - filtrerar
   motsvarande tabell till den kategorin, se onBarClick i app.js. */
.stock-bar-col-clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}

.stock-bar-col-clickable:hover,
.stock-bar-col-clickable:focus-visible {
  background: var(--surface-soft);
}

.stock-bar-track {
  width: 100%;
  max-width: 64px;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.stock-bar-fill {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--accent);
  transition: height var(--transition-med);
  min-height: 4px;
}

.stock-bar-utkast { background: var(--status-lead-fg); }
.stock-bar-skickad { background: var(--status-prospekt-fg); }
.stock-bar-konverterad,
.stock-bar-aktivt { background: var(--status-kund-fg); }
.stock-bar-avslutat { background: var(--status-avslutad-fg); }

.stock-bar-value {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}

.stock-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.stock-bar-count {
  font-size: 11px;
  color: var(--ink-faint);
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.customer-table {
  width: 100%;
  border-collapse: collapse;
}

.customer-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}

.customer-table thead th.num-col {
  text-align: right;
}

.customer-row {
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border);
}

.customer-row:last-child {
  border-bottom: none;
}

.customer-row:hover {
  background: var(--accent-soft);
}

.customer-row.row-flash,
.contact-item.row-flash {
  animation: flash 0.9s ease;
}

@keyframes flash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

.related-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.related-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}

.related-chip:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.related-chip-label {
  color: var(--ink-faint);
}

.link-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-dark);
  text-decoration: underline;
  cursor: pointer;
}

.link-inline:hover {
  color: var(--accent);
}

.customer-table td {
  padding: 13px 16px;
  vertical-align: middle;
}

.id-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

.company-name {
  display: block;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.company-sub {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 1px;
}

.cell-muted {
  color: var(--ink-faint);
}

/* ---------- Badgar ---------- */

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-status-lead { color: var(--status-lead-fg); background: var(--status-lead-bg); }
.badge-status-prospekt { color: var(--status-prospekt-fg); background: var(--status-prospekt-bg); }
.badge-status-kund { color: var(--status-kund-fg); background: var(--status-kund-bg); }
.badge-status-avslutad { color: var(--status-avslutad-fg); background: var(--status-avslutad-bg); }
.badge-status-ej_aktuell { color: var(--status-ejaktuell-fg); background: var(--status-ejaktuell-bg); }

/* Generiska tongivande brickor (grön/gul/röd/grå) - för Systemuppdateringars
   kategorimärkning (samma tone-konvention som B4Fire ISMS Utvecklingslogg:
   grön=nytt/förbättring, gul=buggfix, röd=säkerhet, grå=infra/övrigt),
   återanvänder samma färgtoken-set som status-brickorna ovan istället för
   nya färger. */
.badge-tone-green  { color: var(--status-kund-fg); background: var(--status-kund-bg); }
.badge-tone-amber  { color: var(--status-prospekt-fg); background: var(--status-prospekt-bg); }
.badge-tone-red    { color: var(--status-ejaktuell-fg); background: var(--status-ejaktuell-bg); }
.badge-tone-neutral { color: var(--status-lead-fg); background: var(--status-lead-bg); }

.badge-license {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

/* Licensregistrets valfria färgindikator (data-licenses.js Farg-fält) -
   en liten punkt istället för att färga hela brickan, så kontrasten alltid
   är läsbar oavsett vilken färg en admin väljer för en licenstyp. */
.license-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* ---------- Tomt läge ---------- */

.empty-state {
  padding: 64px 24px;
  text-align: center;
}

.empty-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

.empty-sub {
  color: var(--ink-faint);
  margin: 0 0 20px;
  font-size: 14px;
}

/* ---------- Scrim ---------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 33, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med);
  z-index: 30;
}

.scrim-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Sidokort (Anställda/Artikelregister/Återförsäljare) -----------
   Samma slide-in-mönster som kundkortet (.drawer), men enklare - inga
   flikar, ingen dra-i-handtag-storleksändring. Delar #scrim med kundkortet
   (de öppnas aldrig samtidigt). */

.side-card-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 33, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-med);
  z-index: 39;
}

.side-card-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.admin-form.side-card {
  /* .admin-form sätter position:sticky - denna kombinerade selektor vinner
     på specificitet oavsett källordning, så kortet faktiskt dockar till
     höger istället för att sticky-positioneras i sidflödet. */
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--transition-med);
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* Ingen overflow här (skulle klippa dra-handtaget, som sticker ut till
     vänster om kortet) - scrollning sker i .side-card-scroll istället,
     samma princip som kundkortets .drawer/.drawer-body. */
}

.side-card.open {
  transform: translateX(0);
}

/* Offert-/avtalskortet innehåller en bredare artikelradstabell - ge dem
   ett bredare standardläge än övriga sidokort (dra-handtaget vinner så
   fort användaren själv ändrat bredden, se setupSideCardResize). */
#quoteCard,
#agreementCard {
  width: min(640px, 100vw);
}

.side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 0;
  flex-shrink: 0;
}

.side-card-head h3 {
  margin: 0;
}

.side-card-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.side-card-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.side-card-contacts {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side-card-contacts h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
}

/* ---------- Kundkort / Drawer ---------- */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(480px, 100vw);
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--transition-med);
  z-index: 40;
  display: flex;
  flex-direction: column;
}

.drawer-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.drawer-id-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.drawer-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.drawer-tabs,
.side-card-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  flex-shrink: 0;
}

.drawer-tabs::-webkit-scrollbar,
.side-card-tabs::-webkit-scrollbar {
  height: 4px;
}

.drawer-tabs::-webkit-scrollbar-thumb,
.side-card-tabs::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.drawer-tab,
.side-card-tab {
  background: transparent;
  border: none;
  padding: 8px 10px 12px;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.drawer-tab.active,
.side-card-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.tab-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--border);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 1px 6px;
}

.drawer-tab.active .tab-count,
.side-card-tab.active .tab-count {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 24px 40px;
}

.tab-panel,
.side-card-tab-panel {
  display: none;
}

.tab-panel.active,
.side-card-tab-panel.active {
  display: block;
}

/* ---------- Formulär: uppgifter ---------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-wide {
  grid-column: 1 / -1;
}

.field-narrow-input {
  max-width: 120px;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.field-label.field-label-section {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.field {
  min-width: 0;
}

.field input,
.field select {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  text-overflow: ellipsis;
}

.field-readonly {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 14px;
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.field input.field-invalid {
  border-color: var(--status-ejaktuell-fg);
  background: var(--status-ejaktuell-bg);
}

.field-error {
  font-size: 12px;
  color: var(--status-ejaktuell-fg);
  font-weight: 600;
}

.kund-only {
  background: var(--accent-soft);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  margin: -4px 0;
}

.locked-notice {
  background: var(--status-kund-bg);
  color: var(--status-kund-fg);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  margin: 0 0 14px;
}

.kund-only .field-label {
  color: var(--accent-dark);
}

.kund-only select {
  background-color: var(--surface);
}

.field-spacer {
  grid-column: 1 / -1;
  height: 0;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.form-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.save-hint {
  font-size: 13px;
  color: var(--status-kund-fg);
  font-weight: 600;
}

.save-hint-error {
  color: var(--status-ejaktuell-fg);
}

.company-lookup-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
}

.secret-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.secret-input-row input {
  flex: 1;
  min-width: 0;
}

.secret-lock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.secret-lock-hint {
  font-size: 12.5px;
  color: var(--ink-faint);
}

input[readonly] {
  background: var(--surface-soft);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* ---------- Kontaktpersoner & historik: gemensamt ---------- */

.panel-intro p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

.inline-form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inline-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inline-form-grid input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.inline-form-grid-history {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inline-form textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  resize: vertical;
  min-height: 56px;
}

/* Bulk-actions åtgärdsrad (backlog-punkt 13, 2026-08-24) - viewport-fast
   längst ner, EN delad rad för alla registertabeller (aldrig korten). Se
   attachBulkSelect()/clearBulkSelection() i app.js. */
.bulk-action-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--accent-dark);
  color: #fff;
  padding: 12px 16px 12px 20px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.bulk-action-count {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bulk-action-buttons {
  display: flex;
  gap: 8px;
}

.bulk-action-bar .icon-btn {
  color: #fff;
}

/* Vitt/genomskinligt istället för standardfärgerna - .btn-secondary/
   .btn-danger är byggda för en ljus bakgrund och skulle vara osynliga mot
   den mörkröda åtgärdsraden. */
.bulk-action-bar .btn-secondary {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.bulk-action-bar .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
  color: #fff;
}

.bulk-action-bar .btn-danger {
  background: #fff;
  border-color: #fff;
  color: var(--accent-dark);
}

.bulk-action-bar .btn-danger:hover {
  background: rgba(255, 255, 255, 0.85);
}

.bulk-row-checkbox-cell {
  width: 36px;
  text-align: center;
}

.bulk-mode-toggle-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Utskick-signaturens HTML-editor (Inställningar) - en contenteditable-yta
   som fungerar som en enkel "klistra in rik text"-editor (samma flöde som
   att klistra in en signatur i Outlook), plus en växlingsbar rå HTML-källa
   för finjustering. Se CLAUDE.md avsnitt 2 "Utskick". */
.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.rich-editor-toolbar-divider {
  width: 1px;
  background: var(--border);
  margin: 2px 4px;
}

.rich-editor {
  min-height: 160px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow-y: auto;
}

.rich-editor:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.rich-editor img {
  max-width: 100%;
}

.rich-editor-source {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  resize: vertical;
}

.inline-form .btn {
  align-self: flex-start;
}

.list-hint {
  list-style: none;
  color: var(--ink-faint);
  font-size: 13px;
  padding: 14px;
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
}

/* ---------- Kontaktpersoner ---------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.contact-item[data-id] {
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.contact-item[data-id]:hover {
  border-color: var(--accent);
}

.contact-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  grid-column: 1;
}

.contact-name {
  font-weight: 600;
  font-size: 13.5px;
}

.contact-role {
  font-size: 12px;
  color: var(--ink-faint);
}

.contact-meta {
  grid-column: 1;
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.contact-item .icon-btn-ghost {
  grid-row: 1 / 3;
  grid-column: 2;
}

/* ---------- Förlopp (pipeline & SBA-driftsättning) ---------- */

.progress-group {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.progress-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.progress-group-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.progress-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.progress-step:hover {
  background: var(--surface-soft);
}

.progress-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  color: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.progress-checkbox svg {
  width: 13px;
  height: 13px;
}

.progress-checkbox:hover {
  border-color: var(--accent);
}

.progress-step-done .progress-checkbox {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.progress-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
}

.progress-step-done .progress-label {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1.5px;
}

.progress-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.progress-decision {
  margin-top: 10px;
  padding: 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.progress-decision-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}

.decision-btn-group {
  display: flex;
  gap: 6px;
}

.decision-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.decision-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.decision-btn-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- Historik (tidslinje) ---------- */

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.history-item {
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}

.history-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
}

.history-item:last-child::before {
  display: none;
}

.history-item-clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.history-item-clickable:hover {
  background: var(--surface-soft);
}

.history-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 5px;
  flex-shrink: 0;
  z-index: 1;
}

.history-content {
  flex: 1;
  min-width: 0;
}

.history-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}

.history-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

.history-by {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-weight: 600;
}

.history-by::before {
  content: "· ";
}

.history-head .icon-btn-ghost {
  margin-left: auto;
}

.history-text {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink);
}

.history-contacts {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
}

.history-contact-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  background: var(--surface-soft);
}

.history-contact-chip input {
  width: 13px;
  height: 13px;
}

.history-contact-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.history-contact-role {
  font-weight: 400;
  color: var(--ink-faint);
}

.history-contact-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.btn-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  text-decoration: underline;
}

.btn-link:hover {
  color: var(--accent);
}

.history-new-contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.history-new-contact .btn-sm {
  grid-column: 1 / -1;
  justify-self: start;
}

/* ---------- Kugghjulsmeny ---------- */

.gear-menu {
  position: relative;
}

.gear-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(30, 42, 50, 0.16);
  padding: 10px;
  z-index: 50;
}

.gear-section {
  padding: 6px 8px 10px;
}

.gear-section-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 6px;
}

.gear-select {
  width: 100%;
  padding: 7px 28px 7px 10px;
  font-size: 13px;
}

.gear-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.gear-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.gear-item svg {
  width: 17px;
  height: 17px;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.gear-item:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.gear-item:hover svg {
  color: var(--accent-dark);
}

/* ---------- Uppgifts-widget (förstasidan) ---------- */

.dashboard-row {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-bottom: 18px;
}

.task-widget {
  flex: 1.6;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  margin-bottom: 0;
}

.dashboard-charts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: 18px;
}

.task-stat-row {
  margin-bottom: 14px;
}

.mini-chart-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.task-stat-card {
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.task-stat-card:hover,
.task-stat-card:focus-visible {
  border-color: var(--accent);
}

.mini-chart-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Dashboard: senaste händelser ---------- */

.activity-feed-card {
  flex: 1.4;
}

.activity-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 230px;
  overflow-y: auto;
}

.activity-feed-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.activity-feed-item:hover {
  background: var(--surface-soft);
}

.activity-feed-item:disabled {
  cursor: default;
}

.activity-feed-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
}

.activity-feed-text {
  font-size: 13px;
  color: var(--ink);
}

.activity-feed-empty {
  font-size: 13px;
  color: var(--ink-faint);
  padding: 8px;
}

/* ---------- Dashboard: offert-/avtalsstock sida vid sida ---------- */

.dashboard-row-stock > .stock-summary {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* ---------- Besökare (hemsidespårning) ---------- */

.visitor-stat-card {
  flex: 1;
  justify-content: center;
}

.visitor-stat-row {
  display: flex;
  gap: 24px;
}

.visitor-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.visitor-stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}

.visitor-stat-label {
  font-size: 12px;
  color: var(--ink-faint);
}

.visitor-stat-row-page {
  margin-bottom: 14px;
}

.visitor-stat-row-page .visitor-stat-card {
  padding: 14px 18px;
}

.visitor-date-presets {
  display: flex;
  gap: 6px;
}

.visitor-date-presets .btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.visitor-hidden-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.visitor-hidden-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 13px;
}

#visitorTable .col-actions {
  white-space: nowrap;
  text-align: right;
}

#taskWidgetTable .col-checkbox {
  width: 40px;
  text-align: center;
}

/* ---------- Systemuppdateringar (devlog) ---------- */

.devlog-filter-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.field-inline {
  gap: 4px;
}

.field-inline input {
  padding: 8px 10px;
}

.devlog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.devlog-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.devlog-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.devlog-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.devlog-head-row .badge {
  padding: 2px 8px;
  font-size: 10.5px;
}

.devlog-text {
  font-size: 13.5px;
  color: var(--ink);
}

/* ---------- Systembeskrivning / API-koppling (löptext-sidor) ---------- */

.prose-panel {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.6;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
}

.prose-panel h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 24px 0 8px;
}

.prose-panel h3:first-child {
  margin-top: 0;
}

.prose-panel p {
  margin: 0 0 10px;
  color: var(--ink-soft);
}

.prose-panel table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 13px;
}

.prose-panel th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
}

.prose-panel td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
}

.prose-panel .api-status-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.prose-panel .api-status-live {
  background: var(--status-kund-bg);
  color: var(--status-kund-fg);
}

.prose-panel .api-status-local {
  background: var(--status-lead-bg);
  color: var(--status-lead-fg);
}

.mini-chart {
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  flex: 1;
}

.mini-bar-row {
  display: grid;
  grid-template-columns: 78px 1fr 22px;
  align-items: center;
  gap: 8px;
}

.mini-bar-row-clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s ease;
}

.mini-bar-row-clickable:hover,
.mini-bar-row-clickable:focus-visible {
  background: var(--surface-soft);
}

.mini-bar-label {
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width var(--transition-med);
}

.mini-bar-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  text-align: right;
}

.mini-bar-lead { background: var(--status-lead-fg); }
.mini-bar-prospekt { background: var(--status-prospekt-fg); }
.mini-bar-kund { background: var(--status-kund-fg); }
.mini-bar-avslutad { background: var(--status-avslutad-fg); }
.mini-bar-ejaktuell { background: var(--status-ejaktuell-fg); }
/* Licenstyperna (tidigare .mini-bar-freemium m.fl.) får sin färg inline
   från LicenseStore (Farg-fältet) istället, se renderDashboardCharts()
   i app.js - registret är dynamiskt sedan 2026-08-24. */

.task-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.task-widget-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.task-widget-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ---------- Förlopps-statusfält i kundlistan ---------- */

.col-progress {
  width: 140px;
}

.progress-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width var(--transition-med);
}

.progress-bar-complete .progress-bar-fill {
  background: var(--status-kund-fg);
}

.progress-bar-empty .progress-bar-fill {
  background: var(--border-strong);
}

.progress-bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- Kundkort: expanderad helskärm ---------- */

.drawer-header-actions {
  display: flex;
  gap: 4px;
}

.drawer.drawer-fullpage {
  width: 100vw;
  max-width: 100vw;
}

.drawer.drawer-fullpage .drawer-body {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 32px 60px;
}

.drawer.drawer-fullpage .form-grid,
.drawer.drawer-fullpage .doc-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Att göra (todo) ---------- */

.todo-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.todo-item:hover {
  border-color: var(--accent);
}

.todo-item-done {
  opacity: 0.6;
}

.todo-content {
  flex: 1;
  min-width: 0;
}

.todo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.todo-title {
  font-weight: 600;
  font-size: 13.5px;
}

.todo-item-done .todo-title {
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

.todo-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.todo-date-overdue {
  color: var(--status-ejaktuell-fg);
  font-weight: 700;
}

.todo-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.todo-item .icon-btn-ghost {
  opacity: 0;
  margin-top: 2px;
}

.todo-item:hover .icon-btn-ghost {
  opacity: 1;
}

/* ---------- Förlopp: spara-rad ---------- */

.progress-save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Offert & Avtal: gemensam byggare ---------- */

.doc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.doc-list-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
}

.doc-list-empty {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-faint);
}

.inline-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.doc-status-mini {
  padding: 2px 8px;
}

.doc-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.doc-builder-head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
}

.doc-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doc-id-input {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 130px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

.doc-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.article-picker {
  position: relative;
  margin-bottom: 16px;
}

.article-picker input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.article-picker-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(30, 42, 50, 0.16);
  z-index: 20;
}

.article-picker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
}

.article-picker-item:last-child {
  border-bottom: none;
}

.article-picker-item:hover {
  background: var(--accent-soft);
}

.article-picker-name {
  font-size: 13px;
  font-weight: 600;
}

.article-picker-meta {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.article-picker-empty {
  padding: 12px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.doc-rows-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.doc-rows-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.doc-rows-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  padding: 9px 10px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}

.doc-rows-table th.num,
.doc-rows-table td.num {
  text-align: right;
}

.doc-rows-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13px;
}

.doc-rows-table tr:last-child td {
  border-bottom: none;
}

.doc-row-name {
  font-weight: 600;
}

.doc-row-artnr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.doc-row-total {
  font-weight: 700;
  white-space: nowrap;
}

.doc-row-excluded {
  opacity: 0.55;
}

.doc-row-excluded .doc-row-total {
  font-weight: 400;
}

.row-input {
  width: 68px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  text-align: right;
  font-size: 12.5px;
}

.doc-rows-empty {
  text-align: center;
  padding: 20px;
  color: var(--ink-faint);
  font-size: 13px;
  margin: 0;
}

.doc-totals {
  max-width: 280px;
  margin-left: auto;
  margin-bottom: 18px;
}

.doc-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.doc-totals-grand {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.doc-totals-momsnote {
  margin: 4px 4px 0;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: right;
}

.doc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.doc-actions-left,
.doc-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.doc-status-draft {
  background: var(--status-lead-bg);
  color: var(--status-lead-fg);
}

.doc-status-sent {
  background: var(--status-prospekt-bg);
  color: var(--status-prospekt-fg);
}

.doc-status-done {
  background: var(--status-kund-bg);
  color: var(--status-kund-fg);
}

.doc-status-paused {
  background: var(--status-avslutad-bg);
  color: var(--status-avslutad-fg);
}

.doc-status-lost {
  background: var(--status-ejaktuell-bg);
  color: var(--status-ejaktuell-fg);
}

/* ---------- Horisontellt statusflow (offertkortet) ---------- */

.status-flow {
  display: flex;
  align-items: center;
  padding: 14px 24px 0;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.status-flow-step {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.status-flow-step:hover {
  border-color: var(--border-strong);
}

.status-flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

.status-flow-line {
  width: 16px;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.status-flow-step.status-flow-active {
  border-color: currentColor;
}

.status-flow-step.status-flow-active .status-flow-dot {
  background: currentColor;
}

.status-flow-step[data-flow-status="utkast"].status-flow-active {
  background: var(--status-lead-bg);
  color: var(--status-lead-fg);
}

.status-flow-step[data-flow-status="skickad"].status-flow-active {
  background: var(--status-prospekt-bg);
  color: var(--status-prospekt-fg);
}

.status-flow-step[data-flow-status="pausad"].status-flow-active {
  background: var(--status-avslutad-bg);
  color: var(--status-avslutad-fg);
}

.status-flow-step[data-flow-status="forlorad"].status-flow-active {
  background: var(--status-ejaktuell-bg);
  color: var(--status-ejaktuell-fg);
}

.status-flow-step[data-flow-status="vunnen"].status-flow-active {
  background: var(--status-kund-bg);
  color: var(--status-kund-fg);
}

.status-flow-step[data-flow-status="kommande"].status-flow-active {
  background: var(--status-prospekt-bg);
  color: var(--status-prospekt-fg);
}

.status-flow-step[data-flow-status="signerat"].status-flow-active {
  background: var(--status-lead-bg);
  color: var(--status-lead-fg);
}

.status-flow-step[data-flow-status="aktivt"].status-flow-active {
  background: var(--status-kund-bg);
  color: var(--status-kund-fg);
}

.status-flow-step[data-flow-status="avslutat"].status-flow-active {
  background: var(--status-avslutad-bg);
  color: var(--status-avslutad-fg);
}

.field-with-add {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-with-add select {
  flex: 1;
  min-width: 0;
}

/* ---------- Adminvyer (Anställda / Artikelregister) ---------- */

.admin-panel-head {
  margin-bottom: 18px;
}

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}

.link-back svg {
  width: 16px;
  height: 16px;
}

.link-back:hover {
  color: var(--accent-dark);
}

.admin-panel-head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.admin-panel-add,
.admin-panel-print {
  display: inline-flex;
  margin-top: 12px;
}

.admin-panel-add-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* "Skriv ut"/"Exportera CSV" i den här raden har .btn-sm (mindre padding/
   typsnitt), medan "+ Lägg till ..." inte har det - gav olika knapphöjd i
   samma rad. Normalisera storleken inom raden, oavsett .btn-sm. */
.admin-panel-add-row .btn {
  padding: 9px 16px;
  font-size: 14px;
}

/* ---------- Popup-formulär (Anställda/Artikelregister/Återförsäljare) ---------- */

.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 33, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}

.modal-dialog {
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.modal-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-dialog-head h3 {
  margin: 0;
}

/* ---------- Skicka mejl (offert/avtal + PDF-bilaga) ---------- */

#sendEmailModal .modal-dialog {
  max-width: 560px;
}

#sendEmailForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

#sendEmailForm textarea {
  resize: vertical;
  font-family: var(--font-body);
}

.send-email-attachment-note {
  margin: -6px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.send-email-hint {
  margin: -4px 0 0;
  font-size: 13px;
  color: var(--status-ejaktuell-fg);
  font-weight: 600;
}

.send-email-hint.send-email-hint-progress {
  color: var(--ink-faint);
}

/* ---------- Priskalkylator ---------- */

.calc-dialog {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.calc-field-wide {
  grid-column: 1 / -1;
}

.calc-hint {
  margin: -8px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.calc-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}

.calc-result-label {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
}

.calc-result-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.calc-result-sub {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.admin-panel-sub {
  margin: 0;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.admin-search {
  margin-top: 14px;
  max-width: 320px;
}

.admin-search input {
  width: 100%;
}

.admin-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.admin-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 84px;
}

.admin-form h3 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.admin-form .field input:not([type="checkbox"]),
.admin-form .field select {
  width: 100%;
}

.field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field-checkbox input {
  width: 16px;
  height: 16px;
}

.admin-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.admin-form-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ---------- Företagsuppgifter (fristående formulär, ej sidopanel) ---------- */

.company-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  max-width: 760px;
  position: static;
}

.company-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.settings-section-title,
.form-section-title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-section-title:not(:first-child),
.form-section-title:not(:first-child) {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.form-section-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 18px 0 0;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-section-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.form-section-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.form-section-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
}

.company-form-actions .btn {
  flex: none;
  padding: 10px 22px;
}

/* ---------- Utskriftsyta (dold i vanligt läge) ---------- */

#printArea {
  display: none;
}

/* ---------- Medarbetarväxlare (header) ---------- */

.user-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  height: 40px;
}

.icon-user {
  width: 17px;
  height: 17px;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.whoami-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
}

.whoami-signout {
  border: none;
  background: transparent;
  padding: 0;
  margin-left: 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-faint);
  cursor: pointer;
  text-decoration: underline;
}

.whoami-signout:hover {
  color: var(--accent);
}

/* ---------- Uppgiftswidget: filterrad ---------- */

.task-widget-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.filter-select-sm {
  /* 8px lodrätt (inte 6px) - matchar .field-inline input och ligger nära
     .btn:s 9px, så dropdownen inte blir kortare än knapparna/fälten bredvid
     i samma rad (upptäckt 2026-08-24 på Systemuppdateringars kategorifilter,
     men samma klass används även av Uppgifter-sidans filter). */
  padding: 10px 24px 10px 10px;
  font-size: 12.5px;
}

.task-widget-full {
  flex: none;
}

/* ---------- Att göra: ansvarig ---------- */

.todo-assignee {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-dark);
}

/* ---------- Kundkortets resize-handtag ---------- */

.drawer-resize-handle {
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none;
}

.drawer-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 4px;
  height: 44px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background var(--transition-fast);
}

.drawer-resize-handle:hover::after {
  background: var(--accent);
}

.drawer.drawer-fullpage .drawer-resize-handle {
  display: none;
}

body.is-resizing-drawer {
  cursor: ew-resize;
  user-select: none;
}

body.is-resizing-drawer .drawer-resize-handle::after {
  background: var(--accent);
}

/* ---------- Redigerbart textfält i offert-/avtalsrader ---------- */

.row-input-text {
  width: 56px;
  text-align: left;
}

/* ---------- E-signeringsbox (avtal) ---------- */

.esign-box {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.esign-box-spaced {
  margin-top: 12px;
}

.esign-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.esign-box-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
}

.esign-box-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.esign-box-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.esign-date {
  font-size: 12px;
  color: var(--ink-soft);
}

.esign-signature-img {
  display: block;
  max-width: 260px;
  max-height: 120px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.esign-party {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.esign-party-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.esign-party-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.esign-party-namn {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink);
}

.esign-pad-canvas {
  width: 100%;
  height: 180px;
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
  display: block;
  margin: 10px 0;
}

/* ---------- Stock-diagram: notis + exkluderad stapel ---------- */

.stock-chart-note {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.stock-bar-col-excluded {
  opacity: 0.55;
}

/* ---------- Dokument-flik ---------- */

.document-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.document-upload input[type="file"] {
  font-size: 12.5px;
  max-width: 220px;
}

.document-hint {
  min-height: 16px;
  font-size: 12.5px;
  color: var(--status-kund-fg);
  font-weight: 600;
  margin: 0 0 14px;
}

.document-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.document-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.document-icon {
  width: 20px;
  height: 20px;
  color: var(--accent-dark);
  flex-shrink: 0;
}

.document-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.document-name {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-name:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.document-name:disabled {
  cursor: wait;
  opacity: 0.6;
}

.document-name:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.document-sub {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.document-import-box {
  padding-top: 18px;
  border-top: 1px dashed var(--border-strong);
}

.document-import-box h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}

.panel-intro-sub {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.document-import-box input[type="file"] {
  font-size: 12.5px;
}

/* ---------- Responsivt ---------- */

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .nav-toggle {
    display: inline-flex;
  }
  .sidenav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-card);
    z-index: 25;
    padding-top: 84px;
  }
  .sidenav.open {
    transform: translateX(0);
  }
  .sidenav-collapse-toggle {
    display: none;
  }
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .topbar-tools {
    justify-content: stretch;
  }
  .search-box input {
    width: 100%;
  }
  .global-search {
    order: -1;
    width: 100%;
  }
  .global-search input,
  .global-search input:focus {
    width: 100%;
  }
  .global-search-results {
    width: 100%;
  }
  .index-rail {
    display: none;
  }
  .settings-index {
    display: none;
  }
  .list-panel {
    padding: 16px;
  }
  .col-place {
    display: none;
  }
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-form {
    position: static;
  }
  .dashboard-row {
    flex-direction: column;
  }
  .dashboard-charts {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .drawer {
    width: 100vw;
  }
  .form-grid,
  .inline-form-grid,
  .doc-meta-grid {
    grid-template-columns: 1fr;
  }
  .company-form {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reducerad rörelse ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Utskrift ---------- */

@media print {
  body * {
    visibility: hidden;
  }
  #printArea, #printArea * {
    visibility: visible;
  }
  #printArea {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .print-doc {
    padding: 20mm 16mm;
    font-family: var(--font-body);
    color: #1a1a1a;
  }

  .print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 14px;
    margin-bottom: 20px;
  }

  .print-brand {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-dark);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }

  .print-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
  }

  .print-period {
    margin: -8px 0 16px;
    font-size: 13px;
    color: #555;
  }

  .print-meta {
    text-align: right;
  }

  .print-meta-item {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .print-meta-item span {
    color: #666;
    margin-right: 6px;
  }

  .print-parties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }

  .print-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin: 0 0 4px;
  }

  .print-parties p, .print-villkor p {
    margin: 0 0 2px;
    font-size: 12.5px;
  }

  .print-strong {
    font-weight: 700 !important;
    font-size: 14px !important;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }

  .print-table th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    padding: 8px 6px;
    border-bottom: 1.5px solid #333;
  }

  .print-table th.num, .print-table td.num {
    text-align: right;
  }

  .print-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #ddd;
    font-size: 12.5px;
  }

  .print-artnr {
    font-size: 10.5px;
    color: #888;
  }

  .print-row-excluded td {
    font-size: 10.5px;
    color: #777;
    font-style: italic;
  }

  .print-row-excluded .print-artnr {
    font-size: 9.5px;
  }

  .print-excluded-tag {
    font-style: normal;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .print-excluded-note {
    font-size: 10.5px;
    color: #888;
    font-style: italic;
    margin: -8px 0 12px;
  }

  .print-moms-note {
    font-size: 10.5px;
    color: #888;
    margin-top: 10px;
  }

  .print-totals {
    max-width: 280px;
    margin-left: auto;
  }

  .print-totals div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12.5px;
  }

  .print-grand {
    border-top: 1.5px solid #333;
    margin-top: 4px;
    padding-top: 8px !important;
    font-weight: 700;
    font-size: 14px !important;
  }

  .print-villkor {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid #ddd;
  }

  @page {
    margin: 0;
  }
}