/*!
 * KFID – style.css
 * Refaktor SAFE – 2025-10-28
 * Mål: Strukturera, deduplicera och centralisera variabler utan visuella beteendeförändringar.
 * Notera:
 *  - Teman (data-theme) oförändrade.
 *  - Samma breakpoints och selektorer som tidigare.
 *  - Fixar: tar bort dubbletter, rättar uppenbara typos (t.ex. saknad punkt i .card-menu__link--next::after)
 *  - Inga nya klasser krävs av HTML/JS.
 */

/************************************
  00. BASVARIABLER & TOKENS
*************************************/
:root {
  /* Layout & rytm */
  --radius: 10px;
  --space: 25px;
  --control-h: 35px;
  --modal-control-h-mobile: 48px;   /* Modal inputs/buttons på mobil/tablet (≤1024px) */
  --modal-control-h-desktop: var(--control-h);  /* Modal inputs/buttons på desktop (≥1025px) */
  --modal-wide-desktop: 860px;      /* Bredare modaler (t.ex. Öppna-listan, Avtal) */
	  --btn-gap: clamp(12px, 4vw, 30px);
	  --btn-font-size: var(--fs-base);
		  --icon-sz: 20px;
		  --input-offset: 13px;
			  /* Form-label spacing */
				  --field-label-gap: 4px; /* mellan label och fält */
				  --field-label-top: 10px; /* luft ovanför label i cell */

		  /* Typografi (UI) */
		  --ui-scale: 1;
		  --ff-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
		  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		  --font: var(--ff-base);

	  /* Font weights: håll få nivåer */
	  --fw-body: 400;
	  --fw-medium: 500;
	  --fw-strong: 600;
	  --fw-display: 800;

			  /* Font sizes (skalas via --ui-scale) */
			  --fs-xs-px: 11px;
			  --fs-body-px: 16px;
			  --fs-sm-px: 13px;
			  --fs-label-px: 12px; /* Labels (text ovanför fält) */
			  --fs-base-px: 14px;
			  --fs-title-px: 18px;
			  --fs-xl-px: 20px;
			  --fs-xxl-px: 22px;

			  --fs-xs: calc(var(--fs-xs-px) * var(--ui-scale));
			  --fs-body: calc(var(--fs-body-px) * var(--ui-scale));
			  --fs-sm: calc(var(--fs-sm-px) * var(--ui-scale));
			  --fs-label: calc(var(--fs-label-px) * var(--ui-scale));
			  --fs-base: calc(var(--fs-base-px) * var(--ui-scale));
			  --fs-title: calc(var(--fs-title-px) * var(--ui-scale));
			  --fs-xl: calc(var(--fs-xl-px) * var(--ui-scale));
			  --fs-xxl: calc(var(--fs-xxl-px) * var(--ui-scale));

			  --fs-input: calc(16px * var(--ui-scale));
			  /* Inputs låses till 16px (ska inte påverkas av typografi-skalning) */
			  --fs-input-text: 16px;
		  --fs-icon-lg: calc(28px * var(--ui-scale));
		  --fs-icon-xl: calc(30px * var(--ui-scale));
		  --lh-body: 1.5;
		  --lh-base: 1.45;
		  --lh-sm: 1.35;
		  --lh-label: 1.2;
		  --lh-title: 1.2;
		  --lh-tight: 1.15;

		  /* Meny font sizes (bas) */
		  --menu-fs-1-px: 14px;
		  --menu-fs-2-px: 12px;
		  --menu-fs-3-px: 11px;
		  --menu-lh: var(--lh-sm);
		  --menu-lh-tight: var(--lh-label);

  /* App-dynamik (sätts ev. via JS) */
  --header-h: 80px;           /* ersätts av faktisk höjd */
  --bottom-nav-h: 64px;       /* ersätts av faktisk höjd */
  --chrome-hide-p: 0;         /* 0 = synlig, 1 = dold */
  --top-chrome-visible-h: var(--header-h); /* JS kan skriva över (t.ex. hero-höjd på mobil) */
  --app-header-offset: calc(env(safe-area-inset-top) + 80px);
  --controls-sticky-top: var(--app-header-offset);

  /* iOS safe-area (fallback: constant() -> env()) */
  --safe-area-inset-left: 0px;
  --safe-area-inset-right: 0px;
  --safe-area-inset-left: constant(safe-area-inset-left);
  --safe-area-inset-right: constant(safe-area-inset-right);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
  --safe-area-inset-x: var(--safe-area-inset-left);

  /* Ytor & färger (tema-agnostiska default) */
  --bg: #fff;
  --fg: #1b1f23;
  --muted: #6b7280;
  /* Label-färg (samma som vanlig text) */
  --label: var(--fg);
  --card: #fff;
  --border: #e5e7eb;
  --input: #f3f4f6;
  --placeholder: #9ca3af;
  --primary: #0f62fe;
  --primary-ink: #fff;
  --ring: #93c5fd;
  --btn-bg: #111827;
  --btn-fg: #e5e7eb;
  --btn-border: #1f2937;
  --menu-link-bg: var(--input);
  --menu-link-hover: color-mix(in srgb, var(--primary) 18%, var(--input));
  --menu-btn-bg: transparent;
  --menu-btn-border: transparent;
  --menu-btn-hover: color-mix(in srgb, var(--primary) 18%, transparent);

  /* Loader */
  --loader-dot-color: #2563eb;
  --loader-overlay-bg: rgba(255, 255, 255, 0.95);

  /* KFID statusfärger */
  --kfid-ok: #16a34a;
  --kfid-partial: #f59e0b;
  --kfid-fail: #ef4444;
  --kfid-none: #9ca3af;
}

@supports (padding-left: max(0px, 0px)) {
  :root { --safe-area-inset-x: max(var(--safe-area-inset-left), var(--safe-area-inset-right)); }
}

/* Teman */
[data-theme="light"] {
  --bg: #ffffff;
  --fg: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #d1d5db;
  --input: #ffffff;
  --placeholder: #9ca3af;
  --primary: #2563eb;
  --primary-ink: #ffffff;
  --btn-bg: #1f2937;
  --btn-fg: #f9fafb;
  --btn-border: #1f2937;
  --ring: #93c5fd;
  --menu-link-bg: #f4f6fb;
  --menu-link-hover: color-mix(in srgb, #2563eb 18%, #eef2ff);
  --menu-btn-bg: #f3f4f6;
  --menu-btn-border: #d8dce3;
  --menu-btn-hover: #e5e7eb;
}

[data-theme="dark"] {
  --bg: #0b1018;             /* Bas bakgrund */
  --fg: #edf2f7;            /* Ljusare text för bättre läsbarhet */
  --muted: #a7b4c7;         /* Ökad kontrast mot bakgrund */
  --card: #121a26;          /* Något mörkare kort för separation */
  --border: #344766;        /* Tydligare avgränsningar */
  --input: #162133;         /* Fält med tydlig kontrast mot text */
  --placeholder: #9fb0c9;   /* Ljusare placeholder */
  --primary: #7bb0ff;       /* Något ljusare blå för bättre hover */
  --primary-ink: #0b1220;
  --btn-bg: #1f2937;
  --btn-fg: #e9eef7;
  --btn-border: #3a4b68;
  --ring: #7bb0ff;
  --menu-link-bg: #1d2a3d;  /* Menyrader syns mot popup-bakgrund */
  --menu-link-hover: color-mix(in srgb, #7bb0ff 38%, #0f172a);
  --menu-btn-bg: rgba(123, 176, 255, 0.18);
  --menu-btn-border: rgba(123, 176, 255, 0.45);
  --menu-btn-hover: rgba(123, 176, 255, 0.28);
}

/* Modern tema (tidigare Livfull) */
[data-theme="modern"] {
  --bg: #f6f5f1;
  --fg: #1f2933;
  --muted: #6f7582;
  --card: #ffffff;
  --border: #dcd5c9;
  --input: #ffffff;
  --placeholder: #9fa6b3;
  --primary: #8c7bb5;
  --primary-ink: #ffffff;
  --btn-bg: #1f2937;
  --btn-fg: #f9fafb;
  --btn-border: #1f2937;
  --ring: #c7b9e6;
  --menu-link-bg: #ece7dc;
  --menu-link-hover: #e3ddcf;
  --menu-btn-bg: #e0dacc;
  --menu-btn-border: #d1c8b6;
  --menu-btn-hover: #d8cfbc;
  --accent-pink: #d7a5ad;
  --accent-peach: #d7b37a;
  --accent-mint: #aebfa8;
  --accent-lavender: #c5b9d6;
  --accent-blue: #a7bacd;
  --accent-yellow: #e8d9b4;
}

/* Auto-tema borttaget */

/**
  MODERN TEMA – SOLIDA ACCENTER (tidigare Livfull)
*************************************/
html[data-theme="modern"] body { background: var(--bg); }
html[data-theme="modern"] article[data-section] {
  --section-accent: var(--menu-link-bg);
  --section-ink: var(--fg);
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--section-accent) 55%, #ede8dc);
  border-left: 6px solid var(--section-accent);
  box-shadow: 0 8px 22px rgba(236, 72, 153, 0.08);
}
html[data-theme="modern"] article[data-section] .grid-wrap {
  background: #fff;
  border-color: color-mix(in srgb, var(--section-accent) 45%, #f8fafc);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
html[data-theme="modern"] article[data-section] .grid-head {
  background: color-mix(in srgb, #ffffff 80%, var(--section-accent) 20%);
  color: var(--section-ink);
}
html[data-theme="modern"] article[data-section] .grid-head .head { color: inherit; }
html[data-theme="modern"] article[data-section] .grid-row {
  background: #ffffff;
  border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 35%, #f1f5f9);
}
html[data-theme="modern"] article[data-section] .grid-row:nth-child(odd) {
  background: #ffffff;
}
html[data-theme="modern"] article[data-section] .grid-row:hover {
  background: color-mix(in srgb, #ffffff 92%, var(--section-accent) 8%);
}
html[data-theme="modern"] .grid-row input[type="text"],
html[data-theme="modern"] .grid-row input[type="number"],
html[data-theme="modern"] .grid-row select,
html[data-theme="modern"] .grid-row textarea {
  background: #ffffff;
  color: #111827;
  border-color: var(--border);
}
html[data-theme="modern"] .grid-row input[type="text"]:focus,
html[data-theme="modern"] .grid-row input[type="number"]:focus,
html[data-theme="modern"] .grid-row select:focus,
html[data-theme="modern"] .grid-row textarea:focus {
  border-color: color-mix(in srgb, var(--section-accent, var(--primary)) 60%, var(--primary) 40%);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}
html[data-theme="modern"] .check_b {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--section-accent, var(--primary)) 18%, transparent);
}
html[data-theme="modern"] .check_b__box {
  background: #ffffff;
  border-color: var(--border);
}
html[data-theme="modern"] .check_b__in:focus-visible + .check_b__box { outline-color: var(--ring); }
html[data-theme="modern"] .kfid-current-id {
  background: var(--accent-yellow);
  border-color: color-mix(in srgb, var(--accent-yellow) 65%, transparent);
  color: #5c4b20;
}
html[data-theme="modern"] article[data-section] .kfid-sec-icons .icon-btn {
  background: color-mix(in srgb, var(--section-accent) 70%, #ffffff 30%);
  border-color: color-mix(in srgb, var(--section-accent) 55%, transparent);
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.08);
}
html[data-theme="modern"] article[data-section] .kfid-sec-icons .icon-btn:hover {
  background: color-mix(in srgb, var(--section-accent) 60%, #ffffff 40%);
}
html[data-theme="modern"] article[data-section] .btn.primary {
  background: color-mix(in srgb, var(--section-accent) 65%, var(--primary) 35%);
  border-color: color-mix(in srgb, var(--section-accent) 60%, var(--primary) 40%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--section-accent) 24%, transparent);
}
html[data-theme="modern"] article[data-section] .btn.primary:hover {
  background: color-mix(in srgb, var(--section-accent) 50%, var(--primary) 50%);
}
html[data-theme="modern"] article[data-section] .kfid-sec-left > h3 { color: var(--section-ink); }
html[data-theme="modern"] .card-menu__list > li:nth-child(5n+1) { --livfull-accent-bg: var(--accent-pink); --livfull-accent-fg: #5f3b45; }
html[data-theme="modern"] .card-menu__list > li:nth-child(5n+2) { --livfull-accent-bg: var(--accent-peach); --livfull-accent-fg: #5e4a2c; }
html[data-theme="modern"] .card-menu__list > li:nth-child(5n+3) { --livfull-accent-bg: var(--accent-mint); --livfull-accent-fg: #3f513f; }

/* KFID kontoinställningar-modal */
.kfid-account-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.kfid-account-modal[hidden] {
  display: none;
}
.kfid-account-modal__backdrop {
  /* Keep dimming stable even when modal container scrolls in low-height landscape */
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.kfid-account-modal__card {
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  margin: 16px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 45px rgba(15,23,42,0.45);
  padding: 18px 18px 14px;
  max-height: 90vh;
  overflow-y: auto;
}
.kfid-account-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.kfid-account-modal__header h2 {
  font-size: var(--fs-title);
  margin: 0;
}
.kfid-account-modal__close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-xxl);
  line-height: 1;
  cursor: pointer;
}
.kfid-account-modal__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.kfid-account-modal__body input[type="text"],
.kfid-account-modal__body input[type="email"] {
  width: 100%;
}
.kfid-account-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.kfid-account-modal__actions .btn {
  min-width: 130px;
  flex: 1 0 0;
  max-width: 180px;
  height: var(--modal-control-h-desktop);
  min-height: var(--modal-control-h-desktop);
  max-height: var(--modal-control-h-desktop);
  padding: 0 16px;
  line-height: 1;
  box-sizing: border-box;
}
.kfid-account-status {
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.kfid-account-status--error {
  color: #dc2626;
}
.kfid-account-status--success {
  color: #16a34a;
}

/* Små menyknappar i kontoinfo-kortet */
#kfid-account-info .kfid-account-actions {
  display: inline-block;
}
#kfid-account-info .kfid-account-actions .card-menu__link {
  padding-inline: 8px 10px;
  white-space: nowrap;
}
#kfid-customers-modal .kfid-custgrid--head .c:nth-child(3),
#kfid-customers-modal .kfid-custgrid--body .openrow .c:nth-child(3){
  justify-content: center;
  text-align: center;
}
#kfid-superadmin-company-filter {
  margin-top: 12px !important;
}
@media (max-width: 1024px) {
  #kfid-superadmin-company-filter {
    margin-top: 8px !important;
  }
}
body:not(.kfid-has-account-card) #kfid-account-info { display: none !important; }
body.kfid-has-account-card #kfid-account-info { display: block; }

/* Kontoinfo-kort i menyn (drawer) */
.kfid-account-card {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 12px 0 8px;
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh);
  color: var(--fg);
  font-weight: var(--fw-body);
}
.kfid-account-card__title {
  margin-bottom: 8px;
  color: var(--fg);
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh);
  font-weight: var(--menu-fw-strong);
}
.kfid-account-card__body { color: inherit; }
.kfid-account-card__row { margin-bottom: 6px; }
.kfid-account-card__key {
  font-weight: var(--menu-fw-strong);
  color: var(--fg);
}
.kfid-account-card__section { margin-top: 8px; }
.kfid-account-card__sectiontitle {
  margin: 8px 0 6px;
  color: var(--fg);
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh);
  font-weight: var(--menu-fw-strong);
}
@media (max-width: 768px) {
  .kfid-account-modal__card {
    margin: 12px;
    border-radius: 14px;
    padding: 14px 14px 12px;
  }
  .kfid-account-modal__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
  }
  .kfid-account-modal__actions .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
  }
}

/* Matcha övriga modaler: större kontroller på mobil/tablet */
@media (max-width: 1024px) {
  .kfid-account-modal__body input[type="text"],
  .kfid-account-modal__body input[type="email"],
	  .kfid-account-modal__body input[type="password"] {
	    height: var(--modal-control-h-mobile) !important;
	    line-height: calc(var(--modal-control-h-mobile) - 2px) !important;
			    font-size: var(--fs-input-text) !important;
	  }
	  .kfid-account-modal__actions .btn {
    height: var(--modal-control-h-mobile);
    min-height: var(--modal-control-h-mobile);
    max-height: var(--modal-control-h-mobile);
    padding: 0 24px;
	    font-size: var(--fs-input);
	    line-height: 1;
	  }
}
html[data-theme="modern"] .card-menu__list > li:nth-child(5n+4) { --livfull-accent-bg: var(--accent-blue); --livfull-accent-fg: #324558; }
html[data-theme="modern"] .card-menu__list > li:nth-child(5n+5) { --livfull-accent-bg: var(--accent-lavender); --livfull-accent-fg: #4a3f60; }
html[data-theme="modern"] .card-menu__list > li .card-menu__link:not(.card-menu__link--theme) {
  background: var(--livfull-accent-bg, var(--menu-link-bg));
  color: var(--livfull-accent-fg, var(--fg));
  border: 1px solid transparent;
}
html[data-theme="modern"] .card-menu__list > li .card-menu__link:not(.card-menu__link--theme):hover,
html[data-theme="modern"] .card-menu__list > li .card-menu__link:not(.card-menu__link--theme):focus {
  background: color-mix(in srgb, var(--livfull-accent-bg, var(--menu-link-bg)) 92%, white 8%);
  outline: 2px solid var(--ring);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.12);
}

html[data-theme="modern"] article[data-section="iso"] { --section-accent: var(--accent-mint); --section-ink: #40513f; }
html[data-theme="modern"] article[data-section="cont"] { --section-accent: var(--accent-peach); --section-ink: #5e4a2c; }
html[data-theme="modern"] article[data-section="volt"] { --section-accent: var(--accent-blue); --section-ink: #334458; }
html[data-theme="modern"] article[data-section="rcd"] { --section-accent: var(--accent-lavender); --section-ink: #4a3f60; }
html[data-theme="modern"] article[data-section="vis"] { --section-accent: var(--accent-pink); --section-ink: #5f3b45; }

/************************************
  05. BAS & UTILITY
*************************************/
* { box-sizing: border-box; }
html, body { height: 100%; }

/* Stabil layout när scrollbar visas (undvik symmetriskt sidogap på desktop) */
html { scrollbar-gutter: stable; }
body { scrollbar-gutter: stable; }

/* iOS Safari: förhindra bounce-scroll och dölja adressfält bättre */
html { height: 100%; overflow: hidden; position: fixed; width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  position: relative; width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  font-optical-sizing: auto;
  min-height: 100vh; min-height: 100svh; min-height: 100dvh;
}

:where(b, strong) { font-weight: var(--fw-strong); }
:where(h1) { font-weight: var(--fw-display); line-height: var(--lh-title); }
:where(h2, h3, h4, h5, h6) { font-weight: var(--fw-strong); line-height: var(--lh-title); }

@supports (padding-left: max(0px, 0px)) {
  body { padding-left: var(--safe-area-inset-x); padding-right: var(--safe-area-inset-x); }
}

@supports not (scrollbar-gutter: stable) { body { overflow-y: scroll; } }
/* Stäng av scroll-ankare (Chrome) för att undvika vertikala hopp vid layoutändringar */
html { overflow-anchor: none; scroll-behavior: auto; }

/* Modal-låsning */
html.modal-open, body.modal-open { overflow: hidden; }
html.modal-open body { overflow: hidden !important; }

/* Behåll safe-area vid modal-open utan extra sidoförskjutning */
html.modal-open body {
  padding-right: var(--safe-area-inset-x, var(--safe-area-inset-right, 0px));
}

/* Fallback: äldre browser utan scrollbar-gutter behöver manuell scrollbar-kompensation */
@supports not (scrollbar-gutter: stable) {
  html.modal-open body {
    padding-right: calc(var(--safe-area-inset-x, var(--safe-area-inset-right, 0px)) + var(--kfid-modal-scrollbar-w, 0px));
  }
}

[x-cloak] { display: none !important; }
[hidden] { display: none !important; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.container { width: min(1600px, 92vw); margin-inline: auto; }
.vspace { padding-block: 5px; }
.stack { display: grid; }
.gap { gap: var(--space); }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.muted { color: var(--muted); }

/* Safe-area utility */
.safe-insets {
  padding-left: max(12px, var(--safe-area-inset-left));
  padding-right: max(12px, var(--safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

@supports (padding-left: max(0px, 0px)) {
  .safe-insets {
    padding-left: max(12px, var(--safe-area-inset-x));
    padding-right: max(12px, var(--safe-area-inset-x));
  }
}

/************************************
  10. TOPPHEADER, TOPBAR & SÖK
*************************************/
.topbar-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
#menu-btn { background: var(--menu-btn-bg, none); border: 1px solid var(--menu-btn-border, transparent); padding: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; color: inherit; transition: background 0.2s, border-color 0.2s; }
#menu-btn:hover, #menu-btn:active { background: var(--menu-btn-hover, var(--input)); }
#menu-btn:focus-visible { outline: 2px solid var(--ring); background: var(--menu-btn-hover, var(--input)); }
@media (pointer: coarse) {
  #menu-btn:focus { outline: none; background: var(--menu-btn-bg, none); }
  #menu-btn:active { background: var(--menu-btn-bg, none); }
}
.kfid-menu-hamburger{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  margin-left: 8px;
}
.kfid-menu-hamburger > span{
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.kfid-menu-label,
.kfid-menu-hamburger{ display: none; }
.kfid-menu-mobile-icon{ display: inline-flex; align-items: center; justify-content: center; }
#kfid-top-banner-right-actions{ display: none; }
.topbar-title h1 { margin: 0; font-size: var(--fs-title); }
.topbar-title p { margin: 0; font-size: var(--fs-base); color: var(--muted); }

/* Menu icon (menu.svg) vit i dark mode */
html[data-theme="dark"] #menu-btn img[src$="menu.svg"] { filter: invert(1) brightness(1.4); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] #menu-btn img[src$="menu.svg"] { filter: invert(1) brightness(1.4); } }
@media (forced-colors: active) { #menu-btn img[src$="menu.svg"] { filter: none; } }

/* Top search */
.top-search { margin-top: 8px; }
.top-search-mobile-slot { display: none; }
.top-search__wrap {
  --top-search-icon-w: 52px;
  --top-search-clear-w: 32px;
  --top-search-border-w: 1px;
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input);
  overflow: hidden;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.top-search__wrap:focus-within{
  border-color: var(--border);
  outline: 1px solid var(--primary);
  outline-offset: 0;
  box-shadow: none;
}
.top-search__wrap input[type="search"]{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--top-search-clear-w) + 12px) 0 12px;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: var(--fs-input-text);
  line-height: calc(var(--control-h) - 2px);
}
.top-search__wrap .btn--icon{ opacity: .75; transition: opacity .15s ease; }
.top-search__wrap input[type="search"]:placeholder-shown + .btn--icon{ opacity: .75; pointer-events: auto; }
.top-search__wrap .top-search__ai-btn{ opacity: 1; }
#top-search-clear.btn--icon {
  width: var(--top-search-clear-w);
  height: var(--top-search-clear-w);
  position: absolute;
  top: 50%;
  right: calc(var(--top-search-icon-w) + 4px);
  transform: translateY(-50%);
}
.top-search__wrap .top-search__ai-btn{
  width: var(--top-search-icon-w);
  min-width: var(--top-search-icon-w);
  height: 100%;
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: var(--top-search-border-w) solid var(--border);
  border-radius: 0;
  background: var(--menu-link-bg, var(--input, #f3f4f6));
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  opacity: 1;
}
.top-search__wrap .top-search__ai-btn.is-active{
  border-left-color: var(--border);
  background: var(--menu-link-bg, var(--input, #f3f4f6));
}
.top-search__wrap .top-search__ai-btn:hover{
  background: var(--menu-link-hover, #e3e6ee);
}
.top-search__wrap .top-search__ai-btn:active,
.top-search__wrap .top-search__ai-btn:focus,
.top-search__wrap .top-search__ai-btn:focus-visible{
  background: var(--menu-link-bg, var(--input, #f3f4f6));
  outline: none;
  box-shadow: none;
}
.top-search__wrap .top-search__ai-btn:disabled,
.top-search__wrap .top-search__ai-btn.is-disabled{
  opacity: .48;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--menu-link-bg, var(--input, #f3f4f6)) 82%, var(--card));
  border-left-color: color-mix(in srgb, var(--border) 85%, transparent);
}
.top-search__wrap .top-search__ai-btn:disabled::before,
.top-search__wrap .top-search__ai-btn.is-disabled::before{
  opacity: .58;
}
.top-search__wrap .top-search__ai-btn:disabled:hover,
.top-search__wrap .top-search__ai-btn.is-disabled:hover{
  background: color-mix(in srgb, var(--menu-link-bg, var(--input, #f3f4f6)) 82%, var(--card));
}
.top-search__wrap .top-search__ai-btn img{
  display: none;
}
.top-search__wrap .top-search__ai-btn::before{
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("picture/robot.svg") no-repeat center / contain;
  mask: url("picture/robot.svg") no-repeat center / contain;
  opacity: .9;
}
.top-search__chat{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 330;
  isolation: isolate;
  contain: paint;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  padding: 10px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(68vh, 560px);
  overflow: hidden;
}
.top-search__chat-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.top-search__chat-head-actions{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.top-search__chat-head strong{
  font-size: var(--fs-base);
  font-weight: var(--fw-strong);
  color: var(--fg);
}
.btn--icon.top-search__chat-clear,
.btn--icon.top-search__chat-close{
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 1;
}
.btn--icon.top-search__chat-clear{ order: 0; }
.btn--icon.top-search__chat-close{ order: 1; }
.btn--icon.top-search__chat-clear :is(span, img),
.btn--icon.top-search__chat-close :is(span, img){
  width: 20px;
  height: 20px;
  display: block;
  line-height: 1;
  opacity: .9;
}
.btn--icon.top-search__chat-clear img{
  object-fit: contain;
  object-position: center;
}
.btn--icon.top-search__chat-clear:hover,
.btn--icon.top-search__chat-close:hover{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}
.top-search__chat-log{
  min-height: 52px;
  max-height: 170px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.top-search__chat-msg{
  border-radius: 10px;
  padding: 7px 9px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  max-width: 100%;
  word-break: break-word;
}
.top-search__chat-msg--user{
  align-self: flex-end;
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}
.top-search__chat-msg--bot{
  align-self: flex-start;
  background: color-mix(in srgb, var(--border) 28%, var(--card));
}
.top-search__chat-quick{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.top-search__chat-chip{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: var(--fs-sm);
  line-height: var(--lh-label);
  cursor: pointer;
}
.top-search__chat-clear.is-active{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.top-search__chat-quick.is-delete-mode .top-search__chat-chip{
  position: relative;
  padding-right: 24px;
  border-color: color-mix(in srgb, var(--kfid-fail) 34%, var(--border));
  background: color-mix(in srgb, var(--kfid-fail) 8%, var(--card));
}
.top-search__chat-quick.is-delete-mode .top-search__chat-chip::after{
  content: "×";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-input);
  line-height: 1;
  color: var(--kfid-fail);
  opacity: .95;
}
.top-search__chat-chip:hover{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
}
.top-search__chat-compose{
  position: relative;
  display: block;
  width: 100%;
}
#top-search-chat-input{
  width: 100%;
  min-height: 72px;
  max-height: 28vh;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input);
  color: var(--fg);
  padding: 10px 56px 10px 12px;
  font-size: var(--fs-input-text);
  line-height: var(--lh-base);
  box-sizing: border-box;
}
.top-search__chat-send{
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.top-search__chat-send img{
  width: 28px;
  height: 28px;
  display: block;
  transform: none;
}
.top-search__chat-send:hover{
  background: transparent;
  opacity: 1;
}
.top-search__chat-send:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--primary) 64%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}
.top-search__chat-status{
  min-height: 0;
}
.top-search__chat-status:empty{
  display: none;
}
.top-search__chat-debug{
  margin-top: 2px;
  padding: 6px 8px;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, var(--fg));
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 88%, var(--input));
  color: var(--muted);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  word-break: break-all;
}
.top-search.is-chat-open .top-search__results,
.kfid-supersearch.top-search.is-chat-open .top-search__results{
  top: calc(100% + 8px + var(--top-search-chat-h, 0px));
  margin-top: 0;
}
/* Modalernas sökfält: krysset ska alltid finnas tillgängligt för snabb nollställning. */
#kfid-open-list .top-search__wrap .btn--icon,
#kfid-customers-modal .top-search__wrap .btn--icon{
  opacity: .75;
  pointer-events: auto;
}
#kfid-open-list .top-search__wrap input[type="search"]:placeholder-shown + .btn--icon,
#kfid-customers-modal .top-search__wrap input[type="search"]:placeholder-shown + .btn--icon{
  opacity: .75;
  pointer-events: auto;
}
.top-search__results{ list-style:none; margin:6px 0 0; padding:0; border:1px solid var(--border); background: var(--card); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: opacity 0.2s ease; max-height: 240px; overflow:auto; -webkit-overflow-scrolling: touch; }
.top-search__results[hidden]{ display:none; }
.top-search__results li{ display:flex; align-items:center; min-height:44px; padding:8px 12px; cursor:pointer; }
.top-search__results li[aria-selected="true"], .top-search__results li:hover{ background: color-mix(in srgb, var(--primary) 15%, transparent); }
.top-search__results li.is-disabled{ opacity: .55; cursor: not-allowed; }
.top-search__results li.is-disabled:hover{ background: transparent; }
.top-search__results li .ts-title{ font-weight:var(--fw-strong); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-search__results li .ts-meta{ margin-left: 12px; color: var(--muted); font-size: var(--fs-sm); flex: 0 0 auto; white-space: nowrap; }
.kfid-modal-search{ position: relative; }
.kfid-modal-search > .top-search__results{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 35;
}
#kfid-open-list .openbox__msearch .top-search__results,
#kfid-customers-modal .kfid-customers__msearch .top-search__results{
  margin-top: 8px;
  max-height: 220px;
}
#kfid-open-list #ol-q-clear.btn--icon,
#kfid-customers-modal #kfid-customers-q-clear.btn--icon{
  position: absolute;
  right: 6px;
  width: 32px;
  height: 32px;
}

@media (max-width: 700px){
  .top-search__wrap{
    --top-search-icon-w: 60px;
    --top-search-clear-w: 34px;
    --top-search-border-w: 2px;
    min-height: 48px;
    height: 48px;
    border: 2px solid var(--primary);
    border-radius: 10px;
  }
  .top-search__wrap input[type="search"]{
    padding: 0 calc(var(--top-search-clear-w) + 16px) 0 16px;
    box-sizing: border-box;
    line-height: 46px;
  }
  #top-search-clear.btn--icon{
    right: calc(var(--top-search-icon-w) + 6px);
  }
  .top-search__chat{
    max-height: min(72vh, 620px);
  }
  .top-search__chat-log{
    max-height: 190px;
  }
  #top-search-chat-input{
    min-height: 84px;
    max-height: 26vh;
    padding-right: 58px;
  }
  .top-search__chat-send{
    width: 40px;
    height: 40px;
  }
  .top-search__wrap input[type="search"]:focus{ outline: none; }
  .openbox__filters .fitem > input[type="search"]{
    height: 48px;
    padding: 0 44px 0 16px;
    border: 2px solid var(--primary);
    border-radius: 15px;
    font-size: var(--fs-input-text);
    box-sizing: border-box;
  }
  .top-search__results li{ padding: 8px 10px; }
  .top-search__results li .ts-title{ font-size: var(--fs-base); }
  .top-search__results li .ts-meta{ font-size: var(--fs-sm); }
  .kfid-modal-search > .top-search__results{ position: static; }
}

@media (max-width: 1024px){
  /* Tablet-regeln ska gälla startsidans supersök, inte modalernas filter-sökfält */
  .top-search .top-search__wrap{
    --top-search-icon-w: 60px;
    --top-search-border-w: 2px;
    min-height: 48px;
    height: 48px;
    border-width: 2px;
    border-radius: 10px;
  }
  .top-search .top-search__wrap input[type="search"]{
    line-height: 46px;
  }
  .top-search .top-search__wrap .top-search__ai-btn img{
    width: 26px;
    height: 26px;
  }
  .top-search .top-search__wrap .top-search__ai-btn::before{
    width: 26px;
    height: 26px;
  }
  .kfid-field-with-icon__btn img{
    width: 28px;
    height: 28px;
  }
  .kfid-cust-link-ind__icon{
    width: 28px;
    height: 28px;
  }
}

/* Mobil/tablet (≤1024px): döljer snabbåtgärder + visar supersök först vid klick på sök-ikonen i botten */
@media (max-width: 1024px){
  #kfid-quick-actions{ display:none !important; }
  #top-search{ display:none; }
  .kfid-hero-actions{ margin-top: 0; }

  /* Layout som i exemplet: rubrik + logo på samma rad, ingresstexten under (spänner hela bredden) */
  .kfid-hero-grid{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title logo"
      "subtitle subtitle";
    align-items: start;
    gap: 10px;
  }
  .kfid-hero-left{ display: contents; }
  .kfid-hero-left .topbar-title{ display: contents; }
  .kfid-hero-left .topbar-title h1{ grid-area: title; }
  .kfid-hero-left .topbar-title p{
    grid-area: subtitle;
    max-width: none;
    margin-top: 4px;
    line-height: calc(var(--lh-label) + 0.05);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .kfid-hero-left .topbar-title p br{ display:none; }
  .kfid-hero-right{
    grid-area: logo;
    justify-self: end;
    align-self: start;
  }

	  #top-search.is-open{
	    display:block;
	    position: fixed;
	    /* Placera sökfältet under den fasta hero-headern i mobil-läge.
	       Annars kan det “hamna fel”/överst i toppen när man öppnar via förstoringsglaset. */
	    top: calc(env(safe-area-inset-top) + var(--top-chrome-visible-h) + 10px);
	    left: 50%;
	    right: auto;
	    width: calc(100% - max(4vw, 12px, var(--safe-area-inset-x)) - max(4vw, 12px, var(--safe-area-inset-x)));
	    transform: translateX(-50%);
	    box-sizing: border-box;
	    /* Under toppheader (hero, z≈120) men över innehållet/sticky-sektioner. */
	    z-index: 90;
	    margin: 0;
	  }
  #top-search.is-open .top-search__wrap input[type="search"]{
    background: var(--card);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  }
  #top-search.is-open .top-search__results{
    box-shadow: 0 16px 34px rgba(0,0,0,0.16);
  }
}

/* Små mobiler: sök/chat ska vara inline i sidan (inte flytande popup). */
	@media (max-width: 700px){
	  html.kfid-top-search-inline-mobile .top-search-mobile-slot{
	    display: block;
	    margin: 0 0 10px;
	    position: relative;
	    /* Låt topp/botten-chrome ligga över inline-söket. */
	    z-index: 90;
	  }
  html.kfid-top-search-inline-mobile .top-search-mobile-slot[hidden]{
    display: none !important;
  }
  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search{
    display: block;
    margin-top: 0;
    width: 100%;
  }
	  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search.is-open{
	    display: block;
	    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    transform: none;
    margin: 8px 0 0;
	    z-index: 90;
	    box-sizing: border-box;
	    overflow: visible;
	  }
  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search.is-open .top-search__chat{
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 8px;
    z-index: auto;
    max-height: none;
    overflow: visible;
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
  }
  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search.is-open .top-search__chat-log{
    max-height: 180px;
  }
  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search-chat-input{
    min-height: 96px;
    max-height: 42vh;
  }
  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search.is-open .top-search__results,
  html.kfid-top-search-inline-mobile .top-search-mobile-slot #top-search.is-open.top-search.is-chat-open .top-search__results{
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 8px;
    max-height: 42vh;
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
  }
}

/* Hero header (inuti card) */
.kfid-hero{
  position:relative;
  overflow:visible;
  margin: calc(-1 * var(--card-pad, 24px)) calc(-1 * var(--card-pad, 24px)) calc(-1 * var(--card-stack-gap, 12px)) calc(-1 * var(--card-pad, 24px));
  padding: clamp(16px, 2.2vw, 26px);
  padding-right: calc(clamp(16px, 2.2vw, 26px) + 54px);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(340deg, #6A9FB5 0%, #FFFFFF 99%);
}
.kfid-hero::after{
  display: none;
  content:"";
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 58%);
  pointer-events:none;
  background:
    radial-gradient(closest-side at 40% 40%,
      color-mix(in srgb, var(--primary) 18%, transparent) 0%,
      transparent 70%),
    radial-gradient(closest-side at 70% 65%,
      color-mix(in srgb, var(--primary) 12%, transparent) 0%,
      transparent 72%);
  opacity: .9;
}
.kfid-hero #menu-btn{
  position:absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}
.kfid-hero-grid{
  position:relative;
  /* Hold hero popovers (AI search/chat) above later form icons in the same card. */
  z-index: 20;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
  gap: clamp(16px, 2.6vw, 28px);
}
.kfid-hero-left{ min-width: 0; }
.kfid-hero-actions{ min-width: 0; }
.kfid-supersearch.top-search{ min-width: 0; }
.kfid-supersearch .top-search__wrap input[type="search"]{ min-width: 0; }
.kfid-hero-left .topbar-title h1{
  font-size: clamp(1.4rem, 1.85vw, 1.95rem);
  letter-spacing: -0.01em;
  line-height: calc(var(--lh-tight) - 0.03);
  white-space: normal;
}
.kfid-hero-left .topbar-title h1 br{ display: block !important; }
.kfid-hero-left .topbar-title p{
  max-width: 62ch;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
}
.kfid-hero-actions{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin-top: 14px;
}
.kfid-quick-actions{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--btn-gap);
  width: 100%;
}
.kfid-supersearch.top-search{
  margin-top: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  position: relative;
  z-index: 120;
  isolation: isolate;
}
.kfid-supersearch .top-search__wrap input[type="search"]{
  height: 48px;
  padding: 0 calc(var(--top-search-clear-w) + 16px) 0 16px;
  font-size: var(--fs-input-text);
}
.kfid-supersearch.top-search{
  overflow: visible;
}
.kfid-supersearch .top-search__wrap input[type="search"]:focus{ outline: none; }
.kfid-supersearch .top-search__results{
  border-radius: 15px;
  border-width: 2px;
}
.kfid-supersearch .top-search__results{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  z-index: 320;
}
.kfid-supersearch.top-search.is-open{
  z-index: 260;
}
.kfid-supersearch.top-search.is-chat-open{
  z-index: 520;
}
.kfid-quick-actions .btn{
  width: 100%;
  height: 48px;
  min-height: 0;
  padding-block: 0;
  line-height: 1;
}
.kfid-quick-actions .btn{ min-width: 0; }
#kfid-search-toggle{ display: none; }
.kfid-search-toggle{
  gap: 8px;
  white-space: nowrap;
  background: transparent;
  color: #0f172a;
  border-color: transparent;
  box-shadow: none;
}
.kfid-search-toggle:hover{
  background: transparent;
  border-color: transparent;
}
.kfid-search-toggle img{
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 1;
}
.kfid-search-toggle span{
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Snabbåtgärder (Inställningar): dölj tomma hint-rader för kompakt layout */
.kfid-qa-hint:empty{ display:none; }
.kfid-qa-hint:not(:empty){ margin-top:4px; }
.kfid-supersearch .top-search__results{
  max-height: 240px;
  overflow:auto;
}
.kfid-hero-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  align-self: flex-start;
  min-width: clamp(180px, 26vw, 420px);
  padding-right: 54px;
}
.kfid-hero .kfid-company-logo{
  justify-content:flex-end;
  margin: 5px 48px 0 0;
  max-width: 420px;
  min-height: 60px;
}
.kfid-hero .kfid-company-logo img{
  max-height: 60px;
}
.kfid-hero .kfid-company-logo--fallback{
  width: min(100%, 420px);
}

@media (min-width: 1025px){
  body {
    padding-top: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }
  main.container.vspace {
    padding-top: 0 !important;
    margin-top: 0;
  }
  .vspace { padding-top: 0 !important; }
  #kfid-top-card .kfid-hero::after{ display: none !important; }
  #kfid-top-card {
    --kfid-black-banner-h: 62px;
    position: sticky;
    top: 0;
    z-index: 320;
    margin-bottom: 10px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible;
  }
  #kfid-top-black-banner{
    position: relative;
    height: var(--kfid-black-banner-h);
    min-height: var(--kfid-black-banner-h);
    width: calc(100vw + 32px);
    left: 50%;
    transform: translateX(calc(-50% - 16px));
    background: #000;
    z-index: 2;
    pointer-events: auto;
  }
  #kfid-top-card > #top-search-mobile-slot { display: none !important; }
  #kfid-top-card .kfid-hero {
    position: relative;
    top: auto;
    z-index: auto;
    transition: transform 0.08s linear, opacity 0.08s linear, max-height 0.08s linear, padding 0.08s linear, border-width 0.08s linear;
    overflow: visible;
    background: transparent;
    border-bottom: 0;
  }
  #kfid-top-card .kfid-hero::before{
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: -1px;
    left: 50%;
    width: calc(100vw + 32px);
    transform: translateX(calc(-50% - 16px));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(340deg, #6A9FB5 0%, #FFFFFF 99%);
    border-bottom: 1px solid var(--border);
  }
  .kfid-hero{
    position: sticky;
    top: 0;
    z-index: 140;
    margin: calc(-1 * var(--card-pad, 24px)) calc(-1 * var(--card-pad, 24px)) 0 calc(-1 * var(--card-pad, 24px));
    background: transparent;
    border-bottom-color: transparent;
    border-radius: 0;
  }
  .kfid-hero::before{
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: -1px;
    left: 50%;
    width: calc(100vw + 32px);
    transform: translateX(calc(-50% - 16px));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(340deg, #6A9FB5 0%, #FFFFFF 99%);
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 1024px){
  #kfid-top-card{ display: none !important; }
  /* Slimmare hero på mobil/tablet */
  #kfid-search-toggle{ display: none !important; }
  .kfid-hero{
    --kfid-hero-pad: 12px;
    --kfid-menu-btn: 44px;
    --kfid-menu-gap: 32px;
    --kfid-menu-reserve: calc(var(--kfid-menu-btn) + var(--kfid-menu-gap));
    padding: var(--kfid-hero-pad);
    padding-right: calc(var(--kfid-hero-pad) + var(--kfid-menu-reserve));
    padding-bottom: 6px;
  }
  html.kfid-hero-chrome .kfid-hero{
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    z-index: 120;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    /* Behåll "menu reserve" så loggan alltid hamnar till vänster om menyknappen */
    padding-left: max(var(--kfid-hero-pad), max(12px, var(--safe-area-inset-left)));
    padding-right: calc(max(var(--kfid-hero-pad), max(12px, var(--safe-area-inset-right))) + var(--kfid-menu-reserve));
    transform: translateY(calc(-1 * var(--header-h) * var(--chrome-hide-p)));
    opacity: calc(1 - var(--chrome-hide-p));
    transition: transform 0.08s linear, opacity 0.08s linear;
    will-change: transform, opacity;
  }
  @supports (padding-left: max(0px, 0px)) {
    html.kfid-hero-chrome .kfid-hero{
      padding-left: max(var(--kfid-hero-pad), max(12px, var(--safe-area-inset-x)));
      padding-right: calc(max(var(--kfid-hero-pad), max(12px, var(--safe-area-inset-x))) + var(--kfid-menu-reserve));
    }
  }
  html.kfid-hero-chrome main.container{ padding-top: var(--top-chrome-visible-h); }
  .kfid-hero #menu-btn{ top: var(--kfid-hero-pad); right: var(--kfid-hero-pad); }
  .kfid-hero-grid{ align-items: start; gap: 0 12px; }
  .kfid-hero-right{ padding-right: 0; min-width: 0; }
  /* Behåll wrappern i DOM (för #top-search.is-open), men låt den inte ta plats när allt är dolt */
  .kfid-hero-actions{ margin-top: 0; gap: 0; height: 0; }
  .kfid-hero-left .topbar-title h1{
    line-height: calc(var(--lh-tight) - 0.07);
    font-size: clamp(18px, calc(6.586px + 2.404vw), 31.2px);
  }
  .kfid-hero-left .topbar-title p{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
    line-height: calc(var(--lh-label) + 0.02);
    font-size: clamp(12.5px, calc(9px + 1vw), 15px);
  }
  .kfid-hero .kfid-company-logo img{ max-width: 100%; }
}

@media (max-width: 700px){
  html.kfid-hero-chrome .kfid-hero{
    --kfid-hero-tx: 0px;
    left: 0;
    right: 0;
    width: auto;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .kfid-hero-left .topbar-title p{ padding-top: 10px; }
  .kfid-hero-right{ min-width: clamp(120px, 34vw, 180px); }
  .kfid-supersearch.top-search{ flex-basis: 100%; }
}

@media (min-width: 701px){
  .kfid-hero-actions{
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--btn-gap);
  }
  .kfid-quick-actions{
    flex-direction: row;
    align-items: center;
    width: auto;
  }
  .kfid-quick-actions .btn{
    width: auto;
    min-width: clamp(100px, 20vw, 150px);
  }
  .kfid-supersearch.top-search{
    flex: 0 1 420px;
    max-width: 460px;
    min-width: 300px;
  }
}

/* Desktop: frys typografi i topp (ingen vw-skalning från 1025px och upp) */
@media (min-width: 1025px){
  .kfid-hero-left .topbar-title h1{ font-size: 1.95rem; }
  .kfid-hero-left .topbar-title p{ font-size: 1.02rem; }
  #kfid-search-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    z-index: 260;
    height: var(--control-h);
    min-height: var(--control-h);
    min-width: 108px;
    padding: 0 18px;
  }
  .kfid-hero-actions{
    position: relative;
    z-index: 220;
  }

  /* Desktop: behåll samma sökstorlek som övriga sökfält */
  .kfid-quick-actions .btn{
    height: var(--control-h);
    min-height: 0;
    padding-block: 0;
    line-height: 1;
  }
	  .kfid-supersearch .top-search__wrap input[type="search"]{
	    height: var(--control-h);
	    font-size: var(--fs-input-text);
	    padding: 0 calc(var(--top-search-clear-w) + 10px) 0 12px;
	  }
  .kfid-supersearch.top-search{
    transform-origin: left center;
    z-index: 260;
    transition:
      max-width .22s ease,
      width .22s ease,
      flex-basis .22s ease,
      opacity .16s ease,
      transform .22s ease;
  }
  .kfid-supersearch.top-search.is-collapsed{
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(-8px);
  }
  .kfid-supersearch.top-search.is-expanded{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    transform: none;
  }
  .kfid-supersearch .top-search__results{ border-width: 1px; }
}

/* Loggan skalas linjärt: 100% vid 1024px -> 50% vid 375px */
@media (max-width: 1024px){
  .kfid-hero .kfid-company-logo{
    margin: 0;
    min-height: clamp(43px, calc(18.154px + 6.626vw), 60px);
  }
  .kfid-hero .kfid-company-logo img{
    height: clamp(43px, calc(18.154px + 6.626vw), 60px);
    max-height: clamp(43px, calc(18.154px + 6.626vw), 60px);
    width: auto;
  }
  .kfid-hero .kfid-company-logo--fallback{
    min-height: clamp(40px, calc(16.888px + 6.163vw), 80px);
    padding: clamp(8px, calc(3.378px + 1.233vw), 16px);
    border-radius: clamp(12px, calc(8.533px + 0.925vw), 18px);
  }

  /* Rubriken ska också skala linjärt: 1024px -> 375px (100% -> 50%) */
  .kfid-hero-left .topbar-title h1{
    font-size: clamp(18px, calc(6.586px + 2.404vw), 31.2px);
  }
}

/* Desktop (>=1025px): gör toppen högre istället för att krympa – actions får hel bredd under loggan */
@media (min-width: 1025px){
  .kfid-hero-grid{
    grid-template-areas:
      "title logo"
      "actions actions";
    align-items: start;
  }
  .kfid-hero-left{ display: contents; }
  .kfid-hero-left .topbar-title{ grid-area: title; }
  .kfid-hero-right{ grid-area: logo; }
  .kfid-hero-actions{
    grid-area: actions;
    margin-top: 14px;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .kfid-quick-actions{ flex-direction: row; width: auto; gap: 10px; }
  .kfid-quick-actions .btn{ width: auto; min-width: 150px; }
  .kfid-supersearch.top-search{ flex: 0 0 520px; width: 520px; margin-left: 0; }
}

@media (min-width: 1025px){
  /* Desktop: toppbanner i samma kompakta höjd som referensen */
  #kfid-top-card { --kfid-banner-h: auto; }

  #kfid-top-card .kfid-hero{
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 12px 18px 6px 18px;
    overflow: visible;
  }

  #kfid-top-card .kfid-hero-grid{
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title logo"
      "actions actions";
    grid-template-rows: 1fr auto;
    align-items: start;
    row-gap: 6px;
    column-gap: 14px;
  }

  #kfid-top-card .kfid-hero-left .topbar-title h1{
    margin: 0;
    line-height: calc(var(--lh-tight) - 0.07);
    font-size: 31.2px;
  }
  #kfid-top-card .kfid-hero-left .topbar-title p{
    margin: 2px 0 0 0;
    padding-top: 0;
    line-height: calc(var(--lh-label) + 0.02);
    font-size: 15px;
  }

  #kfid-top-card .kfid-hero-left .topbar-title{
    height: auto;
    min-height: 0;
    display: block;
  }

  #kfid-top-card .kfid-hero-right{
    align-self: start;
    min-width: clamp(280px, 34vw, 420px);
    padding-right: 56px;
    position: relative;
    z-index: 1;
  }
  #kfid-top-card .kfid-company-logo{
    margin: 0 44px 0 0;
    min-height: 60px;
    max-height: 60px;
    max-width: 420px;
  }
  #kfid-top-card .kfid-company-logo img{
    height: 60px;
    max-height: 60px;
    width: auto;
  }

  #kfid-top-card #kfid-top-black-banner #kfid-top-banner-right-actions{
    position: fixed;
    top: calc(env(safe-area-inset-top) + (var(--kfid-black-banner-h) / 2));
    right: calc((100vw - min(1600px, 92vw)) / 2 + 8px);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 7;
  }

  #kfid-top-card #kfid-top-black-banner #top-calc-btn,
  #kfid-top-card #kfid-top-black-banner #top-auth-btn,
  #kfid-top-card #kfid-top-black-banner #menu-btn{
    height: var(--control-h);
    min-height: var(--control-h);
    padding: 0 16px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    font-size: var(--btn-font-size);
    font-weight: var(--fw-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  #kfid-top-card #kfid-top-black-banner #top-calc-btn{
    min-width: 35px;
    width: 35px;
    height: 35px;
    min-height: 35px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #kfid-top-card #kfid-top-black-banner #top-calc-btn img{
    width: 35px;
    height: 35px;
    display: block;
    filter: brightness(0) invert(1);
  }

  #kfid-top-card #kfid-top-black-banner #top-auth-btn > [data-top-auth-label],
  #kfid-top-card #kfid-top-black-banner #menu-btn > .kfid-menu-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    top: 0;
  }

  #kfid-top-card #kfid-top-black-banner #menu-btn .kfid-menu-hamburger{
    position: relative;
    top: 0;
  }

  #kfid-top-card #kfid-top-black-banner #top-calc-btn:hover,
  #kfid-top-card #kfid-top-black-banner #top-auth-btn:hover,
  #kfid-top-card #kfid-top-black-banner #menu-btn:hover{
    background: rgba(0, 0, 0, 0.52);
    border-color: #fff;
    color: #fff;
    transform: none;
  }

  #kfid-top-card #kfid-top-black-banner #top-calc-btn:hover{
    background: transparent;
    border-color: transparent;
  }

  #kfid-top-card #kfid-top-black-banner #menu-btn{
    min-width: 112px;
  }

  #kfid-top-card #kfid-top-black-banner #menu-btn .kfid-menu-mobile-icon{ display: none; }
  #kfid-top-card #kfid-top-black-banner #menu-btn .kfid-menu-label,
  #kfid-top-card #kfid-top-black-banner #menu-btn .kfid-menu-hamburger{ display: inline-flex; }

  #kfid-top-card .kfid-hero-actions,
  #kfid-top-card #kfid-top-black-banner .kfid-hero-actions{
    margin-top: 0;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    position: fixed;
    top: calc(env(safe-area-inset-top) + ((var(--kfid-black-banner-h) - var(--control-h)) / 2));
    left: calc((100vw - min(1600px, 92vw)) / 2 + 18px);
    z-index: 6;
  }
  #kfid-top-card .kfid-quick-actions .btn{
    height: var(--control-h);
    min-height: var(--control-h);
    padding: 0 20px;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
  }
  #kfid-top-card #kfid-search-toggle{
    height: var(--control-h);
    min-height: var(--control-h);
    min-width: 108px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
  }
  #kfid-top-card .kfid-supersearch.top-search{
    flex: 0 0 520px;
    width: 520px;
    min-width: 320px;
    max-width: 520px;
    margin-left: 0;
    z-index: 280;
  }
  #kfid-top-card .kfid-supersearch .top-search__wrap input[type="search"]{
    height: var(--control-h);
    padding: 0 calc(var(--top-search-clear-w) + 10px) 0 12px;
    font-size: var(--fs-input-text);
  }

  #kfid-top-card .kfid-quick-actions .btn,
  #kfid-top-card #kfid-search-toggle{
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }

  #kfid-top-card .kfid-quick-actions .btn.primary,
  #kfid-top-card .kfid-quick-actions .kfid-btn-secondary{
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.72);
  }

  #kfid-top-card .kfid-quick-actions .btn:hover,
  #kfid-top-card #kfid-search-toggle:hover{
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    border-color: #fff;
    transform: none;
  }

  #kfid-top-card #kfid-search-toggle img{
    filter: invert(1) brightness(1.15);
  }

  #kfid-top-card .kfid-hero,
  #kfid-top-card .kfid-hero-left .topbar-title,
  #kfid-top-card .kfid-hero-right{
    transition: none;
  }

  #kfid-top-card .kfid-hero{
    --kfid-desktop-blue-hide-p: var(--desktop-blue-hide-p, 0);
    --kfid-desktop-float-depth: 1;
    transform: translateY(calc(-1 * var(--header-h) * var(--kfid-desktop-float-depth) * var(--kfid-desktop-blue-hide-p)));
    opacity: calc(1 - var(--kfid-desktop-blue-hide-p));
    will-change: transform;
    pointer-events: auto;
  }

  #kfid-top-card .kfid-hero-left .topbar-title,
  #kfid-top-card .kfid-hero-right{
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  #kfid-top-card .kfid-hero::before{
    opacity: 1;
    transform: translateX(calc(-50% - 16px));
    will-change: auto;
  }
}

