/* ============================================================================
   Atlas designsystem
   ----------------------------------------------------------------------------
   Atlas er et verktøy folk står i hele arbeidsdagen, ikke et dokument. Derfor
   har det egen identitet innenfor Frei-familien: Freis farger og fonter ligger
   i bunn, men flatene er rolige og nøytrale slik at tettpakket tabelldata er
   lett å lese.

   Arbeidsdelingen:
     Merkevaren eier rammen   toppbar, navigasjon, knapper, paneler, tomrom
     Dataene eier sin palett  status, avvik, dekningsgrad, positiv og negativ

   Én fil styrer alle seks skjermene. Alle klassenavn fra dagens app er
   beholdt, slik at eksisterende JavaScript fortsatt treffer.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Fonter */

@font-face {
    font-family: 'Josefin Sans';
    src: url('assets/fonts/JosefinSans.ttf') format('truetype');
    font-weight: 100 700;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('assets/fonts/OpenSans.ttf') format('truetype');
    font-weight: 300 800;
    font-display: swap;
}

/* ---------------------------------------------------------------- 2. Tokens */

:root {
    /* Freis kjernefarger. Uendret, de er fasit. */
    --frei-marian:   #424874;
    --frei-peri:     #DCD6F7;
    --frei-sage:     #355C5C;
    --frei-palesage: #D6E5E3;
    --frei-gold:     #DABB77;
    --frei-cream:    #F4EDDD;

    /* Nøytralrampe trukket mot Marian. Grått med samme kuldegrad som
       merkevaren, ikke dødt systemgrått. */
    --ink-0:  #ffffff;
    --ink-25: #fbfbfd;
    --ink-50: #f5f5f9;
    --ink-100:#ececf3;
    --ink-150:#e2e2ec;
    --ink-200:#d6d6e3;
    --ink-300:#b9b9cc;
    --ink-400:#9292aa;
    --ink-500:#70708c;
    --ink-600:#55556f;
    --ink-700:#3f3f56;
    --ink-800:#2b2b3d;
    --ink-900:#1c1c29;
    --ink-950:#131320;

    /* Semantiske flater */
    --bg:            var(--ink-50);
    --surface:       var(--ink-0);
    --surface-sunk:  var(--ink-25);
    --surface-raised:var(--ink-0);
    --surface-head:  var(--ink-25);
    --surface-hover: var(--ink-50);
    --surface-active:#eef0fa;

    --line:          var(--ink-150);
    --line-strong:   var(--ink-200);
    --line-soft:     var(--ink-100);

    --text:          var(--ink-800);
    --text-soft:     var(--ink-600);
    --text-muted:    var(--ink-500);
    --text-faint:    var(--ink-400);
    --text-invert:   #ffffff;

    /* Aksenter */
    --accent:        var(--frei-marian);
    --accent-hover:  #383e66;
    --accent-soft:   #eceaf6;
    --accent-line:   #c5c2e0;
    --accent-text:   #3a4069;

    --second:        var(--frei-sage);
    --second-hover:  #2b4c4c;
    --second-soft:   #e7f0ee;
    --second-line:   #c2d8d4;

    --gold:          var(--frei-gold);
    --gold-soft:     #f7efdd;
    --gold-line:     #e7d4ab;
    --gold-text:     #8a6a24;

    /* Datapalett. Bevisst atskilt fra merkevaren: dette er signaler en
       selger leser raskt, og de skal ikke konkurrere med rammen. */
    --pos:      #1f7a5a;
    --pos-soft: #e3f4ed;
    --pos-line: #b7e0d0;
    --neg:      #b3261e;
    --neg-soft: #fbe9e7;
    --neg-line: #f1c4bf;
    --warn:     #9a6212;
    --warn-soft:#fdf1dd;
    --warn-line:#eed6ac;
    --info:     #2b5ea8;
    --info-soft:#e8effa;
    --info-line:#c2d5f0;

    /* Typografi */
    --font-display: 'Josefin Sans', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', Consolas, monospace;

    --fs-micro: 11px;
    --fs-small: 12px;
    --fs-base:  13px;
    --fs-body:  14px;
    --fs-lead:  15px;
    --fs-h3:    16px;
    --fs-h2:    20px;
    --fs-h1:    26px;
    --fs-display: 34px;

    /* Rom. Firepunkts skala. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

    --r-sm: 5px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 18px;
    --r-pill: 999px;

    /* Dybde. Hårstrek først, skygge bare der noe faktisk svever. */
    --sh-sm: 0 1px 2px rgba(28,28,41,.05);
    --sh-md: 0 2px 6px rgba(28,28,41,.07), 0 1px 2px rgba(28,28,41,.05);
    --sh-lg: 0 12px 32px rgba(28,28,41,.12), 0 2px 6px rgba(28,28,41,.06);
    --sh-xl: 0 24px 64px rgba(28,28,41,.18), 0 4px 12px rgba(28,28,41,.08);

    --ring: 0 0 0 3px rgba(66,72,116,.20);

    --topbar-h: 52px;
    --maxw: 1560px;
    --row-h: 38px;

    --ease: cubic-bezier(.22,.61,.36,1);
    --t-fast: .12s var(--ease);
    --t: .18s var(--ease);
}

/* Mørk modus. Ikke en invertering: egen rampe, egne aksenttinter som holder
   kontrast mot mørk flate. */
:root[data-theme="dark"] {
    --bg:            var(--ink-950);
    --surface:       #1e1e2d;
    --surface-sunk:  #191926;
    --surface-raised:#242436;
    --surface-head:  #232333;
    --surface-hover: #26263a;
    --surface-active:#2c2c46;

    --line:          #32324a;
    --line-strong:   #3e3e5a;
    --line-soft:     #2a2a3e;

    --text:          #e8e8f2;
    --text-soft:     #b6b6cc;
    --text-muted:    #9494ae;
    --text-faint:    #74748e;
    --text-invert:   #16161f;

    --accent:        #a3a0d8;
    --accent-hover:  #b5b2e4;
    --accent-soft:   #2b2b45;
    --accent-line:   #43436a;
    --accent-text:   #b6b3e4;

    --second:        #7fc0b6;
    --second-hover:  #96d0c6;
    --second-soft:   #1f3334;
    --second-line:   #35514f;

    --gold:          #e0c58c;
    --gold-soft:     #332c1c;
    --gold-line:     #574a2e;
    --gold-text:     #e0c58c;

    --pos:      #5fc79b;
    --pos-soft: #17322a;
    --pos-line: #2c5546;
    --neg:      #f08b81;
    --neg-soft: #3a1f1d;
    --neg-line: #5e332f;
    --warn:     #e0b263;
    --warn-soft:#332a18;
    --warn-line:#544428;
    --info:     #7fa8e8;
    --info-soft:#1c2740;
    --info-line:#2f4266;

    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh-md: 0 2px 8px rgba(0,0,0,.45);
    --sh-lg: 0 12px 32px rgba(0,0,0,.55);
    --sh-xl: 0 24px 64px rgba(0,0,0,.6);
    --ring: 0 0 0 3px rgba(163,160,216,.28);
}

