/* =========================================================
   Kvikr UI – Full CSS Bundle
   ---------------------------------------------------------
   Den här filen genereras automatiskt.

   Redigera INTE denna fil direkt.
   Redigera istället källfilerna:

       /css/kvikr-ui-base.css
       /css/kvikr-ui-components.css
       /css/kvikr-ui-widgets.css

   Byggscript:
       build-bundle-css.py
========================================================= */

/* =========================================================
   SOURCE: css/kvikr-ui-base.css
========================================================= */

/* Kvikr UI – Base
   - Typsnitt + variabler + grundtypografi + sidlayout
   - Alla textstorlekar styrs av --fs (grundstorlek)
*/
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/ubuntu-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu Condensed";
  src: url("../fonts/ubuntu-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 
:root {
  --shadow-line: 0 1px 0 rgba(0,0,0,.03);
  --shadow-pop: 0 10px 30px rgba(15,23,42,.07);

  --err: #dc2626;
  --code-border: var(--border);
  --shadow-fab: 0 8px 20px rgba(15,23,42,.10);
  --shadow-fab-strong: 0 10px 28px rgba(15,23,42,.18);
  --bg-alt: #eef1f4;

	/* Brand */
	--accent: #b60000;
	--accent-rgb: 182,0,0; /* #b60000 */
	--link: var(--accent);
	--accent-border: rgba(182, 0, 0, .25);
	--accent-border-strong: rgba(182, 0, 0, .35);
	--logo-size: 48px;
 
	/* Scale */
	--fs: 18px;
	/* ändra denna för att skala all text */
	--line: 1.55;
 
	/* Derived font sizes (multiplar av --fs) */
	--fs-xs: calc(var(--fs) * 0.75);
	/* 12px vid fs=16 */
	--fs-sm: calc(var(--fs) * 0.8125);
	/* 13px */
	--fs-md: var(--fs);
	/* 16px */
	--fs-lg: calc(var(--fs) * 1.125);
	/* 18px */
	--fs-xl: calc(var(--fs) * 1.375);
	/* 22px */
	--fs-h1: calc(var(--fs) * 2.125);
	/* 34px */
	--fs-h2: calc(var(--fs) * 1.625);
	/* 26px */
	--fs-h3: calc(var(--fs) * 1.25);
	/* 20px */
	--fs-h4: calc(var(--fs) * 1.0);
	/* 16px */
 
	--fs-code: calc(var(--fs) * 0.8125);
	/* 13px */
 
	/* Neutrals */
	--bg: #f6f7f9;
	--panel: #ffffff;
	--panel2: #fafafa;
	--text: #0f172a;
	--muted: #475569;
	--border: #e5e7eb;
	--shadow: 0 8px 24px rgba(15, 23, 42, .06);
 
	/* Sidlayout */
	--radius: 14px;
	--radius-sm: 10px;
	--gap: 16px;
	--container: 1100px;
	--sidebar: 280px;
 
	/* Breakpoints (plattform) */
	--bp-sm: 720px;   /* när formulär mm staplas */
	--bp-md: 900px;   /* "desktop start" */
	--bp-lg: 1200px;  /* breda layouter */

	/* Typografi */
	--font: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: var(--font);
	--font-head: "Ubuntu Condensed", "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

		/* Font weights */
		--fw-regular: 400;
		--fw-medium: 500;
		--fw-semibold: 600;
		--fw-bold: 700;
		
		/* Semantic font weights */
		--fw-body: var(--fw-regular);
		--fw-ui: var(--fw-medium);
		--fw-strong: var(--fw-medium);
		--fw-label: var(--fw-bold);
		--fw-heading: var(--fw-regular);

		strong,
		b {
			font-weight: var(--fw-strong);
		}

	/* Fokus */
	--focus: 0 0 0 4px rgba(182, 0, 0, .15);
 
	/* Floating action button */
	--fab-size: 54px;
	--fab-gap: 14px;

	/* ===== Controls (light theme) ===== */

	--on-accent: #ffffff; /* text på accentbakgrund */
	--danger-rgb: 239,68,68;
	--ok-rgb: 34,197,94;
	--warn-rgb: 245,158,11;
	--info-rgb: 59,130,246;

	/* Status-färger (används av k-dot och meddelanden) */
	--info: rgb(var(--info-rgb));
	--ok: rgb(var(--ok-rgb));
	--warn: rgb(var(--warn-rgb));
	--err: rgb(var(--danger-rgb));

	/* Code */
	--code-bg: #f3f4f6;
	--code-text: var(--text);

	/* Dialog / overlay */
	--overlay-bg: rgba(15,23,42,.40);
	--dialog-bg: var(--panel);
	--dialog-border: var(--border);

	/* Controls (light) – ytor för knappar/etiketter/inputs */
	--ctrl-bg: #ffffff;
	--ctrl-bg-hover: #f3f4f6;
	--ctrl-bg-muted: var(--panel2);
	--ctrl-text: var(--text);
	--ctrl-border: rgba(0, 0, 0, .12);
	--ctrl-border-hover: rgba(0, 0, 0, .22);


	/* Derived component variabler (stable defaults) */
	/* Knappar ska skilja sig svagt från inputs (som ofta har helt vit yta) */
	--btn-bg: #f8fafc;
	--btn-bg-hover: #f1f5f9;
	--btn-border: var(--ctrl-border);
	--btn-border-hover: var(--ctrl-border-hover);
	--btn-text: var(--link);

	--chip-bg: var(--panel);
	--chip-border: var(--ctrl-border);
	--chip-text: var(--text);

	--input-placeholder: #666; 

		/* Validation tokens */
	  --validation-ok: #15803d;
	  --validation-ok-bg: rgba(21, 128, 61, .10);
	  --validation-ok-ring: rgba(21, 128, 61, .16);
	
	  --validation-err: #b91c1c;
	  --validation-err-bg: rgba(185, 28, 28, .10);
	  --validation-err-ring: rgba(185, 28, 28, .16);

	/* Alerts */
	--alert-bg: #f8f8f8;
	--alert-border: #d0d0d0;

	/* Tabs */
	--tab-hover-bg: rgba(255,255,255,.45);

	/* Statuschips */
	--chip-ok-bg: #e8f7ed;
	--chip-ok-text: #1a7f37;
	--chip-ok-border: #bfe6cc;
	--chip-bad-bg: #fde8e8;
	--chip-bad-text: #b60000;
	--chip-bad-border: #f5bcbc;
	
	  --validation-required: var(--validation-err);
	  --validation-help: var(--muted);
	  --validation-error-text: var(--validation-err);
}
 
* {
	box-sizing: border-box;
}
 
html,
body {
	height: 100%;
}
 
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: var(--fs-md)/var(--line) var(--font);
	font-weight: var(--fw-body);
}
 
/* Headings */
h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	letter-spacing: .2px;
	margin: 0 0 .6rem 0;
	line-height: 1.15;
	font-weight: var(--fw-heading);
}
 
h1 {
	font-size: var(--fs-h1);
}
 
h2 {
	font-size: var(--fs-h2);
}
 
h3 {
	font-size: var(--fs-h3);
}
 
h4 {
	font-size: var(--fs-h4);
}
 
p {
	margin: .6rem 0;
}
 
small,
.muted {
	color: var(--muted);
	font-size: var(--fs-sm);
}
 
a {
	color: var(--link);
	text-decoration: none;
}
 
a:hover {
	text-decoration: underline;
}
 
