/* =====================================================================
   Digno – enkelt designsystem
   Regler: vit yta, en kolumn, inga lådor i lådor. Struktur skapas med
   typografi, luft och tunna linjer – inte med ramar och kort.
   ===================================================================== */

@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../lib/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../lib/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --side: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f9f9f7;
  --surface-sunken: #f2f2ef;
  --line: #ececea;
  --line-strong: #d9d9d4;
  --ink: #1a1a1c;
  --ink-2: #3f3f46;
  --muted: #74747c;
  --faint: #a6a6ad;

  --accent: #0f5f5a;
  --accent-hover: #0b4d49;
  --accent-soft: #e7f1ef;

  --new: #a15c07;       --new-bg: #fdf3e1;
  --planned: #3b55a3;   --planned-bg: #edf1fb;
  --progress: #0f5f5a;  --progress-bg: #e4f0ee;
  --done: #2f7a3b;      --done-bg: #e9f4ea;
  --dismissed: #6b6b72; --dismissed-bg: #f0f0f0;
  --danger: #b42318;    --danger-bg: #fdecea;

  --radius: 10px;
  --shadow-pop: 0 12px 40px rgba(20, 20, 24, .14), 0 2px 6px rgba(20, 20, 24, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 15, 95, 90;
  --bs-link-hover-color: var(--accent-hover);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 15, 95, 90;
  --bs-focus-ring-color: rgba(15, 95, 90, .25);
}