/* Secondary knapp för startsidans snabbåtgärd (ljus/outline) */
.kfid-btn-secondary{
  background: color-mix(in srgb, var(--card) 86%, var(--primary) 14%);
  color: var(--fg);
  border-color: color-mix(in srgb, var(--border) 75%, var(--primary) 25%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kfid-btn-secondary:hover{
  background: color-mix(in srgb, var(--card) 78%, var(--primary) 22%);
  border-color: var(--primary);
}

/************************************
  15. MOBIL TOPP/SCROLL-KROM
*************************************/
/* Hide-on-scroll variabler */
html.hide-chrome { --app-header-offset: env(safe-area-inset-top); --controls-sticky-top: calc(env(safe-area-inset-top) + 14px); }

@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px) {
  html.hide-chrome { --chrome-hide-p: 1; }
  html.hide-chrome main { margin-top: calc(-1 * var(--header-h)); padding-bottom: max(16px, env(safe-area-inset-bottom) + 12px); }
}

/* Sticky section header overlay för glipa – endast mobil */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px) {
  header.row.between::before { content: ""; position: absolute; top: -24px; left: 0; right: 0; width: auto; height: 24px; background: var(--bg); pointer-events: none; z-index: 1; }
}

/* PWA/Standalone: undvik vw-baserade "full bleed"-trick som kan skapa horisontell overflow */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px) {
  html.is-standalone header.row.between::before { left: 0; right: 0; }
}

/************************************
  20. BOTTOM NAV (mobil/iPad)
*************************************/
#bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  padding: 0;
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  height: calc(64px + env(safe-area-inset-bottom));
  width: auto;
  max-width: none;
  transform: translateY(calc(var(--bottom-nav-h) * var(--chrome-hide-p)));
  opacity: calc(1 - var(--chrome-hide-p));
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
}
html.is-standalone #bottom-nav{ width: auto; max-width: none; }
@supports (padding-left: max(0px, 0px)) {
  #bottom-nav { padding-left: var(--safe-area-inset-x); padding-right: var(--safe-area-inset-x); }
}
#bottom-nav button { flex: 1 1 0; background: none; border: none; outline: none; padding: 0; margin: 0; height: 64px; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-size: 0; transition: background 0.2s; }
#bottom-nav button:focus { background: var(--input); outline: 2px solid var(--ring); }
#bottom-nav button[disabled] { opacity: 0.5; cursor: not-allowed; }
#bottom-nav .icon-svg { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
#bottom-nav img { width: 28px; height: 28px; pointer-events: none; }
@media (max-width: 1024px) {
  #bottom-nav {
    background: #113351;
    border-top-color: rgba(255, 255, 255, 0.26);
  }
  #bottom-nav button:focus {
    background: rgba(255, 255, 255, 0.12);
    outline-color: rgba(255, 255, 255, 0.56);
  }
  #bottom-nav img {
    filter: brightness(0) invert(1);
  }
}
@media (min-width: 1025px) { #bottom-nav { display: none !important; } }

/************************************
  25. DRAWER & OVERLAY
*************************************/
#drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 1200; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
#drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

#mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: var(--app-ih, 100vh);
  background: var(--bg);
  box-shadow: -2px 0 16px rgba(0,0,0,0.08);
  z-index: 1210;
  width: 80vw;
  max-width: 480px;
  min-width: 320px;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(.4,.2,.2,1), opacity 0.2s;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  outline: none;

	  /* Menytypografi tokens (drawer-variant) */
	  --menu-fs-1: calc(var(--menu-fs-1-px) * var(--ui-scale));
	  --menu-fs-2: calc(var(--menu-fs-2-px) * var(--ui-scale));
	  --menu-fs-3: calc(var(--menu-fs-3-px) * var(--ui-scale));
		  --menu-fw: var(--fw-medium);
		  --menu-fw-strong: var(--fw-strong);
	  /* Bas i menyn = nivå 2. Nivå 1 används för knappar. */
	  font-size: var(--menu-fs-2);
	  line-height: var(--menu-lh);
	  font-weight: var(--menu-fw);
	}
#mobile-drawer.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.drawer-content { padding: 32px 20px 20px 20px; overflow-y: auto; height: 100%; -webkit-overflow-scrolling: touch; }

/* Extra topp- och bottenluft för mobil/padda för bättre scrollkänsla */
@media (max-width: 1024px) {
  #mobile-drawer .drawer-content { padding: 48px 22px 64px 22px; }
  #mobile-drawer .card-menu__list { padding: 40px 0 80px 0; }
}

/* Lås bakgrund vid öppen drawer */
body.drawer-open { position: fixed; width: 100%; overflow: hidden; top: var(--lock-scroll-top, 0px); }
@media (min-width: 1025px) {
  /* Desktop: lås scroll utan fixed-body så sticky-header inte tappar innehåll */
  body.drawer-open { position: relative; top: auto; width: 100%; overflow: hidden; }
}

/************************************
  30. KORT (CARD) & TABELL BAS
*************************************/
.card { position: relative; --card-pad: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: box-shadow 0.2s ease; }
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.card.stack.gap { gap: var(--card-stack-gap, var(--space)); }
.card--tight { --card-stack-gap: 12px; }
.card--sticky-actions { display:flex; flex-direction:column; }
.card .row.gap { gap: var(--btn-gap); }

  #kfid-controls article.card > header{
  min-height: 80px;
  padding-top: 24px;
  padding-bottom: 24px;
  flex-wrap: nowrap;
  align-items: center;
  --kfid-toggle-space: 0px;
}
#kfid-controls article.card{ position: relative; }

.table, table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: var(--fw-strong); }

/************************************
  35. FORM ELEMENT
*************************************/
label { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--label); font-weight: var(--fw-body); }
label.small{ display:block; font-size: var(--fs-label); margin: var(--field-label-top) 0 var(--field-label-gap) 0; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], select {
	  width: 100%; height: var(--control-h); padding: 0 12px; background: var(--input); color: var(--fg);
	  border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-input-text); line-height: calc(var(--control-h) - 2px);
	}
textarea { width: 100%; min-height: 120px; padding: 12px; background: var(--input); color: var(--fg); border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-input-text); line-height: var(--lh-base); }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--primary); }
:is(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }

/* Touch-fixar */
@media (hover: none) and (pointer: coarse) {
  input[type="date"] { -webkit-appearance: none; appearance: none; }
  input[type="date"]::-webkit-date-and-time-value, input[type="date"]::-webkit-datetime-edit { height: calc(var(--control-h) - 2px); line-height: calc(var(--control-h) - 2px); }
  input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: 6px; }
}

/************************************
  40. KNAPPAR
*************************************/
.btn { appearance: none; padding: 12px 24px; border-radius: 15px; border: 2px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: all 0.2s ease; font-size: var(--btn-font-size); font-weight: var(--fw-body); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: var(--lh-tight); text-align: center; }
.btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--btn-bg) 90%, var(--primary) 10%); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.btn.primary:hover { background: color-mix(in srgb, var(--primary) 90%, black); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn--lift-ring:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--ring); border-color: var(--primary); }
.btn--lift-ring:active { transform: translateY(0); box-shadow: 0 0 0 2px var(--ring); }
.btn:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; filter:grayscale(.2); }
.vk-upload .vk-actions label.btn[disabled]{ pointer-events:none; }

html.hide-fill-examples #kfid-controls .btn[data-action="fill"] { display: none !important; }
@media (min-width: 1025px) {
  #kfid-controls .btn { padding: 8px 16px; font-size: var(--fs-base); min-height: 36px; }
  #kfid-controls .card header .row.gap { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after { transition: none !important; animation: none !important; }
  .btn:hover { transform: none !important; }
}

/* Ikonknapp: delete */
.btn--icon { width: 32px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; display: inline-block; opacity: 0.75; }
.btn--icon.icon--delete { color: #000; background-color: currentColor; -webkit-mask: url("picture/delete.svg") no-repeat center / contain; mask: url("picture/delete.svg") no-repeat center / contain; }
.btn--icon.icon--search { color: #000; background-color: currentColor; -webkit-mask: url("picture/search.svg") no-repeat center / contain; mask: url("picture/search.svg") no-repeat center / contain; }
.btn--icon.icon--logout { color: #000; background-color: currentColor; -webkit-mask: url("picture/logout.svg") no-repeat center / contain; mask: url("picture/logout.svg") no-repeat center / contain; }
.btn--icon.icon--check  { color: #000; background-color: currentColor; -webkit-mask: url("picture/check.svg") no-repeat center / contain; mask: url("picture/check.svg") no-repeat center / contain; }
[data-theme="dark"] .btn--icon.icon--delete { color: var(--btn-fg); }
[data-theme="dark"] .btn--icon.icon--search,
[data-theme="dark"] .btn--icon.icon--logout,
[data-theme="dark"] .btn--icon.icon--check { color: var(--btn-fg); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .btn--icon.icon--delete { color: var(--btn-fg); } }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .btn--icon.icon--search,
  html[data-theme="auto"] .btn--icon.icon--logout,
  html[data-theme="auto"] .btn--icon.icon--check { color: var(--btn-fg); }
}

/* Card actions (epost + posta) */
.card__actions{ margin-top: auto; margin-bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
.card__actions .email-field{ display: grid; gap: var(--field-label-gap); width: 100%; }
.card__actions .email-input{ width: 100%; height: 48px; padding: 0 16px; background: var(--input); color: var(--fg); border: 2px solid var(--border); border-radius: 10px; font-size: var(--fs-input-text); outline: none; box-sizing: border-box; }
.card__actions .email-input:focus{ outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.1); border-color: var(--primary); background: var(--input); }
.card__actions .btn{ width: 100%; height: 48px; min-height: 0; padding-block: 0; line-height: 1; }
@media (min-width: 701px){
  /* 701–999px: e-post på första raden (kompakt), knapparna under – tätt bredvid varandra. */
  .card__actions{
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    gap: var(--btn-gap);
    justify-content: start;
  }
  .card__actions .email-field{
    grid-column: 1 / -1;
    width: min(350px, 100%);
  }
  .card__actions .btn{ width: auto; min-width: clamp(100px, 20vw, 150px); }
  #btn-post{ grid-column: 1 / 2; }
  #btn-print{ grid-column: 2 / 3; }
}
@media (min-width: 1000px){
  /* 1000px+: e-post + knappar på samma rad, knapparna intill varandra. */
  .card__actions{ grid-template-columns: minmax(0, 350px) auto auto; }
  .card__actions .email-field{ grid-column: 1 / 2; width: 100%; }
  #btn-post{ grid-column: 2 / 3; }
  #btn-print{ grid-column: 3 / 4; }
}
@media (min-width: 1025px){
.card__actions .email-input{ height: var(--control-h); padding: 0 12px; font-size: var(--fs-input-text); border-width: 1px; }
  .card__actions .btn{ height: var(--control-h); line-height: 1; }
}

@media (max-width: 1024px){
  .card__actions{ margin-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

/************************************
  45. SEKTIONSTOGGLE (check_b)
*************************************/
.check_b { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px; padding-right: 64px; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); min-height: var(--control-h); cursor: pointer; user-select: none; transition: border-color .2s, box-shadow .2s; }
.check_b.is-open{ align-items: flex-start; }
.check_b:hover { border-color: var(--primary); }
.check_b:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
.check_b__in { position: absolute; opacity: 0; pointer-events: none; }
.check_b__box{ width:24px; height:24px; flex:none; border:2px solid var(--border); border-radius:8px; display:grid; place-items:center; background:#fff; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.check_b__box::after{ content:""; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5 L9.5 15 L15 6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); opacity:0; transform:scale(0.9); transition: opacity .15s ease, transform .15s ease; }
.check_b__meta{ display:grid; gap:2px }
.check_b:not(.is-open) .check_b__meta{ align-self: center; }
.check_b__title{ font-weight:var(--fw-strong); color:var(--fg) }
.check_b__desc, .check_b__meta .small{ font-size: var(--fs-sm); color:var(--muted) }
.check_b__desc{ display:none; margin-top:6px }
.check_b.is-open .check_b__desc{ display:block }
.check_b__in:focus-visible + .check_b__box{ outline:3px solid var(--ring); outline-offset:2px; }
.check_b__in:hover + .check_b__box{ border-color: var(--primary); }
.check_b__in:checked + .check_b__box{ background:var(--primary); border-color:var(--primary) }
.check_b__in:checked + .check_b__box::after{ opacity:1; transform:scale(1); }
.check_b__in:checked ~ .check_b__meta .check_b__title{ color:var(--primary) }
.check_b__in:disabled + .check_b__box,
.check_b__in.is-disabled + .check_b__box{
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--input) 86%, var(--card) 14%);
  opacity: .7;
}
.check_b__in:disabled:checked + .check_b__box,
.check_b__in.is-disabled:checked + .check_b__box{
  background: color-mix(in srgb, var(--primary) 58%, var(--input));
  border-color: color-mix(in srgb, var(--primary) 68%, var(--border));
}
.check_b__in:disabled ~ .check_b__meta,
.check_b__in.is-disabled ~ .check_b__meta{
  opacity: .75;
}
.check_b__in:disabled ~ .check_b__meta .check_b__title,
.check_b__in.is-disabled ~ .check_b__meta .check_b__title{
  color: var(--muted);
}
.check_b-grid{ display:grid; gap:16px; align-items:start; grid-template-columns:1fr; }
@media (min-width: 600px){ .check_b-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .check_b-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1740px){ .check_b-grid{ grid-template-columns: repeat(6, 1fr); } }
.check_b__more{ position:absolute; top:4px; right:4px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border); background:var(--input); color:var(--fg); border-radius:999px; cursor:pointer; font-size: var(--fs-input); font-weight:var(--fw-strong); line-height:1; transition:border-color .2s, background-color .2s, transform .1s; }
.check_b__more:hover{ border-color:var(--primary); background: color-mix(in srgb, var(--input) 90%, var(--primary) 10%); }
.check_b__more:active{ transform: translateY(1px); }
.check_b__more:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
/************************************
  50. KFID CONTROLS – GRID GEMENSAMT
*************************************/
[data-summary].is-hidden, [data-section].is-hidden { display: none; }
#kfid-controls{
  display: grid;
  gap: 24px;
  --col-idx: 72px;
  --kfid-idx-size: 26px;
  /* Kamera i rad: följ prickens storlek, men lite större */
  --kfid-rowcam-size: calc(var(--kfid-idx-size) + 4px);
  --col-wide-min: 125px;
  --col-medium-min: 90px;
  --col-narrow-min: 72px;
  --col-status-min: 120px;
  --col-comment-min: 150px;
  --col-approve: 84px;
  --col-actions: 40px;
}
.grid-wrap{ border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.grid-head{ display: grid; column-gap: 10px; row-gap: 0; padding: var(--field-label-top) 12px 0; font-weight: var(--fw-body); font-size: var(--fs-label); background: var(--input); color: var(--fg); align-items: end; }
.grid-row{ display: grid; column-gap: 10px; row-gap: 0; padding: var(--field-label-gap) 12px 6px; align-items: center; border-bottom: 1px solid var(--border); transition: background-color 0.2s ease; }
.grid-row:hover { background: color-mix(in srgb, var(--card) 98%, var(--bg)); }
.grid-row:last-child{ border-bottom: none; }
.grid-row .cell.actions{ display: flex; justify-content: flex-end; }
.grid-row .cell.mid{ display: flex; align-items: center; justify-content: center; }
.grid-wrap .head, .grid-row .cell{ min-width: 0; }
.grid-wrap .idx{ display:flex; align-items:center; justify-content:center; gap: 6px; color: var(--muted); font-weight: var(--fw-strong); font-size: var(--fs-sm); }
.grid-wrap .list{ counter-reset: rownum; }
.kfid-idx-dot{ display:inline-flex; }
.grid-wrap .grid-row .idx .kfid-idx-dot::before{
  counter-increment: rownum;
  content: counter(rownum);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--kfid-idx-size);
  height: var(--kfid-idx-size);
  background: color-mix(in srgb, var(--primary) 85%, white);
  color: var(--primary-ink);
  border-radius: 50%;
  line-height: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-display);
}

/* Kamera-knapp i radens indexkolumn */
.kfid-rowcam{
  width: var(--kfid-rowcam-size);
  height: var(--kfid-rowcam-size);
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
  box-shadow: none;
  opacity: .78;
}
.kfid-rowcam:hover{ opacity: 1; }
.kfid-rowcam:active{ transform: translateY(1px); }
.kfid-rowcam img{ width: var(--kfid-rowcam-size); height: var(--kfid-rowcam-size); display:block; }
.kfid-rowcam .kfid-imgcount{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-display);
  color: #000;
  pointer-events: none;
  z-index: 5;
}
.kfid-rowcam .kfid-imgcount::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  z-index: -1;
}

/* Layout för ISO/CONT/VOLT (desktop) */
.iso-grid .grid-head, .iso-grid .grid-row {
  grid-template-columns:
    var(--col-idx)
    minmax(var(--col-wide-min), 2.3fr)
    minmax(var(--col-narrow-min), 1.05fr)
    minmax(var(--col-narrow-min), 1.05fr)
    minmax(var(--col-narrow-min), 1.05fr)
    minmax(var(--col-comment-min), 2.4fr)
    var(--col-approve)
    var(--col-actions);
}
.cont-grid .grid-head, .cont-grid .grid-row {
  grid-template-columns:
    var(--col-idx)
    minmax(var(--col-wide-min), 2.3fr)
    minmax(var(--col-narrow-min), 1.3fr)
    minmax(var(--col-narrow-min), 1.3fr)
    minmax(var(--col-comment-min), 3fr)
    var(--col-approve)
    var(--col-actions);
}
.volt-grid .grid-head, .volt-grid .grid-row {
  grid-template-columns:
    var(--col-idx)
    minmax(var(--col-wide-min), 2.3fr)
    minmax(var(--col-narrow-min), 1.3fr)
    minmax(var(--col-narrow-min), 1.3fr)
    minmax(var(--col-comment-min), 3fr)
    var(--col-approve)
    var(--col-actions);
}
.grid-head .head{ padding: 0 6px 0; font-weight: inherit; font-size: inherit; color: inherit; display:flex; align-items:center; justify-content:flex-start; }
.grid-head .head.mid{ text-align: center; justify-content: center; padding-left: 0; padding-right: 0; }
.iso-grid .grid-head .head:nth-child(7), .cont-grid .grid-head .head:nth-child(6), .volt-grid .grid-head .head:nth-child(6){ text-align: center; justify-content: center; padding-left: 0; padding-right: 0; }
.grid-row input[type="text"], .grid-row input[type="number"], .grid-row select, .grid-row textarea{ width: 100%; height: var(--control-h); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font-size: var(--fs-input-text); line-height: calc(var(--control-h) - 2px); transition: border-color 0.2s ease; }
.grid-row input[type="text"]:focus, .grid-row input[type="number"]:focus, .grid-row select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }

/* Desktop: centrera "Godkänd" över checkboxkolumnen */
@media (min-width: 1025px){
  #kfid-controls .grid-row .cell.mid{ justify-content: center; }
}

/* ===== ISO "Krets/Objekt" autosuggest dropdown ===== */
.kfid-suggest {
  position: fixed; /* för mobil: förankra till viewport så den inte driver vid body-scroll/keyboard */
  /* Lägg i samma lager som formulärfält – under sticky-rubriker men över vanligt innehåll */
  z-index: 65;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  list-style: none;
  margin: 4px 0 0 0;
  padding: 4px;
  max-height: 220px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}
.kfid-suggest[hidden]{ display:none; }
.kfid-suggest li {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.kfid-suggest li[aria-selected="true"],
.kfid-suggest li:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* Checkboxar i grid */
.grid-row input[type="checkbox"], input[type="checkbox"][data-vk] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border); background: #fff; display: inline-grid; place-content: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.grid-row input[type="checkbox"]:hover, input[type="checkbox"][data-vk]:hover { border-color: var(--primary); }
.grid-row input[type="checkbox"]:focus-visible, input[type="checkbox"][data-vk]:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.grid-row input[type="checkbox"]::after, input[type="checkbox"][data-vk]::after { content: ""; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5 L9.5 15 L15 6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); opacity: 0; transform: scale(0.9); transition: opacity .15s ease, transform .15s ease; }
.grid-row input[type="checkbox"]:checked, input[type="checkbox"][data-vk]:checked { background: var(--primary); border-color: var(--primary); }
.grid-row input[type="checkbox"]:checked::after, input[type="checkbox"][data-vk]:checked::after { opacity: 1; transform: scale(1); }

