/* Inter, self-hosted (2026-10-11): the variable font covers weights 400–700; latin holds the
   Icelandic letters (þ, ð, æ, ö, accents), latin-ext the rest. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  ACTIVE PALETTE: Business Central (test, 2026-05-14)       ║
   ║  Source: learn.microsoft.com/.../devenv-control-addin-style║
   ║  Backup of smart-air navy palette is at the bottom of this ║
   ║  file under "PALETTE BACKUP". To revert: copy those values ║
   ║  into the :root block below.                               ║
   ╚════════════════════════════════════════════════════════════╝ */
:root {
    --primary:           #015F69;                       /* deep teal — test */
    --primary-active:    #008089;                       /* BC Tertiary shade 2 (hover/active) */
    --primary-disabled:  #b3e8eb;                       /* derived pale primary */
    --primary-soft:      rgba(1, 95, 105, 0.10);
    --primary-soft-text: #015F69;
    --teal:              #35AB22;                       /* BC Favorable */
    --teal-soft:         rgba(53, 171, 34, 0.10);
    --teal-soft-text:    #2c8f1c;
    --ink:               #212121;                       /* BC Standard / Strong */
    --body:              #505C6D;                       /* BC Secondary */
    --muted:             #A7ADB6;                       /* BC Subordinate */
    --topbar:            #015F69;                       /* deep teal — matches CTA at rest */
    --canvas:            #ffffff;
    --surface-soft:      #f6f9fc;
    --surface-strong:    #f2f4f7;
    --hairline:          #e3e8ee;
    --border-strong:     #A7ADB6;
    --warning:           #9F9700;                       /* BC Ambiguous */
    --warning-soft:      rgba(159, 151, 0, 0.14);
    --error:             #EB6965;                       /* BC Unfavorable / Attention */
    --error-soft:        rgba(235, 105, 101, 0.10);
    --shadow-1: 0 0 0 1px rgba(33, 33, 33, 0.02),
                0 2px 6px rgba(33, 33, 33, 0.04),
                0 4px 8px rgba(33, 33, 33, 0.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, 'SF Pro Display', "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--canvas);
    line-height: 1.55;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Installed on a phone (standalone): keep content clear of the home bar. */
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-active); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   TOP BAR — dark navy variant (top-nav-dark)
   ───────────────────────────────────────────────────────────── */
header.site-header {
    background: var(--topbar);
    color: #ffffff;
    /* The teal bar runs under a translucent status bar when installed on iOS;
       the inset keeps the brand and nav below the clock. */
    padding: calc(14px + env(safe-area-inset-top)) 56px 14px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 50;
}
header.site-header .brand {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.2px;
    text-decoration: none;
}
header.site-header .brand:hover {
    color: #ffffff;
    text-decoration: none;
}
header.site-header nav {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
header.site-header nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
header.site-header nav a:hover {
    color: #ffffff;
    text-decoration: none;
    border-bottom-color: rgba(255, 255, 255, 0.45);
}
header.site-header nav a.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   PAGE CONTAINER
   ───────────────────────────────────────────────────────────── */
.page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 56px 64px;
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
header.hero {
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 32px;
    margin-bottom: 40px;
}
header.hero .eyebrow {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 14px;
}
h1 {
    color: var(--ink);
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
    line-height: 1.2;
}
header.hero .lede {
    color: var(--body);
    font-size: 1.05rem;
    font-weight: 400;
    max-width: 760px;
    margin: 0;
    line-height: 1.55;
}
/* Posting description / BC document no. under the headline. Styled like the
   former "lede" line (the sent/due lede was removed — that info lives in the rail). */
.hero-note {
    margin: 0;
    max-width: 760px;
    color: var(--body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   HEADINGS / BODY
   ───────────────────────────────────────────────────────────── */
h2 {
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.35px;
    margin: 56px 0 18px;
}
h3 {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 28px 0 8px;
}
h4 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 0 4px;
}
p { margin: 0 0 12px; color: var(--body); }
p.lede {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 760px;
    margin: 4px 0 22px;
}
ul, ol { margin: 0 0 12px; padding-left: 22px; color: var(--body); }
ul li, ol li { margin-bottom: 6px; line-height: 1.55; }

code {
    background: var(--surface-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    color: var(--primary-soft-text);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-feature-settings: 'tnum';
    border: 1px solid var(--hairline);
}

/* ─────────────────────────────────────────────────────────────
   CTA BUTTONS (pill-shaped — smart-air signature)
   ───────────────────────────────────────────────────────────── */
.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.0;
    transition: background-color 160ms ease;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.cta:hover {
    background: var(--primary-active);
    color: #ffffff;
    text-decoration: none;
}
.cta.secondary {
    background: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--ink);
}
.cta.secondary:hover {
    background: var(--surface-strong);
    color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────
   STATUS PILLS (used on approval cards / detail views)
   ───────────────────────────────────────────────────────────── */
.pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 9999px;
}
.pill.open       { background: var(--primary-soft); color: var(--primary-soft-text); }
.pill.new        { background: var(--primary-soft); color: var(--primary-soft-text); }
.pill.inapproval { background: var(--warning-soft); color: var(--warning); }
.pill.approved   { background: var(--teal-soft);    color: var(--teal-soft-text); }
.pill.posted     { background: var(--teal-soft);    color: var(--teal-soft-text); }
.pill.paid       { background: var(--teal-soft);    color: var(--teal-soft-text); }
.pill.rejected   { background: var(--error-soft);   color: var(--error); }
.pill.warning    { background: var(--warning-soft); color: var(--warning); }
/* "Eindagi liðinn" — a pending invoice past its due date. */
.pill.overdue    { background: var(--error-soft);   color: var(--error); }
.pill.neutral    { background: transparent; color: var(--muted); border: 1px solid var(--border-strong); }

/* ─────────────────────────────────────────────────────────────
   INVOICE CARD GRID
   ───────────────────────────────────────────────────────────── */
.invoice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.invoice-card {
    display: block;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.invoice-card:hover {
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.invoice-card .thumbnail {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-strong);
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}

.invoice-card .thumbnail svg {
    width: 56px;
    height: 56px;
}

.invoice-card .thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.invoice-card .thumbnail iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
    background: var(--canvas);
}

.invoice-card .meta {
    padding: 16px;
}

.invoice-card .vendor {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0;
}

.invoice-card .doc-meta {
    margin: 0 0 14px;
    font-size: 0.875rem;
    color: var(--muted);
}

.invoice-card .amount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Approver (assigned, or who acted once processed) — a quiet line on the card/row. */
.approver-line {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--muted);
    min-width: 0;
}
.approver-line svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.approver-line > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.invoice-card .approver-line {
    margin: 0 0 14px;
}
.invoice-card .doc-meta:has(+ .approver-line) {
    margin-bottom: 6px;
}

.invoice-card .amount {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: 'tnum';
    letter-spacing: -0.18px;
}

/* List / page states */
.state {
    padding: 64px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}
.state.error {
    color: var(--error);
}

/* ─────────────────────────────────────────────────────────────
   LIST TOOLBAR + VIEW TOGGLE (segmented control)
   ───────────────────────────────────────────────────────────── */
.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    flex-wrap: wrap;
}

.list-count {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    font-feature-settings: 'tnum';
}

.view-toggle {
    display: inline-flex;
    background: var(--surface-strong);
    border-radius: 9999px;
    padding: 3px;
    gap: 2px;
}

.view-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.0;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.view-toggle-option svg {
    width: 14px;
    height: 14px;
}

.view-toggle-option:hover {
    color: var(--ink);
}

.view-toggle-option.active {
    background: var(--canvas);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

.view-toggle-option .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--hairline);
    color: var(--body);
    font-size: 0.72rem;
    font-weight: 600;
    font-feature-settings: 'tnum';
    line-height: 1;
}

