/* Montserrat (AKEA-tema) — självhostad, laddas bara när ett tema faktiskt använder den */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/montserrat-700.woff2") format("woff2"); }

/* ---------- NEUTRAL (standardtema) ---------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --btn: #2563eb; --btn-dark: #1d4ed8; --btn-soft: #dbeafe;   /* knappar, länkar, fokus */
  --brand: #2563eb; --brand-soft: #dbeafe;                     /* statistik, aktiv meny, märkesaccent */
  --slate: #475569; --slate-2: #334155;                        /* sekundärknapp, topbar-text */
  --ink: #1a1a1a; --muted: #6b7280;
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f7f9fb; --hair: #e5e7eb;
  --ok: #16a34a; --ok-soft: #dcfce7;                           /* godkänt / success */
  --danger: #d0342c; --danger-dark: #b0241d; --warn: #c9770a;
  --heading-weight: 700; --heading-tracking: -0.01em;
  --shadow: 0 1px 3px rgba(20,25,35,0.06), 0 10px 24px -18px rgba(20,25,35,0.18);
}

/* ---------- AKEA-tema (override) ---------- */
body.theme-akea {
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --btn: #1032CF; --btn-dark: #0d29a8; --btn-soft: #e4e8fb;   /* AKEA action-blå */
  --brand: #149A39; --brand-soft: #e4f4ea;                     /* AKEA-grön */
  --slate: #4B5C69; --slate-2: #33424d;                        /* Eleda-skiffer */
  --ink: #141414;
}

* { box-sizing: border-box; }
body { font-family: var(--font); margin: 0; background: var(--bg); color: var(--ink); line-height: 1.55; }

/* ---------- Topbar ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-bottom: 1px solid var(--hair); padding: 0.6rem 1.25rem; position: sticky; top: 0; z-index: 20; }
.topbar .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; color: var(--ink); font-weight: 600; }
.topbar .brand-logo { height: 30px; width: auto; display: block; }
.topbar .brand-emoji { font-size: 1.4rem; line-height: 1; }
.topbar .brand-sub { color: var(--slate); font-weight: 600; font-size: 0.98rem; white-space: nowrap; }
.topbar .brand-sub.divided { padding-left: 0.7rem; border-left: 1px solid var(--hair); }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.8rem; }
.topbar nav a { color: var(--slate); text-decoration: none; font-weight: 500; font-size: 0.94rem; padding: 0.35rem 0.7rem; border-radius: 8px; }
.topbar nav a:hover { color: var(--btn); background: var(--surface-2); }
.topbar nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.topbar .who { color: var(--muted); font-size: 0.86rem; margin-right: 0.25rem; }
.topbar .who strong { color: var(--slate); font-weight: 600; }
@media (max-width: 560px) { .topbar .brand-sub { display: none; } .topbar .who { display: none; } }

main { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; overflow-x: auto; }
h1 { margin-top: 0; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
h2 { margin-top: 0.25rem; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
h3 { font-weight: 600; }
a { color: var(--btn); text-decoration: none; }
a:hover { text-decoration: underline; }

label { display: block; font-weight: 550; margin-top: 0.85rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=url], textarea, select {
  width: 100%; padding: 0.58rem 0.65rem; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; background: var(--surface); margin-top: 0.25rem; color: var(--ink); font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--btn); box-shadow: 0 0 0 3px var(--btn-soft); }
input[type=file] { margin-top: 0.5rem; }
textarea { min-height: 4rem; }

.btn { display: inline-block; background: var(--btn); color: #fff; padding: 0.58rem 1.15rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; }
.btn:hover { background: var(--btn-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--btn-soft); outline-offset: 2px; }
.btn.secondary { background: var(--slate); }
.btn.secondary:hover { background: var(--slate-2); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: var(--danger-dark); }
.btn.brand { background: var(--brand); }
.btn.small { padding: 0.32rem 0.72rem; font-size: 0.85rem; }

.flex { display: flex; gap: 0.75rem; align-items: center; }
.muted { color: var(--muted); font-size: 0.9rem; }
a:focus-visible, .copy-link:focus-visible { outline: 3px solid var(--btn-soft); outline-offset: 2px; border-radius: 4px; }

.error { background: #fdecec; color: #9a2820; padding: 0.75rem 0.9rem; border: 1px solid #f6cfcb; border-radius: 8px; margin-bottom: 1rem; }
.success { background: var(--ok-soft); color: #0c5c2c; padding: 0.75rem 0.9rem; border: 1px solid #bfe6cd; border-radius: 8px; margin-bottom: 1rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { background: var(--surface-2); color: var(--slate); font-size: 0.9rem; }

.doc-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 0.6rem; align-items: start; padding: 0.6rem 0.8rem; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; margin-bottom: 0.5rem; }
.doc-row .handle { color: #9aa4b2; user-select: none; cursor: move; font-size: 1.1rem; padding-top: 0.4rem; }
.doc-row.dragging { opacity: 0.4; }
.doc-row .doc-fields { display: flex; flex-direction: column; gap: 0.35rem; }
.doc-row input { margin-top: 0; }

.drop-zone { border: 2px dashed #b6c0cc; border-radius: 10px; padding: 1.5rem; text-align: center; color: var(--muted); background: var(--surface-2); margin-bottom: 0.75rem; transition: background 0.15s, border-color 0.15s; }
.drop-zone.hover { background: var(--btn-soft); border-color: var(--btn); color: var(--btn-dark); }

.ack-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--hair); border-radius: 8px; margin-bottom: 0.5rem; background: var(--surface-2); }
.ack-item input[type=checkbox] { margin-top: 0.25rem; transform: scale(1.2); accent-color: var(--btn); }
.ack-item .doc-link { font-weight: 550; }

.pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; background: #e6ebf0; color: var(--slate); }
.pill.green { background: var(--ok-soft); color: #0c5c2c; }

.copy-link { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; background: var(--surface-2); border: 1px solid var(--hair); padding: 0.3rem 0.5rem; border-radius: 6px; word-break: break-all; display: inline-block; cursor: pointer; }
.copy-link:hover { background: var(--btn-soft); }
.copy-link[data-copied]::after { content: " ✓ kopierad"; color: var(--ok); font-weight: 600; }

hr { border: none; border-top: 1px solid var(--hair); margin: 1.5rem 0; }

/* Dashboard-statistik */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.stat { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow); text-align: center; }
.stat-num { font-size: 2rem; font-weight: 750; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.stat-bad .stat-num { color: var(--danger); }
.stat-warn .stat-num { color: var(--warn); }

/* Kompakt detaljrad i inlämningslistan — full text visas vid hovring */
.detail-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; color: var(--muted); font-size: 0.85rem; cursor: help; }