/* Pluggis – felles designsystem. Natt, Gnist, Lys og Glød. Lys og mørk modus. Alle størrelser i rem (følger tekststørrelsen på telefonen). */
/* Skriftene ligger hos oss selv: raskere, virker uten nett og sender ingen data til Google */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-display: swap; src: url('/static/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('/static/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url('/static/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600 700; font-display: swap; src: url('/static/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }

:root {
  /* Merkevaren */
  --natt: #10231D; --gnist: #CFF26B; --lys: #F2F4EE; --glod: #FF6B4A;
  /* Roller */
  --ground: #F2F4EE; --card: #FFFFFF; --ink: #10231D; --muted: #4A5A54; --soft: #33443E;
  --line: #E4E8E1; --line-strong: #D6DCD3; --chip: #E4E8E1; --field: #FFFFFF;
  --night: #10231D; --onnight: #F2F4EE; --onnight2: #C9D3CD; --nightline: #2E4A40;
  --spark: #CFF26B; --onspark: #10231D; --warn: #FF6B4A; --warn-soft: #FFE3DB; --onwarn: #10231D;
  --ok: #2E4A40; --ok-soft: #E8F7C4;
  --panel: #E9ECE6; --scrim: rgba(16, 35, 29, .45);
  --shadow: 0 1px 0 rgba(16, 35, 29, .04), 0 12px 32px -16px rgba(16, 35, 29, .28);
  --r-s: .75rem; --r-m: 1.0625rem; --r-l: 1.25rem; --r-xl: 1.625rem;
  --display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
  --body: 'Instrument Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --tap: 2.75rem; /* 44 px trykkflate */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #0C1714; --card: #15241F; --ink: #E9EFE9; --muted: #A3B2AB; --soft: #C3CEC8; --line: #24372F; --line-strong: #335247;
    --chip: #22352E; --field: #15241F; --night: #1F3D33; --onnight: #F2F4EE; --onnight2: #C3D0C9; --nightline: #335247;
    --warn: #FF7A5C; --warn-soft: #3A1E17; --ok: #CFF26B; --ok-soft: #22351A; --panel: #08110E; --scrim: rgba(0, 0, 0, .6); --shadow: 0 0 transparent;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --ground: #0C1714; --card: #15241F; --ink: #E9EFE9; --muted: #A3B2AB; --soft: #C3CEC8; --line: #24372F; --line-strong: #335247;
  --chip: #22352E; --field: #15241F; --night: #1F3D33; --onnight: #F2F4EE; --onnight2: #C3D0C9; --nightline: #335247;
  --warn: #FF7A5C; --warn-soft: #3A1E17; --ok: #CFF26B; --ok-soft: #22351A; --panel: #08110E; --scrim: rgba(0, 0, 0, .6); --shadow: 0 0 transparent;
  color-scheme: dark;
}

/* ---------- Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
h1, h2, h3, .h { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .4em; text-wrap: balance; overflow-wrap: break-word; }
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.45rem; }
h3, .h3 { font-size: 1.125rem; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mut, .quiet { color: var(--muted); }
.soft { color: var(--soft); }
.small { font-size: .875rem; }
.tiny { font-size: .8125rem; }
.k, .eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.num, dd, .price, .amt, [data-amount] { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .875rem; }
.big { font-family: var(--display); font-weight: 800; font-size: 2.25rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--spark); border-radius: 6px; }
.on-night :focus-visible, .dark :focus-visible { outline-color: var(--spark); box-shadow: none; }
[tabindex='-1']:focus { outline: none; box-shadow: none; }
::selection { background: var(--spark); color: var(--natt); }

/* ---------- Ramme ---------- */
.wrap { width: 100%; max-width: 30rem; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: .875rem; }
.wrap-wide { max-width: 72rem; }
.stack { display: flex; flex-direction: column; gap: .875rem; }
.stack-s { display: flex; flex-direction: column; gap: .5rem; }
.row-flex { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .875rem; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .875rem; }
.spacer { flex: 1; }

/* Topplinje: logo + hjelp/meny */
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); gap: .75rem; }
.logo { font-family: var(--display); font-weight: 800; font-size: 1.625rem; letter-spacing: -.03em; text-decoration: none; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: .5rem; }
.logo-tag { font-family: var(--body); font-size: .75rem; font-weight: 600; letter-spacing: .02em; background: var(--warn); color: var(--onwarn); padding: .2rem .5rem; border-radius: .375rem; }
.link { background: none; border: 0; padding: .625rem 0; min-height: var(--tap); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.back { background: none; border: 0; padding: .625rem 0; min-height: var(--tap); font-weight: 500; cursor: pointer; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.back::before { content: ''; width: .5rem; height: .5rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: .25rem; }

/* ---------- Flater ---------- */
.card { background: var(--card); border-radius: var(--r-l); padding: 1rem; }
.card-pad { padding: 1.25rem; }
.card-line { border: 2px solid var(--ink); }
.card-warn { border: 2px solid var(--warn); }
.card-soft { background: var(--chip); }
.dark, .on-night { background: var(--night); color: var(--onnight); border-radius: var(--r-xl); padding: 1.375rem; }
.dark .mut, .on-night .mut { color: var(--onnight2); }
.dark .big, .on-night .big { color: var(--spark); }
.note { background: var(--chip); border-radius: var(--r-m); padding: .875rem 1rem; font-size: .9375rem; line-height: 1.5; }
.note-warn { background: var(--warn-soft); border-left: 4px solid var(--warn); }
.note-ok { background: var(--ok-soft); }

/* Lister (innstillinger, steder, personer) */
.list { background: var(--card); border-radius: var(--r-l); overflow: hidden; display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; }
.list > li { list-style: none; }
.list-row, .list > li > a, .list > li > button { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .8125rem 1rem; min-height: 3.25rem; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer; }
.list > :last-child .list-row, .list > .list-row:last-child, .list > li:last-child > a, .list > li:last-child > button { border-bottom: 0; }
.list-row .v, .v { color: var(--muted); font-size: .875rem; text-align: right; }
.list-row .t, .list > li > a .t, .list > li > button .t { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; }
.list-row .t > :first-child, .list > li > a .t > :first-child, .list > li > button .t > :first-child { font-weight: 600; }
.list-row .t > :nth-child(2), .list > li > a .t > :nth-child(2), .list > li > button .t > :nth-child(2) { color: var(--muted); font-size: .875rem; font-weight: 400; }
.chev { display: inline-flex; align-items: center; flex-shrink: 0; }
.chev::after { content: ''; display: block; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); flex-shrink: 0; margin: 0 .25rem; }
.chev:empty::after { margin-left: .25rem; }

/* Nøkkel-verdi */
.kv { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; margin: 0; }
.kv dt { color: var(--soft); }
.kv dd { margin: 0; text-align: right; }
.kv .sum { border-top: 1px solid var(--line); padding-top: .5rem; font-weight: 600; }

/* ---------- Knapper ---------- */
.btn { min-height: 3.375rem; border-radius: var(--r-m); border: 0; font-weight: 600; font-size: 1rem; cursor: pointer; padding: 0 1.125rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; width: 100%; line-height: 1.2; text-align: center; transition: transform .12s var(--ease), filter .12s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-main, .b1 { background: var(--spark); color: var(--onspark); }
.btn-dark, .b2 { background: var(--night); color: var(--spark); }
.btn-line, .b3 { background: transparent; border: 1.5px solid currentColor; color: var(--ink); font-weight: 500; }
.dark .btn-line, .on-night .btn-line { color: var(--onnight); }
.btn-danger { background: transparent; border: 1.5px solid var(--warn); color: var(--ink); font-weight: 500; }
.btn-auto, .btn-small { width: auto; }
.btn-small { min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-s); font-size: .9375rem; }
.btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--chip); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--night); color: var(--spark); border: 0; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