/* ------------------------------------------------------------- 3. Grunnlag */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    max-width: none;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sidene har ulik bredde. Innhold sentreres i en felles ramme. */
.page,
.container,
.top-panels,
.search-form,
.results-header,
.results-table,
.stats,
.coverage,
.cohort-box,
.dl-box,
.selection-bar,
.actions-head,
.pagination,
.table-panel,
.bg-tasks,
#results-container > .panel {
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: .005em;
    margin: 0;
    font-weight: 600;
}
h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-base); }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

p { margin: 0 0 var(--s3); }

code, .mono, .col-orgnr, .col-naeringskode, .code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent-soft); color: var(--accent-text); }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-sm);
}

/* ----------------------------------------------------------- 4. Merkemerke */

.atlas-mark {
    width: 1em; height: 1em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url('assets/img/frei-mark-blue.svg') center / contain no-repeat;
    mask: url('assets/img/frei-mark-blue.svg') center / contain no-repeat;
}

/* h1 arver ikke lenger asterisken automatisk. I et produkt står merket i
   toppbaren, ikke foran hver overskrift. */
h1::before { content: none; }

/* ------------------------------------------------------------ 5. Toppbaren */

.topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: var(--s5);
    height: var(--topbar-h);
    padding: 0 var(--s5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(180%) blur(12px);
}
:root[data-theme="dark"] .topbar { background: var(--surface); }

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 0;
    height: 22px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 22px;
    color: var(--text);
    text-decoration: none;
    flex: 0 0 auto;
}
.topbar .brand:hover { text-decoration: none; color: var(--text); }
a.frei-logo { text-decoration: none; }

/* Mal: Frei | atlas. Lik luft på begge sider av streken.
   Josefin sitter høyt i em-boksen, så navnet skyves 2 px ned for å treffe
   midten av logoen. */
.frei-logo {
    display: block;
    /* SVG-en er 2:1. Boksen må følge merket, ellers blir det død
       luft til høyre som teller som avstand til streken. */
    width: 44px;
    height: 22px;
    flex: 0 0 auto;
    background: url('assets/img/frei-logo-marian.svg') center / contain no-repeat;
}
:root[data-theme="dark"] .frei-logo {
    background-image: url('assets/img/frei-logo-peri.svg');
}
.brand-rule {
    width: 1px;
    height: 22px;
    flex: 0 0 auto;
    margin: 0 7.2px;
    background: var(--line);
}
.brand-name {
    display: block;
    height: 22px;
    line-height: 22px;
    transform: translateY(2px);
}

.topbar .services {
    display: flex;
    align-items: center;
    gap: 2px;
}
.topbar .services a {
    padding: 6px var(--s3);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.topbar .services a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.topbar .services a.on { background: var(--accent-soft); color: var(--accent-text); }

.topbar .spacer, .spacer { flex: 1 1 auto; }

.topbar .account,
.user-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-size: var(--fs-small);
    color: var(--text-muted);
}
.topbar .account #user-email { font-variant-numeric: tabular-nums; }

/* Verktøyknapper helt til høyre: språk, tema, utlogging */
.tb-tools { display: flex; align-items: center; gap: var(--s2); }

.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    min-width: 30px;
    padding: 0 var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
}
.iconbtn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-strong); }
.iconbtn svg { width: 15px; height: 15px; }

.langswitch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
}
.langswitch button {
    padding: 3px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: all var(--t-fast);
}
.langswitch button:hover { color: var(--text); }
.langswitch button.on { background: var(--surface); color: var(--accent-text); box-shadow: var(--sh-sm); }

/* -------------------------------------------------------- 6. Sidehode/hero */

.pagehead {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--s7) var(--s5) var(--s5);
    display: flex;
    align-items: flex-end;
    gap: var(--s5);
    flex-wrap: wrap;
}
.pagehead .ph-text { min-width: 0; flex: 1 1 380px; }
.pagehead .eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--second);
    margin-bottom: 6px;
}
.pagehead h1 { margin-bottom: 4px; }
.pagehead .subtitle,
.subtitle {
    color: var(--text-muted);
    font-size: var(--fs-body);
    margin: 0;
}
.pagehead .ph-actions {
    display: flex;
    gap: var(--s2);
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

.page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--s5) var(--s9);
}

/* ---------------------------------------------------------------- 7. Flater */

.panel,
.search-form,
.results-table,
.table-panel,
.dl-box,
.cohort-box,
.coverage,
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: none;
}

.panel {
    padding: var(--s5);
    margin-bottom: var(--s4);
}
.panel > h2 {
    font-size: var(--fs-h3);
    margin: 0 0 var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line-soft);
}

.panel-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0 0 var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 { margin: 0; padding: 0; border: 0; font-size: var(--fs-h3); }

/* --------------------------------------------------------------- 8. Knapper */

button, .btn {
    font-family: var(--font-body);
}

.btn,
button.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-export,
.btn-hubspot,
.btn-map,
.btn-add-list,
.btn-save-search,
.btn-bulk-enrich,
.enrich-btn,
.zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--s4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--t-fast);
}

.btn-primary, button.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--sh-sm);
}
.btn-primary:hover, button.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] button.btn-primary { color: var(--ink-950); }

.btn-secondary, button.btn-secondary,
.btn-map, .btn-save-search, .zoom-btn {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text-soft);
}
.btn-secondary:hover, button.btn-secondary:hover,
.btn-map:hover, .btn-save-search:hover, .zoom-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--ink-300);
}

.btn-success, .btn-export, .btn-add-list {
    background: var(--second);
    border-color: var(--second);
    color: #fff;
    box-shadow: var(--sh-sm);
}
.btn-success:hover, .btn-export:hover, .btn-add-list:hover {
    background: var(--second-hover); border-color: var(--second-hover); color: #fff;
}
:root[data-theme="dark"] .btn-success,
:root[data-theme="dark"] .btn-export,
:root[data-theme="dark"] .btn-add-list { color: var(--ink-950); }