/* Låsta OK-rutor när auto-bedömning är på */
.grid-wrap input[type="checkbox"][data-field="ok"]:disabled { opacity: .6; cursor: not-allowed; filter: grayscale(.25); }

/************************************
  55. RCD – TVÅVÅNINGS-LAYOUT (desktop)
*************************************/
.rcd-grid{
  --w-idx: var(--col-idx);
  --w-standard: minmax(200px, 2.2fr);
  --w-place: minmax(200px, 2.2fr);
  --w-type: minmax(var(--col-narrow-min), 1.1fr);
  --w-uclim: minmax(var(--col-narrow-min), 1.1fr);
  --w-idn: minmax(var(--col-narrow-min), 1.1fr);
  --w-itrip-plus: minmax(var(--col-narrow-min), 1.1fr);
  --w-itrip-minus: minmax(var(--col-narrow-min), 1.1fr);
  --w-comment: minmax(var(--col-comment-min), 2.4fr);
  --w-time: minmax(var(--col-narrow-min), 1fr);
  --w-uc: minmax(var(--col-narrow-min), 1fr);
  --w-notrip: minmax(80px, 0.9fr);
  --w-testbutton: minmax(80px, 0.9fr);
  --w-approved: var(--col-approve);
  --w-actions: var(--col-actions);
}
.rcd-grid .rcd-head-a{ display: grid; column-gap: 10px; padding: var(--field-label-top) 12px 0; font-weight: var(--fw-body); font-size: var(--fs-label); background: var(--input); color: var(--fg); grid-template-columns: var(--w-idx) var(--w-standard) var(--w-type) var(--w-uclim) var(--w-idn) var(--w-itrip-plus) var(--w-itrip-minus) var(--w-comment); }
.rcd-grid .rcd-head-b{ display: grid; column-gap: 10px; padding: var(--field-label-top) 12px 0; font-weight: var(--fw-body); font-size: var(--fs-label); background: var(--input); color: var(--fg); border-top: 1px solid var(--border); grid-template-columns: var(--w-idx) var(--w-place) var(--w-time) var(--w-time) var(--w-time) var(--w-time) var(--w-uc) var(--w-notrip) var(--w-testbutton) var(--w-approved) var(--w-actions); }
.rcd-grid .grid-row.rcd-row{ display: block; padding: 0; }
.rcd-grid .rcd-row-a, .rcd-grid .rcd-row-b{ display: grid; column-gap: 10px; padding: var(--field-label-gap) 12px 6px; align-items: center; border-bottom: 1px solid var(--border); }
.rcd-grid .rcd-row-a{ grid-template-columns: var(--w-idx) var(--w-standard) var(--w-type) var(--w-uclim) var(--w-idn) var(--w-itrip-plus) var(--w-itrip-minus) var(--w-comment); }
.rcd-grid .rcd-row-b{ grid-template-columns: var(--w-idx) var(--w-place) var(--w-time) var(--w-time) var(--w-time) var(--w-time) var(--w-uc) var(--w-notrip) var(--w-testbutton) var(--w-approved) var(--w-actions); }
.rcd-grid .grid-row.rcd-row:last-child .rcd-row-b{ border-bottom: none; }
.rcd-grid .rcd-row-b .cell.mid{ display:flex; align-items:center; justify-content:center; }
.rcd-grid .rcd-head-inline { margin: 0; }
.rcd-grid .rcd-head-a .idx::before, .rcd-grid .rcd-head-b .idx::before { content: none; counter-increment: none; display: none; }
.rcd-grid .rcd-head-a .idx, .rcd-grid .rcd-head-b .idx { color: transparent; }
.rcd-grid .rcd-row-a { border-bottom: 0; }
.rcd-std-head, .rcd-head-a .rcd-std-head { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: nowrap; }
.rcd-std-head select { flex: 0 0 auto; min-width: 180px; }
.rcd-std-head .rcd-limits, .rcd-std-head [data-rcd-limits] { white-space: nowrap; font-weight: var(--fw-body); opacity: 1; flex: 0 0 auto; color: var(--fg); }
.rcd-std-head .rcd-limits--tiny{ font-size: var(--fs-xs); line-height: var(--lh-label); }

/* RCD mellanlayout: 4 rader enligt skärmdump (A1 + A2 + B1 + B2) */
@media (min-width: 1025px) and (max-width: 1250px){
  /* Egen smal actions-kolumn så soptunnan alltid får plats */
  .rcd-grid{ --w-actions: 48px; }
  /* Bygg om varje RCD-rad till 8 rader (label/input per grupp) */
	  .rcd-grid .grid-row.rcd-row{
	    display: grid;
	    column-gap: 10px;
	    row-gap: var(--field-label-gap);
	    padding: 10px 12px;
	    border-bottom: 1px solid var(--border);
    grid-template-columns:
      var(--w-idx)
      minmax(150px, 1.5fr) /* Id (+) */
      minmax(150px, 1.5fr) /* Id (-) */
      minmax(80px, 1fr)    /* t1x (+) */
      minmax(80px, 1fr)    /* t1x (-) */
      minmax(80px, 1fr)    /* t5x (+) */
      minmax(80px, 1fr)    /* t5x (-) */
      var(--w-actions);
    grid-template-rows: auto auto auto auto auto auto auto auto;
    align-items: center;
  }
  .rcd-grid .grid-row.rcd-row:last-child{ border-bottom: none; }

  .rcd-grid .rcd-head-a,
  .rcd-grid .rcd-row-a,
  .rcd-grid .rcd-head-b,
  .rcd-grid .rcd-row-b{ display: contents; }

  /* Gemensam typografi/padding när wrappers inte längre bär bakgrund/padding */
			  .rcd-grid .grid-row.rcd-row .head{
			    display: block;
			    padding: var(--field-label-top) 6px 0;
			    font-weight: var(--fw-body);
			    font-size: var(--fs-label);
			    line-height: var(--lh-label);
			    color: var(--fg);
			  }
			  .rcd-grid .grid-row.rcd-row .head.mid{ text-align: center; }
	  .rcd-grid .grid-row.rcd-row .cell{ padding: 0 6px 6px; min-width: 0; }
  .rcd-grid .grid-row.rcd-row .cell.actions{
    padding: 0;
    align-self: center;
    justify-content: flex-end;
  }
  .rcd-grid .grid-row.rcd-row .cell.actions > .btn--icon{ margin: 0; }

  /* ---------------- A: Jordfelsbrytarprov (övre block) ---------------- */
  /* Rader: 1=labels A1, 2=inputs A1, 3=labels A2, 4=inputs A2 */
  .rcd-grid .rcd-head-a .head.idx{ grid-row: 1 / span 4; grid-column: 1; }
  .rcd-grid .rcd-row-a .cell.idx{ grid-row: 2 / span 3; grid-column: 1; align-self: center; }

  /* A1 labels */
  .rcd-grid .rcd-head-a .head:nth-child(2){ grid-row: 1; grid-column: 2 / span 2; } /* Standard */
  .rcd-grid .rcd-head-a .head:nth-child(3){ grid-row: 1; grid-column: 4; }          /* Typ */
  .rcd-grid .rcd-head-a .head:nth-child(4){ grid-row: 1; grid-column: 5; }          /* Uc ≤ */
  .rcd-grid .rcd-head-a .head:nth-child(5){ grid-row: 1; grid-column: 6 / span 2; } /* IΔn */
  /* A1 inputs */
  .rcd-grid .rcd-row-a .cell:nth-child(2){ grid-row: 2; grid-column: 2 / span 2; }
  .rcd-grid .rcd-row-a .cell:nth-child(3){ grid-row: 2; grid-column: 4; }
  .rcd-grid .rcd-row-a .cell:nth-child(4){ grid-row: 2; grid-column: 5; }
  .rcd-grid .rcd-row-a .cell:nth-child(5){ grid-row: 2; grid-column: 6 / span 2; }

  /* A2 labels */
  .rcd-grid .rcd-head-a .head:nth-child(6){ grid-row: 3; grid-column: 2; }          /* Id (+) */
  .rcd-grid .rcd-head-a .head:nth-child(7){ grid-row: 3; grid-column: 3; }          /* Id (-) */
  .rcd-grid .rcd-head-a .head:nth-child(8){ grid-row: 3; grid-column: 4 / span 4; } /* Kommentar */
  /* A2 inputs */
  .rcd-grid .rcd-row-a .cell:nth-child(6){ grid-row: 4; grid-column: 2; }
  .rcd-grid .rcd-row-a .cell:nth-child(7){ grid-row: 4; grid-column: 3; }
  .rcd-grid .rcd-row-a .cell:nth-child(8){ grid-row: 4; grid-column: 4 / span 4; }

  /* ---------------- B: Jordfelsbrytarprov (nedre block) ---------------- */
  /* Rader: 5=labels B1, 6=inputs B1, 7=labels B2, 8=inputs B2 */
  .rcd-grid .rcd-head-b .head.idx{ grid-row: 5 / span 4; grid-column: 1; }
  .rcd-grid .rcd-row-b .cell:nth-child(1){ grid-row: 6 / span 3; grid-column: 1; align-self: center; } /* spacer */

  /* B1 labels */
  .rcd-grid .rcd-head-b .head:nth-child(2){ grid-row: 5; grid-column: 2 / span 2; } /* Placering */
  .rcd-grid .rcd-head-b .head:nth-child(3){ grid-row: 5; grid-column: 4; }           /* t1x (+) */
  .rcd-grid .rcd-head-b .head:nth-child(4){ grid-row: 5; grid-column: 5; }           /* t1x (-) */
  .rcd-grid .rcd-head-b .head:nth-child(5){ grid-row: 5; grid-column: 6; }           /* t5x (+) */
  .rcd-grid .rcd-head-b .head:nth-child(6){ grid-row: 5; grid-column: 7; }           /* t5x (-) */
  /* B1 inputs */
  .rcd-grid .rcd-row-b .cell:nth-child(2){ grid-row: 6; grid-column: 2 / span 2; }
  .rcd-grid .rcd-row-b .cell:nth-child(3){ grid-row: 6; grid-column: 4; }
  .rcd-grid .rcd-row-b .cell:nth-child(4){ grid-row: 6; grid-column: 5; }
  .rcd-grid .rcd-row-b .cell:nth-child(5){ grid-row: 6; grid-column: 6; }
  .rcd-grid .rcd-row-b .cell:nth-child(6){ grid-row: 6; grid-column: 7; }

  /* B2 labels */
  .rcd-grid .rcd-head-b .head:nth-child(7){ grid-row: 7; grid-column: 2 / span 2; }  /* Uc uppmätt */
  .rcd-grid .rcd-head-b .head:nth-child(8){ grid-row: 7; grid-column: 4; }           /* 0,5× */
  .rcd-grid .rcd-head-b .head:nth-child(9){ grid-row: 7; grid-column: 5; }           /* Testknapp */
  .rcd-grid .rcd-head-b .head:nth-child(10){ grid-row: 7; grid-column: 6; }          /* Godkänd */
  .rcd-grid .rcd-head-b .head:nth-child(11){ grid-row: 7; grid-column: 8; }          /* actions */
  /* B2 inputs */
  .rcd-grid .rcd-row-b .cell:nth-child(7){ grid-row: 8; grid-column: 2 / span 2; }
  .rcd-grid .rcd-row-b .cell:nth-child(8){ grid-row: 8; grid-column: 4; }
  .rcd-grid .rcd-row-b .cell:nth-child(9){ grid-row: 8; grid-column: 5; }
  .rcd-grid .rcd-row-b .cell:nth-child(10){ grid-row: 8; grid-column: 6; }
  .rcd-grid .rcd-row-b .cell:nth-child(11){ grid-row: 8; grid-column: 8; }
}

/************************************
  60. TABLET (≤1024px) – ADAPT
*************************************/
@media (max-width: 1024px){
  #kfid-controls{ --kfid-idx-size: 30px; --kfid-rowcam-size: calc(var(--kfid-idx-size) + 4px); padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .grid-head{ display:none }
  .grid-wrap { background: transparent; border: none; border-radius: 0; box-shadow: none; }
  .grid-row{ display: block; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative; width: 100%; }
  .grid-row .cell.idx { position: static; width: auto; height: auto; background: transparent; border-radius: 0; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 8px; }
 .grid-wrap .grid-row .idx .kfid-idx-dot::before{ background: var(--primary); color: var(--primary-ink); font-size: var(--fs-sm); font-weight: var(--fw-display); }
	  .grid-row .cell:not(.idx):not(.actions) { display: block; margin-bottom: 16px; padding-right: 0; width: 100%; box-sizing: border-box; }
	  .grid-row .cell:not(.idx):not(.actions)::before { content: attr(data-label); display: block; font-size: var(--fs-label); font-weight: var(--fw-body); color: var(--fg); margin: var(--field-label-top) 0 var(--field-label-gap) 0; padding: 0; text-transform: none; letter-spacing: 0; }
	  /* Checkbox-kolumner (stackat): matcha label→fält spacing (label över checkbox) */
	  .grid-row .cell.mid{ display: block; }
	  /* RCD har en mer specifik "center"-regel på desktop – skriv över i stackat läge */
	  .rcd-grid .rcd-row-b .cell.mid{ display: block; }
	  .grid-row input[type="text"], .grid-row input[type="number"], .grid-row select { width: 100%; height: 48px; font-size: var(--fs-input-text); padding: 0 16px; border-radius: 8px; border: 2px solid var(--border); background: var(--input); transition: border-color 0.2s ease; }
  .grid-row input[type="text"]:focus, .grid-row input[type="number"]:focus, .grid-row select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.1); }
  .grid-row input[type="checkbox"], input[type="checkbox"][data-vk] { width: 22px; height: 22px; margin-right: 12px; }
  .grid-row .cell.mid input[type="checkbox"]{ margin: 0; }
  .grid-row .cell.actions { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); padding-right: 0; }
  .grid-row .cell.actions::before { content: ""; }
  /* RCD kompakt */
  .rcd-grid .rcd-row-a, .rcd-grid .rcd-row-b{ display:block; padding: 16px; border-bottom: 1px solid var(--border); }
  .rcd-grid .rcd-row-b{ border-bottom: 0; }
  .rcd-grid .rcd-row-b .rcd-spacer{ display:none !important; }
  .rcd-grid .rcd-head-a,
  .rcd-grid .rcd-head-b,
  .rcd-grid .rcd-head-inline{ display:none !important; }
		  .rcd-grid .rcd-row-a .cell[data-label="Standard"]::before{
		    content: attr(data-label);
		    display: inline-block;
		    font-size: var(--fs-sm);
		    font-weight: var(--fw-body);
		    color: var(--fg);
		    padding-left: var(--input-offset);
		    text-transform: none;
		    letter-spacing: 0;
		  }
		  .rcd-grid .rcd-row-a .cell[data-label="Standard"]::after{
		    content: attr(data-value-prefix) attr(data-value-label);
		    display: inline-block;
		    margin-left: 6px;
		    font-size: var(--fs-sm);
		    font-weight: var(--fw-body);
		    color: var(--fg);
		    text-transform: none;
		    letter-spacing: 0;
		  }
  .rcd-grid .rcd-row-a .cell[data-label="Standard"]{ padding-top: 8px; }
  .rcd-grid .rcd-row.rcd-layout-stacked .rcd-row-a .cell[data-label="Standard"]{
    padding-top: 0;
  }
  .rcd-grid .rcd-row.rcd-layout-stacked .rcd-row-a .cell[data-label="Standard"]::before{
    display: block;
    margin-bottom: 8px;
    padding-left: var(--input-offset);
  }
  .rcd-grid .rcd-row.rcd-layout-stacked .rcd-row-a .cell[data-label="Standard"]::after{
    display: block;
    margin-left: 0;
    margin-top: 4px;
    padding-left: var(--input-offset);
  }

	  /* Sticky headers när rutnätet staplas (tablet & mobil) */
	  #kfid-controls article.card > header {
	    position: sticky;
	    top: calc(var(--controls-sticky-top) - 14px);
	    z-index: 70;
      background: var(--card);
      /* Tablet/mobil: ingen "inramad" stickyheader – låt den vara lika bred som innehållet */
      border: none;
      border-radius: 0;
      box-shadow: none;
	    clip-path: inset(0);
	    overflow: visible;
	    will-change: transform;
	    -webkit-transform: translateZ(0);
	    transform: translateZ(0);
	    backface-visibility: hidden;
	    padding-left: var(--header-pad-left, max(12px, var(--safe-area-inset-left)));
	    padding-right: var(--header-pad-right, max(12px, var(--safe-area-inset-right)));
	    margin-bottom: 0;
	    --header-after-left: 0;
	    --header-after-right: 0;
	    --header-after-bottom: -16px;
	    --header-after-height: 24px;
	    --header-after-bg: var(--card);
	  }
	  @supports (padding-left: max(0px, 0px)) {
	    #kfid-controls article.card > header {
	      padding-left: var(--header-pad-left, max(12px, var(--safe-area-inset-x)));
	      padding-right: var(--header-pad-right, max(12px, var(--safe-area-inset-x)));
	    }
	  }
  #kfid-controls article.card > header::before {
    content: "";
    position: absolute;
    top: -38px;
    left: 0;
    right: 0;
    width: auto;
    height: 38px;
    background: var(--card);
    pointer-events: none;
  }
  /* Enkel grå linje under stickyheader (full bredd i innehållsytan) */
  #kfid-controls article.card > header::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: color-mix(in srgb, var(--border) 90%, transparent);
    pointer-events: none;
  }

  /* Diskret grå linje även ovanför headern */
  #kfid-controls article.card > header{
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent);
  }
	  #kfid-controls article.card[data-section]:not([data-section="vis"]) {
	    background: transparent;
	    border: none;
	    box-shadow: none;
	    padding: 0;
	    position: relative;
	  }

	  /* VK + Sammanfattning ska fortsätta se ut som "riktiga kort" även på tablet (≤1024px) */
	  #kfid-controls article.card[data-section="vis"] > header{
	    position: static;
	    top: auto;
	    border: none;
	    border-radius: 0;
	    box-shadow: none;
	    padding-left: 0;
	    padding-right: 0;
	    margin-bottom: 12px;
	  }
	  #kfid-controls article.card[data-section="vis"] > header::before,
	  #kfid-controls article.card[data-section="vis"] > header::after{
	    display:none;
	  }
#kfid-controls article.card > header.is-stuck{
    --header-after-left: 0;
    --header-after-right: 0;
    --header-after-bottom: 0;
    --header-after-height: 1px;
    --header-after-bg: color-mix(in srgb, var(--border) 75%, transparent);
  }

	  #kfid-controls article.card > header.is-stuck::after{
	    content: "";
	    position: absolute;
      left: 0;
      right: 0;
	    bottom: 0;
	    height: 1px;
	    background: color-mix(in srgb, var(--border) 80%, transparent);
	    pointer-events: none;
	  }
	  @supports (padding-left: max(0px, 0px)) {
	    #kfid-controls article.card > header.is-stuck::after{
        left: 0;
        right: 0;
	    }
	  }
}
#kfid-controls article.card > .sticky-sentinel{
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

/************************************
  65. MOBIL ≤700px (inkl landskap coarse ≤992px)
*************************************/
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px){
  /* iOS: Full viewport-höjd med minimerad adressfält */
  body.page { min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; }
  /* Extra luft under sista innehållet så det inte "tar slut" ovanför bottenmenyn */
  body.page { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px); }
  main { flex: 1 1 auto; padding-bottom: calc(110px + env(safe-area-inset-bottom)); margin-top: calc(-1 * var(--header-h) * var(--chrome-hide-p)); }
  html.hide-chrome main { padding-bottom: max(24px, env(safe-area-inset-bottom) + 12px); margin-top: calc(-1 * var(--header-h)); }
  /* När topp-chrome är .kfid-hero (fixed): använd padding istället för margin-hack (förhindrar dubbel-förskjutning). */
  html.kfid-hero-chrome main { margin-top: 0; padding-top: var(--top-chrome-visible-h); }
  html.kfid-hero-chrome.hide-chrome main { margin-top: 0; padding-top: var(--top-chrome-visible-h); }

	  .container { width: 100%; max-width: 100%; margin: 0; padding-left: max(12px, var(--safe-area-inset-left)); padding-right: max(12px, var(--safe-area-inset-right)); }
	  @supports (padding-left: max(0px, 0px)) {
	    .container { padding-left: max(12px, var(--safe-area-inset-x)); padding-right: max(12px, var(--safe-area-inset-x)); }
	  }
	  .container.stack.vspace { width: 100%; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; }

  /* Ta bort yttre card i mobil för app-känsla */
  main > .container > section.card { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
  main > .container > section.card .card { --card-pad: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

  #kfid-controls article.card > header.row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
	  #kfid-controls article.card > header{
	    min-height: 60px;
	    padding-top: 14px;
	    padding-bottom: 12px;
	    padding-left: max(16px, var(--safe-area-inset-left));
	    padding-right: max(16px, var(--safe-area-inset-right));
	  }
	  @supports (padding-left: max(0px, 0px)) {
	    #kfid-controls article.card > header{
	      padding-left: max(16px, var(--safe-area-inset-x));
	      padding-right: max(16px, var(--safe-area-inset-x));
	    }
	  }
  #kfid-controls article.card > header .kfid-sec-left{
    flex: 1 1 auto;
    min-width: 0;
  }
#kfid-controls article.card > header .kfid-sec-left h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--kfid-toggle-space);
  }
  #kfid-controls article.card > header .kfid-sec-tools{ flex: 0 0 auto; }
  #kfid-controls article.card > header .kfid-sec-toggle__btn{
    flex-shrink: 0;
    align-self: center;
  }

  /* ≤700px: gör kontrollraderna “ramlösa” (ingen extra card-ram/padding)
     så de utnyttjar skärmbredden som Visuell kontroll. */
  #kfid-controls .grid-row{
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  #kfid-controls .grid-row:hover{ background: transparent; }

  /* Diskret avgränsare mellan rader (≤700px) */
  #kfid-controls .grid-wrap .list > .grid-row{
    position: relative;
    padding-bottom: 14px;
  }
  #kfid-controls .grid-wrap .list > .grid-row::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    pointer-events: none;
  }
  #kfid-controls .grid-wrap .list > .grid-row:last-child{
    padding-bottom: 0;
  }
  #kfid-controls .grid-wrap .list > .grid-row:last-child::after{ display:none; }

  /* Mobil: centrera och linjera radens ikoner med sektionens stickyheader-ikoner */
  #kfid-controls{
    --kfid-row-icons-size: 42px; /* matchar .kfid-sec-icons .icon-btn (42px) */
    --kfid-idx-size: var(--kfid-row-icons-size);
    --kfid-rowcam-size: var(--kfid-row-icons-size);
  }
  #kfid-controls .grid-row .cell.idx{
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--kfid-row-icons-size);
  }
  #kfid-controls .grid-row .cell.idx{ margin-bottom: 10px; }
  #kfid-controls .grid-row .cell.idx .kfid-idx-dot::before{ font-size: var(--fs-sm); }
  #kfid-controls .kfid-rowcam{
    padding: 6px;
    width: var(--kfid-rowcam-size);
    height: var(--kfid-rowcam-size);
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    opacity: 1;
  }
  #kfid-controls .kfid-rowcam:hover{
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    box-shadow: 0 2px 6px rgba(0,0,0,.10);
  }
  #kfid-controls .kfid-rowcam img{ width: 28px; height: 28px; display:block; }

  #kfid-controls .grid-row .cell.actions{
    border-top: none;
    padding-top: 0;
    margin-top: 12px;
  }
  /* RCD block: ta bort extra “kortkänsla” i mobil */
  .rcd-grid .rcd-row-a,
  .rcd-grid .rcd-row-b{
    background: transparent;
    padding: 0;
    border-bottom: none;
  }

  @media (max-width: 540px){
    #kfid-controls article.card > header.row { gap: 6px; }
  #kfid-controls article.card > header{
    min-height: 64px;
    padding-top: 14px;
    padding-bottom: 14px;
    --kfid-toggle-space: 54px;
    padding-right: max(8px, env(safe-area-inset-right));
  }
    #kfid-controls article.card > header .kfid-sec-left{ gap: 6px; }
    #kfid-controls article.card > header .kfid-sec-tools{
      gap: 6px;
      position: absolute;
      right: max(8px, env(safe-area-inset-right));
      top: 50%;
      transform: translateY(-50%);
      margin-left: 0;
    }
  }

  /* Smal mobil: rubrik ovanför ikonrad för att undvika horisontell overflow */
  @media (max-width: 500px){
    #kfid-controls article.card > header.row{ align-items: flex-start; }
    #kfid-controls article.card > header .kfid-sec-left{
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    #kfid-controls article.card > header .kfid-sec-left > h3{ order: 1; }
    #kfid-controls article.card > header .kfid-sec-left > .kfid-sec-icons{
      order: 2;
      margin-right: 0;
      align-self: flex-start;
    }
    /* Behåll togglen uppe till höger så den inte hamnar mitt i två rader */
    #kfid-controls article.card > header .kfid-sec-tools{
      top: 14px;
      transform: none;
    }
  }

  /* Form-sticky under header */
  :root { --app-header-offset: calc(env(safe-area-inset-top) + 80px); --controls-sticky-top: var(--app-header-offset); }
  @media (min-width: 701px) { :root { --app-header-offset: 0px; --controls-sticky-top: 0px; } }
  main > .container > section.card > .grid.g3:first-of-type { position: sticky; top: var(--app-header-offset); z-index: 80; background: var(--bg); padding: 12px; margin: -12px -12px 12px -12px; border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }


    /* Kontroller: utnyttja bredden som Kunduppgifter (.grid.g3)
       - Ta bort extra sid-inset på grid-wrap
       - Behåll trygg padding för safe-area
    */
    #kfid-controls{ --input-offset: 0px; }
    #kfid-controls .grid-wrap {
      margin: 0 0 12px 0;
      padding-top: 16px;
      padding-left: 0;
      padding-right: 0;
      border-top: none;
    }

  /* Inre cards mer kompakta */
  .card { --card-pad: 12px; padding: var(--card-pad); margin-bottom: 12px; }
  .card.stack.gap { gap: 12px; }
  .grid.g3 { gap: 12px; }
footer { padding-block: 8px; font-size: var(--fs-sm); }

    #kfid-controls article.card > header{
      /* Mobil: linjera header-ikoner/rubrik med kontrollens innehåll (ingen extra dubbel-padding) */
      --header-pad-left: 0px;
      --header-pad-right: 0px;
      padding-left: var(--header-pad-left);
      padding-right: var(--header-pad-right);
    }
	  @supports (padding-left: max(0px, 0px)) {
	    #kfid-controls article.card > header{
        --header-pad-left: 0px;
        --header-pad-right: 0px;
	    }
	  }

    /* Mobil: stickyheader ska vara "bred" och ren, med enkel grå linje under (full bredd i innehållsytan). */
    #kfid-controls article.card > header{
      border: none;
      border-radius: 0;
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent);
    }
    #kfid-controls article.card > header::after{
      display: block;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: color-mix(in srgb, var(--border) 90%, transparent);
      pointer-events: none;
    }
    #kfid-controls article.card > header.is-stuck{ box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border) 80%, transparent); }
}

@media (max-width: 1024px){
/* Sticky topp-header (sidans header) */
body > header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-block: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: 16px;
  margin-bottom: 0;
  -webkit-user-select: none;
  user-select: none;
  padding-left: max(12px, var(--safe-area-inset-left));
  padding-right: max(12px, var(--safe-area-inset-right));
  -webkit-transform: translate3d(0, calc(-1 * var(--header-h) * var(--chrome-hide-p)), 0);
  transform: translate3d(0, calc(-1 * var(--header-h) * var(--chrome-hide-p)), 0);
  opacity: calc(1 - var(--chrome-hide-p));
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
  @supports (padding-left: max(0px, 0px)) {
    body > header {
      padding-left: max(12px, var(--safe-area-inset-x));
      padding-right: max(12px, var(--safe-area-inset-x));
    }
  }
  body > header.container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  body > header.container::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    background: var(--bg);
    pointer-events: none;
  }
  html.is-standalone body > header.container::before { left: 0; right: 0; width: auto; transform: none; }
  body > header h1 { font-size: clamp(var(--fs-title), 5vw, var(--fs-xl)); line-height: var(--lh-title); margin: 0; }
body > header .muted { font-size: var(--fs-sm); margin: 4px 0 0; }
  body > header .row { margin-top: 6px !important; }

  /* Kunduppgifter – lika höga fält som övriga stackade kontroller */
  .grid.g3 input[type="text"],
  .grid.g3 input[type="number"],
  .grid.g3 input[type="date"],
  .grid.g3 input[type="email"],
	  .grid.g3 select {
	    height: 48px;
	    padding: 0 16px;
	    border-width: 2px;
	    border-radius: 10px;
	    font-size: var(--fs-input);
	    line-height: 46px;
	  }
  .grid.g3 input[type="date"]::-webkit-date-and-time-value,
  .grid.g3 input[type="date"]::-webkit-datetime-edit {
    height: 46px;
    line-height: 46px;
  }
}