.view-toggle-option.active .filter-count {
    background: var(--primary-soft);
    color: var(--primary-soft-text);
}

/* ─────────────────────────────────────────────────────────────
   INVOICE LIST (rows)
   ───────────────────────────────────────────────────────────── */
.invoice-list {
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
}

.invoice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--hairline);
    transition: background-color 160ms ease;
}

.invoice-row:last-child {
    border-bottom: 0;
}

.invoice-row:hover {
    background: var(--surface-soft);
    text-decoration: none;
    color: inherit;
}

.invoice-row .row-vendor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.invoice-row .row-vendor .vendor {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-row .row-vendor .doc-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.invoice-row .row-due {
    font-size: 0.85rem;
    color: var(--muted);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}

.invoice-row .amount {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: 'tnum';
    letter-spacing: -0.18px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .invoice-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }
    .invoice-row .pill,
    .invoice-row .row-due {
        display: none;
    }
    /* The due-date signal is the one pill worth its space on a phone row. */
    .invoice-row .pill-group {
        justify-content: flex-end;
    }
    .invoice-row .pill.overdue,
    .invoice-row .pill.due-today {
        display: inline-block;
    }
}

/* ─────────────────────────────────────────────────────────────
   DETAIL PAGE
   ───────────────────────────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 160ms ease;
}
.back-link:hover {
    color: var(--ink);
    text-decoration: none;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

.detail-main { min-width: 0; }

.document-preview {
    aspect-ratio: 5 / 6;
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-strong);
    overflow: hidden;
    padding: 16px;
}
.document-preview svg {
    width: 96px;
    height: 96px;
}
.document-preview img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(33, 33, 33, 0.08);
}

.document-preview.is-pdf {
    aspect-ratio: 3 / 4;
    padding: 0;
}

.document-preview embed {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
    display: block;
}

.document-preview.is-html {
    /* Height is driven by the fit() script (the invoice is scaled to the pane
       width). NB: deliberately NO aspect-ratio here — once the script sets an
       explicit height, aspect-ratio would back-compute the WIDTH (height ×
       ratio) and blow the pane far past its grid column, sliding the invoice
       under the rail. A min-height just gives the box size on first paint. */
    aspect-ratio: auto;
    min-height: 360px;
    width: 100%;
    padding: 0;
    display: block;
    position: relative;
}
.document-preview iframe.document-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
    /* width / height / transform are overwritten inline once the document is
       measured and scaled by the fit() module (see Approval.razor). */
}