a:focus {
	outline: none;
	box-shadow: var(--focus);
	border-radius: 6px;
}
 
code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: var(--fs-code);
}
 
pre {
	background: var(--code-bg);
	color: var(--code-text);
	padding: 14px;
	border-radius: 12px;
	overflow: auto;
	margin: 12px 0 0 0;
	border: 1px solid var(--border);
}

 
/* Container */
.k-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 18px;
}
 
/* Topbar / Header */
.k-topbar {
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

 
/* Topnav */
.k-nav{
  border-top: 1px solid var(--border);

  /* Gör navets "luft" symmetrisk */
  padding: 10px 0;

  /* VIKTIGT: ingen margin i topbar */
  margin: 0;

  /* Ingen egen bottom-border här – topbar har redan en */
  border-bottom: 0;
  padding-bottom: 4px;
}
 
.k-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	column-column-gap: 18px;
	row-gap: 6px;
	row-gap: 6px;
align-items: center;
}
 
.k-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--link);
text-decoration: none;
	border: 1px solid transparent;
	font-size: var(--fs-sm);
}
 
.k-nav a:hover {
	background: var(--panel2);
	border-color: var(--border);
	text-decoration: none;
}
 
.k-nav a[aria-current="page"] { 
	border-color: var(--accent-border);
	background: var(--panel);
	color: var(--link);
}
 
/* Sidlayout */
.k-layout {
	display: grid;
	grid-template-columns: var(--sidebar) 1fr;
	gap: var(--gap);
	margin-top: 0;
	align-items: start;
}
 
.k-sidebar {
	position: sticky;
	top: 14px;
}
 
.k-main {
	min-width: 0;
}
 
@media (max-width: 980px) {
	.k-layout {
		grid-template-columns: 1fr;
	}
 
	.k-sidebar {
		position: static;
	}
 
	.k-brand {
		min-width: auto;
	}
}
 
/* Footer (ren, centrerad – ingen panel) */
.k-footer {
	margin-top: 18px;
	color: var(--muted);
	font-size: var(--fs-sm);
	padding: 18px 0 24px 0;
	text-align: center;
}
 
.k-footer-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
 
.k-footer-links {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	font-size: var(--fs-sm);
}
 
.k-footer-copy {
	color: var(--muted);
	font-size: var(--fs-sm);
}

/* ==========================
   Dark theme (variabler only)
   Aktiveras med: <html data-theme="dark">
   Accent i dark: #ffd000
   ========================== */
html[data-theme="dark"] {
  --shadow-line: 0 1px 0 rgba(0,0,0,.35);
  --shadow-pop: 0 16px 40px rgba(0,0,0,.55);

  --danger-rgb: 239,68,68;
  --code-border: rgba(255,255,255,.14);
  --bg-alt: #0f172a;
  --shadow-fab: 0 10px 28px rgba(0,0,0,.45);
  --shadow-fab-strong: 0 16px 36px rgba(0,0,0,.55);

  color-scheme: dark;

  /* Brand */
  --accent: #ffd000;
  --accent-rgb: 255,208,0; /* #ffd000 */
  --link: var(--accent);
  --accent-border: rgba(255, 208, 0, .25);
  --accent-border-strong: rgba(255, 208, 0, .35);
  --on-accent: #111827; /* text på gul accent */
  --focus: 0 0 0 4px rgba(255, 208, 0, .22);

  /* Neutrals */
  --bg: #0b1220;
  --panel: #0f172a;
  --panel2: #111c33;
  --text: #e5e7eb;
  --muted: #a6b0c3;
  --border: rgba(255, 255, 255, .12);
  --shadow: 0 10px 28px rgba(0, 0, 0, .45);

  /* Controls (dark) */
  --ctrl-bg: #0b162b;
  --ctrl-bg-hover: #0d1b36;
  --ctrl-bg-muted: #0e1a33;
  --ctrl-text: var(--text);
  --ctrl-border: rgba(255,255,255,.14);
  --ctrl-border-hover: rgba(255,255,255,.22);

  /* Code */
  --code-bg: #0b1428;
  --code-text: var(--text);

	/* Dialog / overlay */
	--overlay-bg: rgba(15,23,42,.40);
	--dialog-bg: var(--panel);
	--dialog-border: var(--border);

  /* Dialog / overlay */
  --overlay-bg: rgba(15,23,42,.55);
  --dialog-bg: var(--panel2);
  --dialog-border: rgba(255,255,255,.16);

  /* Derived component variabler */
  /* Knappar ska skilja sig svagt från inputs även i dark */
  --btn-bg: #0c1a30;
  --btn-bg-hover: #0e223d;

  /* Alerts */
  --alert-bg: #111b31;
  --alert-border: rgba(255,255,255,.14);

  /* Tabs */
  --tab-hover-bg: rgba(255,255,255,.08);

  /* Statuschips */
  --chip-ok-bg: rgba(34,197,94,.14);
  --chip-ok-text: #86efac;
  --chip-ok-border: rgba(34,197,94,.28);
  --chip-bad-bg: rgba(239,68,68,.14);
  --chip-bad-text: #fca5a5;
  --chip-bad-border: rgba(239,68,68,.28);
  --btn-border: var(--ctrl-border);
  --btn-border-hover: var(--ctrl-border-hover);
  --btn-text: var(--link);

  --chip-bg: var(--panel);
  --chip-border: var(--ctrl-border);
  --chip-text: var(--text);
}

/* Kodblock i dark (så de inte blir "ljusa fläckar") */
html[data-theme="dark"] pre{
  background: var(--code-bg);
  color: var(--code-text);
  border-color: var(--code-border);
}

/* =========================================================
   SOURCE: css/kvikr-ui-components.css
========================================================= */

/* =========================================================
   Kvikr UI – Components
   ---------------------------------------------------------
   Den här filen genereras automatiskt.

   Redigera INTE denna fil direkt.
   Redigera istället filerna i:

       /components/

   Byggscript:
       build-components-css.py
========================================================= */

/* =========================================================
   SOURCE: components/01-tokens.css
========================================================= */

/* Kvikr UI – Components: 01 Tokens
   Källa: /ui/css/components/01-tokens.css
*/

:root{
  /* Komponentnivå-variabler (kan skriv över i site-skriv övers.css) */
  --shadow: var(--shadow-line);
  --shadow2: var(--shadow-pop);

  --gap: calc(var(--fs) * 0.75);
  --gap2: calc(var(--fs) * 1.0);
  --gap3: calc(var(--fs) * 1.25);

  --ctrl-h: 44px;

  --alert-bg: #f8f8f8;
  --alert-border: #d0d0d0;

  --chip-ok-bg: #e8f7ed;
  --chip-ok-text: #1a7f37;
  --chip-ok-border: #bfe6cc;

  --chip-bad-bg: #fde8e8;
  --chip-bad-text: #b60000;
  --chip-bad-border: #f5bcbc;
  --icon-btn-size: 1.4em;
}

/* =========================================================
   SOURCE: components/02-utilities.css
========================================================= */

/* Kvikr UI – Components: 02 Utilities
   Källa: /ui/css/components/02-utilities.css
*/

/* =========================
   Hjälpklasser (små hjälpklasser)
========================= */

.muted{ color: var(--muted); }

.k-hr{
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--gap2) 0;
}

.k-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* =========================
   Actions (allmänt)
   - För verktygsrader, panel-fötter, dialogknappar etc
========================= */

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

.k-actions.end{
  justify-content:flex-end;
}