/************************************
  70. GRID & GENERELLA LAYOUTS
*************************************/
.kfid-field-with-icon__wrap{
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.kfid-field-with-icon__wrap > input{
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 16px;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  line-height: calc(var(--control-h) - 2px);
}
.kfid-field-with-icon__btn{
  position: static;
  transform: none;
  width: var(--kfid-icon-w, 52px);
  min-width: var(--kfid-icon-w, 52px);
  height: 100%;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--menu-link-bg, var(--input, #f3f4f6));
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.kfid-field-with-icon__wrap:focus-within{
  border-color: var(--border);
  outline: 1px solid var(--primary);
  outline-offset: 0;
}
.kfid-field-with-icon__wrap > input:focus{ outline: none; }
.kfid-field-with-icon__btn:hover{
  background: var(--menu-link-hover, #e3e6ee);
}
.kfid-field-with-icon__btn.is-disabled,
.kfid-field-with-icon__btn:disabled{
  cursor: default;
  opacity: 0.58;
  filter: grayscale(0.65);
  background: color-mix(in srgb, var(--menu-link-bg, var(--input, #f3f4f6)) 80%, #fff 20%);
}
.kfid-field-with-icon__btn.is-disabled:hover,
.kfid-field-with-icon__btn:disabled:hover{
  background: color-mix(in srgb, var(--menu-link-bg, var(--input, #f3f4f6)) 80%, #fff 20%);
}
.kfid-field-with-icon__btn.is-disabled img,
.kfid-field-with-icon__btn:disabled img{
  filter: grayscale(1) saturate(0);
  opacity: 0.75;
}
.kfid-field-with-icon__btn.is-linked{
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.kfid-field-with-icon__btn img{ width: 24px; height: 24px; display:block; opacity: .9; }

/* Ikonbredd i fälten Kontaktperson + E‑post */
.kfid-field-client{ --kfid-icon-w: 52px; }
.kfid-field-addr{ --kfid-icon-w: 52px; }

/* Kundkoppling-status (röd/grön) */
.kfid-cust-link-ind{
  position: relative;
  width: var(--kfid-icon-w, 52px);
  min-width: var(--kfid-icon-w, 52px);
  height: 100%;
  padding: 0;
  border: 0;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  /* Slimmad röd/grön bakgrund bakom ikonen (inte hela bredden) */
  background: transparent;
  cursor: pointer;
}

.kfid-cust-link-ind::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--kfid-fail) 10%, var(--menu-link-bg, var(--input, #f3f4f6)));
  pointer-events: none;
}

.kfid-cust-link-ind:disabled{
  cursor: default;
  opacity: 1;
}
.kfid-cust-link-ind.is-disabled{
  cursor: default;
  opacity: 0.58;
  filter: grayscale(0.8);
}
.kfid-cust-link-ind.is-disabled::before{
  background: color-mix(in srgb, var(--border) 18%, var(--menu-link-bg, var(--input, #f3f4f6)));
}
.kfid-cust-link-ind.is-disabled .kfid-cust-link-ind__icon{
  filter: grayscale(1) saturate(0) opacity(0.8);
}

.kfid-field-with-icon__wrap.has-customer-link .kfid-cust-link-ind::before{
  background: color-mix(in srgb, var(--kfid-ok) 10%, var(--menu-link-bg, var(--input, #f3f4f6)));
}

.kfid-cust-link-ind__icon{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: block;
  background-color: currentColor;
  z-index: 0;
}
/* Default: ingen koppling -> röd */
.kfid-cust-link-ind__on{ display: none; color: color-mix(in srgb, var(--kfid-ok) 78%, #000 22%); -webkit-mask: url("picture/how_to_reg.svg") no-repeat center / contain; mask: url("picture/how_to_reg.svg") no-repeat center / contain; }
.kfid-cust-link-ind__off{ display: block; color: color-mix(in srgb, var(--kfid-fail) 78%, #000 22%); -webkit-mask: url("picture/person_cancel.svg") no-repeat center / contain; mask: url("picture/person_cancel.svg") no-repeat center / contain; }
.kfid-field-with-icon__wrap.has-customer-link .kfid-cust-link-ind__on{ display: block; }
.kfid-field-with-icon__wrap.has-customer-link .kfid-cust-link-ind__off{ display: none; }
@media (max-width: 1024px){
  /* Matcha .grid.g3 inputs på tablet/mobil */
  .kfid-field-with-icon__wrap{
    min-height: 48px;
    height: 48px;
    border-width: 2px;
    border-radius: 10px;
  }
  .kfid-field-with-icon__btn{
    width: var(--kfid-icon-w, 60px);
    min-width: var(--kfid-icon-w, 60px);
    border-left-width: 2px;
  }

  .kfid-field-client{ --kfid-icon-w: 60px; }
  .kfid-field-addr{ --kfid-icon-w: 60px; }

  .kfid-field-with-icon__btn img,
  .kfid-cust-link-ind__icon{
    width: 26px;
    height: 26px;
  }
}

.grid { display: grid; gap: 8px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .g3 { grid-template-columns: repeat(2, 1fr); } .row { flex-wrap: wrap; } }
@media (max-width: 700px) { .g3 { grid-template-columns: 1fr; } .row { flex-direction: column; align-items: stretch; } .btn { font-size: var(--fs-base); } }

/* Gap-fallbacks */
@supports not (gap: 1rem) {
  .card .row.gap { --_g: var(--btn-gap); }
  .card .row.gap > * { margin: 0 !important; }
  .card .row.gap > * + * { margin-left: var(--_g) !important; }
}
@supports not (gap: 1rem) {
  @media (max-width: 700px) {
    .card .row.gap { --_g: clamp(30px, 6vw, 35px); }
  }
}
@media (max-width: 700px) {
  .card .row.gap { gap: clamp(30px, 6vw, 35px); }
}

/************************************
  75. CARD MENY (popup + drawer-lik menyn)
*************************************/
.card-menu { position: absolute; --menu-offset: clamp(10px, 1.5vw, 16px); top: var(--menu-offset); right: var(--menu-offset); z-index: 40; --menu-w: 260px; --item-h: 40px; --menu-pad: 8px; --menu-gap: 4px; }
.card-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--fg); padding: 0; user-select: none; transition: border-color .2s, background-color .2s; }
.card-menu > summary:hover { border-color: var(--primary); }
.card-menu > summary::-webkit-details-marker { display: none; }

.card-menu__popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: var(--menu-w);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--menu-pad);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform-origin: right center;
  transform: translateX(12px) scaleX(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  overflow: hidden;

	  /* Menytypografi tokens (popup-variant) */
	  --menu-fs-1: calc(var(--menu-fs-1-px) * var(--ui-scale));
	  --menu-fs-2: calc(var(--menu-fs-2-px) * var(--ui-scale));
	  --menu-fs-3: calc(var(--menu-fs-3-px) * var(--ui-scale));
		  --menu-fw: var(--fw-medium);
		  --menu-fw-strong: var(--fw-strong);
	  /* Bas i popup = nivå 2. Nivå 1 används för knappar. */
	  font-size: var(--menu-fs-2);
	  line-height: var(--menu-lh);
	  font-weight: var(--menu-fw);
	}
[data-theme="dark"] .card-menu__popup { background: #0f1726; border-color: #2a3b55; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.card-menu[open] .card-menu__popup { transform: translateX(0) scaleX(1); opacity: 1; pointer-events: auto; }

/* Reducera typografi-variation i menyn */
.card-menu__popup strong,
#mobile-drawer strong {
  font-weight: var(--menu-fw-strong);
}

/* Meny: checkbox-rader ska matcha menyknapparnas typografi */
.card-menu__popup .check_b,
#mobile-drawer .check_b{
  font-size: var(--menu-fs-1);
  font-weight: var(--menu-fw);
}
.card-menu__popup .check_b__title,
#mobile-drawer .check_b__title{
  font-size: inherit;
  font-weight: inherit;
}

/* Popup: knappar använder nivå 1 */
.card-menu__popup .card-menu__link,
.card-menu__popup .card-menu__summary{
  font-size: var(--menu-fs-1);
}

.kfid-menu__subsection {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 12px 0 8px;
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh);
  color: var(--fg);
  font-weight: var(--fw-body);
}
.kfid-menu__subheading {
  margin: 0 0 8px 0;
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh);
  color: var(--fg);
  font-weight: var(--menu-fw-strong);
}
.kfid-menu__fields { display: grid; grid-template-columns: 1fr; gap: 6px; }
.kfid-menu__label {
  display: block;
  margin: 0 0 4px;
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh);
  color: var(--fg);
  font-weight: var(--fw-body);
}
/* Företagsfilter: rubriken ska vara fet men inte muted */
#kfid-superadmin-company-filter .kfid-menu__label{
  font-weight: var(--menu-fw-strong);
}
.kfid-menu__select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--menu-fs-2);
  line-height: var(--menu-lh-tight);
  font-weight: var(--fw-body);
}
.kfid-qa-hint {
  font-size: var(--menu-fs-3);
  line-height: var(--menu-lh-tight);
  color: var(--muted);
  min-height: 0.9em;
}

.card-menu__list, .card-menu__sub { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--menu-gap); justify-items: start; }
.card-menu__link, .card-menu__summary{ display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: var(--item-h); padding: 0 10px; border-radius: 8px; text-decoration: none; background: var(--card); border: 1px solid var(--card); cursor: pointer; font: inherit; color: var(--fg); justify-self: stretch; width: 100%; box-sizing: border-box; box-shadow: none; }
.card-menu__link .card-menu__label { display: inline-flex; align-items: center; gap: 8px; }
.card-menu__link img.card-menu__icon { width: 18px; height: 18px; display: inline-block; }
.card-menu__link:hover, .card-menu__summary:hover, .card-menu__back:hover { background: color-mix(in srgb, var(--primary) 50%, transparent); border: 1px solid transparent; }
.card-menu__link--sub{
  justify-self: start;
  width: calc(100% - 28px);
  margin-left: 28px;
  min-height: calc(var(--item-h) - 8px);
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  box-sizing: border-box;
}
.card-menu__link--sub .card-menu__label { gap: 6px; }
.card-menu__link--sub img.card-menu__icon { width: 16px; height: 16px; opacity: .9; }

/* Dark theme menu readability overrides */
[data-theme="dark"] .card-menu__list > li .card-menu__link:not(.card-menu__link--theme) {
  background: var(--menu-link-bg);
  border: 1px solid #2a3b55;
  color: var(--fg);
}
[data-theme="dark"] .card-menu__list > li .card-menu__link:not(.card-menu__link--theme):hover,
[data-theme="dark"] .card-menu__list > li .card-menu__link:not(.card-menu__link--theme):focus {
  background: var(--menu-link-hover);
  border-color: var(--primary);
}
[data-theme="dark"] .card-menu__link--theme { color: var(--fg); }
[data-theme="dark"] .card-menu__link img.card-menu__icon { filter: invert(.9) brightness(1.15); }
[data-theme="dark"] .card-menu__theme-toggle { background: color-mix(in srgb, var(--primary) 22%, #162133); }
[data-theme="dark"] .card-menu__theme-toggle:hover, [data-theme="dark"] .card-menu__theme-toggle:focus { background: color-mix(in srgb, var(--primary) 40%, #162133); }
[data-theme="dark"] .card-menu__link--theme[aria-current="true"] { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }

@media (max-width: 1024px) {
  .card-menu { --item-h: 48px; --menu-gap: 8px; }
}

/* Tema-knappar matchar transparens */
.card-menu__theme-toggle, .card-menu__link--theme { background: color-mix(in srgb, var(--primary) 26%, transparent); border: 1px solid transparent; color: inherit; }
.card-menu__theme-toggle:hover, .card-menu__theme-toggle:focus, .card-menu__link--theme:hover, .card-menu__link--theme:focus { background: color-mix(in srgb, var(--primary) 50%, transparent); }
.card-menu__theme-toggle[aria-expanded="true"], .card-menu__link[data-action="settings"][aria-expanded="true"] { background: color-mix(in srgb, var(--primary) 50%, transparent); border: 1px solid transparent; }

/* Tema-förhandsvisningar (statiska) */
.card-menu__link--theme[data-theme="light"]{ background: color-mix(in srgb, #2563eb 26%, transparent); color: #0f172a; }
.card-menu__link--theme[data-theme="light"]:hover, .card-menu__link--theme[data-theme="light"]:focus{ background: color-mix(in srgb, #2563eb 50%, transparent); }
.card-menu__link--theme[data-theme="modern"]{ background: color-mix(in srgb, #8b5cf6 26%, transparent); color: #0f172a; }
.card-menu__link--theme[data-theme="modern"]:hover, .card-menu__link--theme[data-theme="modern"]:focus{ background: color-mix(in srgb, #8b5cf6 50%, transparent); }
.card-menu__link--theme[data-theme="dark"]{ background: #141b29; color: #e2e8f0; border: 1px solid #233047; }
.card-menu__link--theme[data-theme="dark"]:hover, .card-menu__link--theme[data-theme="dark"]:focus{ background: #1c2639; border-color: #2f3d57; }
[data-theme="dark"] .card-menu__theme-popup .card-menu__link--theme[data-theme="light"],
[data-theme="dark"] .card-menu__theme-popup .card-menu__link--theme[data-theme="modern"]{
  color: #e2e8f0; /* säkerställer läsbar text i mörk meny */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
[data-theme="dark"] .card-menu__theme-popup .card-menu__link--theme[data-theme="light"]:hover,
[data-theme="dark"] .card-menu__theme-popup .card-menu__link--theme[data-theme="modern"]:hover,
[data-theme="dark"] .card-menu__theme-popup .card-menu__link--theme[data-theme="light"]:focus,
[data-theme="dark"] .card-menu__theme-popup .card-menu__link--theme[data-theme="modern"]:focus{
  color: #eef2f9;
}

/* Disabled menyknappar - extra tydlig gråmarkering */
.card-menu__link:disabled,
.card-menu__link[disabled],
.card-menu__link[aria-disabled="true"],
.card-menu__link.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.8);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 80%, var(--muted));
}
.card-menu__link.need-delete-perm {
  opacity: 0.55;
  cursor: pointer;
  pointer-events: auto;
  filter: grayscale(0.8);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 80%, var(--muted));
}
.btn.need-delete-perm {
  opacity: 0.6;
  cursor: pointer;
  pointer-events: auto;
}

/* Markerad post */

/* Gäst-banderoll: radbryt andra delen på små skärmar */
#kfid-guest-banner .guest-msg-rest,
#kfid-guest-inline .guest-msg-rest { display: inline; }
@media (max-width: 560px){
  #kfid-guest-banner .guest-msg-rest,
  #kfid-guest-inline .guest-msg-rest { display: block; margin-top: 4px; }
}
.card-menu__link:not(.card-menu__link--theme)[aria-current="true"], .card-menu__link:not(.card-menu__link--theme)[aria-current="true"]:hover { background: color-mix(in srgb, var(--primary) 50%, transparent); box-shadow: inset 0 0 0 2px var(--primary); position: relative; }
.card-menu__link:not(.card-menu__link--theme)[aria-current="true"]::before{ content: ""; position: absolute; left: 4px; top: 20%; width: 4px; height: 60%; border-radius: 999px; background: var(--primary); }
.card-menu__link--theme[aria-current="true"] { position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.62); }
[data-theme="light"] .card-menu__link--theme[aria-current="true"],
[data-theme="modern"] .card-menu__link--theme[aria-current="true"] { box-shadow: inset 0 0 0 2px rgba(15,23,42,0.22); }

/* Bakåt / Nästa */
.card-menu__link--back { grid-template-columns: auto 1fr; }
.card-menu__link--back::before { content: ""; width: var(--icon-sz); height: var(--icon-sz); margin-right: 8px; background-color: currentColor; -webkit-mask: url("picture/arrow_b_2_1.svg") no-repeat center / contain; mask: url("picture/arrow_b_2_1.svg") no-repeat center / contain; opacity: .7; }
.card-menu__link--next { grid-template-columns: 1fr auto; }
.card-menu__link--next::after { content: ""; width: var(--icon-sz); height: var(--icon-sz); margin-left: 8px; background-color: currentColor; -webkit-mask: url("picture/arrow_f_2_1.svg") no-repeat center / contain; mask: url("picture/arrow_f_2_1.svg") no-repeat center / contain; opacity: .7; }

.card-menu__submenu { border-radius: 8px; }
.card-menu__summary { width: 100%; text-align: left; }
.card-menu__summary { font-size: var(--menu-fs-1); }
.card-menu__summary::after { content: ""; width: var(--icon-sz); height: var(--icon-sz); margin-left: 8px; background-color: currentColor; -webkit-mask: url("picture/arrow_f_2_1.svg") no-repeat center / contain; mask: url("picture/arrow_f_2_1.svg") no-repeat center / contain; opacity: .7; transition: transform .18s ease; }
.card-menu__submenu[open] > .card-menu__summary::after { transform: rotate(90deg); }
.card-menu__submenu[open] > .card-menu__summary { background: color-mix(in srgb, var(--primary) 50%, transparent); border: 1px solid transparent; }

/* Drawer-menyns list (kant-till-kant) */
.card-menu__list { padding: 24px 0 0 0; margin: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; }
.card-menu__list > li { margin: 0 0 12px 0; padding: 0; width: 6.6cm; min-width: 6.6cm; max-width: 6.6cm; display: block; }
.card-menu__link { display: flex; align-items: center; width: 100%; min-width: 0; min-height: 38px; height: 38px; box-sizing: border-box; padding: 0 16px 0 14px; margin: 0; background: var(--menu-link-bg, var(--input, #f3f4f6)); color: var(--fg); border: none; border-radius: 6px; font-size: var(--menu-fs-1); font-weight: var(--menu-fw, var(--fw-medium)); text-align: left; cursor: pointer; transition: background 0.18s, color 0.18s, box-shadow 0.18s; box-shadow: 0 1px 4px rgba(0,0,0,0.04); gap: 14px; }
.card-menu__link:focus, .card-menu__link:hover { background: var(--menu-link-hover, #e3e6ee); outline: 2px solid var(--ring, #0055a5); z-index: 1; }
.card-menu__link.is-danger { color: #b91c1c; background: #fff0f0; }
.card-menu__link.is-muted { color: var(--muted); }

.card-menu__link--theme { display: block; width: 100%; background: var(--primary); color: var(--primary-ink); border: none; border-radius: 6px; min-height: 38px; height: 38px; padding-left: 24px; font-size: var(--menu-fs-1); margin: 0; box-sizing: border-box; text-align: left; transition: background 0.18s, color 0.18s; }
.card-menu__theme-popup { margin: 0 0 0 32px; padding: 8px 0 0 0; list-style: none; background: none; box-shadow: none; transition: max-height 0.18s, opacity 0.18s; opacity: 1; }
.card-menu__theme-popup[hidden] { display: none; opacity: 0; }
.card-menu__theme-popup li { margin-bottom: 8px; padding: 0; }
.card-menu__theme-popup li:last-child { margin-bottom: 0; }

/* Settings-submeny justeringar */
.card-menu__theme-popup[data-settings] .check_b{ align-items: center; min-height: 38px; height: 38px; padding: 7px 14px 7px 12px; border-radius: 6px; font-size: var(--menu-fs-1); }
.card-menu__theme-popup[data-settings] .check_b__title { font-size: inherit; font-weight: var(--menu-fw, var(--fw-medium)); color: var(--fg); }
@media (pointer: coarse) { .card-menu__theme-popup[data-settings] .check_b { min-height: 44px; height: 44px; font-size: var(--menu-fs-1); } }
.card-menu__theme-popup[data-settings] .check_b:focus-within{ outline: none; outline-offset: 0; box-shadow: none; }

/* Split: checkbox + settings-knapp (Autoförslag) */
.card-menu__theme-popup[data-settings] .kfid-menu-split{
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 38px;
  height: 38px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.card-menu__theme-popup[data-settings] .kfid-menu-split:hover{ border-color: var(--primary); }
.card-menu__theme-popup[data-settings] .kfid-menu-split:focus-within{ outline: 2px solid var(--ring, #0055a5); outline-offset: 0; }
.card-menu__theme-popup[data-settings] .kfid-menu-split .check_b.check_b--split{
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 7px 12px;
}
.card-menu__theme-popup[data-settings] .kfid-menu-split .check_b.check_b--split .check_b__meta{ min-width:0; }
.card-menu__theme-popup[data-settings] #kfid-ai-prefetch-label{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn{
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--menu-link-bg, var(--input, #f3f4f6));
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn:focus,
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn:hover{
  background: var(--menu-link-hover, #e3e6ee);
  outline: none;
}
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn:disabled,
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn.is-disabled{
  cursor: not-allowed;
  opacity: .75;
}
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn:disabled img,
.card-menu__theme-popup[data-settings] .kfid-menu-split__btn.is-disabled img{
  filter: grayscale(1) saturate(0);
}
@media (pointer: coarse) {
  .card-menu__theme-popup[data-settings] .kfid-menu-split{ min-height: 44px; height: 44px; }
  .card-menu__theme-popup[data-settings] .kfid-menu-split__btn{ flex-basis: 48px; width: 48px; min-width: 48px; }
}

/* Ikonplats i menylänk */
.card-menu__link .menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 10px; font-size: inherit; opacity: 0.85; }

/* Drawer: större menyikoner (matcha bottom-nav 28–32px) */
#mobile-drawer img.card-menu__icon { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) {
  /* Desktop (ofta lägre DPI): mjuka upp så SVG-strokes inte upplevs “feta” */
  #mobile-drawer img.card-menu__icon {
    opacity: 0.8;
    filter: contrast(0.85) brightness(1.08);
  }
}

/* Touchvänliga höjder i drawer under 1024px */
@media (max-width: 1024px) {
  .card-menu__link { min-height: 48px; height: 48px; }
  .card-menu__link--theme { min-height: 48px; height: 48px; }
  .card-menu__theme-popup[data-settings] .check_b { min-height: 48px; height: 48px; }
  /* Ökat vertikalt mellanrum för bättre touch-separation */
  .card-menu__list > li { margin: 0 0 12px 0; }
}

/************************************
  80. VISUELL KONTROLL (VK) – BILDER/LIGHTBOX
*************************************/
.vk-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px){
  .vk-grid { grid-template-columns: 1fr; }
  /* Mobil: lägg text över checkbox (inte under) */
  .vk-grid label.row{ flex-direction: column-reverse; align-items: flex-start; gap: var(--field-label-gap); }
  .vk-grid label.row > span{ font-size: var(--fs-label); line-height: var(--lh-label); }
}
textarea[data-vk="comment"] { width: 100%; height: 150px; min-height: 150px; max-height: 60vh; resize: vertical; box-sizing: border-box; display: block; }
.vk-grid textarea[data-vk="comment"] { grid-column: 1 / -1; }

.vk-ai-btn img{ width:24px; height:24px; display:block; }
.kfid-summary-tools{
  display:flex;
  align-items:center;
  gap:8px;
}
.vk-ai-mode-btn img{
  width:18px;
  height:18px;
  display:block;
}
textarea.vk-ai-thinking{
  color: var(--muted);
  font-style: italic;
}

.kfid-ai-mode-modal__card{
  width:min(420px, 92vw);
  max-width:420px;
}
.kfid-ai-mode-modal__list{
  display:grid;
  gap:10px;
  margin:8px 0 12px;
}
.kfid-ai-mode-option{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  min-height: var(--modal-control-h-desktop);
  padding: 6px 10px;
  background:var(--input);
  cursor:pointer;
  box-sizing:border-box;
}
.kfid-ai-mode-option input{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  flex: 0 0 auto;
}
.kfid-ai-mode-option__text{
  display:grid;
  gap:2px;
  min-width:0;
}
.kfid-ai-mode-option__text strong{
  font-size: var(--fs-input-text);
  line-height: var(--lh-label);
}
.kfid-ai-mode-option__text small{
  font-size: var(--fs-base);
  color:var(--muted);
  line-height: calc(var(--lh-sm) - 0.05);
}
@media (max-width: 1024px){
  #kfid-ai-mode-modal .kfid-ai-mode-option{
    min-height: var(--modal-control-h-mobile);
    padding: 10px 12px;
  }
  #kfid-ai-mode-modal .kfid-ai-mode-option input{
    width: 20px;
    height: 20px;
  }
  #kfid-ai-mode-modal .kfid-ai-mode-option__text strong{
    font-size: var(--fs-input);
  }
}

.vk-ai-btn:disabled img,
.vk-ai-btn.is-disabled img{
  filter: grayscale(1) saturate(0);
  opacity: 0.8;
}
.vk-ai-mode-btn:disabled img,
.vk-ai-mode-btn.is-disabled img{
  filter: grayscale(1) saturate(0);
  opacity: 0.8;
}

/* Liten "robot-rörelse" när sammanfattningen genereras */
@media (prefers-reduced-motion: no-preference) {
  .vk-ai-btn.is-working img{
    will-change: transform;
    transform-origin: 50% 65%;
    animation: kfid-robot-wiggle 900ms ease-in-out infinite;
  }
}
@keyframes kfid-robot-wiggle{
  0%   { transform: translate(0, 0) rotate(0deg); }
  18%  { transform: translate(1px, -1px) rotate(-7deg); }
  36%  { transform: translate(-1px, 1px) rotate(7deg); }
  54%  { transform: translate(1px, 0px) rotate(-4deg); }
  72%  { transform: translate(-1px, -1px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.vk-upload > .small.muted { display: block; margin-bottom: 10px; }
.vk-upload .vk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--btn-gap);
  flex-wrap: wrap;
  margin-top: 10px;
}
.vk-upload .vk-actions label.btn {
  order: 1;
}
.vk-upload .vk-actions button.btn {
  order: 2;
}
.vk-upload .vk-actions .btn {
  flex: 0 0 auto;
  font-size: var(--btn-font-size);
  font-weight: inherit;
  font-family: var(--font, inherit);
  white-space: nowrap;
  min-height: 48px;
  height: 48px;
  padding: 0 18px;
  box-sizing: border-box;
}
@media (min-width: 1025px) {
  .vk-upload .vk-actions .btn {
    min-height: var(--control-h);
    height: var(--control-h);
    font-size: var(--btn-font-size);
  }
}
.vk-upload .vk-actions #vk-filename {
  order: 3;
  flex: 0 1 auto;
  min-width: 140px;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--fg);
  white-space: nowrap;
}

/* Tumnaglar */
.vk-thumbs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 180px)); gap: 12px; margin-top: 6px; justify-content: start; }
.vk-thumb{ position: relative; width: 180px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--input); box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: zoom-in; }
.vk-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-thumb__remove, .vk-thumb__del{ position: absolute; top: 6px; right: 6px; z-index: 10; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; opacity: .95; }
.vk-thumb__remove:hover, .vk-thumb__del:hover{ opacity: 1; }
.vk-thumb__tag{
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 9;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  line-height: calc(var(--lh-tight) - 0.05);
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.vk-docs{ display: grid; gap: 8px; margin-top: 12px; }
.vk-doc{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.vk-doc__icon{ width: 20px; height: 20px; flex: 0 0 auto; opacity: 0.9; }
.vk-doc__link{ flex: 1 1 auto; color: var(--primary); text-decoration: none; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vk-doc__link:hover, .vk-doc__link:focus{ text-decoration: underline; }
.vk-doc__remove{ flex: 0 0 auto; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--fs-title); line-height: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.vk-doc__remove:hover{ background: rgba(0,0,0,0.05); color: var(--primary); }
@media (max-width: 1024px){ .vk-thumbs{ grid-template-columns: repeat(auto-fill, minmax(160px, 160px)); } .vk-thumb{ width: 160px; } }

/* Lightbox */
.vk-lightbox { position: fixed; top: 0; left: 0; right: 0; height: 100vh; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; padding: 0; }
.vk-lightbox[hidden] { display: none !important; }
.vk-lightbox:focus{ outline: none; }
@supports (height: 100svh) {
  .vk-lightbox{ height: 100svh; }
}
@supports (height: 100dvh) {
  .vk-lightbox{ height: 100dvh; }
}
@supports (padding: env(safe-area-inset-top)) {
  .vk-lightbox{
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}
.vk-lightbox__stage{ position: relative; display: grid; place-items: center; max-width: min(96vw, 1400px); max-height: min(90vh, 100%); cursor: default; touch-action: none; }
@supports (height: 100svh) {
  @media (max-width: 1024px) and (orientation: landscape){
    .vk-lightbox__stage{ max-height: 100%; max-width: min(98vw, 1400px); }
  }
}
@supports (height: 100dvh) {
  @media (max-width: 1024px) and (orientation: landscape){
    .vk-lightbox__stage{ max-height: 100%; max-width: min(98vw, 1400px); }
  }
}
.vk-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.6); cursor: default; user-select: none; -webkit-user-drag: none; }
.vk-lightbox__close, #vk-lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 10002; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-xl); line-height: 1; cursor: pointer; }
.vk-lightbox__close:hover, #vk-lightbox-close:hover { background: rgba(0,0,0,.75); }
.vk-lightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: var(--fs-icon-xl);
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.vk-lightbox__nav:hover{ background: rgba(0,0,0,.75); }
.vk-lightbox__prev{ left: 14px; }
.vk-lightbox__next{ right: 14px; }
.vk-lightbox__meta{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.vk-lightbox__tag{
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  line-height: calc(var(--lh-tight) - 0.05);
  max-width: min(92vw, 700px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.vk-lightbox__count{
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  line-height: 1;
  backdrop-filter: blur(8px);
}

@media (max-width: 700px){
  .vk-lightbox__nav{ width: 42px; height: 42px; font-size: var(--fs-icon-lg); }
  .vk-lightbox__prev{ left: 12px; }
  .vk-lightbox__next{ right: 12px; }
  .vk-lightbox__close{ top: 12px; right: 12px; }
  .vk-lightbox__meta{ left: 10px; bottom: 10px; }
}

@media (max-width: 700px) and (orientation: portrait){
  .vk-lightbox__prev{ left: 16px; }
  .vk-lightbox__next{ right: 16px; }
  .vk-lightbox__close{ top: 12px; right: 12px; }
}

/* VK-upload: anpassning i mobil */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px) {
  .vk-upload .vk-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(12px, 3vw, var(--btn-gap));
  }
  .vk-upload .vk-actions #vk-filename {
    flex: 0 1 160px;
    min-width: 120px;
    margin-top: 0;
  }
  .vk-upload .vk-thumbs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 12px;
  }
  .vk-docs { gap: 10px; }
  .vk-doc { flex-wrap: wrap; align-items: flex-start; }
  .vk-doc__link { width: 100%; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; overflow-wrap: anywhere; }
  .vk-doc__remove { align-self: flex-start; }
}

@media (max-width: 480px) {
  .vk-upload .vk-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .vk-upload .vk-actions #vk-filename {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }
}

.kfid-company-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  /* Fast utrymme för loggan för att undvika layout-hopp när bilden laddas */
  min-height:60px;
  margin: 0 auto 12px auto;
  max-width:320px;
}
.kfid-company-logo--fallback{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  width:min(100%,320px);
  padding:16px;
  border-radius:18px;
  min-height:80px;
  background:var(--kfid-logo-fallback, var(--card));
  border:none;
  box-shadow:none;
}
.kfid-company-logo__fallback-text{
  font-weight: var(--fw-display);
  letter-spacing: 0.04em;
  line-height: calc(var(--lh-tight) - 0.1);
  font-size: clamp(18px, 2.3vw, 34px);
  color: color-mix(in srgb, var(--fg) 92%, var(--muted));
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kfid-company-logo img{
  max-height:60px;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* ==== Hydration mjuk fade-in för inloggningsinfo och logotyp ==== */
.kfid-company-logo,
#kfid-account-info,
main.container,
header.container,
.kfid-status-slot {
  transition:opacity .18s cubic-bezier(.4,0,.2,1);
}
body.instant-overlay main.container,
body.instant-overlay header.container,
body.instant-overlay .kfid-status-slot,
body.instant-overlay .kfid-company-logo,
body.instant-overlay #kfid-account-info {
  opacity:0 !important;
  pointer-events:none;
  transition:none !important;
}
body.instant-overlay .loading-overlay.active.preload {
  opacity:1 !important;
  visibility:visible !important;
  transition:none !important;
}
.loading-overlay.active.preload {
  opacity:1 !important;
  visibility:visible !important;
  background:rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  z-index:10000 !important;
  transition: opacity .25s cubic-bezier(.4,0,.2,1);
}
.loading-overlay.fade-out {
  opacity:0 !important;
  transition: opacity .25s cubic-bezier(.4,0,.2,1);
}

/* Slot som reserverar plats för badge så sidan inte hoppar */
.kfid-status-slot{
  /* Reservplats även för gäst-bannern så höjden är stabil oavsett om den visas eller inte */
  min-height: var(--kfid-badge-h, 60px);
  margin: 20px 0 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ID-badge för aktuell kontroll / inloggning */
.kfid-current-id{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-weight: var(--fw-strong);
  font-size: var(--fs-sm);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
  margin: 0; /* marginal hanteras av slotten ovan för att bibehålla utrymme även när badgen döljs */
}
.kfid-current-id img{
  display:inline-block;
  width:16px;
  height:16px;
  opacity:.9;
}

.kfid-disclaimer{
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-align: left;
  max-width: none;
  width: auto;
}

.kfid-footer{ display: none; }

@media (min-width: 1025px){
  .kfid-footer{
    display: block;
    margin-top: 24px;
    width: 100%;
    padding: 0;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
  }
  .kfid-footer-primary{
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border-top: 2px solid #111111;
    background: #113351;
    box-sizing: border-box;
  }
  .kfid-footer-bottom{
    width: 100%;
    background: #ffffff;
    min-height: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .kfid-footer-bottom-row{
    max-width: 1200px;
    min-height: 30px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    place-items: center;
  }
  .kfid-footer-copyright{
    color: #334155;
    text-align: center;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .kfid-footer-copyright p{
    margin-top: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
  }
}
/* Dölj bubblan helt när den är tom (men behåll slotens utrymme) */
.kfid-status-slot .kfid-current-id:empty { display: none; }
[data-theme="dark"] .kfid-status-slot .kfid-current-id{ color: #bfc7d5; }
/* behåll äldre selektor för bakåtkomp. */
[data-theme="dark"] .kfid-current-id{ color: #bfc7d5; }

/* Gäst-banderoll och annan stackad info ska ta hel bredd i flex-slotten */
#kfid-guest-banner{ flex: 0 0 100%; width: 100%; }

/* Autosave-notis ska ligga på samma rad som inloggningsbadgen */
.kfid-status-slot #kfid-autosave-indicator{
  margin: 0 !important;
  flex: 0 0 auto;
  align-self: center;
}
/* Matcha höjd/utseende med "Inloggad som"-badgen */
.kfid-status-slot #kfid-autosave-indicator > span{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
}

/* Autosave-chip: samma grunddesign i alla vyer (startsida, autoförslag, mina kunder) */
#kfid-autosave-indicator,
#kfid-asg-autosave-indicator,
#kfid-cust-autosave-indicator{
  font-size: var(--fs-label);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
#kfid-autosave-indicator > span,
#kfid-asg-autosave-indicator > span,
#kfid-cust-autosave-indicator > span{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  white-space: nowrap;
  font-weight: var(--fw-body);
  line-height: 1;
}

/* Autosave-indikator: subtil grön highlight vid "Autosparar…" */
#kfid-autosave-indicator > span,
#kfid-asg-autosave-indicator > span,
#kfid-cust-autosave-indicator > span{
  padding: 2px 8px;
  border-radius: 999px;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
#kfid-autosave-indicator[data-state="saving"] > span,
#kfid-autosave-indicator[data-state="saved"] > span,
#kfid-asg-autosave-indicator[data-state="saving"] > span,
#kfid-asg-autosave-indicator[data-state="saved"] > span,
#kfid-cust-autosave-indicator[data-state="saving"] > span,
#kfid-cust-autosave-indicator[data-state="saved"] > span{
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset;
}
[data-theme="dark"] #kfid-autosave-indicator[data-state="saving"] > span,
[data-theme="dark"] #kfid-autosave-indicator[data-state="saved"] > span,
[data-theme="dark"] #kfid-asg-autosave-indicator[data-state="saving"] > span,
[data-theme="dark"] #kfid-asg-autosave-indicator[data-state="saved"] > span,
[data-theme="dark"] #kfid-cust-autosave-indicator[data-state="saving"] > span,
[data-theme="dark"] #kfid-cust-autosave-indicator[data-state="saved"] > span{
  background: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35) inset;
}

/* Sektionstitel med små ikoner (lägg till rad / förifyll) */
.kfid-sec-left{ display:inline-flex; align-items:center; gap:8px; position:relative; flex:1 1 auto; min-width:0; }
.kfid-sec-left > .kfid-sec-icons{ display:inline-flex; gap:6px; align-items:center; margin-right:4px; position:relative; flex-shrink:0; }
  .kfid-sec-left > h3{ display:inline-block; }

  /* Rowcount number sits over add icon (no bubble) */
  .kfid-sec-icons > .icon-btn[data-action="add"]{ position: relative; }
	  .kfid-sec-icons > .icon-btn[data-action="add"] .kfid-rowcount{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(12px, 8px) !important; /* justerat för större knapp */
	    display:inline-block; line-height:1; font-size: var(--fs-sm); font-weight:var(--fw-display);
	    color:#000; mix-blend-mode: normal; pointer-events:none; z-index: 5;
	  }
  .kfid-sec-icons > .icon-btn[data-action="add"] .kfid-rowcount::before{
    content: "";
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 15px; height: 15px; border-radius: 999px; background: #fff; z-index: -1;
  }

  /* Bild-count på kamera-ikonen i sektionens header */
  .kfid-sec-icons > .icon-btn[data-action="sectioncam"]{ position: relative; }
  .kfid-sec-icons > .icon-btn[data-action="sectioncam"] .kfid-imgcount{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(12px, 8px) !important;
    display:inline-block; line-height:1; font-size: var(--fs-sm); font-weight:var(--fw-display);
    color:#000; pointer-events:none; z-index: 5;
  }
  .kfid-sec-icons > .icon-btn[data-action="sectioncam"] .kfid-imgcount::before{
    content: "";
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 15px; height: 15px; border-radius: 999px; background: #fff; z-index: -1;
  }

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .kfid-sec-icons > .icon-btn[data-action="add"] .kfid-rowcount{ transform: translate(11px, 7px) !important; font-size: var(--fs-sm); }
  .kfid-sec-icons > .icon-btn[data-action="add"] .kfid-rowcount::before{ width: 14px; height: 14px; }
  .kfid-sec-icons > .icon-btn[data-action="sectioncam"] .kfid-imgcount{ transform: translate(11px, 7px) !important; font-size: var(--fs-sm); }
  .kfid-sec-icons > .icon-btn[data-action="sectioncam"] .kfid-imgcount::before{ width: 14px; height: 14px; }
}

/* Gör ikonernas konturer synliga i mörkt tema */
[data-theme="dark"] .kfid-sec-icons img { filter: invert(1) brightness(1.1) contrast(0.95); }
[data-theme="dark"] .kfid-rowcam img { filter: invert(1) brightness(1.1) contrast(0.95); }
[data-theme="dark"] .card-menu__link .card-menu__icon { filter: invert(1) brightness(1.15); }
[data-theme="dark"] .kfid-sec-icons .icon-btn { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
[data-theme="dark"] .kfid-sec-icons .icon-btn:hover { background: rgba(255,255,255,.12); }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .kfid-sec-icons img { filter: invert(1) brightness(1.1) contrast(0.95); }
  html[data-theme="auto"] .kfid-rowcam img { filter: invert(1) brightness(1.1) contrast(0.95); }
  html[data-theme="auto"] .kfid-sec-icons .icon-btn { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
  html[data-theme="auto"] .kfid-sec-icons .icon-btn:hover { background: rgba(255,255,255,.12); }
}
.kfid-sec-icons .icon-btn{ 
  padding:6px; width:42px; height:42px; display:grid; place-items:center; border-radius:999px; cursor:pointer; position:relative; z-index:2;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.kfid-sec-icons .icon-btn:hover{
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.kfid-sec-icons .icon-btn:disabled,
.kfid-sec-icons .icon-btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.kfid-rowcam:disabled,
.kfid-rowcam[disabled]{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.vk-thumb__remove:disabled,
.vk-thumb__remove[disabled]{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}

/* Extra säkerhet: om något nytt renderas efter auth-apply */
html.kfid-upload-disabled .kfid-rowcam,
html.kfid-upload-disabled #kfid-controls .kfid-sec-icons .icon-btn[data-action="sectioncam"],
html.kfid-upload-disabled .vk-upload .vk-actions label.btn[for="vk-files"],
html.kfid-upload-disabled #vk-clear-all,
html.kfid-upload-disabled #vk-thumbs .vk-thumb__remove{
  pointer-events: none;
}

/* Utloggad-läge: gör kamera-ikonen i kontrollrader grå (även på mobil) */
html.kfid-upload-disabled #kfid-controls .kfid-rowcam{
  border-color: color-mix(in srgb, var(--border) 90%, transparent) !important;
  background: color-mix(in srgb, var(--border) 18%, transparent) !important;
  opacity: 0.65;
}
html.kfid-upload-disabled #kfid-controls .kfid-rowcam img{
  filter: grayscale(1) saturate(0) opacity(0.85) !important;
}
.kfid-sec-icons img{ width:28px; height:28px; display:block; }
html.hide-fill-examples .kfid-sec-icons .icon-fill{ display:none !important; }
html.hide-fill-examples .kfid-sec-actions [data-action="fill"]{ display:none !important; }

.kfid-sec-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; }
.kfid-sec-toggle{ display:flex; align-items:center; gap:10px; }
.kfid-sec-toggle__btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}
.kfid-sec-toggle__btn:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.kfid-sec-toggle__btn:disabled{
  opacity: 0.55;
  cursor: default;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transform: none;
}
.kfid-sec-toggle__btn:disabled:hover{
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transform: none;
}
.kfid-sec-toggle__btn:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
.kfid-sec-toggle__btn img[data-icon]{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.kfid-sec-toggle__btn:not(.is-collapsed) img[data-icon="collapse"]{ opacity: 1; }
.kfid-sec-toggle__btn:not(.is-collapsed) img[data-icon="expand"]{ opacity: 0; }
.kfid-sec-toggle__btn.is-collapsed img[data-icon="collapse"]{ opacity: 0; }
.kfid-sec-toggle__btn.is-collapsed img[data-icon="expand"]{ opacity: 1; }
[data-theme="dark"] .kfid-sec-toggle__btn{
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .kfid-sec-toggle__btn{
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  }
}

/* Göm de stora textknapparna i små skärmar – ikonerna används där */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .kfid-sec-actions{ display:none; }
}

/* Tillfälligt: dölj stora textknapparna helt (ersätts av ikonknappar) */
.kfid-sec-actions{ display:none !important; }

/* Sektion: collapse */
#kfid-controls article.card.is-collapsed > :not(header){ display:none !important; }
#kfid-controls article.card.is-collapsed{ padding-bottom: 0; }

/************************************
  85. KFID SUMMARY
*************************************/
.kfid-summary{ display:grid; grid-template-columns:1fr; gap:8px; font-size: var(--fs-base); }
.kfid-summary__list{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.kfid-summary__item{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); background:var(--card); border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.kfid-summary__label{ font-weight:var(--fw-strong); color:var(--fg); }
.kfid-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-weight:var(--fw-strong); font-size: var(--fs-sm); line-height:1; border:1px solid transparent; box-sizing:border-box; }
.kfid-pill::before{ content:""; width:8px;height:8px;border-radius:999px; background:currentColor;opacity:.9; }
.kfid-pill--ok{ color:var(--kfid-ok); background:color-mix(in srgb, var(--kfid-ok) 10%, transparent); }
.kfid-pill--partial{ color:#92400e; background:#fef3c7; border:1px solid #f59e0b33; font-weight:var(--fw-strong); }
[data-theme="dark"] .kfid-pill--partial, html[data-theme="auto"] .kfid-pill--partial{ color:#fde68a; background:#4a2d05; border-color:#f59e0b55; }
[data-theme="modern"] .kfid-pill--partial{ color:#7a3e06; background:#fff3c4; border-color:#f59e0b33; }
.kfid-pill--fail{ color:var(--kfid-fail); background:color-mix(in srgb, var(--kfid-fail) 10%, transparent); }
.kfid-pill--none{ color:var(--kfid-none); background:color-mix(in srgb, var(--kfid-none) 10%, transparent); }
.kfid-summary__item.is-changed{ animation:kfidSummaryFlash .6s ease; }
@keyframes kfidSummaryFlash{ 0%{ box-shadow:0 0 0 0 rgba(59,130,246,.35); } 100%{ box-shadow:0 0 0 0 rgba(59,130,246,0); } }

/* Dölj modalens inbyggda footer när Open-listan är aktiv */
.kfid-openlist .ocr-modal__footer { display: none !important; }

/************************************
  90. OPEN-LIST (Öppna sparad kontroll)
*************************************/
.openbox { display: grid; gap: 12px; }

/* Mobil pager i överkant för "Öppna sparad kontroll" (samma princip som Mina kunder) */
#kfid-open-list .kfid-open-pager{
  display: none;
  margin: 6px 0 2px;
  width: 100%;
}
#kfid-open-list .kfid-open-pager .actions-middle{
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
}
#kfid-open-list .kfid-open-pager .pager-link,
#kfid-open-list .kfid-open-pager .openlist__counter{
  white-space: nowrap;
}

/* Mobil-header med ikonknappar (sticky) */
.openbox__msearch{ display:none; }
.ol-bottom-nav{ display:none !important; }

@media (max-width: 700px) {
  /* I mobil-UX: dölj filter-raden (status/datum/limit) – ersätts av sök-ikonen */
  #kfid-open-list .openbox__filters{ display:none !important; }
  /* Dölj filter-togglen (collapse/expand) i mobil-UX */
  #kfid-open-modal #ol-more-top{ display:none !important; }

  /* På mobil: dölj desktop-actions men behåll topp-pagern */
  #kfid-open-list .openbox__actions:not(.kfid-open-pager){ display: none !important; }
  #kfid-open-list .kfid-open-pager.openbox__actions{
    display: flex !important;
    margin-top: 0 !important;
  }

	/* Inställningsmodalen ska kunna visa samma fält även om openbox__filters är dold i listan */
	#kfid-open-list #ol-settings-modal{ z-index: 12050; }
	#kfid-open-list #ol-settings-modal .openbox__filters{ display: grid !important; }
		#kfid-open-list #ol-settings-modal .ocr-modal__card{
		  width: min(350px, 92vw) !important;
		  max-width: 350px !important;
		  /* Use available screen height to avoid unnecessary scrolling when there is room */
		  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
		  padding: 16px !important;
		  display: flex;
		  flex-direction: column;
		  overflow: hidden !important;
		}
		#kfid-open-list #ol-settings-modal .ocr-modal__body{
		  flex: 1 1 auto;
		  min-height: 0;
		  overflow: auto;
		  overscroll-behavior: contain;
		  -webkit-overflow-scrolling: touch;
		}
		#kfid-open-list #ol-settings-modal .ocr-modal__actions{
		  border-top: 0 !important;
		  padding: 0 !important;
		  margin-top: 12px;
		  justify-content: flex-start;
		  flex: 0 0 auto;
		}
		#kfid-open-list #ol-settings-modal .openbox__filters{ grid-template-columns: 1fr !important; }
		/* Matcha startsidans fälthöjd/typografi (t.ex. Kunduppgifter i .grid.g3) */
			#kfid-open-list #ol-settings-modal .openbox__filters .fitem{
			  gap: 6px;
			  font-size: var(--fs-sm);
			  color: var(--muted);
			}
#kfid-open-list #ol-settings-modal .openbox__filters input[type="search"],
#kfid-open-list #ol-settings-modal .openbox__filters input[type="date"],
	#kfid-open-list #ol-settings-modal .openbox__filters select{
  height: 48px;
  padding: 0 16px;
  border-width: 2px;
  border-radius: 10px;
	  font-size: var(--fs-input);
	  line-height: 46px;
	}
#kfid-open-list #ol-settings-modal .openbox__filters input[type="search"]{
  padding: 0 44px 0 16px;
  border-radius: 15px;
  border-color: var(--primary);
}
		#kfid-open-list #ol-settings-modal .openbox__filters input[type="date"]::-webkit-date-and-time-value,
		#kfid-open-list #ol-settings-modal .openbox__filters input[type="date"]::-webkit-datetime-edit{
		  height: 46px;
		  line-height: 46px;
		}

	  /* Sökfält som fälls ut av sökglaset (som startsidan): fixed under modaltoppen */
	  #kfid-open-list .openbox__msearch{
	    display:block;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(12px + env(safe-area-inset-top));
    z-index: 12010;
    background: transparent;
    box-sizing: border-box;
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-open-list .openbox__msearch{
      padding-left: calc(12px + var(--safe-area-inset-x));
      padding-right: calc(12px + var(--safe-area-inset-x));
    }
  }
  #kfid-open-list .openbox__msearch[hidden]{ display:none !important; }
  #kfid-open-list .openbox__msearch .top-search__wrap input[type="search"]{
    background: var(--card);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  }
  #kfid-open-list .openbox__msearch #ol-qm-clear.btn--icon{
    position: absolute;
    right: 6px;
  }

  /* Sticky bottenrad med ikoner (som #bottom-nav) */
  #kfid-open-list .ol-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12005;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    height: calc(64px + env(safe-area-inset-bottom));
    transform: translateY(calc(var(--bottom-nav-h) * var(--ol-chrome-hide-p, 0)));
    opacity: calc(1 - var(--ol-chrome-hide-p, 0));
    transition: transform 0.08s linear, opacity 0.08s linear;
    will-change: transform, opacity;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-open-list .ol-bottom-nav{ padding-left: var(--safe-area-inset-x); padding-right: var(--safe-area-inset-x); }
  }
  #kfid-open-list .ol-bottom-nav button{
    flex: 1 1 0;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 64px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    transition: background 0.2s;
  }
  #kfid-open-list .ol-bottom-nav button:focus{ background: var(--input); outline: 2px solid var(--ring); }
  #kfid-open-list .ol-bottom-nav button[disabled]{ opacity: 0.5; cursor: not-allowed; }
  #kfid-open-list .ol-bottom-nav .icon-svg{ width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }
  #kfid-open-list .ol-bottom-nav img{ width: 28px; height: 28px; pointer-events:none; }

	  /* Göm bottenraden vid scroll i listan */
	  #kfid-open-list .openbox.is-chrome-hidden{ --ol-chrome-hide-p: 1; }
	  #kfid-open-modal.is-chrome-hidden{ --ol-chrome-hide-p: 1; }

	  /* Ge plats i scrollen så sista raden inte hamnar bakom bottenraden (och ta bort platsen när den döljs) */
	  #kfid-open-list{ padding-bottom: 0; }
	  #kfid-open-list #ol-scroll{
	    padding-bottom: calc((64px + env(safe-area-inset-bottom)) * (1 - var(--ol-chrome-hide-p, 0)));
	  }
	}

/* Säkerställ att mobil-ikon-UI aldrig syns över 700px */
@media (min-width: 701px) {
  #kfid-open-list .ol-bottom-nav{ display: none !important; }
  #kfid-open-list .openbox__msearch{ display: none !important; }
  #kfid-open-list .openbox__msearch[hidden]{ display: none !important; }
}

/* Override: gamla regler stackar knappar under 700px längre ner i filen.
   Vi vill alltid dölja actions-left/right i nya mobil-UX:en. */
@media (max-width: 700px) {
  #kfid-open-list .openbox__actions .actions-left,
  #kfid-open-list .openbox__actions .actions-right{ display: none !important; }
  #kfid-open-list .openbox__actions:not(.kfid-open-pager){ display: none !important; }
  #kfid-open-list .kfid-open-pager.openbox__actions{ display: flex !important; }
  #kfid-open-list .openbox__filters{ display: none !important; }
  #kfid-open-modal #ol-more-top{ display: none !important; }
  #kfid-open-list .ol-bottom-nav{ display: flex !important; }
}
.openbox__filters{
  display: grid;
  grid-template-columns:
    minmax(60px, 1fr)      /* Sök */
    minmax(100px, 140px)   /* Status */
    150px                  /* Från */
    150px                  /* Till */
    minmax(60px, 110px);   /* Visa */
  gap: 8px;
  align-items: end;
}
.openbox__filters .fitem { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
/* Endast direkta filter-fält ska få standardhöjd.
   Sök som ligger i .top-search__wrap har egen wrapper-höjd och ska inte få dubbel input-styling. */
.openbox__filters .fitem > input[type="search"], .openbox__filters .fitem > input[type="date"], .openbox__filters .fitem > select{ height: var(--control-h); border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--fg); padding: 0 10px; outline: none; box-shadow: none; width: 100%; min-width: 0; }
.openbox__filters .fitem > :is(input[type="search"], input[type="date"], select):focus{ outline: none; box-shadow: none; border-color: var(--primary); }

.openbox__list { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.opengrid { display: grid; grid-template-columns: 40px 80px minmax(360px,2.2fr) minmax(150px,0.9fr) minmax(190px,1fr); gap: 0; }
.opengrid .c { padding: 5px 9px; border-bottom: 1px solid var(--border); font-size: var(--fs-base); display: flex; align-items: center; min-width: 0; }
.opengrid .c:nth-child(3){ overflow-wrap: anywhere; word-break: break-word; }
.opengrid .c--chk { display: grid; place-items: center; }
.opengrid .c:nth-child(5){ gap: 8px; }
.opengrid--head .c:nth-child(5),
.opengrid--body .openrow .c:nth-child(5){
  padding-right: 2px;
}
.opengrid--head { display: grid; grid-template-columns: 40px 80px minmax(360px,2.2fr) minmax(150px,0.9fr) minmax(190px,1fr); background: var(--input); font-weight: var(--fw-strong); color: var(--muted); }
.opengrid--head .c { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start; text-align: left; padding: 5px 9px; }
.opengrid--head .c[data-sort]{ cursor: pointer; position: relative; user-select: none; }
.opengrid--head .c[data-sort]::after{ content: ""; width: 14px; height: 14px; margin-left: 6px; vertical-align: middle; display: inline-block; background-color: currentColor; -webkit-mask: url("picture/sort.svg") no-repeat center / contain; mask: url("picture/sort.svg") no-repeat center / contain; opacity: .45; }
.opengrid--head .c[data-sort].is-sorted{ color: var(--fg); }
.opengrid--head .c[data-sort].is-sorted::after{ opacity: .9; }
.opengrid--head .c[data-sort][data-dir="desc"]::after{ transform: rotate(180deg); }

/* Öppna sparad kontroll: mobilrubrik i listan */
@media (max-width: 700px) and (min-width: 521px){
  #kfid-open-modal .opengrid--head{
    /* Behåll kolumn-geometry så "markera alla"-checkboxen linjerar med raderna */
    display: grid !important;
    grid-template-columns: 34px 56px minmax(140px,2fr) minmax(96px,0.9fr) minmax(100px,1fr);
    align-items: center;
    position: relative;
    background: var(--card);
    padding: 0;
    margin-bottom: 0;
    min-height: 46px;
    height: 46px;
    flex-shrink: 0;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #kfid-open-modal .opengrid--head .c{ display: none; }
  #kfid-open-modal .opengrid--head .c{ border: 0 !important; border-bottom: 0 !important; }
  #kfid-open-modal .opengrid--head .c--chk{
    display: grid !important;
    place-items: center;
    position: static;
    transform: none;
  }
  #kfid-open-modal .opengrid--head .c.ol-sort-label{
    display: flex !important;
    grid-column: 2 / -1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: var(--fw-strong);
    font-size: var(--fs-sm);
    color: var(--fg);
    cursor: pointer;
    user-select: none;
  }
  #kfid-open-modal .opengrid--head .ol-sort-label::after{ content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("picture/sort.svg") no-repeat center / contain; mask: url("picture/sort.svg") no-repeat center / contain; opacity: 0.9; }
  #kfid-open-modal .opengrid--head .ol-sort-label[data-dir="desc"]::after{ transform: rotate(180deg); }
}

.opengrid--body .openrow { display: contents; }
.opengrid--body .openrow:hover .c { background: color-mix(in srgb, var(--card) 90%, var(--primary) 10% / 10%); }

.opengrid input[type="checkbox"]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border); background: #fff; display: inline-grid; place-content: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.opengrid input[type="checkbox"]:hover{ border-color: var(--primary); }
.opengrid input[type="checkbox"]:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }
.opengrid input[type="checkbox"]::after{ content: ""; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5 L9.5 15 L15 6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); opacity: 0; transform: scale(0.9); transition: opacity .15s ease, transform .15s ease; }
.opengrid input[type="checkbox"]:checked{ background: var(--primary); border-color: var(--primary); }
.opengrid input[type="checkbox"]:checked::after{ opacity: 1; transform: scale(1); }

