/* BeeSimpl designsystem (från design_spec.dart).
   Tokens som CSS-variabler, som sedan matas in i Bootstraps egna variabler. */

/* ---------- Tokens (ljust läge) ---------- */
:root {
  --bg: #F1F5F9;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --border-focus: #3B82F6;
  --border-error: #EF4444;
  --fill: #F8FAFC;
  --fill-disabled: #F1F5F9;
  --divider: #F1F5F9;
  --text: #1E293B;
  --label: #64748B;
  --subtle: #94A3B8;
  --primary: #3B82F6;
  --primary-dark: #2563EB;
  --primary-light: #60A5FA;

  --green-bg: #F0FDF4;
  --green-border: #BBF7D0;
  --green-text: #16A34A;
  --red-bg: #FEF2F2;
  --red-border: #FECACA;
  --red-text: #EF4444;
  --blue-bg: #EFF6FF;
  --blue-border: #BFDBFE;
  --blue-text: #3B82F6;

  --tag-1: #3B82F6;
  --tag-2: #EF4444;
  --tag-3: #10B981;
  --tag-4: #F59E0B;
  --tag-5: #8B5CF6;
  --tag-6: #EC4899;
  --tag-7: #06B6D4;
  --tag-8: #F97316;

  /* Statuspiller */
  --status-aktiv-bg: #DCFCE7;
  --status-aktiv-text: #166534;
  --status-inaktiv-bg: #F1F5F9;
  --status-inaktiv-text: #475569;
  --status-utgaende-bg: #FFEDD5;
  --status-utgaende-text: #9A3412;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, .03);
  --shadow-btn: 0 2px 8px rgba(59, 130, 246, .3);
  --gradient-primary: linear-gradient(135deg, #3B82F6, #2563EB);
  --gradient-primary-hover: linear-gradient(135deg, #60A5FA, #3B82F6);

  /* Radier */
  --radius-card: 14px;
  --radius-input: 9px;
  --radius-btn: 10px;
  --radius-icon-btn: 8px;
  --radius-chip: 6px;
  --radius-tag: 20px;

  /* Mått */
  --topbar-h: 64px;
  --nav-w: 260px;

  /* Sidomeny */
  --nav-bg: #1E3557;
  --nav-group-bg: #172A47;
  --nav-line: rgba(255, 255, 255, .06);
  --nav-text: #E2E8F0;
  --nav-subtext: #CBD5E1;
  --nav-icon: #94A3B8;
  --nav-icon-active: #60A5FA;
  --nav-active-bg: rgba(96, 165, 250, .18);

  /* Typografi */
  /* Systemets typsnitt: Segoe UI (Windows), San Francisco (Mac/iPhone), Roboto (Android). */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-topbar: 16px;
  --fs-section: 13px;
  --fs-label: 12px;
  --fs-input: 13px;
  --fs-th: 11px;
}

/* Mörkt läge: tokens förberedda, aktivering beslutas senare.
   Slås på med data-tema="auto" (följer systemet) eller data-tema="morkt" på <html>. */
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --bg: #0F172A; --surface: #1E293B; --border: #334155; --fill: #0F172A; --fill-disabled: #1E293B;
    --divider: #273449; --text: #F1F5F9; --label: #94A3B8; --subtle: #64748B;
    --green-bg: #052E16; --green-border: #166534; --green-text: #4ADE80;
    --red-bg: #450A0A; --red-border: #7F1D1D; --red-text: #F87171;
    --blue-bg: #172554; --blue-border: #1E40AF; --blue-text: #60A5FA;
    --status-aktiv-bg: #052E16; --status-aktiv-text: #86EFAC;
    --status-inaktiv-bg: #273449; --status-inaktiv-text: #CBD5E1;
    --status-utgaende-bg: #431407; --status-utgaende-text: #FDBA74;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .3);
    --nav-bg: #111C2E; --nav-group-bg: #0C1524;
    color-scheme: dark;
  }
}
:root[data-tema="morkt"] {
  --bg: #0F172A; --surface: #1E293B; --border: #334155; --fill: #0F172A; --fill-disabled: #1E293B;
  --divider: #273449; --text: #F1F5F9; --label: #94A3B8; --subtle: #64748B;
  --green-bg: #052E16; --green-border: #166534; --green-text: #4ADE80;
  --red-bg: #450A0A; --red-border: #7F1D1D; --red-text: #F87171;
  --blue-bg: #172554; --blue-border: #1E40AF; --blue-text: #60A5FA;
  --status-aktiv-bg: #052E16; --status-aktiv-text: #86EFAC;
  --status-inaktiv-bg: #273449; --status-inaktiv-text: #CBD5E1;
  --status-utgaende-bg: #431407; --status-utgaende-text: #FDBA74;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .3);
  --nav-bg: #111C2E; --nav-group-bg: #0C1524;
  color-scheme: dark;
}

/* ---------- Tokens → Bootstrap ---------- */
:root {
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 14px;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--label);
  --bs-tertiary-color: var(--subtle);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-input);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 59, 130, 246;
  --bs-danger: var(--red-text);
  --bs-danger-rgb: 239, 68, 68;
  --bs-success: var(--green-text);
  --bs-success-rgb: 22, 163, 74;
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 59, 130, 246;
  --bs-link-hover-color: var(--primary-dark);
  --bs-form-invalid-color: var(--border-error);
  --bs-form-invalid-border-color: var(--border-error);
  --bs-focus-ring-color: rgba(59, 130, 246, .2);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Ikoner (Lucide-sprite) ---------- */
.ikon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

/* ---------- Applayout ---------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-innehall { flex: 1; padding: 24px; }

.sidhuvud {
  position: sticky; top: 0; z-index: 1010;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.sidhuvud-titel { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.sidhuvud-titel h1 {
  margin: 0; font-size: var(--fs-topbar); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidhuvud-antal { color: var(--subtle); font-size: 13px; font-weight: 500; }
.sidhuvud-knappar { display: flex; align-items: center; gap: 8px; }

@media (max-width: 991.98px) {
  .sidhuvud { padding: 0 12px; }
  .app-innehall { padding: 16px; }
}

/* ---------- Debugremsa (DEBUG=true) ---------- */
/* Fast överst; sidhuvudet, sidomenyn och mobilmenyn flyttas ned lika mycket. */
.debug-remsa {
  position: fixed; inset: 0 0 auto 0; z-index: 1100; height: var(--debug-h);
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  background: repeating-linear-gradient(-45deg, #F59E0B 0 14px, #FBBF24 14px 28px);
  color: #1F2937; font-size: 12px; white-space: nowrap; overflow: hidden; pointer-events: none;
}
.debug-remsa strong { letter-spacing: .12em; }
.debug-remsa > span { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.debug-remsa { width: 100%; max-width: 100vw; box-sizing: border-box; contain: inline-size; }
/* Mobilen: bara DEBUG och API:ts adress, mindre och utan spärrning – remsan får aldrig göra sidan bredare. */
@media (max-width: 575.98px) {
  .debug-remsa { gap: 6px; padding: 0 8px; font-size: 11px; justify-content: flex-start; }
  .debug-remsa strong { letter-spacing: .06em; }
}
body.med-debug { --debug-h: 26px; padding-top: var(--debug-h); }
.med-debug .sidhuvud { top: var(--debug-h); }
.med-debug .app, .med-debug .login { min-height: calc(100dvh - var(--debug-h)); }
.med-debug .offcanvas { top: var(--debug-h); }
@media (max-width: 991.98px) { .med-debug .offcanvas-lg { top: var(--debug-h); } }
@media (min-width: 992px) { .med-debug .sidomeny { top: var(--debug-h); height: calc(100dvh - var(--debug-h)); } }

/* ---------- Sidomeny ---------- */
.sidomeny {
  --bs-offcanvas-width: var(--nav-w);
  --bs-offcanvas-bg: var(--nav-bg);
  --bs-offcanvas-color: var(--nav-text);
  display: flex; flex-direction: column;
  background: var(--nav-bg); color: var(--nav-text);
}
@media (min-width: 992px) {
  .sidomeny {
    width: var(--nav-w); flex-shrink: 0;
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    /* Bootstraps .offcanvas-lg sätter transparent !important på skrivbord. */
    background-color: var(--nav-bg) !important;
  }
}
.login-konton { width: 100%; max-width: 380px; margin: 0 auto; }
.login-konto-lista { margin: 0 0 4px; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .18); }
.login-konto { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.login-konto-val { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 12px 8px; border: 0; border-radius: var(--radius-btn); background: none; color: #fff; text-align: left; }
.login-konto-val:hover, .login-konto-val:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.login-konto-val::after { content: "›"; margin-left: auto; color: var(--nav-subtext); font-size: 22px; line-height: 1; }
.login-konto-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.login-konto-text strong, .login-konto-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-konto-text span { color: var(--nav-subtext); font-size: 13px; }
.login-konto .avatar { width: 36px; height: 36px; font-size: 15px; }
.login-konto .btn-close { filter: invert(1); opacity: .7; margin-right: 8px; }
.login-konton-fot { display: flex; justify-content: space-between; padding-top: 6px; }
.login-konton-fot .btn-link, [data-login-inte-du] .btn-link { color: var(--nav-subtext); text-decoration: none; font-weight: 500; font-size: 13px; }
.login-konton-fot .btn-link:hover, [data-login-inte-du] .btn-link:hover { color: #fff; text-decoration: underline; }
.passkey-forslag { position: fixed; right: 20px; bottom: 20px; z-index: 1080; width: min(400px, calc(100vw - 32px)); padding: 18px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); }
.passkey-forslag-ikon { display: inline-grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: var(--radius-btn); background: var(--blue-bg); color: var(--primary); }
@media (max-width: 575.98px) { .passkey-forslag { right: 16px; bottom: 16px; } }
.login-panel > .login-kod, .login-kod-fot { width: 100%; max-width: 380px; margin: 0 auto; }
.login-kod-fot { display: flex; justify-content: space-between; padding-top: 6px; }
.login-kod-fot .btn-link { color: var(--nav-subtext); text-decoration: none; font-weight: 500; font-size: 13px; padding-left: 0; padding-right: 0; }
.login-kod-fot .btn-link:hover { color: #fff; text-decoration: underline; }
.login-eller { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--subtle); font-size: 12px; }
.login-eller::before, .login-eller::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* Samma höjd som sidhuvudet, så att linjen under loggan går i linje med sidhuvudets. */
.sidomeny-logga { display: flex; align-items: center; flex-shrink: 0; height: var(--topbar-h); padding: 0 20px; background: var(--nav-group-bg); border-bottom: 1px solid var(--nav-line); }
.sidomeny-logga img { width: auto; max-width: 100%; height: 40px; object-fit: contain; object-position: left center; }  /* liggande: biet och BEESIMPL bredvid */
.sidomeny-logga:focus-visible { outline: 2px solid var(--nav-icon-active); outline-offset: -2px; }
.sidomeny-topp {
  display: flex; align-items: center; gap: 4px;
  min-height: 76px; padding: 10px 12px;
  background: var(--nav-group-bg);
  border-bottom: 1px solid var(--nav-line);
}
.sidomeny-konto {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 8px; border: 0; border-radius: var(--radius-btn);
  background: transparent; color: inherit; text-align: left;
}
.sidomeny-konto:hover { background: var(--nav-line); }
.sidomeny-konto:focus-visible { outline: 2px solid var(--nav-icon-active); outline-offset: 1px; }
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-btn);
  background: var(--gradient-primary); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: var(--shadow-btn);
}
.sidomeny-konto-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidomeny-namn { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Företagsnamnet får gå på två rader innan det kortas. */
.sidomeny-foretag {
  font-size: 12px; line-height: 1.35; color: var(--nav-icon);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidomeny-konto-pil { margin-left: auto; color: var(--nav-icon); }
.sidomeny-konto-meny { flex: 1; min-width: 0; display: flex; }
.sidomeny-konto-meny .dropdown-menu { min-width: 220px; }
.sidomeny-konto-meny .dropdown-item { display: flex; align-items: center; gap: 8px; }

.sidomeny-lista { flex: 1; overflow-y: auto; padding: 8px 0; }
.meny-lank {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 20px; border: 0; background: transparent;
  color: var(--nav-text); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none;
}
.meny-lank .ikon { color: var(--nav-icon); }
.meny-lank:hover { color: #fff; background: var(--nav-line); }
.meny-lank:focus-visible { outline: 2px solid var(--nav-icon-active); outline-offset: -2px; }
.meny-lank.aktiv { color: #fff; font-weight: 700; background: var(--nav-active-bg); }
.meny-lank.aktiv .ikon { color: var(--nav-icon-active); }

.meny-grupp:has(> .meny-grupp-knapp:not(.collapsed)) {
  background: var(--nav-group-bg);
  border-top: 1px solid var(--nav-line);
  border-bottom: 1px solid var(--nav-line);
}
.meny-grupp-knapp:not(.collapsed) .ikon,
.meny-grupp.har-aktiv > .meny-grupp-knapp .ikon { color: var(--nav-icon-active); }
.meny-pil { margin-left: auto; transition: transform .2s; }
.meny-grupp-knapp:not(.collapsed) .meny-pil { transform: rotate(180deg); }
/* Som i Flutter: grupper i fetstil, enkla menyval normal vikt. */
.meny-grupp-knapp { font-weight: 600; }
.meny-under { margin: 0; padding: 0 0 6px; }
.meny-underlank { padding: 8px 20px 8px 50px; font-size: 13px; font-weight: 400; color: var(--nav-subtext); }

.sidomeny-fot {
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px 8px; background: var(--nav-group-bg); border-top: 1px solid var(--nav-line);
}

/* ---------- Ikonknappar ---------- */
.ikonknapp {
  position: relative; display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-icon-btn);
  background: transparent; color: var(--label);
}
.ikonknapp:hover { background: var(--fill); color: var(--text); }
.ikonknapp:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.ikonknapp-nav { color: var(--nav-icon); }
.ikonknapp-nav:hover { background: var(--nav-line); color: #fff; }
.raknare {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--red-text); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
/* Platsen för en siffra som uppdateras (inkorgen): tar ingen plats i knappens grid. */
.raknare-plats { display: contents; }
.raknare-gul { background: #F59E0B; color: #1E293B; }
/* Något nytt sedan klockan öppnades senast. */
.raknare-ny { box-shadow: 0 0 0 2px var(--nav-bg), 0 0 0 4px rgba(239, 68, 68, .45); }

/* ---------- Knappar ---------- */
.btn {
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 9px;
  --bs-btn-border-radius: var(--radius-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary {
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--gradient-primary-hover); }
.btn-primary:active { background: var(--gradient-primary); }
.btn-light {
  --bs-btn-bg: var(--surface);
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--fill);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: var(--divider);
  --bs-btn-active-border-color: var(--border);
}
.btn-danger {
  --bs-btn-bg: var(--red-text);
  --bs-btn-border-color: var(--red-text);
  --bs-btn-hover-bg: #DC2626;
  --bs-btn-hover-border-color: #DC2626;
}

/* ---------- Kort ---------- */
.bs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.bs-card + .bs-card { margin-top: 16px; }
.bs-section-label {
  margin: 0 0 14px; font-size: var(--fs-section); font-weight: 700; color: var(--text);
}

/* ---------- Formulär ---------- */
.form-label {
  margin-bottom: 6px; font-size: var(--fs-label); font-weight: 600; color: var(--label);
}
.kravs { color: var(--red-text); }
.form-control, .form-select {
  padding: 11px 12px;
  font-size: var(--fs-input);
  color: var(--text);
  background-color: var(--fill);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
}
.form-select { padding-right: 36px; }
.form-control::placeholder { color: var(--subtle); }
.form-control:focus, .form-select:focus {
  background-color: var(--surface);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 .5px var(--border-focus);
}
.form-control:disabled, .form-select:disabled, fieldset:disabled .form-control, fieldset:disabled .form-select {
  background-color: var(--fill-disabled);
  color: var(--label);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--border-error); background-image: none; padding-right: 12px; }
.form-select.is-invalid { padding-right: 36px; background-image: var(--bs-form-select-bg-img); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 .5px var(--border-error); }
.invalid-feedback { display: block; margin-top: 4px; font-size: 12px; color: var(--border-error); }
.form-text { margin-top: 4px; font-size: 12px; color: var(--subtle); }

/* Sökfält: samma stil med sökikon 18 px. */
.sokfalt { position: relative; }
.sokfalt > .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.sokfalt > .form-control { padding-left: 38px; }

/* Banner för fel utan fält */
.bs-banner {
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid; border-radius: var(--radius-input); font-size: 13px;
}
.bs-banner-fel { background: var(--red-bg); border-color: var(--red-border); color: var(--red-text); }
.bs-banner-info { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text); }
.bs-banner-varning { background: var(--status-utgaende-bg); border-color: #FED7AA; color: var(--status-utgaende-text); }
.bs-banner-ok { background: var(--green-bg); border-color: var(--green-border); color: var(--green-text); }

/* Flik med fel får röd prick (selektorerna genereras per flik i ui/redigera.html). */
.nav-link.har-fel::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: var(--red-text); vertical-align: middle;
}

/* ---------- Chips, taggar och statuspiller ---------- */
.bs-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-chip);
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 500;
}
.bs-chip.vald { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text); }
.bs-tagg {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--radius-tag); background: var(--blue-bg); color: var(--blue-text);
  font-size: 11px; font-weight: 600;
}
.status-pill {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-tag); font-size: 12px; font-weight: 600;
  background: var(--status-inaktiv-bg); color: var(--status-inaktiv-text);
}
.status-pill.aktiv { background: var(--status-aktiv-bg); color: var(--status-aktiv-text); }
.status-pill.inaktiv { background: var(--status-inaktiv-bg); color: var(--status-inaktiv-text); }
.status-pill.utgaende { background: var(--status-utgaende-bg); color: var(--status-utgaende-text); }

/* ---------- Tabell ---------- */
.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--divider);
  --bs-table-hover-bg: var(--fill);
  font-size: 13px;
}
.table > thead th {
  font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--subtle); border-bottom-color: var(--border);
}

/* ---------- Listvy ----------
   Listan är en helsida, inte ett kort: band för verktygsrad och aktiva filter, tabell över full
   bredd och sidfot. På skrivbord ligger filterpanelen som en egen kolumn till höger med full höjd. */
.app-innehall-lista { padding: 0; }
.lista { display: flex; flex-direction: column; }
.lista-filter { display: contents; }