/* Brikker og status */
.chip { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; background: var(--chip); color: var(--ink); }
.chip-free, .c-led { background: var(--spark); color: var(--onspark); }
.chip-busy, .c-opp { background: var(--warn); color: var(--onwarn); }
.chip-off { background: transparent; border: 1.5px solid var(--muted); color: var(--muted); }
.chip-dark { background: var(--night); color: var(--spark); }
.dot { width: .625rem; height: .625rem; border-radius: 50%; background: currentColor; display: inline-block; }

/* Valg: segmenter, piller og brytere */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--chip); border-radius: .9375rem; padding: .25rem; gap: .125rem; }
.seg button { min-height: var(--tap); border: 0; border-radius: .6875rem; background: transparent; cursor: pointer; font-size: .9375rem; color: var(--ink); padding: 0 .5rem; }
.seg button[aria-pressed='true'], .seg button[aria-selected='true'] { background: var(--night); color: var(--onnight); font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { min-height: 2.375rem; padding: 0 .8rem; border-radius: .6875rem; border: 1.5px solid var(--ink); background: var(--card); cursor: pointer; font-size: .875rem; color: var(--ink); }
.pill[aria-pressed='true'] { background: var(--night); border-color: var(--night); color: var(--spark); font-weight: 600; }
.switch { width: 3.125rem; height: 1.875rem; border-radius: 1rem; border: 0; background: var(--chip); position: relative; cursor: pointer; flex-shrink: 0; padding: 0; }
.switch::after { content: ''; position: absolute; left: .25rem; top: .25rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--muted); transition: left .15s var(--ease); }
.switch[aria-checked='true'] { background: var(--night); }
.switch[aria-checked='true']::after { left: 1.5rem; background: var(--spark); }
.choice { display: flex; gap: .75rem; align-items: flex-start; background: var(--card); border-radius: var(--r-l); padding: 1rem; border: 2px solid transparent; cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.choice[aria-pressed='true'], .choice:has(input:checked) { border-color: var(--ink); }
.choice input { margin-top: .25rem; accent-color: var(--natt); width: 1.25rem; height: 1.25rem; }

/* Steg (veiviser) */
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; }
.progress span { height: .3125rem; border-radius: .2rem; background: var(--line-strong); }
.progress span.on { background: var(--ink); }
.steps { display: flex; flex-direction: column; gap: .875rem; counter-reset: s; padding: 0; margin: 0; list-style: none; }
.steps > li { display: flex; gap: .875rem; align-items: flex-start; }
.steps > li::before { counter-increment: s; content: counter(s); width: 2rem; height: 2rem; border-radius: 50%; background: var(--night); color: var(--spark); display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: .75rem; align-items: center; padding: .625rem 0; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ''; width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0; background: var(--spark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310231D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.checks li.todo::before { background: var(--chip); }

/* ---------- Skjema ---------- */
label, .label { font-weight: 600; font-size: .875rem; display: block; margin-bottom: .375rem; }
.field { display: flex; flex-direction: column; gap: .375rem; }
input:not([type]), input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='password'], input[type='search'], input[type='url'], input[type='date'], input[type='time'], input[type='datetime-local'], select, textarea, .input {
  min-height: 3.125rem; border-radius: .875rem; border: 1.5px solid var(--ink); padding: 0 .875rem; background: var(--field); width: 100%; font-size: 1rem; color: var(--ink); }
textarea { padding: .75rem .875rem; min-height: 6rem; line-height: 1.45; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A54' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem; padding-right: 2.5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--spark); }
.hint { font-size: .8125rem; color: var(--muted); line-height: 1.45; margin: .25rem 0 0; }
.error, [aria-invalid='true'] + .hint { color: var(--ink); background: var(--warn-soft); border-radius: .5rem; padding: .375rem .625rem; font-size: .875rem; }
[aria-invalid='true'] { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.stepper { display: flex; align-items: center; gap: .625rem; }
.stepper button { width: 2.875rem; height: 2.875rem; border-radius: .875rem; border: 1.5px solid var(--ink); background: var(--card); font-size: 1.375rem; cursor: pointer; color: var(--ink); flex-shrink: 0; }
.stepper output, .stepper .val { flex: 1; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.625rem; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: .625rem; align-items: flex-start; font-weight: 400; font-size: 1rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--natt); margin-top: .15rem; flex-shrink: 0; }

/* Pluggis-koden: 3 + 3 tegn */
.code { font-family: var(--display); font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code-input { font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: .25em; text-transform: uppercase; text-align: center; }

/* ---------- Pris ---------- */
.price-now { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price-now .big { font-size: 3rem; }
.bars { position: relative; height: 8.125rem; display: grid; grid-template-columns: repeat(var(--n, 96), minmax(0, 1fr)); column-gap: 1px; align-items: end; }
.bars i { display: block; border-radius: 1px; background: var(--nightline); }
.bars i.past { background: var(--line-strong); }
.bars i.cheap { background: var(--spark); }
.bars i.now { background: var(--ink); }
.bars .now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.bars .now-tag { position: absolute; top: -.25rem; transform: translateX(-50%); background: var(--ink); color: var(--ground); font-size: .6875rem; font-weight: 600; padding: .125rem .375rem; border-radius: .375rem; }
.bars .limit { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--warn); }
.axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.dark .bars i { background: var(--nightline); } .dark .bars i.past { background: rgba(255,255,255,.12); } .dark .bars i.now { background: var(--onnight); } .dark .bars .now-line { background: var(--onnight); } .dark .bars .now-tag { background: var(--onnight); color: var(--night); } .dark .axis { color: var(--onnight2); }

/* ---------- Hovedmeny ---------- */
.tabbar { position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--card); border-top: 1px solid var(--line); padding: .375rem .5rem calc(.875rem + env(safe-area-inset-bottom)); z-index: 10; margin-top: auto; }
.tabbar a, .tabbar button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem 0; font-size: .75rem; color: var(--muted); cursor: pointer; text-decoration: none; min-height: var(--tap); }
.tabbar [aria-current='page'] { color: var(--ink); font-weight: 600; }
.tabbar svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sidemeny på store skjermer (eier, org, admin) */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidenav { width: 15rem; flex-shrink: 0; background: var(--natt); color: var(--lys); padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.sidenav .logo { color: var(--lys); padding: 0 .875rem 1.25rem; }
.sidenav a, .sidenav button { display: flex; justify-content: space-between; align-items: center; padding: .6875rem .875rem; border-radius: .75rem; color: #C9D3CD; text-decoration: none; font-size: .9375rem; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; min-height: var(--tap); }
.sidenav a:hover, .sidenav button:hover { background: rgba(255, 255, 255, .06); color: var(--lys); }
.sidenav [aria-current='page'] { background: #2E4A40; color: var(--lys); font-weight: 600; }
.sidenav .count { color: var(--gnist); font-weight: 600; }
.sidenav :focus-visible { outline-color: var(--gnist); box-shadow: none; }
.main { flex: 1; min-width: 0; padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 77.5rem; }
@media (max-width: 52rem) { .sidenav { display: none; } .main { padding: 1rem 1rem 2rem; } }
@media (min-width: 52.0625rem) { .tabbar.mobile-only { display: none; } }

/* ---------- Ark, dialog og beskjeder ---------- */
.sheet-wrap { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; z-index: 50; animation: fade .18s var(--ease); }
.sheet { width: 100%; max-width: 30rem; background: var(--ground); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: .625rem 1.125rem calc(1.25rem + env(safe-area-inset-bottom)); max-height: 92vh; max-height: 92dvh; overflow: auto; display: flex; flex-direction: column; gap: .875rem; animation: up .24s var(--ease); }
.sheet::before { content: ''; width: 2.5rem; height: .3125rem; border-radius: .2rem; background: var(--line-strong); align-self: center; flex-shrink: 0; }
@media (min-width: 40rem) { .sheet-wrap { align-items: center; } .sheet { border-radius: var(--r-xl); max-height: 86vh; } .sheet::before { display: none; } }
.sheet-wide { max-width: 56rem; }
.sheet > * { flex-shrink: 0; }
.dlg-x { position: absolute; top: .75rem; right: .75rem; width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--chip); color: var(--ink); cursor: pointer; font-size: 1.25rem; line-height: 1; }

dialog.sheet { border: 0; color: var(--ink); margin: auto auto 0; } dialog.sheet::backdrop { background: var(--scrim); }
@media (min-width: 40rem) { dialog.sheet { margin: auto; } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); width: min(25rem, calc(100% - 2.25rem)); bottom: calc(6rem + env(safe-area-inset-bottom)); background: var(--night); color: var(--onnight); border-radius: 1rem; padding: .875rem 1rem; font-weight: 500; z-index: 60; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); display: flex; gap: .75rem; align-items: center; justify-content: space-between; animation: up .2s var(--ease); }
.toast.bad { background: var(--warn); color: var(--onwarn); }
.toast button { background: none; border: 0; color: var(--spark); font-weight: 600; cursor: pointer; min-height: var(--tap); }
.banner { background: var(--warn); color: var(--onwarn); padding: .75rem 1rem; font-weight: 500; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.banner-admin { position: sticky; top: 0; z-index: 40; }
@keyframes up { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.toast { animation-name: toastup; } @keyframes toastup { from { transform: translate(-50%, 1rem); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* Tabeller (eier, org, admin) */
.table-wrap { position: relative; overflow-x: auto; background: var(--card); border-radius: var(--r-l); }
table.t { border-collapse: collapse; width: 100%; font-size: .9375rem; }
table.t th { text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .75rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.t td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t .r, table.t th.r { text-align: right; font-variant-numeric: tabular-nums; }

/* Tomtilstand og maskot */
.empty { text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .625rem; color: var(--soft); }
.mascot { display: block; margin: 0 auto; }

/* Lasting */
.skeleton { background: linear-gradient(90deg, var(--chip), var(--line), var(--chip)); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: var(--r-s); min-height: 1rem; }
@keyframes sk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .tabbar, .sidenav, .topbar .link, .no-print { display: none !important; } body { background: #fff; } .card, .dark { border: 1px solid #ccc; background: #fff; color: #000; } }

/* Utskriftsdokumenter fra serveren (avregning o.l.) */
.print-doc { background: var(--ground); }
.doc { max-width: 50rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: .75rem; }
.doc .no-print { display: flex; flex-wrap: wrap; gap: .5rem; }
.doc table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r-m); overflow: hidden; font-size: .9375rem; }
.doc th, .doc td { padding: .5rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.doc td.num, .doc th.num, .doc .r { text-align: right; font-variant-numeric: tabular-nums; }
.btn-quiet { background: transparent; color: var(--ink); text-decoration: underline; }
@media print { .doc { padding: 0; } .doc table { border: 1px solid #ccc; } }
.doc .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .75rem; }
.doc .sum td, .doc tr.sum td { font-weight: 600; border-top: 2px solid var(--ink); }
.doc .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pluggis-koden: type=search så Safari ikke foreslår tofaktorkoder («verifiseringskode») – men uten søkeutseende */
input[data-noautofill] { -webkit-appearance: none; appearance: none; }
input[data-noautofill]::-webkit-search-cancel-button, input[data-noautofill]::-webkit-search-decoration { -webkit-appearance: none; display: none; }