body { font-family: var(--bs-body-font-family); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, .h1 { font-size: 1.65rem; font-weight: 650; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
h2, .h2 { font-size: 1rem; font-weight: 620; margin: 0; }
.muted { color: var(--muted) !important; }
.faint { color: var(--faint) !important; }
.small, small { font-size: .85em; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; }
.tabular { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-pre, .prose { white-space: pre-line; overflow-wrap: anywhere; }
.prose { font-size: 1rem; line-height: 1.6; }
.text-danger { color: var(--danger) !important; }
.overdue { color: var(--danger) !important; }
[data-lucide], .lucide { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; vertical-align: -.2em; }
.icon-sm { width: 15px !important; height: 15px !important; }
.icon-lg { width: 22px !important; height: 22px !important; }
kbd { font-family: inherit; font-size: .7rem; color: var(--muted); background: var(--surface-sunken); border-radius: 4px; padding: 1px 5px; box-shadow: none; }

/* ---------- Skal ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px 14px; background: var(--side); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.brand-name { font-weight: 680; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.1; }
.brand-org { font-size: .74rem; color: var(--muted); line-height: 1.2; }
.btn-report { width: 100%; margin-bottom: 14px; }
.nav-link-d { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.nav-link-d:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.nav-link-d.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.nav-link-d.active [data-lucide], .nav-link-d.active .lucide { color: var(--accent); }
.nav-link-d .count { margin-left: auto; font-size: .72rem; font-weight: 650; color: #fff; background: var(--new); border-radius: 20px; padding: 0 7px; line-height: 18px; }
.sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); width: 100%; border: 0; background: none; text-align: left; }
.user-chip:hover { background: rgba(0,0,0,.04); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-2); display: inline-grid; place-items: center; font-size: .72rem; font-weight: 650; flex-shrink: 0; }
.avatar-sm { width: 22px; height: 22px; font-size: .62rem; }

.main { flex: 1; min-width: 0; }
.content { padding: 36px 48px 80px; max-width: 920px; }
.content-wide { max-width: none; padding-right: 32px; }

/* Sidhuvud: rubrik + en huvudknapp + ev. meny */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.page-head .sub, .meta-line { color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .92rem; }
.meta-line a { color: var(--ink-2); }
.meta-line a:hover { color: var(--accent); }
.page-actions { display: flex; gap: 8px; align-items: center; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.back:hover { color: var(--ink); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--faint); }

/* Sektioner: bara rubrik + innehåll, ingen ram */
.sec { margin-top: 36px; }
.sec-title { display: flex; align-items: baseline; gap: 10px; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.sec-title .n { color: var(--faint); font-weight: 600; }
.sec-title a, .sec-title .act { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 550; }
.sec-title.danger { color: var(--danger); }
.sec-text { color: var(--ink-2); }

/* Rader */
.list { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); min-height: 60px; }
.list > :last-child.list-row, .list > :last-child > .list-row { border-bottom: 0; }
a.list-row:hover, .list-row.hover:hover { color: var(--ink); background: linear-gradient(90deg, transparent, var(--surface-2) 6%, var(--surface-2) 94%, transparent); }
.list-row .row-main { flex: 1; min-width: 0; }
.list-row .row-title { font-weight: 560; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .row-meta { font-size: .85rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .row-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--muted); font-size: .88rem; }
.obj-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-sunken); color: var(--ink-2); }
.obj-icon-lg { width: 46px; height: 46px; border-radius: 12px; }
.obj-icon-lg [data-lucide], .obj-icon-lg .lucide { width: 24px; height: 24px; }
.obj-icon.tone-accent { background: var(--accent-soft); color: var(--accent); }
.obj-icon.tone-new { background: var(--new-bg); color: var(--new); }
.obj-icon.tone-danger { background: var(--danger-bg); color: var(--danger); }
.obj-icon.tone-planned { background: var(--planned-bg); color: var(--planned); }
.obj-icon.tone-done { background: var(--done-bg); color: var(--done); }

/* Status */
.badge-s { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 20px; white-space: nowrap; color: var(--muted); background: var(--surface-sunken); }
.badge-s.s-new { color: var(--new); background: var(--new-bg); }
.badge-s.s-planned { color: var(--planned); background: var(--planned-bg); }
.badge-s.s-progress { color: var(--progress); background: var(--progress-bg); }
.badge-s.s-done { color: var(--done); background: var(--done-bg); }
.badge-s.s-dismissed { color: var(--dismissed); background: var(--dismissed-bg); }
.badge-s.s-overdue { color: var(--danger); background: var(--danger-bg); }
.prio-high { color: #c2410c; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--ink-2); }

.date-tile { width: 42px; flex-shrink: 0; text-align: center; line-height: 1; }
.date-tile .dt-m { font-size: .64rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.date-tile .dt-d { font-size: 1.25rem; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }
.date-tile.overdue-tile .dt-m, .date-tile.overdue-tile .dt-d { color: var(--danger); }
.date-tile.today-tile .dt-m, .date-tile.today-tile .dt-d { color: var(--accent); }

/* Tomt / klart */
.calm { padding: 56px 0; text-align: center; color: var(--muted); }
.calm .calm-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--done-bg); color: var(--done); display: inline-grid; place-items: center; margin-bottom: 12px; }
.calm .calm-icon.neutral { background: var(--surface-sunken); color: var(--faint); }
.calm .calm-title { font-size: 1.1rem; font-weight: 620; color: var(--ink); }
.calm p { margin: 4px auto 0; max-width: 380px; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .empty-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-sunken); color: var(--faint); margin-bottom: 10px; }
.empty .empty-title { font-weight: 600; color: var(--ink-2); }
.empty p { margin: 4px auto 0; max-width: 380px; font-size: .9rem; }
.empty.compact { padding: 20px; }
.empty.good .empty-icon { background: var(--done-bg); color: var(--done); }

/* Flikar (text) */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 22px 0 6px; overflow-x: auto; }
.tabs a { padding: 10px 0; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabs a .n { color: var(--faint); font-weight: 500; margin-left: 4px; }
.tabs .tabs-search { margin-left: auto; align-self: center; padding-bottom: 6px; }

.search { position: relative; }
.search [data-lucide], .search .lucide { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; width: 16px; height: 16px; }
.search input { padding-left: 34px; }

/* ---------- Knappar ---------- */
.btn { --bs-btn-font-weight: 550; --bs-btn-padding-y: .48rem; --bs-btn-padding-x: .95rem; --bs-btn-font-size: .92rem; --bs-btn-border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); }
.btn-light, .btn-secondary { --bs-btn-color: var(--ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: #c9c9c3; --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: #c9c9c3; }
.btn-ghost { --bs-btn-color: var(--ink-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: transparent; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 8px; gap: 5px; }
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.3rem; --bs-btn-font-size: 1.02rem; --bs-btn-border-radius: 11px; }
.btn-icon { padding: 0; width: 36px; height: 36px; }
.btn-sm.btn-icon { width: 30px; height: 30px; }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); border-color: var(--accent); }

