/* =====================================================================
   YachtsNorway – backoffice

   Lyst, tett og funksjonelt. Motsatt av den offentlige siden med vilje:
   her jobber folk, og da teller lesbarhet og tetthet mer enn stemning.
   Tall er alltid tabulære slik at kolonner står rett under hverandre.
   ===================================================================== */

:root {
    --paper:      #FBFAF8;
    --card:       #FFFFFF;
    --line:       #E4E0D8;
    --line-soft:  #EFEBE4;

    --text:       #1C1E22;
    --text-dim:   #6B6E75;
    --text-faint: #9B9EA5;

    --accent:     #1C1E22;   /* knapper – bevisst nøytral, ikke merkefarge */
    --positive:   #2E7D53;
    --positive-bg:#EAF4EE;
    --warning:    #9A6B08;
    --warning-bg: #FBF3E0;
    --negative:   #A33F35;
    --negative-bg:#FBEDEB;
    --info-bg:    #EDF1F7;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 4px;
    --sidebar: 15rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.875rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 0.9375rem; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

.tabular, td.num, th.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- skall */
.admin {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: #14161A;
    color: #D8D5CE;
    padding: 1.25rem 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar__brand {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFF;
    border-bottom: 1px solid #24272D;
    margin-bottom: 1rem;
}
.sidebar__brand span { color: #7A7D85; font-weight: 400; }
.sidebar__brand a { text-decoration: none; }

.sidebar nav { flex: 1; }

.sidebar__group {
    padding: 1.25rem 1.25rem 0.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6A6D75;
}

.sidebar a.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    color: #C3C0B9;
    font-size: 0.8125rem;
    border-left: 2px solid transparent;
    transition: background 120ms ease, color 120ms ease;
    text-decoration: none;
}
.sidebar a.nav-item:hover { background: #1C1F24; color: #FFF; text-decoration: none; }
.sidebar a.nav-item[aria-current="page"] {
    background: #1C1F24;
    color: #FFF;
    border-left-color: #FFF;
}

.nav-item__count {
    background: #2C3038;
    color: #E8E5DE;
    border-radius: 999px;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}
.nav-item__count--alert { background: #8C3229; color: #FFF; }

.sidebar__foot {
    padding: 1rem 1.25rem 0;
    border-top: 1px solid #24272D;
    font-size: 0.75rem;
    color: #7A7D85;
}
.sidebar__foot strong { display: block; color: #D8D5CE; font-weight: 500; }

/* ---------------------------------------------------------------- innhold */
.main { min-width: 0; }

.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar__title { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.topbar__sub { color: var(--text-faint); font-size: 0.8125rem; }

.content { padding: 1.75rem; max-width: 82rem; min-width: 0; }

/* Hamburgeren finnes bare på små skjermer */
.sidebar__toggle { display: none; }

@media (max-width: 60rem) {
    /* minmax(0, 1fr), ikke 1fr: uten det får kolonnen minstebredden til
       innholdet, og en bred tabell drar hele siden med seg sidelengs
       i stedet for å skrolle inne i sin egen ramme. */
    .admin {
        grid-template-columns: minmax(0, 1fr);
        /* To rader: topplinja tar det den trenger, innholdet resten.
           Uten dette fordeler grid-en høyden fra min-height: 100vh likt
           på begge, og topplinja blir stående som et stort svart felt. */
        grid-template-rows: auto 1fr;
    }

    /* Menyen lå utbrettet og spiste halve skjermen. Nå ligger den bak en
       hamburger, og topplinja blir liggende slik at menyen er innen
       rekkevidde uansett hvor langt ned på siden man har kommet. */
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 40;
        height: auto;
        display: block;
        padding: 0;
    }

    .sidebar__brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        margin: 0;
        padding: 0.625rem 1rem;
    }

    .sidebar__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 44px;
        height: 44px;
        background: none;
        border: 0;
        border-radius: var(--radius);
        color: #D8D5CE;
        cursor: pointer;
    }
    .sidebar__toggle:hover { background: rgba(255, 255, 255, 0.08); }

    /* Prikk som sier at det ligger noe ubesvart bak en lukket meny */
    .sidebar__toggle-dot {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #C0392B;
    }

    .sidebar__panel {
        display: none;
        padding: 0 0.75rem 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }
    .sidebar__panel[data-open="true"] { display: block; }

    .sidebar__group {
        display: block;
        padding: 0.75rem 0.75rem 0.25rem;
        font-size: 0.6875rem;
    }

    /* Profil og utlogging var skjult på mobil og dermed uten vei ut */
    .sidebar__foot {
        display: block;
        margin-top: 0.75rem;
        padding: 0.875rem 0.75rem 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sidebar nav { display: block; }
    .sidebar a.nav-item {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        border-left: 0;
        border-radius: var(--radius);
    }
    .sidebar a.nav-item[aria-current="page"] { border-left: 0; }

    .content { padding: 1rem; }
    .topbar { padding: 0.875rem 1rem; }
}

/* ---------------------------------------------------------------- kort */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    /* Kortet skal aldri være bredere enn spalten det står i */
    min-width: 0;
}
.card__head {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.card__body { padding: 1.125rem; }
.card__body--flush { padding: 0; }
.card__foot {
    padding: 0.875rem 1.125rem;
    border-top: 1px solid var(--line-soft);
    background: #FCFBF9;
}

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--main { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); align-items: start; }
@media (max-width: 68rem) {
    .grid--main, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    /* minmax(0, 1fr) av samme grunn som over: en bred tabell inni skal
       skrolle i sin egen ramme, ikke dra siden ut i bredden. */
    .grid--2, .grid--3, .grid--4, .grid--main { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- nøkkeltall */
.stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
}
.stat__label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.375rem;
    display: block;
}
.stat__value {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.stat__note { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.25rem; }
.stat--positive .stat__value { color: var(--positive); }
.stat--negative .stat__value { color: var(--negative); }

/* ---------------------------------------------------------------- tabell */
.table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table th {
    text-align: left;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 500;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    background: #FCFBF9;
}
.table td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FCFBF8; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__wrap {
    overflow-x: auto;
    min-width: 0;
    /* Tydeliggjør at tabellen kan dras sidelengs på berøringsskjerm */
    -webkit-overflow-scrolling: touch;
}

.table--total td {
    border-top: 2px solid var(--line);
    font-weight: 600;
    background: #FCFBF9;
}

.row-link { cursor: pointer; }
.row-link:hover { background: #F7F5F1 !important; }

/* ---------------------------------------------------------------- merker */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: var(--info-bg);
    color: var(--text-dim);
    white-space: nowrap;
}
.tag--new      { background: #E7EFFB; color: #24518C; }
.tag--positive { background: var(--positive-bg); color: var(--positive); }
.tag--warning  { background: var(--warning-bg);  color: var(--warning); }
.tag--negative { background: var(--negative-bg); color: var(--negative); }
.tag--muted    { background: #F1EFEA; color: var(--text-faint); }
.tag--alert    { background: var(--negative-bg); color: var(--negative); }
.tag--locked   { background: #EAE7F5; color: #4A3F8C; }

/* ---------------------------------------------------------------- knapper */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 0.9375rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--accent);
    color: #FFF;
    transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { opacity: 0.88; text-decoration: none; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: #F5F3EF; opacity: 1; }

.btn--danger { background: var(--negative); }
.btn--positive { background: var(--positive); }

.btn--sm { padding: 0.3125rem 0.625rem; font-size: 0.75rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- skjema */
.field { margin-bottom: 0.875rem; }
.field:last-child { margin-bottom: 0; }

label, .label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 0.3125rem;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], input[type="url"],
select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text);
    background: #FFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0.625rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:hover, select:hover, textarea:hover { border-color: #CFC9BE; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(28, 30, 34, 0.08);
}
input[readonly], input[disabled], select[disabled], textarea[disabled] {
    background: #F5F3EF;
    color: var(--text-dim);
    cursor: not-allowed;
}

textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55; }

input[type="number"] { font-variant-numeric: tabular-nums; }

/* Én rad i skjemaet for vanlige spørsmål. Rammen er der for å vise hvor
   ett spørsmål slutter og det neste begynner: uten den flyter fire felt
   sammen til én grøt av inputs. */
.faq-row {
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem 0.25rem;
    margin-bottom: 1rem;
}
.faq-row legend { padding-inline: 0.375rem; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.875rem; }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Rad der siste felt er en knapp uten label.
 *
 * align-items:end stiller opp bunnkantene, men det er marginkanten som
 * teller. «.field:last-child» nullstiller bunnmargen, og siste felt i en
 * rad er en horisontal plassering, ikke en vertikal — knappen mistet
 * derfor 0,875 rem de andre feltene hadde, og la seg like mye lavere.
 * Her er margene like, så alt står på linje. */
.field-row--end { align-items: end; }
.field-row--end > .field { margin-bottom: 0; }
@media (max-width: 40rem) {
    .field-row, .field-row--3, .field-row--4 { grid-template-columns: 1fr; }

    /* Stablet i én kolonne er «siste felt» igjen det nederste, og da
       trenger feltene over seg luft mellom seg som ellers. */
    .field-row--end > .field { margin-bottom: 0.875rem; }
    .field-row--end > .field:last-child { margin-bottom: 0; }
}

.help { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.3125rem; }
.error { font-size: 0.75rem; color: var(--negative); margin-top: 0.3125rem; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--negative); }

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.checkbox input { width: 1rem; height: 1rem; margin: 0.1875rem 0 0; flex: none; accent-color: var(--accent); }
.checkbox label { margin: 0; font-weight: 400; color: inherit; }

.input-suffix { position: relative; }
.input-suffix input { padding-right: 2.5rem; }
.input-suffix span {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    color: var(--text-faint);
    pointer-events: none;
}

/* ---------------------------------------------------------------- varsler */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}
.alert--success { background: var(--positive-bg); border-color: #C6E0D0; color: #1F5C3C; }
.alert--error   { background: var(--negative-bg); border-color: #EDCBC6; color: #83302A; }
.alert--warning { background: var(--warning-bg);  border-color: #EBD9AC; color: #7A5406; }
.alert--info    { background: var(--info-bg);     border-color: #D3DCEA; color: #2B4368; }
.alert strong { font-weight: 600; }

/* ---------------------------------------------------------------- tomme lister */
.empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.875rem;
}
.empty strong { display: block; color: var(--text-dim); font-weight: 500; margin-bottom: 0.25rem; }

/* ---------------------------------------------------------------- filterlinje */
.filters {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.filters a {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--text-dim);
    background: var(--card);
    text-decoration: none;
}
.filters a:hover { border-color: #CFC9BE; text-decoration: none; }
.filters a[aria-current="true"] { background: var(--accent); color: #FFF; border-color: var(--accent); }
.filters a span { opacity: 0.6; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- definisjonsliste */
.dl { margin: 0; }
.dl__row {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) 1fr;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.8125rem;
}
.dl__row:last-child { border-bottom: 0; }
.dl__row dt { color: var(--text-faint); }
.dl__row dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- samtale */
.thread { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.msg {
    max-width: 32rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    line-height: 1.55;
    border: 1px solid var(--line-soft);
}
.msg--customer { background: #F3F1EC; align-self: flex-start; }
.msg--staff    { background: var(--info-bg); align-self: flex-end; border-color: #D3DCEA; }
.msg--system {
    align-self: center;
    max-width: 100%;
    background: none;
    border: 0;
    color: var(--text-faint);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.25rem 0;
}
.msg__meta { display: block; font-size: 0.6875rem; color: var(--text-faint); margin-bottom: 0.25rem; }

/* ---------------------------------------------------------------- innlogging */
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: #14161A;
}
.login-card {
    width: 100%;
    max-width: 22rem;
    background: var(--card);
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.login-card__brand {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
    text-align: center;
}
.login-card__brand span { color: var(--text-faint); font-weight: 400; }

/* ---------------------------------------------------------------- kalender */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); }
.calendar__dow {
    background: #FCFBF9;
    padding: 0.4375rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    text-align: center;
}
.calendar__day { background: var(--card); min-height: 5.5rem; padding: 0.375rem; }
.calendar__day--muted { background: #FAF9F6; color: var(--text-faint); }
.calendar__day--today { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar__num { font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.calendar__event {
    display: block;
    margin-top: 0.25rem;
    padding: 0.1875rem 0.3125rem;
    border-radius: 3px;
    font-size: 0.6875rem;
    background: var(--info-bg);
    color: #24518C;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar__event--klar { background: var(--positive-bg); color: var(--positive); }
.calendar__event--mangler { background: var(--negative-bg); color: var(--negative); }

/* ---------------------------------------------------------------- diverse */
.split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stack > * + * { margin-top: 0.75rem; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.small { font-size: 0.75rem; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.125rem 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.thumb {
    position: relative;
    aspect-ratio: 4/3;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #F5F3EF;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__badge {
    position: absolute; top: 0.25rem; left: 0.25rem;
    background: rgba(0,0,0,0.7); color: #FFF;
    font-size: 0.625rem; padding: 0.125rem 0.375rem; border-radius: 2px;
}
.thumb__actions {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.65);
    padding: 0.25rem;
    display: flex; gap: 0.25rem; justify-content: center;
    opacity: 0; transition: opacity 120ms ease;
}
.thumb:hover .thumb__actions, .thumb:focus-within .thumb__actions { opacity: 1; }
.thumb__actions button,
.thumb__actions a {
    background: none; border: 0; color: #FFF; font-size: 0.6875rem;
    cursor: pointer; padding: 0.125rem 0.375rem; border-radius: 2px;
    text-decoration: none; line-height: 1.4;
}
.thumb__actions button:hover,
.thumb__actions a:hover { background: rgba(255,255,255,0.2); }

@media print {
    .sidebar, .topbar, .btn, .filters { display: none !important; }
    .admin { grid-template-columns: 1fr; }
    .content { padding: 0; }
    .card { border-color: #CCC; break-inside: avoid; }
}

/* ---------------------------------------------------------------- redigerer */
.editor {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28,30,34,0.08); }

.editor .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: #FCFBF9;
    padding: 0.5rem;
}
.editor .ql-container.ql-snow { border: 0; font-family: var(--font); font-size: 0.9375rem; }
.editor .ql-editor { min-height: var(--editor-min, 22rem); line-height: 1.65; padding: 1rem 1.125rem; }
.editor .ql-editor.ql-blank::before { color: var(--text-faint); font-style: normal; left: 1.125rem; }

/* Innholdet skal ligne på hvordan det ser ut på nettsiden */
.editor .ql-editor h2 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.editor .ql-editor h2:first-child { margin-top: 0; }
.editor .ql-editor h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.375rem; }
.editor .ql-editor p { margin-bottom: 0.75rem; }
.editor .ql-editor ul, .editor .ql-editor ol { margin-bottom: 0.75rem; }
.editor .ql-editor a { color: #24518C; text-decoration: underline; }
/* Bildene ligger i full oppløsning; her skal de bare vise hvor de står */
.editor .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0; }

.editor .ql-snow .ql-stroke { stroke: var(--text-dim); }
.editor .ql-snow .ql-fill { fill: var(--text-dim); }
.editor .ql-snow .ql-picker { color: var(--text-dim); }
.editor .ql-snow button:hover .ql-stroke,
.editor .ql-snow button.ql-active .ql-stroke { stroke: var(--accent); }
.editor .ql-snow button.ql-active .ql-fill { fill: var(--accent); }

/* Verktøylinja må kunne treffes med tommelen, og bli stående når man
   ruller i en lang tekst. Uten dette er redigereren nesten ubrukelig
   på telefon og iPad. */
.editor .ql-toolbar.ql-snow {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.editor .ql-snow.ql-toolbar button,
.editor .ql-snow .ql-toolbar button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem;
    border-radius: var(--radius);
}
.editor .ql-snow.ql-toolbar button:hover { background: #F0EDE7; }
.editor .ql-snow.ql-toolbar .ql-formats { margin-right: 0.5rem; }

.editor .ql-snow .ql-picker.ql-header {
    height: 2.5rem;
    line-height: 2.5rem;
    width: 8rem;
}
.editor .ql-snow .ql-picker-label { padding-left: 0.5rem; border-radius: var(--radius); }

@media (pointer: coarse) {
    /* Apple anbefaler 44 px, og det er omtrent bredden på en voksen tommel */
    .editor .ql-snow.ql-toolbar button {
        width: 2.75rem;
        height: 2.75rem;
    }
    .editor .ql-snow .ql-picker.ql-header { height: 2.75rem; line-height: 2.75rem; }
    .editor .ql-editor { min-height: min(var(--editor-min, 16rem), 16rem); font-size: 1rem; }

    /* iOS zoomer inn på felt med skrift under 16 px */
    input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
    input[type="time"], input[type="number"], input[type="password"], select, textarea {
        font-size: 1rem;
    }
}

/* Lenkedialogen til Quill er for smal på telefon */
@media (max-width: 40rem) {
    .editor .ql-snow .ql-tooltip {
        left: 0.5rem !important;
        max-width: calc(100vw - 3rem);
        white-space: normal;
    }
    .editor .ql-snow .ql-tooltip input[type=text] { width: 100%; margin: 0.5rem 0; }
}

/* ---------------------------------------------------- vanlige spørsmål */
.faq-admin { list-style: none; margin: 0; padding: 0; }

.faq-admin__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}
.faq-admin__item:last-child { border-bottom: 0; }

.faq-admin__order { display: flex; gap: 0.25rem; padding-top: 0.5rem; }
.faq-admin__order form { margin: 0; }
.faq-admin__order button { min-width: 2rem; padding-left: 0; padding-right: 0; }
.faq-admin__order button[disabled] { opacity: 0.3; cursor: default; }

.faq-admin__body { flex: 1; min-width: 0; }
.faq-admin__body > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: 0.5rem 0;
    list-style: none;
}
.faq-admin__body > summary::-webkit-details-marker { display: none; }
.faq-admin__question { font-weight: 600; }
.faq-admin__question .tag { margin-left: 0.5rem; vertical-align: middle; }
.faq-admin__toggle { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
.faq-admin__body[open] .faq-admin__toggle { visibility: hidden; }

.faq-admin__form { margin-top: 1rem; }
.faq-admin__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.faq-admin__delete { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }

@media (max-width: 40rem) {
    /* Pilene tar for mye bredde ved siden av teksten på telefon */
    .faq-admin__item { flex-direction: column; gap: 0.25rem; }
    .faq-admin__order { padding-top: 0; }
    .faq-admin__body > summary { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .faq-admin__actions { flex-wrap: wrap; gap: 0.5rem 1rem; }
}


/* ---------------------------------------------------- backoffice på telefon

   Skjermen er et arbeidsverktøy, og på skrivebordet teller tetthet mer
   enn store flater. På berøringsskjerm er det omvendt: en knapp på 27
   piksler treffer man ikke. Her får alt som kan trykkes en høyde en
   tommel finner, uten at skrivebordsvisningen endrer seg. */

/* Lange lenker skal kunne leses, ikke bare kopieres */
.mono--url { font-size: 0.8125rem; }

@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        padding-block: 0.625rem;
    }
    .btn--sm {
        min-height: 40px;
        padding-inline: 0.875rem;
    }

    /* Bildeknappene tonte fram ved museover. På en telefon finnes ikke
       museover, så de var i praksis usynlige. Med trykkbare størrelser
       dekker de dessuten hele bildet som overlegg, så på berøringsskjerm
       legger vi dem som en egen rad under bildet i stedet. */
    .thumb {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }
    .thumb img { aspect-ratio: 4/3; }

    /* Fire like kolonner, slik at knappene alltid får plass uansett hvor
       bred miniatyren er. Uten dette falt sletteknappen utenfor kanten. */
    .thumb__actions {
        position: static;
        opacity: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: var(--paper);
        border-top: 1px solid var(--line);
        padding: 0.1875rem;
        gap: 0.125rem;
    }
    .thumb__actions button,
    .thumb__actions a {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Fyll hele cellen, ellers blir trykkflaten bare så bred som tegnet */
        width: 100%;
        min-width: 0;
        padding-inline: 0;
        color: var(--text);
        font-size: 1rem;
    }
    .thumb__actions button:hover,
    .thumb__actions a:hover { background: var(--line-soft); }

    .faq-admin__order .btn { min-height: 40px; min-width: 40px; }

    /* Rader man kan åpne, og lenker i tabeller */
    summary { min-height: 40px; display: flex; align-items: center; }
    .table td a:not(.btn) { display: inline-block; padding-block: 0.375rem; }

    /* Filvelgeren arver ikke skriftstørrelsen fra skjemafeltene */
    input[type="file"] { font-size: 1rem; }

    /* Avkryssingsbokser er små å treffe; etiketten blir trykkflaten */
    .checkbox label { min-height: 32px; display: inline-flex; align-items: center; }

    /* Beløpsfelt i tabeller ble så smale at tallet ble klippet. Tabellen
       skroller sidelengs uansett, så her er det plass som mangler, ikke
       bredde å spare. */
    .table .input-suffix { min-width: 7.5rem; }
    .table .input-suffix input { min-width: 7.5rem; }
    .table td input[type="number"] { min-width: 5rem; }
}

/* ---------------------------------------------------- tekster på nettsiden */
.text-field {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.text-field:first-child { padding-top: 0; }
.text-field:last-child { border-bottom: 0; padding-bottom: 0; }

.text-field--changed { border-left: 3px solid var(--accent); padding-left: 0.875rem; margin-left: -0.875rem; }

.text-field__head {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.text-field__head > label { font-weight: 600; font-size: 0.9375rem; }

.text-field__key {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
}

.text-field__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.text-field__lang { font-size: 0.75rem; color: var(--text-dim); }

@media (max-width: 48rem) {
    .text-field__cols { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
    .text-field__key { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- trakt */
.funnel { list-style: none; margin: 0; padding: 0; }
.funnel__step { margin-bottom: 1.25rem; }
.funnel__step:last-child { margin-bottom: 0; }

.funnel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.375rem;
}
.funnel__name  { font-size: 0.9375rem; }
.funnel__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.funnel__count strong { font-size: 1.0625rem; }
.funnel__count .faint { margin-left: 0.375rem; font-size: 0.8125rem; }

.funnel__bar {
    height: 0.625rem;
    background: var(--line-soft);
    border-radius: 9999px;
    overflow: hidden;
}
.funnel__bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 9999px;
}

.funnel__drop {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: var(--negative);
}

/* ------------------------------------------------------------ liten graf */
.sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 4rem;
}
.sparkline__bar {
    flex: 1;
    min-width: 2px;
    background: var(--accent);
    border-radius: 1px 1px 0 0;
    opacity: 0.75;
}
.sparkline__bar:hover { opacity: 1; }

/* Liten tilbakestilling pr. tekst */
.text-field__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-faint);
    cursor: pointer;
}
.text-field__reset:hover { color: var(--negative); border-color: var(--line); background: #FFF; }

@media (pointer: coarse) {
    .text-field__reset { width: 40px; height: 40px; }
}

/* Alt-tekst pr. bilde, skjult bak en liten knapp i hjørnet */
.thumb__alt {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 2;
}
.thumb__alt > summary {
    list-style: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.65);
    color: #FFF;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1875rem 0.4375rem;
    border-radius: 2px;
}
.thumb__alt > summary::-webkit-details-marker { display: none; }
.thumb__alt[open] > summary { background: var(--accent); }

.thumb__alt form {
    position: absolute;
    top: 1.75rem;
    right: 0;
    width: 17rem;
    max-width: 80vw;
    padding: 0.875rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.3);
    text-align: left;
}
.thumb__alt form .field { margin-bottom: 0.625rem; }
.thumb__alt form label { font-size: 0.6875rem; }

@media (pointer: coarse) {
    .thumb__alt > summary { min-height: 32px; display: inline-flex; align-items: center; }
}

/* Partnersøknader: én sammenslått rad pr. søknad, så lista holder seg kort */
.soknad { border-bottom: 1px solid var(--line-soft); }
.soknad:last-child { border-bottom: 0; }
.soknad > summary {
    cursor: pointer;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.soknad > summary:hover { color: var(--accent); }
.soknad__body { padding: 0 0 1.25rem; }

/* ---------------------------------------------------------------- forsidebilder */
.hero-preview {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.62fr;
    gap: 1rem;
    align-items: start;
}

.hero-frame__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
}

/* Rammen har samme form som hero-feltet ved denne bredden, så det man
   ser her er det som faktisk kommer ut på skjermen. */
.hero-frame__box {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #14161A;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.hero-frame__box:active { cursor: grabbing; }
.hero-frame__box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Samme mørkning som på forsiden, så man ser om teksten får plass */
.hero-frame__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.1) 75%, transparent);
}

/* Punktet man drar i */
.hero-frame__dot {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid #FFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
}

.hero-frame__vals {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.hero-frame__vals label {
    flex: 1;
    min-width: 0;
    font-size: 0.6875rem;
    margin: 0;
}
.hero-frame__vals input { margin-top: 0.125rem; }

@media (max-width: 64rem) {
    .hero-preview { grid-template-columns: 1fr; gap: 1.5rem; }
    /* Uten tak blir mobilrammen absurd høy når den får full bredde */
    .hero-frame__box { max-height: 60vh; margin-inline: auto; }
    .hero-frame[data-frame="mobile"] .hero-frame__box { max-width: 18rem; }
    .hero-frame[data-frame="tablet"] .hero-frame__box { max-width: 30rem; }
}