.btn-danger {
    background: transparent;
    border-color: var(--neg-line);
    color: var(--neg);
}
.btn-danger:hover { background: var(--neg-soft); }

.btn-hubspot, .btn-bulk-enrich, .enrich-btn {
    background: var(--second-soft);
    border-color: var(--second-line);
    color: var(--second);
}
.btn-hubspot:hover, .btn-bulk-enrich:hover, .enrich-btn:hover {
    background: var(--second); color: #fff; border-color: var(--second);
}

.btn-sm, .btn.btn-sm { height: 28px; padding: 0 var(--s3); font-size: var(--fs-small); }

button:disabled, .btn:disabled,
.btn-primary:disabled, .btn-secondary:disabled,
.btn-success:disabled, .btn-export:disabled,
.btn-hubspot:disabled, .btn-add-list:disabled {
    background: var(--surface-sunk);
    border-color: var(--line);
    color: var(--text-faint);
    cursor: not-allowed;
    box-shadow: none;
}

.button-row, .buttons, .list-actions {
    display: flex;
    gap: var(--s2);
    align-items: center;
    flex-wrap: wrap;
}

/* Lenke som ser ut som en lenke, brukt til hjelpetekster */
.docs-link, .clear-btn {
    background: none;
    border: 0;
    padding: 0;
    height: auto;
    color: var(--accent-text);
    font-family: var(--font-body);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.docs-link:hover, .clear-btn:hover { text-decoration: underline; text-underline-offset: 2px; background: none; }

/* ------------------------------------------------------- 9. Skjemaelementer */

.form-group { display: flex; flex-direction: column; min-width: 0; }

/* I paneler stables feltene, og da trenger de luft. I filterradene på Søk
   ligger de side om side og styres av .filter-row, så unntaket er der. */
.panel .form-group,
.panel .checkbox-group,
.panel .radio-group { margin-bottom: var(--s4); }
.panel .filter-row .form-group { margin-bottom: 0; }
.panel .button-row,
.panel .buttons { margin-top: var(--s4); }
.panel > .button-row:first-child { margin-top: 0; }
.panel > h2:not(:first-child) { margin-top: var(--s6); }

.form-group label,
.field-label,
label.gate,
.zone-label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.form-group label a { text-transform: none; letter-spacing: 0; font-weight: 600; }

input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
select,
textarea,
.form-group input,
.form-group select,
.search-box {
    height: 34px;
    padding: 0 var(--s3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    width: 100%;
    min-width: 0;
}
textarea { height: auto; padding: var(--s2) var(--s3); line-height: 1.5; }

select {
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2370708c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 12px 12px;
}
:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%239494ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 12px 12px;
}

input:focus, select:focus, textarea:focus,
.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

input[type="checkbox"], input[type="radio"] {
    width: 15px; height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
}

.range, .employee-range { display: flex; align-items: center; gap: 6px; }
.range span { color: var(--text-faint); font-size: var(--fs-small); }
.range input { min-width: 0; }
.range select { flex: 0 0 auto; width: auto; min-width: 104px; }

.check, .form-group label.check, .checkbox-group, .form-group label.gate, .gate, .colsel-all {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-base);
    color: var(--text-soft);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 0;
}
.checkbox-group label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-base); margin: 0; color: var(--text-soft); }

.radio-group { display: flex; flex-direction: column; gap: 6px; }
.radio-group label {
    display: flex; align-items: center; gap: 7px;
    text-transform: none; letter-spacing: 0; font-weight: 400;
    font-size: var(--fs-base); color: var(--text-soft); margin: 0; cursor: pointer;
}

.hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--ink-200);
    color: var(--surface);
    font-size: 9px;
    font-weight: 700;
    cursor: help;
    vertical-align: 1px;
    letter-spacing: 0;
}
:root[data-theme="dark"] .hint { background: var(--line-strong); color: var(--text-soft); }

/* ------------------------------------------- 10. Søkeflate og filterarkitektur */

.search-form {
    padding: var(--s4) var(--s5) var(--s5);
    margin-bottom: var(--s4);
}

/* Toppraden: lagret visning, fritekst, primærhandling. Denne raden er
   alltid synlig, resten kan gjemmes. */
.filter-row {
    display: flex;
    gap: var(--s3);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--s3);
}
.filter-row:last-child { margin-bottom: 0; }
.filter-row .form-group { flex: 1 1 190px; }
.filter-row .form-group.grow { flex: 3 1 340px; }
.filter-row .form-group.shrink { flex: 0 0 auto; }
.filter-row .view-picker { flex: 0 0 236px; }

.filter-row.primary {
    align-items: center;
    gap: var(--s2);
    padding-bottom: var(--s4);
    margin-bottom: var(--s4);
    border-bottom: 1px solid var(--line-soft);
}
.filter-row.primary .form-group.grow { position: relative; }
.filter-row.primary input#q {
    height: 42px;
    font-size: var(--fs-lead);
    padding-left: 38px;
    border-radius: var(--r-md);
}
.filter-row.primary .searchwrap { position: relative; flex: 3 1 340px; display: flex; }
.filter-row.primary .searchwrap svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}
.filter-row.primary .btn-primary { height: 42px; padding: 0 var(--s5); }
.filter-row.primary .btn-secondary { height: 42px; }
.filter-row.primary select { height: 42px; border-radius: var(--r-md); }

.more {
    padding-top: var(--s4);
    margin-top: var(--s1);
    border-top: 1px solid var(--line-soft);
}

.gates { display: flex; gap: var(--s3); align-items: center; height: 34px; }
.form-group label.gate, .gate {
    font-size: var(--fs-small);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--text-muted);
}

/* Aktive filtre som chips. Dette er det største grepet på Søk: du ser hva du
   faktisk har filtrert på uten å lese gjennom tolv felt. */
.chipbar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
    min-height: 0;
    margin-top: var(--s3);
}
.chipbar:empty { display: none; }
.chipbar .chiplabel {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-right: 2px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 var(--s2) 0 10px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
}
.chip b { font-weight: 700; }
.chip .x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border: 0; padding: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
}
.chip .x:hover { opacity: 1; background: rgba(0,0,0,.08); }
:root[data-theme="dark"] .chip .x:hover { background: rgba(255,255,255,.12); }

