/* =========================================================
   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-bold); }

/* 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-page{
  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(--accent);
  text-decoration:none;
  font-weight: var(--fw-label);
  font-size: var(--fs-sm);
}

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

.k-page[aria-current="page"]{
  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;
}