.verktygsrad {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px; background: var(--surface);
}
.verktygsrad .sokfalt { flex: 1; max-width: 460px; }
.verktygsrad-hoger { display: flex; gap: 8px; margin-left: auto; }
.filterknapp { position: relative; padding-top: 10px; padding-bottom: 10px; }
.filterantal {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
}
.filterknapp.d-lg-none .filterantal { position: absolute; top: -6px; right: -6px; }
.ikonknapp-ram { width: 38px; height: 38px; background: var(--surface); border-color: var(--border); }
.ikonknapp-ram:hover { background: var(--fill); }
.ikonknapp-primar { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-btn); }
.ikonknapp-primar:hover { background: var(--gradient-primary-hover); color: #fff; }

@media (min-width: 992px) {
  .app-innehall-lista { background: var(--surface); }
  .lista {
    display: grid; min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h));
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "verktyg" "rader";
  }
  .lista.filter-oppen {
    /* Luft mellan raderna och filterpanelen. */
    column-gap: 24px;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "verktyg panel" "rader panel";
  }
  .verktygsrad { grid-area: verktyg; }
  .lista-rader { grid-area: rader; min-width: 0; align-self: start; }
  .lista:not(.filter-oppen) .filterpanel { display: none !important; }
  .lista .filterpanel {
    grid-area: panel; align-self: start;
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h));
    display: flex; flex-direction: column;
    /* .offcanvas-lg sätter transparent !important på skrivbord. */
    background-color: var(--surface) !important; border-left: 1px solid var(--border);
  }
  .filter-oppen .filterknapp[data-filterpanel-vaxla] {
    background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text);
  }
  .filtergrupp-sort { display: none; }
}
.filterpanel { --bs-offcanvas-height: auto; --bs-offcanvas-bg: var(--surface); }
.filterpanel-huvud {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 67px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border);
}
.filterpanel-titel { margin: 0; font-size: 15px; font-weight: 700; }
.filterpanel-kropp { flex: 1; overflow-y: auto; }
@media (max-width: 991.98px) {
  .verktygsrad { padding: 12px 16px; }
  .filterpanel {
    max-height: 85vh; max-height: 85dvh;
    border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card);
  }
  .filterpanel-fot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--divider); }
}

/* Grupper som fälls ut och ihop, som i Flutter. */
.filtergrupp { border-bottom: 1px solid var(--divider); }
.filtergrupp:last-child { border-bottom: 0; }
.filtergrupp-knapp {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 14px 16px 14px 18px; border: 0; background: none;
  color: var(--text); font-size: 13px; font-weight: 700; text-align: left;
}
.filtergrupp-knapp:hover { background: var(--fill); }
.filtergrupp-knapp:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.filtergrupp-pil { margin-left: auto; color: var(--blue-text); transition: transform .2s; }
.filtergrupp-knapp.collapsed .filtergrupp-pil { transform: rotate(180deg); color: var(--subtle); }
.filtergrupp-innehall { padding: 0 8px 10px; }
.filtergrupp-innehall > .form-select { margin: 0 10px; width: calc(100% - 20px); }
.filterval {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 9px 10px; border-radius: var(--radius-icon-btn);
  font-size: 13px; color: var(--text); cursor: pointer;
}
.filterval:hover { background: var(--fill); }
.filterval .form-check-input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.filterval .form-switch .form-check-input { width: 34px; }
.filterval:has(.form-check-input:checked:not([role="switch"])) { color: var(--blue-text); font-weight: 600; }
/* Genvägar i verktygsraden */
.genvagar { min-width: 220px; padding: 6px; border-color: var(--border); border-radius: var(--radius-btn); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.genvagar .dropdown-header { padding: 6px 10px 8px; font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--label); }
.genvagar .dropdown-item { padding: 8px 10px; border-radius: var(--radius-icon-btn); font-size: 13px; }
.genvagar .dropdown-item:active { background: var(--blue-bg); color: var(--blue-text); }

/* Kolumnval i verktygsraden */
.kolumnval { min-width: 240px; padding: 6px; border-color: var(--border); border-radius: var(--radius-btn); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.kolumnval .dropdown-header { padding: 6px 10px 8px; font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--label); }
.filterval-last { color: var(--label); cursor: default; }
.filterval-last:hover { background: none; }
.filtergrupp-sokfalt { margin: 8px 2px 8px; }
.filtergrupp-sokfalt .form-control { padding-top: 8px; padding-bottom: 8px; }
.filterval[hidden] { display: none; }
/* "Rensa" under gruppen, bara när något är ikryssat i den. */
.filtergrupp-rensa { display: block; margin: 2px 10px 0 auto; --bs-btn-padding-x: 0; --bs-btn-padding-y: 2px; --bs-btn-font-size: 12px; --bs-btn-font-weight: 600; text-decoration: none; }
.filtergrupp-innehall:not(:has(.filterval input[type=checkbox]:checked)) .filtergrupp-rensa { display: none; }
.filterantal[hidden] { display: none; }
.filterval-avdelare { margin: 6px 10px; border-color: var(--border); opacity: 1; }
.filterval-text { display: inline-flex; align-items: center; gap: 8px; }
/* Teckenförklaring till radfärgen. */
.statusprick {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rad, var(--subtle)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rad, var(--subtle)) 18%, transparent);
}
.filterval-tom { margin: 0; padding: 4px 10px 8px; color: var(--subtle); font-size: 13px; }

/* Aktiva filter: eget band under verktygsraden. */
.aktiva-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 24px 14px; background: var(--surface);
}
.aktiva-filter .bs-chip { cursor: pointer; font-weight: 600; }
.aktiva-filter .bs-chip:hover { border-color: var(--blue-text); }
.rensa-alla { --bs-btn-padding-x: 6px; --bs-btn-padding-y: 4px; --bs-btn-font-size: 12px; --bs-btn-font-weight: 600; text-decoration: none; }
@media (max-width: 991.98px) {
  .aktiva-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 16px; }
  .aktiva-filter > * { flex-shrink: 0; }
}

/* Markeringsrad ersätter verktygsraden när rader är valda. */
.markeringsrad {
  display: none; align-items: center; gap: 8px; padding: 10px 24px;
  background: var(--primary); color: #fff; font-size: 13px;
}
.markeringsrad .btn-link { color: #fff; }
.markeringsrad .markeringsrad-stang { color: #fff; }
@media (max-width: 991.98px) { .markeringsrad { padding: 10px 16px; } }
.lista:has(.rad-val:checked) .verktygsrad { display: none; }
.lista:has(.rad-val:checked) .markeringsrad { display: flex; }
/* Valda rader syns tydligt: blå bakgrund (Bootstraps tillståndsfärg, går före hovring och radfärgen) och blå kant. */
.lista-tabell tbody tr:has(.rad-val:checked) > * { --bs-table-bg-state: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.lista-tabell tbody tr:has(.rad-val:checked) > td:first-child { border-left: 4px solid var(--primary) !important; }
.kortrad:has(.kortrad-val:checked) { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.markering-summa { font-variant-numeric: tabular-nums; }

/* Tabell över full bredd */
.lista-rader { transition: opacity .15s; }
.lista-rader.htmx-request { opacity: .55; }
/* Samma marginal som sökrutan i verktygsraden (24 px), så att raderna linjerar med den. */
.lista-tabell { overflow-x: auto; margin: 0 24px; background: var(--surface); }
.lista-tabell .table { --bs-table-border-color: var(--border); }
.lista-tabell .table > :not(caption) > * > * { padding: 14px 16px; }
.lista-tabell thead th {
  white-space: nowrap; background: var(--fill);
  font-size: var(--fs-th); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label);
}
.lista-tabell tbody td { color: var(--label); }
.lista-tabell tbody td:first-child, .lista-tabell td.kol-flex, .lista-tabell td.kol-belopp { color: var(--text); }
.lista-tabell td.kol-flex, .lista-tabell td.kol-belopp { font-weight: 600; }
.lista-tabell tbody tr[data-href] { cursor: pointer; }
.kol-val { width: 52px; }
.kol-atgard { width: 60px; text-align: right; }
.kol-atgard-2 { width: 96px; }
.rad-borttagen > td, .kortrad.rad-borttagen { opacity: .55; }
/* Grupprubrik i en lista (ListConfig.grupp_falt), t.ex. ett mejl med sina filer. */
.lista-grupp > td { background: var(--fill); font-size: 12px; font-weight: 600; color: var(--label); padding-top: 8px; padding-bottom: 8px; }
.lista-grupp-kort { padding: 10px 4px 4px; font-size: 12px; font-weight: 600; color: var(--label); }
.rad-borttagen .rad-lank { text-decoration: line-through; }
.lista-tabell .table > :not(caption) > * > .kol-atgard { padding-top: 6px; padding-bottom: 6px; }
.rad-redigera { color: var(--subtle); }
.lista-tabell tbody tr:hover .rad-redigera { color: var(--primary); }
.rad-redigera:hover, .rad-redigera:focus-visible { background: var(--blue-bg); color: var(--primary); }
.kol-flex { width: auto; }
.rad-lank { color: var(--primary); font-weight: 600; text-decoration: none; }
.rad-lank:hover { color: var(--primary-dark); text-decoration: underline; }
.sortknapp {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.sortknapp:hover { color: var(--text); }
.sortpil { opacity: 0; }
.sortknapp:hover .sortpil { opacity: .5; }
th.sorterad .sortknapp { color: var(--text); }
th.sorterad .sortpil { opacity: 1; color: var(--text); }
.text-end .sortknapp { flex-direction: row-reverse; }

/* Sidfot */
.lista-sidfot { align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; }
.lista-sidfot-text { color: var(--label); font-size: 13px; }
.lista-sidfot-hoger { display: flex; align-items: center; gap: 16px; }
.sidbyte { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sidbyte .ikonknapp:disabled { opacity: .35; }
.sidknapp {
  min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent;
  border-radius: var(--radius-icon-btn); background: transparent; color: var(--label); font-size: 13px; font-weight: 500;
}
.sidknapp:hover { background: var(--fill); border-color: var(--border); color: var(--text); }
.sidknapp.aktiv { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text); font-weight: 700; }
.sidbyte-luck { padding: 0 4px; color: var(--subtle); }
.sidstorlek { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--label); font-size: 13px; }
.sidstorlek .form-select { width: auto; padding: 5px 30px 5px 10px; font-size: 13px; background-color: var(--surface); }

.lista-rader > .bs-empty { padding: 64px 16px; }

/* Mobil: rader som kort */
.lista-kort { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.kortrad {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.kortrad-lank {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border-radius: inherit; color: var(--text); text-decoration: none;
}
.kortrad-lank:active { background: color-mix(in srgb, var(--text) 4%, transparent); }
/* Prickmenyn uppe till höger; länken lämnar plats för den. */
.kortrad:has(.kortrad-meny) .kortrad-lank { padding-right: 44px; }
.kortrad-meny { position: absolute; top: 4px; right: 4px; }
.kortrad-meny .ikonknapp { color: var(--label); }
/* Markeringsläget: kryssruta till vänster, markerade kort får en ram. */
.kortrad-val { display: none; position: absolute; top: 50%; left: 14px; margin: -9px 0 0; width: 18px; height: 18px; }
.markeringslage .kortrad-val { display: block; }
.markeringslage .kortrad-lank { padding-left: 44px; }
.markeringslage .kortrad-meny { display: none; }
.kortrad:has(.kortrad-val:checked) { outline: 2px solid var(--primary); outline-offset: -1px; }
.markeringslage [data-markeringslage] { background: var(--blue-bg); color: var(--primary); border-color: var(--primary); }
.kortrad-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kortrad-titel { color: var(--primary); font-size: 12px; font-weight: 600; }
.kortrad-under { font-size: 14px; font-weight: 600; }
.kortrad-fot { display: flex; justify-content: space-between; gap: 8px; color: var(--label); font-size: 12px; }
.kortrad-belopp { color: var(--text); font-weight: 600; font-size: 13px; }
.ladda-fler { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px; color: var(--label); font-size: 13px; }

/* Status som bakgrundsfärg (ListConfig.radstatus): svag ton på raden och en färgad kant till vänster. */
[data-radfarg="aktiv"] { --rad: var(--green-text); }
[data-radfarg="inaktiv"] { --rad: var(--subtle); }
[data-radfarg="utgaende"] { --rad: #EA580C; }
.lista-tabell tr[data-radfarg] { --bs-table-bg: color-mix(in srgb, var(--rad) 9%, var(--surface)); }
.lista-tabell tr[data-radfarg] > td:first-child {
  box-shadow: inset 3px 0 0 var(--rad), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, transparent));
}
.kortrad[data-radfarg] {
  background: color-mix(in srgb, var(--rad) 9%, var(--surface));
  border-left: 3px solid var(--rad);
}

/* Kryssrutor och reglage */
.form-check-input { border-color: #CBD5E1; }
.form-switch .form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { font-size: 13px; cursor: pointer; }

/* Statuspiller med färg från API:t */
.status-pill[style*="--pill"] { background: color-mix(in srgb, var(--pill) 14%, transparent); color: var(--pill); }

/* ---------- Visningssida ----------
   Huvudspalt (statistik, flikar) och sidospalt (detaljer, taggar, bilder). */
/* Titeln krymper (…) först när undertiteln är slut; statusen (status-pill) krymper aldrig och hamnar inte under knapparna. */
.sidhuvud-undertitel { min-width: 0; flex-shrink: 1000; overflow: hidden; text-overflow: ellipsis; color: var(--label); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sidhuvud-titel h1 { flex-shrink: 1; min-width: 0; max-width: 100%; }
/* Smal skärm: titeln och statusen får platsen; undertiteln (t.ex. kunden) står även på sidan. */
@media (max-width: 575.98px) { .sidhuvud-undertitel { display: none; } }
.sidhuvud-titel .status-pill { align-self: center; flex-shrink: 0; }
.vy { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.vy-huvud, .vy-sida { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vy .bs-card + .bs-card { margin-top: 0; }
@media (max-width: 1199.98px) { .vy { grid-template-columns: 1fr; } }

.vy-pris { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }

.vy-pris-belopp { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.vy-fakta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13px; }
.vy-fakta dt { color: var(--label); font-weight: 500; }
.vy-fakta dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }  /* långa e-postadresser bryts i mobilen */
.vy-dim { color: var(--label); font-size: 13px; }
.vy-text { margin: 0 0 8px; font-size: 13px; white-space: pre-line; }
.vy-text:last-child { margin-bottom: 0; }
.vy-meta { margin: 0; padding: 0 4px; color: var(--subtle); font-size: 12px; line-height: 1.6; }
.vy-taggar { display: flex; flex-wrap: wrap; gap: 6px; }
.vy-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vy-bild { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--fill); }
.vy-bild img { width: 100%; height: 100%; object-fit: cover; }
.vy-lista { margin: 0; padding: 0; list-style: none; }
.vy-lista li { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--divider); font-size: 13px; }
.vy-lista li:last-child { border-bottom: 0; }
.vy-lista li .ikon { color: var(--label); }

.vy-spec { margin-bottom: 4px; }
.vy-seo { max-width: none; }
.vy-seo .seo-rubrik { font-size: 15px; }

/* Flikar på visningssidan */
.vy-flikar { padding-top: 6px; }
.vy-flikar .nav-underline { --bs-nav-underline-gap: 20px; --bs-nav-link-color: var(--label); --bs-nav-link-hover-color: var(--text); --bs-nav-underline-link-active-color: var(--text); margin-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.vy-flikar .nav-underline .nav-link { padding: 12px 0; }
.vy-flikar .nav-underline .nav-link.active { border-bottom-color: var(--primary); }
.flik-antal { margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--fill); color: var(--label); font-size: 11px; font-weight: 700; }
.nav-link.active .flik-antal { background: var(--blue-bg); color: var(--blue-text); }
/* Dolda rubriker (visually-hidden, position: absolute) i en rullbar tabell ska inte göra sidan bredare i mobilen. */
.table-responsive { position: relative; }
.vy-tabell { margin: 0; --bs-table-border-color: var(--divider); font-size: 13px; }
.vy-tabell > :not(caption) > * > * { padding: 11px 8px; }
.vy-tabell thead th { font-size: var(--fs-th); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.vy-rad-inaktiv td { color: var(--subtle); }

/* Statistik */
.nyckeltal.nyckeltal-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .nyckeltal.nyckeltal-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .nyckeltal.nyckeltal-4 { grid-template-columns: 1fr; } }
.nyckeltal-varning { border-color: var(--red-border); }
/* Lönen: fyra nyckeltal två och två i mobilen, i stället för fyra höga kort */
@media (max-width: 575.98px) { .nyckeltal.nyckeltal-4.nyckeltal-kompakt { grid-template-columns: 1fr 1fr; } .nyckeltal-kompakt .nyckeltal-varde { font-size: 16px; } }
.lon-manad { min-width: 120px; pointer-events: none; font-weight: 600; }
@media (max-width: 575.98px) { .lon-manad { min-width: 0; padding-inline: 8px; } }

/* Kunder: kort för kontaktpersoner och leveransadresser */
.kortlista { display: flex; flex-direction: column; gap: 8px; }
.kortlista:not(:has(.kortlista-post)) + .lista-tom { display: block; }
.kortlista-post { border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); }
.kortlista-post.is-invalid { border-color: var(--border-error); }
.kortlista-huvud { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; }
.kortlista-vaxla { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); text-align: left; }
.kortlista-pil { margin-left: auto; color: var(--subtle); transition: transform .2s; }
.kortlista-vaxla:not(.collapsed) .kortlista-pil { transform: rotate(180deg); }
.kortlista-falt { padding: 4px 14px 16px; margin: 0; border-top: 1px solid var(--divider); }
.kortlista-falt > [class^="col-"] { padding-top: 12px; }
.vy-kontakt { align-items: flex-start !important; }
.vy-kontakt .bs-chip { margin-left: 4px; padding: 1px 8px; font-size: 11px; }
.vy-kontakt .bs-tagg { margin-left: 4px; }
.vy-statistik { display: flex; flex-direction: column; gap: 16px; }
.nyckeltal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .nyckeltal { grid-template-columns: 1fr; } }
.nyckeltal-kort {
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.nyckeltal-etikett { color: var(--label); font-size: var(--fs-label); font-weight: 600; }
.nyckeltal-varde { font-size: 22px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.nyckeltal-varde small { color: var(--label); font-size: 13px; font-weight: 500; }
.nyckeltal-varde-liten { font-size: 18px; }
.nyckeltal-fot { color: var(--subtle); font-size: 12px; }
.andring { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.andring.upp { color: var(--green-text); }
.andring.ned { color: var(--red-text); }
.vy-statistik-rad { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.vy-statistik-rad > :only-child { grid-column: 1 / -1; }
@media (max-width: 991.98px) { .vy-statistik-rad { grid-template-columns: 1fr; } }
/* Två kort bredvid varandra (utrustningens största kunder och leverantörer). */
.vy-statistik-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vy-statistik-par > :only-child { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .vy-statistik-par { grid-template-columns: 1fr; } }
.faktura-belopp { width: 100px; margin-left: auto; text-align: right; }
/* Kopplade fakturor: skrollar i sidled i ett smalt kort (inte på mobilen, där åtgärderna är en meny som inte får klippas). */
@media (min-width: 576px) { .tabell-skroll { overflow-x: auto; } }
.koppla-tabell .valrad-kryss { width: 32px; }
/* Sökfältet och rubrikraden står kvar när listan skrollas (modalens body skrollar).
   --sticky-hojd är sökfältets höjd, satt av core.js (data-sticky-hojd). */
.koppla-kropp { padding-top: 0; }
.koppla-sok { position: sticky; top: 0; z-index: 3; padding: 16px 0 8px; background: var(--surface); }
.koppla-tabell { border-collapse: separate; border-spacing: 0; }
.koppla-tabell thead th { position: sticky; top: var(--sticky-hojd, 72px); z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.koppla-tabell tr.vald > td { background: var(--blue-bg); }
@media (max-width: 575.98px) {
  .koppla-tabell .faktura-belopp { width: 76px; }
  .koppla-tabell .koppla-namn { word-break: break-word; }
}
/* Orderns rader: en rubrikrad per dag. */
.order-rader .order-dag > th, .order-rader .order-dag > td { background: var(--fill); border-top: 1px solid var(--border); font-size: 13px; }
.order-rader .order-dag .btn-link { vertical-align: baseline; }
.order-rader .order-dag .dag-meny { width: 28px; height: 28px; margin: -6px -6px -6px 2px; vertical-align: middle; }
/* Slå samman: grupperaden före sina rader, som är indragna (order och fakturautkast). */
.order-rader tr.order-grupp > td, .faktura-rader tr.faktura-grupp > td { background: var(--fill); }
.order-rader tr.order-under .kol-namn, .faktura-rader tr.faktura-under .rad-namn { padding-left: 28px; position: relative; }
.order-rader tr.order-under .kol-namn::before, .faktura-rader tr.faktura-under .rad-namn::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; border-left: 2px solid var(--border);
}
/* Körjournal: kartan på körningen, summeringen ovanför listan och GPS-enhetens IMEI. */
.korning-karta { height: 320px; width: 100%; }
.korj-summa { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.korj-summa-post { display: flex; flex-direction: column; }
.korj-summa-post strong { font-size: 18px; }
.korj-imei { width: 220px; }
/* Inställningar → Leverantör: inkorgens adress. */
.inkorg-adress { max-width: 440px; flex: 1 1 260px; }
.inkorg-tagg { max-width: 220px; }
/* Kalkylens automation: välj källa för ett nytt värde, och mätarna. */
.auto-kallor { display: grid; gap: 8px; }
.auto-kalla { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); }
.auto-kalla:hover, .auto-kalla:focus-visible { border-color: var(--primary); background: var(--fill); }
.auto-matare { max-height: 320px; overflow-y: auto; }
.auto-matare-grupp + .auto-matare-grupp { margin-top: 8px; }
.auto-matare-rad { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; }
/* Varianter: stegvalet under produktvalet (core.js "Varianter"). */
.variantval { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-btn); background: var(--fill); }
.variantval:empty { display: none; }
.variantval-rubrik { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.variantval-steg { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.variantval-typ { min-width: 64px; font-size: 12.5px; color: var(--label); }
.variantval-knappar { display: flex; flex-wrap: wrap; gap: 6px; }
.variantval-klar { font-size: 13px; color: var(--text); }
/* Valläget (Slå samman): kryssrutorna först och listen med antal och knappar nertill. */
.valrad-kryss { width: 32px; }
.valjlage-list {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px -4px -4px; padding: 10px 4px; background: var(--surface); border-top: 1px solid var(--border);
}
.dag-rader .dag-antal { width: 90px; text-align: right; }
.dag-rader .dag-enhet { width: 56px; }
/* Mobil: namnet till vänster, antal och summa till höger (som i appen); pris och kolumnrubriker döljs. */
@media (max-width: 575.98px) {
  /* Mobil: tabellen blir rader som i appen. Namn (och artikelnr · användare) till vänster,
     antal i fetstil och summan under till höger. Dagsrubrik och summor är flexrader. */
  .order-rader, .order-rader tbody, .order-rader tfoot { display: block; width: 100%; }
  .order-rader thead, .order-rader .kol-pris { display: none; }
  .order-rader tr { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--border); }
  .order-rader tr > * { border: 0; padding: 10px 2px; background: none !important; box-shadow: none !important; }
  .order-rader tr > :first-child { flex: 1; min-width: 0; }
  .order-rader tr > :not(:first-child) { flex: none; white-space: nowrap; }
  .order-rader .order-dag > th, .order-rader .order-dag > td { border: 0; }  /* datorns kantlinje per cell */
  .order-rader tr.order-dag { align-items: center; margin-top: 8px; padding: 0 8px; border-radius: 8px; border-bottom: 0; background: var(--fill); }
  .order-rader tbody:first-child tr.order-dag { margin-top: 0; }
  .order-rader tbody tr:not(.order-dag) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 0 8px;
  }
  .order-rader .kol-namn { grid-row: 1 / span 2; padding: 12px 0; }
  .order-rader .rad-namn { font-weight: 600; color: var(--text); }
  .order-rader .rad-under { display: block; margin-top: 2px; color: var(--subtle); font-size: 12px; }
  .order-rader .kol-antal { grid-column: 2; padding: 12px 0 0; font-weight: 700; color: var(--text); }
  .order-rader .kol-summa { grid-column: 2; padding: 0 0 12px; font-size: 12px; color: var(--label); }
  .order-rader tbody tr:not(.order-dag) > td[colspan] { grid-column: 1 / -1; padding: 12px 0; }
  /* Valläget: kryssrutan är första cellen, namnet ska ändå ta platsen och brytas. */
  .order-valjlage .order-rader tr > .valrad-kryss { flex: none; }
  .order-valjlage .order-rader tr > .kol-namn { flex: 1 1 0; min-width: 0; white-space: normal; }
  .order-rader tfoot tr { padding: 0 8px; }
  .order-rader tfoot th[colspan] { font-size: 13px; }
}


/* Tabellrad som öppnar en modal (utrustningens tankningar, orderns rader). */
.rad-klickbar { cursor: pointer; }
.rad-klickbar:hover > td, .rad-klickbar:focus-visible > td { background: var(--fill); }
.dokument-uppladdning { display: flex; flex-wrap: wrap; gap: 8px; }
.dokument-uppladdning input[type="file"] { flex: 1 1 260px; }
.dokument-uppladdning .form-select { flex: 0 1 200px; }
.dokument-uppladdning input[type="text"] { flex: 1 1 200px; }
.topplista { margin: 0; padding-left: 18px; font-size: 13px; }
.topplista li { padding: 6px 0; }
.topplista li > span:first-child { margin-right: 8px; }
.topplista li { display: list-item; }
/* Beloppet till höger på sin rad, även när namnet bryts (float hamnade annars på nästa rad). */
.topplista li { position: relative; padding-right: 9.5em; }
.topplista li > span:last-child { position: absolute; right: 0; top: 6px; white-space: nowrap; }

/* Stapeldiagram: en serie, 4 px rundade toppar mot baslinjen, 2 px mellanrum, tooltip vid hover/fokus. */
.stapeldiagram { display: flex; align-items: stretch; gap: 2px; height: 180px; padding-top: 8px; }
.stapel-kolumn { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; outline: none; }
.stapel-yta { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--border); }
.stapel { width: 100%; max-width: 36px; margin: 0 auto; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--primary); transition: opacity .15s; }
.stapel.tom { background: var(--border); }
.stapel.negativ { background: var(--red-text); min-height: 3px; }  /* kreditfakturor större än försäljningen */
.stapeldiagram:hover .stapel { opacity: .45; }
.stapel-kolumn:hover .stapel { opacity: 1; }
.stapel-etikett { padding-top: 6px; color: var(--subtle); font-size: 11px; text-align: center; }
.stapel-tips {
  position: absolute; bottom: calc(100% - 20px); left: 50%; z-index: 5; transform: translateX(-50%);
  display: none; padding: 6px 10px; white-space: nowrap;
  background: var(--text); color: #fff; border-radius: var(--radius-icon-btn); font-size: 12px; pointer-events: none;
}
.stapel-kolumn:hover .stapel-tips { display: block; }

/* Kortrubrik med växlare till höger (diagrammets vyer, topplistans 12 mån / Totalt). */
.kort-rubrik { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kort-rubrik .bs-section-label { margin: 0; }
.diagram-summa { margin: 0 0 4px; color: var(--label); font-size: 13px; }
.diagram-summa strong { color: var(--text); }
.vaxlare { display: flex; gap: 2px; padding: 2px; max-width: 100%; overflow-x: auto; background: var(--fill); border: 1px solid var(--border); border-radius: var(--radius-icon-btn); scrollbar-width: thin; }
.vaxlare-val {
  flex: none; padding: 3px 10px; border: 0; border-radius: 6px; background: none;
  color: var(--label); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.vaxlare-val:hover { color: var(--text); }
.vaxlare-val.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

/* ---------- Redigeringssida ----------
   Flikband med ikoner under sidhuvudet, kort per avsnitt i flikarna. */
.app-innehall-redigera { padding: 0; }
.redigera-flikar {
  position: sticky; top: var(--topbar-h); z-index: 1005;
  background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto;
}
.redigera-flikar .nav { flex-wrap: nowrap; gap: 4px; padding: 0 16px; }
.redigera-flikar .nav-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 14px 9px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--label); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.redigera-flikar .nav-link:hover { color: var(--text); }
.redigera-flikar .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.redigera-flik-ikon { position: relative; display: inline-flex; }
.redigera-kropp { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; padding: 24px; }
.redigera-kropp > .bs-banner { margin: 0; }
.redigera-stack { display: flex; flex-direction: column; gap: 16px; }
.tab-pane > .bs-card + .bs-card { margin-top: 16px; }
@media (max-width: 991.98px) { .redigera-kropp { padding: 16px; } }

/* Hemsida */
.hemsida-topp { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 16px; align-items: start; }
@media (max-width: 991.98px) { .hemsida-topp { grid-template-columns: 1fr; } }
.seo-forhand {
  display: flex; flex-direction: column; gap: 2px; max-width: 600px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); font-family: Arial, sans-serif;
}
.seo-url { color: #188038; font-size: 12px; }
.seo-rubrik { color: #1a0dab; font-size: 18px; line-height: 1.3; }
.seo-text { color: #4d5156; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mediaval { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mediaval label {
  position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-btn); font-size: 12px; cursor: pointer;
}
.mediaval label:has(input:checked) { border-color: var(--primary); background: var(--blue-bg); }
.mediaval input { position: absolute; top: 12px; left: 12px; z-index: 1; }
.mediaval img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-icon-btn); background: var(--fill); }
.mediaval-fil { justify-content: center; align-items: center; min-height: 120px; padding-top: 28px !important; color: var(--label); }
.textredigerare { border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--fill); }
.textredigerare .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius-input) var(--radius-input) 0 0; background: var(--surface); font-family: var(--font); }
.textredigerare .ql-container.ql-snow { border: 0; font-family: var(--font); font-size: 14px; }
.textredigerare .ql-editor { min-height: 260px; }
.textredigerare .ql-editor.ql-blank::before { color: var(--subtle); font-style: normal; }
.teckenraknare { text-align: right; }