/* Autocomplete */
.autocomplete-wrapper { position: relative; }
.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    z-index: 1000;
    display: none;
    padding: var(--s1);
}
.autocomplete-dropdown.show { display: block; }
.autocomplete-item {
    padding: 7px 10px;
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item.highlighted { background: var(--accent-soft); color: var(--accent-text); }
.autocomplete-empty { padding: 10px; color: var(--text-faint); font-size: var(--fs-base); }

/* --------------------------------------------------- 11. Resultatoverskrift */

.results-header {
    display: flex;
    align-items: center;
    gap: var(--s3);
    justify-content: space-between;
    padding: var(--s5) 0 var(--s3);
    flex-wrap: wrap;
}
.result-count {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--text);
}
.result-count strong, #total-count {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.result-count #showing-info {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-muted);
}

.stats {
    font-size: var(--fs-micro);
    color: var(--text-faint);
    font-family: var(--font-mono);
    padding: var(--s2) 0 0;
    margin: 0;
}

.actions-head {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: var(--s5) 0 var(--s2);
}

/* ---------------------------------------------------------- 12. Dekningsbånd */

.coverage {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin-bottom: var(--s4);
    overflow: hidden;
    background: var(--surface);
}
.coverage .cov-title {
    flex: 0 0 100%;
    padding: var(--s3) var(--s4) var(--s2);
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--second);
    background: var(--surface-sunk);
}
.coverage .cov {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--s3) var(--s4);
    border-right: 1px solid var(--line-soft);
    min-width: 0;
}
.coverage .cov:last-child { border-right: 0; }
.cov-label {
    font-size: var(--fs-micro);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cov-value {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.cov-pct { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.cov-bar { display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cov-bar span { display: block; height: 100%; background: var(--second); border-radius: 2px; }
.cov.low .cov-bar span { background: var(--warn); }
.cov.low .cov-pct { color: var(--warn); }
.cov-denom { font-size: 10px; color: var(--text-faint); }

/* --------------------------------------------------------------- 13. Tabell */

.results-table, .results-table-container, .data-table-container {
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.results-table-container, .data-table-container { max-height: 620px; }

table, .results-table table, .data-table, .fin-table, .branch-table, .jobs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-base);
}

thead th, .results-table th, .data-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-head);
    padding: 9px var(--s3);
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
th .unit { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); }

th.sortable, .results-table th[onclick], .data-table th[onclick] {
    cursor: pointer;
    user-select: none;
    transition: color var(--t-fast), background var(--t-fast);
}
th.sortable:hover, .results-table th[onclick]:hover { color: var(--text); background: var(--surface-hover); }
.sort-arrow, .sort-icon {
    display: inline-block;
    margin-left: 5px;
    color: var(--text-faint);
    font-size: 10px;
    opacity: .5;
}
th.asc .sort-arrow::after { content: '↑'; }
th.desc .sort-arrow::after { content: '↓'; }
th.asc .sort-arrow, th.desc .sort-arrow, th.sorted .sort-icon { opacity: 1; color: var(--accent); }

td, .results-table td, .data-table td {
    padding: 8px var(--s3);
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    vertical-align: middle;
}
tbody tr { transition: background var(--t-fast); }
tbody tr:hover, .results-table tbody tr:hover { background: var(--surface-hover); }
tbody tr.selected, tr.selected { background: var(--accent-soft); }
tbody tr:last-child td { border-bottom: 0; }

.col-orgnr { white-space: nowrap; color: var(--text-muted); font-size: var(--fs-small); }
.col-navn {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    cursor: pointer;
}
.col-navn:hover { color: var(--accent); }
.col-orgform { text-align: center; }
.col-naeringskode { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.col-ansatte, .col-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-checkbox, .col-detail { width: 32px; padding-left: var(--s4); padding-right: 0; }
.col-detail { padding-left: var(--s2); }

.detail-btn {
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-faint);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--t-fast);
}
.detail-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

.branch-toggle {
    margin-left: 5px;
    font-size: 9px;
    color: var(--text-faint);
    text-decoration: none;
}
.branch-toggle:hover { color: var(--accent); text-decoration: none; }
.branch-row > .branch-cell { background: var(--surface-sunk); padding: 0 0 0 var(--s8); }
.branch-table { font-size: var(--fs-small); }
.branch-table th { background: transparent; border-bottom: 1px solid var(--line-soft); position: static; }
.branch-table td { padding: 6px var(--s3); }

.muted { color: var(--text-faint); }
.chg-up { color: var(--pos); font-weight: 600; }
.chg-down { color: var(--neg); font-weight: 600; }
.year-stale { color: var(--warn); }
.year-current { color: var(--text-muted); }
.implausible { color: var(--warn); }

/* Merker og status */
.badge, .crm-badge, .badge-enhet, .badge-under, .badge-contacts, .match-badge,
.badge-action, .selected-tag, .filter-tag, .tech-pill, .col-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    color: var(--text-soft);
    font-size: var(--fs-micro);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .01em;
}
.badge-enhet { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.badge-under { background: var(--surface-sunk); }
.badge-contacts { background: var(--second-soft); border-color: var(--second-line); color: var(--second); }
.crm-badge { background: var(--second-soft); border-color: var(--second-line); color: var(--second); }

.email-flag, .email-unconfirmed { color: var(--warn); font-size: var(--fs-micro); }
.warn-label { color: var(--warn); font-weight: 600; }
.warn-value { color: var(--warn); }

/* Paginering */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--s3);
    padding: var(--s5) 0;
}
.pagination > button,
.pagination > select { flex: 0 0 auto; width: auto; }
.page-info {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--fs-base);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Utvalgslinje, festet nederst */
/* Festet nederst i vinduet, ikke i dokumentflyten: den skal følge deg mens du
   blar gjennom treffene, og den ligger over tabellen i DOM-en. */
.selection-bar {
    position: fixed;
    left: 50%;
    bottom: var(--s5);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 2 * var(--s5));
    z-index: 800;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    margin-top: var(--s4);
    background: var(--ink-900);
    color: #fff;
    border: 1px solid var(--ink-800);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    flex-wrap: wrap;
}
:root[data-theme="dark"] .selection-bar { background: var(--surface-raised); border-color: var(--line-strong); }
.selection-bar .count {
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    font-weight: 600;
    padding-right: var(--s3);
}
.selection-bar .divider { width: 1px; height: 20px; background: rgba(255,255,255,.18); }
:root[data-theme="dark"] .selection-bar .divider { background: var(--line-strong); }
.selection-bar select {
    height: 30px;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: #fff;
    width: auto;
    min-width: 150px;
}
:root[data-theme="dark"] .selection-bar select { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.selection-bar select option { color: var(--ink-900); }
.selection-bar .btn-bulk-enrich,
.selection-bar .btn-add-list,
.selection-bar .btn-save-search,
.selection-bar .btn-secondary {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    color: #fff;
    height: 30px;
}
.selection-bar .btn-bulk-enrich:hover,
.selection-bar .btn-add-list:hover,
.selection-bar .btn-save-search:hover,
.selection-bar .btn-secondary:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.35); }
.selection-bar .btn-add-list { background: var(--second); border-color: var(--second); }
.selection-bar .btn-add-list:hover { background: var(--second-hover); border-color: var(--second-hover); }
.selection-bar .btn-add-list:disabled { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.4); }
.selection-bar button { height: 30px; }
.selection-bar label { color: rgba(255,255,255,.8); }
:root[data-theme="dark"] .selection-bar label { color: var(--text-soft); }

