/* components.css — de DELADE komponenterna för alla ACME-sidor (index, chat, nsquery, dump-file).
   Bygg en komponent EN gång här — aldrig en egen variant i en sida. Färger/skalor: tokens.css.
   Sidans egen layout hör hemma i sidans css-fil (app.css, chat.css …), inte här. Se systemdok §22. */

/* ─── Grund — alla sidor ─── */
body { font-family: var(--font-ui); }

/* ─── Fält — EN stil. Fält i dialoger får den automatiskt; annars class="input". ─── */
.input, .modal input, .modal select, .modal textarea { width: 100%; padding: 8px 12px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-family: inherit; font-size: var(--fs-md); }
.input:focus { outline: none; border-color: var(--accent); }

/* ─── Tabell — EN stil för datatabeller (Admin, nsquery, dump-file). Markdown-tabeller i Docs är brödtext. ─── */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--fs-md); vertical-align: middle; }
.table th { color: var(--text2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.table td.actions { white-space: nowrap; text-align: right; }   /* åtgärdskolumn: förblir en riktig tabellcell */
.table td.actions > * + * { margin-left: 8px; }

/* ─── Knappar — EN familj. Välj efter BETYDELSE; skriv aldrig en egen knappstil eller inline-färg. ───
   primary = huvudåtgärd · secondary = vanlig · danger = radera/farligt · ok = godkänn/kör · dashed = lägg till
   Modifierare: btn-sm (tät), btn-block (full bredd). Flikar = .tabs/.tab (nedan); segmentväxlaren doc-sort-btn är Docs-layout. */
.btn-primary, .btn-secondary, .btn-danger, .btn-ok, .btn-dashed {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer;
  font-size: var(--fs-sm); font-family: inherit; line-height: 1.2; transition: background .12s, border-color .12s, color .12s;
}
:is(.btn-primary, .btn-secondary, .btn-danger, .btn-ok, .btn-dashed):disabled { opacity: .55; cursor: default; }
.btn-danger { background: var(--bg3); color: var(--red); border-color: var(--border); }
.btn-danger:hover { background: rgba(239,68,68,.15); border-color: var(--red); }
.btn-ok { background: var(--green); color: var(--bg); font-weight: 600; }   /* mörk text: vit på grönt = 2.3:1 */
.btn-ok:hover { filter: brightness(1.1); }
.btn-dashed { background: none; color: var(--text2); border: 1px dashed var(--border); }
.btn-dashed:hover { color: var(--accent2); border-color: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* ─── Kort — EN yta för paneler och rutor. Komponentklassen (si-card, tool-card …) bär bara layout. ─── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; }

/* ─── Märkning — TVÅ komponenter: chip = neutral info, badge = status. Färg via ton, aldrig egen färg. ─── */
.chip, .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); line-height: 1.5; white-space: nowrap; background: var(--bg3); color: var(--text2); }
.badge { font-weight: 600; }
.tone-ok { background: var(--green-soft); color: var(--green); }
.tone-warn { background: var(--orange-soft); color: var(--orange); }
.tone-danger { background: var(--red-soft); color: var(--red); }
.tone-info { background: var(--blue-soft); color: var(--blue); }
.tone-accent { background: var(--accent-soft); color: var(--accent2); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent2); }
.btn-secondary { background: var(--bg3); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }

/* ─── Hjälpklasser — EN liten uppsättning i stället för inline-stil. Färg/storlek ur tokens.
   !important med flit: en hjälpklass ersätter inline-stil och ska vinna som den gjorde (annars slår
   t.ex. `.modal textarea` ut `.mono`). Använd dem bara där inline-stil annars hade stått.
   En egenskap som JS ändrar (style.color/display) bor kvar inline — ge den inte en hjälpklass. ─── */
.muted { color: var(--text2) !important; }
.text-danger { color: var(--red) !important; }
.text-accent { color: var(--accent) !important; }
.text-xs { font-size: var(--fs-xs) !important; }
.text-sm { font-size: var(--fs-sm) !important; }
.text-md { font-size: var(--fs-md) !important; }
.mono { font-family: var(--font-mono) !important; }
.hint { color: var(--text2) !important; font-weight: 400 !important; }   /* förklarande text i en etikett */
.grow { flex: 1 !important; }
.row { display: flex; align-items: center !important; gap: 8px !important; }   /* display utan !important: JS ska kunna dölja med style.display */
.wrap { flex-wrap: wrap !important; }

/* Fokus (a11y): synlig ring när man navigerar med tangentbord — EN regel för allt interaktivt. */
:is(button, a, [tabindex], select, textarea, input):focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Toast (api()-fel m.m.) */
#toast-box{position:fixed;left:16px;bottom:16px;z-index:100000;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:10px 12px;font-size:var(--fs-md);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.toast-error{border-left-color:var(--red)}

/* ─── Flikar — EN komponent (People-undermeny, dialogflikar, nsquery). .tabs = raden, .tab = knappen. ─── */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text2); cursor: pointer;
  padding: 8px 16px; font-family: inherit; font-size: var(--fs-md); font-weight: 500; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent2); border-bottom-color: var(--accent2); }

/* ─── Tomt läge (inga rader, laddar, låst, fel i listan) — EN look på alla sidor. Fel: + text-danger ─── */
.empty, .table td.empty { color: var(--text2); font-size: var(--fs-md); text-align: center; padding: 20px 8px; }   /* även som tabellcell */

/* ─── Verktygssidor (nsquery, dump-file): sidram + tack-spärr — EN gång, inte en kopia per sida ─── */
.tool-page { margin: 0; background: var(--bg); color: var(--text); }   /* samma textgrund som appen — ingen egen storlek */
.page { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }
.page-title { font-size: var(--fs-4xl); margin: 0 0 4px; }
.page-sub { color: var(--text2); font-size: var(--fs-md); margin: 0 0 20px; }
.thanks { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.thanks label { font-weight: 600; font-size: var(--fs-base); }
.thanks .input { width: auto; min-width: 180px; }
.thanks .input.good { border-color: var(--green); }
.thanks .input.bad { border-color: var(--red); }
.tick { font-weight: 700; }
.tick.good { color: var(--green); }
.tick.bad { color: var(--red); }

/* ─── Varumärket (ljust: inloggning, /chat) — EN knapp och ETT fält, alltid i ACME-rösten ─── */
.btn-brand, .btn-brand-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 52px; padding: 0 22px; border: 3px solid var(--brand-ink); border-radius: var(--r-lg);
  font-family: var(--font-brand); font-size: var(--fs-lg); letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer; box-shadow: 3px 3px 0 var(--brand-ink); transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.btn-brand { background: var(--brand-red); color: #fff; }
.btn-brand-ghost { background: #fff; color: var(--brand-ink); }
:is(.btn-brand, .btn-brand-ghost):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--brand-ink); }
:is(.btn-brand, .btn-brand-ghost):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--brand-ink); }
:is(.btn-brand, .btn-brand-ghost):disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--brand-ink); }
.input-brand { width: 100%; background: #fff; color: var(--brand-ink); border: 3px solid var(--brand-ink); border-radius: var(--r-lg);
  padding: 12px 14px; font-family: inherit; font-size: var(--fs-lg); outline: none; transition: box-shadow .12s; }
.input-brand::placeholder { color: var(--brand-muted); }
.input-brand:focus { box-shadow: 3px 3px 0 var(--brand-ink); }