/* Kvikr UI – Base
   - Typsnitt + variabler + grundtypografi + sidlayout
   - Alla textstorlekar styrs av --fs (grundstorlek)
*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Ubuntu+Condensed&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-semibold);
    --fw-label: var(--fw-bold);
    --fw-heading: var(--fw-regular);
 
    /* 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);
}