.select-all-banner {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    background: var(--accent-soft);
    border-bottom: 1px solid var(--accent-line);
    font-size: var(--fs-base);
    color: var(--accent-text);
}

/* ------------------------------------------- 14. Handlingsbokser (nedlasting) */

.dl-box, .cohort-box {
    margin-bottom: var(--s3);
    overflow: hidden;
}
.dl-head, .cohort-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface-sunk);
    border-bottom: 1px solid transparent;
}
.dl-box:has(.dl-body.open) .dl-head,
.cohort-box:has(.cohort-body.open) .cohort-head { border-bottom-color: var(--line-soft); }
.dl-head .title, .cohort-head .title {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text);
}
.dl-head .src, .cohort-head .src, .section-src {
    font-size: var(--fs-small);
    color: var(--text-muted);
}
.dl-head button, .cohort-head button { height: 30px; font-size: var(--fs-small); }

.dl-body, .cohort-body, #enr-jobs { display: none; padding: var(--s4); }
.dl-body.open, .cohort-body.open, #enr-jobs.open { display: block; }

.dl-opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s5);
}
.dl-group h4 {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--second);
    margin: 0 0 var(--s2);
}
.dl-opt {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: 7px 0;
    font-size: var(--fs-base);
    color: var(--text);
    cursor: pointer;
}
.dl-opt input { margin-top: 3px; }
.dl-opt .sub { display: block; font-size: var(--fs-small); color: var(--text-muted); font-weight: 400; }
.dl-opt span { font-weight: 600; }

.dl-summary {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-top: var(--s4);
    margin-top: var(--s4);
    border-top: 1px solid var(--line-soft);
    flex-wrap: wrap;
    font-size: var(--fs-base);
    color: var(--text-muted);
}
.dl-err, .cohort-err { color: var(--neg); font-size: var(--fs-base); }

.dl-warn {
    padding: var(--s3) var(--s4);
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: var(--fs-base);
    margin: var(--s3) 0;
}
.dl-warn p { margin: 0 0 var(--s2); }
.dl-warn p:last-child { margin: 0; }
.dl-warn code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; }

.imp-list { margin: var(--s3) 0; font-size: var(--fs-base); }
.imp-list label { display: flex; align-items: center; gap: var(--s2); }
.imp-list input { width: auto; flex: 1 1 240px; }
.imp-list .sub { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-top: 5px; }
.imp-what { font-size: var(--fs-base); color: var(--text-soft); }
.imp-result { font-size: var(--fs-base); }

.enr-stage, .enr-step {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 6px 0;
    font-size: var(--fs-base);
    color: var(--text-soft);
}
.enr-stage .done, .done { color: var(--pos); }
.failed { color: var(--neg); }
.queued { color: var(--text-faint); }
.running { color: var(--info); }

.jobs-table { font-size: var(--fs-small); }
.job-status { font-weight: 600; }

/* Kohort */
.cohort-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.cohort-card {
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}
.cohort-card h4 {
    font-size: var(--fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--second);
    margin: 0 0 var(--s2);
}
.cohort-row { display: flex; justify-content: space-between; gap: var(--s2); padding: 3px 0; font-size: var(--fs-base); }
.cohort-row .k { color: var(--text-muted); }
.cohort-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.cohort-note { font-size: var(--fs-small); color: var(--text-faint); margin-top: var(--s2); }

/* ------------------------------------------------------- 15. Detaljpanel */

.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28,28,41,.4);
    backdrop-filter: blur(2px);
    z-index: 1500;
    display: none;
    opacity: 0;
    transition: opacity var(--t);
}
.panel-overlay.open { display: block; opacity: 1; }

.detail-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--sh-xl);
    z-index: 1600;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t);
}
.detail-panel.open { transform: translateX(0); }

.panel-header {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}
.panel-header h2 { font-size: var(--fs-h2); margin: 0; }
.panel-header .meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px; }
.panel-header-controls { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.panel-close-btn {
    width: 30px; height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.panel-close-btn:hover { background: var(--surface-hover); color: var(--text); }

.panel-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s5); }
.panel-loading { padding: var(--s8); text-align: center; color: var(--text-muted); }

.panel-section { margin-bottom: var(--s6); }
.panel-section-title {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--second);
    padding-bottom: var(--s2);
    margin-bottom: var(--s3);
    border-bottom: 1px solid var(--line-soft);
}
.panel-section-content { font-size: var(--fs-base); }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); }
.field-item { min-width: 0; }
.field-label {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: .07em;
}
.field-value { font-size: var(--fs-base); color: var(--text); word-break: break-word; }

.contacts-list { display: flex; flex-direction: column; gap: var(--s2); }
.contact-card {
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}
.contact-name { font-weight: 600; font-size: var(--fs-body); }
.contact-role { font-size: var(--fs-small); color: var(--text-muted); }
.contact-links { display: flex; gap: var(--s3); margin-top: var(--s2); font-size: var(--fs-small); }
.fratraadt { color: var(--text-faint); text-decoration: line-through; }