/* Empty state — shown when an invoice has no attachment to fetch. */
.document-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}
.document-empty svg {
    width: 56px;
    height: 56px;
    color: var(--border-strong);
}
.document-empty span {
    font-size: 0.92rem;
    color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   SIGN-IN (Auðkenni)
   ───────────────────────────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--primary-soft), transparent 60%),
        var(--surface-soft);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    box-shadow: var(--shadow-1);
    padding: 40px 36px;
    text-align: center;
}
.auth-brand {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.2px;
    margin-bottom: 28px;
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
}
.auth-sub {
    color: var(--body);
    font-size: 0.95rem;
    margin: 0 0 28px;
}
.auth-form {
    text-align: left;
    display: flex;
    flex-direction: column;
}
.auth-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--body);
    margin-bottom: 8px;
}
.auth-input {
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    color: var(--ink);
    padding: 14px 16px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface-soft);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-feature-settings: 'tnum';
}
.auth-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
    background: var(--canvas);
}
.auth-btn {
    margin-top: 20px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.auth-btn:hover:not(:disabled) { background: var(--primary-active); }
.auth-btn:disabled { background: var(--primary-disabled); cursor: default; }
.auth-btn.ghost {
    color: var(--body);
    background: transparent;
    border: 1px solid var(--hairline);
    margin-top: 12px;
}
.auth-btn.ghost:hover:not(:disabled) { background: var(--surface-soft); }
.auth-error {
    margin-top: 14px;
    color: var(--error);
    background: var(--error-soft);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
}
.auth-controlcode {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--ink);
    font-feature-settings: 'tnum';
    margin: 8px 0 24px;
}
.auth-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--body);
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.auth-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary-soft);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Company picker (shown when a kennitala has access to more than one company) */
.auth-company-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}
.auth-company {
    margin-top: 0;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   PIPELINE TABS + SUB-FILTERS (Reikningar)
   ───────────────────────────────────────────────────────────── */
.pipeline-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 16px;
}
.pipeline-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--body);
    background: var(--surface-soft);
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pipeline-tab:hover { background: var(--surface-strong); }
.pipeline-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.pipeline-tab-count {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--canvas);
    color: var(--body);
    font-feature-settings: 'tnum';
}
.pipeline-tab.active .pipeline-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.subfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.subfilter-chip {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--body);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.subfilter-chip:hover { background: var(--surface-soft); }
.subfilter-chip.active {
    background: var(--primary-soft);
    color: var(--primary-soft-text);
    border-color: var(--primary-soft-text);
}

/* ─────────────────────────────────────────────────────────────
   DASHBOARD (Forsíða)
   ───────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 20px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
.stat-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-feature-settings: 'tnum';
}
.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--body);
}

/* Company name chip in the header (left of the user name, on the teal bar) */
.site-company {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   POST-CONFIRM MODAL (Bóka reikning)
   ───────────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(33, 33, 33, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}
.modal-card {
    width: 100%;
    max-width: 440px;
    background: var(--canvas);
    border-radius: 18px;
    box-shadow: var(--shadow-1);
    padding: 28px 28px 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink);
}
.modal-sub {
    color: var(--body);
    font-size: 0.9rem;
    margin: 0 0 20px;
}
.post-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 16px;
}
.post-amount-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    font-feature-settings: 'tnum';
}
.post-amount-currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
}
.post-summary {
    margin: 0 0 20px;
}
.post-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-strong);
}
.post-summary dt {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.post-summary dd {
    margin: 0;
    text-align: right;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 500;
}
.post-summary-sub {
    color: var(--muted);
    font-weight: 400;
}
.post-summary .rail-input {
    text-align: right;
    max-width: 170px;
}
.modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* ─────────────────────────────────────────────────────────────
   TOAST (e.g. post success)
   ───────────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: var(--shadow-1);
    font-size: 0.92rem;
    font-weight: 600;
    z-index: 1300; /* above the celebration overlay */
    animation: toast-in 0.2s ease;
    max-width: calc(100vw - 32px);
}
.toast svg {
    width: 18px;
    height: 18px;
    color: var(--teal);
    flex-shrink: 0;
}
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Signed-in user chip + logout in the top bar */
.site-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.site-user-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}
.site-logout {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 5px 14px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.site-logout:hover {
    color: #ffffff;
    text-decoration: none;
    border-color: rgba(255, 255, 255, 0.6);
}

.detail-rail {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-1);
    position: sticky;
    top: 88px;
    /* query container so the amount can scale to the rail width, not the viewport */
    container-type: inline-size;
}

/* The signature amount-display moment */
.amount-display {
    text-align: center;
    padding: 8px 0 24px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 20px;
}
.amount-display .amount-label {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}
.amount-display .amount-value {
    /* fluid: ~52px at the 320px rail, shrinks with the card down to 28px */
    font-size: clamp(1.75rem, 19cqi, 52px);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -1px;
    color: var(--ink);
    font-feature-settings: 'tnum';
}
.amount-display .amount-currency {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 10px;
    font-feature-settings: 'tnum';
    letter-spacing: 0.2px;
}
/* Net + VAT % under the gross headline — one small, quiet line, only when relevant. */
.amount-display .amount-vat {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    font-feature-settings: 'tnum';
    line-height: 1.4;
}

.detail-meta {
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.detail-meta > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.detail-meta dt {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
}
.detail-meta dd {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    text-align: right;
    font-feature-settings: 'tnum';
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.detail-meta.detail-allocation {
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
}

.rail-input {
    width: 100%;
    max-width: 180px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
    padding: 2px 0;
    outline: none;
    transition: border-color 160ms ease;
}
.rail-input:hover {
    border-bottom-color: var(--secondary);
}
.rail-input:focus {
    border-bottom-color: var(--primary);
}
.rail-input.mixed::placeholder {
    color: var(--muted);
    font-style: italic;
}

.rail-input-hint {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.rail-input-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 180px;
}
.rail-input-wrap .rail-input {
    max-width: none;
    padding-right: 18px; /* room for the clear button */
}
.rail-clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}
.rail-clear:hover {
    color: var(--ink);
}

/* Reassign modal: the picker + note fill their row and read left-to-right
   (the rail-input base is right-aligned for the allocation fields). */
.modal-card select.rail-input,
.modal-card textarea.rail-input {
    width: 100%;
    max-width: none;
    text-align: left;
}
.modal-card textarea.rail-input {
    resize: vertical;
    font: inherit;
    font-size: 0.9rem;
}

.action-pills {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
}

.action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    width: 100%;
    border-radius: 9999px;
    font-family: inherit;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.0;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    border: 0;
}
.action-pill.primary {
    background: var(--primary);
    color: #ffffff;
}
.action-pill.primary:hover:not(:disabled) {
    background: var(--primary-active);
}
.action-pill.primary:disabled {
    background: var(--primary-disabled);
    cursor: not-allowed;
}
.action-pill.outline {
    background: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--ink);
}
.action-pill.outline:hover:not(:disabled) {
    background: var(--surface-strong);
}
.action-pill.outline:disabled {
    color: var(--muted);
    border-color: var(--hairline);
    cursor: not-allowed;
}