.k-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* k-split variants (behåll .k-split som default)
   - används för att kontrollera vertikal align mellan vänster/höger kolumn
*/
.k-split-top{ align-items:flex-start; }
.k-split-center{ align-items:center; }
.k-split-bottom{ align-items:flex-end; }
.k-split-stretch{ align-items:stretch; }

/* k-split variant: låt vänstersidan krympa så att högerkolumnen kan ligga kvar */
.k-split-shrink-left > :first-child{
  flex: 1 1 0;
  min-width: 0; /* viktigt: tillåt radbrytning istället för att trycka ner högerkolumnen */
}
.k-split-shrink-left > :last-child{
  flex: 0 1 auto; /* kan krympa -> innehåll (t.ex. etiketter) kan radbrytas */
  min-width: 0;
}

/* Ikon-storlekar */
.k-icon-sm { font-size: 0.85em; }
.k-icon-md { font-size: 1em; }
.k-icon-lg { font-size: 1.5em; }
.k-icon-xl { font-size: 2.0em; }

/* =========================================================
   SOURCE: components/03-layout.css
========================================================= */

/* Kvikr UI – Components: 03 Layout
   Källa: /ui/css/components/03-layout.css
*/

/* =========================
   Sidlayouter (plattform)
   - Konkreta, återanvändbara sidmönster
========================= */

/* Layout säkring: låt rutnät/flex-barn krympa (förhindrar overflow/scroll) */
.k-split > *,
.k-layout-2col > *,
.k-layout-sidebar > *{
  min-width: 0;
}

/* Staplad layout (rytmbärare) */
.k-layout-stack{
  display:flex;
  flex-direction: column;
  gap: var(--gap2);
}

/* Två kolumner (t.ex. filter + resultat) */
.k-layout-2col{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--gap2);
  align-items:start;
}

@media (max-width: var(--bp-md)){
  .k-layout-2col{
    grid-template-columns: 1fr;
  }
}

/* Sidopanel (navigation + innehåll) */
.k-layout-sidebar{
  display:grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: var(--gap2);
  align-items:start;
}

@media (max-width: var(--bp-md)){
  .k-layout-sidebar{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Spacing hjälpklasser
   - För sidor som INTE använder paneler men ändå behöver konsekvent rytm.
   - Bygger på variabler: --gap / --gap2 / --gap3
========================= */

/* margin-top */
.k-mt-1{ margin-top: var(--gap) !important; }
.k-mt-2{ margin-top: var(--gap2) !important; }
.k-mt-3{ margin-top: var(--gap3) !important; }

/* margin-bottom */
.k-mb-1{ margin-bottom: var(--gap) !important; }
.k-mb-2{ margin-bottom: var(--gap2) !important; }
.k-mb-3{ margin-bottom: var(--gap3) !important; }

/* margin-y */
.k-my-1{ margin-top: var(--gap) !important; margin-bottom: var(--gap) !important; }
.k-my-2{ margin-top: var(--gap2) !important; margin-bottom: var(--gap2) !important; }
.k-my-3{ margin-top: var(--gap3) !important; margin-bottom: var(--gap3) !important; }

/* margin-x */
.k-mx-1{ margin-left: var(--gap) !important; margin-right: var(--gap) !important; }
.k-mx-2{ margin-left: var(--gap2) !important; margin-right: var(--gap2) !important; }
.k-mx-3{ margin-left: var(--gap3) !important; margin-right: var(--gap3) !important; }

/* =========================================================
   SOURCE: components/04-typography.css
========================================================= */

/* Kvikr UI – Components: 04 Typography
   Källa: /ui/css/components/04-typography.css
*/

/* =========================================
   Typography hjälpklasser (variabel-based)
   Placering: kvikr-ui-components.css (Hjälpklasser/Typography)
   ========================================= */

/* Font size hjälpklasser */
.k-text-xs { font-size: var(--fs-xs); }
.k-text-sm { font-size: var(--fs-sm); }
.k-text-md { font-size: var(--fs-md); }
.k-text-lg { font-size: var(--fs-lg); }
.k-text-code { font-size: var(--fs-code); }

/* Heading-size hjälpklasser (ändrar inte HTML-semantiken) */
.k-text-h1 { font-size: var(--fs-h1); }
.k-text-h2 { font-size: var(--fs-h2); }
.k-text-h3 { font-size: var(--fs-h3); }
.k-text-h4 { font-size: var(--fs-h4); }

/* Valfritt: weight hjälpklasser (endast om your typography uses these weights consistently) */
.k-text-regular { font-weight: var(--fw-regular); }
.k-text-medium  { font-weight: var(--fw-medium); }
.k-text-bold    { font-weight: var(--fw-strong); }

/* Valfritt: muted alias (if you want everything prefixed)
   Otherwise keep using existing .muted */
.k-text-muted { color: var(--muted, inherit); }

/* =========================================
   Scale behållares (variabel skriv övers per region)
   Använd när you want a whole area to be smaller/larger
   ========================================= */

.k-scale-sm {
  --fs: 14px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-h4: 18px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-h1: 28px;
  --fs-code: 13px;
}

.k-scale-lg {
  --fs: 18px;
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-h4: 24px;
  --fs-h3: 28px;
  --fs-h2: 34px;
  --fs-h1: 40px;
  --fs-code: 16px;
}

/* =========================================================
   SOURCE: components/05-icons.css
========================================================= */

/* Kvikr UI – Components: 05 Icons
   Källa: /ui/css/components/05-icons.css
*/

/* Ikoner */
.k-icon{
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.125em;
  flex: 0 0 auto;
  aspect-ratio: 1;
}

.k-btn:not(.k-btn-icon) .k-icon{
  width: 1.3em;
  height: 1.3em;
}

.k-btn > .k-icon:not(:last-child){
  margin-right: 0.5em;
}

.k-btn-icon .k-icon{
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  flex: 0 0 20px;
}

.k-icon,
.k-icon-lg{
  color: var(--accent);
}

.k-btn-icon{
  width: var(--ctrl-h);
  min-width: var(--ctrl-h);
  height: var(--ctrl-h);
  padding: 0;
  border-radius: 10px;
}

.k-btn.ghost.k-btn-icon{
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-text);
}

.k-btn.ghost.k-btn-icon:hover,
.k-btn.ghost.k-btn-icon:focus-visible{
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-text);
}

/* =========================================================
   SOURCE: components/06-panels.css
========================================================= */

	/* Kvikr UI – Components: 06 Panels
   Källa: /ui/css/components/06-panels.css
*/

/* =========================
   Paneler
========================= */

.k-panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Panelhierarki */
.k-panel.subtle{
  background: var(--panel2);
  box-shadow: none;
}

.k-panel.pad{
  padding: 14px;
}

.k-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.k-panel-title{
  min-width: 0;
}

.k-panel-title .k-title{
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  line-height: 1.15;
  margin: 0;
}

.k-panel-title .k-subtitle{
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.k-panel-body{
  padding: 14px;
}

.k-panel-body > :first-child{ margin-top: 0; }
.k-panel-body > :last-child{ margin-bottom: 0; }

.k-panel-footer{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--border);
}

/* =========================
   Klickbara kort (panel som länk)
========================= */

