/*
  Buildable komponenter, version 1. Kräver buildable-variables.css.
  Prefix bd- på alla klasser så att filen inte krockar med systemens egen CSS.
*/

.bd-body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--text-md)/var(--leading) var(--font-ui);
  -webkit-text-size-adjust: 100%;
}
.bd-body *, .bd-body *::before, .bd-body *::after { box-sizing: border-box; }
.bd-body a:not(.bd-btn) { color: var(--accent); }
.bd-body :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Typografi */
.bd-h1 { font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -.04em; font-weight: var(--weight-bold); margin: 0 0 var(--space-4); }
.bd-h2 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -.03em; font-weight: var(--weight-bold); margin: 0 0 var(--space-3); }
.bd-h3 { font-size: var(--text-lg); line-height: 1.25; font-weight: var(--weight-medium); margin: 0 0 var(--space-2); }
.bd-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.bd-lead { font-size: var(--text-lg); color: var(--ink-2); max-width: 46rem; }
.bd-muted { color: var(--ink-2); }
.bd-mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
.bd-mark { text-decoration: underline; text-decoration-color: var(--highlight); text-decoration-thickness: .2em; text-underline-offset: -.08em; }

/* Layout */
.bd-shell { width: min(var(--shell), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.bd-shell.narrow { width: min(var(--shell-narrow), calc(100% - 2 * var(--gutter))); }
.bd-section { padding-block: var(--space-8); }
.bd-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.bd-stack > * + * { margin-top: var(--space-4); }
.bd-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Sidhuvud: logotyp alltid uppe till vänster, kundens namn eller sidtitel bredvid, åtgärder och temaväxlare till höger */
.bd-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.bd-header .bd-shell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 68px; }
.bd-logo { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-bold); color: var(--ink); text-decoration: none; }
.bd-logo img, .bd-logo svg { height: 32px; width: auto; display: block; }
.bd-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; }
.bd-nav a { color: var(--ink); font-weight: var(--weight-medium); text-decoration: none; min-height: var(--control-height); display: inline-flex; align-items: center; }
.bd-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }

/* Knappar: en primär per vy */
.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 var(--space-4);
  border-radius: var(--radius-sm); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: var(--weight-bold); text-decoration: none; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.bd-btn:hover { background: var(--accent-hover); }
.bd-btn.secondary { background: var(--surface); color: var(--accent); border-color: var(--line-strong); box-shadow: none; }
.bd-btn.secondary:hover { background: var(--accent-soft); }
.bd-btn.ghost { background: transparent; color: var(--ink); border-color: transparent; box-shadow: none; }
.bd-btn.danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.bd-btn:disabled, .bd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Kort */
.bd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.bd-card.raised { box-shadow: var(--shadow-2); }
.bd-card.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Etiketter och statusrutor */
.bd-badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-bold); background: var(--info-soft); color: var(--info); }
.bd-badge.ok { background: var(--ok-soft); color: var(--ok); }
.bd-badge.warn { background: var(--warn-soft); color: var(--warn); }
.bd-badge.bad { background: var(--bad-soft); color: var(--bad); }
.bd-alert { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--info-soft); color: var(--info); border: 1px solid transparent; }
.bd-alert.ok { background: var(--ok-soft); color: var(--ok); }
.bd-alert.warn { background: var(--warn-soft); color: var(--warn); }
.bd-alert.bad { background: var(--bad-soft); color: var(--bad); }

/* Formulär */
.bd-field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.bd-label { font-weight: var(--weight-medium); }
.bd-hint { font-size: var(--text-xs); color: var(--ink-2); }
.bd-input, .bd-select, .bd-textarea {
  width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--ink); font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.bd-textarea { min-height: 7rem; resize: vertical; }
.bd-input[aria-invalid="true"] { border-color: var(--bad); }
.bd-error { color: var(--bad); font-size: var(--text-xs); }

/* Tabeller */
.bd-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.bd-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bd-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); background: var(--surface-2); }
.bd-table th, .bd-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.bd-table tbody tr:last-child td { border-bottom: 0; }
.bd-table tbody tr:hover { background: var(--accent-soft); }
.bd-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tomt läge: ikon eller illustration, en rubrik, en mening och en åtgärd */
.bd-empty { text-align: center; padding: var(--space-7) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-2); }
.bd-empty .bd-h3 { color: var(--ink); }

/* Sidfot och temaväxlare */
.bd-footer { padding-block: var(--space-6); color: var(--ink-2); font-size: var(--text-xs); border-top: 1px solid var(--line); }
.bd-theme-toggle { min-height: var(--control-height); min-width: var(--control-height); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }

@media (max-width: 640px) {
  .bd-btn { width: 100%; }
  .bd-section { padding-block: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .bd-btn { transition: none; } }

/* Appskal: mörkt toppfält, sidomeny och ikonkort (efter Qflow CV-konceptet) */
.bd-topbar { background: color-mix(in oklab, var(--kund-accent) 78%, #000); color: #fff; }
.bd-topbar .bd-shell { display: flex; align-items: center; gap: var(--space-4); min-height: 48px; }
.bd-topbar a { color: #fff; text-decoration: none; font-weight: var(--weight-medium); }
.bd-app { display: grid; grid-template-columns: 220px 1fr; min-height: 60vh; }
.bd-sidenav { border-right: 1px solid var(--line); padding: var(--space-4) var(--space-3); display: grid; align-content: start; gap: var(--space-1); }
.bd-sidenav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: var(--text-sm); }
.bd-sidenav a[aria-current="page"] { background: var(--surface-2); font-weight: var(--weight-medium); box-shadow: inset 3px 0 0 var(--accent); }
.bd-iconcard { display: grid; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); text-decoration: none; color: var(--ink); }
.bd-iconcard:hover { box-shadow: var(--shadow-2); }
.bd-iconcard .icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--info-soft); color: var(--info); }
.bd-iconcard .icon.ok { background: var(--ok-soft); color: var(--ok); }
.bd-iconcard .icon.warn { background: var(--warn-soft); color: var(--warn); }
.bd-iconcard .icon.bad { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 800px) { .bd-app { grid-template-columns: 1fr; } .bd-sidenav { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; overflow-x: auto; } }
/* Små former från Qflow CV-mockupen: chips, avatarer, brödsmulor, listrader */
.bd-chip { display: inline-block; padding: 2px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); background: var(--info-soft); color: var(--info); }
.bd-chip.ok { background: var(--ok-soft); color: var(--ok); }
.bd-avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.bd-breadcrumb { font-size: var(--text-xs); color: var(--ink-2); margin-bottom: var(--space-3); }
.bd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bd-list li { display: flex; align-items: center; gap: var(--space-3); }
.bd-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 800px) { .bd-two-col { grid-template-columns: 1fr; } }
.bd-badge.attention, .bd-chip.attention { background: var(--accent-2-soft); color: var(--accent-2); }
.bd-alert.attention { background: var(--accent-2-soft); color: var(--accent-2); }

/* Hamburgermeny utan JavaScript (checkbox), för smal skärm. Kräver .bd-menu-toggle, .bd-burger och .bd-nav direkt i .bd-shell. */
.bd-header .bd-shell { position: relative; }
.bd-menu-toggle { display: none; }
.bd-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.bd-burger i, .bd-burger i::before, .bd-burger i::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ""; }
.bd-burger i::before { position: absolute; top: -6px; }
.bd-burger i::after { position: absolute; top: 6px; }
.bd-menu-toggle:focus-visible + .bd-burger { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 1040px) {
  .bd-header .bd-shell { flex-wrap: wrap; row-gap: 0; }
  .bd-menu-toggle { display: block; position: absolute; opacity: 0; width: 40px; height: 40px; margin: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .bd-burger { display: inline-flex; margin-left: auto; }
  .bd-menu-toggle ~ .bd-nav { display: none; order: 9; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--space-3); }
  .bd-menu-toggle:checked ~ .bd-nav { display: flex; }
  .bd-menu-toggle ~ .bd-nav a { border-top: 1px solid var(--line); }
}
/* Primärknappen som länk: länkfärgen får inte vinna över knappens textfärg */
.bd-body a.bd-btn { color: var(--accent-ink); text-decoration: none; }
.bd-body a.bd-btn.secondary { color: var(--accent); }
.bd-body a.bd-btn.ghost { color: var(--ink); }
.bd-body a.bd-btn.danger { color: var(--surface); }

/* Temaväxlare: ikon i hörnet på bred skärm, rad med text i menyn på mobil */
.bd-theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); }
.bd-theme-icon { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); display: inline-block; }
.bd-theme-label { display: none; }
@media (max-width: 1040px) {
  .bd-theme-toggle { width: 100%; justify-content: flex-start; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: transparent; min-height: 48px; }
  .bd-theme-label { display: inline; }
}
.bd-logo { white-space: nowrap; }
.bd-header .bd-nav { flex-wrap: nowrap; gap: var(--space-1) var(--space-4); margin-left: auto; font-size: var(--text-sm); }
.bd-header .bd-nav a { white-space: nowrap; }
.bd-header .bd-shell { gap: var(--space-5); }

/* Underfält under sidhuvudet, t.ex. inloggad användare och Logga ut */
.bd-subbar { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.bd-subbar .bd-shell { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); min-height: 48px; }
.bd-subbar form { margin: 0; }