/* Dokument: bilder och dokument */
.dokument-kort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 991.98px) { .dokument-kort { grid-template-columns: 1fr; } }
.dokument-kort label.ikonknapp { cursor: pointer; color: var(--primary); }
.slappyta {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 28px 16px;
  border: 1px dashed var(--border); border-radius: var(--radius-btn); background: var(--fill);
  color: var(--label); font-size: 13px; text-align: center; cursor: pointer;
}
.slappyta .ikon { color: var(--subtle); }
.slappyta small { color: var(--subtle); font-size: 11px; }
.slappyta:hover, .slappyta.over { border-color: var(--primary); background: var(--blue-bg); color: var(--blue-text); }
.slappyta[hidden] { display: none; }
.dokument-kort .prislista + .slappyta, .bildrutnat + .slappyta { margin-top: 12px; }
.uppladdning-koe .prislista { margin-bottom: 10px; }
.uppladdning-knappar { display: flex; justify-content: flex-end; gap: 8px; }
.koe-falt { gap: 4px; }
.koe-kategori { width: auto; max-width: 180px; }
.bildrutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bildruta { position: relative; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden; background: var(--surface); }
.bildruta img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--fill); }
.bildruta figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: 12px; }
.bildruta-ta-bort { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; background: rgba(255, 255, 255, .92); color: var(--red-text); }
.bildruta-ta-bort:hover { background: var(--red-bg); color: var(--red-text); }
/* Taggar */
.fargval { display: flex; flex-wrap: wrap; gap: 8px; }
.fargval label { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin: 0;
  border-radius: 50%; background: var(--farg); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.fargval input { position: absolute; opacity: 0; }
.fargval label:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--farg, var(--label)); }
.fargval label:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 4px; }
.fargval .fargval-ingen { width: auto; padding: 0 12px; border-radius: 17px; background: var(--fill); color: var(--label); font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.tagg-sokfalt { max-width: 520px; margin-bottom: 8px; }
.tagg-traffar { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 4px; }
.tagg-markera-alla { border-bottom: 1px solid var(--divider); border-radius: 0; color: var(--label); }

/* Rabatter: trappsteg */
.villkor-rad { align-items: flex-start; }
.villkor-falt { display: flex; flex: 1; gap: 12px; }
.villkor-falt > div { flex: 1; padding: 0; }
.villkor-rad .prisrad-ikon, .villkor-rad .prisrad-ta-bort { margin-top: 26px; }

/* Spec: rubrik per specgrupp, rad per mall */
.spec-rubrik { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--text); }
#spec-lista > .spec-rubrik:first-child { margin-top: 0; }
.spec-rubrik:has(+ .spec-grupp:not(:has(li))), .spec-grupp:not(:has(li)) { display: none; }
.specrad { padding-top: 8px; padding-bottom: 8px; }
.specrad-namn { flex: 0 1 260px; min-width: 0; font-size: 13px; font-weight: 600; }
.specrad-varde { flex: 1; min-width: 0; color: var(--text); font-size: 13px; }
.specrad.redigerar .specrad-varde, .specrad.redigerar [data-specrad-redigera] { display: none; }
.specrad-redigerare { display: flex; flex: 1; align-items: center; gap: 4px; max-width: 420px; }
.specrad-redigerare .form-control, .specrad-redigerare .form-select { padding-top: 6px; padding-bottom: 6px; }
.spec-lagg-till { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--divider); }
.spec-lagg-till .spec-rubrik { margin-top: 0; }
.kort-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.prisrad .status-pill { flex-shrink: 0; }
.snabbval { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.snabbval .btn { --bs-btn-font-weight: 500; --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px; color: var(--label); }

/* Prislista */
.prislista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-btn); }
.prislista:not(:has(li)) { display: none; }
.lista-tom { display: none; margin: 0; color: var(--label); font-size: 13px; }
.prislista:not(:has(li)) + .lista-tom, .redigera-lista:not(:has(li)) + .lista-tom { display: block; }
.prisrad { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.prisrad:last-child { border-bottom: 0; }
.prisrad.is-invalid { background: var(--red-bg); }
.prisrad-ikon {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px;
  border-radius: var(--radius-icon-btn); background: var(--blue-bg); color: var(--blue-text);
}
.prisrad-period { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.prisrad-period small { color: var(--label); font-size: 12px; font-weight: 500; }
.prisrad-period .prisrad-fel { color: var(--red-text); }
.prisrad-pris {
  padding: 4px 10px; border: 1px solid var(--green-border); border-radius: var(--radius-icon-btn);
  background: var(--green-bg); color: var(--green-text); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.prisrad-ta-bort { color: var(--red-text); border-color: var(--red-border); }
.prisrad-ta-bort:hover { background: var(--red-bg); color: var(--red-text); }

.redigera-lista li { gap: 10px; }
.redigera-lagg-till { display: flex; gap: 8px; max-width: 560px; margin-top: 12px; }
.redigera-lagg-till > .form-control, .redigera-lagg-till > .form-select { flex: 1; min-width: 0; }
.redigera-lagg-till > .btn { flex-shrink: 0; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
.falt-checkbox { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10px; }
.flerval { padding: 2px 0; border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--surface); max-height: 420px; overflow-y: auto; }
.flerval.is-invalid { border-color: var(--border-error); }
.flerval .filtergrupp-sokfalt { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 8px 6px; background: var(--surface); }
.flerval .filtergrupp-sokfalt > .ikon { left: 20px; }

/* ---------- Register ----------
   Master-detail: registren till vänster, valt register till höger. */
.app-innehall-register { padding: 0; }
.register { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); }
.register-meny { padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--border); }
.register-grupp { margin: 12px 8px 6px; font-size: var(--fs-th); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.register-grupp:first-child { margin-top: 0; }
.register-val {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 10px;
  border-radius: var(--radius-icon-btn); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none;
}
.register-val .ikon { color: var(--subtle); }
.register-val:hover { background: var(--fill); }
.register-val.aktiv { background: var(--blue-bg); color: var(--blue-text); font-weight: 700; }
.register-val.aktiv .ikon { color: var(--blue-text); }
.register-detalj { min-width: 0; padding: 20px 24px; }
.register-verktyg { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.register-verktyg .sokfalt { flex: 1; max-width: 420px; }
.register-verktyg .sokfalt .form-control { background-color: var(--surface); }
.register-verktyg .btn { margin-left: auto; }
.register-tabell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.register-tabell .table > :not(caption) > * > * { padding: 12px 16px; }
.register-tabell thead th { background: var(--fill); font-size: var(--fs-th); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.register-tabell tbody tr:last-child td { border-bottom: 0; }
.register-rad { cursor: pointer; }
.register-tom-sok { margin: 0; padding: 16px; color: var(--label); font-size: 13px; }
.register-tabell > .bs-empty { padding: 48px 16px; }
@media (max-width: 991.98px) {
  .register { grid-template-columns: 1fr; }
  .register.har-valt .register-meny { display: none; }
  .register:not(.har-valt) .register-detalj { display: none; }
  .register-meny { border-right: 0; }
  .register-detalj { padding: 16px; }
}

/* ---------- Hjälp ----------
   Manualen (/hjalp) och hjälppanelen som ? i sidhuvudet öppnar. */
.manual { font-size: 14px; line-height: 1.6; color: var(--text); }
.manual h1 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.manual h2 { font-size: 17px; font-weight: 700; margin: 28px 0 8px; padding-top: 4px; }
.manual h3 { font-size: 14px; font-weight: 700; margin: 20px 0 6px; }
.manual h2, .manual h3 { scroll-margin-top: 16px; }
.manual p, .manual ul, .manual ol { margin: 0 0 12px; }
.manual li + li { margin-top: 4px; }
.manual code { padding: 1px 5px; border-radius: 4px; background: var(--fill); color: var(--text); font-size: 12.5px; }
.manual table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 13px; }
.manual th, .manual td { padding: 8px 10px; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
.manual th { background: var(--fill); font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--label); }
.manual blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--blue-border); border-radius: 0 var(--radius-icon-btn) var(--radius-icon-btn) 0; background: var(--blue-bg); color: var(--text); }
.manual blockquote p:last-child { margin: 0; }
.manual img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-btn); }
.manual a { color: var(--primary); }
.hjalp-markerad { animation: hjalp-markera 1.6s ease-out; border-radius: 6px; }
@keyframes hjalp-markera { from { background: var(--blue-bg); box-shadow: 0 0 0 6px var(--blue-bg); } to { background: transparent; box-shadow: 0 0 0 6px transparent; } }