.role-group { margin-bottom: var(--s3); }
.role-group-title {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.role-entry { padding: 4px 0; font-size: var(--fs-base); border-bottom: 1px solid var(--line-soft); }
.role-entry:last-child { border-bottom: 0; }
.role-type { color: var(--text-muted); font-size: var(--fs-small); }

.fin-table-wrap { overflow-x: auto; }
.fin-table { font-size: var(--fs-small); }
.fin-table th, .fin-table td { padding: 6px var(--s2); text-align: right; white-space: nowrap; }
.fin-table th:first-child, .fin-table td:first-child { text-align: left; }
.fin-table th { position: static; }
.fin-ratio-head { background: var(--surface-sunk); font-weight: 700; }
.fin-ratio { color: var(--text-muted); }
.fin-delta { font-size: var(--fs-micro); }
.fin-unit { font-size: var(--fs-micro); color: var(--text-faint); font-weight: 400; }

.tech-section { margin-top: var(--s3); }
.tech-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tech-pill { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.tech-pill.paid { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-text); }

.panel-branch-table { width: 100%; font-size: var(--fs-small); }
.panel-branch-table th { position: static; }

/* ---------------------------------------------------------------- 16. Kart */

.map-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(28,28,41,.5);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s6);
}
.map-modal-overlay.open { display: flex; }
.map-modal {
    display: flex;
    flex-direction: column;
    width: min(1280px, 100%);
    height: min(820px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    overflow: hidden;
}
.map-modal-header {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}
.map-modal-header h2 { font-size: var(--fs-h3); margin: 0; }
.map-modal-body { flex: 1 1 auto; display: flex; min-height: 0; }
.map-canvas { flex: 1 1 auto; min-height: 0; }
.map-list { width: 320px; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface-sunk); }
.map-list-item { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-base); cursor: pointer; }
.map-list-item:hover { background: var(--surface-hover); }
.map-modal-controls { display: flex; gap: var(--s2); align-items: center; }
.map-modal-info { font-size: var(--fs-small); color: var(--text-muted); }
.map-empty { padding: var(--s8); text-align: center; color: var(--text-muted); }
.map-popup { font-family: var(--font-body); font-size: var(--fs-base); }
.map-legend {
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--fs-small);
    box-shadow: var(--sh-md);
}

/* Leaflet i Frei-drakt */
.leaflet-container { font-family: var(--font-body); background: var(--surface-sunk); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
}
.leaflet-bar a {
    background: var(--surface);
    color: var(--text-soft);
    border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--surface-hover); color: var(--text); }
:root[data-theme="dark"] .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }

/* ---------------------------------------------- 17. Opplasting (Match/Vask) */

.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s7) var(--s5);
    margin-bottom: var(--s7);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface-sunk);
    text-align: center;
    cursor: pointer;
    transition: all var(--t);
}
.upload-zones .upload-area { margin-bottom: 0; }
.upload-area:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-area.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: scale(1.005);
}
.upload-area.has-file { border-style: solid; border-color: var(--pos-line); background: var(--pos-soft); }
.upload-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 19px;
    color: var(--text-muted);
}
.upload-area.has-file .upload-icon { border-color: var(--pos-line); color: var(--pos); }
.upload-text { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.upload-hint { font-size: var(--fs-small); color: var(--text-muted); }
.file-name { font-size: var(--fs-small); font-weight: 600; color: var(--pos); font-family: var(--font-mono); }

input[type="file"] { display: none; }

.upload-zones { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.upload-zones.two { grid-template-columns: 1fr 1fr; }
.zone-wrap { min-width: 0; }
.zone-label {
    display: block;
    margin-bottom: 6px;
}

.file-info {
    display: flex;
    gap: var(--s5);
    padding: var(--s3) var(--s4);
    margin-top: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
    font-size: var(--fs-small);
    color: var(--text-muted);
}
.info-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.progress-container { margin-top: var(--s4); display: none; }
.progress-container.show, .progress-container[style*="block"] { display: block; }
.progress-bar, .progress-bar-outer {
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
.progress-fill, .progress-bar-inner {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width .3s var(--ease);
}
.progress-text { margin-top: 6px; font-size: var(--fs-small); color: var(--text-muted); }

/* ----------------------------------------------------- 18. Match-spesifikt */

.container {
    display: grid;
    grid-template-columns: minmax(340px, 400px) 1fr;
    gap: var(--s4);
    align-items: start;
}
.top-panels {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: var(--s4);
    align-items: stretch;
    margin-bottom: var(--s4);
}
.top-panels > .panel {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.top-panels .upload-zones,
.top-panels .zone-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.top-panels .upload-area,
.top-panels .empty-state {
    flex: 1 1 auto;
}

/* Bransjevelgeren trenger bredde på treet, regionvelgeren på kartet. */
.container.picker { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); }
.container.regionpick { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 400px); }
.container.regionpick #map { height: 560px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.code-tree, .county-list { max-height: 560px; }
.map-legend { margin-top: var(--s3); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); }
.stat-card {
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}
.stat-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

.confidence-breakdown { margin-bottom: var(--s4); }
.confidence-row {
    display: grid;
    grid-template-columns: 180px 1fr 60px;
    align-items: center;
    gap: var(--s3);
    padding: 5px 0;
    cursor: pointer;
    border-radius: var(--r-sm);
}
.confidence-row:hover { background: var(--surface-hover); }
.confidence-label { font-size: var(--fs-small); color: var(--text-soft); }
.confidence-bar-container { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.confidence-bar { height: 100%; border-radius: 4px; background: var(--accent); }
.confidence-count { font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

.confidence-high, .match-high { color: var(--pos); }
.confidence-medium, .match-medium { color: var(--second); }
.confidence-low, .match-low { color: var(--warn); }
.confidence-very_low, .match-very_low { color: var(--neg); }
.confidence-none, .match-none { color: var(--text-faint); }

.confidence-high .confidence-bar, .confidence-row.confidence-high .confidence-bar { background: var(--pos); }
.confidence-medium .confidence-bar { background: var(--second); }
.confidence-low .confidence-bar { background: var(--warn); }
.confidence-very_low .confidence-bar { background: var(--neg); }

/* Handlingsmerker. Fargene betyr noe, så de får sin egen skala. */
.badge-ok, .action-ok { background: var(--pos-soft); border-color: var(--pos-line); color: var(--pos); }
.badge-use_match, .action-use_match { background: var(--pos-soft); border-color: var(--pos-line); color: var(--pos); }
.badge-use_existing, .action-use_existing { background: var(--second-soft); border-color: var(--second-line); color: var(--second); }
.badge-replace_orgnr, .action-replace_orgnr { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.badge-review_match, .action-review_match { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.badge-review_mismatch, .action-review_mismatch { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.badge-no_match, .action-no_match { background: var(--neg-soft); border-color: var(--neg-line); color: var(--neg); }
.badge-foreign_skip, .action-foreign_skip { background: var(--surface-sunk); color: var(--text-muted); }
.badge-vessel_skip, .action-vessel_skip { background: var(--surface-sunk); color: var(--text-muted); }

.filter-controls {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
    padding: var(--s3) 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: var(--s3);
}
.filter-controls label { font-size: var(--fs-small); color: var(--text-muted); }
.filter-controls select { width: auto; min-width: 180px; height: 30px; }
.filter-tag {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-text);
    cursor: pointer;
}
.results-count { padding: var(--s3) 0; font-size: var(--fs-small); color: var(--text-muted); }

/* Hjelpepanel */
.docs-overlay {
    position: fixed; inset: 0;
    background: rgba(28,28,41,.4);
    z-index: 1500;
    display: none;
}
.docs-overlay.open { display: block; }
.docs-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(620px, 100vw);
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--sh-xl);
    z-index: 1600;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t);
}
.docs-panel.open { transform: translateX(0); }
.docs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}
.docs-panel-header h2 { font-size: var(--fs-h3); margin: 0; }
.docs-panel-close {
    width: 30px; height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.docs-panel-close:hover { background: var(--surface-hover); color: var(--text); }
.docs-panel-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s5); font-size: var(--fs-body); line-height: 1.65; }
.docs-panel-body h2 { font-size: var(--fs-h3); margin: var(--s5) 0 var(--s2); }
.docs-panel-body h3 { font-size: var(--fs-body); margin: var(--s4) 0 var(--s2); }
.docs-panel-body code { background: var(--surface-sunk); padding: 1px 5px; border-radius: 3px; font-size: var(--fs-small); }
.docs-lang-toggle {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.docs-lang-btn {
    padding: 3px 9px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 700;
    cursor: pointer;
}
.docs-lang-btn.active { background: var(--accent-soft); color: var(--accent-text); }

/* ------------------------------------------------------ 19. Vask-spesifikt */

.table-panel { padding: 0; overflow: hidden; margin-bottom: var(--s4); }
.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
    flex-wrap: wrap;
}
.table-controls h2 { font-size: var(--fs-h3); }