.detail-resolved-note {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    color: var(--body);
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-rail { position: static; }
    /* No attachment: one compact row instead of a tall empty box. */
    .document-preview:has(> .document-empty) {
        aspect-ratio: auto;
        min-height: 0;
        height: 56px;
        padding: 0 16px;
    }
    .document-preview:has(> .document-empty) .document-empty {
        flex-direction: row;
        gap: 10px;
    }
    .document-preview:has(> .document-empty) .document-empty svg {
        width: 20px;
        height: 20px;
    }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    header.site-header { padding: calc(12px + env(safe-area-inset-top)) 20px 12px; gap: 16px; }
    header.site-header nav { gap: 14px; }
    .page { padding: 24px 20px 48px; }
    h1 { font-size: 1.7rem; letter-spacing: -0.35px; }
    h2 { font-size: 1.25rem; margin: 40px 0 14px; }
}

/* ─────────────────────────────────────────────────────────────
   BLAZOR DEFAULTS — preserved (validation + error boundary)
   ───────────────────────────────────────────────────────────── */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--teal);
}
.invalid {
    outline: 1px solid var(--error);
}
.validation-message {
    color: var(--error);
}
.blazor-error-boundary {
    background: var(--error);
    padding: 16px 20px;
    color: #ffffff;
    border-radius: 14px;
    margin: 12px 0;
    font-weight: 500;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  PALETTE BACKUP: smart-air navy (the canonical one).       ║
   ║  To restore, paste these values into the :root block       ║
   ║  at the top of this file.                                  ║
   ╚════════════════════════════════════════════════════════════╝

    --primary:           #1863DC;
    --primary-active:    #0056A7;
    --primary-disabled:  #bcd0f0;
    --primary-soft:      rgba(24, 99, 220, 0.10);
    --primary-soft-text: #0056A7;
    --teal:              #005F69;
    --teal-soft:         rgba(0, 95, 105, 0.10);
    --teal-soft-text:    #005F69;
    --ink:               #00102E;
    --body:              #233452;
    --muted:             #64748d;
    --canvas:            #ffffff;
    --surface-soft:      #f6f9fc;
    --surface-strong:    #f2f4f7;
    --hairline:          #e3e8ee;
    --border-strong:     #a8c3de;
    --warning:           #9b6829;
    --warning-soft:      rgba(155, 104, 41, 0.14);
    --error:             #c13515;
    --error-soft:        rgba(193, 53, 21, 0.10);
    --shadow-1: 0 0 0 1px rgba(0, 16, 46, 0.02),
                0 2px 6px rgba(0, 16, 46, 0.04),
                0 4px 8px rgba(0, 16, 46, 0.10);
*/

/* ─────────────────────────────────────────────────────────────
   APPROVAL CHAIN (Smart Approvals 15c ii — multiple approvers)
   ───────────────────────────────────────────────────────────── */
/* Two pills side by side on a card/row (status + "þarf endurvísun"). */
.pill-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* Entry statuses (the chain rows); the document statuses above still apply. */
.pill.waiting    { background: var(--surface-strong); color: var(--muted); }
.pill.pending    { background: var(--warning-soft);   color: var(--warning); }
.pill.skipped    { background: var(--surface-strong); color: var(--muted); }

/* The chain block in the detail rail: one group per step, one row per approver. */
.chain {
    margin: 0 0 20px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chain-title {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}
.chain-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chain-step-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.chain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.chain-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.chain-name {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chain-row.mine .chain-name { color: var(--primary); }
.chain-note {
    color: var(--muted);
    font-size: 0.75rem;
}
.chain-comment {
    color: var(--body);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
}
/* Manager row actions — quiet text buttons, never competing with the main pills. */
.chain-actions {
    display: flex;
    gap: 14px;
    margin-top: -2px;
}
.chain-action {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
}
.chain-action:hover:not(:disabled) {
    color: var(--primary-active);
    text-decoration: underline;
}
.chain-action:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

/* "Re-routing needed" — the invoice changed after it was routed. */
.rail-warning {
    margin: 0 0 20px;
    color: var(--warning);
    background: var(--warning-soft);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Optional comment above the approve/reject pills (entry-level actions). */
.action-comment {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────
   LINE APPROVALS (Smart Approvals 15c iii — one chain per line)
   ───────────────────────────────────────────────────────────── */
/* Warning toast (a rejection): an exclamation in the warning colour. */
.toast.warning svg { color: var(--warning); }

/* The line table under the document preview: one row per purchase line,
   one expanded at a time. Same card language as the rail. */
.line-table {
    margin-top: 20px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.line-table-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.line-table-summary {
    color: var(--body);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    font-weight: 500;
}
.line-row + .line-row { border-top: 1px solid var(--hairline); }
.line-row.expanded { background: var(--surface-soft); }
/* The whole summary row is the toggle. */
.line-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto 16px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}
.line-summary:hover { background: var(--surface-soft); }
.line-desc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.line-title {
    font-size: 0.95rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-sub { color: var(--muted); font-size: 0.78rem; font-feature-settings: 'tnum'; overflow-wrap: anywhere; }
.line-approver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--body);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}
.line-row.mine .line-approver { color: var(--primary); }
/* "mín" — the line waits on the signed-in user. */
.line-badge {
    background: var(--primary-soft);
    color: var(--primary-soft-text);
    border-radius: 9999px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.line-note { color: var(--error); font-size: 0.78rem; }
.line-summary .amount { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.line-chevron { color: var(--muted); font-size: 0.8rem; text-align: center; }

/* The expanded row: the line's chain, its allocation editor, its actions. */
.line-panel {
    padding: 4px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.line-panel .chain { margin: 0; padding-top: 0; border-top: 0; }
.line-alloc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.line-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.line-field-label { color: var(--muted); font-size: 0.78rem; font-weight: 500; }
/* The shared allocation input reads left-to-right here (right-aligned in the rail). */
.line-field .rail-input-wrap { max-width: none; }
.line-field .rail-input { text-align: left; }
.line-alloc-readonly { margin: 0; }
.line-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Per-line buttons: compact pills, the approve one filled. */
.line-action {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 9999px;
    border: 1px solid var(--ink);
    background: var(--canvas);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.line-action:hover:not(:disabled) { background: var(--surface-strong); }
.line-action.primary { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.line-action.primary:hover:not(:disabled) { background: var(--primary-active); border-color: var(--primary-active); }
.line-action:disabled { color: var(--muted); border-color: var(--hairline); cursor: not-allowed; }
.line-action.primary:disabled { background: var(--primary-disabled); border-color: var(--primary-disabled); color: #ffffff; }

@media (max-width: 720px) {
    .line-summary {
        grid-template-columns: minmax(0, 1fr) auto 16px;
        row-gap: 6px;
    }
    .line-summary .line-approver { grid-column: 1; }
    .line-summary .pill { display: none; }
    .line-alloc { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   RAIL ACTIONS UNDER THE AMOUNT (UX polish 2026-09-18)
   ───────────────────────────────────────────────────────────── */
/* The action block follows the amount directly; the amount's own rule
   separates them, and the block closes with a rule before the facts. */
.rail-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hairline);
}
.rail-actions .action-pills,
.rail-actions .detail-resolved-note {
    padding-top: 0;
    border-top: 0;
}
/* "1 af 3 línum bíður þín" above the line-mode buttons. */
.rail-actions-summary {
    margin: 0;
    color: var(--body);
    font-size: 0.9rem;
    font-weight: 500;
}
/* Warnings and errors between the amount and the actions. */
.detail-rail > .auth-error {
    margin: 0 0 20px;
}
.detail-rail > :last-child {
    margin-bottom: 0;
}
/* While previous / next / advance is under way. */
.detail-layout.is-navigating {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 160ms ease;
}

/* "Bæta við athugasemd" — a quiet link-styled control, not a third button. */
.comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 4px 0;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
}
.comment-toggle svg { width: 15px; height: 15px; }
.comment-toggle:hover:not(:disabled) { color: var(--primary-active); text-decoration: underline; }
.comment-toggle:disabled { color: var(--muted); cursor: not-allowed; }
.comment-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.action-comment-wrap { display: flex; flex-direction: column; }
/* "Skráðu ástæðu höfnunar." right under the comment box. */
.auth-error.compact {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 0.82rem;
}
/* The same hint under the line-reject modal's textarea. */
.modal-hint {
    display: block;
    margin-top: 6px;
    text-align: left;
    color: var(--error);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Eindagi in the rail. */
.detail-meta dd.due-overdue { color: var(--error); font-weight: 600; }
.detail-meta dd.due-today { color: var(--warning); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   PAGER — previous / next in the detail hero
   ───────────────────────────────────────────────────────────── */
.hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.hero-text { min-width: 0; flex: 1 1 auto; }
.pager {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 2px;
}
.pager-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--canvas);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.pager-btn svg { width: 18px; height: 18px; }
.pager-btn:hover:not(:disabled) { background: var(--surface-soft); border-color: var(--border-strong); }
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pager-pos {
    min-width: 56px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: 'tnum';
}
.pager-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   PHONE DOCUMENT — first page image + "Opna skjal"
   ───────────────────────────────────────────────────────────── */
.document-preview.is-page {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 0 12px;
}
.document-preview.is-page .document-page {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    border-radius: 13px 13px 0 0;
    box-shadow: none;
}
.document-preview.is-page .document-open {
    margin: 0 12px;
    width: auto;
    text-decoration: none;
}
.document-preview.is-page .document-open:hover { text-decoration: none; }

/* ─────────────────────────────────────────────────────────────
   CELEBRATION — the queue is finished (?done=1)
   ───────────────────────────────────────────────────────────── */
.celebrate-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(1, 95, 105, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    cursor: pointer;
    animation: celebrate-fade 0.2s ease;
}
.celebrate-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: var(--canvas);
    border-radius: 22px;
    box-shadow: var(--shadow-1);
    padding: 36px 32px 32px;
    text-align: center;
    animation: celebrate-card-in 0.3s ease both;
}
.celebrate-mark {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--teal);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.celebrate-mark svg { width: 46px; height: 46px; }
.celebrate-card h2 {
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.3px;
}
.celebrate-card p {
    margin: 0;
    color: var(--body);
    font-size: 0.95rem;
    font-feature-settings: 'tnum';
}
.confetti-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.confetti {
    position: absolute;
    top: -16px;
    left: var(--x);
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: var(--c);
    opacity: 0;
    animation: confetti-fall var(--dur) linear var(--delay) both;
}
.confetti:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
.confetti:nth-child(4n) { width: 6px; height: 16px; }
@keyframes pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
@keyframes celebrate-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes celebrate-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes confetti-fall {
    0%   { opacity: 0; transform: translateY(0) rotate(var(--rot)); }
    6%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--rot) + 540deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .confetti { display: none; }
    .celebrate-backdrop,
    .celebrate-card,
    .celebrate-mark { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   SKELETON ROWS — the list while it loads
   ───────────────────────────────────────────────────────────── */
.skeleton-list {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    overflow: hidden;
}
.skeleton-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--hairline);
}
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-text { display: flex; flex-direction: column; gap: 9px; }
.skeleton-line,
.skeleton-block {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-strong) 25%, var(--surface-soft) 37%, var(--surface-strong) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}
.skeleton-line.w-vendor { height: 14px; width: 52%; max-width: 280px; }
.skeleton-line.w-meta   { height: 11px; width: 34%; max-width: 180px; }
.skeleton-block { height: 16px; width: 96px; }
@keyframes shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-line, .skeleton-block { animation: none; }
}
/* Visually hidden, read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────────────────────
   HEADER USER MENU — initials avatar on phones
   ───────────────────────────────────────────────────────────── */
.site-user-menu {
    display: none;
    position: relative;
}
.site-user-menu > summary {
    list-style: none;
    cursor: pointer;
}
.site-user-menu > summary::-webkit-details-marker { display: none; }
.site-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    user-select: none;
}
.site-user-menu[open] .site-avatar { background: rgba(255, 255, 255, 0.3); }
.site-avatar:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.site-user-card {
    position: absolute;
    right: 0;
    top: 44px;
    min-width: 220px;
    background: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 60;
}
.site-user-card-name { font-size: 0.95rem; font-weight: 600; }
.site-user-card-company { font-size: 0.85rem; color: var(--body); }
.site-user-card .site-logout {
    align-self: flex-start;
    margin-top: 10px;
    color: var(--primary);
    border-color: var(--primary);
}
.site-user-card .site-logout:hover { color: var(--primary-active); border-color: var(--primary-active); }
@media (max-width: 720px) {
    .site-company,
    .site-user-name,
    .site-user > .site-logout { display: none; }
    .site-user-menu { display: block; }
}

/* ─────────────────────────────────────────────────────────────
   FILE TABS — one per attachment (2026-10-06)
   ───────────────────────────────────────────────────────────── */
/* The invoice first, a timesheet last; the tabs sit on the preview's top edge. */
.doc-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    padding: 7px 14px;
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    background: var(--canvas);
    color: var(--body);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.doc-tab:hover { background: var(--surface-soft); color: var(--ink); }
.doc-tab.active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-soft-text);
}
.doc-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.doc-tab-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.doc-tab-badge {
    flex: none;
    background: var(--surface-strong);
    color: var(--body);
    border-radius: 9999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: 600;
}
/* Phones: one "Opna …" link per file under the first file's picture. */
.document-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.document-link { text-decoration: none; min-width: 0; }
.document-link:hover { text-decoration: none; }
.document-link-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   READ-ONLY LINE TABLE + PER-FIELD LOCKS (2026-10-06)
   ───────────────────────────────────────────────────────────── */
/* How each line is coded: description, account, Deild, Verkefni, amount. */
.line-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.8fr) auto;
    gap: 14px;
    align-items: baseline;
    padding: 12px 20px;
    font-size: 0.88rem;
    color: var(--ink);
}
.line-grid + .line-grid { border-top: 1px solid var(--hairline); }
.line-grid-head {
    padding-top: 10px;
    padding-bottom: 8px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--hairline);
}
.line-grid-head + .line-grid { border-top: 0; }
.line-grid .amount { text-align: right; font-weight: 600; white-space: nowrap; font-feature-settings: 'tnum'; }
.line-cell-desc { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-cell { color: var(--body); overflow-wrap: break-word; min-width: 0; }
/* Line mode: a fixed asset's / item's account, shown instead of the input. */
.line-field-value { color: var(--body); font-size: 0.9rem; font-weight: 500; padding: 2px 0; }
/* A whole-invoice field the lines disagree on. */
.rail-mixed { color: var(--body); font-style: italic; }
.rail-locked-note {
    margin: -8px 0 20px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Stacked when the table itself is narrow (phone, or the main column beside
   the rail on a small laptop): description + amount, then one row per field. */
.line-table-readonly, .line-table-editable { container-type: inline-size; }
@container (max-width: 600px) {
    .line-grid-head { display: none; }
    .line-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
        padding: 12px 16px;
    }
    .line-grid .line-cell-desc { grid-column: 1; grid-row: 1; white-space: normal; }
    .line-grid .amount { grid-column: 2; grid-row: 1; }
    .line-grid .line-cell { grid-column: 1 / -1; font-size: 0.82rem; }
    .line-grid .line-cell::before {
        content: attr(data-label) ": ";
        color: var(--muted);
    }
    /* Editable lines (2026-10-11, phone): label beside the input, not five squeezed columns. */
    .line-grid.editable .line-cell { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; }
    .line-grid.editable .line-cell::before { content: attr(data-label); padding-top: 6px; }
    .line-grid.editable .line-cell .rail-input-hint { grid-column: 2; }
}

/* ─────────────────────────────────────────────────────────────
   BULK APPROVE on "Í samþykkt" (2026-10-06)
   ───────────────────────────────────────────────────────────── */
.bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: -4px 0 16px;
}
.bulk-select-all {
    border: 0;
    background: none;
    padding: 6px 0;
    color: var(--primary);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}