.openlist__scroll.openlist__scroll--fixed{
  height: var(--ol-scroll-height, 520px);
  min-height: var(--ol-scroll-min-height, var(--ol-scroll-height, 520px));
  max-height: var(--ol-scroll-max-height, var(--ol-scroll-height, 520px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.openbox .btn{ height: var(--control-h); min-height: var(--control-h); padding-block: 0; line-height: var(--lh-tight); }

.openbox__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:auto;
  width:100%;
}
.openbox__actions .actions-left,
.openbox__actions .actions-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.openbox__actions .actions-left{
  order:1;
}
.openbox__actions .actions-left .btn{
  min-width: 120px;
  width: 140px;
  flex: 0 0 140px;
  text-align: center;
}

/* 'Radera permanent' har längre text – ge den lite extra bredd */
.openbox__actions .actions-left #ol-purge{
  width: 180px;
  flex-basis: 180px;
  white-space: nowrap;
}
.openbox__actions .actions-middle{
  order:3;
  flex:0 0 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  text-align:center;
}
.openbox__actions .actions-right{
  order:2;
  margin-left:auto;
}
.pager-link{ background:none; border:0; padding:0; font: inherit; color: var(--fg); cursor:pointer; opacity:.85; text-decoration:none; }
.pager-link:hover{ opacity:1; text-decoration: underline; }
.pager-link:disabled{ opacity:.35; cursor: default; pointer-events:none; text-decoration:none; }
.openlist__counter { color: var(--muted); font-size: var(--fs-sm); }

/* Bredare modal på desktop för Öppna-listan */
#kfid-open-modal > .ocr-modal__card{
  width: min(var(--modal-wide-desktop), 98vw) !important;
  max-width: var(--modal-wide-desktop) !important;
  padding: 16px !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}
#kfid-open-modal > .ocr-modal__card > .ocr-modal__title{
  display: block;
  width: 100%;
  text-align: center;
}
#kfid-open-modal > .ocr-modal__card > .ocr-modal__actions{ justify-content: flex-end !important; }
/* Öppna-listan: Stäng-knappen ska följa KFID-höjd (övriga modaler hanteras separat) */
@media (max-width: 1024px) {
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__actions .btn{
    height: var(--modal-control-h-mobile) !important;
    min-height: var(--modal-control-h-mobile) !important;
    max-height: var(--modal-control-h-mobile) !important;
    padding: 0 24px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1025px) {
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__actions .btn{
    height: var(--control-h) !important;
    min-height: var(--control-h) !important;
    max-height: var(--control-h) !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}
#kfid-open-list{ display:flex; flex-direction:column; gap:12px; overflow: visible; flex:1 1 auto; min-height:0; }
#kfid-open-list .openbox{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px; }
#kfid-open-list .openbox__list{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }

/* Dölj modalens standard-actions på mobil – vi visar egen Stäng-knapp */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px){
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__actions{ display: none !important; }
}

#kfid-open-list .openbox__more{
  background: none;
  border: 0;
  padding: 6px 0 0 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
#kfid-open-list .openbox__more:hover{ color: var(--fg); text-decoration: none; }

#kfid-open-modal > .ocr-modal__card{ position: relative; }
#kfid-open-modal .openbox__more-top{
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 6;
}
#kfid-open-modal .openbox__more-top:active{ transform: translateY(1px); }
#kfid-open-modal .openbox__more-top img[data-icon]{
  width: 24px;
  height: 24px;
}

/* iPad-ish */
@media (max-width: 1024px){
  .openbox__filters{
    grid-template-columns:
      minmax(60px, 1fr)
      minmax(90px, 120px)
      150px
      150px
      minmax(60px, 110px);
  }
  .opengrid{ grid-template-columns: 34px 64px minmax(240px,2fr) minmax(140px,0.9fr) minmax(170px,1fr); }
  .opengrid--head{ grid-template-columns: 34px 64px minmax(240px,2fr) minmax(140px,0.9fr) minmax(170px,1fr); }
}
@media (max-width: 769px){
  .openbox__filters{
    grid-template-columns:
      minmax(50px, 1fr)
      minmax(90px, 110px)
      140px
      140px
      minmax(60px, 100px);
  }
}
/* Krympa Status och Visa ytterligare runt ~863px bredd */
@media (max-width: 900px) and (min-width: 701px){
  .openbox__filters{
    grid-template-columns:
      minmax(80px, 1fr)
      minmax(60px, 100px)   /* Status */
      140px                  /* Från */
      140px                  /* Till */
      minmax(40px, 80px);    /* Visa */
  }
}
@media (max-width: 700px) and (min-width: 521px){
  .openbox__filters{
    grid-template-columns:
      minmax(50px, 1fr)
      minmax(56px, 96px)  /* Status */
      120px               /* Från */
      120px               /* Till */
      minmax(40px, 70px); /* Visa */
    gap: 6px;
  }
}

/* Telefon/"smal tablet" (521–700px): krymp open-list grid så allt ryms i viewport */
@media (max-width: 700px) and (min-width: 521px){
  .opengrid,
  .opengrid--head{ grid-template-columns: 34px 56px minmax(140px,2fr) minmax(96px,0.9fr) minmax(100px,1fr); }
  .opengrid .c{ padding: 4px 6px; font-size: var(--fs-sm); }
  .opengrid--head .c{ padding: 4px 6px; font-size: var(--fs-sm); }
}

/* Telefon (stående) */
@media (max-width: 520px){
  .openbox__filters{ grid-template-columns: 1fr; }
  #ol-sort-wrap { display: block !important; }
  /* Dölj Status på mobil – visas när filter expanderas */
  #ol-status-wrap { display: none; }
  .openbox__filters.is-more-open #ol-status-wrap { display: grid; }
  .opengrid--head{
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--input);
    padding: 8px 12px;
    margin-bottom: 0;
    min-height: 46px;
    height: 46px;
    flex-shrink: 0;
    border: none !important;
    border-bottom: none !important;
  }
  .opengrid--head .c { display: none; }
  .opengrid--head .c { border: 0 !important; border-bottom: 0 !important; }
  .opengrid--head .c--chk { display: flex !important; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); }
  .opengrid--head .c.ol-sort-label { display: flex !important; align-items: center; justify-content: center; gap: 6px; font-weight: var(--fw-strong); font-size: var(--fs-sm); color: var(--fg); cursor: pointer; user-select: none; }
  .opengrid--head .ol-sort-label::after { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("picture/sort.svg") no-repeat center / contain; mask: url("picture/sort.svg") no-repeat center / contain; opacity: 0.9; }
  .opengrid--head .ol-sort-label[data-dir="desc"]::after { transform: rotate(180deg); }

  .opengrid{ display:block; }
  .opengrid--body .openrow{ display: flex; flex-direction: column; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); position: relative; }
  .opengrid--body .openrow .c{ padding: 0; border: 0; background: none; display: flex; align-items: center; gap: 8px; }
  .opengrid--body .openrow .c--chk{ position: absolute; top: 12px; left: 12px; }
  .opengrid--body .openrow .c:not(.c--chk) { margin-left: 36px; }
  .opengrid--body .openrow .c:nth-child(2)::before { content: "ID"; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; min-width: 90px; }
  .opengrid--body .openrow .c:nth-child(2){ font-size: var(--fs-base); font-weight: normal; color: var(--fg); }
.opengrid--body .openrow .c:nth-child(3)::before { content: "Projekt"; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; min-width: 90px; }
.opengrid--body .openrow .c:nth-child(3){ font-weight: normal; font-size: var(--fs-base); color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.opengrid--body .openrow .c:nth-child(4)::before { content: "Datum"; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; min-width: 90px; }
.opengrid--body .openrow .c:nth-child(4){ font-size: var(--fs-base); color: var(--fg); font-variant-numeric: tabular-nums; }
.opengrid--body .openrow .c:nth-child(5)::before { content: "Utfört av"; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; min-width: 90px; }
.opengrid--body .openrow .c:nth-child(5){ font-size: var(--fs-base); color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; gap: 16px; }
.openrow__icons{
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
  margin-right: 0;
  align-items: center;
}
.openrow__perf{
  flex: 1 1 auto;
  min-width: 0;
}
}

/* Öppna sparad kontroll: matcha mobilrubrik-designen (<=520px) */
@media (max-width: 520px){
  #kfid-open-modal .opengrid--head{
    background: var(--card);
    border-bottom: 1px solid var(--border) !important;
  }
}

/* Finjustera smal desktop/surfplatta: 701–795px */
@media (max-width: 795px) and (min-width: 701px){
  .openbox__filters{
    grid-template-columns:
      minmax(0, 1fr)   /* Sök */
      minmax(0, 1fr)   /* Status */
      130px            /* Från */
      130px            /* Till */
      minmax(0, 1fr);  /* Visa */
    gap: 6px;
  }
}

@media (min-width: 521px){
  .openrow__icons{ transform: none; }
}

@media (max-width: 520px){
  .opengrid--body .openrow .c:nth-child(5){ gap: 10px; }
  .openrow__icons{ margin-left: auto; padding-left: 12px; margin-right: 4px; }
}
.openrow__icon{ width: 18px; height: 18px; opacity: 0.9; display: block; flex: 0 0 auto; transform: none !important; filter: none !important; }

/* Deleted rows (soft-deleted) */
.opengrid--body .openrow.is-deleted .c { opacity: 0.6; }

/* Open-list desktop: visa alltid alla filter och använd modalens footer-Stäng */
@media (min-width: 701px){
  #kfid-open-list .openbox__more,
  #kfid-open-modal .openbox__more-top{ display:none !important; }
  #kfid-open-list .openbox__filters-extra,
  #kfid-open-modal .openbox__filters-extra{
    display: contents !important;
    grid-template-columns: unset;
    grid-column: auto;
  }
  /* Desktop: göm den extra Stäng-knappen i list-actions (vi har footer-Stäng) */
  #kfid-open-list #ol-close{ display: none !important; }
  #ol-sort-wrap { display: none !important; }
}

/* Tablet/touch landskap (701–992px): modalens footer-actions kan vara dolda,
   så visa listans Stäng-knapp så man alltid kan stänga. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 701px) and (max-width: 992px){
  #kfid-open-list #ol-close{ display: inline-flex !important; }
}

/* Endast landskap mobil (telefon): visa endast listan + paging
   OBS: tidigare (max-width:1024px) träffade även iPad/tablet-landskap och gav “mobilbeteende”. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px) and (max-height: 520px){
  /* Visa titel även i mobil landskap så företagsnamn syns */
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__title{ display:block !important; }
  #kfid-open-list .openbox__more, #kfid-open-modal .openbox__more-top{ display:none !important; }
  #kfid-open-list .openbox__filters-extra{ display:none !important; }
  #kfid-open-list #ol-close{ display:none !important; }
  #kfid-open-list .openbox__filters{ display:none !important; }
  #kfid-open-list .openbox__actions .actions-left{ display:none !important; }
  #kfid-open-list .openbox__actions .actions-right{ display:none !important; }
  #kfid-open-list .openbox__actions{ justify-content:center; }
}

/* Mobil stående: behåll filter-expand/collapse; actions körs via ikon-bottenrad */
@media (max-width: 700px) and (orientation: portrait){
  #kfid-open-list .openbox__more{ display:inline-block; margin-top:6px; }
  #kfid-open-list .openbox__filters-extra{ display:none; }
  #kfid-open-list .openbox__filters.is-more-open .openbox__filters-extra{ display:grid; grid-template-columns: 1fr; gap: 8px; }

  /* Mobil porträtt: text-Stäng ska inte visas (ikonraden har Stäng) */
  #kfid-open-list #ol-close{ display: none !important; }
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__actions{ display: none !important; }
}

/* Dölj Status i hela mobil-läget (<=700px) tills filter expanderas */
@media (max-width: 700px){
  #ol-status-wrap { display: none; }
  #kfid-open-list .openbox__filters.is-more-open #ol-status-wrap,
  #kfid-open-modal .openbox__filters.is-more-open #ol-status-wrap{ display: grid; }
}

/* Mobil helskärm modal
   OBS: begränsa coarse+landscape-fallet till låg höjd så iPad/tablet-landskap inte blir “telefon-helskärm”. */
@media (max-width: 700px){
  .kfid-account-modal{
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
  /* Öppna sparad kontroll: sticky header med rubriken */
  #kfid-open-modal > .ocr-modal__card{
    /* Samma scrollmodell som "Mina kunder": hela modalkortet scrollar */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__title{
    display: flex !important;
    flex-direction: column;
    width: auto !important;
    align-self: stretch !important;
    font-size: clamp(13px, 3.5vw, 16px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
    width: calc(100% + 24px + var(--safe-area-inset-left, 0px) + var(--safe-area-inset-right, 0px)) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: -16px !important;
    z-index: 9 !important;
    background: var(--bg) !important;
    padding: 10px 12px !important;
    margin-top: -16px !important;
    margin-bottom: 6px !important;
    margin-left: calc(-12px - var(--safe-area-inset-left, 0px)) !important;
    margin-right: 0 !important;
    isolation: isolate;
    min-height: 64px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    /* Samma som Mina kunder */
    -webkit-transform: translate3d(0, calc(-100% * var(--ol-chrome-hide-p, 0)), 0) !important;
    transform: translate3d(0, calc(-100% * var(--ol-chrome-hide-p, 0)), 0) !important;
    opacity: calc(1 - var(--ol-chrome-hide-p, 0)) !important;
    transition: transform 0.08s linear, opacity 0.08s linear !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__title::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card);
    z-index: -1;
  }
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__title::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--border);
    pointer-events: none;
  }
  #kfid-open-modal > .ocr-modal__card{ width: 100% !important; max-width: none !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: 12px !important; padding-top: calc(12px + env(safe-area-inset-top)) !important; padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; padding-left: calc(12px + var(--safe-area-inset-left)) !important; padding-right: calc(12px + var(--safe-area-inset-right)) !important; display: flex; flex-direction: column; box-sizing: border-box; }
  @supports (padding-left: max(0px, 0px)) {
    .kfid-account-modal{
      padding-left: var(--safe-area-inset-x);
      padding-right: var(--safe-area-inset-x);
    }
    #kfid-open-modal > .ocr-modal__card{
      padding-left: calc(12px + var(--safe-area-inset-x)) !important;
      padding-right: calc(12px + var(--safe-area-inset-x)) !important;
    }
  }
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__title{
    margin-top: -16px !important;
    margin-bottom: 6px !important;
    margin-left: calc(-12px - var(--safe-area-inset-left, 0px)) !important;
    margin-right: 0 !important;
  }
  #kfid-open-list{
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    display: block !important;
    gap: 10px;
  }
  #kfid-open-list .openbox{
    display: block !important;
    gap: 12px;
    height: auto !important;
    min-height: auto !important;
    /* Ge plats så innehåll inte hamnar under sticky bottenrad */
    padding-bottom: calc((64px + env(safe-area-inset-bottom)) * (1 - var(--ol-chrome-hide-p, 0)));
  }
  #kfid-open-list .openbox__filters{ grid-template-columns: 1fr; }
  #kfid-open-list .openbox__list{
    flex: 0 0 auto !important;
    min-height: 0;
    display: block !important;
  }
  /* Ingen intern list-scroll på mobil: hela modalen ska scrolla */
  #kfid-open-list #ol-scroll.openlist__scroll.openlist__scroll--fixed{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    scrollbar-gutter: auto;
    padding-bottom: 0 !important;
  }
  #kfid-open-list .openbox__actions{
    flex-direction:column;
    align-items:stretch;
    margin-top:auto;
  }
#kfid-open-modal > .ocr-modal__card > .ocr-modal__actions{ margin-top: 10px; }

}

.ocr-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 11000; }
.ocr-modal[aria-hidden="true"] { display: none; }
.ocr-modal.is-open[aria-hidden="false"] { display: flex; }
.ocr-modal__card { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); width: min(400px, 92vw); max-height: 80vh; overflow: auto; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: var(--fs-input); }
.ocr-modal__card:focus,
.ocr-modal__card:focus-visible { outline: none; }
.ocr-modal__card .small { font-size: var(--fs-base); line-height: var(--lh-base); }
.ocr-modal__title { margin: 0 0 10px; font-size: var(--fs-title); font-weight: var(--fw-strong); }
.ocr-modal__body { margin: 4px 0; font-size: var(--fs-base); line-height: var(--lh-base); }
.ocr-modal__body.muted { color: var(--muted); }

#kfid-powercalc-modal .kfid-powercalc-modal__card{
  width: min(820px, 94vw);
  max-height: min(88dvh, 900px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#kfid-powercalc-modal .kfid-powercalc-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#kfid-powercalc-modal .kfid-powercalc-modal__close{
  min-width: 88px;
}
#kfid-powercalc-modal .kfid-powercalc-modal__body{
  display: grid;
  gap: 12px;
}
#kfid-powercalc-modal .kfid-powercalc-mode{
  display: grid;
  gap: 6px;
}
#kfid-powercalc-modal .kfid-powercalc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#kfid-powercalc-modal .kfid-powercalc-grid > label{
  display: grid;
  gap: 5px;
}
#kfid-powercalc-modal .kfid-powercalc-grid input,
#kfid-powercalc-modal .kfid-powercalc-grid select,
#kfid-powercalc-modal .kfid-powercalc-mode select{
  width: 100%;
}
#kfid-powercalc-modal .kfid-powercalc-result{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--input) 72%, var(--card));
  min-height: 82px;
}
#kfid-powercalc-modal .kfid-powercalc-result__title{
  margin: 0 0 8px;
  font-size: var(--fs-base);
}
#kfid-powercalc-modal .kfid-powercalc-result__rows{
  display: grid;
  gap: 6px;
}
#kfid-powercalc-modal .kfid-powercalc-result__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#kfid-powercalc-modal .kfid-powercalc-result__row strong{
  white-space: nowrap;
}
#kfid-powercalc-modal .kfid-powercalc-result__note{
  margin: 8px 0 0;
}
#kfid-powercalc-modal .kfid-powercalc-modal__actions{
  justify-content: flex-end !important;
}

@media (max-width: 700px){
  #kfid-powercalc-modal .kfid-powercalc-modal__card{
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-powercalc-modal .kfid-powercalc-modal__card{
      padding-left: max(12px, calc(12px + var(--safe-area-inset-x)));
      padding-right: max(12px, calc(12px + var(--safe-area-inset-x)));
    }
  }
  #kfid-powercalc-modal .kfid-powercalc-grid{
    grid-template-columns: 1fr;
  }
  #kfid-powercalc-modal .kfid-powercalc-modal__actions{
    justify-content: stretch !important;
  }
  #kfid-powercalc-modal .kfid-powercalc-modal__actions > .btn{
    flex: 1 1 0 !important;
    width: 100% !important;
  }
}

/* Typografi-modal: enkla gruppreglage */
#kfid-typography-modal .kfid-typo-section{ margin-top: 14px; padding-top: 0; border-top: 0; }
#kfid-typography-modal .kfid-typo-section:first-child{ margin-top: 0; }
#kfid-typography-modal .kfid-typo-section__title{ font-weight: var(--fw-strong); font-size: var(--fs-base); margin: 0 0 8px; }
#kfid-typography-modal .kfid-stepper__label{ font-size: var(--fs-label); font-weight: var(--fw-body); color: var(--fg); }
#kfid-typography-modal .kfid-stepper__hint{ font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-sm); }
#kfid-typography-modal .kfid-stepper__btn{ width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--input); color: var(--fg); font-size: var(--fs-input); line-height: 1; cursor: pointer; display:grid; place-items:center; }
#kfid-typography-modal .kfid-stepper__btn:hover{ border-color: var(--primary); }
#kfid-typography-modal .kfid-stepper__val{ min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-base); color: var(--fg); }
#kfid-typography-modal .kfid-typo-scale{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px auto;
  align-items: center;
  gap: 10px;
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]{ width: 100%; min-width: 0; }
#kfid-typography-modal .kfid-typo-slider{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--input) 78%, var(--card));
}
#kfid-typography-modal .kfid-typo-slider + .kfid-typo-slider{
  border-top: 0;
  margin-top: 8px;
}
#kfid-typography-modal .kfid-typo-slider__text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
#kfid-typography-modal .kfid-typo-slider__controls{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  flex: 0 0 52%;
}
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]{
  flex: 1 1 auto;
  min-width: 0;
}
#kfid-typography-modal .kfid-typo-scale input[type="range"],
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]::-webkit-slider-runnable-track,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--primary) 24%, var(--input));
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]::-webkit-slider-thumb,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]:active::-webkit-slider-thumb,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]:active::-webkit-slider-thumb{
  transform: scale(1.08);
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]::-moz-range-track,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--primary) 24%, var(--input));
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]::-moz-range-progress,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]::-moz-range-progress{
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: var(--primary);
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]::-moz-range-thumb,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]:focus-visible::-webkit-slider-thumb,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent), 0 4px 10px rgba(0,0,0,.18);
}
#kfid-typography-modal .kfid-typo-scale input[type="range"]:focus-visible::-moz-range-thumb,
#kfid-typography-modal .kfid-typo-slider__controls input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent), 0 4px 10px rgba(0,0,0,.18);
}
@media (max-width: 700px){
  #kfid-typography-modal .kfid-typo-slider{
    flex-direction: column;
    align-items: stretch;
  }
  #kfid-typography-modal .kfid-typo-slider__controls{
    min-width: 0;
    width: 100%;
  }
}

/* Confirm modal should always appear above other modals/bottom bars */
#kfid-confirm-modal { z-index: 13050; }
.ocr-modal__actions{
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start !important; /* 1–2 knappar: vänsterjusterat */
  gap: 8px;
  margin-top: 12px;
}
.ocr-modal__actions > .btn{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap;
}

/* Mina kunder / Kunduppgifter (samma modal) */
#kfid-customers-modal{ --cust-chrome-hide-p: 0; }
#kfid-customers-modal .kfid-customers-titlebar{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
#kfid-customers-modal .kfid-customers-titlebar #kfid-customers-title-meta{
  flex: 0 0 auto;
}
#kfid-customers-modal #kfid-customers-title-meta{
  text-align: left;
  margin: 0;
  white-space: nowrap;
}
#kfid-customers-modal #kfid-customers-title-meta .kfid-cust-linked-btn{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#kfid-customers-modal #kfid-customers-title-meta .kfid-cust-linked-pill{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: var(--fw-body);
  line-height: 1;
  font-size: var(--fs-label);
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}
[data-theme="dark"] #kfid-customers-modal #kfid-customers-title-meta .kfid-cust-linked-pill{
  background: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35) inset;
}
#kfid-customers-modal > .ocr-modal__card{
  width: min(1025px, 96vw);
  max-width: 1025px;
  max-height: min(90dvh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#kfid-cust-autosave-indicator{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 12;
  pointer-events: none;
}
@media (max-width: 700px){
  #kfid-cust-autosave-indicator{
    position: fixed;
    top: calc(22px + env(safe-area-inset-top));
    right: calc(12px + var(--safe-area-inset-right));
    z-index: 12030;
    transform: translate3d(0, calc(-100% * var(--cust-chrome-hide-p, 0)), 0);
    opacity: calc(1 - var(--cust-chrome-hide-p, 0));
    transition: transform 0.08s linear, opacity 0.08s linear;
  }
}
#kfid-customers-modal > .ocr-modal__card > .ocr-modal__content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#kfid-customers-modal > .ocr-modal__card > .ocr-modal__actions{
  flex: 0 0 auto;
}

/* Kundmodal: undvik “hela modalen scrollar”, låt listan ta resterande höjd */
#kfid-customers-modal .openbox.openbox--customers{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#kfid-customers-modal .openbox__list.kfid-customers-table{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Kundmodal: undvik vertikala hopp när listinnehåll byts (paging/sort) */
#kfid-customers-modal #kfid-customers-scroll{
  overflow-anchor: none;
}

/* Kundmodal: filterrad (matcha "Öppna sparad kontroll") */
#kfid-customers-modal .openbox__filters.openbox__filters--customers{
  grid-template-columns:
    minmax(60px, 1fr)     /* Sök */
    minmax(100px, 140px)  /* Status */
    minmax(60px, 110px);  /* Visa */
}

/* Desktop: sök/val i kundmodalen ska matcha övriga fältstorlekar */
#kfid-customers-modal .openbox__filters--customers .fitem > input[type="search"],
#kfid-customers-modal .openbox__filters--customers .fitem > select{
  font-size: var(--fs-input-text);
}

/* Kundmodal: sökram ska visuellt matcha formulärfälten (t.ex. Kontaktperson). */
#kfid-customers-modal .openbox__filters--customers .top-search__wrap,
#kfid-customers-modal .kfid-customers__msearch .top-search__wrap{
  min-height: var(--modal-control-h-desktop);
  height: var(--modal-control-h-desktop);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input);
  box-shadow: none;
}
#kfid-customers-modal .openbox__filters--customers .top-search__wrap input[type="search"],
#kfid-customers-modal .kfid-customers__msearch .top-search__wrap input[type="search"]{
  height: 100%;
  line-height: calc(var(--modal-control-h-desktop) - 2px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Kundmodal: undvik att fokus-outline klipps av overflow:hidden */
#kfid-customers-modal :is(input:not([type="checkbox"]), textarea, select):focus{
  outline: none;
  border-color: var(--border);
  box-shadow: 0 0 0 1px var(--primary) inset;
}

/* Kundmodalens sökfält har egen wrapper-fokus; undvik dubbel "tjock" fokuslinje. */
#kfid-customers-modal .openbox__filters--customers .top-search__wrap:focus-within,
#kfid-customers-modal .kfid-customers__msearch .top-search__wrap:focus-within{
  outline: none;
  border-color: var(--border);
  box-shadow: 0 0 0 1px var(--primary) inset;
}
#kfid-customers-modal .openbox__filters--customers .top-search__wrap input[type="search"]:focus,
#kfid-customers-modal .kfid-customers__msearch .top-search__wrap input[type="search"]:focus{
  box-shadow: none;
}