.manual-start { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; }
.manual-sok { max-width: 560px; }
.manual-sok .form-control { background-color: var(--surface); padding-top: 13px; padding-bottom: 13px; font-size: 14px; }
.manual-innehall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.manual-innehall .bs-card + .bs-card { margin-top: 0; }
.manual-lankar { margin: 0; padding: 0; list-style: none; }
.manual-lankar a { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-icon-btn); color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; }
.manual-lankar a .ikon { color: var(--label); }
.manual-lankar a:hover { background: var(--fill); color: var(--primary); }
.manual-traffar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.manual-traffar a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; }
.manual-traffar a:hover { border-color: var(--primary); }
.manual-traffar span { color: var(--label); font-size: 12px; }
.manual-sida { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1200px; }
.manual-toc { position: sticky; top: calc(var(--topbar-h) + 16px); }
.manual-sida .manual { padding: 24px 32px; }
@media (max-width: 991.98px) { .manual-sida { grid-template-columns: 1fr; } .manual-toc { display: none; } .manual-sida .manual { padding: 18px; } }

.hjalp-panel { --bs-offcanvas-width: min(460px, 100vw); --bs-offcanvas-bg: var(--surface); }
.hjalp-panel-huvud { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 14px 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.hjalp-panel-huvud .offcanvas-title { margin: 0; font-size: 15px; font-weight: 700; }
.hjalp-panel-sok { margin: 12px 20px 0; }
#hjalp-panel-traffar:not(:empty) { margin: 10px 20px 0; }
.hjalp-panel-text { padding: 16px 20px 24px; }
.hjalp-panel-text h1 { display: none; }  /* titeln står i panelens huvud */
.hjalp-panel-fot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--divider); font-size: 13px; }

/* ---------- Tomt läge ---------- */
.bs-empty { display: flex; flex-direction: column; align-items: center; padding: 40px 16px; text-align: center; }
.bs-empty-ikon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px;
  border-radius: 50%; background: var(--blue-bg); color: var(--blue-text);
}
.bs-empty-titel { margin: 0; font-size: 15px; font-weight: 700; }
.bs-empty-text { margin: 6px 0 0; max-width: 42ch; color: var(--label); font-size: 13px; }
.bs-empty-atgard { margin-top: 16px; }

/* ---------- Modaler ---------- */
.modal {
  --bs-modal-bg: var(--surface);
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--radius-card);
  --bs-modal-inner-border-radius: var(--radius-card);
  --bs-modal-header-border-color: var(--divider);
  --bs-modal-footer-border-color: var(--divider);
}
.modal-title { font-size: var(--fs-topbar); font-weight: 700; margin: 0; }
.modal-text { margin: 8px 0 0; color: var(--label); font-size: 13px; }
.modal-footer { gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-ikon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%;
}
.modal-ikon-fel { background: var(--red-bg); color: var(--red-text); }
.modal-ikon-info { background: var(--blue-bg); color: var(--blue-text); }
.modal-ikon-ok { background: var(--green-bg); color: var(--green-text); }

.foretag-lista { display: flex; flex-direction: column; gap: 6px; }
.foretag-val {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; text-align: left;
}
.foretag-val .ikon { color: var(--label); }
.foretag-val:hover { background: var(--fill); }
.foretag-val.aktiv { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-text); opacity: 1; }
.foretag-val.aktiv .ikon { color: var(--blue-text); }