a.k-card-link{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;

  color: var(--link);
  text-decoration: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

/* Besökta kort ska inte ändra färg */
a.k-card-link:visited{
  color: var(--link);
}

/* Hover/focus ska inte få vanlig länkstil */
a.k-card-link:hover,
a.k-card-link:focus{
  color: var(--link);
  text-decoration: none;
}

/* Säkerställ att allt innehåll i kortet följer kortlänkens stil */
a.k-card-link,
a.k-card-link *{
  text-decoration: none;
}

a.k-card-link .k-title,
a.k-card-link .k-subtitle,
a.k-card-link p,
a.k-card-link li,
a.k-card-link span,
a.k-card-link strong{
  color: inherit;
}

/* Förhindra att textkolumnen trycker ut kortet */
a.k-card-link > :nth-child(2){
  min-width: 0;
}

/* Ikon/bild i första kolumnen */
a.k-card-link > img,
a.k-card-link > svg,
a.k-card-link > .k-icon,
a.k-card-link > k-icon{
  display: block;
  flex: 0 0 auto;
}

a.k-card-link:hover{
  border-color: var(--accent);
}

a.k-card-link:active{
  transform: translateY(1px);
}

/* =========================
   Klickbara kort – radlayout (ikon + text)
   Frivillig variant av .k-card-link
========================= */

a.k-card-link.k-card-link-row{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}

a.k-card-link.k-card-link-row .k-card-link-icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

a.k-card-link.k-card-link-row .k-card-link-content{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Nollställ vertikala marginaler i textblocket */
a.k-card-link.k-card-link-row .k-card-link-content > :first-child{
  margin-top: 0;
}

a.k-card-link.k-card-link-row .k-card-link-content > :last-child{
  margin-bottom: 0;
}

/* Om titlar/subtitles används i radkort ska de inte lägga in extra luft */
a.k-card-link.k-card-link-row .k-title,
a.k-card-link.k-card-link-row .k-subtitle,
a.k-card-link.k-card-link-row p{
  margin-top: 0;
  margin-bottom: 0;
}

/* Ikonmedia */
a.k-card-link.k-card-link-row .k-card-link-icon img,
a.k-card-link.k-card-link-row .k-card-link-icon svg,
a.k-card-link.k-card-link-row .k-card-link-icon .k-icon{
  display: block;
  width: auto;
  height: auto;
  max-width: none;
}

a.k-card-link.k-card-link-row:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.k-card-link-icon{
  transform: translateY(1px);
}

/* =========================
   Bildkort
   - klickbara kort med bild + text
   - bilden ligger inne i kortet med normal kortluft
   - stöd för vertikal/horisontell layout
   - kvadratisk beskärning som tillval
========================= */

.k-card-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;
  align-items:stretch;
}

.k-card-grid.cols-2,
.k-card-grid.cols-3,
.k-card-grid.cols-4{
  grid-template-columns:1fr;
}

@media (min-width:720px){
  .k-card-grid.cols-2{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (min-width:1024px){
  .k-card-grid.cols-3{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .k-card-grid.cols-4{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
}

.k-card-grid > .k-card-media.k-panel.k-card-link{
  display:flex;
  flex-direction:column;
  align-self:stretch;
  height:100%;
  box-sizing:border-box;
}

.k-card-media > .k-panel-body{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  box-sizing:border-box;
  align-items:flex-start;
  justify-content:flex-start;
}

.k-card-media .k-card-media-figure{
  display:block;
  margin:0;
  padding:0;
  min-width:0;
  box-sizing:border-box;
}

.k-card-media .k-card-media-figure .k-media{
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
}

.k-card-media .k-card-media-figure img,
.k-card-media .k-card-media-figure video,
.k-card-media .k-card-media-figure iframe{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  vertical-align:top;
}

.k-card-media .k-card-media-body{
  min-width:0;
  box-sizing:border-box;
}

.k-card-media .k-card-media-body > :first-child{
  margin-top:0;
}

.k-card-media .k-card-media-body > :last-child{
  margin-bottom:0;
}

.k-card-media .k-card-media-body .k-panel-title{
  margin:0 0 8px 0;
}

.k-card-media-vertical > .k-panel-body{
  flex-direction:column;
  align-items:stretch;
}

.k-card-media-vertical .k-card-media-figure{
  width:100%;
  margin-bottom:16px;
  align-self:stretch;
}

.k-card-media-vertical .k-card-media-body{
  flex:1 1 auto;
}

.k-card-media-horizontal > .k-panel-body{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}

@media (min-width:720px){
  .k-card-media-horizontal > .k-panel-body{
    grid-template-columns:180px minmax(0,1fr);
  }
}

.k-card-media-horizontal .k-card-media-figure{
  width:100%;
  align-self:start;
  justify-self:stretch;
}

.k-card-media-horizontal .k-card-media-body{
  align-self:start;
}

.k-card-media-square .k-card-media-figure .k-media{
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.k-card-media-square .k-card-media-figure img,
.k-card-media-square .k-card-media-figure video,
.k-card-media-square .k-card-media-figure iframe{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* =========================================================
   Filterbar (tunn panel för filter i list-/adminvyer)
   Bygger på .k-panel + .k-form
========================================================= */

.k-filterbar{
  /* wrapper (valfri) */
}

.k-panel.k-panel-thin{
  /* tunnare variant av panel för filterbar / toolbars */
}

.k-panel.k-panel-thin > .k-panel-header{
  padding: calc(var(--gap) * 0.75) var(--gap2);
  min-height: 0;
}

.k-panel.k-panel-thin > .k-panel-body{
  padding: var(--gap2);
}

.k-panel.k-panel-thin > .k-panel-footer{
  padding: calc(var(--gap) * 0.75) var(--gap2);
}

/* Header-layout: titel + actions */
.k-filterbar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  width: 100%;
}

.k-filterbar-title{
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 0.75);
  min-width: 0;
}

.k-filterbar-title .k-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* liten status (t.ex. “3 aktiva”) */
.k-filterbar-meta{
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
}

/* Actions i header (t.ex. Rensa / Export) */
.k-filterbar-actions{
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 0.75);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Grid inne i filterbar-body – funkar även utan k-row/k-col */
.k-filterbar-grid{
  display: grid;
  gap: var(--gap2);
  grid-template-columns: 1fr;
}

@media (min-width: 760px){
  .k-filterbar-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .k-filterbar-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Om filterbar ska vara fällbar */
.k-filterbar.is-collapsible .k-filterbar-toggle{
  cursor: pointer;
  user-select: none;
}

.k-filterbar.is-collapsible .k-filterbar-toggle:focus{
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r);
}

/* content visas/döljs via [hidden] (rekommenderas) */
.k-filterbar-content[hidden]{
  display: none !important;
}

/* =========================================================
   SOURCE: components/07-header.css
========================================================= */

/* Kvikr UI – Components: 07 Header
   Källa: /ui/css/components/07-header.css
*/

/* =========================
   Header / brand
========================= */

.k-header{
  display: block;
  padding: 6px 0 8px;
}

.k-header-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  flex-wrap: wrap;
}

.k-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 320px;
}

.k-brand-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.k-brand-logo img{
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.k-brand-title{
  min-width: 0;
}

.k-brand-title .name{
  min-width: 0;
  line-height: 1.05;
	font-family: var(--font-head);
}

.k-brand-title .tagline{
  min-width: 0;
}

.k-header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 0 1 auto;
}

.k-header-actions > *{
  flex: 0 0 auto;
}

/* =========================
   Header – mellanbred skärm
========================= */

@media (max-width: 900px){
  .k-header-main{
    align-items: flex-start;
  }

  .k-header-actions{
    justify-content: flex-start;
  }
}

/* =========================
   Header – mobil
========================= */

@media (max-width: 640px){
  .k-header{
    padding: 6px 0 10px;
  }

  .k-header-main{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .k-brand{
    width: 100%;
    flex: 0 0 auto;
  }

  .k-brand-logo img{
    width: 56px;
    height: 56px;
  }

  .k-brand-title .name,
  .k-brand-title .tagline{
    white-space: normal;
  }

  .k-header-actions{
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .k-header-actions .k-chip{
    order: 0;
  }

  .k-header-actions .k-btn{
    flex: 0 0 auto;
  }
}

/* =========================
   Header – mycket smal mobil
========================= */

@media (max-width: 420px){
  .k-header-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .k-header-actions .k-chip,
  .k-header-actions .k-btn{
    width: 100%;
  }

  .k-header-actions .k-btn{
    justify-content: center;
  }
}

/* =========================
   Inline rad (t.ex. i headers)
========================= */

.k-inline{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   SOURCE: components/08-sidemenu.css
========================================================= */

/* Kvikr UI – Components: 08 Sidemenu
   Källa: /ui/css/components/08-sidemenu.css
*/

/* =========================
   Sidomeny (i sidokolumn)
========================= */

.k-sidemenu{
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.k-sidemenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--link);
  border: 1px solid transparent;
}

.k-sidemenu a:hover{
  border-color: var(--border);
  background: var(--panel2);
}

.k-sidemenu .hint{
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* =========================================================
   SOURCE: components/09-buttons.css
========================================================= */

/* Kvikr UI – Components: 09 Buttons
   Källa: /ui/css/components/09-buttons.css
*/

/* Förhindra att knappar bryter text på flera rader (ser trasigt ut)
   Knappar är variabel-styrda och ska fungera lika för <a> och <button>.
*/
.k-btn,
a.k-btn,
button.k-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: var(--ctrl-h);
  padding: 0 18px;              /* behåll horisontell padding, höjden styrs av height */
  box-sizing: border-box;

  border-radius: 12px;
  border: 1px solid var(--btn-border);

  background: var(--btn-bg);
  color: var(--btn-text);

  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1;               /* ok när vi centrerar med flex */
  white-space: nowrap;
  text-decoration: none;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.k-btn:hover{
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  text-decoration: none;
}

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

.k-btn:focus{
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--btn-border-focus);
}

.k-btn:disabled,
.k-btn[disabled],
.k-btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Varianter (som i styleguide) */
.k-btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.k-btn.primary:hover{
  filter: brightness(.96);
}

.k-btn.danger{
  background: rgba(var(--danger-rgb), .10);
  border-color: rgba(var(--danger-rgb), .40);
  color: var(--accent);
}
.k-btn.danger:hover{
  background: rgba(var(--danger-rgb), .14);
}
.k-btn.ghost{
  background: transparent;
  border-color: transparent;
  color: var(--btn-text);
}
.k-btn.ghost:hover{
  background: rgba(var(--accent-rgb), .08);
  border-color: rgba(var(--accent-rgb), .18);
}

/* Kopiera-knappar i styleguide: lite tightare */
.k-btn.sg-copy{
  padding: 9px 16px;
}

/* Alias om något använder variant-namn */
.k-btn--primary{ /* äldre variant */
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Knappar – border ska aldrig kunna bli "tom" */
.k-btn,
a.k-btn,
button.k-btn{
  border: 1px solid var(--ctrl-border);
}

.k-btn:hover{
  border-color: var(--ctrl-border-hover);
}

/* =========================================================
   SOURCE: components/10-forms.css
========================================================= */

/* Kvikr UI – Components: 10 Forms
   Källa: /ui/css/components/10-forms.css
*/

/* =========================
   Formulär
========================= */

.k-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Modifier: 1 kolumn (ska ligga EFTER .k-form så den vinner) */
.k-form.cols-1{
  grid-template-columns: 1fr !important;
}

/* Tvinga formulär till x kolumner oavsett skärmstorlek */
.k-form.cols-2{ grid-template-columns: 1fr 1fr; }
.k-form.cols-3{ grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 720px){
  .k-form{ grid-template-columns: 1fr; }
}

/* =========================
   Form Actions
   - Separat zon för knappar i formulär
   - Hindrar att knappar blandas med inputs
========================= */

.k-form-actions{
  grid-column: 1 / -1;   /* Spänn över alla kolumner */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.k-form-actions .k-btn{
  width: 100%;
}

@media (min-width: 900px){
  .k-form-actions.horizontal{
    flex-direction: row;
  }
  .k-form-actions.horizontal .k-btn{
    width: auto;
  }
}

.k-field{
  min-width: 0;
  justify-self: stretch; /* viktigt i Safari när .k-form är rutnät */
}

.k-label,
.k-field label{
  display:block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-label);
  margin: 0 0 6px 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.2;
}

.k-label .k-optional{
  font-weight: var(--fw-ui);
  color: var(--muted);
  font-size: .9em;
}

/* 1-radiga kontroller */
.k-input,
.k-select{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  height: var(--ctrl-h);
  padding: 0 12px;
  line-height: calc(var(--ctrl-h) - 2px); /* optiskt centrerad text i många webkit */

  border: 1px solid var(--ctrl-border);
  background: var(--input-bg);            /* variabel */
  color: var(--input-text);

  font: var(--fw-ui) var(--fs-md)/1.35 var(--font-body);

  border-radius: 12px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Textarea ska inte låsas i höjd */
.k-textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  border: 1px solid var(--ctrl-border);
  background: var(--input-bg);
  color: var(--input-text);

  font: var(--fw-ui) var(--fs-md)/1.35 var(--font-body);

  padding: 10px 12px;
  border-radius: 12px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;

  min-height: 110px;
  resize: vertical;
}

.k-input::placeholder,
.k-textarea::placeholder{
  color: var(--input-placeholder);
}

.k-input:focus,
.k-select:focus,
.k-textarea:focus{
  outline: none;
  border-color: var(--btn-border-focus);
  box-shadow: var(--focus);
}

.k-help{
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.k-error{
  margin-top: 6px;
  color: var(--accent);
  font-size: var(--fs-xs);
}

.k-field.is-error .k-label,
.k-field.is-error label{
  color: var(--accent);
}

.k-field.is-error .k-input,
.k-field.is-error .k-select,
.k-field.is-error .k-textarea{
  border-color: var(--accent);
  box-shadow: var(--focus);
}

.k-check{
  display:flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.k-check input{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Radio – samma gränssnitt/upplevelse som .k-check */
.k-radio{
  display:flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.k-radio input{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* iOS/Safari: date/time behöver appearance:none för att följa width/height korrekt */
.k-input[type="date"],
.k-input[type="time"],
.k-input[type="datetime-local"],
.k-input[type="month"],
.k-input[type="week"]{
  -webkit-appearance: none;
  appearance: none;
}

/* Om en parent råkar vara flex/rutnät: tillåt att kontrollen får krympa */
.k-field > .k-input,
.k-field > .k-select,
.k-field > .k-textarea{
  min-width: 0;
}

/* =========================================================
   k-form: variants must WIN (lägg sist i filen)
   - Behåll bara om du verkligen behöver "säkring net".
   - Annars kan .k-form{display:rutnät} ligga i formulärsektionen.
   ========================================================= */

/* 1 kolumn – måste vinna över default 2-kolumners k-form */
.k-form.cols-1{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

/* I 1-kolumnsläge: låt både fält och actions alltid fylla hela bredden */
.k-form.cols-1 > .k-field,
.k-form.cols-1 > .k-form-actions{
  grid-column: 1 / -1;
  min-width: 0;
}

/* =========================
   Form validation
========================= */

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

.k-field-help{
  font-size: var(--fs-sm);
  color: var(--validation-help);
}

.k-field-error{
  display: none;
  font-size: var(--fs-sm);
  color: var(--validation-error-text);
}

.k-field.is-invalid .k-field-error{
  display: block;
}

.k-field.is-required .k-label::after{
  content: " *";
  color: var(--validation-required);
}

.k-field.is-invalid .k-input,
.k-field.is-invalid .k-select,
.k-field.is-invalid .k-textarea,
.k-input.err,
.k-select.err,
.k-textarea.err{
  border-color: var(--validation-err);
  box-shadow: 0 0 0 3px var(--validation-err-ring);
}

.k-field.is-valid .k-input,
.k-field.is-valid .k-select,
.k-field.is-valid .k-textarea{
  border-color: var(--validation-ok);
  box-shadow: 0 0 0 3px var(--validation-ok-ring);
}

/* =========================================================
   SOURCE: components/11-alerts.css
========================================================= */

/* Kvikr UI – Components: 11 Alerts
   Källa: /ui/css/components/11-alerts.css
*/

/* =========================
   Punkt (Dot) – återanvändbar
========================= */

.k-dot{
  --dot-size: 12px;
  --dot-color: var(--accent);

  display:inline-block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 12px;
  background: var(--dot-color);
  flex: 0 0 auto;
}

/* Bekväma färgvarianter */
.k-dot.info{ --dot-color: var(--info); } /* blå */
.k-dot.ok{   --dot-color: var(--ok); } /* grön */
.k-dot.warn{ --dot-color: var(--warn); } /* orange */
.k-dot.err{  --dot-color: var(--err); } /* röd */

/* =========================
   Meddelanden (Alerts)
   - rutnät så punkten centreras mot titelradens höjd
========================= */

.k-alert{
  border: 1px solid var(--alert-border);
  background: var(--alert-bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: none;

  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}

/* Stöd både nya .k-dot och gamla .dot */
.k-alert .k-dot,
.k-alert .dot{
  grid-column: 1;
  grid-row: 1;
  align-self: center; /* <-- centrera mot titelrad */
}

.k-alert .title{
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  line-height: 1.15;
  margin: 0;
}

.k-alert .msg{
  grid-column: 2;
  grid-row: 2;
  font-size: var(--fs-md);
  color: var(--muted);
  margin: 0;
}

/* Om någon fortfarande använder .dot, ge den en rimlig form */
.k-alert .dot{
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: var(--accent);
}

/* Alert-typer */
.k-alert.info .dot{ background: var(--info); }
.k-alert.ok   .dot{ background: var(--ok); }
.k-alert.warn .dot{ background: var(--warn); }
.k-alert.err  .dot{ background: var(--err); }

/* Alerts: om ingen .title finns – flytta upp .msg till första raden */
.k-alert:not(:has(.title)) .msg{
  grid-row: 1;
}

/* När .msg ligger på rad 1 ska pricken också centreras mot den raden (gör redan) */
.k-alert:not(:has(.title)) .k-dot,
.k-alert:not(:has(.title)) .dot{
  grid-row: 1;
  align-self: center;
}

/* Om msg råkar vara tom: göm den (så title-only blir snyggt) */
.k-alert .msg:empty{ display:none; }

/* =========================
   Alerts – prickplacering (optiskt korrekt)
   - Gör pricken lite större och nudga nedåt
========================= */

/* Standardstorlek för prick just i meddelanden (oavsett andra k-dot-användningar) */
.k-alert{
  --alert-dot-size: 14px;      /* prova 14–16px */
  --alert-dot-nudge: 2px;      /* optisk justering nedåt */
}

/* Tvinga alert-prickar till rätt storlek */
.k-alert .k-dot{
  --dot-size: var(--alert-dot-size);
}

/* Stöd även gamla .dot ifall de finns kvar */
.k-alert .dot{
  width: var(--alert-dot-size);
  height: var(--alert-dot-size);
}

/* Placera pricken mot första raden och nudga nedåt lite */
.k-alert .k-dot,
.k-alert .dot{
  grid-row: 1;
  align-self: center;
  transform: translateY(var(--alert-dot-nudge));
}

/* Håller ihop alertens ram även om innehåll i .msg innehåller egna marginaler */
.k-alert{
  overflow: clip;
}

/* =========================================================
   Status-prickar (k-dot) -- dots only, no tinted backgrounds
   LÄGG SIST i filen så att den alltid vinner över neutrala .k-dot-regler
   ========================================================= */

.k-dot{
  background: var(--border); /* neutral default */
}

/* När klassen ligger på prick-elementet: <span class="k-dot info"> */
.k-dot.info{ background: var(--info); }
.k-dot.ok{ background: var(--ok); }
.k-dot.warn{ background: var(--warn); }
.k-dot.err{ background: var(--err); }

/* Om någon variant använder behållare-klass: <div class="k-alert info"><span class="k-dot"> */
.k-alert.info .k-dot{ background: var(--info); }
.k-alert.ok   .k-dot{ background: var(--ok); }
.k-alert.warn .k-dot{ background: var(--warn); }
.k-alert.err  .k-dot{ background: var(--err); }

/* Äldre variant dot-klass om den används i markup */
.k-alert.info .dot{ background: var(--info); }
.k-alert.ok   .dot{ background: var(--ok); }
.k-alert.warn .dot{ background: var(--warn); }
.k-alert.err  .dot{ background: var(--err); }

/* =========================================================
   SOURCE: components/12-chips.css
========================================================= */

/* Kvikr UI – Components: 12 Chips
   Källa: /ui/css/components/12-chips.css
*/

/* =========================
   Chips (etiketter)
========================= */

.k-chips{
  display:flex;
  flex-wrap:wrap;

  gap:8px;
  row-gap:6px;          /* bättre vertikal rytm */

  align-items:center;

  line-height:1;        /* stabil radlayout */
  max-width: 100%;
}

/* =========================
   Ikoner i chips
========================= */

.k-chip .k-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
}

.k-chip svg{
  width:14px;
  height:14px;
  display:block;
}

.k-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:6px;

  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--chip-text);

  border-radius:999px;

  padding:3px 10px;

  font-size:var(--fs-sm);
  font-weight:var(--fw-body);

  line-height:1;           /* stabil höjd */
  white-space:nowrap;      /* chips bryts inte */
}

/* markerad etikett i chip */

.k-chip strong{
  font-weight:var(--fw-strong);
  font-size:var(--fs-xs);
  color:var(--muted);
  letter-spacing:.02em;
}

/* accentvariant */

.k-chip.accent{
  border-color:var(--chip-border-accent);
}

.k-chip.accent strong{
  color:var(--accent);
}

/* ========================================
   Chip statusvarianter
   ======================================== */

.k-chip-ok{
  background:var(--chip-ok-bg);
  color:var(--chip-ok-text);
  border-color:var(--chip-ok-border);
}

.k-chip-bad{
  background:var(--chip-bad-bg);
  color:var(--chip-bad-text);
  border-color:var(--chip-bad-border);
}

/* Etiketter / etiketter – border ska aldrig kunna bli "tom" */
.k-chip{
  border: 1px solid var(--ctrl-border);
}

.k-chip:hover{
  border-color: var(--ctrl-border-hover);
}

/* =========================================================
   SOURCE: components/13-tables.css
========================================================= */

/* Kvikr UI – Components: 13 Tables
   Källa: /ui/css/components/13-tables.css
*/

/* =========================
   Tabeller
   - Undvik onödig scroll
   - Tillåt wrapping
   - Klassbaserad justering (num/right/center)
========================= */

.k-table-wrap{
  overflow:auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--wrap-bg);           /* variabel */
}

table.k-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;          /* mer naturligt */
}

/* Om du vill tvinga fixed-läge per tabell: <table class="k-table fixed"> */
table.k-table.fixed{ table-layout: fixed; }

.k-table th,
.k-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: normal;         /* <-- viktigt: låt text brytas */
}

.k-table thead th{
  background: var(--panel2);
  color: var(--muted);
  font-weight: var(--fw-label);
  font-size: var(--fs-sm);
}

.k-table tbody tr:last-child td{
  border-bottom: 0;
}

/* Kod i tabell: tillåt brytning om det behövs */
.k-table code{
  white-space: normal;
  word-break: break-word;
}

/* Fixed-läge: ellipsis när det blir trångt */
.k-table.fixed th,
.k-table.fixed td{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kolumnjustering */
.k-table .left{ text-align:left; }
.k-table .center{ text-align:center; }
.k-table .right{ text-align:right; }

.k-table .num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   SOURCE: components/14-pagination.css
========================================================= */

/* Kvikr UI – Components: 14 Pagination
   Källa: /ui/css/components/14-pagination.css
*/

/* =========================
   Paginering
========================= */

.k-pagination{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}

.k-pagination .k-page,
.k-pagination .k-page:link,
.k-pagination .k-page:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--page-border);
  background: var(--page-bg);
  color: var(--muted);
  text-decoration:none;
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
}

.k-pagination .k-page:hover{
  border-color: var(--btn-border-hover);
  color: var(--text);
}

.k-pagination .k-page[aria-current="page"],
.k-pagination .k-page[aria-current="page"]:link,
.k-pagination .k-page[aria-current="page"]:visited,
.k-pagination .k-page[aria-current="page"]:hover{
  color: var(--text) !important;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  border-color: var(--btn-border-focus);
  box-shadow: var(--shadow);
}

/* =========================================================
   SOURCE: components/15-empty.css
========================================================= */

/* Kvikr UI – Components: 15 Empty
   Källa: /ui/css/components/15-empty.css
*/

/* =========================
   Tomt läge
========================= */

.k-empty{
  border: 1px dashed var(--border);
  background: var(--panel2);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* =========================================================
   SOURCE: components/16-code.css
========================================================= */

/* Kvikr UI – Components: 16 Code
   Källa: /ui/css/components/16-code.css
*/

/* =========================
   Kodblock
   - Används i dokumentation och i appar där man vill visa kod/snuttar.
   - Kombinera gärna med .k-panel (se .k-panel + .k-code nedan)
========================= */

.k-code{
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: none;
}

.k-code-head{
  margin-bottom: 8px;
}

.k-code-title{
  font-size: var(--fs-sm);
}

.k-code pre{
  margin: 0;
  max-width: 100%;
  overflow: auto;
  font-size: var(--fs-code);
}

/* Kopiera-knapp: ska alltid se ut som knapp och vara läsbar i alla teman */
.k-code-copy.k-btn{
  color: var(--link);
}

.k-code-copy.k-btn:hover{
  border-color: var(--ctrl-border-hover);
}

/* Kodruta direkt efter panel: kännas som samma "kort" */
.k-panel + .k-code{
  margin-top: -1px !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

html[data-theme="dark"] .k-code{
  background: var(--dialog-bg);
  border-color: var(--dialog-border);
}

/* =========================================================
   SOURCE: components/17-media.css
========================================================= */

/* Kvikr UI – Components: 17 Media
   Källa: /ui/css/components/17-media.css
*/

/* =========================
   Media hjälpklasser
   - För bilder, video och embeds.
   - Håller media inom innehållsbredd och ger ett diskret, konsekvent “kort”-utseende.
========================= */

.k-media{
  display:block;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.k-media > img,
.k-media > video,
.k-media > iframe{
  display:block;
  width: 100%;
  height: auto;
}

/* Video/embed behållare: ger korrekt responsiv storlek.
   Använd: <div class="k-video"><iframe ...></iframe></div>
*/
.k-video{
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}

.k-video > iframe,
.k-video > video{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   SOURCE: components/18-blockquote.css
========================================================= */

/* Kvikr UI – Components: 18 Blockquote
   Källa: /ui/css/components/18-blockquote.css
*/

/* =========================
   Citat / blockquote
========================= */

blockquote,
.k-quote{
  margin: 0 12px var(--gap3);
  padding: 14px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0;
  box-shadow: var(--shadow);
  color: var(--text);
  font-style: italic;
}

blockquote p,
.k-quote p{
  margin: 0;
}

blockquote p + p,
.k-quote p + p{
  margin-top: .75em;
}

blockquote cite,
.k-quote cite,
.k-quote-cite{
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
}

blockquote cite::before,
.k-quote cite::before,
.k-quote-cite::before{
  content: "-- ";
}

.k-quote-compact{
  padding: 10px 12px;
  font-size: var(--fs-sm);
}

.k-quote-lg{
  padding: 18px 20px;
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.k-quote-center{
  text-align: center;
}

.k-quote-muted{
  border-left-color: var(--line);
  color: var(--muted);
}

.k-quote-accent{
  border-left-color: var(--accent);
}

.k-quote-plain{
  background: transparent;
  box-shadow: none;
}

/* =========================================================
   SOURCE: css/kvikr-ui-widgets.css
========================================================= */

/* Kvikr UI – Widgetar
   - Paginering, flikar, dragspel, modalfönster, tomt läge, sidemeny
   - Hjälpklasser
   - flytande knapp
   - Alla textstorlekar baseras på --fs (via base.css-variabler)
*/

/* Paginering */
.k-pagination{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size: var(--fs-sm);
}
.k-page{
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration:none;
}
.k-page:hover{ background: var(--panel2); text-decoration:none; }
.k-page[aria-current="page"]{
  border-color: var(--accent-border);
  background: var(--panel); /* ingen accentbakgrund */
}

/* Flikar
   - Standard: tydliga innehållsflikar
   - Variant: .k-tabs-segmented för mer kompakt växlare/navigation
*/

/* Flikar
   - Standard: klassiska innehållsflikar
   - Variant: .k-tabs-segmented för kompakt växlare
*/

.k-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
  border-bottom:1px solid var(--dialog-border);
  padding:0;
  margin:0 0 16px;
}

.k-tab{
  appearance:none;
  border:1px solid transparent;
  border-bottom:none;
  background:transparent;
  border-radius:12px 12px 0 0;
  padding:10px 16px 11px;
  cursor:pointer;
  font: var(--fw-strong) var(--fs-sm)/1.2 var(--font);
  color: var(--muted);
  text-decoration:none;
  position:relative;
  transition:
    color .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.k-tab:hover{
  color: var(--text);
  background: var(--tab-hover-bg);
}

.k-tab[aria-selected="true"]{
  color: var(--accent);
  background: var(--panel);
  border-color: var(--dialog-border);
  margin-bottom:-1px;
  z-index:1;
}

.k-tab:focus{
  outline:none;
  box-shadow:var(--focus);
}

.k-tabpanels .k-tabpanel{ display:none; }
.k-tabpanels .k-tabpanel.active,
.k-tabpanels .k-tabpanel.is-active{ display:block; }

/* Segmenterade flikar
   - Mer som växlarknappar/filter
*/

.k-tabs.k-tabs-segmented{
  gap:8px;
  align-items:center;
  border-bottom:0;
  margin-bottom:14px;
}

.k-tabs.k-tabs-segmented .k-tab{
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--panel);
  color: var(--text);
  padding:8px 14px;
  margin-bottom:0;
}

.k-tabs.k-tabs-segmented .k-tab:hover{
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--panel);
}

.k-tabs.k-tabs-segmented .k-tab[aria-selected="true"]{
  border-color: var(--accent-border);
  background: var(--panel);
  color: var(--accent);
}

@media (max-width: 640px){
  .k-tabs{
    gap:6px;
    margin-bottom:14px;
  }

  .k-tab{
    padding:9px 12px 10px;
  }

  .k-tabs.k-tabs-segmented .k-tab{
    padding:7px 12px;
  }
}

/* Dragspel */
.k-accordion{ display:grid; gap:10px; }
.k-acc-item{
  border:1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  overflow:hidden;
}
.k-acc-btn{
  width:100%;
  text-align:left;
  border:0;
  background: transparent;
  padding: 12px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color: var(--accent);
  font: var(--fs)/1.2 var(--font);
}
.k-acc-btn:hover{ background: var(--panel2); }
.k-acc-btn:focus{ outline:none; box-shadow:var(--focus); }
.k-acc-body{
  padding: 0 14px 12px 14px;
  color: var(--muted);
  display:none;
  font-size: var(--fs-sm);
}
.k-acc-item.open .k-acc-body{ display:block; }
.k-acc-item .chev{ color: var(--muted); font-size: var(--fs-sm); }

.k-acc-btn .chev{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: var(--accent);        /* var(--accent) */
  transform: rotate(0deg);
  transition: transform .15s ease;
}

/* Chevron i dragspel */
.k-acc-btn .chev{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;

  color: var(--accent);
  fill: var(--accent);
  stroke: var(--accent);

  transform: rotate(0deg);
  transition: transform .15s ease;
}

/* Öppet läge */
.k-acc-item.open .k-acc-btn .chev,
.k-acc-item.is-open .k-acc-btn .chev{
  transform: rotate(180deg);
}

/* När posten är öppen: peka upp */
.k-acc-item.open .k-acc-btn .chev{
  transform: rotate(180deg);
}

/* Dragspel – växlingsikon */

[data-k-disclosure-toggle]{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

/* rotera när öppet */
[data-k-disclosure].is-open [data-k-disclosure-toggle]::after{
  transform:rotate(180deg);
}

/* Modalfönster */
.k-modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: var(--overlay-bg);
  z-index: 50;
}
.k-modal.open{ display:flex; }
.k-modal.is-open{ display:flex; }
.k-modal-card{
  width:min(680px, 100%);
  background: var(--dialog-bg);
  border:1px solid var(--dialog-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.k-modal-head, .k-modal-foot{ padding: 14px 16px; }
.k-modal-head{
  border-bottom:1px solid var(--dialog-border);
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.k-modal-body{
  padding: 16px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.k-modal-foot{
  border-top:1px solid var(--dialog-border);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

/* Tomt läge */
.k-empty{
  border:1px dashed var(--border);
  background: var(--panel2);
  border-radius: 14px;
  padding: 16px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.k-empty strong{
  color: var(--text);
  font-size: var(--fs-md);
}

/* Sidebar menu */
.k-sidemenu{
  list-style:none; padding:0; margin:0;
  display:grid; gap:6px;
}
.k-sidemenu a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 9px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  color: var(--link);
  text-decoration:none;
  background: transparent;
  font-size: var(--fs-sm);
}
.k-sidemenu a:hover{
  background: var(--panel2);
  border-color: var(--border);
  text-decoration:none;
}
.k-sidemenu .hint{
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* TOC / innehållsförteckning: länkar ska vara länkar */
.k-toc a,
.k-sidemenu a,
.k-sidebar a{
  color: var(--link);
}

.k-toc a:hover,
.k-sidemenu a:hover,
.k-sidebar a:hover{
  text-decoration: underline;
}

/* Hjälpklasser */
.k-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.k-split{ display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.k-hr{ height:1px; background: var(--border); margin: 12px 0; }

/* =========================================================
   Floating Action Button (flytande knapp) – rund flytande knapp
   ========================================================= */
.k-fab{
  position: fixed;
  right: var(--fab-gap);
  bottom: var(--fab-gap);
  z-index: 60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.k-fab-main{
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 999px;
  border: 1px solid var(--accent-border-strong);
  background: var(--panel);
  box-shadow: var(--shadow-fab-strong);
  display:grid;
  place-items:center;
  cursor:pointer;
  color: var(--accent);
  user-select:none;
}
.k-fab-main:hover{ background: var(--panel2); }
.k-fab-main:focus{
  outline:none;
  box-shadow: var(--focus), var(--shadow-fab-strong);
}
.k-fab-main svg{ width: 22px; height: 22px; }

.k-fab-menu{
  display:none;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
.k-fab.open .k-fab-menu{ display:flex; }

.k-fab-item{
  display:flex;
  align-items:center;
  gap:10px;
}

.k-fab-label{
  background: var(--dialog-bg);
  border:1px solid var(--dialog-border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-fab);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.k-fab-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-fab);
  cursor:pointer;
  display:grid;
  place-items:center;
  color: var(--accent);
}
.k-fab-btn:hover{ background: var(--panel2); }
.k-fab-btn:focus{ outline:none; box-shadow:var(--focus); }
.k-fab-btn svg{ width:18px; height:18px; }

@media (max-width: 520px){
  :root{ --fab-gap: 12px; --fab-size: 52px; }
}

/* =========================================================
   Secondary Floating Button (Toggle Background)
   ========================================================= */

.k-fab-secondary{
  position: fixed;
  right: var(--fab-gap);
  bottom: calc(var(--fab-gap) + var(--fab-size) + 12px);
  z-index: 60;
}

.k-fab-secondary-btn{
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-fab-strong);
  cursor:pointer;
  overflow:hidden;
  padding:0;
  display:block;
}

.k-fab-secondary-btn img{
  width:100%;
  height:100%;
  object-fit:cover;   /* fyll hela knappen */
  display:block;
}

.k-fab-secondary-btn:focus{
  outline:none;
  box-shadow: var(--focus), var(--shadow-fab-strong);
}

.k-fab-secondary-btn:hover{
  background: var(--panel2);
}


/* =========================================================
   Kvikr UI JS – komponenter (kvikr-ui.js)
   - Tooltip och toast (utöver befintliga widgetar)
   - Obs: Position (left/top) sätts av JS, resten här.
========================================================= */

/* Tooltip (hjälpruta) */
.k-tooltip-pop{
  position: fixed;
  z-index: 9999;
  max-width: 420px;
  width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow2);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

/* Toast */
#kToasts{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: grid;
  gap: 10px;
}

.k-toast{
  min-width: 260px;
  max-width: 360px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow2);
}

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

.k-toast-title{
  font-weight: var(--fw-label);
  font-size: var(--fs-sm);
}

.k-toast-body{
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.35;
}