/* Kundmodal: pager ska ligga ovanför list-rutan, inte längst ner */
#kfid-customers-modal .kfid-customers-pager{
  margin-top: 6px !important;
  margin-bottom: 2px;
  /* Centrera hela "Föregående / Inga rader / Nästa" som en grupp */
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
}

#kfid-customers-modal .kfid-customers-pager .pager-link,
#kfid-customers-modal .kfid-customers-pager #kfid-customers-pager{
  white-space: nowrap;
}

/* Kundmodal: koppla/ta bort koppling (2 knappar under Long, centrerade) */
#kfid-customers-modal .kfid-cust-link-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: min(100%, 360px);
  margin: 6px auto 8px;
  position: relative;
  z-index: 2;
}
#kfid-customers-modal .kfid-cust-link-note{
  width: min(100%, 360px);
  margin: 4px auto 10px;
  text-align: center;
  color: var(--kfid-fail) !important;
  font-weight: var(--fw-medium);
}
#kfid-customers-modal .kfid-cust-mobile-save-wrap{
  display: none;
}
#kfid-customers-modal #kfid-cust-b-save{
  display: none !important;
}

/* Kontroll: expanderande kundruta under de tre fälten (spänner 3/2/1 kolumner via .g3 breakpoints) */
.kfid-cust-panel{
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 5%, var(--input));
}
.kfid-cust-panel .btn{
  height: var(--control-h);
  min-height: var(--control-h);
  padding-block: 0;
  line-height: 1;
}
.kfid-cust-panel[hidden]{ display:none !important; }
.kfid-cust-panel__title{ font-weight: var(--fw-medium); margin: 0 0 6px 0; }
.kfid-cust-panel__actions{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.kfid-cust-panel__list{ display:flex; flex-direction:column; gap: 8px; margin-top: 8px; }
.kfid-cust-panel__item{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.kfid-cust-panel__item .btn{ white-space: nowrap; }
.kfid-cust-panel__item-main{ min-width:0; }
.kfid-cust-panel__item-name{ font-weight: var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kfid-cust-panel__item-meta{ font-size: var(--fs-sm); color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Mobil: panelen ska ligga under E‑post (inte mellan) och före Kontrollerat av */
@media (max-width: 700px){
  /* 1-kol layout: proj, perf, date, beställare, adress, panel, kontrollerat av, ... */
  .grid.g3 > .kfid-field-client{ grid-row: 4; }
  .grid.g3 > .kfid-field-addr{ grid-row: 5; }
  .grid.g3 > .kfid-cust-panel{ grid-row: 6; }
  .grid.g3 > .kfid-field-ctrl{ grid-row: 7; }
}

/* Tablet (2 kol): byt plats på Kontaktperson och Kontrollerat av */
@media (max-width: 900px) and (min-width: 701px){
  /* Rad 2: Datum + Kontrollerat av */
  .grid.g3 > .kfid-field-ctrl{ grid-row: 2; grid-column: 2; }
  /* Rad 3: Kontaktperson + E‑post (byt plats) */
  .grid.g3 > .kfid-field-client{ grid-row: 3; grid-column: 1; }
  .grid.g3 > .kfid-field-addr{ grid-row: 3; grid-column: 2; }

  /* Tajtare ikonknappar i kundfältet för mer skrivyta */
  .kfid-field-client{ --kfid-cust-btn-w: 44px; --kfid-cust-btn-gap: 4px; }
  .kfid-field-client .kfid-field-with-icon__wrap > input{ padding-right: 10px; }
}

/* Kund-autoförslag under Kontaktperson / E‑post (på kontroll-sidan) */
.kfid-cust-suggest{
  position: fixed;
  z-index: 12050;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  overflow: hidden;
  max-height: min(38vh, 280px);
  overscroll-behavior: contain;
}
.kfid-cust-suggest{ -webkit-overflow-scrolling: touch; }
.kfid-cust-suggest[hidden]{ display:none !important; }
.kfid-cust-suggest__item{
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.kfid-cust-suggest__item:hover{ background: color-mix(in srgb, var(--card) 90%, var(--primary) 10% / 10%); }
.kfid-cust-suggest__item:focus-visible{ outline: 3px solid var(--ring); outline-offset: -3px; }
.kfid-cust-suggest__main{ font-size: var(--fs-base); font-weight: var(--fw-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfid-cust-suggest__sub{ font-size: var(--fs-sm); color: var(--muted); margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.kfid-cust-suggest__meta{ font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Koppla/avkoppla-ikoner: endast mobil (ligger under Long-fältet i markup) */
@media (min-width: 701px){
  #kfid-customers-modal #kfid-cust-link-actions{ display: none !important; }
}
@media (max-width: 700px){
  #kfid-customers-modal #kfid-cust-link-actions[hidden]{ display: none !important; }
  #kfid-customers-modal #kfid-cust-link-actions:not([hidden]){ display: flex; }
}
#kfid-customers-modal .kfid-cust-link-actions button{
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
}
#kfid-customers-modal .kfid-cust-link-actions button:disabled{
  opacity: 0.35;
  cursor: default;
}
#kfid-customers-modal .kfid-cust-link-actions button:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Förhindra att .btn:s default-höjd tar över i denna rad */
#kfid-customers-modal .kfid-cust-link-actions .btn{
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-block: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 1024px){
  /* Mina kunder: följ samma 48px-mönster som övriga modaler under 1024px */
  #kfid-customers-modal .openbox__filters--customers .top-search__wrap,
  #kfid-customers-modal .kfid-customers__msearch .top-search__wrap{
    min-height: 48px;
    height: 48px;
    border-width: 1px;
    border-radius: 10px;
    --top-search-clear-w: 34px;
  }
  #kfid-customers-modal .openbox__filters--customers .top-search__wrap input[type="search"],
  #kfid-customers-modal .kfid-customers__msearch .top-search__wrap input[type="search"]{
    line-height: 46px;
    padding: 0 calc(var(--top-search-clear-w) + 16px) 0 16px;
  }

  #kfid-customers-modal .openbox__filters--customers .fitem > input[type="search"],
  #kfid-customers-modal .openbox__filters--customers .fitem > select{
    height: 48px;
    padding: 0 16px;
    border-width: 2px;
    border-radius: 10px;
    font-size: var(--fs-input);
    box-sizing: border-box;
  }
}

/* Kundmodal: kundlista som tabell (likt Öppna sparad kontroll) */
#kfid-customers-modal #kfid-customers-scroll.openlist__scroll.openlist__scroll--fixed{
  /* Fast ram: 5 kunder. Fler rader => Föregående/Nästa (ingen intern scroll) */
  --cust-visible-rows: 5;
  --cust-row-slot-h-desktop: 52px;
  --ol-scroll-height: calc(var(--cust-visible-rows) * var(--cust-row-slot-h-desktop));
  --ol-scroll-min-height: var(--ol-scroll-height);
  --ol-scroll-max-height: var(--ol-scroll-height);
  overflow: hidden;
  /* Undvik att reservera "tom" scrollbar-yta när listan inte scrollar */
  scrollbar-gutter: auto;
}

/* Desktop/tablet: visa inte stackade mobilrader i kolumn 1 (annars blir det dubbelt) */
#kfid-customers-modal :is(.kfid-cust-stack-addr1,.kfid-cust-stack-postalcode,.kfid-cust-stack-postaladdr,.kfid-cust-stack-email){
  display: none;
}

#kfid-customers-modal .kfid-customers-sortbar{ display: none; }

/* Kundmodal: reservera en rad för hint under sök (minskar layout-hopp vid t.ex. "Hämtar kund…") */
#kfid-customers-modal #kfid-customer-hint{
  min-height: 18px;
  line-height: 18px;
}

/* Låg höjd + liggande (tablet/iPad): behåll desktop-layout men låt hela modalen scrolla
   (dvs overlay scrollar, inga interna scroll-frames som “klämmer ihop” innehållet). */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (orientation: landscape) and (max-height: 900px){
  /* Låt overlayn scrolla så kortet kan vara “desktop-stort” utan att pressas ihop. */
  #kfid-open-modal.ocr-modal,
  #kfid-stats-modal.ocr-modal,
  #kfid-customers-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-open-modal.ocr-modal,
    #kfid-stats-modal.ocr-modal,
    #kfid-customers-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x));
      padding-right: max(12px, var(--safe-area-inset-x));
    }
  }

  /* Släpp kortets egen scroll/height-begränsning i låg-höjd-landskap */
  #kfid-open-modal > .ocr-modal__card,
  #kfid-stats-modal > .ocr-modal__card,
  #kfid-customers-modal > .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Statistik: släpp desktopens overflow:hidden i låg-höjd-landskap så inget klipps/squishas */
  #kfid-stats-modal .ocr-modal__content,
  #kfid-stats-modal > .ocr-modal__card > .ocr-modal__content{
    overflow: visible !important;
  }
}

/* Statistik: i touch+landscape med låg höjd ska "resultfältet" (senaste kontroller)
   aldrig flexa ihop sig. Håll en fast ramhöjd; resten blir scrollbart i modalen. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (orientation: landscape) and (max-height: 900px){
  #kfid-stats-modal .kfid-stats-openboxlist{ flex: 0 0 auto; }
  #kfid-stats-modal .kfid-stats-scroll{
    flex: 0 0 auto;
    height: calc(8 * 38px);
    min-height: calc(8 * 38px);
    max-height: calc(8 * 38px);
    overflow-y: auto;
  }
}

#kfid-customers-modal .kfid-custgrid{
  display: grid;
  grid-template-columns: 40px minmax(160px, 1.2fr) minmax(200px, 1.6fr) minmax(160px, 1.2fr);
  gap: 0;
}
#kfid-customers-modal .kfid-custgrid--head .c{ border-bottom: 1px solid var(--border); }

/* Kundmodal: smal desktop/tablet (701–900px) – krymp kolumnerna så E‑post inte klipps */
@media (max-width: 900px) and (min-width: 701px){
  #kfid-customers-modal .kfid-custgrid{
    grid-template-columns: 40px minmax(120px, 1.2fr) minmax(160px, 1.6fr) minmax(120px, 1.2fr);
  }
  #kfid-customers-modal .kfid-custgrid .c{ padding: 4px 6px; font-size: var(--fs-sm); }
  #kfid-customers-modal .kfid-custgrid--head .c{ padding: 4px 6px; font-size: var(--fs-sm); }
}

/* Kundmodal: 701–899px – 2 kol (logisk ordning) */
@media (min-width: 701px) and (max-width: 899px){
  #kfid-customers-modal .grid.g3.kfid-custform-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    grid-template-areas:
      "contact email"
      "company phone"
      "address mobile"
      "postal_code lat"
      "postal_address lng";
  }
  #kfid-customers-modal .grid.g3.kfid-custform-grid > div{ min-width: 0; }

  #kfid-customers-modal .kfid-custform--contact{ grid-area: contact; }
  #kfid-customers-modal .kfid-custform--company{ grid-area: company; }
  #kfid-customers-modal .kfid-custform--address{ grid-area: address; }
  #kfid-customers-modal .kfid-custform--email{ grid-area: email; }
  #kfid-customers-modal .kfid-custform--postal_code{ grid-area: postal_code; }
  #kfid-customers-modal .kfid-custform--postal_address{ grid-area: postal_address; }
  #kfid-customers-modal .kfid-custform--phone{ grid-area: phone; }
  #kfid-customers-modal .kfid-custform--mobile{ grid-area: mobile; }
  #kfid-customers-modal .kfid-custform--lat{ grid-area: lat; }
  #kfid-customers-modal .kfid-custform--lng{ grid-area: lng; }
}

/* Kundmodal: 900px+ – 3 kol (logisk ordning) */
@media (min-width: 900px){
  #kfid-customers-modal .grid.g3.kfid-custform-grid{
    /* 6 kol: 3 “stora” fält (2+2+2), sedan 2 fält som får 50/50 bredd */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "contact contact company company address address"
      "postal_code postal_code postal_address postal_address email email"
      "phone phone phone mobile mobile mobile"
      "lat lat lat lng lng lng";
  }
}

#kfid-customers-modal .kfid-custform--contact{ grid-area: contact; }
#kfid-customers-modal .kfid-custform--company{ grid-area: company; }
#kfid-customers-modal .kfid-custform--address{ grid-area: address; }
#kfid-customers-modal .kfid-custform--postal_code{ grid-area: postal_code; }
#kfid-customers-modal .kfid-custform--postal_address{ grid-area: postal_address; }
#kfid-customers-modal .kfid-custform--email{ grid-area: email; }
#kfid-customers-modal .kfid-custform--phone{ grid-area: phone; }
#kfid-customers-modal .kfid-custform--mobile{ grid-area: mobile; }
#kfid-customers-modal .kfid-custform--lat{ grid-area: lat; }
#kfid-customers-modal .kfid-custform--lng{ grid-area: lng; }

#kfid-customers-modal input[type="text"],
#kfid-customers-modal input[type="email"],
#kfid-customers-modal input[type="tel"],
#kfid-customers-modal input[type="number"]{
  height: var(--modal-control-h-desktop);
  line-height: calc(var(--modal-control-h-desktop) - 2px);
}

@media (max-width: 1024px){
  #kfid-customers-modal input[type="text"],
  #kfid-customers-modal input[type="email"],
  #kfid-customers-modal input[type="tel"],
  #kfid-customers-modal input[type="number"]{
    height: var(--modal-control-h-mobile);
    line-height: calc(var(--modal-control-h-mobile) - 2px);
  }
}

/* Kundmodal: <=700px – stacka formulär i “logisk” ordning */
@media (max-width: 700px){
  #kfid-customers-modal .grid.g3.kfid-custform-grid{
    grid-template-columns: 1fr;
    gap: 10px 12px;
    grid-template-areas:
      "contact"
      "company"
      "address"
      "postal_code"
      "postal_address"
      "email"
      "phone"
      "mobile"
      "lat"
      "lng";
  }
}
#kfid-customers-modal .kfid-custgrid .c{
  padding: 5px 9px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#kfid-customers-modal .kfid-custgrid .c--chk{ display: grid; place-items: center; }
#kfid-customers-modal .kfid-custgrid .c:nth-child(3){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#kfid-customers-modal .kfid-custgrid--head .c:nth-child(3),
#kfid-customers-modal .kfid-custgrid--body .openrow .c:nth-child(3){
  justify-content: center;
  text-align: center;
}
#kfid-customers-modal .kfid-custgrid .c:nth-child(4){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kundmodal: radbryt adress + e-post konsekvent (även desktop)
   - Adress: alltid två rader (gata, samt postnr+postadress)
   - E-post: radbrytbar och får explicit brytpunkt efter @ (via <wbr>)
*/
#kfid-customers-modal .kfid-custgrid--body .c:nth-child(4n+2){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: var(--lh-label);
  align-items: flex-start;
  text-overflow: clip;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

#kfid-customers-modal .kfid-custgrid--body .kfid-cust-n1,
#kfid-customers-modal .kfid-custgrid--body .kfid-cust-n2{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kfid-customers-modal .kfid-custgrid--body .c:nth-child(4n+3){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: var(--lh-label);
  align-items: flex-start;
  text-overflow: clip;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

#kfid-customers-modal .kfid-custgrid--body .kfid-cust-addr1,
#kfid-customers-modal .kfid-custgrid--body .kfid-cust-addr2{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kfid-customers-modal .kfid-custgrid--body .c:nth-child(4n+4){
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: var(--lh-label);
  text-overflow: clip;

  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Kundlista: centrera Kontaktperson + E‑post lodrätt (grid-vy) */
@media (min-width: 701px){
  #kfid-customers-modal .kfid-custgrid--body .c:nth-child(4n+2){
    justify-content: center;
  }
  #kfid-customers-modal .kfid-custgrid--body .c:nth-child(4n+4) .kfid-cust-email{
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

#kfid-customers-modal .kfid-custgrid--head{
  background: var(--input);
  font-weight: var(--fw-strong);
  color: var(--muted);
}
#kfid-customers-modal .kfid-custgrid--head .c:not(.c--chk){
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  text-align: left;
  padding: 5px 9px;
  overflow: visible;
  text-overflow: clip;
}
#kfid-customers-modal .kfid-custgrid--head .c[data-sort]{ cursor: pointer; position: relative; user-select: none; }
#kfid-customers-modal .kfid-custgrid--head .c[data-sort]::after{
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("picture/sort.svg") no-repeat center / contain;
  mask: url("picture/sort.svg") no-repeat center / contain;
  opacity: .45;
}
#kfid-customers-modal .kfid-custgrid--head .c[data-sort].is-sorted{ color: var(--fg); }
#kfid-customers-modal .kfid-custgrid--head .c[data-sort].is-sorted::after{ opacity: .9; }
#kfid-customers-modal .kfid-custgrid--head .c[data-sort][data-dir="desc"]::after{ transform: rotate(180deg); }
#kfid-customers-modal .kfid-custgrid--body .openrow{ display: contents; }
#kfid-customers-modal .kfid-custgrid--body .openrow:hover .c{
  /* Tydligare hover */
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
#kfid-customers-modal .kfid-custgrid--body .openrow.is-selected:not(.is-linked) .c{
  /* Tydligare markering */
  background: color-mix(in srgb, var(--primary) 16%, var(--card));
}
#kfid-customers-modal .kfid-custgrid--body .openrow.is-linked .c{
  background: color-mix(in srgb, var(--kfid-ok) 16%, var(--card));
}
#kfid-customers-modal .kfid-custgrid--body .openrow.is-deleted .c{
  opacity: 0.7;
}
#kfid-customers-modal .kfid-custgrid__empty{
  grid-column: 1 / -1;
  padding: 10px 12px;
}

/* Mina kunder: stackad listvy (matcha “Öppna sparad kontroll”) */
@media (max-width: 700px){
  #kfid-customers-modal .kfid-customers-titlebar{
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    position: sticky;
    top: -16px;
    z-index: 9;
    background: var(--card);
    padding: 10px 12px;
    margin: -16px -16px 6px;
    border-bottom: 1px solid var(--border);
    isolation: isolate;
    transform: translate3d(0, calc(-100% * var(--cust-chrome-hide-p, 0)), 0);
    opacity: calc(1 - var(--cust-chrome-hide-p, 0));
    transition: transform 0.08s linear, opacity 0.08s linear;
    will-change: transform, opacity;
    backface-visibility: hidden;
    position: sticky;
    padding-right: 120px;
    min-height: 64px;
    box-sizing: border-box;
  }
  #kfid-customers-modal .kfid-customers-titlebar #kfid-customers-title-meta{
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    transition: opacity 0.12s ease;
  }
  #kfid-customers-modal.is-cust-autosave-active .kfid-customers-titlebar #kfid-customers-title-meta{
    opacity: 0;
    pointer-events: none;
  }
  #kfid-customers-modal .kfid-customers-titlebar::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card);
    z-index: -1;
  }
  /* Stackat läge: fast utrymme för 5 kunder (ingen intern scroll) */
  #kfid-customers-modal #kfid-customers-scroll.openlist__scroll.openlist__scroll--fixed{
    --cust-row-slot-h: 110px;
    --cust-visible-rows: 5;
    --ol-scroll-height: calc(var(--cust-visible-rows) * var(--cust-row-slot-h));
    --ol-scroll-min-height: var(--ol-scroll-height);
    --ol-scroll-max-height: var(--ol-scroll-height);
  }

  #kfid-customers-modal .kfid-customers-sortbar{
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 46px;
    height: 46px;
    padding: 8px 12px;
    gap: 8px;
    background: var(--input);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
  }
  /* I stackad vy används bannern för sortering – göm markera-alla här (så den inte ser ut som "sort-ikon") */
  #kfid-customers-modal .kfid-customers-sortbar__chk{ display: none !important; }
  #kfid-customers-modal .kfid-customers-sortbar__label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: var(--fw-strong);
    font-size: var(--fs-sm);
    color: var(--fg);
  }
  #kfid-customers-modal .kfid-customers-sortbar::after{
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("picture/sort.svg") no-repeat center / contain;
    mask: url("picture/sort.svg") no-repeat center / contain;
    opacity: .9;
    transform: rotate(0deg);
  }
  #kfid-customers-modal .kfid-customers-sortbar[data-dir="desc"]::after{ transform: rotate(180deg); }

  #kfid-customers-modal #kfid-customers-head{ display: none !important; }
  #kfid-customers-modal .kfid-custgrid{ display: block; }
  #kfid-customers-modal .kfid-custgrid--body .openrow{
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
    min-height: var(--cust-row-slot-h, 110px);
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow .c,
  #kfid-customers-modal .kfid-custgrid--body .openrow .c *{
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobil: fyll HELA rutan vid hover/markering (openrow har padding, så .c räcker inte) */
  #kfid-customers-modal .kfid-custgrid--body .openrow:hover{
    background: none;
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow.is-selected{
    background: color-mix(in srgb, var(--primary) 16%, var(--card));
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow.is-linked{
    background: color-mix(in srgb, var(--kfid-ok) 16%, var(--card));
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow.is-selected.is-linked{
    background: color-mix(in srgb, var(--kfid-ok) 16%, var(--card));
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow .c{
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    line-height: calc(var(--lh-label) + 0.05);
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow .c--chk{ position: absolute; top: 12px; left: 12px; }
  #kfid-customers-modal .kfid-custgrid--body .openrow.kfid-cust-row--only-contact .c--chk{
    top: 50%;
    transform: translateY(-50%);
  }
  #kfid-customers-modal .kfid-custgrid--body .openrow .c:not(.c--chk){ margin-left: 36px; }
  #kfid-customers-modal .kfid-custgrid--body .openrow .c:nth-child(2)::before{
    content: none;
    display: none;
  }

  /* I denna vy visas adress + e‑post i namn-kolumnen */
  #kfid-customers-modal .kfid-custgrid--body .openrow .c:nth-child(3),
  #kfid-customers-modal .kfid-custgrid--body .openrow .c:nth-child(4){
    display: none !important;
  }

  /* Värde-delar: lista med rader i kolumn 2 */
  #kfid-customers-modal .kfid-custgrid--body .openrow :is(.kfid-cust-n1,.kfid-cust-n2,.kfid-cust-stack-addr1,.kfid-cust-stack-postalcode,.kfid-cust-stack-postaladdr,.kfid-cust-stack-email,.kfid-cust-email){
    display: block;
    min-width: 0;
  }

  /* Samma font-weight som adressraden (normal) */
  #kfid-customers-modal .kfid-custgrid--body .openrow .kfid-cust-n1{ font-weight: inherit; }

  /* Visa inte företag i denna kompakta vy */
  #kfid-customers-modal .kfid-custgrid--body .openrow .kfid-cust-n2{ display:none !important; }

  #kfid-customers-modal .kfid-custgrid--body .openrow .kfid-cust-stack-email,
  #kfid-customers-modal .kfid-custgrid--body .openrow .kfid-cust-email{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #kfid-customers-modal .kfid-custgrid--body .openrow .c:nth-child(2){
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }
}

#kfid-customers-modal .kfid-custgrid input[type="checkbox"],
#kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#kfid-customers-modal .kfid-custgrid input[type="checkbox"]:hover,
#kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]:hover{ border-color: var(--primary); }
#kfid-customers-modal .kfid-custgrid input[type="checkbox"]:focus-visible,
#kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }
#kfid-customers-modal .kfid-custgrid input[type="checkbox"]::after,
#kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]::after{
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5 L9.5 15 L15 6' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .15s ease, transform .15s ease;
}
#kfid-customers-modal .kfid-custgrid input[type="checkbox"]:checked,
#kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]:checked{ background: var(--primary); border-color: var(--primary); }
#kfid-customers-modal .kfid-custgrid input[type="checkbox"]:checked::after,
#kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]:checked::after{ opacity: 1; transform: scale(1); }
@media (max-width: 700px){
  #kfid-customers-modal .kfid-custgrid input[type="checkbox"]:focus,
  #kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]:focus{ outline: none; box-shadow: none; }
  #kfid-customers-modal .kfid-custgrid input[type="checkbox"]:focus-visible,
  #kfid-customers-modal #kfid-customers-sortbar input[type="checkbox"]:focus-visible{ outline: none; }
}

/* Matcha appens standard-knappbredd (Posta/Skriv ut) */
#kfid-customers-modal > .ocr-modal__card > .ocr-modal__actions .btn{
  width: auto;
  min-width: clamp(100px, 20vw, 150px);
}
/* Undantag: kund-modalen ska inte använda "3 knappar = lika breda" */
#kfid-customers-modal .ocr-modal__actions[data-action-count="3"]{
  justify-content: flex-start !important;
}
#kfid-customers-modal .ocr-modal__actions[data-action-count="3"] > .btn{
  flex: 0 0 auto !important;
}

/* Mobil: sticky bottenrad + "fäll ut"-sök + inställningsmodal */
#kfid-customers-modal .kfid-bottom-nav{ display:none !important; }
@media (max-width: 700px){
  #kfid-customers-modal > .ocr-modal__card{
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 12px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(12px + var(--safe-area-inset-left)) !important;
    padding-right: calc(12px + var(--safe-area-inset-right)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #kfid-customers-modal.kfid-customers--lock-scroll > .ocr-modal__card{
    overflow-y: hidden !important;
    overscroll-behavior: none;
  }

  /* Dölj desktop-footerknappar – ersätts av sticky bottenrad */
  #kfid-customers-modal > .ocr-modal__card > .ocr-modal__actions{ display: none !important; }
  #kfid-customers-modal .openbox__filters--customers{ display: none !important; }
  /* Mobil: dölj endast limit-fältet i huvudvyn (inte i inställningsmodalen) */
  #kfid-customers-modal .openbox__filters--customers .fitem--cust-limit{ display: none !important; }

  /* Mobil: följ samma scrollmodell som "Öppna sparad kontroll" */
  #kfid-customers-modal .openbox.openbox--customers{
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
    padding-bottom: calc((64px + env(safe-area-inset-bottom)) * (1 - var(--cust-chrome-hide-p, 0)));
  }
  #kfid-customers-modal .openbox__list.kfid-customers-table{
    display: block !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  /* Ingen intern list-scroll på mobil: hela modalen ska scrolla */
  #kfid-customers-modal #kfid-customers-scroll.openlist__scroll.openlist__scroll--fixed{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto;
    padding-bottom: 0 !important;
  }

  /* Flytta listdelen till toppen i mobil-läget */
  #kfid-customers-modal .kfid-customers-pager{ order: 1; margin-top: 0 !important; margin-bottom: 8px !important; }
  #kfid-customers-modal .openbox__list.kfid-customers-table{ order: 2; margin-top: 0 !important; }
  #kfid-customers-modal #kfid-cust-link-actions{ order: 3; }
  #kfid-customers-modal .grid.g3.kfid-custform-grid{ order: 4; }
  #kfid-customers-modal .grid.g3.kfid-custform-grid{ padding-bottom: 40px; }
  #kfid-customers-modal #kfid-customer-hint{ order: 5; }
  #kfid-customers-modal #kfid-customer-prompt{ order: 6; }
  #kfid-customers-modal #kfid-cust-mobile-save-wrap{ order: 7; }

  /* Ge plats så sista innehållet inte hamnar under bottenraden */
  #kfid-customers-modal > .ocr-modal__card > .ocr-modal__content{
    padding-bottom: calc((64px + env(safe-area-inset-bottom) + 14px) * (1 - var(--cust-chrome-hide-p, 0)));
    overflow: visible !important;
    flex: 0 0 auto !important;
    display: block !important;
  }

  /* Mobil-sök (fälls ut via bottenradens "Sök") */
  #kfid-customers-modal .kfid-customers__msearch{
    display:block;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(12px + env(safe-area-inset-top));
    z-index: 12010;
    background: transparent;
    box-sizing: border-box;
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
    transform: translateY(calc(-100% * var(--cust-chrome-hide-p, 0)));
    opacity: calc(1 - var(--cust-chrome-hide-p, 0));
  }
  #kfid-customers-modal .kfid-customers__msearch[hidden]{ display:none !important; }
  #kfid-customers-modal .kfid-customers__msearch .top-search__wrap input[type="search"]{
    height: 48px;
    padding: 0 44px 0 16px;
    border: 0;
    border-radius: 0;
    font-size: var(--fs-input-text);
    background: transparent;
    box-shadow: none;
  }
  #kfid-customers-modal #kfid-customers-qm-clear.btn--icon{
    position: absolute;
    right: 6px;
  }

  /* Sticky bottenrad med "ikoner" (siffror tills ikonerna finns) */
  #kfid-customers-modal .kfid-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12005;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    height: calc(64px + env(safe-area-inset-bottom));
    transform: translateY(calc((64px + env(safe-area-inset-bottom) + 16px) * var(--cust-chrome-hide-p, 0)));
    opacity: calc(1 - var(--cust-chrome-hide-p, 0));
  }
  #kfid-customers-modal.is-chrome-hidden .kfid-bottom-nav{ pointer-events: none; }
  #kfid-customers-modal.is-chrome-hidden .kfid-customers__msearch{ pointer-events: none; }
  #kfid-customers-modal .kfid-bottom-nav button{
    flex: 1 1 0;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 64px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    transition: background 0.2s;
  }
  #kfid-customers-modal .kfid-bottom-nav button:focus{ background: var(--input); outline: 2px solid var(--ring); }
  #kfid-customers-modal .kfid-bottom-nav button[disabled]{ opacity: 0.5; cursor: not-allowed; }
  #kfid-customers-modal .kfid-bottom-nav .icon-svg{ width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }
  #kfid-customers-modal .kfid-bottom-nav img{ width: 28px; height: 28px; pointer-events:none; }
  #kfid-customers-modal .kfid-bottom-nav .kfid-icon-num{ font-size: var(--fs-title); line-height: 1; font-weight: var(--fw-display); color: var(--fg); }
  #kfid-customers-modal .kfid-cust-mobile-save-wrap[hidden]{ display: none !important; }
  #kfid-customers-modal .kfid-cust-mobile-save-wrap:not([hidden]){
    display: flex;
    justify-content: center;
    width: min(100%, 360px);
    margin: 12px auto 0;
    padding-bottom: 12px;
  }
  #kfid-customers-modal .kfid-cust-mobile-save-wrap .btn{
    width: 100%;
  }

  /* Inställningsmodal ovanför bottenraden */
  #kfid-customers-modal #kfid-customers-settings-modal{ z-index: 12050; }
  #kfid-customers-modal #kfid-customers-settings-modal .ocr-modal__card{
    width: min(350px, 92vw) !important;
    max-width: 350px !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }
  #kfid-customers-modal #kfid-customers-settings-modal .ocr-modal__body{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #kfid-customers-modal #kfid-customers-settings-modal .openbox__filters--customers-settings{
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 701px){
  #kfid-customers-modal .kfid-cust-mobile-save-wrap{ display: none !important; }
  #kfid-customers-modal .kfid-customers__msearch{ display: none !important; }
}

/* Mina kunder: listläge (koppla befintlig kund till kontroll) */
#kfid-customers-modal.kfid-customers--list-only .grid.g3.kfid-custform-grid,
#kfid-customers-modal.kfid-customers--list-only #kfid-customer-hint,
#kfid-customers-modal.kfid-customers--list-only #kfid-customer-prompt{
  display: none !important;
}
#kfid-customers-modal.kfid-customers--list-only .kfid-custgrid{
  grid-template-columns: minmax(160px, 1.2fr) minmax(200px, 1.6fr) minmax(160px, 1.2fr);
}
#kfid-customers-modal.kfid-customers--list-only #kfid-customers-head .c:first-child,
#kfid-customers-modal.kfid-customers--list-only .kfid-custgrid--body .openrow .c--chk{
  display: none !important;
}
#kfid-customers-modal.kfid-customers--list-only #kfid-cust-link-actions{
  margin-bottom: 40px !important;
}
@media (max-width: 700px){
  #kfid-customers-modal.kfid-customers--list-only .openbox__filters--customers{ display: none !important; }
  #kfid-customers-modal.kfid-customers--list-only .kfid-custgrid--body .openrow .c:not(.c--chk){
    margin-left: 0 !important;
  }
}

@media (min-width: 701px){
  #kfid-customers-modal.kfid-customers--list-only .kfid-bottom-nav{ display: none !important; }
}

/* Autosuggest editor modal */
#kfid-autosuggest-modal > .ocr-modal__card{
  width: min(450px, 94vw);
  max-width: 450px;
  max-height: min(86dvh, 720px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
		    font-size: var(--fs-sm);
}
#kfid-autosuggest-modal .kfid-asg-bottom-nav{ display: none; }
#kfid-autosuggest-modal .kfid-asg__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 0;
}
#kfid-autosuggest-modal .kfid-asg__head-right{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
#kfid-autosuggest-modal #kfid-asg-autosave-indicator > span{
  /* Matcha startsidans autosave-chip */
  font-size: var(--fs-label);
  font-weight: var(--fw-body);
}
#kfid-autosuggest-modal .kfid-asg__head .ocr-modal__title{
  font-size: var(--fs-title);
  font-weight: var(--fw-strong);
}
#kfid-autosuggest-modal .kfid-asg__status{
  font-size: var(--fs-sm);
  line-height: var(--lh-label);
  color: var(--muted);
  min-height: 1.2em;
  text-align: right;
  max-width: 52%;
}
#kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__content{
  padding: 10px 14px 0;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}
#kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__actions{
  padding: 10px 14px 12px;
  border-top: 0;
  margin-top: 0;
  display: flex;
  gap: 10px;
  justify-content: space-between !important;
  align-items: center;
  flex-wrap: nowrap !important;
  flex: 0 0 auto;
}
#kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__actions .btn{
		    font-size: var(--fs-sm);
  border-radius: 12px;
}
#kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__actions > .kfid-asg__actions-right{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}
#kfid-autosuggest-modal #kfid-autosuggest-save,
#kfid-autosuggest-modal #kfid-autosuggest-cancel{
  width: 96px !important;
  min-width: 96px !important;
}
#kfid-autosuggest-modal #kfid-autosuggest-text{
  width: 100%;
  min-height: 240px;
  height: min(360px, 40dvh);
  resize: vertical;
  box-sizing: border-box;
  font-size: var(--fs-input);
  line-height: var(--lh-base);
}
#kfid-autosuggest-modal label.small,
#kfid-autosuggest-modal .small{
  font-size: var(--fs-sm);
}
#kfid-autosuggest-modal select{
  width: 100%;
  height: 35px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-input);
  line-height: var(--lh-label);
  box-sizing: border-box;
}
#kfid-autosuggest-modal textarea{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-input);
  box-sizing: border-box;
}
/* Autosuggest editor: mobile/touch (<=700px) – same feel as app (fullscreen + bottom icon bar) */
@media (max-width: 700px){
  #kfid-autosuggest-modal > .ocr-modal__card{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #kfid-autosuggest-modal .kfid-asg__head{
    position: sticky;
    top: 0;
    z-index: 12020;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + var(--safe-area-inset-left)) 10px calc(12px + var(--safe-area-inset-right)) !important;
    margin: 0 !important;
    min-height: 64px;
    box-sizing: border-box;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-autosuggest-modal .kfid-asg__head{
      padding-left: calc(12px + var(--safe-area-inset-x)) !important;
      padding-right: calc(12px + var(--safe-area-inset-x)) !important;
    }
  }

  /* Let content flow normally; the card itself scrolls (like stats/open modal) */
  #kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__content{
    padding: 12px calc(12px + var(--safe-area-inset-left)) 12px calc(12px + var(--safe-area-inset-right)) !important;
    overflow: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__content{
      padding-left: calc(12px + var(--safe-area-inset-x)) !important;
      padding-right: calc(12px + var(--safe-area-inset-x)) !important;
    }
  }

  /* Stack controls cleanly */
  #kfid-autosuggest-modal .ocr-modal__content > .row.gap{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #kfid-autosuggest-modal .ocr-modal__content > .row.gap > div{
    min-width: 0 !important;
    flex: none !important;
  }


  #kfid-autosuggest-modal #kfid-autosuggest-text{
    /* Keep suggestion editor comfortably large on phones */
    min-height: 220px;
    height: min(46dvh, 360px);
    flex: 1 1 auto;
  }

  /* Hide text action buttons; use bottom icon bar */
  #kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__actions{ display: none !important; }
  #kfid-autosuggest-modal .kfid-asg-bottom-nav{ display: flex !important; }

  #kfid-autosuggest-modal .kfid-asg-bottom-nav{
    position: sticky;
    bottom: 0;
    z-index: 12015;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(64px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-autosuggest-modal .kfid-asg-bottom-nav{ padding-left: calc(12px + var(--safe-area-inset-x)); padding-right: calc(12px + var(--safe-area-inset-x)); }
  }
  #kfid-autosuggest-modal .kfid-asg-bottom-nav button{
    flex: 1 1 0;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 64px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    transition: background 0.2s;
  }
  #kfid-autosuggest-modal .kfid-asg-bottom-nav button:focus{ background: var(--input); outline: 2px solid var(--ring); }
  #kfid-autosuggest-modal .kfid-asg-bottom-nav .icon-svg{ width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }
  #kfid-autosuggest-modal .kfid-asg-bottom-nav img{ width: 28px; height: 28px; pointer-events:none; }
}