/* ---------- Toast ---------- */
.toast {
  --bs-toast-bg: var(--surface);
  --bs-toast-border-color: var(--border);
  --bs-toast-border-radius: var(--radius-btn);
  --bs-toast-max-width: 380px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.toast-rad { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13px; font-weight: 500; }
.toast-ok .toast-rad > .ikon { color: var(--green-text); }
.toast-fel .toast-rad > .ikon { color: var(--red-text); }
.toast-info .toast-rad > .ikon { color: var(--blue-text); }
.toast-fel { border-color: var(--red-border); }

/* ---------- Inloggning ----------
   Som i Flutter: loggan till vänster, formuläret i en mörkblå panel till höger.
   På mobil bara panelen med en mindre logga. */
:root { --brand: #00387B; }
.login {
  display: grid; grid-template-columns: 1fr minmax(380px, 30%);
  min-height: 100vh; min-height: 100dvh;
  background: var(--fill);
}
.login-logo { display: grid; place-items: center; padding: 48px; }
.login-logo img { width: min(420px, 70%); height: auto; }
.login-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 40px;
  background: linear-gradient(165deg, var(--brand), var(--nav-bg));
  color: #fff;
}
.login-panel > form { width: 100%; max-width: 380px; margin: 0 auto; }
.login-logo-liten { display: none; }
.login-titel { margin: 0 auto 28px; font-size: 24px; font-weight: 700; text-align: center; color: #fff; }
.login-panel .form-label { color: var(--nav-subtext); }
.login-panel .kravs { color: inherit; }
.login-panel .form-control { background-color: #fff; border-color: transparent; }
.login-panel .form-control:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(96, 165, 250, .35); }
.login-panel .form-control.is-invalid { border-color: var(--border-error); }
.login-panel .invalid-feedback { color: #FCA5A5; }
/* Vit knapp på den mörka panelen, som i Flutter. */
.login-knapp {
  --bs-btn-padding-y: 12px;
  --bs-btn-font-size: 14px;
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: var(--blue-bg);
  --bs-btn-hover-color: var(--brand);
  --bs-btn-hover-border-color: var(--blue-bg);
  --bs-btn-active-bg: var(--blue-border);
  --bs-btn-active-color: var(--brand);
  --bs-btn-active-border-color: var(--blue-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.login-knapp:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-glomt { margin-top: 4px; }
/* Kontolänkarna (_kontolank.html): text och meddelanden på den mörka panelen */
.login-text { color: var(--nav-subtext); font-size: 14px; text-align: center; }
.login-panel .form-text { color: var(--nav-subtext); }
.login-meddelande { width: 100%; max-width: 380px; margin: 0 auto; }
.login-glomt .btn-link {
  --bs-btn-padding-x: 0; --bs-btn-padding-y: 2px; --bs-btn-font-weight: 500; --bs-btn-font-size: 12px;
  color: var(--nav-subtext); text-decoration: none;
}
.login-glomt .btn-link:hover { color: #fff; text-decoration: underline; }

@media (max-width: 991.98px) {
  .login { grid-template-columns: 1fr; }
  .login-logo { display: none; }
  .login-panel { padding: 32px 20px; }
  .login-logo-liten {
    display: block; width: 96px; height: auto; margin: 0 auto 20px; padding: 12px;
    border-radius: var(--radius-card); background: #fff;
  }
}

/* Fält med ikon och/eller knapp (sökfält, inloggning, lösenord). */
.falt-ikon { position: relative; }
.falt-ikon > .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.falt-ikon.med-ikon > .form-control { padding-left: 38px; }
.falt-ikon.med-knapp > .form-control { padding-right: 44px; }
.falt-knapp {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-icon-btn); background: transparent; color: var(--label);
}
.falt-knapp:hover { color: var(--text); background: var(--divider); }
.falt-knapp:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

/* Enkel centrerad sida (felsida utan inloggning). */
.enkel-sida { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 16px; }
.enkel-sida-kort { width: 100%; max-width: 440px; }

/* ---------- htmx ---------- */
.htmx-request.dimma, .htmx-request .dimma { opacity: .55; transition: opacity .15s; }

/* ---------- Sökbara val (ui.select med många val, core.js) ---------- */
.sokval { position: relative; }
.sokval-falt {
  padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.sokval-falt[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--blue-bg); }
.sokval-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1060;
  max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-icon-btn);
  box-shadow: 0 8px 24px rgb(15 23 42 / .12);
}
.sokval-val { padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.sokval-val:hover, .sokval-val.aktiv { background: var(--fill); }
.sokval-val[aria-selected="true"] { font-weight: 600; }
.sokval-tom { color: var(--label); }
.sokval-inget { padding: 8px 12px; color: var(--subtle); font-size: 13px; }

/* Snabbval under ett fält (orderradens "Snabbregistrera 8 tim / 4 tim"). */
.snabbval { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.snabbval .form-label { margin-right: 4px; font-size: 13px; }

/* ---------- Plusknapp (FAB) och ark för mobilen ---------- */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1030;
  display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 16px;
  background: var(--primary); color: #fff; box-shadow: 0 6px 20px rgb(37 99 235 / .35);
}
.fab:active { transform: scale(.96); }
.fab-plats { height: 72px; }  /* så att plusknappen inte täcker summorna längst ned */
.lagg-till-ark { --bs-offcanvas-height: auto; border-radius: 16px 16px 0 0; }
.lagg-till-ark .offcanvas-title { font-size: 16px; font-weight: 700; }
.lagg-till-ark .offcanvas-body { display: flex; flex-direction: column; padding: 0 8px calc(12px + env(safe-area-inset-bottom)); }
.ark-val {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 12px;
  border: 0; border-radius: 10px; background: none; color: var(--text); font-size: 15px; font-weight: 500; text-align: left;
}
.ark-val:active, .ark-val:hover { background: var(--fill); }
.ark-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-bg); color: var(--primary); }

/* Orderns bilder som miniatyrer */
.dokument-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.dokument-bild { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--fill); }
.dokument-bild img { width: 100%; height: 100%; object-fit: cover; }
.dokument-bild-bort { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: rgb(255 255 255 / .9); }
label.ark-val { cursor: pointer; margin: 0; }

/* ---------- Mobilflikar (visningssida i flikar på mobilen, core.js) ---------- */
.mflikar {
  position: sticky; top: var(--topbar-h); z-index: 1005; display: flex; gap: 4px;
  margin: -16px -16px 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.mflik {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--label); font-size: 14px; font-weight: 600;
}
.mflik.aktiv { background: var(--blue-bg); color: var(--primary); }
@media (max-width: 991.98px) {
  .vy-mflikar { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .vy-mflikar > .vy-huvud, .vy-mflikar > .vy-sida { display: contents; }
  .vy-mflikar .mkort-forst { order: -1; }
  .vy-mflikar .bs-banner { order: -2; }
  .vy-mflikar .mflik-dold { display: none !important; }
}
/* Flikarna i ett kort (utrustningens Aktivitet) på en rad som skrollar i sidled på mobilen. */
@media (max-width: 991.98px) {
  .vy-flikar > .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vy-flikar > .nav::-webkit-scrollbar { display: none; }
  .vy-flikar > .nav .nav-link { white-space: nowrap; }
}
/* Omslag kring kort som byts ut av htmx (t.ex. påminnelser): ingen egen ruta. */
.mflik-kort { display: flex; flex-direction: column; gap: 16px; }
.vy-sida > .mflik-kort:empty { display: none; }

/* Kontaktpersonen i orderns Kund-kort: namnet öppnar en meny med telefon och e-post */
.kontakt-namn {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: var(--primary); font: inherit; font-weight: 600;
}
.kontakt-namn .ikon { color: var(--subtle); }
.kontakt-meny { min-width: 220px; }
.kontakt-meny .dropdown-header { color: var(--label); font-size: 12px; white-space: normal; }
.kontakt-meny .dropdown-header strong { color: var(--text); font-size: 14px; }
.kontakt-meny .dropdown-item { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.kontakt-meny .dropdown-item .ikon { color: var(--subtle); }

/* Modaler med ett formulär runt huvud, innehåll och fot: formuläret måste vara en flexkolumn,
   annars scrollar inte .modal-dialog-scrollable (innehållet klipps, t.ex. på mobilen). */
.modal-content > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: 100%; }
.modal-content > form > .modal-body { flex: 1 1 auto; }  /* foten längst ned i helskärm (mobil) */
.modal-dialog-scrollable .modal-content > form { overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Orderkalender ---------- */
.kalender { display: flex; flex-direction: column; gap: 16px; }
.kal-verktyg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kal-rubrik { margin: 0; min-width: 0; font-size: 17px; font-weight: 700; }
.kal-verktyg-hoger { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kal-vecka { display: grid; grid-template-columns: 28px repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.kal-huvud span { padding: 4px 0; color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.kal-veckonr { display: grid; place-items: center; color: var(--subtle); font-size: 11px; }
.kal-dag {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  min-height: 64px; padding: 8px 2px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 14px;
}
.kal-dag.tom { border-color: transparent; background: none; }
.kal-dag.helg { background: var(--fill); }
.kal-dag:hover { border-color: var(--primary); }
.kal-dag.idag .kal-dagnr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-bg); color: var(--primary); font-weight: 700; }
.kal-dag.vald { border: 2px solid var(--primary); padding: 7px 1px; }
.kal-timmar { padding: 1px 6px; border-radius: 999px; background: var(--green-bg); color: var(--green-text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.kal-prick { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.kal-summor { display: flex; justify-content: flex-end; gap: 16px; padding-top: 8px; color: var(--label); font-size: 13px; }
.kal-order + .kal-order { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.kal-order-rubrik { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 13px; }
.kal-order-kund { color: var(--text); font-weight: 600; }
.kal-order-info { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; color: var(--label); font-size: 12px; }
.kal-order-info span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-order-info .ikon { flex: none; color: var(--subtle); }
.kal-rad { display: flex; justify-content: space-between; gap: 12px; padding: 8px; border-radius: 8px; }
.kal-rad-namn { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.kal-rad-antal { flex: none; margin-left: auto; font-weight: 700; white-space: nowrap; }
.kal-rad { align-items: center; }
.kal-rad-meny { flex: none; margin: -6px -6px -6px 0; }
.rad-klickbar.kal-rad:hover { background: var(--fill); }
.kal-veckodag.idag { border-color: var(--primary); }
@media (max-width: 575.98px) {
  .kal-vecka { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .kal-veckonr { display: none; }
  .kal-dag { min-height: 48px; padding: 6px 0; border-radius: 8px; font-size: 13px; }
  .kal-dag.vald { padding: 5px 0; }
  .kal-timmar { padding: 0 4px; font-size: 10px; }
  .kal-verktyg-hoger { width: 100%; justify-content: flex-end; }
}

/* Toastens text: \n blir radbrytning (t.ex. en rad per order som inte gick att fakturera). */
.toast-text { white-space: pre-line; }

/* Arbetstid i "Ny orderrad" (kalendern): snabbval för tider och rast */
.arbetstid { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); }
.arbetstid-rubrik { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.rastval .btn-check:checked + .btn { background: var(--blue-bg); border-color: var(--primary); color: var(--primary); }

/* Registrera tid (tid/_kalender.html): löneperioden överst och en färgprick per tidtyp */
.tid-period-huvud { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tid-period-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tid-summor { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.tid-prick { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--prick, var(--primary)); }
.kal-rad > .tid-prick { align-self: center; }
.tid-prickar { display: flex; gap: 3px; }
.tid-person { width: auto; max-width: 200px; }
.tid-fordelning { padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
@media (max-width: 575.98px) { .kal-verktyg-hoger:has(.tid-person) { flex-wrap: wrap; width: 100%; } .tid-person { flex: 1 1 100%; max-width: none; } }
.rast-minuter { max-width: 180px; }
.sokval-under { display: block; overflow: hidden; color: var(--subtle); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.sokval-under .ikon { margin-right: 6px; vertical-align: -1px; }

/* Fördelning (leverantörens kostnad per kopplingstyp) */
.fordelning { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.fordelning li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.fordelning-stapel { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.fordelning-stapel > span { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.lev-ar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lev-ar .vaxlare-val { flex-shrink: 0; }
.lev-fakturor .bs-chip { margin-left: 4px; padding: 1px 8px; font-size: 11px; }
.lev-fakturor .lev-oga { width: 32px; }
.lev-fakturor tr.rad-klickbar:hover .lev-oga { color: var(--primary); }
/* Snabbvisning av leverantörsfaktura */
.snabb-rubrik { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.snabb-kropp { display: flex; flex-direction: column; }
.snabb-visare { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 270px); min-height: 360px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--fill); }
@media (max-width: 767.98px) { .snabb-visare { height: auto; flex: 1; min-height: 0; } .snabb-kropp { min-height: 0; } }
.snabb-bild { display: grid; place-items: center; overflow: auto; }
.snabb-bild img { max-width: 100%; height: auto; }
.snabb-mobil { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center; color: var(--label); }
.snabb-mobil .fw-semibold { color: var(--text); word-break: break-all; }
.snabb-mobil .btn { margin-top: 8px; }
.fordelning-belopp { font-weight: 600; white-space: nowrap; }

/* Offlinesidan (pwa/offline.html) */
.offline-sida { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 16px; background: var(--bg); }
.offline-kort { max-width: 360px; padding: 32px 24px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.offline-kort h1 { margin: 12px 0 8px; font-size: 20px; font-weight: 700; color: var(--text); }
.offline-kort p { margin-bottom: 20px; color: var(--label); font-size: 14px; }

/* Leverantörsfakturor: granskning med PDF:en till vänster (dator) och formuläret till höger */
.app-innehall-granska { padding: 0; }
.granska { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 46%); align-items: start; }
.granska-pdf { position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); }
.granska-pdf-innehall { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.granska-pdf-flikar { padding: 8px 12px 0; }
.granska-pdf-tom { flex: 1; display: grid; place-items: center; }
.granska-falt { min-width: 0; padding: 24px; }
.granska-yta form, .granska-stack { display: flex; flex-direction: column; gap: 16px; }
.granska-stack { min-width: 0; margin: 0; padding: 0; border: 0; }
.granska-filer { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.granska-filer li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.granska-info .vy-fakta { margin: 0; }
.granska-nav { display: flex; align-items: center; gap: 4px; }
.granska-nav-text { margin-right: 4px; color: var(--subtle); font-size: 12px; font-weight: 500; white-space: nowrap; }
.granska-nav .disabled { opacity: .35; pointer-events: none; }
.kopplingslista { display: flex; flex-direction: column; gap: 8px; }
.kopplingslista:not(:has(.kopplingsrad)) + .lista-tom { display: block; }
.granska-yta .bs-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.kopplingsrad { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px auto; align-items: center; gap: 8px; }
.kopplingsrad-typ { display: flex; align-items: center; gap: 6px; color: var(--label); font-size: 13px; font-weight: 600; }
.kopplingsrad .col-12 { padding: 0; }
.kopplingsrad-belopp input { text-align: right; }
@media (max-width: 991.98px) {
  .granska { display: block; }
  /* Mobil: fakturan i en egen skrollruta ovanför formuläret; helskärmsknappen förstorar. */
  .granska-pdf { position: static; height: 55vh; height: 55dvh; border-right: 0; border-bottom: 1px solid var(--border); }
  .granska-falt { padding: 16px; }
}
/* PDF-visare (ui.pdfvisare): sidorna på grå bakgrund, verktygsrad överst */
.pdfvisare { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.pdfvisare-fast { flex: 1; }
.pdfvisare-verktyg { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pdfvisare-procent { min-width: 48px; text-align: center; color: var(--label); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdfvisare-sidinfo { margin-left: 8px; overflow: hidden; color: var(--subtle); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.pdfvisare-knappar { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pdfvisare-knappar form { display: contents; }
.pdfvisare-sidor { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: safe center; gap: 12px; padding: 16px; background: #E8EAF0; }
.pdfvisare { position: relative; }
.pdfvisare-sida { position: relative; flex-shrink: 0; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08); }
.pdfvisare-sida canvas { display: block; }
.pdfvisare-helskarm { position: fixed; inset: 0; z-index: 1090; height: 100vh; height: 100dvh; }
body.pdf-helskarm { overflow: hidden; }
/* Markerad text i PDF:en: Kopiera och Använd som (pdfvisare.js) */
.pdf-markering { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: min(360px, calc(100% - 16px)); padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.pdf-markering[hidden] { display: none; }
.pdf-markering-rubrik { width: 100%; padding: 4px 6px 0; color: var(--subtle); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pdf-markering-val { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--fill); color: var(--text); font-size: 12px; font-weight: 600; }
.pdf-markering-val:hover { border-color: var(--primary); color: var(--primary); }
.pdf-markering-kopiera { background: var(--surface); }
.pdf-ifyllt { border-color: var(--green-text) !important; box-shadow: 0 0 0 3px var(--green-bg) !important; transition: box-shadow .2s; }
/* PDF.js textlager (pdf_viewer.css 6.4.299, utan nästling): osynlig text som går att markera. */
.textLayer { color-scheme: only light; position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; -webkit-user-select: text; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; }
.textLayer ::selection { background: rgba(0 0 255 / .25); background: color-mix(in srgb, AccentColor, transparent 50%); color: transparent; }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; -webkit-user-select: none; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
.pdfvisare-meddelande { margin: auto; color: var(--label); font-size: 13px; text-align: center; }
.ikonknapp-fara { color: var(--red-text); }

@media (max-width: 575.98px) {
  .kopplingsrad { grid-template-columns: minmax(0, 1fr) 96px auto; }
  .kopplingsrad-typ { grid-column: 1 / -1; }
}
/* Ladda upp */
.ladda-upp { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.ladda-upp form { display: flex; flex-direction: column; gap: 16px; }
.ladda-upp-knappar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.betalfil-kort { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; }

/* Bokföringspanelen i granskningen (leverantorsfakturor/_bokforingspanel.html): fast längst ner,
   konteringen till vänster och förslagen till höger, fälls ihop till rubrikraden. */
body:has(.bokf-panel) { --bokf-h: 48px; }
body:has(.bokf-panel.oppen) { --bokf-h: var(--bokf-oppen-h, 360px); }  /* --bokf-oppen-h: dragen höjd (core.js) */
.app-innehall-granska { padding-bottom: var(--bokf-h, 0); }
.granska-pdf { height: calc(100dvh - var(--topbar-h) - var(--bokf-h, 0px)); }
.bokf-falt { min-width: 0; margin: 0; padding: 0; border: 0; }
.bokf-panel { position: fixed; z-index: 1005; left: var(--nav-w); right: 0; bottom: 0; display: flex; flex-direction: column; height: var(--bokf-h); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); }
.bokf-huvud { display: flex; align-items: center; gap: 8px; flex: 0 0 48px; padding: 0 12px; border-bottom: 1px solid var(--divider); }
/* Dragkant i överkanten: ändrar den öppna panelens höjd (bara dator). */
.bokf-dragg { position: absolute; left: 0; right: 0; top: -5px; height: 10px; cursor: ns-resize; z-index: 1; touch-action: none; }
.bokf-dragg::after { content: ""; position: absolute; left: 50%; top: 3px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border); }
.bokf-dragg:hover::after, .bokf-dragg:focus-visible::after, .bokf-panel.dras .bokf-dragg::after { background: var(--primary-light); }
.bokf-dragg:focus-visible { outline: none; }
.bokf-panel:not(.oppen) .bokf-dragg { display: none; }
body.bokf-dras { cursor: ns-resize; user-select: none; }
.bokf-pil { transition: transform .15s; }
.bokf-panel:not(.oppen) .bokf-pil { transform: rotate(180deg); }
.bokf-panel:not(.oppen) .bokf-kropp { display: none; }
.bokf-ikon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--blue-bg); color: var(--blue-text); }
.bokf-titel { margin: 0; font-size: 14px; font-weight: 700; }
.bokf-status { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fill); color: var(--label); }
.bokf-status[data-lage="tom"], .bokf-status[data-lage="fel"] { background: var(--red-bg); color: var(--red-text); }
.bokf-status[data-lage="ok"] { background: var(--green-bg); color: var(--green-text); }
.bokf-huvud-hoger { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.kontering-summa { gap: 14px; font-size: 12px; color: var(--label); font-variant-numeric: tabular-nums; }
.kontering-summa strong { color: var(--text); }
.kontering-diff, .kontering-diff strong { color: var(--red-text); }
[data-kontering].balanserar .kontering-summa strong { color: var(--green-text); }
.bokf-info { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--label); white-space: nowrap; }
.bokf-kropp { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 38%); }
.bokf-kontering, .bokf-forslag { min-height: 0; overflow: auto; padding: 10px 12px; }
.bokf-forslag { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--divider); background: var(--fill); }
.konteringsrad { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(0, 1fr) 110px 110px 34px; align-items: center; gap: 6px; }
/* Leverantörsfakturans konteringsrader har kalendern för periodisering: en kolumn till och periodraden under. */
.konteringsrad.med-period, .konteringsrad:has(> .konteringsrad-period-knapp) { grid-template-columns: minmax(180px, 1.3fr) minmax(0, 1fr) 110px 110px 34px 34px; }
.konteringsrad-period-knapp.aktiv { color: var(--primary-dark); background: var(--blue-bg); }
.konteringsrad-period { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0 6px 4px; }
.konteringsrad-period[hidden] { display: none; }
.konteringsrad-period-falt { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--label); }
.konteringsrad-period-falt input { width: 150px; }
.konteringsrad .col-12 { padding: 0; }
.konteringsrad .form-control, .konteringsrad .form-select, .konteringsrad .sokval-knapp { min-height: 34px; height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.konteringsrad-belopp input { text-align: right; font-variant-numeric: tabular-nums; }
.konteringsrad-rubrik { position: sticky; top: -10px; z-index: 1; margin: -10px -12px 6px; padding: 8px 12px; background: var(--fill); color: var(--label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kontering-rader { display: flex; flex-direction: column; gap: 6px; }
.bokf-ny-rad { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px; border: 1px dashed var(--primary); border-radius: var(--radius-input); background: transparent; color: var(--primary); font-size: 13px; font-weight: 600; }
.bokf-ny-rad:hover { background: var(--blue-bg); }
.bokf-rad-knappar { display: flex; gap: 8px; margin-top: 8px; }
.bokf-rad-knappar .bokf-ny-rad { flex: 1; margin-top: 0; }
.bokf-rensa { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 7px 12px; border: 1px dashed var(--border); border-radius: var(--radius-input); background: transparent; color: var(--label); font-size: 13px; font-weight: 600; }
.bokf-rensa:hover { border-color: var(--red-border); background: var(--red-bg); color: var(--red-text); }
.bokf-kommentar { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.bokf-kommentar .col-12 { padding: 0; }
.bokf-forslag-kort { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.bokf-forslag-huvud { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--divider); }
.bokf-forslag-huvud .btn-link { --bs-btn-padding-x: 6px; --bs-btn-padding-y: 0; font-size: 12px; font-weight: 600; text-decoration: none; }
.bokf-forslag-rader { margin: 0; padding: 4px 0; list-style: none; }
.bokf-forslag-rader label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.bokf-forslag-rader label:hover { background: var(--fill); }
.bokf-forslag-rader .form-check-input { margin: 0; flex-shrink: 0; }
.bokf-kontonr { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.bokf-kontonamn { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bokf-belopp { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bokf-belopp small { color: var(--subtle); font-size: 10px; font-weight: 700; }
.kontering-tabell { margin: 0; }
@media (max-width: 991.98px) {
  .bokf-panel { left: 0; }
  body:has(.bokf-panel.oppen) { --bokf-h: 75dvh; }
  .bokf-dragg { display: none; }
  .granska-pdf { height: 55dvh; }
  .bokf-kropp { display: flex; flex-direction: column; overflow: auto; }
  .bokf-kontering, .bokf-forslag { flex-shrink: 0; overflow: visible; }
  .bokf-forslag { border-left: 0; border-top: 1px solid var(--divider); }
  .konteringsrad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; padding-bottom: 6px; border-bottom: 1px solid var(--divider); }
  .konteringsrad-konto { grid-column: 1 / 3; }
  .konteringsrad-text { grid-column: 1 / -1; grid-row: 2; }
  .konteringsrad-belopp { grid-row: 3; }
  .konteringsrad > :last-child { grid-column: 3; grid-row: 1; }
  .konteringsrad-rubrik { display: none; }
}

/* Reglaget "Nästa efter Spara" i redigeringens sidhuvud */
.bokf-forslag-kommentar { flex-basis: 100%; margin-top: -4px; padding-left: 24px; color: var(--subtle); font-size: 12px; line-height: 1.3; }
.konteringsrad-kommentar { margin-top: 2px; font-size: 12px; line-height: 1.3; }
.nasta-reglage { display: flex; align-items: center; gap: 6px; margin: 0 4px 0 0; color: var(--label); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.nasta-reglage .form-check-input { margin: 0; cursor: pointer; }

/* Mallar (Register → Mallar) och mallväljaren på sidan Ny kund/order */
.mall-flikar { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; background: var(--fill); border: 1px solid var(--border); border-radius: var(--radius-input); }
.mall-flikar .vaxlare-val { text-decoration: none; }
.mall-inaktiv td { color: var(--subtle); }
.mallval { display: grid; grid-template-columns: auto minmax(200px, 360px) minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.mallval-etikett { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; font-size: 13px; color: var(--label); }
.mallval-text { min-width: 0; }
@media (max-width: 767.98px) { .mallval { grid-template-columns: auto minmax(0, 1fr); } .mallval-text { grid-column: 1 / -1; } }
.mall-rader { display: flex; flex-direction: column; gap: 8px; }
.mall-rader:not(:has(.mallrad)) + .lista-tom { display: block; margin-top: 8px; }
.mallrad { display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 130px 110px 36px; align-items: center; gap: 8px; }
.mallrad .col-12 { padding: 0; }
.mallrad-produkt .mallrad-namn { grid-column: 2; }
.mallrad-produkt .mallrad-pris { grid-column: 4 / 6; }
.mallrad-text .mallrad-namn { grid-column: 2 / 6; }
.mallrad > .prisrad-ta-bort { grid-column: 6; }
.mallrad-typ { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fill); color: var(--label); }
.mallrad-antal input, .mallrad-pris input { text-align: right; }
@media (max-width: 767.98px) {
  .mallrad { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 36px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
  .mallrad .mallrad-namn, .mallrad-produkt .mallrad-namn, .mallrad-text .mallrad-namn { grid-column: 2 / 4; }
  .mallrad-antal { grid-column: 2; grid-row: 2; }
  .mallrad-pris, .mallrad-produkt .mallrad-pris { grid-column: 3; grid-row: 2; }
  .mallrad-moms { grid-column: 2 / 4; grid-row: 3; }
  .mallrad > .prisrad-ta-bort { grid-column: 4; grid-row: 1; }
}
.mall-forhandsvisning-rader { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.mall-forhandsvisning-rader li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.mall-forhandsvisning-antal, .mall-forhandsvisning-pris { color: var(--label); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mall-forhandsvisning-rader .mallrad-text .mall-forhandsvisning-namn { color: var(--label); font-style: italic; }

/* Påminnelser (moduler/bevakningar): kortet, översikten och historiken */
.bevakning-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.bevakning-rad { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--divider); }
.bevakning-rad:first-child { border-top: 0; }
.bevakning-rad .status-pill { justify-self: start; }
.bevakning-text { display: flex; flex-direction: column; min-width: 0; }
.bevakning-titel { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bevakning-titel:hover { color: var(--primary); }
.lage-3 .bevakning-dagar { color: var(--red-text); font-weight: 600; }
.lage-2 .bevakning-dagar { color: var(--status-utgaende-text); font-weight: 600; }
.bevakning-siffror { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bevakning-siffra { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-input); color: var(--label); font-size: 12px; text-decoration: none; }
.bevakning-siffra strong { color: var(--text); font-size: 22px; line-height: 1.1; }
.bevakning-siffra.fel { border-color: var(--red-border); background: var(--red-bg); }
.bevakning-siffra.fel strong { color: var(--red-text); }
.bevakning-siffra.snart { border-color: #FED7AA; background: var(--status-utgaende-bg); }
.bevakning-siffra.snart strong { color: var(--status-utgaende-text); }
@media (max-width: 575.98px) {
  .bevakning-siffror { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bevakning-rad { grid-template-columns: minmax(0, 1fr) auto auto; }
  .bevakning-rad .status-pill { grid-column: 1 / -1; }
}
/* Smalt kort (sidopanelen, mobilen): läget på en egen rad ovanför titeln. */
@container (max-width: 420px) {
  .bevakning-rad { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .bevakning-rad .status-pill { grid-column: 1 / -1; }
}
.bevakning-historik { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.oversikt { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
/* Översikten (GET /v1/oversikt/): att göra, nyckeltal och korten två och två. */
.oversikt-attgora { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.oversikt-attgora li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.oversikt-attgora li:last-child { border-bottom: 0; }
.oversikt-prick { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.niva-fel .oversikt-prick { background: var(--red-text); }
.niva-varning .oversikt-prick { background: #F59E0B; }
.oversikt-nyckeltal { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
@media (max-width: 575.98px) { .nyckeltal-kort strong { font-size: 17px; } }
.nyckeltal-kort { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: var(--text); text-decoration: none; }
a.nyckeltal-kort:hover, a.nyckeltal-kort:focus-visible { border-color: var(--primary-light); color: var(--text); }
.nyckeltal-kort strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.oversikt-nyckeltal > .bs-card, .oversikt-rutnat > .bs-card { margin-top: 0; }  /* rutnätet sköter avståndet */
.oversikt-rutnat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 991.98px) { .oversikt-rutnat { grid-template-columns: 1fr; } }
.oversikt-diagram { display: flex; align-items: stretch; gap: 4px; height: 150px; }
.oversikt-stapelpar { gap: 2px; justify-content: center; }
.oversikt-stapelpar .stapel { max-width: 14px; margin: 0; }
.stapel.oversikt-fjol, .oversikt-fargruta.oversikt-fjol { background: #A5B4FC; }
.oversikt-forklaring { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.oversikt-fargruta { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--primary); }
.oversikt-likviditet { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575.98px) { .oversikt-likviditet { grid-template-columns: 1fr; } }


/* Översiktens genvägar (core/genvagar.py): två per rad på mobilen. (.genvagar är listornas genvägsmeny.) */
.genvag-rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
@media (max-width: 575.98px) { .genvag-rutnat { grid-template-columns: 1fr 1fr; } }
.genvag { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 64px; border: 1px solid var(--border); border-radius: var(--radius-btn);
  background: var(--fill); color: var(--text); text-decoration: none; }
.genvag:hover, .genvag:focus-visible { border-color: var(--primary-light); background: var(--blue-bg); color: var(--text); }
.genvag-ikon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: var(--radius-icon-btn);
  background: var(--blue-bg); color: var(--primary-dark); }
.genvag-text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.25; }
.genvag-text small { color: var(--label); font-size: 12px; }
@media (max-width: 575.98px) { .genvag { flex-direction: column; align-items: flex-start; gap: 8px; } }
.genvag-val { display: grid; gap: 2px; }
.genvag-val-rad { display: flex; align-items: center; gap: 4px; padding: 6px 4px; border-bottom: 1px solid var(--divider); }
.genvag-val-rad:first-child [data-flytta="upp"], .genvag-val-rad:last-child [data-flytta="ned"] { visibility: hidden; }


/* Påminnelser: lägesetikett med ikon, egna fält, filer i historiken */
.bevakning-lage { gap: 4px; }
.meta-rader { display: grid; gap: 6px; }
.meta-rad { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.bevakning-filer { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; font-size: 13px; }
.bevakning-filer li { display: flex; align-items: center; gap: 4px; }
.bevakning-filer li > a:first-child { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.bevakning-bifoga { margin-top: 2px; font-size: 13px; }

/* Användare: roller och behörighetsmatrisen (tre lägen: från roll, ja, nej) */
.roll-val { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.roll-last { opacity: .55; }
.matris { font-size: 13px; margin: 0; }
.matris th[scope="row"] { font-weight: 600; white-space: nowrap; }
.matris thead th { font-size: 11px; font-weight: 600; color: var(--label); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.matris td, .matris th { padding: 6px 8px; vertical-align: middle; }
.matris-under th[scope="row"] { padding-left: 24px; font-weight: 500; }
/* Raden under musen markeras, så att det syns vilken modul kryssrutorna hör till. */
.matris > tbody > tr:hover > * { --bs-table-bg-state: var(--blue-bg); }
.tri { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); color: var(--subtle); vertical-align: middle; }
button.tri { cursor: pointer; }
button.tri:hover { border-color: var(--primary); }
.tri .tri-ikon-ja, .tri .tri-ikon-nej { display: none; }
.tri-arv-ja .tri-ikon-ja { display: inline; color: var(--subtle); }
.tri-ja { background: var(--status-aktiv-bg); border-color: var(--status-aktiv-text); }
.tri-ja .tri-ikon-ja { display: inline; color: var(--status-aktiv-text); }
.tri-nej { background: var(--red-bg); border-color: var(--red-border); }
.tri-nej .tri-ikon-nej { display: inline; color: var(--red-text); }
.tri-last { opacity: .5; border-style: dashed; }
.tri-forklaring { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tri-forklaring .tri { width: 22px; height: 22px; }

/* Fastigheter: lokalens prisrader */
.prisrader { display: grid; gap: 12px; }
.lokal-prisrad { padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.lokal-prisrad:last-child { border-bottom: 0; padding-bottom: 0; }

/* Fastigheter: stora belopp i fyra kolumner krymper i stället för att gå utanför kortet; lokaltabellen kompakt. */
.fastighet-statistik .nyckeltal-varde { font-size: 20px; }
.lokal-tabell { font-size: 13px; }
.lokal-tabell td, .lokal-tabell th { white-space: nowrap; }
.lokal-tabell .andel { display: block; font-size: 11px; color: var(--label); }

/* Lista med inledning som flikar på mobilen (ListConfig.inledning_flikar). På datorn under varandra. */
.app-innehall-lista > .mflikar { margin: 0; }
@media (min-width: 992px) { .lista-mflikar { display: block; } }
@media (max-width: 991.98px) { .lista-mflikar { gap: 0; } }

/* Fakturor: Vilande ovanför listan, fakturans rader */
.vilande { padding: 12px 24px; background: #FFFBEB; border-bottom: 1px solid var(--border); }
.vilande-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vilande-rubrik { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; color: #b45309; font-weight: 700; }
.vilande-rubrik[aria-expanded="false"] .vilande-pil { transform: rotate(180deg); }
.vilande-summa { margin-left: auto; color: #b45309; font-size: 13px; font-weight: 600; }
.vilande-huvud { justify-content: flex-start; flex-wrap: wrap; }
.vilande-filter { display: inline-flex; gap: 6px; }
.vilande-val { padding: 3px 10px; border: 1px solid rgb(180 83 9 / .25); border-radius: 999px; background: transparent; color: #b45309; font-size: 12px; font-weight: 600; }
.vilande-val span { margin-left: 2px; opacity: .7; }
.vilande-val:hover { background: rgb(180 83 9 / .08); }
.vilande-val[aria-pressed="true"] { background: #b45309; border-color: #b45309; color: #fff; }
.vilande-val[aria-pressed="true"] span { opacity: .85; }
.vilande-tabell { margin: 8px 0 0; background: transparent; }
.vilande-tabell td, .vilande-tabell th { background: transparent; }
.vilande-tabell tbody tr[data-href] { cursor: pointer; }
/* Samma radhöjd som listan nedanför: 14 px i cellerna, 6 px där ikonknapparna (36 px) står. */
.vilande-tabell.table > :not(caption) > * > * { padding: 14px 16px; }
.vilande-tabell.table > :not(caption) > * > .kol-atgard { padding-top: 6px; padding-bottom: 6px; }
.vilande-tabell .status-pill { margin: -2px 0; vertical-align: middle; }
.vilande-tabell tbody tr[data-href]:hover td { background: rgb(180 83 9 / .06); }
@media (max-width: 991.98px) { .vilande { padding: 12px 16px; } .vilande-huvud .vilande-rubrik { pointer-events: none; } .vilande-pil { display: none; } }
.faktura-textrad td { color: var(--text); }
.faktura-grupprubrik td { font-weight: 700; padding-top: 14px; }
.faktura-att-betala th, .faktura-att-betala td { font-size: 15px; font-weight: 700; }
/* Utkastets rader på mobilen: ett kort per rad (benämning och summa överst, antal × pris och knapparna under),
   summorna som rader med beloppet till höger. Ingen sidledsskroll. */
@media (max-width: 575.98px) {
  .utkast-tabell thead { display: none; }
  .utkast-tabell, .utkast-tabell tbody, .utkast-tabell tfoot { display: block; }
  .utkast-tabell tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .utkast-tabell.table > :not(caption) > * > * { padding: 0; border: 0; background: transparent; }
  .utkast-tabell .rad-tal { display: none; }
  .utkast-tabell .rad-namn { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
  .utkast-tabell .rad-text { grid-column: 1 / -1; }
  .utkast-tabell .rad-summa { grid-column: 2; grid-row: 1; align-self: start; font-weight: 600; }
  .utkast-tabell .rad-mobil { grid-column: 1; grid-row: 2; color: var(--subtle); font-size: 12.5px; }
  .utkast-tabell .rad-atgard { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 2px; }
  .utkast-tabell .faktura-textrad .rad-atgard { grid-row: 2; grid-column: 1 / -1; }
  /* Slå samman: kryssrutan till vänster om namnet; raderna under en grupp är indragna. */
  .utkast-valjlage .utkast-tabell tbody tr { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .utkast-valjlage .utkast-tabell .valrad-kryss { grid-column: 1; grid-row: 1; width: auto; }
  .utkast-valjlage .utkast-tabell .rad-namn { grid-column: 2; }
  .utkast-valjlage .utkast-tabell .rad-summa { grid-column: 3; }
  .utkast-tabell tr.rad-kontroll { margin: 0 -8px; padding: 10px 8px; border-radius: 8px; background: #FFFBEB; box-shadow: inset 3px 0 0 #d97706; }
}
/* Utkastet på mobilen: flikarna Rader och Uppgifter, beloppen i en fast list längst ner (_utkast_summa.html). */
@media (min-width: 992px) { .d-lg-table-footer-group { display: table-footer-group !important; } }
.flik-varning { background: #FEF3C7; color: #b45309; }
.utkast-summa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(15 23 42 / .08);
}
.utkast-summa summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.utkast-summa summary::-webkit-details-marker { display: none; }
.utkast-summa-text { display: flex; flex-direction: column; font-weight: 600; color: var(--text); }
.utkast-summa-text small { color: var(--subtle); font-size: 12px; font-weight: 500; }
.utkast-summa summary strong { font-size: 18px; white-space: nowrap; margin-left: auto; }
.utkast-summa-pil { color: var(--subtle); transition: transform .15s; }
.utkast-summa[open] .utkast-summa-pil { transform: rotate(180deg); }
.utkast-summa dl { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--divider); }
.utkast-summa dl div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.utkast-summa dt { font-weight: 500; color: var(--label); }
.utkast-summa dd { margin: 0; white-space: nowrap; }
@media (max-width: 991.98px) {
  .utkast-vy .mflik-dold { display: none !important; }
  .utkast-vy { padding-bottom: 72px; }
}

/* Utkast till faktura: uppgifter till vänster, raderna till höger; Lägg till rad ovanför raderna (datorn). */
.utkast-vy { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.utkast-uppgifter { position: sticky; top: calc(var(--topbar-h) + 16px); }
@media (max-width: 991.98px) {
  .utkast-vy { grid-template-columns: minmax(0, 1fr); }
  .utkast-uppgifter { position: static; order: 2; }
}
.rad-ny { margin: 4px 0 16px; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--fill); }
.rad-ny-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rad-ny-rubrik { font-size: 13px; font-weight: 700; color: var(--text); }
.rad-ny-typer { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.rad-ny-typ { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 7px; background: none; color: var(--label); font-size: 13px; font-weight: 600; }
.rad-ny-typ:hover { color: var(--text); }
.rad-ny-typ.aktiv { background: var(--blue-bg); color: var(--primary); }
.rad-ny-falt { display: flex; align-items: flex-end; gap: 10px; }
.rad-ny-falt .form-label { margin-bottom: 4px; color: var(--label); font-weight: 600; }
.rad-ny-bred { flex: 1 1 auto; min-width: 0; }
.rad-ny-smal { flex: 0 0 150px; }
.rad-ny-antal { flex: 0 0 96px; }
.rad-ny-knapp { flex: 0 0 auto; }
.rad-ny > .form-text { margin-top: 6px; }

/* Sökbara val: rensa och avancerad sökning i rutan, och popupen (core.js). */
.sokval { position: relative; }
.sokval-knappar { position: absolute; top: 0; right: 6px; bottom: 0; display: flex; align-items: center; gap: 2px; }
.sokval .sokval-falt { padding-right: 40px; }
.sokval.sokval-med-avancerad .sokval-falt { padding-right: 72px; }
.sokval-knapp { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--subtle); }
.sokval-knapp:hover { background: var(--fill); color: var(--text); }
.sokval-knapp[hidden] { display: none; }
.sokval-dialog { width: min(900px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 48px)); padding: 0; border: 0; border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgb(15 23 42 / .25); background: var(--surface); color: var(--text); }
.sokval-dialog[open] { display: flex; flex-direction: column; }
.sokval-dialog::backdrop { background: rgb(15 23 42 / .45); }
.sokval-dialog-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.sokval-dialog > .sokfalt { margin: 0 20px 12px; }
.sokval-dialog-kropp { flex: 1; min-height: 160px; overflow: auto; padding: 0 20px 16px; }
.sokval-tabell tbody tr { cursor: pointer; }
.sokval-tabell tbody tr:hover td, .sokval-tabell tbody tr:focus td { background: var(--blue-bg); }
.sokval-tabell tbody tr:focus { outline: none; }
.sokval-inaktiv td { color: var(--subtle); }
.sokval-sidfot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
@media (max-width: 767.98px) { .sokval-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; } }
.sokval-tagg { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--fill); color: var(--subtle); font-size: 11px; font-weight: 600; }

/* Fakturans sida: läget, snabbknappar och filerna */
.faktura-lage { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-left: 4px solid var(--lage, var(--border)); }
.faktura-lage-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.faktura-kvar { display: flex; flex-direction: column; align-items: flex-end; }
.faktura-kvar span { color: var(--label); font-size: 12px; font-weight: 600; }
.faktura-kvar strong { font-size: 22px; }
.nyckeltal-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snabbknappar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.snabbknapp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; }
.snabbknapp .ikon { color: var(--label); }
.snabbknapp:hover { border-color: var(--primary); color: var(--primary); }
.snabbknapp:hover .ikon { color: var(--primary); }
.snabbknapp-primar { border-color: var(--primary); background: var(--blue-bg); color: var(--primary); }
.snabbknapp-primar .ikon { color: var(--primary); }
.faktura-fil-namn { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--primary); font-weight: 600; }
.faktura-fil-namn span:first-child { overflow-wrap: anywhere; }
.faktura-fil-namn span + span { font-weight: 400; }
.faktura-fil-namn:hover span:first-child { text-decoration: underline; }
@media (max-width: 767.98px) { .nyckeltal-3 { grid-template-columns: 1fr 1fr 1fr; } .nyckeltal-3 .nyckeltal-varde { font-size: 16px; } }

/* Utkast: rader som måste kontrolleras (Inget pris, Avläsning saknas) */
.utkast-kontroll { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.rad-kontroll td { background: #FFFBEB; }
.rad-kontroll td:first-child { box-shadow: inset 3px 0 0 #d97706; }
.rad-kontroll-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; color: #b45309; font-size: 12px; font-weight: 600; }
.rad-kontroll-info .status-pill { gap: 4px; }

/* Fakturaavtal: översikten ovanför listan, raderna och redigeringen */
.avtal-oversikt { display: flex; flex-direction: column; gap: 16px; padding: 16px 24px; background: var(--bg); border-bottom: 1px solid var(--border); }
@media (max-width: 991.98px) { .avtal-oversikt { padding: 16px; } }
.avtal-listor { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.avtal-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avtal-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.avtal-lista-namn { font-weight: 600; text-decoration: none; }
.avtal-lista li .vy-dim { grid-column: 1; }
.avtal-lista-varde { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 600; white-space: nowrap; }
.avtal-missade { border-color: var(--red-border); }
.avtal-radtyp { font-size: 11px; margin-right: 6px; }
.avtal-matare { display: flex; align-items: center; gap: 4px; margin-right: 8px; font-weight: 600; }
.avtal-rader td { vertical-align: top; }
.avtal-rader-text { width: 55%; }
.avtal-listor > .bs-card { margin-top: 0; }
.avtal-radlista { display: flex; flex-direction: column; gap: 12px; }
.avtalrad { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--fill); }
.avtalrad-huvud { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.avtal-matarhjalp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); }
.avtal-matarhjalp > select { width: auto; }
.avtal-matarhjalp-lokaler { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1; }

/* Vidarefakturering: leverantörsfakturor på utkastet (fakturor/_levfakturor.html) */
.levf { display: grid; grid-template-columns: 230px minmax(0, 1fr) 360px; gap: 16px; min-height: 70vh; }
.levf > .bs-empty, .levf > .tom { grid-column: 1 / -1; }
.levf-lista { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 75vh; }
.levf-val { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 8px 10px; color: inherit; }
.levf-val:hover { background: var(--fill); }
.levf-val.active { background: var(--blue-bg); border-color: var(--primary); }
.levf-val-namn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.levf-val-belopp { font-weight: 600; white-space: nowrap; }
.levf-val .small { grid-column: 1 / -1; }
.levf-pdf { min-width: 0; display: flex; overflow: hidden; }
.levf-pdf .pdfvisare { flex: 1; min-width: 0; height: 75vh; }
.levf-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.levf-huvud { display: flex; flex-direction: column; gap: 2px; }
.levf-rader { max-height: 32vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.levf-namn { border: 0; background: none; padding: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.levf-namn:hover, .levf-namn:focus-visible { color: var(--primary); text-decoration: underline; }
.levf-underlag { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--fill); }
.levf-knappar { display: flex; gap: 8px; align-items: center; margin-top: auto; }
/* Mobilen: en spalt som rullar (inget krymper), fakturan väljs i en rullgardin och PDF:en har fast höjd. */
@media (max-width: 991.98px) {
  .levf { display: flex; flex-direction: column; min-height: 0; }
  .levf > * { flex-shrink: 0; }
  .levf-lista { display: none; }
  .levf-pdf:has(.pdfvisare) { height: 55vh; border: 1px solid var(--border); border-radius: 10px; }
  .levf-pdf .pdfvisare { height: 100%; }
}
.ikonknapp-pa { background: var(--blue-bg); color: var(--primary); }
.levf-bifoga { margin: 0; }

/* Inställningar (moduler/installningar) */
.inst-detalj { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.inst-form { display: flex; flex-direction: column; gap: 16px; }
.inst-form .bs-card + .bs-card { margin-top: 0; }
.inst-detalj > .bs-card + .bs-card { margin-top: 0; }
.inst-huvud { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inst-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 1.15rem; font-weight: 700; }
.inst-fot { display: flex; justify-content: flex-end; }
.inst-meny-val { display: inline-flex; align-items: center; gap: 10px; }
.inst-huvud { position: sticky; top: var(--topbar-h, 0); z-index: 5; padding: 8px 0; background: var(--bg); }
.inst-lista-huvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.inst-lista { display: flex; flex-direction: column; gap: 8px; }
.inst-rad { display: flex; align-items: flex-end; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--fill); }
.inst-rad-namn { min-width: 140px; align-self: center; font-weight: 600; }
.inst-rad .falt-checkbox { align-self: flex-end; padding-bottom: 6px; }
.inst-logo-rad { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.inst-logo-bild { width: 200px; height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 12px; background: #fff; padding: 8px; }
.inst-logo-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inst-logg-rad { font-size: 13px; overflow-wrap: anywhere; }
.inst-logg td { vertical-align: top; }
@media (max-width: 575.98px) { .inst-rad { flex-direction: column; align-items: stretch; } }
.login-enheter { margin: 12px 0 0; color: var(--subtle); font-size: 12px; text-align: center; }
.profil-enheter { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; }
.profil-enheter li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.profil-enhet-ikon { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: var(--fill); color: var(--label); flex-shrink: 0; }
.inst-meny-val { flex: 1; }
.inst-krav { display: inline-flex; margin-right: 4px; }
.inst-krav-klar { color: var(--green-text, #16a34a); }
.inst-krav-saknas { color: #d97706; }
.register-val .inst-krav-klar .ikon, .register-val.aktiv .inst-krav-klar .ikon { color: var(--green-text); }
.register-val .inst-krav-saknas .ikon, .register-val.aktiv .inst-krav-saknas .ikon { color: #d97706; }

/* Verifikationer (moduler/bokforing) */
.ver-ny-sida { max-width: 1100px; }
.ver-ny { display: flex; flex-direction: column; gap: 16px; }
.ver-ny .bs-card + .bs-card { margin-top: 0; }
.ver-summa { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Räkenskapsår (bokforing/_rakneskapsar.html) */
.rar-ny { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rar-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.rar-lista > li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.rar-lista > li.rar-aktuellt { background: var(--blue-bg); }
.rar-form { flex: 1; }
.rar-knappar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rar-annat { margin-top: 16px; }
.rar-annat summary { cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ver-kopplad { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--fill); }
.ver-kopplad-ikon { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: var(--blue-bg); color: var(--primary); flex-shrink: 0; }

/* Flex-barn som ska kunna krympa (t.ex. text-truncate i en flexrad). Finns inte i Bootstrap. */
.min-w-0 { min-width: 0 !important; }

/* Banktransaktioner (moduler/bank) */
.bank-sida { display: flex; flex-direction: column; gap: 12px; }
.bank-verktyg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.bank-tabell td { vertical-align: middle; }
.bank-in { color: var(--green-text); }
.bank-ut { color: var(--text); }
.bank-forslag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--fill); font-size: 12px; color: var(--label); }
.bank-forslag-saker { background: var(--green-bg); color: var(--green-text); }
.bank-val-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bank-val { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; margin: 0; }
.bank-val:has(input[name="val"]:checked) { border-color: var(--primary); background: var(--blue-bg); }
.bank-belopp { width: 120px; text-align: right; }
.bank-sok { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bank-matcha-fot { justify-content: flex-end; gap: 8px; }
.bank-summa { margin-right: auto; font-size: 13px; }
/* Banktransaktioner som kort (som i Flutter) */
.bank-rader { display: flex; flex-direction: column; gap: 10px; }
.bank-rader .bank-verktyg { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.bank-kort { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.bank-kort .dropdown-menu { z-index: 1050; }
.bank-kort-huvud { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.bank-kryss { width: 18px; flex-shrink: 0; }
.bank-pil { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--border); flex-shrink: 0; }
.bank-pil-in { color: var(--green-text); background: var(--green-bg); }
.bank-pil-ut { color: var(--red-text); background: var(--red-bg); }
.bank-belopp-kort { font-weight: 700; white-space: nowrap; }
.bank-ut { color: var(--red-text); }
.bank-forslag-lista { list-style: none; margin: 0; padding: 0 14px 6px 14px; border-top: 1px solid var(--border); background: var(--fill); border-radius: 0 0 13px 13px; }
.bank-forslag-lista li { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 30px; }
.bank-forslag-lista li + li { border-top: 1px dashed var(--border); }
.bank-forslag-ikon { color: var(--label); display: flex; }
.bank-bokford { color: var(--label); display: inline-flex; vertical-align: middle; }
.bank-matcha-huvud { align-items: flex-start; gap: 12px; }
.bank-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.bank-chip { display: flex; flex-direction: column; gap: 1px; padding: 6px 12px; border-radius: 10px; background: var(--fill); border: 1px solid var(--border); font-size: 15px; }
.bank-chip > span { font-size: 11px; color: var(--label); }
.bank-chip-bred { min-width: 0; max-width: 340px; }
.bank-chip-bred strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-chip-summa { display: grid; grid-template-columns: auto auto; column-gap: 16px; }
.bank-chip-summa > span { grid-row: 1; }
.bank-chip-summa[data-lage="ok"] { background: var(--green-bg); border-color: var(--green-text); }
.bank-chip-summa[data-lage="over"] { background: var(--red-bg); border-color: var(--red-text); }
.bank-chip-summa[data-lage="kvar"] { background: var(--blue-bg); }
@media (max-width: 575.98px) {
  .bank-forslag-lista li { flex-wrap: wrap; row-gap: 6px; padding-left: 0; }
  .bank-forslag-lista li > .flex-grow-1 { flex: 1 1 calc(100% - 42px); }
  .bank-forslag-lista li > .flex-grow-1 .text-truncate { white-space: normal; }  /* hela texten, på flera rader */
  .bank-forslag-lista li > .text-nowrap { margin-left: auto; }
  .bank-kort-huvud { gap: 10px; padding: 12px; }  /* på en rad: texten krymper (min-w-0) */
  .bank-verktyg { flex-wrap: wrap; }
}
.bank-bokf { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); flex-shrink: 0; cursor: pointer; }
.bank-bokf-ok { color: var(--green-text); }
.bank-bokf-ej { color: #d97706; border-color: #fcd34d; background: #fffbeb; }
.bank-bokf:hover { box-shadow: 0 0 0 3px var(--blue-bg); }
.bank-val-sparrad { opacity: .75; cursor: default; }
.bank-val-sparrad input[name="val"] { cursor: not-allowed; }
.bank-ver { margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; }
.bank-ver[open] { background: var(--fill); border-style: solid; }
.bank-ver summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.bank-ver[open] summary { margin-bottom: 8px; }
/* Momsrapporten (bokforing/moms.html) */
.moms-summa { display: flex; flex-direction: column; gap: 2px; }
.moms-belopp { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.moms-rutor details summary { cursor: pointer; }
.moms-konton { list-style: none; margin: 6px 0 2px; padding: 0 0 0 12px; border-left: 2px solid var(--border); font-size: 13px; width: 100%; }
.moms-rutor details { width: 100%; }
.moms-konton li { display: flex; gap: 8px; padding: 2px 0; }
.moms-49 td { font-weight: 700; border-top: 2px solid var(--border); }
.moms-period { min-width: 300px; }
.moms-pdf-kropp { height: 80vh; display: flex; }
.moms-pdf-kropp .pdfvisare { flex: 1; min-width: 0; }
/* Rapporter: flikar och SIE */
/* Flikraden sveps i sidled när flikarna inte får plats (mobil); den aktiva visas (rapport_flikar). */
.rapport-flikar { display: flex; gap: 4px; min-width: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rapport-flikar::-webkit-scrollbar { display: none; }
.rapport-flik { flex: 0 0 auto; padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--label); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 575.98px) { .rapport-flik { padding: 8px 10px; } }
.rapport-flik:hover { color: var(--text); }
.rapport-flik.aktiv { color: var(--primary); border-bottom-color: var(--primary); }
.sie { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.sie .bs-card + .bs-card { margin-top: 0; }
.sie-fakta { margin-bottom: 12px; }
/* Resultat, balans och huvudbok */
.rapport-val { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rapport-val-falt { min-width: 150px; }
.rapport-val-falt .form-label { margin-bottom: 2px; font-size: 12px; }
.rapport-val-konto { min-width: 90px; width: 100px; }
.rapport-filer { display: flex; gap: 8px; margin-left: auto; }
.rapport-tabell td, .rapport-tabell th { padding-top: 6px; padding-bottom: 6px; }
.rapport-grupp th { padding-top: 14px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); }
.rapport-summa th, .rapport-summa td { font-weight: 600; border-top: 1px solid var(--border); }
.rapport-delresultat th, .rapport-delresultat td { font-weight: 700; background: var(--fill); }
.rapport-slut th, .rapport-slut td { font-weight: 800; border-top: 2px solid var(--text); }
.rapport-avsnitt th { padding-top: 18px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--label); }
.huvudbok-rubrik { font-size: 15px; font-weight: 700; margin: 0; }
.huvudbok-konto + .huvudbok-konto { margin-top: 12px; }
/* Bokföringsikonen i listor (Kolumn format="bokford") */
.bokf-ikon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.bokf-ikon-ok { color: var(--green-text); }
.bokf-ikon-ej { color: #d97706; border-color: #fcd34d; background: #fffbeb; }
.bokf-ikon:hover { box-shadow: 0 0 0 3px var(--blue-bg); }
.bokf-lank { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.bokf-lank-ok { color: var(--green-text); }
.bokf-lank-ej { color: #b45309; }
.bokf-lank:hover { text-decoration: underline; }
/* Anslutning till banken (Inställningar → Bank) */
.bank-lista { display: flex; flex-direction: column; gap: 6px; }
.bank-val-bank { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; text-align: left; }
.bank-val-bank:hover { border-color: var(--primary); background: var(--blue-bg); }
.bank-val-bank img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; flex-shrink: 0; }

/* ---------- Inkorg ---------- */
.inkorg-fil { height: 65vh; display: flex; }
.inkorg-fil .pdfvisare { flex: 1; min-width: 0; }

/* ---------- Händelselogg (Inställningar) ---------- */
.logg-lista { list-style: none; margin: 0; padding: 0; }
.logg-rad { display: flex; gap: 16px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.logg-rad:last-child { border-bottom: 0; }
.logg-rad-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.logg-rad-text a { color: var(--text); text-decoration: none; }
.logg-rad-text a:hover { color: var(--primary); text-decoration: underline; }
.logg-rad-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex-shrink: 0; }
.logg-fler { padding: 12px 16px; text-align: center; }
@media (max-width: 575.98px) {
  .logg-rad { flex-direction: column; gap: 6px; }
  .logg-rad-meta { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: flex-start; text-align: left; }
}

/* ---------- Klockans panel (notiser) ---------- */
.notis-panel { --bs-offcanvas-width: min(440px, 100vw); --bs-offcanvas-bg: var(--surface); }
.notis-panel .offcanvas-body { display: flex; flex-direction: column; }
.notis-huvud { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.notis-flikar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.notis-flik { border: 0; background: transparent; padding: 6px 10px; border-radius: var(--radius-btn); font-size: 13px; font-weight: 600; color: var(--label); }
.notis-flik.aktiv { background: var(--fill); color: var(--text); }
.notis-lista { list-style: none; margin: 0; padding: 0; flex: 1; }
.notis-rad { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--notis); }
.notis-ny { background: var(--fill); }
.notis-ikon { color: var(--notis); padding-top: 1px; }
.notis-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notis-knappar { display: flex; gap: 6px; margin-top: 6px; }
.notis-fot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); margin-top: auto; }

/* ---------- Fortnox ---------- */
.fortnox-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.fortnox-grupp { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; font-size: 13px; }
.fortnox-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-btn); }
.fortnox-rad { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.fortnox-rad:last-child { border-bottom: 0; }
.fortnox-rad .form-check-input, .fortnox-rad-tom { flex-shrink: 0; width: 16px; margin-top: 3px; }
.fortnox-rad-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fortnox-stopp { background: var(--fill); }
.fortnox-snabbval { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fortnox-konto { cursor: pointer; }
.fortnox-konto:hover > td { background: var(--fill); }
.fortnox-sidor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fortnox-omatchad > td, .fortnox-omatchad-markering { background: var(--red-bg, #FEF2F2); }
.fortnox-fil { display: flex; gap: 8px; flex-wrap: wrap; }
.fortnox-fil .form-control { max-width: 360px; }
@media (max-width: 991.98px) { .fortnox-sidor { grid-template-columns: 1fr; } }

/* ---------- Dokumentarkivet ---------- */
.dok-sok { display: flex; gap: 8px; margin-bottom: 12px; }
.dok-sortering { width: auto; flex-shrink: 0; }
.dok-lista { list-style: none; margin: 0; padding: 0; }
.dok-rad { border-bottom: 1px solid var(--border); }
.dok-rad:last-child { border-bottom: 0; }
.dok-rad-knapp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; background: transparent; text-align: left; color: var(--text); }
.dok-rad-knapp:hover { background: var(--fill); }
.dok-rad-ikon { color: var(--label); flex-shrink: 0; }
.dok-rad-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dok-fler { padding: 12px 16px; text-align: center; list-style: none; }
.dok-forhand { height: 50vh; display: flex; }
.dok-forhand .pdfvisare { flex: 1; min-width: 0; }
.dok-nya-filer { display: flex; gap: 8px; }
.dok-nya-filer .btn { white-space: nowrap; flex-shrink: 0; }
.dok-lank { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); }
.kat-roller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
@media (max-width: 575.98px) { .dok-sok { flex-direction: column; } .kat-roller { grid-template-columns: 1fr; } }

/* ---------- Dela till BeeSimpl ---------- */
.dela { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; }
.dela-val { display: flex; flex-direction: column; gap: 8px; }
.dela-alt { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-btn); cursor: pointer; }
.dela-alt:has(input:checked), .dela-alt-vald { border-color: var(--primary); background: var(--fill); }
.dela-foretag { display: flex; flex-direction: column; gap: 8px; }
.dela-foretag button.dela-alt { background: var(--surface); color: var(--text); font: inherit; }
.dela-alt-vald { cursor: default; font-weight: 600; }

/* ---------- Tabeller som kort på smal skärm (core.js tabellerTillKort) ----------
   Första raden: rubriken, statusmärket och huvudbeloppet (sista beloppskolumnen). Därunder övriga uppgifter
   som "etikett värde" på en rad som bryts, och knapparna sist till höger. */
@media (max-width: 575.98px) {
  .vy-tabell.mobilkort, .vy-tabell.mobilkort > tbody, .vy-tabell.mobilkort > tfoot { display: block; width: 100%; }
  .vy-tabell.mobilkort > thead { display: none; }
  .table-responsive:has(> .vy-tabell.mobilkort) { overflow: visible; }
  .vy-tabell.mobilkort > tbody > tr, .vy-tabell.mobilkort > tfoot > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
    padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface);
  }
  .vy-tabell.mobilkort > * > tr::after { content: ""; order: 1; flex-basis: 100%; height: 2px; }
  .vy-tabell.mobilkort > * > tr > td, .vy-tabell.mobilkort > * > tr > th { display: block; padding: 0 !important; border: 0; background: transparent; text-align: left !important; }
  .vy-tabell.mobilkort > * > tr > :empty { display: none; }
  .vy-tabell.mobilkort > * > tr > td { order: 2; font-size: 12.5px; color: var(--text); }
  .vy-tabell.mobilkort > * > tr > td[data-label]:not(.kort-titel):not(.kort-status):not(.kort-atgard):not(.kort-kryss)::before { content: attr(data-label) " "; color: var(--subtle); font-weight: 500; font-size: 12.5px; }
  .vy-tabell.mobilkort .kort-titel { order: 0; flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 14px; }
  .vy-tabell.mobilkort .kort-status, .vy-tabell.mobilkort .kort-summa { order: 0; flex: 0 0 auto; }
  .vy-tabell.mobilkort .kort-summa { font-weight: 700; font-size: 14px; white-space: nowrap; }
  .vy-tabell.mobilkort .kort-belopp { font-weight: 600; }
  .vy-tabell.mobilkort .kort-atgard { order: 3; margin-left: auto; }
  .vy-tabell.mobilkort > * > tr.kort-grupp { display: block; padding: 8px 4px 2px; border: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--label); }
  .vy-tabell.mobilkort > * > tr.kort-grupp::after { display: none; }
  .vy-tabell.mobilkort > * > tr:last-child { margin-bottom: 0; }
  /* Valläget (Slå samman): kryssrutan före rubriken. Sammanslagna: raderna under är indragna kort. */
  .vy-tabell.mobilkort .kort-kryss { order: 0; flex: 0 0 auto; }
  .vy-tabell.mobilkort > tbody > tr.order-under { margin-left: 18px; }
  .vy-tabell.mobilkort tr.order-under .kol-namn { padding-left: 0 !important; }
  .vy-tabell.mobilkort tr.order-under .kol-namn::before { display: none; }
}

/* ---------- Produktkalkyl (kalkyler.py): beräkningen per månad ---------- */
.kalkyl-intervall { display: flex; align-items: center; gap: 6px; }
.kalkyl-intervall .form-control { width: 150px; }
.kalkyl-perioder { display: flex; flex-direction: column; }
.kalkyl-period { border-bottom: 1px solid var(--divider); }
.kalkyl-period summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 4px; list-style: none; cursor: pointer; }
.kalkyl-period summary::-webkit-details-marker { display: none; }
.kalkyl-period summary:hover { background: var(--fill); }
.kalkyl-manad { min-width: 130px; font-weight: 600; }
.kalkyl-priser { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; font-size: 13px; }
.kalkyl-priser code, .kalkyl-varden code { color: var(--label); }
.kalkyl-kontroll { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.kalkyl-kontroll.ok, .kalkyl-kontroller .ok { color: #15803d; }
.kalkyl-kontroll.fel, .kalkyl-kontroller .fel { color: #b91c1c; }
.kalkyl-kontroller .okand { color: var(--subtle); }
.kalkyl-pil { color: var(--subtle); transition: transform .15s; }
.kalkyl-period[open] .kalkyl-pil { transform: rotate(180deg); }
.kalkyl-detalj { padding: 4px 4px 14px; }
.kalkyl-rubrik { margin: 12px 0 4px; color: var(--label); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kalkyl-varden { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 20px; margin: 0; }
.kalkyl-varden > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--divider); font-size: 13px; }
.kalkyl-varden dd { display: inline-flex; align-items: center; gap: 2px; margin: 0; white-space: nowrap; }
.kalkyl-kontroller { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.kalkyl-kontroller li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.kalkyl-saknas { margin: 4px 0; color: #b45309; font-size: 13px; }
.ikonknapp-liten { width: 28px; height: 28px; }
@media (max-width: 575.98px) {
  .kalkyl-priser { margin-left: 0; width: 100%; }
  .kalkyl-intervall .form-control { width: 128px; }
}
/* Produktens marginal (sidopanelen) och inköpspriserna (fliken Inköp). */
.marginal-lista li { align-items: flex-start; }
.rad-vald td { background: var(--blue-bg); }
/* Kalkylens automation (automation.py): delarna och valen i popuperna. */
.automation-delar { display: flex; flex-direction: column; gap: 16px; }
.automation-delar .kort-huvud { align-items: flex-start; }
.auto-val li { padding: 0; }
.auto-val-knapp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.auto-val-knapp:hover, .auto-val-knapp:focus-visible { background: var(--fill); }
.auto-val-knapp > .ikon:last-child { color: var(--subtle); flex-shrink: 0; }
#f-uttryck, #f-namn { font-family: var(--bs-font-monospace); }
.infoga-hjalp { line-height: 2; }
.infoga-hjalp > span { margin-right: 4px; }
.infoga-knapp { margin: 0 3px 3px 0; padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--fill); color: var(--text); font-family: var(--bs-font-monospace); font-size: 12px; line-height: 1.6; }
.infoga-knapp:hover { border-color: var(--primary); color: var(--primary); }

/* Skanna kvitto (js/skanner.js): kameran med ramen, justera hörnen, sidorna */
.skanner { max-width: 720px; margin: 0 auto; }
.skanner-steg { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.skanner-vy { position: relative; display: inline-block; max-width: 100%; border-radius: var(--radius-card); overflow: hidden; background: #000; }
.skanner-vy video { display: block; max-width: 100%; max-height: 68vh; }
.skanner-ram { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.skanner-status { margin: 0; color: var(--label); font-size: 14px; text-align: center; min-height: 1.5em; }
.skanner-knappar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.skanner-avtryckare { width: 68px; height: 68px; border-radius: 50%; border: 4px solid var(--primary); background: var(--surface);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 30px var(--primary); }
.skanner-avtryckare:disabled { opacity: .4; }
.skanner-auto { white-space: nowrap; }
.skanner-justera { width: 100%; display: flex; justify-content: center; }
.skanner-justera canvas { max-width: 100%; touch-action: none; border-radius: var(--radius-input); cursor: grab; }
.skanner-filter { display: flex; gap: 6px; }
.skanner-sidor { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; width: 100%; }
.skanner-sida { position: relative; border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--surface); padding: 6px; }
.skanner-sida canvas { display: block; width: 100%; height: auto; }
.skanner-sida-nr { position: absolute; left: 10px; bottom: 10px; padding: 0 6px; border-radius: var(--radius-chip); background: rgba(15, 23, 42, .7); color: #fff; font-size: 12px; }
.skanner-ta-bort { position: absolute; top: 10px; right: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 18px; line-height: 1; }
.skanner-spara { width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* Variantens bild (produkter/_variantrad.html): miniatyr som öppnar huvudproduktens bilder */
.variant-bild-knapp { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-input); background: var(--fill); color: var(--label); overflow: hidden; }
.variant-bild-knapp img { width: 100%; height: 100%; object-fit: cover; }
.variant-bild-meny { max-height: 320px; overflow-y: auto; min-width: 240px; }
.variant-bild-meny .dropdown-item { display: flex; align-items: center; gap: 8px; }
.variant-bild-meny img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-chip); flex: 0 0 36px; }

/* Radens ikoner (ListConfig.radikoner), t.ex. virtuell produkt, bilder och filer */
.rad-ikon { display: inline-flex; align-items: center; gap: 3px; color: var(--primary-dark); }
.rad-ikon small { font-size: 12px; font-weight: 600; color: var(--label); }
.rad-ikon-fel { color: var(--red-text); }
.rad-ikon-varning { color: #B45309; }
.rad-ikoner { display: inline-flex; align-items: center; gap: 12px; margin-right: 10px; vertical-align: middle; }
.kol-atgard-ikoner { width: auto; min-width: 60px; }
.kol-atgard-ikoner > .ikonknapp, .kol-atgard-ikoner > .dropdown { vertical-align: middle; }
.kortrad .rad-ikoner { margin: 4px 0 0; }

/* Kom igång på inställningssidorna */
.inst-kom-igang { border-color: var(--blue-border); background: var(--blue-bg); }
.inst-kom-igang .inst-krav { display: inline-flex; vertical-align: -2px; }
.inst-kom-igang-val { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Listans datumfilter (Filter typ="datum"): från och till */
.filter-datum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-datum-falt { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--label); margin: 0; }

/* Banktransaktionernas datum (från, till) bredvid sökningen */
.bank-filter { flex-wrap: wrap; }
.bank-datum { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--label); }
.bank-datum input { width: auto; }
@media (max-width: 575.98px) {
  /* Mobil: sökningen på hela bredden, Från och Till bredvid varandra, sorteringen under. */
  .bank-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bank-filter > .sokfalt, .bank-filter > :last-child { grid-column: 1 / -1; }
  .bank-datum { flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; font-size: 12px; }
  .bank-datum input { width: 100%; min-width: 0; }
}

/* Bokföringspopupen: välj förslag (AI, mall, som förra) */
.fb-kallor { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* Min profil → Notiser (push) */
.push-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.push-rad-huvud { border-bottom: 0; }
.push-typer { margin: 4px 0 0; }
.push-typer td, .push-typer th { vertical-align: middle; }
.push-typer th:not(:first-child), .push-typer td:not(:first-child) { width: 72px; }
.push-typ-namn { font-weight: 500; }
.push-av { opacity: .5; }
.push-foretag { display: flex; flex-direction: column; gap: 6px; }
.push-knappar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.push-av-lage { padding: 8px 0; }
.push-val { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.push-val-av { opacity: .5; cursor: default; }
@media (max-width: 991.98px) {
  /* Notistyperna som kort: "Notis" och "Ljud" framför kryssrutorna, på en rad under typens namn. */
  .vy-tabell.mobilkort.push-typer > tbody > tr > td.kort-atgard { order: 2; margin-left: 0; margin-right: 24px; }
  .vy-tabell.mobilkort.push-typer > tbody > tr > td.kort-atgard[data-label]::before { content: attr(data-label); color: var(--label); font-weight: 500; font-size: 14px; margin-right: 8px; }
  .vy-tabell.mobilkort.push-typer > tbody > tr > td.kort-atgard { display: inline-flex !important; align-items: center; }
}

/* ---------- Import (moduler/importer) ---------- */
.imp-fakta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--label); font-size: 13px; }
.imp-fakta span { display: inline-flex; align-items: center; gap: 6px; }
.imp-nyckeltal { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.imp-lage { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.imp-ok { color: var(--green-text); }
.imp-fel { color: var(--red-text); }
.imp-varning { color: #9A6200; }
.imp-info { color: var(--primary); }
.imp-tabell td { vertical-align: middle; }
.imp-delar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.imp-delar > .bs-card { margin-top: 0; }  /* rutnätets gap ger mellanrummet, inte .bs-card + .bs-card */
.imp-dokument { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.imp-dokument li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.imp-panel { display: flex; flex-direction: column; gap: 4px; }
.imp-avsnitt { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.imp-avsnitt:last-child { border-bottom: 0; }
.imp-rubrik { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.imp-kontroll { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.imp-kontroll li { display: flex; align-items: flex-start; gap: 6px; }
.imp-kontroll .ikon { flex: none; margin-top: 2px; }
.imp-special { display: flex; flex-direction: column; gap: 6px; }
.imp-krav { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.imp-krav li { display: flex; align-items: center; gap: 8px; }
.imp-krav li > span:first-child { flex: 1; }
.imp-niva { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.imp-niva-krav { background: var(--red-bg); color: var(--red-text); }
.imp-niva-varning { background: #FDEFD3; color: #8A5A00; }
.imp-niva-av { background: var(--fill); color: var(--label); }
.imp-rad { padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
.imp-rad .form-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mobilen: beskrivningen på egen rad, talen två och två, så att en varurad inte blir en lång kolumn. */
@media (max-width: 767.98px) {
  .imp-rad > .col-12:not(:first-of-type) { flex: 0 0 50%; max-width: 50%; }
  .imp-rad > .col-12:has(input[name$=".Beskrivning"]) { flex: 0 0 100%; max-width: 100%; }
}

/* Leverantörens sida (/import/{abonnemang}/{token}): egen layout, ingen meny. */
.portal { min-height: 100dvh; background: var(--fill); }
.portal-bredd { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.portal-huvud { background: #1E3557; color: #fff; }
.portal-huvud-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.portal-huvud .portal-dim { color: #C9D4E5; }
.portal-ikon { border-radius: 8px; }
.portal-dim { color: var(--label); font-size: 13px; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding-top: 28px; padding-bottom: 56px; align-items: start; }
@media (max-width: 991.98px) { .portal-grid { grid-template-columns: 1fr; } .portal-sida { order: -1; } }
.portal-main, .portal-sida { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.portal-sida { position: sticky; top: 16px; }
@media (max-width: 991.98px) { .portal-sida { position: static; } }
.portal-smal { max-width: 560px; padding-top: 48px; }
.portal-intro { display: flex; flex-direction: column; gap: 8px; }
.portal-titel { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.portal-frist { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 8px; background: #FDEFD3; color: #8A5A00; align-self: flex-start; }
.portal-rubrik { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.portal-steg { display: flex; flex-direction: column; gap: 10px; }
.portal-steg-huvud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.portal-fel { color: var(--red-text); font-size: 13px; }
.portal-varning { color: #9A6200; font-size: 13px; }
.portal-fil { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.portal-upp-yta { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; border: 1.5px dashed var(--border); border-radius: 10px; cursor: pointer; }
.portal-upp-yta:hover, .portal-upp-yta:focus-within { border-color: var(--primary); background: var(--blue-bg); }
.portal-special { display: flex; flex-direction: column; gap: 8px; }
.portal-checklista { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; }
.portal-checklista li { display: flex; gap: 8px; align-items: flex-start; }
.portal-checklista li .ikon { flex: none; margin-top: 2px; }
.portal-checklista li.klar .ikon { color: var(--green-text); }
.portal-checklista li.saknas .ikon { color: var(--subtle); }
.portal-checklista a { color: inherit; }
.portal-fakta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: 13px; }
.portal-fakta dt { color: var(--label); font-weight: 500; }
.portal-fakta dd { margin: 0; }
.portal-sammanfattning { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.portal-sammanfattning li { padding-bottom: 8px; border-bottom: 1px solid var(--divider); }

/* Smala mobiler (320 px): översiktens kolumn och lönekörningarnas månadsväljare krymper. */
@media (max-width: 767.98px) { .oversikt-rutnat { grid-template-columns: minmax(0, 1fr); } }
/* En dold tabell (för skärmläsare) krymper inte till 1 px som tabell – som block gör den det. */
table.visually-hidden { display: block; }
@media (max-width: 359.98px) {
  .lon-manad { padding-inline: 4px; font-size: 12px; }
  .sidhuvud-knappar { gap: 4px; }
}

/* AI-förbrukning (Inställningar → Uppföljning). */
.ai-manad { font-size: 1rem; font-weight: 600; margin: 4px 0 10px; }
.ai-forbr-rutor { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 575.98px) { .ai-forbr-rutor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ai-forbr-ruta { padding: 8px 10px; } }
.ai-forbr-ruta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--fill); border: 1px solid var(--border); border-radius: var(--radius-input); }
.ai-forbr-ruta { min-width: 0; }
.ai-forbr-etikett { color: var(--label); font-size: 13px; overflow-wrap: anywhere; hyphens: auto; }
.ai-forbr-ruta strong { font-size: 1.15rem; }
.ai-assistent { display: flex; flex-direction: column; gap: 6px; }
.ai-matare { height: 8px; }

/* ---------- AI-assistenten (moduler/assistent) ----------
   Konversationerna till vänster, chatten fyller resten av höjden: meddelandena rullar, frågerutan står kvar längst ner. */
.assistent { --assistent-h: calc(100dvh - var(--topbar-h) - var(--debug-h, 0px)); display: grid; grid-template-columns: 260px minmax(0, 1fr); height: var(--assistent-h); }
.assistent-lista { overflow-y: auto; }
.assistent-konv-rad { position: relative; }
.assistent-konv-rad .register-val { padding-right: 36px; }
.assistent-konv-text { display: flex; flex-direction: column; min-width: 0; }
.assistent-konv-rubrik { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistent-konv-bort { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); opacity: 0; }
.assistent-konv-rad:hover .assistent-konv-bort, .assistent-konv-bort:focus-visible { opacity: 1; }
@media (hover: none) { .assistent-konv-bort { opacity: 1; } }
.assistent-chatt { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.assistent-meddelanden { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.assistent-meddelanden > * { width: 100%; max-width: 860px; margin-inline: auto; }
.assistent-msg { display: flex; flex-direction: column; gap: 8px; }
.assistent-msg-anv { align-items: flex-end; }
.assistent-bubbla { max-width: 100%; padding: 10px 14px; border-radius: var(--radius-card); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.assistent-msg-anv .assistent-bubbla { max-width: 85%; background: var(--primary); color: #fff; white-space: pre-wrap; border-bottom-right-radius: 4px; }
.assistent-svar { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.assistent-svar > :last-child { margin-bottom: 0; }
.assistent-svar p, .assistent-svar ul, .assistent-svar ol { margin: 0 0 8px; }
.assistent-svar ul, .assistent-svar ol { padding-left: 20px; }
.assistent-svar h1, .assistent-svar h2, .assistent-svar h3 { font-size: 15px; font-weight: 700; margin: 10px 0 6px; }
.assistent-svar .table-responsive { margin: 6px 0 8px; }
.assistent-svar .table { font-size: 13px; margin: 0; }
.assistent-svar code { font-size: 12.5px; }
.assistent-status { color: var(--label); font-size: 13px; font-style: italic; }
.assistent-status:empty { display: none; }
.assistent-msg-filer, .assistent-valda-filer { display: flex; flex-wrap: wrap; gap: 6px; }
.assistent-fil { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-chip); background: var(--fill); font-size: 12px; overflow-wrap: anywhere; }
.assistent-fil-bort { border: 0; background: none; padding: 0 2px; color: var(--label); font-size: 15px; line-height: 1; }
.assistent-fraga { padding: 10px 24px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.assistent-fraga > * { max-width: 860px; margin-inline: auto; }
.assistent-valda-filer:not(:empty) { margin-bottom: 8px; }
.assistent-inmatning { display: flex; align-items: flex-end; gap: 8px; }
.assistent-inmatning textarea { resize: none; min-height: 42px; max-height: 200px; }
.assistent-bifoga { cursor: pointer; flex-shrink: 0; height: 42px; }
.assistent-skicka { flex-shrink: 0; height: 42px; }
.assistent-not { margin: 6px auto 0; color: var(--label); font-size: 12px; text-align: center; }
.assistent-intro { text-align: center; margin: auto; padding: 24px 0; max-width: 620px !important; }
.assistent-intro h2 { font-size: 1.3rem; font-weight: 700; margin: 8px 0; }
.assistent-intro-ikon { display: inline-flex; padding: 12px; border-radius: 50%; background: var(--blue-bg); color: var(--blue-text); }
.assistent-intro-not { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-input); background: var(--green-bg); color: var(--green-text); font-size: 13px; }
.assistent-exempel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }
.assistent-kan { text-align: left; margin-top: 8px; font-size: 13px; }
.assistent-kan summary { cursor: pointer; color: var(--primary); font-weight: 600; text-align: center; }
.assistent-kan-delar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.assistent-kan h3 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.assistent-kan ul { padding-left: 18px; margin: 0; }
@media (max-width: 991.98px) {
  .assistent { grid-template-columns: minmax(0, 1fr); }
  .assistent-meddelanden { padding: 14px 12px; }
  .assistent-fraga { padding: 8px 12px 10px; }
}

/* Förslagskortet: inget ändras förrän Utför. */
.forslag { padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); font-size: 14px; }
.forslag-ok { border-left-color: var(--green-text); }
.forslag-fel { border-left-color: var(--red-text); }
.forslag-inaktiv { border-left-color: var(--subtle); }
.forslag-inaktiv .forslag-rader { color: var(--label); }
.forslag-huvud { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.forslag-titel { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.forslag-status { flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-tag); font-size: 12px; font-weight: 600; background: var(--status-inaktiv-bg); color: var(--status-inaktiv-text); }
.forslag-status-info { background: var(--blue-bg); color: var(--blue-text); }
.forslag-status-ok { background: var(--status-aktiv-bg); color: var(--status-aktiv-text); }
.forslag-status-fel { background: var(--red-bg); color: var(--red-text); }
.forslag .bs-banner { margin-bottom: 8px; }
.forslag-rader { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.forslag-rad { display: flex; align-items: flex-start; gap: 8px; }
.forslag-rad .form-check-input { margin-top: 3px; flex-shrink: 0; }
.forslag-rad label { min-width: 0; overflow-wrap: anywhere; }
.forslag-rad-ikon { display: inline-flex; margin-top: 3px; color: var(--label); }
.forslag-rad-fel label { color: var(--subtle); }
.forslag-niva-1 { padding-left: 22px; }
.forslag-niva-2 { padding-left: 44px; font-size: 13px; }
.forslag-rad-beroende label { color: var(--subtle); text-decoration: line-through; }
.forslag-rad-feltext { display: flex; align-items: center; gap: 4px; color: var(--red-text); font-size: 12.5px; }
.forslag-falt { display: flex; flex-direction: column; font-size: 13px; color: var(--label); }
.forslag-fore { text-decoration: line-through; }
.forslag-not { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--label); font-size: 12.5px; }
.forslag-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.forslag-resultat { margin-bottom: 8px; font-size: 13px; }
.forslag-resultat ul { padding-left: 18px; }

/* AI-assistenten som ruta i hörnet (base.html): knappen öppnar rutan, Förstora går till /assistent.
   Knappen flyttas upp på sidor med en egen plusknapp (.fab). I mobilen fyller rutan skärmen. */
.ai-knapp {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1030;
  display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: var(--gradient-primary); color: #fff; box-shadow: 0 6px 20px rgb(37 99 235 / .35);
}
.ai-knapp:hover { background: var(--gradient-primary-hover); }
.ai-knapp:active { transform: scale(.96); }
.ai-knapp[hidden] { display: none; }
body:has(.fab) .ai-knapp { bottom: calc(84px + env(safe-area-inset-bottom)); }
.ai-ruta {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1044;
  display: flex; flex-direction: column; width: 420px; max-width: calc(100vw - 32px);
  height: min(640px, calc(100dvh - var(--debug-h, 0px) - 32px));
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 12px 40px rgb(15 23 42 / .22);
}
.ai-ruta[hidden] { display: none; }
.ai-ruta-huvud { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ai-ruta-titel { display: flex; align-items: center; gap: 8px; flex: 1; margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.ai-ruta-titel .ikon { color: var(--primary); }
.ai-ruta-innehall { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ai-ruta-innehall > .assistent-chatt { flex: 1; }
.ai-ruta-laddar { padding: 16px; }
.ai-ruta .assistent-meddelanden { padding: 12px; gap: 10px; }
.ai-ruta .assistent-fraga { padding: 8px 10px 8px; }
.ai-ruta .assistent-intro { padding: 8px 0; }
.ai-ruta .assistent-intro h2 { font-size: 1.05rem; }
.ai-ruta .assistent-intro p { font-size: 13px; }
.ai-ruta .assistent-intro-ikon { padding: 8px; }
.ai-ruta .assistent-intro-ikon .ikon { width: 22px; height: 22px; }
.ai-ruta .assistent-exempel .btn { font-size: 12px; text-align: left; }
.ai-ruta .assistent-kan-delar { grid-template-columns: minmax(0, 1fr); }
.ai-ruta .assistent-bubbla { padding: 8px 12px; font-size: 13.5px; }
.ai-ruta .assistent-msg-anv .assistent-bubbla { max-width: 90%; }
.ai-ruta .forslag { padding: 10px 12px; font-size: 13.5px; }
@media (max-width: 575.98px) {
  .ai-ruta { inset: var(--debug-h, 0px) 0 0 0; width: 100%; max-width: none; height: auto; border: 0; border-radius: 0; }
}

/* Förpackningar (moduler/produkter/forpackningar). */
.forp-produkter li, .forp-dokument li, .forp-saknas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.forp-dokument a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.forp-total { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

/* Frakten på ordern (order/_frakt_alternativ.html). */
.frakt-alternativ { display: flex; flex-direction: column; gap: 8px; }
.frakt-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-input); }
.frakt-alt-val { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.frakt-handelser li + li { margin-top: 10px; }

/* Kundens betalsida (betala/sida.html). */
.betala { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.betala-rubrik { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.betala-belopp { font-size: 1.4rem; font-weight: 700; }
.betala-klar { padding-block: 32px; }
.betala-ikon { display: inline-flex; margin-bottom: 12px; color: var(--label); }
.betala-ikon-ok { color: var(--green-text); }
.betala-ikon-fel { color: var(--red-text); }
.betala-kassa { padding: 8px; overflow: hidden; }

/* Orderns packbild (kategori 20): etikett i bildens hörn. */
.dokument-bild-etikett { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600;
  background: rgba(17, 24, 39, 0.75); color: #fff; pointer-events: none; }

/* Skattekontot (moduler/skattekonto): saldot överst och kontofältet på okända transaktioner. */
.sk-saldo { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.sk-belopp { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-konto { width: 5.5rem; }

/* Dokumentinställningarna (installningar/dokument.py): fälten och förhandsvisningen bredvid varandra. */
.dok-typ { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); gap: 20px; align-items: start; }
.dok-pdf { min-height: 420px; }
.dok-pdf .pdfvisare { height: 560px; }
.dok-flikar { flex-wrap: wrap; }
@media (max-width: 991px) { .dok-typ { grid-template-columns: 1fr; } }

/* Ny leverantör från granskningen: panelen till höger, PDF:en syns kvar. */
.ny-lev-panel { --bs-offcanvas-width: min(440px, 100vw); }