.bulk-select-all:hover:not(:disabled) { color: var(--primary-active); text-decoration: underline; }
.bulk-select-all:disabled { color: var(--muted); cursor: default; }
.bulk-bar .bulk-approve { width: auto; height: 40px; padding: 0 20px; font-size: 0.92rem; }

/* The checkbox sits beside the link (list) or over the card's corner (cards). */
.row-select {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.row-select input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.row-select.disabled,
.row-select.disabled input { cursor: not-allowed; }
.row-select.disabled input { opacity: 0.45; }

.invoice-row-wrap {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--hairline);
}
.invoice-row-wrap:last-child { border-bottom: 0; }
.invoice-row-wrap > .invoice-row { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.invoice-row-wrap.selected { background: var(--primary-soft); }
.invoice-row-wrap.selected > .invoice-row:not(:hover) { background: transparent; }
.row-select-cell { flex: none; width: 48px; padding-left: 8px; }
.invoice-list.selectable .invoice-row { padding-left: 4px; }

.invoice-card-wrap { position: relative; display: flex; flex-direction: column; }
.invoice-card-wrap > .invoice-card { flex: 1 1 auto; }
.invoice-card-wrap.selected > .invoice-card { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.card-select {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    background: var(--canvas);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
}

/* The dialog: sums per currency, the invoices, then progress and the result. */
.bulk-sums { flex-wrap: wrap; gap: 4px 20px; }
.bulk-sum { display: inline-flex; align-items: baseline; gap: 8px; }
.bulk-list { max-height: 240px; overflow-y: auto; }
.bulk-list dt { color: var(--ink); font-weight: 500; }
.bulk-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 8px;
    color: var(--body);
    font-size: 0.95rem;
    font-weight: 500;
}
.bulk-progress progress { width: 100%; height: 8px; accent-color: var(--primary); }
.bulk-results {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.bulk-results li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-strong);
    margin: 0;
}
.bulk-result-mark {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.bulk-results li.ok .bulk-result-mark { background: var(--teal-soft); color: var(--teal-soft-text); }
.bulk-results li.failed .bulk-result-mark { background: var(--error-soft); color: var(--error); }
.bulk-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bulk-result-name { color: var(--ink); font-size: 0.9rem; font-weight: 500; }
.bulk-result-error { color: var(--error); font-size: 0.82rem; }
.bulk-modal .modal-actions .action-pill { flex: 1 1 0; }

/* Two stages (2026-10-10): the note under the whole-invoice chain while lines are open. */
.chain-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }

/* ─────────────────────────────────────────────────────────────
   2026-10-10: wider approval page, review banner, insights panel
   ───────────────────────────────────────────────────────────── */
.page.page-wide { max-width: 1480px; padding-left: 40px; padding-right: 40px; }
/* Two columns only above the phone breakpoint; below it the 900px rule stacks the rail
   (2026-10-11: outside a media query this beat it and left the document 0 px wide in portrait). */
@media (min-width: 901px) {
    .page-wide .detail-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
}
@media (max-width: 720px) {
    .page.page-wide { padding-left: 16px; padding-right: 16px; }
}

.review-banner {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    border-left: 4px solid var(--warning);
    background: var(--warning-soft);
    font-size: 14px;
}

.insight-panel {
    margin: 0 0 20px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface-soft);
    overflow: hidden;
}
.insight-panel.level-2 { border-color: var(--warning); }
.insight-panel.level-3 { border-color: var(--error); }
.insight-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.insight-light { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #35ab22; }
.insight-panel.level-1 .insight-light { background: var(--muted); }
.insight-panel.level-2 .insight-light { background: #e0c200; }
.insight-panel.level-3 .insight-light { background: var(--error); }
.insight-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.insight-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.insight-headline { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insight-normal { font-size: 13px; color: var(--muted); white-space: nowrap; }
.insight-chevron { color: var(--muted); }
/* Narrow (phone): "n reikningar á 12 mán. · miðgildi …" on its own line under the title, so it
   no longer squeezes the title and the vendor name (2026-10-11). */
.insight-panel { container-type: inline-size; }
@container (max-width: 560px) {
    .insight-head { flex-wrap: wrap; row-gap: 2px; }
    .insight-chevron { order: 2; }
    .insight-normal { order: 3; flex-basis: 100%; padding-left: 24px; white-space: normal; }
}
.insight-body { padding: 4px 16px 16px; border-top: 1px solid var(--border-strong); }
.insight-flags { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.insight-flag { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.insight-flag-icon { line-height: 1.4; color: var(--muted); }
.insight-flag.level-2 .insight-flag-icon { color: #e0c200; }
.insight-flag.level-3 .insight-flag-icon { color: var(--error); }
.insight-flag-detail { display: block; color: var(--muted); font-size: 13px; }
.insight-calm { margin: 12px 0; color: var(--muted); }
.insight-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.insight-tile { background: #fff; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.insight-tile-label { font-size: 12px; color: var(--muted); }
.insight-tile-value { font-weight: 600; font-size: 14px; }
.insight-chart svg { width: 100%; height: 90px; display: block; margin: 8px 0 12px; }
.insight-chart .bar { fill: var(--primary-soft-text); opacity: .35; }
.insight-chart .bar.current { opacity: 1; fill: var(--primary-soft-text); }
.insight-panel.level-2 .insight-chart .bar.current { fill: #c9ad00; }
.insight-panel.level-3 .insight-chart .bar.current { fill: var(--error); }
.insight-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.insight-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border-strong); }
.insight-table td { padding: 6px 8px; border-bottom: 1px solid #eef0f3; }
.insight-table .num { text-align: right; }
.insight-open { margin-top: 12px; }
.insight-open-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.insight-open-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: inherit; font-size: 13px; }
.insight-open-row:hover { background: #fff; }
.insight-open-status { color: var(--muted); }
.insight-foot { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

.insight-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.insight-dot.level-2 { background: #e0c200; }
.insight-dot.level-3 { background: var(--error); }

/* ─────────────────────────────────────────────────────────────
   2026-10-10: order (vendor / date) and vendor groups in the list
   ───────────────────────────────────────────────────────────── */
.list-toolbar-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sort-control { display: inline-flex; align-items: center; gap: 8px; }
.sort-label { color: var(--muted); font-size: 0.85rem; font-weight: 500; }
.sort-direction {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-soft-text);
    background: var(--primary-soft);
    border-radius: 9999px;
    padding: 2px 6px;
    font-feature-settings: 'tnum';
}

/* The vendor's header: in the row list a band above its rows, in the card
   grid a full-width band above its cards. */
.vendor-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 0;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--hairline);
}
.vendor-group-head.in-grid {
    grid-column: 1 / -1;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding-left: 8px;
    margin-top: 8px;
}
.vendor-group-head.in-grid:first-child { margin-top: 0; }
.vendor-group-head.no-select { padding-left: 20px; }
.vendor-group-head.in-grid.no-select { padding-left: 16px; }
.vendor-group-head.selected { background: var(--primary-soft); }
.vendor-group-head .group-select { align-self: stretch; }
.vendor-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.vendor-group-chevron { display: inline-flex; color: var(--body); transition: transform 160ms ease; }
.vendor-group-chevron svg { width: 16px; height: 16px; }
.vendor-group-head.collapsed .vendor-group-chevron { transform: rotate(-90deg); }
.vendor-group-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vendor-group-count {
    flex: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-soft-text);
    background: var(--primary-soft);
    border-radius: 9999px;
    padding: 2px 8px;
    font-feature-settings: 'tnum';
}
.vendor-group-total {
    flex: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--body);
    white-space: nowrap;
}
.vendor-group-head .vendor-group-approve { flex: none; width: auto; height: 34px; padding: 0 16px; font-size: 0.85rem; }

/* The vendor's rows sit a step in, under its header. */
.invoice-row-wrap.in-group > .invoice-row { padding-left: 32px; }
.invoice-list.selectable .invoice-row-wrap.in-group > .invoice-row { padding-left: 28px; }
.invoice-row-wrap.in-group .row-vendor .vendor { font-weight: 500; }

@media (max-width: 720px) {
    .vendor-group-head { flex-wrap: wrap; row-gap: 6px; padding-right: 12px; }
    .vendor-group-toggle { flex-basis: calc(100% - 60px); }
    .vendor-group-total { margin-left: auto; }
    .invoice-row-wrap.in-group > .invoice-row,
    .invoice-list.selectable .invoice-row-wrap.in-group > .invoice-row { padding-left: 16px; }
    .sort-label { display: none; }
}

/* The confirm dialog names the vendor when the batch is one vendor's. */
.bulk-vendor { font-weight: 600; color: var(--ink); margin-bottom: 4px; }

/* The bar over the document (2026-10-10): file tabs left, "Fela skjal" right. */
.doc-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-height: 36px; }
.doc-bar .doc-tabs { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.doc-bar-note { flex: 1 1 auto; color: var(--muted); font-size: 0.85rem; }
.doc-bar.is-hidden {
    padding: 10px 12px 10px 16px;
    border: 1px dashed var(--hairline);
    border-radius: 12px;
    background: var(--surface-soft);
    margin-bottom: 16px;
}
.doc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: none;
    padding: 7px 12px;
    border: 1px solid var(--hairline);
    border-radius: 9999px;
    background: var(--canvas);
    color: var(--body);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}
.doc-toggle:hover { background: var(--surface-soft); color: var(--ink); }
.doc-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.doc-toggle svg { width: 14px; height: 14px; transform: rotate(180deg); transition: transform 160ms ease; }
.doc-bar.is-hidden .doc-toggle svg { transform: none; }
.doc-bar.is-hidden .doc-toggle { color: var(--primary); border-color: var(--primary); }

/* Lines editable without line approvals (2026-10-10). */
.line-table-note { margin: 0; padding: 8px 20px 4px; font-size: 0.8rem; color: var(--muted); }
.line-grid.editable { align-items: start; }
.line-grid.editable .line-cell-desc { padding-top: 6px; white-space: normal; }
.line-grid.editable .amount { padding-top: 6px; }
.line-grid.editable .line-cell > span:not(.rail-input-wrap):not(.rail-input-hint) { display: inline-block; padding-top: 6px; }
.line-grid.editable .rail-input-wrap { display: flex; width: 100%; }
.line-grid.editable .rail-input { max-width: none; text-align: left; }
.line-grid.editable .rail-input-hint { display: block; text-align: left; }
.line-grid.edited { background: var(--primary-soft); }
.line-edited-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--canvas);
    color: var(--primary-soft-text);
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}