.toggle-group {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.toggle-btn {
    height: 26px;
    padding: 0 var(--s3);
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}
.toggle-btn.active { background: var(--accent-soft); color: var(--accent-text); }

.change-stats { display: flex; gap: var(--s4); }
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-muted); }
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dot-changed { background: var(--warn); }
.dot-new { background: var(--pos); }
.dot-duplicate { background: var(--neg); }
.dot-empty { background: var(--ink-300); }

.cell-changed { background: var(--warn-soft); }
.cell-duplicate { background: var(--neg-soft); }
.col-new, th.col-new { background: var(--pos-soft); }

.column-selector { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
.colsel-header { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.colsel-count { font-size: var(--fs-small); color: var(--text-muted); }
.colsel-legend { display: flex; gap: var(--s3); margin-left: auto; }
.colsel-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.col-chip { cursor: pointer; transition: all var(--t-fast); }
.col-chip:hover { border-color: var(--accent-line); }
.col-chip.selected { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.col-chip.deselected { opacity: .5; }
.col-chip-new { background: var(--pos-soft); border-color: var(--pos-line); color: var(--pos); }
.col-chip-empty { opacity: .55; }

.op-history { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.op-history h3 { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--second); margin-bottom: var(--s2); }
.op-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 6px var(--s3);
    margin-bottom: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
    font-size: var(--fs-small);
}
.op-desc { color: var(--text-soft); }

.bg-tasks { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-sunk); }
.bg-tasks-title { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s2); }
.bg-task { display: flex; align-items: center; gap: var(--s3); padding: 5px 0; font-size: var(--fs-small); }
.bg-task-head { display: flex; align-items: center; gap: var(--s2); min-width: 200px; }
.bg-task-label { color: var(--text-soft); }
.bg-task-status { color: var(--text-muted); font-size: var(--fs-micro); }
.bg-task-bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bg-task-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s var(--ease); }
.bg-task-btn { height: 24px; padding: 0 var(--s2); font-size: var(--fs-micro); }

.data-table { font-size: var(--fs-small); }
.data-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------- 20. Bransje- og regionvelger */

.saved-lists { display: flex; flex-direction: column; gap: var(--s3); }
.list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: all var(--t-fast);
}
.list-item:hover { border-color: var(--accent-line); background: var(--surface-hover); }
.list-item.active, .list-item.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}
.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: 0;
}
.list-name {
    font-weight: 600;
    font-size: var(--fs-body);
    line-height: 1.35;
    min-width: 0;
}
.list-header .zoom-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 auto;
}
.list-info, .list-codes, .count, .code-count, .selection-count {
    font-size: var(--fs-small);
    color: var(--text-muted);
}
.list-actions {
    display: flex;
    gap: var(--s2);
    align-items: stretch;
    flex-wrap: nowrap;
    margin-top: var(--s1);
}
.list-actions > button {
    flex: 1 1 0;
    min-width: 0;
}
.selection-count { font-weight: 600; color: var(--text); }

.selected-codes, .selected-municipalities {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: var(--s3);
    min-height: 54px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}
.selected-municipalities .empty-state,
.selected-codes .empty-state {
    width: 100%;
    padding: var(--s5);
}
.selected-tag {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-text);
    height: 22px;
}
.selected-tag .remove, .remove {
    cursor: pointer;
    opacity: .6;
    font-weight: 700;
    margin-left: 2px;
}
.selected-tag .remove:hover, .remove:hover { opacity: 1; }

.panel .search-box { width: 100%; margin-bottom: var(--s3); }

.code-tree, .county-list {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-bottom: var(--s2);
}
.county-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 9px var(--s3);
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--fs-base);
    cursor: pointer;
}
.county-item:hover { background: var(--surface-hover); }
.county-item.selected { background: var(--accent-soft); }
.county-item .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.county-item .count { color: var(--text-faint); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

.code-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 5px var(--s3);
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--fs-base);
    cursor: pointer;
}
.code-item:hover { background: var(--surface-hover); }
.code-item.selected { background: var(--accent-soft); }
.code-item .code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-muted); min-width: 62px; }
.code-item .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.level-2 { padding-left: var(--s5); }
.level-3 { padding-left: var(--s7); }
.level-4 { padding-left: calc(var(--s7) + var(--s4)); }
.level-5 { padding-left: calc(var(--s7) + var(--s7)); }
.expand-btn {
    width: 18px; height: 18px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-faint);
    font-size: 10px;
    cursor: pointer;
    padding: 0;
}
.expand-btn:hover { background: var(--line-soft); color: var(--text); }