/* Autosuggest editor: mobil landskap – desktop-layout + scroll i "bakgrunden" (hela modalen scrollar) */
@media (max-width: 1024px) and (orientation: landscape){
  /* Gör overlay:n scrollcontainer (body är låst via .modal-open) */
  #kfid-autosuggest-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-autosuggest-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x));
      padding-right: max(12px, var(--safe-area-inset-x));
    }
  }

  /* Desktop-kort (tillåt bli högre än viewport; overlay:n scrollar då) */
  #kfid-autosuggest-modal > .ocr-modal__card{
    width: min(450px, 94vw) !important;
    max-width: 450px !important;
    max-height: none !important;
    height: auto !important;
    border-radius: var(--radius) !important;
    overflow: visible !important;
  }

  /* Behåll desktop-layout i toppen (två selects bredvid varandra) */
  #kfid-autosuggest-modal .ocr-modal__content > .row.gap{
    flex-direction: row !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #kfid-autosuggest-modal .ocr-modal__content > .row.gap > div{
    min-width: 220px !important;
    flex: 1 1 240px !important;
  }

  /* Ingen intern scroll/sticky i modalen i landscape */
  #kfid-autosuggest-modal .kfid-asg__head{ position: static !important; }
  #kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__content{ overflow: visible !important; flex: 0 0 auto !important; }
  #kfid-autosuggest-modal > .ocr-modal__card > .ocr-modal__actions{
    display: flex !important;
    position: static !important;
    box-shadow: none !important;
  }
  #kfid-autosuggest-modal .kfid-asg-bottom-nav{ display: none !important; }

  /* Touchvänligare kontroller i landscape */
	  #kfid-autosuggest-modal select{
	    height: var(--modal-control-h-mobile);
	    min-height: var(--modal-control-h-mobile);
	    font-size: var(--fs-input);
	  }
	  #kfid-autosuggest-modal #kfid-autosuggest-text{
    min-height: 240px;
    height: min(420px, 55dvh);
	    font-size: var(--fs-input);
	  }
}

/* Login + Signup: mobil landskap – behåll desktop-format (inte fullscreen) och låt hela modalen scrolla */
@media (max-width: 1024px) and (orientation: landscape){
  #kfid-login-modal.ocr-modal,
  #kfid-signup-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-login-modal.ocr-modal,
    #kfid-signup-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x));
      padding-right: max(12px, var(--safe-area-inset-x));
    }
  }

  /* Login: släpp intern scroll om den skulle trigga */
  #kfid-login-modal .ocr-modal__card{
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Byt logotyp: mobil landskap – behåll desktop-format och låt hela modalen scrolla */
@media (max-width: 1024px) and (orientation: landscape){
  #kfid-logo-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-logo-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x));
      padding-right: max(12px, var(--safe-area-inset-x));
    }
  }

  #kfid-logo-modal .ocr-modal__card{
    max-height: none !important;
    overflow: visible !important;
  }
  #kfid-logo-modal .ocr-modal__content{
    overflow: visible !important;
  }
}

/* Autosuggest editor: modal-controls ska följa 1024px-regeln (48px) */
@media (max-width: 1024px){
	  #kfid-autosuggest-modal select{
    height: var(--modal-control-h-mobile);
    min-height: var(--modal-control-h-mobile);
    padding: 0 16px;
    border-width: 2px;
    border-radius: 10px;
	    font-size: var(--fs-input);
	    line-height: calc(var(--modal-control-h-mobile) - 2px);
	    box-sizing: border-box;
	  }
	  #kfid-autosuggest-modal textarea{
	    font-size: var(--fs-input);
	  }
}
.ocr-modal__actions[data-action-count="3"]{
  justify-content: center !important; /* 3 knappar: centrerat */
}
.ocr-modal__actions[data-action-count="3"] > .btn{
  flex: 1 1 0 !important;            /* 3 knappar: lika breda */
  width: auto !important;
  min-width: 0;
  max-width: 140px;                  /* 3 ryms i ~440px modal */
  white-space: normal;
}

/* Statistik-modal (kundappen) */
#kfid-stats-modal > .ocr-modal__card{
  width: min(var(--modal-wide-desktop), 98vw) !important;
  max-width: var(--modal-wide-desktop) !important;
  max-height: min(88vh, 100dvh - 32px) !important;
  overflow: hidden !important;
  overflow-anchor: none;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Hidden by default (only shown on <=700px) */
#kfid-stats-modal .kfid-stats-bottom-nav{ display: none !important; }

	@media (max-width: 700px){
		  #kfid-stats-modal > .ocr-modal__card{
		    width: 100vw !important;
		    max-width: 100vw !important;
		    height: 100dvh !important;
		    max-height: 100dvh !important;
		    border-radius: 0 !important;
		    padding: 12px !important;
		    padding-top: calc(12px + env(safe-area-inset-top)) !important;
		    padding-bottom: calc(12px + env(safe-area-inset-bottom) + (64px + env(safe-area-inset-bottom))) !important;
		    padding-left: calc(12px + var(--safe-area-inset-left)) !important;
		    padding-right: calc(12px + var(--safe-area-inset-right)) !important;
		    box-sizing: border-box !important;
		    overflow: auto !important;
		    overflow-anchor: none;
		    overscroll-behavior: contain;
		    -webkit-overflow-scrolling: touch;
		  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-stats-modal > .ocr-modal__card{
      padding-left: calc(12px + var(--safe-area-inset-x)) !important;
      padding-right: calc(12px + var(--safe-area-inset-x)) !important;
    }
  }
	  #kfid-stats-modal .ocr-modal__title{
	    padding: 0 !important;
	    margin: 0 !important;
	    min-height: 40px;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	  }
  #kfid-stats-modal .ocr-modal__content{
    overflow: visible !important;
    padding: 0 !important;
    flex: none !important;
    min-height: auto !important;
  }
  /* Mobile: use bottom sticky actions instead */
  #kfid-stats-modal .ocr-modal__actions.kfid-stats-actions{ display: none !important; }
  #kfid-stats-modal .kfid-stats-filters{ display: none !important; }
  #kfid-stats-modal .kfid-stats-bottom-nav{ display: flex !important; }

	  #kfid-stats-modal .kfid-stats-bottom-nav{
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 12005;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    background: var(--bg);
	    border-top: 1px solid var(--border);
	    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
	    padding-left: var(--safe-area-inset-left);
	    padding-right: var(--safe-area-inset-right);
	    padding-bottom: calc(12px + env(safe-area-inset-bottom));
	    height: calc(64px + env(safe-area-inset-bottom));
	  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-stats-modal .kfid-stats-bottom-nav{ padding-left: var(--safe-area-inset-x); padding-right: var(--safe-area-inset-x); }
  }
  #kfid-stats-modal .kfid-stats-bottom-nav button{
    flex: 1 1 0;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 64px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    transition: background 0.2s;
  }
  #kfid-stats-modal .kfid-stats-bottom-nav button:focus{ background: var(--input); outline: 2px solid var(--ring); }
  #kfid-stats-modal .kfid-stats-bottom-nav button[disabled]{ opacity: 0.5; cursor: not-allowed; }
  #kfid-stats-modal .kfid-stats-bottom-nav .icon-svg{ width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; }
  #kfid-stats-modal .kfid-stats-bottom-nav img{ width: 28px; height: 28px; pointer-events:none; }
	  #kfid-stats-modal .kfid-stats-bottom-info{
    flex: 1 1 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
	    font-size: var(--fs-sm);
	    font-variant-numeric: tabular-nums;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	  }

  /* Settings modal for mobile filters */
  #kfid-stats-modal #kfid-stats-settings-modal{ z-index: 12050; }
  #kfid-stats-modal #kfid-stats-settings-modal .ocr-modal__card{
    width: min(350px, 92vw) !important;
    max-width: 350px !important;
    /* Use available screen height to avoid unnecessary scrolling when there is room */
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }
  /* Match "Öppna sparad kontroll": no separator line above the close button */
  #kfid-stats-modal #kfid-stats-settings-modal .ocr-modal__actions{
    border-top: 0 !important;
    padding: 0 !important;
    margin-top: 12px;
    justify-content: flex-start;
    flex: 0 0 auto;
  }
  #kfid-stats-modal #kfid-stats-settings-modal .ocr-modal__body{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #kfid-stats-modal #kfid-stats-settings-modal .openbox__filters{ grid-template-columns: 1fr !important; }
	  #kfid-stats-modal #kfid-stats-settings-modal .openbox__filters .fitem{
	    gap: 6px;
	    font-size: var(--fs-sm);
	    color: var(--muted);
	  }
  #kfid-stats-modal #kfid-stats-settings-modal .openbox__filters input[type="date"],
	  #kfid-stats-modal #kfid-stats-settings-modal .openbox__filters select{
    height: 48px;
    padding: 0 16px;
    border-width: 2px;
    border-radius: 10px;
	    font-size: var(--fs-input);
	    line-height: 46px;
	  }
  #kfid-stats-modal #kfid-stats-settings-modal .openbox__filters input[type="date"]::-webkit-date-and-time-value,
  #kfid-stats-modal #kfid-stats-settings-modal .openbox__filters input[type="date"]::-webkit-datetime-edit{
    height: 46px;
    line-height: 46px;
  }

  /* Single scroll on mobile: remove inner scrollers/fixed frames */
  #kfid-stats-modal .kfid-stats-scroll{
    height: auto;
    height: auto !important;
    overflow: visible !important;
    scrollbar-gutter: auto;
  }
  #kfid-stats-modal .kfid-stats-openboxlist{ overflow: visible; }

  /* Mobile: buttons under graph should wrap nicely */
  #kfid-stats-modal .kfid-stats-legend{
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  #kfid-stats-modal .kfid-stats-legend-item{ min-width: 0; }
	  #kfid-stats-modal .kfid-stats-legend-controls{
	    margin-left: 0;
	    width: 100%;
	    grid-column: 1 / -1;
	    display: flex;
	    flex-direction: column;
	    align-items: stretch;
	    gap: 15px;
	  }
		  #kfid-stats-modal .kfid-stats-legend-nav{
		    width: 100%;
		    display: grid;
		    grid-template-columns: repeat(8, 1fr);
		    align-items: center;
		    justify-items: center;
		    padding: 5px 0;
		  }
	  #kfid-stats-modal .kfid-stats-legend-modes{
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    gap: 13px;
	  }
	  #kfid-stats-modal .kfid-stats-legend-toggle{
	    height: 36px;
	    width: 100%;
	    justify-content: center;
	  }
	  #kfid-stats-modal .kfid-stats-legend-btn{
	    width: 36px;
	    height: 36px;
	  }
	  #kfid-stats-modal .kfid-stats-legend-count{
	    min-height: 36px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	  }
	}

@media (min-width: 701px){
  #kfid-stats-modal > .ocr-modal__card{
    height: min(88vh, 100dvh - 32px) !important;
  }
}
#kfid-stats-modal > .ocr-modal__card > .ocr-modal__title{ padding: 14px 16px 0; margin: 0; }
#kfid-stats-modal > .ocr-modal__card > .ocr-modal__content{ padding: 10px 16px 0; overflow: auto; flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; }
#kfid-stats-modal > .ocr-modal__card > .ocr-modal__actions.kfid-stats-actions{ margin-top: 0; padding: 12px 16px 16px; border-top: 1px solid var(--border); flex: 0 0 auto; }

/* Desktop: keep modal height stable; let "Kontroller" section take remaining height */
@media (min-width: 701px){
  #kfid-stats-modal .ocr-modal__content{
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
  }

  /* Desktop: make the chart taller but never let it overflow into the table */
  #kfid-stats-modal .kfid-stats-chart-wrap{ overflow: hidden; flex: 0 0 auto; }
  #kfid-stats-modal .kfid-stats-canvas{ height: 340px; }

  /* Do not let legend steal vertical space from the chart */
  #kfid-stats-modal .kfid-stats-legend{ flex: 0 0 auto; }

	  #kfid-stats-modal .kfid-stats-details{
	    flex: 1 1 auto;
	    min-height: 0;
	    display: flex;
	    flex-direction: column;
	  }
	  #kfid-stats-modal .kfid-stats-details > summary{ flex: 0 0 auto; }
	  /* Fixed frame like "Öppna sparad kontroll": fills remaining height (stable), scrolls inside */
	  #kfid-stats-modal .kfid-stats-recent{
	    flex: 1 1 auto;
	    min-height: 0;
	    display: flex;
	    flex-direction: column;
	  }
	  #kfid-stats-modal .kfid-stats-openboxlist{ height: 100%; }
}

/* Statistik: mobil landskap (desktop-bredd) – behåll layout men låt hela modalen scrolla om den blir för hög */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 992px){
  /* Gör overlay:n scrollcontainer (body är låst via .modal-open) */
  #kfid-stats-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-stats-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x));
      padding-right: max(12px, var(--safe-area-inset-x));
    }
  }

  /* Låt kortet bli högre än viewport; overlayn sköter scroll */
  #kfid-stats-modal > .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #kfid-stats-modal .ocr-modal__content{
    overflow: visible !important;
    display: block !important;
  }
  #kfid-stats-modal > .ocr-modal__card > .ocr-modal__content{
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  /* Undvik interna "scroll-frames" som bygger på fast höjd */
  #kfid-stats-modal .kfid-stats-scroll{
    height: auto !important;
    overflow: visible !important;
  }

  /* höjder styrs av 1024px-regeln nedan */
}

/* Statistik: modal-controls ska följa 1024px-regeln (48px) */
@media (max-width: 1024px){
  #kfid-stats-modal .kfid-stats-filters input[type="date"],
	  #kfid-stats-modal .kfid-stats-filters select{
    height: var(--modal-control-h-mobile);
    min-height: var(--modal-control-h-mobile);
    border-width: 2px;
    border-radius: 10px;
	    font-size: var(--fs-input);
	    padding: 0 16px;
	    line-height: calc(var(--modal-control-h-mobile) - 2px);
	    box-sizing: border-box;
	  }
  #kfid-stats-modal .kfid-stats-pager .pager-link{
    min-height: var(--modal-control-h-mobile);
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Tablet (t.ex. iPad liggande): använd en enda scroll-yta i modalen
   så rubriken och footer (Föregående/Nästa + Stäng) alltid ligger kvar. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (max-height: 900px){
  #kfid-stats-modal .ocr-modal__content{
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  /* Undvik nästlade scrollområden när hela modalens innehåll scrollar */
  #kfid-stats-modal .kfid-stats-openboxlist{ overflow: visible; }
  #kfid-stats-modal .kfid-stats-scroll{
    height: auto !important;
    overflow: visible !important;
    scrollbar-gutter: auto;
  }
}

/* Statistik footer: pager centrerad + liten Stäng till höger (som öppna-listan) */
#kfid-stats-modal .kfid-stats-actions{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
#kfid-stats-modal .kfid-stats-pager{
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
	#kfid-stats-modal .kfid-stats-pageinfo{
  color: var(--muted);
  opacity: .9;
	  font-size: var(--fs-base);
	  white-space: nowrap;
	}
#kfid-stats-modal #kfid-stats-close{
  grid-column: 3;
  justify-self: end;
  width: 96px;
  min-width: 96px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 14px;
}

@media (max-width: 520px){
  #kfid-stats-modal .kfid-stats-actions{ grid-template-columns: 1fr; justify-items: center; }
  #kfid-stats-modal .kfid-stats-pager{ grid-column: auto; }
  #kfid-stats-modal #kfid-stats-close{ grid-column: auto; justify-self: center; }
}


#kfid-stats-modal .kfid-stats-sort{
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#kfid-stats-modal .kfid-stats-sort::after{
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("picture/sort.svg") no-repeat center;
  mask: url("picture/sort.svg") no-repeat center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  opacity: .45;
  transform: rotate(0deg);
  transition: transform .12s ease, opacity .12s ease;
}
#kfid-stats-modal .kfid-stats-sort.is-sorted::after{ opacity: .85; }
#kfid-stats-modal .kfid-stats-sort[data-dir="desc"]::after{ transform: rotate(180deg); }
.kfid-stats-head{ margin-bottom: 10px; }
.kfid-stats-strong{ margin: 0 0 6px; font-weight: var(--fw-strong); }
.kfid-stats-desc{ margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: var(--lh-base); }

/* Stats: reserved status/alert area (prevents layout jump) */
.kfid-stats-alert{
  margin: 2px 0 6px;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
.kfid-stats-alert__icon{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: var(--fw-display);
  line-height: 1;
  flex: 0 0 auto;
}
.kfid-stats-alert__text{ min-width: 0; }
.kfid-stats-alert__title{ font-weight: var(--fw-display); font-size: var(--fs-sm); line-height: var(--lh-tight); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfid-stats-alert__desc{ font-size: var(--fs-sm); line-height: var(--lh-tight); opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kfid-stats-alert[data-kind="none"]{
  display: none;
  border: 1px solid transparent;
  background: transparent;
}
.kfid-stats-alert[data-kind="error"]{
  border: 1px solid #fecaca;
  background: #fee2e2;
  color: #7f1d1d;
}
.kfid-stats-alert[data-kind="error"] .kfid-stats-alert__icon{ background: #ef4444; color: #fff; }

.kfid-stats-alert[data-kind="warn"]{
  border: 1px solid #fde68a;
  background: #fef3c7;
  color: #78350f;
}
.kfid-stats-alert[data-kind="warn"] .kfid-stats-alert__icon{ background: #f59e0b; color: #111827; }

.kfid-stats-alert[data-kind="info"]{
  border: 1px solid #bfdbfe;
  background: #dbeafe;
  color: #1e3a8a;
}
.kfid-stats-alert[data-kind="info"] .kfid-stats-alert__icon{ background: #2563eb; color: #fff; }

/* Stats: subtle loading indicator (no layout shift) */
#kfid-stats-modal #kfid-stats-content{ position: relative; }
.kfid-stats-loading{
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  pointer-events: none;
}
.kfid-stats-spinner{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--muted) 40%, transparent);
  border-top-color: var(--fg);
  animation: kfidSpin .7s linear infinite;
  opacity: .75;
}
@keyframes kfidSpin{ to{ transform: rotate(360deg); } }

.kfid-stats-filters{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 10px; width: 100%; min-width: 0; }
.kfid-stats-filter{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kfid-stats-filter__label{ font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-label); }
.kfid-stats-filters input,
.kfid-stats-filters select{ width: 100%; }

.kfid-stats-kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; width: 100%; min-width: 0; }
.kfid-kpi{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 44px 10px 12px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  min-width: 0;
  overflow: visible;
  cursor: pointer;
}
.kfid-kpi:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--fg) 35%, transparent);
  outline-offset: 2px;
}
.kfid-kpi-label{ color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-label); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; }
	.kfid-kpi-info{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  color: var(--muted);
  font: inherit;
  font-weight: var(--fw-display);
	  font-size: var(--fs-base);
	  line-height: 1;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	}
.kfid-kpi-info:hover{ color: var(--fg); }
.kfid-kpi-info:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--fg) 35%, transparent);
  outline-offset: 2px;
}
.kfid-kpi-popover{
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  right: 0;
  background: color-mix(in srgb, var(--card) 92%, #000 8%);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 200px;
  max-width: 320px;
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  pointer-events: auto;
}
.kfid-kpi-help{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-display);
  line-height: 1;
  cursor: help;
  user-select: none;
  flex: 0 0 auto;
}
.kfid-kpi-value{ font-weight: var(--fw-display); font-size: var(--fs-title); line-height: calc(var(--lh-tight) - 0.05); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfid-kpi-value.is-ok{ color: #16a34a; }
.kfid-kpi-value.is-bad{ color: #ef4444; }

.kfid-stats-chart-wrap{ position: relative; width: 100%; min-width: 0; }
.kfid-stats-canvas{ display: block; width: 100%; height: 260px; border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--border); }

.kfid-stats-legend{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.kfid-stats-legend-item{ display: inline-flex; align-items: center; gap: 8px; }
.kfid-stats-swatch{ width: 14px; height: 6px; border-radius: 999px; display: inline-block; }
.kfid-swatch-actual{ background: #16a34a; }
.kfid-swatch-target{ background: #f59e0b; }

/* Stats: small +/- controls next to the goal legend */
.kfid-stats-legend-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: space-between; /* använd hela bredden i desktop */
}
.kfid-stats-legend-nav{ display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kfid-stats-legend-modes{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.kfid-stats-legend-btn--pan{ margin-left: 2px; }
.kfid-stats-legend-btn{
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  color: var(--muted);
  font: inherit;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kfid-stats-legend-btn:hover{ color: var(--fg); border-color: color-mix(in srgb, var(--border) 70%, var(--fg) 30%); }
.kfid-stats-legend-btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  color: var(--fg);
  border-color: color-mix(in srgb, var(--border) 60%, var(--fg) 40%);
}
	.kfid-stats-legend-btn:active{
	  transform: translateY(1px);
	  color: var(--fg);
	  background: color-mix(in srgb, var(--card) 78%, var(--fg) 22%);
	  border-color: color-mix(in srgb, var(--border) 55%, var(--fg) 45%);
	}
	#kfid-stats-modal .kfid-stats-legend-btn.is-on{
	  color: var(--fg);
	  border-color: color-mix(in srgb, #22c55e 55%, var(--border));
	  background: rgba(34,197,94,0.12);
	}
	.kfid-stats-legend-btn:disabled{ opacity: .45; cursor: default; }
	.kfid-stats-legend-count{ min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; opacity: .8; }

/* Stats: arrow icon buttons (left/right/up/down) */
#kfid-stats-modal .kfid-stats-legend-btn--icon{
  font-size: 0;
  position: relative;
}
#kfid-stats-modal .kfid-stats-legend-btn--icon::before{
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  align-self: center;
  justify-self: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  transform-origin: 50% 50%;
  transform: translate(var(--kfid-icon-tx, 0px), var(--kfid-icon-ty, 0px)) rotate(var(--kfid-icon-rot, 0deg));
}
#kfid-stats-modal .kfid-stats-icon-left::before{
  -webkit-mask-image: url("picture/arrow_b_2_1.svg");
  mask-image: url("picture/arrow_b_2_1.svg");
  --kfid-icon-tx: 1.25px;
}
#kfid-stats-modal .kfid-stats-icon-right::before{
  -webkit-mask-image: url("picture/arrow_f_2_1.svg");
  mask-image: url("picture/arrow_f_2_1.svg");
  --kfid-icon-tx: -0.5px;
}
#kfid-stats-modal .kfid-stats-icon-up::before{
  -webkit-mask-image: url("picture/arrow_f_2_1.svg");
  mask-image: url("picture/arrow_f_2_1.svg");
  --kfid-icon-rot: -90deg;
}
	#kfid-stats-modal .kfid-stats-icon-down::before{
	  -webkit-mask-image: url("picture/arrow_f_2_1.svg");
	  mask-image: url("picture/arrow_f_2_1.svg");
	  --kfid-icon-rot: 90deg;
	}
	#kfid-stats-modal .kfid-stats-icon-autorenew::before{
	  -webkit-mask-image: url("picture/autorenew.svg");
	  mask-image: url("picture/autorenew.svg");
	}

/* Stats: make +/- a bit larger and easier to read */
#kfid-stats-modal .kfid-stats-legend-btn--pm{
  padding: 0;
}
#kfid-stats-modal .kfid-stats-pm-glyph{
  display: block;
  font-size: var(--fs-title);
  font-weight: var(--fw-display);
  line-height: 1;
  transform: translateY(var(--kfid-pm-ty, 0px));
}
#kfid-stats-modal .kfid-stats-pm-glyph--minus{ --kfid-pm-ty: -0.5px; }
.kfid-stats-legend-toggle{
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.kfid-stats-legend-toggle:hover{ color: var(--fg); border-color: color-mix(in srgb, var(--border) 70%, var(--fg) 30%); }
.kfid-stats-legend-toggle.is-on{ color: var(--fg); border-color: color-mix(in srgb, #22c55e 55%, var(--border)); background: rgba(34,197,94,0.12); }

/* Desktop/tablet: keep everything on one line down to 700px and let groups compress instead of wrapping */
@media (min-width: 701px){
  #kfid-stats-modal .kfid-stats-legend{
    flex-wrap: nowrap;
    gap: 10px;
  }
  #kfid-stats-modal .kfid-stats-legend-item{
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #kfid-stats-modal .kfid-stats-legend-controls{
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
  }
  #kfid-stats-modal .kfid-stats-legend-nav{
    flex: 1 1 0;
    min-width: 0;
    gap: clamp(6px, 1vw, 14px);
    justify-content: space-between;
  }
  #kfid-stats-modal .kfid-stats-legend-modes{
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: clamp(6px, 1vw, 10px);
    justify-content: flex-end;
  }
  #kfid-stats-modal .kfid-stats-legend-toggle{
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 clamp(8px, 1.1vw, 12px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.kfid-stats-details{ margin-top: 10px; }
.kfid-stats-details > summary{ cursor: pointer; font-weight: var(--fw-strong); list-style: revert; }
.kfid-stats-empty{ margin-top: 10px; color: var(--muted); }
.kfid-stats-scroll-spacer{ height: 0; }

.kfid-stats-recent{ margin-top: 10px; width: 100%; min-width: 0; }
.kfid-stats-recent table{ min-width: 520px; }
.kfid-stats-table{ width: 100%; border-collapse: collapse; }
.kfid-stats-table th,
.kfid-stats-table td{ border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: var(--fs-base); }
.kfid-stats-table th{ color: var(--muted); font-weight: var(--fw-strong); }

/* Stats: recent list should look like "Öppna sparad kontroll" and keep a fixed frame size */
#kfid-stats-modal .kfid-stats-openboxlist{
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
#kfid-stats-modal .kfid-stats-openboxlist .opengrid,
#kfid-stats-modal .kfid-stats-openboxlist .opengrid--head{
  grid-template-columns: 80px minmax(360px,2.2fr) minmax(150px,0.9fr) minmax(190px,1fr);
}

/* Desktop/tablet (701–900px): shrink columns so "Utfört av" never overflows */
@media (max-width: 900px) and (min-width: 701px){
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid,
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--head{
    grid-template-columns: 64px minmax(220px,2fr) minmax(110px,0.9fr) minmax(120px,1fr);
  }
  #kfid-stats-modal .kfid-stats-openboxlist .c{ padding: 4px 6px; font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--head .c{ padding: 4px 6px; font-size: var(--fs-sm); }
}
#kfid-stats-modal .kfid-stats-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  height: auto;
}

/* Desktop/tablet: keep the list frame tall even when only a few rows exist */
@media (min-width: 701px){
  #kfid-stats-modal .kfid-stats-scroll{ min-height: calc(8 * 38px); }
}

/* Avoid open-list mobile reflow rules from affecting stats rows */
@media (min-width: 701px){
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow{ display: contents !important; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c::before{ content: none !important; }
}

/* Mobil (<=520px): stackade rader (2-raders/kompakt vy) */
@media (max-width: 520px){
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--head{ display: none !important; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid{ display: block; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
  }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c{
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    /* Stats-rader har ingen checkbox-kolumn; neutralisera open-list mobilregler */
    margin-left: 0;
    font-size: var(--fs-base);
    font-weight: normal;
    color: var(--fg);
  }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c::before{
    font-size: var(--fs-sm);
    font-weight: var(--fw-strong);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 92px;
    flex: 0 0 auto;
  }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c:nth-child(1)::before{ content: "ID"; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c:nth-child(2)::before{ content: "Projekt"; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c:nth-child(3)::before{ content: "Datum"; }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--body .openrow .c:nth-child(4)::before{ content: "Utfört av"; }
}

/* Statistik: mobile sort bar (under 520px) – show current sort field + icon, without breaking desktop grid */
#kfid-stats-modal .kfid-stats-sortbar{
  display: none;
}
@media (max-width: 520px){
  #kfid-stats-modal .kfid-stats-sortbar{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: var(--fw-strong);
    font-size: var(--fs-sm);
    color: var(--fg);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--input);
    padding: 8px 12px;
    min-height: 46px;
    height: 46px;
    border-bottom: 1px solid var(--border);
  }
  #kfid-stats-modal .kfid-stats-sortbar::after{
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("picture/sort.svg") no-repeat center / contain;
    mask: url("picture/sort.svg") no-repeat center / contain;
    opacity: 0.9;
  }
  #kfid-stats-modal .kfid-stats-sortbar[data-dir="desc"]::after{ transform: rotate(180deg); }
}

/* Mobil (521–700px): behåll tabell-layout men krymp kolumnerna och tillåt horisontell scroll vid behov */
@media (max-width: 700px) and (min-width: 521px){
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid,
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--head{
    grid-template-columns: 64px minmax(220px,2fr) minmax(110px,0.9fr) minmax(120px,1fr);
  }
  #kfid-stats-modal .kfid-stats-openboxlist .c{ padding: 4px 6px; font-size: var(--fs-sm); }
  #kfid-stats-modal .kfid-stats-openboxlist .opengrid--head .c{ padding: 4px 6px; font-size: var(--fs-sm); }
  #kfid-stats-modal .kfid-stats-scroll{ overflow-x: auto; }
}

/* Stats: recent list rendered as grid (same technique as open-list) */
.kfid-stats-recent .kfid-statsgrid{ display: grid; grid-template-columns: 110px minmax(140px, 0.9fr) minmax(240px, 2fr); min-width: 520px; }
.kfid-stats-recent .kfid-statsgrid--head{ background: var(--input); font-weight: var(--fw-strong); color: var(--muted); position: sticky; top: 0; z-index: 1; }
.kfid-stats-recent .kfid-statsgrid--head{ border-bottom: 1px solid var(--border); }
.kfid-stats-recent .kfid-statsgrid--head .c{ display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start; text-align: left; padding: 8px 10px; }
.kfid-stats-recent .kfid-statsgrid--head .c[data-sort]{ cursor: pointer; position: relative; user-select: none; }
.kfid-stats-recent .kfid-statsgrid--head .c[data-sort]::after{ content: ""; width: 14px; height: 14px; margin-left: 6px; display: inline-block; background-color: currentColor; -webkit-mask: url("picture/sort.svg") no-repeat center / contain; mask: url("picture/sort.svg") no-repeat center / contain; opacity: .45; transition: transform .12s ease, opacity .12s ease; }
.kfid-stats-recent .kfid-statsgrid--head .c[data-sort].is-sorted{ color: var(--fg); }
.kfid-stats-recent .kfid-statsgrid--head .c[data-sort].is-sorted::after{ opacity: .9; }
.kfid-stats-recent .kfid-statsgrid--head .c[data-sort][data-dir="desc"]::after{ transform: rotate(180deg); }

.kfid-stats-recent .kfid-statsgrid--body{ background: transparent; }
.kfid-stats-recent .kfid-statsrow{ display: contents; }
.kfid-stats-recent .kfid-statsrow .c{ border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; font-size: var(--fs-base); }

.kfid-stats-tooltip{
  position: absolute;
  z-index: 2;
  background: color-mix(in srgb, var(--card) 92%, #000 8%);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 180px;
  /* Allow long date ranges in the title without wrapping, but never overflow the modal */
  max-width: min(340px, calc(100% - 24px));
  pointer-events: none;
}
.kfid-stats-tooltip[data-tone="good"]{
  border-color: rgba(22,163,74,0.65);
  box-shadow: 0 14px 30px rgba(0,0,0,.25), 0 0 0 2px rgba(22,163,74,0.18);
}
	.kfid-stats-tooltip-title{
  font-weight: var(--fw-display);
  margin-bottom: 8px;
	  font-size: var(--fs-base);
	  letter-spacing: .2px;
	  white-space: nowrap;
	}
.kfid-stats-tooltip-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-sm); }
.kfid-tip-left{ display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.kfid-tip-dot{ width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.kfid-tip-val{ color: var(--fg); }

@media (max-width: 700px){
  .kfid-stats-filters{ grid-template-columns: 1fr; }
  .kfid-stats-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kfid-stats-canvas{ height: 240px; }
}

/* Villkor/DPA-modal: sticky topp/botten som kan döljas vid scroll på mobil */
#kfid-terms-modal .ocr-modal__card{
  width: min(var(--modal-wide-desktop), 98vw) !important;
  max-width: var(--modal-wide-desktop) !important;
  max-height: min(88vh, 100dvh - 32px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
  --terms-chrome-hide-p: 0;
  --terms-pad-top: 0px;
  --terms-pad-bottom: 0px;
}

#kfid-terms-modal .ocr-modal__title{
  margin: 0;
}

#kfid-terms-modal .kfid-terms-head{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 14px 16px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  transform: translateY(calc(-100% * var(--terms-chrome-hide-p)));
  opacity: calc(1 - var(--terms-chrome-hide-p));
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
  z-index: 2;
}

#kfid-terms-modal .kfid-terms-foot{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border);
  transform: translateY(calc(100% * var(--terms-chrome-hide-p)));
  opacity: calc(1 - var(--terms-chrome-hide-p));
  transition: transform 0.08s linear, opacity 0.08s linear;
  will-change: transform, opacity;
  z-index: 2;
}

#kfid-terms-modal .kfid-terms-body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(16px + var(--terms-pad-top)) 16px calc(16px + var(--terms-pad-bottom)) 16px;
}

#kfid-terms-modal #kfid-terms-scroll{
  max-height: none !important;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

#kfid-terms-modal .kfid-terms-hint{
  color: var(--muted);
  margin: 0 0 10px 0;
}

/* Responsiv knapp-layout i avtalsmodalen: matcha appens Posta/Skriv ut */
#kfid-terms-modal .ocr-modal__actions{
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: stretch !important;
  gap: 12px;
}
#kfid-terms-modal .ocr-modal__actions > .btn{
  flex: 1 1 0 !important;
  width: auto !important;
  height: 48px;
  min-height: 0 !important;
  padding-block: 0;
  line-height: 1;
  justify-content: center;
  white-space: nowrap;
}
@media (min-width: 701px){
  #kfid-terms-modal .ocr-modal__actions{
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-end !important;
    gap: var(--btn-gap);
  }
  #kfid-terms-modal .ocr-modal__actions > .btn{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(100px, 20vw, 150px);
  }
}
@media (min-width: 1025px){
  #kfid-terms-modal .ocr-modal__actions > .btn{
    height: var(--modal-control-h-desktop);
  }
}
@media (prefers-reduced-motion: reduce){
  #kfid-terms-modal .kfid-terms-head,
  #kfid-terms-modal .kfid-terms-foot{ transition: none !important; }
}

/* Fullskärm för avtalsmodal i "stackat" läge (matcha Skaffa KFID‑konto‑modalen) */
@media (max-width: 780px) {
  #kfid-terms-modal .ocr-modal__card{
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #kfid-terms-modal .kfid-terms-head{
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  #kfid-terms-modal .kfid-terms-body{
    padding-left: calc(16px + var(--safe-area-inset-left));
    padding-right: calc(16px + var(--safe-area-inset-right));
  }
  #kfid-terms-modal .kfid-terms-foot{
    padding-left: calc(16px + var(--safe-area-inset-left));
    padding-right: calc(16px + var(--safe-area-inset-right));
  }
}

/* UNDANTAG: avtalsmodalen ska alltid ha synlig topp/botten på mobil */
@media (max-width: 700px) {
  #kfid-terms-modal .kfid-terms-head,
  #kfid-terms-modal .kfid-terms-foot{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Avtalsmodal: låg höjd/liggande -> scrolla hela modalen (overlay), inte intern ruta */
@media (max-height: 820px) and (orientation: landscape), (min-width: 701px) and (max-height: 760px){
  #kfid-terms-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-terms-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }

  #kfid-terms-modal > .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #kfid-terms-modal .kfid-terms-body{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }
  #kfid-terms-modal #kfid-terms-scroll{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
    scrollbar-gutter: auto;
  }
}

/* Bekräfta-modal: smalare på desktop */
#kfid-confirm-modal .ocr-modal__card{
  width: min(440px, 92vw) !important;
  max-width: 440px !important;
}

/* Redigeringslås-banner */
#kfid-lock-banner{
  position: fixed;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 12000;
  width: min(520px, 92vw);
}
#kfid-lock-banner[hidden]{ display: none; }
.kfid-lock-banner__inner{
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 12px 12px;
}
	.kfid-lock-banner__text{
	  font-size: var(--fs-base);
	  line-height: var(--lh-sm);
	  margin-bottom: 10px;
	}
.kfid-lock-banner__actions{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start; /* 1–2 knappar */
  align-items: center;
}
.kfid-lock-banner__actions > .btn{
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}
.kfid-lock-banner__actions:has(> .btn:nth-child(3)){
  justify-content: center; /* 3 knappar */
}
.kfid-lock-banner__actions:has(> .btn:nth-child(3)) > .btn{
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 140px;
  white-space: normal;
}

/* Små dialogmodaler: enhetlig 350px bredd */
#kfid-login-modal .ocr-modal__card,
#kfid-forgot-modal .ocr-modal__card,
#kfid-saveas-modal .ocr-modal__card,
#kfid-signup-success-modal .ocr-modal__card {
  width: min(350px, 92vw) !important;
  max-width: 350px !important;
  padding: 20px !important;
}

/* Mobil (≤700px): Open-list använder ikon-bottenrad. Dölj textknapparna och behåll endast pager här. */
@media (max-width: 700px){
  #kfid-open-list .openbox__actions .actions-left,
  #kfid-open-list .openbox__actions .actions-right{ display: none !important; }
  #kfid-open-list #ol-close{ display: none !important; }

  #kfid-open-list .openbox__actions{
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #kfid-open-list .openbox__actions .actions-middle{
    order: 1 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: var(--control-h) !important;
    height: var(--control-h) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
  }
}