/* ---------- Formulär ---------- */
.form-label { font-weight: 560; font-size: .88rem; color: var(--ink-2); margin-bottom: 6px; }
.form-control, .form-select { border-radius: 9px; border-color: var(--line-strong); padding: .55rem .8rem; font-size: .95rem; color: var(--ink); }
.form-select { padding-right: 2.25rem; background-position: right .7rem center; }
.form-select-sm { padding-right: 2rem; }
.form-control::placeholder { color: var(--faint); }
textarea.form-control { min-height: 90px; resize: vertical; }
.form-text { color: var(--muted); font-size: .82rem; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); border-color: var(--accent); }
.form-switch .form-check-input { width: 2.2em; }
.field { margin-bottom: 18px; }
.optional { font-weight: 400; color: var(--faint); font-size: .8rem; margin-left: 4px; }
.form-error { display: none; align-items: flex-start; gap: 8px; color: var(--danger); background: var(--danger-bg); border-radius: 9px; padding: 10px 12px; font-size: .9rem; margin-bottom: 14px; }
.form-error.show { display: flex; }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: #fff; color: var(--ink); cursor: pointer; text-align: left; width: 100%; transition: border-color .12s, background .12s; }
.choice:hover { border-color: var(--accent); color: var(--ink); background: var(--surface-2); }
.choice .choice-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-2); flex-shrink: 0; }
.choice .choice-title { font-weight: 600; line-height: 1.3; }
.choice .choice-sub { font-size: .84rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.choice.tone-accent .choice-icon { background: var(--accent-soft); color: var(--accent); }
.choice.tone-planned .choice-icon { background: var(--planned-bg); color: var(--planned); }
.choice.tone-done .choice-icon { background: var(--done-bg); color: var(--done); }
.choice.tone-danger .choice-icon { background: var(--danger-bg); color: var(--danger); }
input.choice-radio { position: absolute; opacity: 0; pointer-events: none; }
input.choice-radio:checked + .choice { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--accent-soft); }
input.choice-radio:focus-visible + .choice { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }

.segmented { display: inline-flex; background: var(--surface-sunken); border-radius: 9px; padding: 3px; gap: 2px; }
.segmented a, .segmented label, .segmented button { border: 0; background: none; padding: 6px 13px; border-radius: 7px; font-size: .88rem; font-weight: 550; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.segmented a:hover, .segmented label:hover { color: var(--ink); }
.segmented .active, .segmented input:checked + label { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmented input { display: none; }

/* Gamla panelklasser (admin/plattform/modaler): platta, utan ram */
.panel { background: none; border: 0; }
.panel + .panel { margin-top: 28px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 6px; }
.panel-head h2 { display: flex; align-items: center; gap: 8px; }
.panel-head .count-pill { font-size: .78rem; color: var(--faint); }
.panel-body { padding: 8px 0; }
.panel-foot { padding: 12px 0 0; font-size: .88rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 8px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; }
.facts dt { color: var(--muted); font-weight: 450; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.table-d { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table-d th { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-strong); text-align: left; white-space: nowrap; }
.table-d td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-d tr:last-child td { border-bottom: 0; }
.table-d tbody tr.clickable { cursor: pointer; }
.table-d tbody tr.clickable:hover td { background: var(--surface-2); }
.table-d .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ---------- Objektträd ---------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 16px; margin-left: 12px; border-left: 1px solid var(--line); }
.tree-item { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.tree-item:hover { background: var(--surface-2); }
.tree-toggle { width: 26px; height: 26px; border: 0; background: none; color: var(--faint); display: grid; place-items: center; border-radius: 6px; padding: 0; flex-shrink: 0; }
.tree-toggle:hover { color: var(--ink); }
.tree-toggle [data-lucide], .tree-toggle .lucide { width: 15px; height: 15px; transition: transform .15s var(--ease); }
.tree-node.open > .tree-item .tree-toggle [data-lucide], .tree-node.open > .tree-item .tree-toggle .lucide { transform: rotate(90deg); }
.tree-node:not(.open) > ul { display: none; }
.tree-spacer { width: 26px; flex-shrink: 0; }
.tree-item a { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 8px 6px; flex: 1; min-width: 0; }
.tree-item a [data-lucide], .tree-item a .lucide { color: var(--muted); }
.tree-item a span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item a .code { color: var(--faint); font-size: .82rem; }
.tree-dot { font-size: .72rem; font-weight: 650; color: #fff; background: var(--new); border-radius: 20px; padding: 0 7px; line-height: 18px; margin-left: auto; margin-right: 8px; flex-shrink: 0; }
.tree.filtering .tree-node { display: none; }
.tree.filtering .tree-node.match, .tree.filtering .tree-node.match-parent { display: block; }
.tree.filtering .tree-node.match-parent > ul { display: block; }
.tree mark { background: #fbe9b7; padding: 0; border-radius: 2px; color: inherit; }

/* ---------- Bilder och filer ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery .g-item { position: relative; }
.gallery a.thumb { display: block; width: 112px; height: 112px; border-radius: 10px; overflow: hidden; background: var(--surface-sunken); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .g-del { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity .12s; }
.gallery .g-item:hover .g-del { opacity: 1; }
.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.files li:last-child { border-bottom: 0; }
.file-drop { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 14px; text-align: center; color: var(--muted); font-size: .88rem; cursor: pointer; display: block; }
.file-drop:hover, .file-drop.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.file-drop input { display: none; }
.photo-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-picker .ph { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; position: relative; }
.photo-picker .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-picker .ph button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; padding: 0; }
.photo-picker .ph button svg { width: 12px; height: 12px; }
.photo-add { width: 72px; height: 72px; border-radius: 10px; border: 1.5px dashed var(--line-strong); display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.photo-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.lightbox { position: fixed; inset: 0; background: rgba(15,15,17,.9); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- Tidslinje ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 30px; }
.timeline li::before { content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot { position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; color: var(--muted); }
.timeline .tl-dot [data-lucide], .timeline .tl-dot .lucide { width: 11px; height: 11px; }
.timeline .tl-head { font-size: .88rem; color: var(--muted); }
.timeline .tl-head strong { color: var(--ink); font-weight: 600; }
.timeline .tl-text { margin-top: 3px; white-space: pre-line; overflow-wrap: anywhere; }
.timeline .tl-comment .tl-text { background: var(--surface-2); border-radius: 0 10px 10px 10px; padding: 9px 12px; }
.timeline .k-done .tl-dot { color: var(--done); background: var(--done-bg); }
.timeline .k-start .tl-dot { color: var(--progress); background: var(--progress-bg); }
.timeline .k-plan .tl-dot { color: var(--planned); background: var(--planned-bg); }
.timeline .k-warn .tl-dot { color: var(--new); background: var(--new-bg); }
.comment-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; }
.comment-box textarea { min-height: 44px; height: 44px; transition: height .15s; }
.comment-box textarea:focus, .comment-box textarea.has-text { height: 90px; }

/* Statusrad på ärende/FU – en mening, ingen låda */
.state { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.state .state-text { flex: 1; min-width: 220px; }
.state .state-title { font-weight: 600; }
.state .state-sub { color: var(--muted); font-size: .9rem; }

/* ---------- FU-checklista ---------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.check-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.check-item:last-child { border-bottom: 0; }
.check-box { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-items: center; color: transparent; flex-shrink: 0; cursor: pointer; padding: 0; transition: all .12s; }
.check-box:hover { border-color: var(--accent); }
.check-box [data-lucide], .check-box .lucide { width: 18px; height: 18px; stroke-width: 2.6; }
.check-item.r-done .check-box { background: var(--done); border-color: var(--done); color: #fff; }
.check-item.r-deviation .check-box { background: var(--new); border-color: var(--new); color: #fff; }
.check-item.r-notdone .check-box { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--muted); }
.check-item.r-done .ci-title { color: var(--muted); }
.check-item .ci-main { flex: 1; min-width: 0; }
.check-item .ci-title { font-weight: 560; }
.check-item .ci-desc { font-size: .88rem; color: var(--muted); margin-top: 2px; white-space: pre-line; }
.check-item .ci-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: .84rem; }
.check-item .ci-meta a { color: var(--muted); }
.check-item .ci-actions { flex-shrink: 0; }
.check-item .ci-comment-text { font-size: .88rem; margin-top: 6px; color: var(--ink-2); }
.check-item.r-deviation .ci-comment-text { color: #8a4b05; }
.checklist-group { padding: 22px 0 4px; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.checklist-group:first-child { padding-top: 0; }
.progress-thin { height: 5px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; width: 90px; }
.progress-thin > span { display: block; height: 100%; background: var(--accent); }

.plan-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-item { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: var(--radius); background: var(--surface-2); }
.plan-item .pi-num { width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: .72rem; font-weight: 650; display: grid; place-items: center; color: var(--muted); flex-shrink: 0; margin-top: 8px; }
.plan-item .pi-fields { flex: 1; display: grid; gap: 6px; min-width: 0; }
.plan-item .pi-tools { display: flex; flex-direction: column; gap: 2px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunken); font-size: .74rem; font-weight: 650; color: var(--muted); display: grid; place-items: center; }

/* ---------- Objektväljare ---------- */
.picker { position: relative; }
.picker-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); max-height: 320px; overflow: auto; display: none; padding: 4px; }
.picker.open .picker-results { display: block; }
.picker-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.picker-option:hover, .picker-option.active { background: var(--surface-sunken); }
.picker-option .po-name { font-weight: 550; line-height: 1.25; }
.picker-option .po-path { font-size: .8rem; color: var(--muted); line-height: 1.25; }
.picker-selected { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius); }
.picker-selected .ps-name { font-weight: 600; }
.picker-selected .ps-path { font-size: .82rem; color: var(--muted); }
.picker.inline .picker-results { position: static; display: block; box-shadow: none; border: 0; padding: 0; max-height: 280px; margin-top: 8px; }

/* ---------- Modaler ---------- */
.modal { --bs-modal-border-radius: 16px; --bs-modal-padding: 24px; --bs-modal-header-padding: 22px 24px 4px; }
.modal-content { box-shadow: var(--shadow-pop); border: 0; }
.modal-header { border-bottom: 0; align-items: flex-start; }
.modal-title { font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; }
.modal-sub { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.modal-footer { padding: 14px 24px 20px; gap: 8px; border-top: 0; }
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #18181b; --bs-backdrop-opacity: .4; }
.modal-steps { display: flex; gap: 6px; margin-top: 12px; }
.modal-steps span { height: 3px; flex: 1; border-radius: 3px; background: var(--line); }
.modal-steps span.on { background: var(--accent); }
.modal-loading { padding: 60px; text-align: center; color: var(--muted); }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; color: var(--muted); margin-bottom: 6px; background: none; border: 0; padding: 0; }
.back-link:hover { color: var(--ink); }
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }

/* ---------- Toast / meny ---------- */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast-d { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: #18181b; color: #fafafa; padding: 11px 16px 11px 14px; border-radius: 12px; box-shadow: var(--shadow-pop); font-size: .92rem; font-weight: 500; animation: toast-in .25s var(--ease); }
.toast-d [data-lucide], .toast-d .lucide { color: #6ee7b7; }
.toast-d.error [data-lucide], .toast-d.error .lucide { color: #fca5a5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dropdown-menu { --bs-dropdown-border-color: var(--line); --bs-dropdown-border-radius: 12px; --bs-dropdown-link-active-bg: var(--surface-sunken); --bs-dropdown-link-active-color: var(--ink); --bs-dropdown-font-size: .92rem; box-shadow: var(--shadow-pop); padding: 6px; min-width: 220px; }
.dropdown-item { border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dropdown-item.text-danger:hover { background: var(--danger-bg); }
.dropdown-header { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px 4px; }

/* ---------- Relationskarta ---------- */
.map-shell { position: relative; height: calc(100vh - 140px); min-height: 480px; border-radius: 14px; overflow: hidden; background: #fbfbf9; }
#map { position: absolute; inset: 0; background-image: radial-gradient(circle, #e3e3de 1px, transparent 1px); background-size: 22px 22px; }
.map-toolbar { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 8px; align-items: center; z-index: 5; flex-wrap: wrap; pointer-events: none; }
.map-toolbar > * { pointer-events: auto; }
.map-toolbar .segmented { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.map-search { position: relative; width: 240px; }
.map-search input { box-shadow: 0 2px 10px rgba(0,0,0,.08); padding-left: 34px; border-color: transparent; }
.map-search [data-lucide], .map-search .lucide { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.map-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.map-zoom .btn { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: transparent; }
.map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 5; background: #fff; border-radius: 10px; padding: 8px 12px; font-size: .8rem; color: var(--muted); display: flex; gap: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.08); flex-wrap: wrap; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i.ln { width: 18px; height: 0; border-top: 2px solid #c9c8c2; display: inline-block; }
.map-legend i.ln.rel { border-top: 2px dashed var(--accent); }
.map-legend i.ln.part { border-top: 1.5px dotted #8b8a84; }
.map-legend i.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }
.map-card { position: absolute; top: 64px; right: 14px; width: 300px; z-index: 6; background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop); padding: 16px; display: none; }
.map-card.show { display: block; animation: toast-in .2s var(--ease); }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; pointer-events: none; }

/* ---------- Inloggning ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--side); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .panel { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.auth-card .panel-body { padding: 30px; }
.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 24px; }
.auth-brand .brand-mark { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.auth-brand .brand-name { font-size: 1.35rem; }

/* ---------- Mobil ---------- */
.mobile-bar, .tabbar { display: none; }
@media (max-width: 991.98px) {
  .sidebar { display: none; }
  .mobile-bar { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .mobile-bar .brand { padding: 0; }
  .mobile-bar .ms-auto { display: flex; gap: 4px; }
  .content, .content-wide { padding: 20px 16px 110px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .68rem; font-weight: 550; color: var(--muted); padding: 4px 0; }
  .tabbar a.active { color: var(--accent); }
  .tabbar a [data-lucide], .tabbar a .lucide { width: 22px; height: 22px; }
  .tabbar .tab-report span.plus { width: 48px; height: 48px; margin-top: -22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(15,95,90,.35); }
  .tabbar .tab-report span.plus svg { width: 24px; height: 24px; }
  h1, .h1 { font-size: 1.4rem; }
  .sec { margin-top: 28px; }
  .hide-mobile { display: none !important; }
  .page-head { flex-direction: column; }
  .modal-dialog { margin: 0; max-width: none !important; min-height: 100%; display: flex; align-items: flex-end; }
  .modal-content { border-radius: 18px 18px 0 0; max-height: 94vh; }
  .modal-body { overflow-y: auto; }
  .modal-footer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .toasts { bottom: 92px; }
  .map-shell { height: calc(100vh - 210px); margin: 0 -16px; border-radius: 0; }
  .map-card { left: 14px; right: 14px; width: auto; top: auto; bottom: 14px; }
  .map-legend { display: none; }
}
@media (min-width: 992px) { .show-mobile { display: none !important; } }
@media (max-width: 575.98px) {
  .choice-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .hide-xs { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (hover: hover) {
  .list-row > form .btn-icon, .list-row .row-side > .dropdown .btn-icon, .list-row > .dropdown .btn-icon { opacity: 0; transition: opacity .12s; }
  .list-row:hover > form .btn-icon, .list-row:hover .row-side > .dropdown .btn-icon, .list-row:hover > .dropdown .btn-icon, .list-row .show > .btn-icon { opacity: 1; }
}