.color-box { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.lasso-active { cursor: crosshair; }

/* --------------------------------------------------------- 21. Tilstander */

.empty-state, .no-results, .loading, .panel-loading, .enrich-loading, .cohort-err {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s8) var(--s5);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-body);
}
.empty-state .es-mark, .no-results .es-mark {
    width: 26px; height: 26px;
    background: var(--ink-300);
    -webkit-mask: url('assets/img/frei-mark-blue.svg') center / contain no-repeat;
    mask: url('assets/img/frei-mark-blue.svg') center / contain no-repeat;
    margin-bottom: var(--s1);
}
.empty-state strong, .no-results strong { color: var(--text); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.empty-state .es-hint { font-size: var(--fs-small); color: var(--text-faint); max-width: 360px; }

.loading::after, .panel-loading::after {
    content: '';
    width: 18px; height: 18px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.unavailable {
    flex: 1 1 100%;
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: var(--fs-small);
}

.hidden { display: none !important; }

/* Skeleton for laster-tilstand i tabell */
.skel {
    display: block;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --------------------------------------------------- 22. Demo og bunnlinje */

#app-footer, footer#app-footer {
    max-width: var(--maxw);
    margin: var(--s7) auto 0 !important;
    padding: var(--s4) var(--s5) !important;
    border-top: 1px solid var(--line);
    color: var(--text-faint) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--fs-micro) !important;
    text-align: center;
}

/* Portene fra dagens app beholdes */
body:not(.adv) .adv-only { display: none !important; }
body:not(.admin) .admin-only { display: none !important; }

/* ------------------------------------------------------------ 23. Mindre skjerm */

@media (max-width: 1100px) {
    .container, .top-panels { grid-template-columns: 1fr; }
    .map-list { display: none; }
    .upload-zones.two { grid-template-columns: 1fr; }
    .container.picker,
    .container.regionpick { grid-template-columns: 1fr; }
    .container.regionpick #map { height: 420px; }
}

@media (max-width: 760px) {
    :root {
        --topbar-h: auto;
        --fs-h1: 22px;
        --fs-h2: 18px;
        --fs-display: 26px;
    }

    html, body { overflow-x: clip; }

    .topbar {
        flex-wrap: wrap;
        gap: var(--s2) var(--s3);
        padding: var(--s3) var(--s4);
        padding-top: max(var(--s3), env(safe-area-inset-top));
        height: auto;
    }
    .topbar .services {
        order: 3;
        flex: 1 1 100%;
        justify-content: stretch;
        gap: 4px;
    }
    .topbar .services a {
        flex: 1 1 0;
        justify-content: center;
        text-align: center;
        padding: 10px var(--s2);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .topbar .account #user-email { display: none; }
    .topbar .spacer { display: none; }
    .tb-tools { margin-left: auto; }

    .pagehead {
        padding: var(--s5) var(--s4) var(--s4);
        align-items: stretch;
        flex-direction: column;
        gap: var(--s3);
    }
    .pagehead .ph-text { flex: 1 1 auto; }
    .pagehead .ph-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .pagehead .ph-actions .btn-secondary,
    .pagehead .ph-actions button {
        min-height: 44px;
    }

    .page {
        padding: 0 var(--s4) calc(var(--s9) + env(safe-area-inset-bottom));
    }
    .search-form { padding: var(--s4); }

    .filter-row { gap: var(--s3); }
    .filter-row .form-group,
    .filter-row .form-group.grow,
    .filter-row .form-group.shrink,
    .filter-row .view-picker {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .filter-row .form-group.shrink label { display: none; }
    .filter-row .form-group.shrink { flex: 1 1 auto; }
    .filter-row.primary {
        align-items: stretch;
    }
    .filter-row.primary .view-picker,
    .filter-row.primary .searchwrap {
        flex: 1 1 100%;
        width: 100%;
    }
    .filter-row.primary .btn-primary,
    .filter-row.primary .btn-secondary {
        flex: 1 1 calc(50% - var(--s2));
        min-height: 44px;
        height: 44px;
    }
    .filter-row.primary #save-cohort-btn { flex: 1 1 100%; }

    .btn, button.btn, .btn-primary, .btn-secondary, .btn-danger {
        min-height: 44px;
    }

    .results-header { padding-top: var(--s4); }
    .result-count { font-size: var(--fs-h3); }

    .results-table table,
    .data-table,
    .results-table-container table {
        min-width: 880px;
    }
    .results-table-container, .data-table-container {
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    .coverage .cov { flex: 1 1 46%; border-right: 0; border-bottom: 1px solid var(--line-soft); }

    .pagination {
        flex-wrap: wrap;
        gap: var(--s2);
        justify-content: flex-start;
        padding: var(--s4) 0 calc(var(--s5) + env(safe-area-inset-bottom));
    }
    .pagination > button { min-height: 44px; }

    .selection-bar {
        left: var(--s3);
        right: var(--s3);
        bottom: max(var(--s3), env(safe-area-inset-bottom));
        transform: none;
        width: auto;
        max-width: none;
        border-radius: var(--r-lg);
        gap: var(--s2);
        padding: var(--s3);
    }
    .selection-bar .divider { display: none; }
    .selection-bar .count {
        flex: 1 1 100%;
        font-size: var(--fs-body);
        padding-right: 0;
    }
    .selection-bar select {
        flex: 1 1 100%;
        min-width: 0;
        height: 40px;
        min-height: 40px;
    }
    .selection-bar button,
    .selection-bar .btn-bulk-enrich,
    .selection-bar .btn-add-list,
    .selection-bar .btn-save-search,
    .selection-bar .btn-secondary {
        flex: 1 1 calc(50% - var(--s2));
        height: 40px;
        min-height: 40px;
    }
    .selection-bar label { min-height: 40px; }

    .dl-head, .cohort-head { flex-wrap: wrap; }
    .dl-head button, .cohort-head button { width: 100%; }

    .detail-panel,
    .docs-panel {
        width: 100vw;
        border-left: 0;
    }
    .panel-header, .docs-panel-header { padding: var(--s4); }
    .panel-close-btn, .docs-panel-close { width: 44px; height: 44px; }

    .map-modal-overlay { padding: 0; align-items: stretch; }
    .map-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    .container.regionpick #map { height: 280px; }

    .confidence-row { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }

    .auth { grid-template-columns: 1fr; }

    input, select, textarea { font-size: 16px; } /* unngå iOS-zoom ved fokus */
}

@media (max-width: 480px) {
    .frei-logo { width: 36px; height: 18px; }
    .brand-rule { height: 18px; margin: 0 6px; }
    .topbar .brand, .brand-name { height: 18px; line-height: 18px; font-size: 16px; }

    .coverage .cov { flex: 1 1 100%; }
}

@media print {
    .topbar, .selection-bar, .search-form, .pagehead .ph-actions { display: none !important; }
    body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}