/* Alla modaler (utom #kfid-open-modal): --modal-control-h-mobile (48px) på mobil/tablet */
@media (max-width: 1024px) {
  /* Generell säkerhetsregel: alla modal-knappar (utom open-modal) */
  .ocr-modal:not(#kfid-open-modal) .ocr-modal__actions .btn,
  .ocr-modal:not(#kfid-open-modal) .ocr-modal__actions .btn.primary { 
    height: var(--modal-control-h-mobile) !important;
    min-height: var(--modal-control-h-mobile) !important;
    max-height: var(--modal-control-h-mobile) !important;
    padding: 0 24px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
  #kfid-login-modal input[type="text"],
  #kfid-login-modal input[type="email"],
  #kfid-login-modal input[type="password"],
  #kfid-forgot-modal input[type="text"],
  #kfid-forgot-modal input[type="email"],
  #kfid-forgot-modal input[type="password"],
  #kfid-confirm-modal input[type="text"],
  #kfid-confirm-modal input[type="email"],
  #kfid-confirm-modal input[type="password"],
  #kfid-saveas-modal input[type="text"],
  #kfid-saveas-modal input[type="email"],
  #kfid-saveas-modal input[type="password"],
  #kfid-signup-success-modal input[type="text"],
  #kfid-signup-success-modal input[type="email"],
  #kfid-signup-success-modal input[type="password"],
  #kfid-signup-modal input[type="text"],
  #kfid-signup-modal input[type="email"],
	  #kfid-signup-modal input[type="password"] {
	    height: var(--modal-control-h-mobile) !important;
	    line-height: calc(var(--modal-control-h-mobile) - 2px) !important;
		    font-size: var(--fs-input-text) !important;
	  }
  
  #kfid-login-modal .btn,
  #kfid-login-modal .ocr-modal__actions .btn,
  #kfid-login-modal .btn.primary,
  #kfid-forgot-modal .btn,
  #kfid-forgot-modal .ocr-modal__actions .btn,
  #kfid-forgot-modal .btn.primary,
  #kfid-confirm-modal .btn,
  #kfid-confirm-modal .ocr-modal__actions .btn,
  #kfid-confirm-modal .btn.primary,
  #kfid-saveas-modal .btn,
  #kfid-saveas-modal .ocr-modal__actions .btn,
  #kfid-saveas-modal .btn.primary,
  #kfid-signup-success-modal .btn,
  #kfid-signup-success-modal .ocr-modal__actions .btn,
  #kfid-signup-success-modal .btn.primary,
  #kfid-signup-modal .btn,
  #kfid-signup-modal .ocr-modal__actions .btn,
	  #kfid-signup-modal .btn.primary {
	    height: var(--modal-control-h-mobile) !important;
	    min-height: var(--modal-control-h-mobile) !important;
	    max-height: var(--modal-control-h-mobile) !important;
	    padding: 0 24px !important;
		    font-size: var(--fs-input) !important;
		    line-height: 1 !important;
		    box-sizing: border-box !important;
		  }
}

/* Desktop (≥1025px): --modal-control-h-desktop (35px) för alla modaler */
@media (min-width: 1025px) {
  /* Generell säkerhetsregel: alla modal-knappar (utom open-modal) */
  .ocr-modal:not(#kfid-open-modal) .ocr-modal__actions .btn,
  .ocr-modal:not(#kfid-open-modal) .ocr-modal__actions .btn.primary { 
    height: var(--modal-control-h-desktop) !important;
    min-height: var(--modal-control-h-desktop) !important;
    max-height: var(--modal-control-h-desktop) !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
  #kfid-login-modal input[type="text"],
  #kfid-login-modal input[type="email"],
  #kfid-login-modal input[type="password"],
  #kfid-forgot-modal input[type="text"],
  #kfid-forgot-modal input[type="email"],
  #kfid-forgot-modal input[type="password"],
  #kfid-confirm-modal input[type="text"],
  #kfid-confirm-modal input[type="email"],
  #kfid-confirm-modal input[type="password"],
  #kfid-saveas-modal input[type="text"],
  #kfid-saveas-modal input[type="email"],
  #kfid-saveas-modal input[type="password"],
  #kfid-signup-success-modal input[type="text"],
  #kfid-signup-success-modal input[type="email"],
  #kfid-signup-success-modal input[type="password"],
  #kfid-signup-modal input[type="text"],
  #kfid-signup-modal input[type="email"],
  #kfid-signup-modal input[type="password"] {
    height: var(--modal-control-h-desktop) !important;
    line-height: calc(var(--modal-control-h-desktop) - 2px) !important;
	    font-size: var(--fs-input-text) !important;
  }
  
  #kfid-login-modal .btn,
  #kfid-login-modal .ocr-modal__actions .btn,
  #kfid-login-modal .btn.primary,
  #kfid-forgot-modal .btn,
  #kfid-forgot-modal .ocr-modal__actions .btn,
  #kfid-forgot-modal .btn.primary,
  #kfid-confirm-modal .btn,
  #kfid-confirm-modal .ocr-modal__actions .btn,
  #kfid-confirm-modal .btn.primary,
  #kfid-saveas-modal .btn,
  #kfid-saveas-modal .ocr-modal__actions .btn,
  #kfid-saveas-modal .btn.primary,
  #kfid-signup-success-modal .btn,
  #kfid-signup-success-modal .ocr-modal__actions .btn,
  #kfid-signup-success-modal .btn.primary,
  #kfid-signup-modal .btn,
  #kfid-signup-modal .ocr-modal__actions .btn,
	  #kfid-signup-modal .btn.primary {
    height: var(--modal-control-h-desktop) !important;
    min-height: var(--modal-control-h-desktop) !important;
    max-height: var(--modal-control-h-desktop) !important;
    padding: 0 16px !important;
    line-height: 1 !important;
	    font-size: var(--fs-base) !important;
	    box-sizing: border-box !important;
	  }
}

/* Signup‑modal större och mobilanpassad */
#kfid-signup-modal .ocr-modal__card{
  width: min(860px, 98vw) !important;
  max-width: 860px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important; /* undvik dubbel-scroll (card + content) */
  height: 86vh !important;
  max-height: 86vh !important;
  height: min(780px, calc(100vh - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  height: min(780px, calc(100dvh - 48px)) !important;
  max-height: calc(100dvh - 48px) !important;
}
#kfid-signup-modal .ocr-modal__title{ padding: 12px 16px; margin: 0; flex: 0 0 auto; }
#kfid-signup-modal .ocr-modal__content{ flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#kfid-signup-modal .ocr-modal__content iframe{ width: 100%; height: 100%; border: 0; }
#kfid-signup-modal .ocr-modal__actions{ padding: 12px 16px; background: var(--card); border-top: 1px solid var(--border); flex-shrink: 0; justify-content: flex-start; }
@media (max-width: 780px) and (orientation: portrait){
  #kfid-signup-modal .ocr-modal__card{ width: 100% !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; }
}

/* Signup: mobil landskap – behåll desktop-format och låt hela modalen scrolla (ingen intern scroll/sticky) */
@media (max-width: 1024px) and (orientation: landscape){
  #kfid-signup-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-signup-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }
  #kfid-signup-modal .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #kfid-signup-modal .ocr-modal__content{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }
}

/* Signup form layout */
#kfid-signup-modal .signup-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  gap: 10px;
  padding: 12px 16px;
}
#kfid-signup-modal .signup-grid .field-span-2{ grid-column: 1 / -1; }
#kfid-signup-modal .signup-grid .sep{ height: 6px; border-bottom: 1px dotted var(--border); display:block; }
#kfid-signup-modal .signup-grid .addr-row{ display: grid; grid-template-columns: 1fr; gap: 8px; }
#kfid-signup-modal .signup-grid label.small{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
  width: 100%;
}
/* Signup modal styles moved to app.js for dynamic control */
@media (min-width: 640px){
  #kfid-signup-modal .signup-grid .addr-row{ grid-template-columns: 1fr 140px 1fr; }
}
@media (min-width: 701px){
  #kfid-signup-modal .signup-grid{ grid-template-columns: 1fr 1fr; }
}

/************************************
  95. MODALER (OCR m.m.)
*************************************/
.ocr-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 1000; }
.ocr-modal[aria-hidden="true"] { display: none; }
.ocr-modal.is-open[aria-hidden="false"] { display: flex; }
.ocr-modal__card { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); width: min(400px, 92vw); max-height: 80vh; overflow: auto; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: var(--fs-input); }
.ocr-modal__card:focus,
.ocr-modal__card:focus-visible { outline: none; }
.ocr-modal__card .small { font-size: var(--fs-base); line-height: var(--lh-base); }
.ocr-modal__title { margin: 0 0 10px; }
.ocr-modal__actions{
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start !important; /* 1–2 knappar: vänsterjusterat */
  gap: 8px;
  margin-top: 12px;
}
.ocr-modal__actions > .btn{
  flex: 0 0 auto !important;
  width: fit-content !important;
  min-width: 96px; /* enhetlig bredd för 1–2 knappar (så länge texten ryms) */
  max-width: 100% !important;
  white-space: nowrap;
}
.ocr-modal__actions[data-action-count="3"]{
  justify-content: center !important; /* 3 knappar: centrerat */
}
.ocr-modal__actions[data-action-count="3"] > .btn{
  flex: 1 1 0 !important;            /* 3 knappar: lika breda */
  width: auto !important;
  min-width: 0;
  max-width: 140px;                  /* 3 ryms i ~440px modal */
  white-space: normal;
}

/************************************
  98. LADDNING (overlay + dots) & TRANSITIONS
*************************************/
body { opacity: 1; transition: opacity 0.3s ease-in-out; }
body.loading { opacity: 0.3; }
html { scroll-behavior: smooth; }

.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--loader-overlay-bg); backdrop-filter: blur(16px) saturate(180%); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.15s ease-in, visibility 0s linear 0.15s; }
.loading-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.15s ease-in, visibility 0s; }
.loading-dots { display: flex; gap: 8px; }
.loading-dots .dot { width: 12px; height: 12px; background-color: var(--loader-dot-color); border-radius: 50%; animation: bounce 0.5s ease-in-out infinite; }
.loading-dots .dot:nth-child(2) { animation-delay: 0.1s; }
.loading-dots .dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Förhindra menydarr vid laddning */
.card__toolbar{ min-height: 40px; opacity: 1; transition: opacity 0.2s ease-in; display:flex; justify-content:flex-end; align-items:center; gap: 8px; margin-bottom: 0; position: relative; }
.card__toolbar.loading { opacity: 0; }
.card__toolbar .card-menu{ position: relative; top:auto; right:auto; z-index: 1; }
.card__toolbar .card-menu__popup{ top: calc(100% + 8px); right: 0; }

/************************************
  99. PWA INSTALL-BANNER
*************************************/
.install-banner { position: fixed; bottom: calc(70px + env(safe-area-inset-bottom)); left: var(--safe-area-inset-left); right: var(--safe-area-inset-right); margin: 0 12px; background: linear-gradient(135deg, #0B5BD3 0%, #0a4fb8 100%); color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(11, 91, 211, 0.4), 0 2px 8px rgba(0,0,0,0.15); padding: 14px 16px; display: flex; align-items: center; gap: 12px; z-index: 9998; --install-banner-base-transform: translateY(0); --install-banner-hide-transform: translateY(20px); animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: bottom center; }
@supports (padding-left: max(0px, 0px)) {
  .install-banner { left: var(--safe-area-inset-x); right: var(--safe-area-inset-x); }
}
.install-banner[hidden] { display: none !important; }
.install-banner.is-hiding { animation: slideDownFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: none; }
@keyframes slideUpFade { from { opacity: 0; transform: var(--install-banner-hide-transform); } to { opacity: 1; transform: var(--install-banner-base-transform); } }
@keyframes slideDownFade { from { opacity: 1; transform: var(--install-banner-base-transform); } to { opacity: 0; transform: var(--install-banner-hide-transform); } }

/* ==== Slutgiltiga overrides (pga duplicerade modal-sektioner) ==== */
/* Bekräfta-modal: 3-val responsiv layout */
#kfid-confirm-modal .ocr-modal__card{
  width: min(440px, 92vw) !important;
  max-width: 440px !important;
}
@media (max-width: 700px){
  #kfid-confirm-modal .ocr-modal__actions[data-action-count="3"]{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  #kfid-confirm-modal .ocr-modal__actions[data-action-count="3"] > .btn{
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
  }
}
@media (min-width: 701px){
  #kfid-confirm-modal:has(.ocr-modal__actions[data-action-count="3"]) .ocr-modal__card{
    width: min(640px, 92vw) !important;
    max-width: 640px !important;
  }
  #kfid-confirm-modal .ocr-modal__actions[data-action-count="3"] > .btn{
    max-width: none !important;
    white-space: nowrap !important;
  }
}
.install-banner__content { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.install-banner__icon { font-size: var(--fs-icon-lg); line-height: 1; flex-shrink: 0; }
.install-banner__text { flex: 1; min-width: 0; }
.install-banner__text strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-strong); margin-bottom: 2px; color: #fff; }
.install-banner__text p { font-size: var(--fs-sm); line-height: calc(var(--lh-sm) - 0.05); margin: 0; opacity: 0.95; color: rgba(255,255,255,0.95); }
.install-banner__text svg { vertical-align: middle; margin: 0 2px; }
.install-banner__install { flex-shrink: 0; background: #fff; color: #0B5BD3; border: none; border-radius: 8px; padding: 10px 16px; font-size: var(--fs-base); font-weight: var(--fw-strong); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.install-banner__install:hover { transform: scale(1.03); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.install-banner__install:active { transform: scale(0.98); }
.install-banner__close { flex-shrink: 0; width: 28px; height: 28px; border: none; background: rgba(255,255,255,0.2); color: #fff; border-radius: 50%; font-size: var(--fs-xl); line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.2s; }
.install-banner__close:hover { background: rgba(255,255,255,0.3); }
@media (min-width: 701px) { .install-banner { bottom: 24px; left: 50%; right: auto; transform: translateX(-50%); --install-banner-base-transform: translateX(-50%); --install-banner-hide-transform: translate(-50%, 20px); max-width: 480px; margin: 0; } }

/* --- Drawer: Auth icons under sidemenyn --- */
.card-menu__auth { position: relative; width: 28px; height: 28px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.card-menu__auth-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card-menu__auth-icon { width: 28px; height: 28px; display: block; }

/* Åsidosätter drawer‑stilar i kontoinfo-kortet */
#kfid-account-links.card-menu__list {
  padding: 0 !important;
  margin: 10px 0 8px 0 !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
}
#kfid-account-links.card-menu__list[hidden] {
  display: none !important;
}

#kfid-account-links.card-menu__list > li {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  /* behåll globala .card-menu__list > li-marginaler så höjd/mellanrum följer menyn */
}

#kfid-account-links .card-menu__link {
  /* använd samma höjd som övriga menyknappar (ingen fast 32px) */
  padding: 0 8px !important; /* lite kompaktare horisontellt i kontokortet */
  font-size: inherit;
}

#kfid-account-links .card-menu__label {
  white-space: nowrap;
}

/* ta bort luft efter sista raden */
#kfid-account-links.card-menu__list > li:last-child {
  margin-bottom: 0 !important;
}

.kfid-account-more-toggle {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 4px 0 0;
  color: var(--primary);
  font-size: var(--menu-fs-2, var(--fs-sm));
  font-weight: var(--menu-fw, var(--fw-medium));
  cursor: pointer;
  text-decoration: underline;
}

.kfid-account-more-toggle:hover,
.kfid-account-more-toggle:focus {
  outline: none;
  filter: brightness(0.9);
}

/* Ge auth-raden lite extra luft så den blir en separat sektion */
#kfid-auth-item {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* === Anti-flicker auth status gating === */
/* Dessa regler appliceras ENDAST under hydration för att undvika blink */
body.auth-hydrating.auth-cached-logged-in #kfid-guest-status,
body.auth-hydrating.auth-cached-logged-in #kfid-guest-banner { display:none !important; }
body.auth-hydrating.auth-cached-guest #kfid-guest-status { display:block; }
body.auth-hydrating.auth-cached-guest #kfid-guest-status { opacity:0; visibility:hidden; }
body.auth-hydrating.auth-cached-unknown #kfid-guest-status,
body.auth-hydrating.auth-cached-unknown #kfid-guest-banner { display:none !important; }

/* === Företagslogotyp: byt logga modal (kundyta) === */
.kfid-logo-field{ display:flex; flex-direction:column; gap:12px; }
.kfid-logo-preview{
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--input);
  overflow: hidden;
}
.kfid-logo-preview img{ max-height: 120px; width:auto; height:auto; object-fit:contain; display:block; }
.kfid-logo-preview__text{
  font-weight: var(--fw-display);
  letter-spacing: 0.04em;
  line-height: calc(var(--lh-tight) - 0.05);
  font-size: clamp(16px, 2vw, 26px);
  color: color-mix(in srgb, var(--fg) 92%, var(--muted));
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kfid-file-input{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.kfid-file-input__control{ position:absolute; left:-9999px; opacity:0; }
.kfid-file-input__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: var(--modal-control-h-desktop);
  min-height: var(--modal-control-h-desktop);
  max-height: var(--modal-control-h-desktop);
  padding: 0 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: var(--btn-font-size);
  font-weight: var(--fw-strong);
  cursor: pointer;
  border: none;
  line-height: 1;
  box-sizing: border-box;
}
.kfid-file-input__button:hover{ background: color-mix(in srgb, var(--primary) 90%, black); }

/* Byt logotyp-modal: matcha WP-admin knappstil */
#kfid-logo-modal .kfid-file-input__button{
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#312e81;
  font-weight:var(--fw-strong);
}
#kfid-logo-modal .kfid-file-input__button:hover{
  background:#e0e7ff;
  border-color:#a5b4fc;
}
.kfid-file-input__name{ font-size: var(--fs-sm); color: var(--muted); min-width: 140px; word-break: break-all; }
.kfid-file-input__remove{
  border: none;
  background: transparent;
  color: #b91c1c;
  font-weight: var(--fw-strong);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}
.kfid-logo-attachment-id{
  font-size: var(--fs-sm);
  color: var(--muted);
}
.kfid-file-input__remove[hidden]{ display:none !important; }
.kfid-file-input__hint{ font-size: var(--fs-sm); color: var(--muted); }
.kfid-file-input__error{ font-size: var(--fs-sm); color: #b91c1c; width:100%; }
.kfid-logo-status{ font-size: var(--fs-sm); color: var(--muted); }
.kfid-logo-status--error{ color:#b91c1c; font-weight:var(--fw-strong); }

#kfid-customers-modal .kfid-input-error{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
  background: color-mix(in srgb, #ef4444 6%, var(--input));
}
.kfid-logo-status--warn{ color:#b45309; font-weight:var(--fw-strong); }
.btn.is-danger{ background: #b91c1c; border-color: #b91c1c; color:#fff; }
.btn.is-danger:hover{ background: color-mix(in srgb, #b91c1c 90%, black); border-color: color-mix(in srgb, #b91c1c 90%, black); }
@media (max-width: 1024px) {
  .kfid-file-input__button{
    height: var(--modal-control-h-mobile);
    min-height: var(--modal-control-h-mobile);
    max-height: var(--modal-control-h-mobile);
    padding: 0 16px;
    font-size: var(--fs-input);
  }
}
@media (max-width: 640px){
  .kfid-file-input{ flex-direction:column; align-items:stretch; }
  .kfid-file-input__button{ width:100%; }
  .kfid-file-input__name{ min-width:0; }
}

/* === Slutgiltiga overrides: modal-knappar ska följa KFID:s höjd === */
/* (Vissa modaler har egna/duplicerade block – detta ligger sist och vinner) */
@media (max-width: 1024px) {
  .ocr-modal:not(#kfid-open-modal) .btn{
    height: var(--modal-control-h-mobile) !important;
    min-height: var(--modal-control-h-mobile) !important;
    max-height: var(--modal-control-h-mobile) !important;
    padding: 0 24px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1025px) {
  .ocr-modal:not(#kfid-open-modal) .btn{
    height: var(--modal-control-h-desktop) !important;
    min-height: var(--modal-control-h-desktop) !important;
    max-height: var(--modal-control-h-desktop) !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}

/* === Öppna sparad kontroll: byt höjd vid 1024px (som resten av KFID) === */
@media (max-width: 1024px) {
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__actions .btn,
  #kfid-open-modal #kfid-open-list .openbox__actions .btn{
    height: var(--modal-control-h-mobile) !important;
    min-height: var(--modal-control-h-mobile) !important;
    max-height: var(--modal-control-h-mobile) !important;
    padding-block: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1025px) {
  #kfid-open-modal > .ocr-modal__card > .ocr-modal__actions .btn,
  #kfid-open-modal #kfid-open-list .openbox__actions .btn{
    height: var(--control-h) !important;
    min-height: var(--control-h) !important;
    max-height: var(--control-h) !important;
    padding-block: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
}

/* === Slut på style.css (Refaktor SAFE) === */

/* === Landscape låg höjd (touch): behåll desktop-layout i modaler ===
   Global-regeln för (hover:none + pointer:coarse + landscape + låg höjd) stackar .g3/.row.
   Det är rätt för kontroll-formen, men inte för breda desktop-liknande modaler. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) and (min-width: 701px){
  #kfid-open-modal .row,
  #kfid-stats-modal .row,
  #kfid-customers-modal .row{
    flex-direction: row !important;
    align-items: center !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) and (min-width: 701px) and (max-width: 900px){
  #kfid-open-modal .g3,
  #kfid-stats-modal .g3,
  #kfid-customers-modal .g3{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) and (min-width: 901px){
  #kfid-open-modal .g3,
  #kfid-stats-modal .g3,
  #kfid-customers-modal .g3{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* === Modaler (Öppna/Statistik/Mina kunder): landscape + låg höjd ===
   Mål: resultatfältet ska ha stabil höjd och aldrig "tryckas ihop".
   Lösning: låt overlay:n scrolla och lås list-ramarna till fasta höjder.
   Ligger sist i filen för att vinna över tidigare modal-regler. */
@media (hover: none) and (pointer: coarse) and (min-width: 701px) and (orientation: landscape) and (max-height: 900px){
  #kfid-open-modal.ocr-modal,
  #kfid-stats-modal.ocr-modal,
  #kfid-customers-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-open-modal.ocr-modal,
    #kfid-stats-modal.ocr-modal,
    #kfid-customers-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }

  /* Låt kortet bli högre än viewport; overlayn sköter scroll (ingen “squish”) */
  #kfid-open-modal > .ocr-modal__card,
  #kfid-stats-modal > .ocr-modal__card,
  #kfid-customers-modal > .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Statistik: undvik desktopens flex + overflow:hidden som kan klämma innehållet */
  #kfid-stats-modal .ocr-modal__content{
    display: block !important;
    overflow: visible !important;
  }
  #kfid-stats-modal > .ocr-modal__card > .ocr-modal__content{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  /* Öppna sparad kontroll: stabil resultatruta (höjd sätts via JS/CSS-variabler) */
  #kfid-open-list #ol-scroll.openlist__scroll.openlist__scroll--fixed{
    height: var(--ol-scroll-height, 520px) !important;
    min-height: var(--ol-scroll-min-height, var(--ol-scroll-height, 520px)) !important;
    max-height: var(--ol-scroll-max-height, var(--ol-scroll-height, 520px)) !important;
    overflow-y: auto !important;
  }

  /* Mina kunder: stabil resultatruta */
  #kfid-customers-modal #kfid-customers-scroll.openlist__scroll.openlist__scroll--fixed{
    height: var(--ol-scroll-height, 220px) !important;
    min-height: var(--ol-scroll-min-height, var(--ol-scroll-height, 220px)) !important;
    max-height: var(--ol-scroll-max-height, var(--ol-scroll-height, 220px)) !important;
    overflow-y: auto !important;
  }

  /* Statistik: stabil resultatruta (senaste kontroller) */
  /* I låg höjd vill vi INTE ha intern scroll i tabellrutan.
     Låt hela modalen (overlayn) scrolla och låt tabellen ta sin naturliga höjd. */
  #kfid-stats-modal .kfid-stats-openboxlist{ flex: 0 0 auto !important; }
  #kfid-stats-modal .kfid-stats-scroll{
    flex: 0 0 auto !important;
    /* Behåll desktop-känslan: rutan ska inte krympa bara för att få rader finns */
    min-height: calc(8 * 38px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mina kunder: samma princip men lite större höjdspann.
   Vissa enheter/browsers hamnar precis över 900px och då börjar max-height + overflow:hidden
   i kort/innehåll att "klämma" layouten. */
@media (min-width: 701px) and (orientation: landscape) and (max-height: 1100px){
  #kfid-customers-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-customers-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }

  #kfid-customers-modal > .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Släpp kund-modalens interna overflow:hidden i låg höjd så inget kan "squishas" */
  #kfid-customers-modal > .ocr-modal__card > .ocr-modal__content{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }
}

/* Unified single-line focus: reuse existing border and only change color on focus. */
:where(body) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select
):not(.kfid-input-error):not(.is-invalid):is(:focus, :focus-visible){
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

:where(body) :is(.top-search__wrap, .kfid-field-with-icon__wrap):focus-within{
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

/* Desktop-bredd (>=701px): undvik intern scroll i stora modaler.
   Princip: när bredden finns ska kortet aldrig "klämmas" av max-height/overflow,
   utan overlayn (bakgrunden) ska scrolla hela modalen vid för liten höjd. */
@media (min-width: 701px){
  #kfid-stats-modal.ocr-modal,
  #kfid-customers-modal.ocr-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-stats-modal.ocr-modal,
    #kfid-customers-modal.ocr-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }

  #kfid-stats-modal > .ocr-modal__card,
  #kfid-customers-modal > .ocr-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Släpp intern content-scroll i dessa modaler på desktop-bredd */
  #kfid-stats-modal > .ocr-modal__card > .ocr-modal__content,
  #kfid-customers-modal > .ocr-modal__card > .ocr-modal__content{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }
}

/* Resterande modaler: liggande + låg höjd + tillräcklig bredd
   Mål: behåll desktop-layout och låt hela modalen scrolla (inte intern card/body-scroll). */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 640px) and (max-height: 900px){
  #kfid-forgot-modal.ocr-modal,
  #kfid-confirm-modal.ocr-modal,
  #kfid-saveas-modal.ocr-modal,
  #kfid-signup-success-modal.ocr-modal,
  #kfid-ai-mode-modal.ocr-modal,
  #kfid-gate-info-modal.ocr-modal,
  #kfid-typography-modal.ocr-modal,
  #ol-settings-modal.ocr-modal,
  #kfid-customers-settings-modal.ocr-modal,
  #kfid-stats-settings-modal.ocr-modal,
  .kfid-account-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-forgot-modal.ocr-modal,
    #kfid-confirm-modal.ocr-modal,
    #kfid-saveas-modal.ocr-modal,
    #kfid-signup-success-modal.ocr-modal,
    #kfid-ai-mode-modal.ocr-modal,
    #kfid-gate-info-modal.ocr-modal,
    #kfid-typography-modal.ocr-modal,
    #ol-settings-modal.ocr-modal,
    #kfid-customers-settings-modal.ocr-modal,
    #kfid-stats-settings-modal.ocr-modal,
    .kfid-account-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }

  #kfid-forgot-modal > .ocr-modal__card,
  #kfid-confirm-modal > .ocr-modal__card,
  #kfid-saveas-modal > .ocr-modal__card,
  #kfid-signup-success-modal > .ocr-modal__card,
  #kfid-ai-mode-modal > .ocr-modal__card,
  #kfid-gate-info-modal > .ocr-modal__card,
  #kfid-typography-modal > .ocr-modal__card,
  #ol-settings-modal > .ocr-modal__card,
  #kfid-customers-settings-modal > .ocr-modal__card,
  #kfid-stats-settings-modal > .ocr-modal__card,
  .kfid-account-modal > .kfid-account-modal__card{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Släpp interna scrollframes så overlayn sköter scrollen */
  #kfid-typography-modal .ocr-modal__body,
  #ol-settings-modal .ocr-modal__body,
  #kfid-customers-settings-modal .ocr-modal__body,
  #kfid-stats-settings-modal .ocr-modal__body{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  /* Behåll desktop-känsla för kontoinställningar även när <=768-regeln annars staplar knapparna */
  .kfid-account-modal > .kfid-account-modal__card{
    margin: 0 !important;
  }
  .kfid-account-modal .kfid-account-modal__actions{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .kfid-account-modal .kfid-account-modal__actions .btn{
    width: auto !important;
    min-width: 130px !important;
    max-width: 180px !important;
    flex: 1 0 0 !important;
  }

  /* Inställningsmodaler: undvik låst 1-kolumn när bredd finns i liggande */
  #ol-settings-modal .openbox__filters,
  #kfid-customers-settings-modal .openbox__filters--customers-settings,
  #kfid-stats-settings-modal .openbox__filters{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* Typography + Kontoinställningar: mobil (<700px) ska vara helskärm/helsida */
@media (max-width: 700px){
  #kfid-typography-modal.ocr-modal{
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--bg) !important;
  }
  #kfid-typography-modal > .ocr-modal__card{
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(12px + var(--safe-area-inset-left)) !important;
    padding-right: calc(12px + var(--safe-area-inset-right)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .kfid-account-modal{
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--bg) !important;
  }
  .kfid-account-modal .kfid-account-modal__backdrop{
    display: none !important;
  }
  .kfid-account-modal > .kfid-account-modal__card{
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(12px + var(--safe-area-inset-left)) !important;
    padding-right: calc(12px + var(--safe-area-inset-right)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-typography-modal > .ocr-modal__card,
    .kfid-account-modal > .kfid-account-modal__card{
      padding-left: calc(12px + var(--safe-area-inset-x)) !important;
      padding-right: calc(12px + var(--safe-area-inset-x)) !important;
    }
  }

  #kfid-typography-modal .ocr-modal__body,
  .kfid-account-modal .kfid-account-modal__body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #kfid-typography-modal .ocr-modal__actions,
  .kfid-account-modal .kfid-account-modal__actions{
    flex: 0 0 auto !important;
    margin-top: 12px !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
}

/* Kontoinställningar: telefon i liggande ska hålla desktop-form och scrolla hela modalen */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-width: 900px) and (max-height: 520px){
  .kfid-account-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    .kfid-account-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }
  .kfid-account-modal .kfid-account-modal__backdrop{
    display: block !important;
  }
  .kfid-account-modal > .kfid-account-modal__card{
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .kfid-account-modal .kfid-account-modal__actions{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .kfid-account-modal .kfid-account-modal__actions .btn{
    width: auto !important;
    min-width: 130px !important;
    max-width: 180px !important;
    flex: 1 0 0 !important;
  }
}

/* Kontoinställningar fallback: storleksstyrd (även utan coarse-pointer i devtools) */
@media (orientation: landscape) and (min-width: 701px) and (max-width: 900px) and (max-height: 900px){
  .kfid-account-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    .kfid-account-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }
  .kfid-account-modal > .kfid-account-modal__card{
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .kfid-account-modal .kfid-account-modal__actions{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .kfid-account-modal .kfid-account-modal__actions .btn{
    width: auto !important;
    min-width: 130px !important;
    max-width: 180px !important;
    flex: 1 0 0 !important;
  }
}

/* Kontoinställningar: låg höjd + tabletspann (701-1024).
   Undvik intern card-scroll och behåll 48px actions för samma visuella rytm som övriga modaler. */
@media (min-width: 701px) and (max-width: 1024px) and (max-height: 780px){
  .kfid-account-modal{
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, var(--safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, var(--safe-area-inset-right)) !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    .kfid-account-modal{
      padding-left: max(12px, var(--safe-area-inset-x)) !important;
      padding-right: max(12px, var(--safe-area-inset-x)) !important;
    }
  }
  .kfid-account-modal .kfid-account-modal__backdrop{
    display: block !important;
  }
  .kfid-account-modal > .kfid-account-modal__card{
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .kfid-account-modal .kfid-account-modal__body{
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }
  .kfid-account-modal .kfid-account-modal__actions .btn{
    height: var(--modal-control-h-mobile) !important;
    min-height: var(--modal-control-h-mobile) !important;
    max-height: var(--modal-control-h-mobile) !important;
  }
}

/* Typografi + Kontoinställningar: mobil (<700px) använder samma sticky+ikonmönster som övriga modaler */
.kfid-typo-bottom-nav,
.kfid-account-bottom-nav{
  display: none;
}

@media (max-width: 700px){
  #kfid-typography-modal{
    --typo-chrome-hide-p: 0;
  }
  .kfid-account-modal{
    --account-chrome-hide-p: 0;
  }

  #kfid-typography-modal.ocr-modal,
  .kfid-account-modal{
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--bg) !important;
  }
  .kfid-account-modal .kfid-account-modal__backdrop{
    display: none !important;
  }

  #kfid-typography-modal > .ocr-modal__card,
  .kfid-account-modal > .kfid-account-modal__card{
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: var(--bg) !important;
  }

  #kfid-typography-modal .kfid-typo-head,
  .kfid-account-modal .kfid-account-modal__header{
    position: sticky;
    top: 0;
    z-index: 12012;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: 8px;
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
    transition: transform 0.08s linear, opacity 0.08s linear;
    will-change: transform, opacity;
    margin: 0 !important;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-typography-modal .kfid-typo-head,
    .kfid-account-modal .kfid-account-modal__header{
      padding-left: calc(12px + var(--safe-area-inset-x));
      padding-right: calc(12px + var(--safe-area-inset-x));
    }
  }

  #kfid-typography-modal .kfid-typo-head{
    transform: translate3d(0, calc(-100% * var(--typo-chrome-hide-p, 0)), 0);
    opacity: calc(1 - var(--typo-chrome-hide-p, 0));
  }
  .kfid-account-modal .kfid-account-modal__header{
    transform: translate3d(0, calc(-100% * var(--account-chrome-hide-p, 0)), 0);
    opacity: calc(1 - var(--account-chrome-hide-p, 0));
  }
  #kfid-typography-modal .kfid-typo-head .ocr-modal__title,
  .kfid-account-modal .kfid-account-modal__header h2{
    margin: 0 !important;
  }

  .kfid-account-modal .kfid-account-status{
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
    margin: 6px 0 0 0;
  }
  @supports (padding-left: max(0px, 0px)) {
    .kfid-account-modal .kfid-account-status{
      padding-left: calc(12px + var(--safe-area-inset-x));
      padding-right: calc(12px + var(--safe-area-inset-x));
    }
  }

  #kfid-typography-modal .ocr-modal__body,
  .kfid-account-modal .kfid-account-modal__body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: 10px;
    padding-left: calc(12px + var(--safe-area-inset-left));
    padding-right: calc(12px + var(--safe-area-inset-right));
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-typography-modal .ocr-modal__body,
    .kfid-account-modal .kfid-account-modal__body{
      padding-left: calc(12px + var(--safe-area-inset-x));
      padding-right: calc(12px + var(--safe-area-inset-x));
    }
  }

  #kfid-typography-modal .ocr-modal__body{
    padding-bottom: calc((64px + env(safe-area-inset-bottom) + 14px) * (1 - var(--typo-chrome-hide-p, 0)));
  }
  .kfid-account-modal .kfid-account-modal__body{
    padding-bottom: calc((64px + env(safe-area-inset-bottom) + 14px) * (1 - var(--account-chrome-hide-p, 0)));
  }

  #kfid-typography-modal > .ocr-modal__card > .ocr-modal__actions,
  .kfid-account-modal .kfid-account-modal__actions{
    display: none !important;
  }

  #kfid-typography-modal .kfid-typo-bottom-nav,
  .kfid-account-modal .kfid-account-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12011;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(64px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    transition: transform 0.08s linear, opacity 0.08s linear;
    will-change: transform, opacity;
  }
  @supports (padding-left: max(0px, 0px)) {
    #kfid-typography-modal .kfid-typo-bottom-nav,
    .kfid-account-modal .kfid-account-bottom-nav{
      padding-left: var(--safe-area-inset-x);
      padding-right: var(--safe-area-inset-x);
    }
  }

  #kfid-typography-modal .kfid-typo-bottom-nav{
    transform: translateY(calc((64px + env(safe-area-inset-bottom) + 16px) * var(--typo-chrome-hide-p, 0)));
    opacity: calc(1 - var(--typo-chrome-hide-p, 0));
  }
  .kfid-account-modal .kfid-account-bottom-nav{
    transform: translateY(calc((64px + env(safe-area-inset-bottom) + 16px) * var(--account-chrome-hide-p, 0)));
    opacity: calc(1 - var(--account-chrome-hide-p, 0));
  }

  #kfid-typography-modal.is-chrome-hidden .kfid-typo-bottom-nav,
  .kfid-account-modal.is-chrome-hidden .kfid-account-bottom-nav{
    pointer-events: none;
  }

  #kfid-typography-modal .kfid-typo-bottom-nav button,
  .kfid-account-modal .kfid-account-bottom-nav button{
    flex: 1 1 0;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 64px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    transition: background 0.2s;
  }
  #kfid-typography-modal .kfid-typo-bottom-nav button:focus,
  .kfid-account-modal .kfid-account-bottom-nav button:focus{
    background: var(--input);
    outline: 2px solid var(--ring);
  }
  #kfid-typography-modal .kfid-typo-bottom-nav .icon-svg,
  .kfid-account-modal .kfid-account-bottom-nav .icon-svg{
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #kfid-typography-modal .kfid-typo-bottom-nav img,
  .kfid-account-modal .kfid-account-bottom-nav img{
    width: 28px;
    height: 28px;
    pointer-events: none;
  }
}