:root {
    --pico-font-family-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pico-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pico-font-weight: 400;

    /* Height of the mobile bottom-tab bar. Used by .bottom-tabs itself,
       by main.container's bottom padding (so content doesn't sit under
       the tabs), and by .bottom-tab-sheet's bottom offset. */
    --bottom-tabs-height: 4rem;

    /* Pill palette — light mode (default) */
    --pill-amber-bg: #fef3c7; --pill-amber-fg: #92400e;
    --pill-blue-bg:  #dbeafe; --pill-blue-fg:  #1e40af;
    --pill-green-bg: #d1fae5; --pill-green-fg: #065f46;
    --pill-gray-bg:  #e5e7eb; --pill-gray-fg:  #374151;
    --pill-gray-bg-hover: #d1d5db;
    --pill-red-bg:   #fee2e2; --pill-red-fg:   #991b1b;

    /* Brand primary — sky-800, calmer than cyan and reads as
       a serious "association blue" rather than tech accent. */
    --pico-primary: #075985;
    --pico-primary-background: #075985;
    --pico-primary-border: #075985;
    --pico-primary-hover: #0c4a6e;
    --pico-primary-hover-background: #0c4a6e;
    --pico-primary-hover-border: #0c4a6e;
    --pico-primary-focus: rgba(7, 89, 133, 0.25);
    --pico-primary-inverse: #fff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pill-amber-bg: #451a03; --pill-amber-fg: #fcd34d;
        --pill-blue-bg:  #172554; --pill-blue-fg:  #93c5fd;
        --pill-green-bg: #052e16; --pill-green-fg: #86efac;
        --pill-gray-bg:  #1f2937; --pill-gray-fg:  #d1d5db;
        --pill-gray-bg-hover: #334155;
        --pill-red-bg:   #450a0a; --pill-red-fg:   #fca5a5;

        /* Brand primary — lighter sky for contrast on dark (sky-300). */
        --pico-primary: #7dd3fc;
        --pico-primary-background: #7dd3fc;
        --pico-primary-border: #7dd3fc;
        --pico-primary-hover: #bae6fd;
        --pico-primary-hover-background: #bae6fd;
        --pico-primary-hover-border: #bae6fd;
        --pico-primary-focus: rgba(125, 211, 252, 0.3);
        --pico-primary-inverse: #0c4a6e;
    }
}
[data-theme="dark"] {
    --pill-amber-bg: #451a03; --pill-amber-fg: #fcd34d;
    --pill-blue-bg:  #172554; --pill-blue-fg:  #93c5fd;
    --pill-green-bg: #052e16; --pill-green-fg: #86efac;
    --pill-gray-bg:  #1f2937; --pill-gray-fg:  #d1d5db;
    --pill-gray-bg-hover: #334155;
    --pill-red-bg:   #450a0a; --pill-red-fg:   #fca5a5;

    --pico-primary: #7dd3fc;
    --pico-primary-background: #7dd3fc;
    --pico-primary-border: #7dd3fc;
    --pico-primary-hover: #bae6fd;
    --pico-primary-hover-background: #bae6fd;
    --pico-primary-hover-border: #bae6fd;
    --pico-primary-focus: rgba(125, 211, 252, 0.3);
    --pico-primary-inverse: #0c4a6e;
}
body { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; }

/* Heading scale: tighter, more deliberate hierarchy */
h1 { font-size: 1.875rem; line-height: 1.2; }
h2 { font-size: 1.4rem; line-height: 1.25; margin-top: 1.75rem; }
h3 { font-size: 1.15rem; line-height: 1.3; margin-top: 1.25rem; }
h4 { font-size: 1rem; line-height: 1.35; }
h1, h2, h3, h4 { letter-spacing: -0.015em; font-weight: 600; }

/* Tables: subdued headers, hover, tighter padding */
table { font-size: 0.92rem; }
table thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--pico-muted-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
table tbody tr {
    transition: background-color 120ms ease;
}
table tbody tr:hover {
    background: var(--pico-card-sectioning-background-color);
}
table tbody td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

/* Tone down article cards: less prominent than Pico's default,
   consistent vertical rhythm between sections */
article {
    box-shadow: none;
    border: 1px solid var(--pico-muted-border-color);
    background: var(--pico-background-color);
    margin-bottom: 1.5rem;
}

/* Page header: h1 + status pill + meta in one row */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.85rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
}
.page-header > h1, .page-header > h2 { margin: 0; }
.page-header-meta {
    color: var(--pico-muted-color);
    font-size: 0.9rem;
    margin: 0;
}

/* Detail grid: small-caps label above value, responsive columns */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
}
.detail-item { min-width: 0; }
.detail-item.full { grid-column: 1 / -1; }
.detail-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pico-color);
    opacity: 0.6;
    margin-bottom: 0.25rem;
}
.detail-value {
    display: block;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 500;
    word-break: break-word;
}
.detail-value.long { white-space: pre-line; font-weight: 400; }

/* Form rhythm: tighter label/legend spacing */
label { margin-bottom: 0.85rem; }
fieldset { margin-bottom: 0.85rem; }
fieldset > legend { margin-bottom: 0.5rem; font-weight: 500; }

/* Field width utilities — for inputs/selects whose value is shorter
   than the form-grid cell that contains them. Explicit display:block
   so the (narrower) input drops onto its own line below the label text
   instead of squeezing in beside it. */
label.field-narrow select,
label.field-narrow input {
    display: block;
    width: 100%;
    max-width: 16rem;
}
label.field-money input {
    display: block;
    width: 100%;
    max-width: 9rem;
}

/* Off-screen helper input. Positioned outside the viewport so it doesn't
   render visually but remains in the form DOM. */
.url-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* /min-kalender — list of subscribe platforms, one row per platform.
   Each row is a flex layout: platform info on the left, "Abonner" CTA
   on the right. Rows separated by hairlines for visual rhythm. */
.subscribe-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.subscribe-list .subscribe-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    margin: 0;
}
.subscribe-list .subscribe-row + .subscribe-row {
    border-top: 1px solid var(--pico-form-element-border-color);
}
.subscribe-list .subscribe-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.subscribe-list .subscribe-platform {
    font-weight: 600;
}
.subscribe-list .subscribe-hint {
    color: var(--pico-muted-color);
    line-height: 1.4;
}
.subscribe-list .subscribe-cta {
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.subscribe-list .subscribe-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.subscribe-list .subscribe-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Tight screens: stack the CTA below the info instead of squeezing. */
@media (max-width: 480px) {
    .subscribe-list .subscribe-row {
        flex-direction: column;
        align-items: stretch;
    }
    .subscribe-list .subscribe-cta {
        text-align: center;
    }
}

/* /min-kalender — the read-only feed URL input alongside the Copy button.
   Flex so the button auto-fits and the input expands to fill remaining width. */
.subscribe-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.subscribe-url-row input {
    flex: 1;
    min-width: 0;
}
.subscribe-url-row button {
    width: auto;
    flex-shrink: 0;
}

/* "Bruk standard sats" pill next to fee inputs — subtle suggestion from
   the honorar table. Auto-width overrides Pico's default full-width button. */
.suggest-pill {
    display: inline-block;
    width: auto;
    margin: 0.4rem 0 0;
    padding: 0.1rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 999px;
}

/* Form grouping: section label + responsive 2-col rows */
.form-section-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    font-weight: 700;
    color: var(--pico-color);
    margin: 0 0 1rem 0;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1.5rem;
}
.autocomplete { position: relative; margin-bottom: var(--pico-spacing); }
.autocomplete > input { margin-bottom: 0; }
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    max-height: 14rem;
    overflow-y: auto;
}
.autocomplete-list li {
    padding: 0.4rem 0.6rem;
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.autocomplete-list li.active,
.autocomplete-list li:hover {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}
@media (max-width: 768px) {
    .desktop-only { display: none; }
}
@media (min-width: 769px) {
    .mobile-only { display: none; }
}
.trio-required-note {
    background: var(--pill-blue-bg);
    color: var(--pill-blue-fg);
    padding: 0.6rem 0.85rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}
mark {
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
    vertical-align: text-bottom;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
 }
/* Status pills — rounded uppercase tags used across match status, invoice status,
 * and the assignment-ready badge. */
mark.submitted, mark.published, mark.assigned, mark.completed, mark.cancelled,
mark.ready, mark.invoice-none, mark.invoice-sent, mark.invoice-paid, mark.invoice-credited {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}
mark.submitted        { background: var(--pill-amber-bg); color: var(--pill-amber-fg); }
mark.published        { background: var(--pill-blue-bg);  color: var(--pill-blue-fg); }
mark.assigned         { background: var(--pill-green-bg); color: var(--pill-green-fg); }
mark.completed        { background: var(--pill-gray-bg);  color: var(--pill-gray-fg); }
mark.cancelled        { background: var(--pill-red-bg);   color: var(--pill-red-fg); }
mark.ready            { background: var(--pill-amber-bg); color: var(--pill-amber-fg); }
mark.invoice-none     { background: var(--pill-gray-bg);  color: var(--pill-gray-fg); }
mark.invoice-sent     { background: var(--pill-blue-bg);  color: var(--pill-blue-fg); }
mark.invoice-paid     { background: var(--pill-green-bg); color: var(--pill-green-fg); }
mark.invoice-credited { background: var(--pill-red-bg);   color: var(--pill-red-fg); }
.invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.invoice-actions form { margin: 0; }
.invoice-actions button { margin: 0; }
.invoice-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.invoice-row-actions form { margin: 0; }
.invoice-row-actions button {
    margin: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}
.invoice-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.invoice-bulk-actions form { margin: 0; }
.invoice-bulk-actions button {
    margin: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}
.admin-toggle { margin: 0; }
.admin-toggle button {
    margin: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
    width: auto;
}
.site-header {
    border-bottom: 3px solid var(--pico-primary);
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Audit log entries — structured header / actor / detail block */
.event-log {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.event-log > .event-row {
    padding: 0.5rem 0 0.5rem 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    position: relative;
}
.event-log > .event-row:last-child { padding-bottom: 0; border-bottom: none; }

/* Date dividers — group events by Oslo-local date for scanning */
.event-log > .event-divider {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pico-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1rem 0 0.5rem;
    border-bottom: 1px solid var(--pico-card-sectioning-border-color);
    margin-bottom: 0.5rem;
}
.event-log > .event-divider:first-child { padding-top: 0; }

/* Actor-type marker — small colored dot sitting in the row's left padding */
.event-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pico-muted-color);
}
.event-row-admin::before    { background: var(--pico-primary); }
.event-row-club::before     { background: var(--pill-amber-fg); }
.event-row-referee::before  { background: var(--pill-green-fg); }
.event-row-system::before   { background: var(--pico-muted-color); }
.event-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.event-type {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-color);
}
.event-time {
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.event-actor {
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    margin-top: 0.1rem;
}
.event-detail {
    font-size: 0.85rem;
    color: var(--pico-color);
    margin-top: 0.3rem;
}
.event-detail:empty { display: none; }
.event-changes {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.event-changes > li + li { margin-top: 0.15rem; }
.event-changes .change-field {
    color: var(--pico-muted-color);
    margin-right: 0.35rem;
}
.event-changes .change-arrow {
    color: var(--pico-muted-color);
    margin: 0 0.3rem;
}

/* Two-column edit layout: main + sticky sidebar on >=lg */
.edit-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .edit-layout {
        grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
    }
    .edit-aside {
        position: sticky;
        top: 1rem;
        align-self: start;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}
/* Login chooser: vertical stack of large clickable cards */
.login-chooser {
    max-width: 28rem;
    margin: 2rem auto 0;
}
.login-chooser-lead {
    color: var(--pico-muted-color);
    margin-bottom: 1.5rem;
}
.login-chooser-option {
    display: block;
    padding: 1rem 1.25rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--pico-primary);
    border-radius: 0.5rem;
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}
.login-chooser-option:hover {
    background: var(--pico-primary-hover);
    border-color: var(--pico-primary-hover);
    color: var(--pico-primary-inverse);
}
.login-chooser-option-secondary {
    background: transparent;
    color: var(--pico-color);
    border-color: var(--pico-muted-border-color);
}
.login-chooser-option-secondary:hover {
    background: var(--pico-card-sectioning-background-color);
    color: var(--pico-color);
    border-color: var(--pico-muted-border-color);
}
.login-chooser-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}
.login-chooser-hint {
    display: block;
    font-size: 0.85rem;
    opacity: 0.85;
}
.login-chooser-error {
    background: var(--pill-red-bg);
    color: var(--pill-red-fg);
    padding: 0.6rem 0.85rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
/* Note for clubs that they don't need to log in. Sits under the chooser
   options separated by a hairline, so it reads as "this is a different
   audience" rather than another login choice. */
.login-chooser-club-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

/* Give the right-side nav priority — it never shrinks. The brand UL gives
 * way when there isn't room, and the brand-name is allowed to wrap onto
 * multiple lines rather than overflow into the nav. The brand-name is no
 * longer hidden by width — when the horizontal nav can't fit, the whole nav
 * switches to the bottom-tab bar instead (see Bottom tabs). */
.site-header nav > ul:first-of-type { flex: 0 1 auto; min-width: 0; }
.site-header nav > ul:last-of-type { flex: 0 0 auto; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.brand:hover { color: inherit; text-decoration: none; }
.brand-logo {
    height: 48px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.brand-name {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--pico-color);
    min-width: 0;
}
/* Admin nav is item-heavy. On smaller desktop widths (1024–1279px) the
 * user-menu trigger drops the surname to free horizontal space: full name
 * "Morten Andersen-Gott" at ≥1280px, first name only below. The brand-name
 * text is dropped too (the logo still identifies the tenant) so a long
 * tenant name like "Oslo Fotballdommerlaug" can't squeeze into a wrapped,
 * mid-word-broken column colliding with the first nav link. At ≤1023px the
 * admin nav switches to the bottom-tab bar, so the trigger is gone anyway. */
@media (max-width: 1279px) {
    body.nav-wide .surname { display: none; }
}
/* Scoped to the desktop squeeze band only: below 1024px the admin nav is
 * already the bottom-tab bar (right-nav hidden), so the brand has room to
 * wrap and the tenant name should stay visible. */
@media (min-width: 1024px) and (max-width: 1279px) {
    body.nav-wide .brand-name { display: none; }
}
/* Compact header treatment for the bottom-tabs range (anything where the
 * right-side nav is hidden). Smaller logo + tighter padding so the header
 * doesn't dwarf the content on phones / small tablets. */
@media (max-width: 767px) {
    .brand-logo { height: 40px; }
    .site-header {
        padding-top: 0;
        padding-bottom: 0.25rem;
        margin-bottom: 1rem;
    }
    .site-header nav > ul li { padding-top: 0.4rem; padding-bottom: 0.4rem; }
}
mark.nav-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.65rem;
    line-height: 1.3;
    vertical-align: top;
    background: var(--pill-amber-bg);
    color: var(--pill-amber-fg);
}
.nav-admin-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.4rem;
    border-radius: var(--pico-border-radius);
    vertical-align: top;
    background: var(--pill-amber-bg);
    color: var(--pill-amber-fg);
}
.nav-admin-marker svg { width: 0.6rem; height: 0.6rem; }
nav details.dropdown { margin-bottom: 0; }
nav details.dropdown > summary:not([role]) {
    background: transparent;
    border-color: transparent;
    padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
    color: var(--pico-primary);
    font-weight: inherit;
}
nav details.dropdown > summary:not([role]):hover,
nav details.dropdown > summary:not([role]):focus {
    background: transparent;
    color: var(--pico-primary-hover);
}

/* Theme picker: sun / moon / system as clickable icon cards. The native radio is
 * visually hidden but kept keyboard-accessible; selected state via :has(:checked). */
.theme-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: 0;
    padding: 0;
    margin: 0;
}
.theme-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
    margin-bottom: 0;
}
.theme-option:hover {
    border-color: var(--pico-primary-border);
}
.theme-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}
.theme-option:has(input:focus-visible) {
    outline: 2px solid var(--pico-primary-focus);
    outline-offset: 2px;
}
.theme-option:has(input:checked) {
    border-color: var(--pico-primary);
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}
.theme-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
}
.theme-icon svg {
    width: 100%;
    height: 100%;
}

/* Flatpickr dark-mode overrides — flatpickr ships only a light theme; recolor for
 * data-theme="dark" and prefers-color-scheme:dark using Pico's surface palette. */
[data-theme="dark"] .flatpickr-calendar,
[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-weekdays,
[data-theme="dark"] .flatpickr-days,
[data-theme="dark"] .flatpickr-time {
    background: var(--pico-card-background-color);
    color: var(--pico-color);
}
[data-theme="dark"] .flatpickr-calendar {
    border: 1px solid var(--pico-form-element-border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .flatpickr-day {
    color: var(--pico-color);
}
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--pico-primary);
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--pico-primary);
    border-color: var(--pico-primary);
    color: var(--pico-primary-inverse);
}
[data-theme="dark"] .flatpickr-day:hover {
    background: var(--pico-secondary-background);
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--pico-secondary);
}
[data-theme="dark"] .flatpickr-weekday,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--pico-color);
}
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time input:hover {
    background: var(--pico-secondary-background);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--pico-color);
    fill: var(--pico-color);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--pico-primary);
}

/* === Mobile match cards ===
 * `renderMatchTable` emits BOTH a desktop table (.match-table-wrap) and a mobile
 * card list (.match-card-list); CSS toggles which is visible at the 600px break.
 */
.match-card-list { display: none; }

@media (max-width: 599px) {
    .match-table-wrap { display: none; }
    .match-card-list { display: block; }
}

.match-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: var(--pico-border-radius);
    padding: 1.1rem 1.15rem 0.5rem;
    margin-bottom: 0.85rem;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    position: relative;
    overflow: hidden;
}
.match-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--pico-primary);
    opacity: 0;
    transition: opacity 140ms ease;
}
.match-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -8px rgba(7, 89, 133, 0.25);
    border-color: var(--pico-primary);
    color: inherit;
}
.match-card:hover::before { opacity: 1; }
.match-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px -4px rgba(7, 89, 133, 0.2);
}

.match-card-when {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.match-card-day {
    color: var(--pico-primary);
    font-weight: 500;
    text-transform: uppercase;
}
.match-card-time {
    color: var(--pico-muted-color);
    font-weight: 500;
}
.match-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    color: var(--pico-color);
    letter-spacing: -0.01em;
}
.match-card-meta {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.83rem;
    color: var(--pico-muted-color);
    margin: 0 0 0.9rem;
    line-height: 1.4;
}
.match-card-meta > span:not(:last-child)::after {
    content: "·";
    margin: 0 0.5rem;
    opacity: 0.55;
}
.match-card-roles {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--pico-card-sectioning-border-color);
}
.match-card-roles > li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    line-height: 1.2;
    border-bottom: 1px solid var(--pico-card-sectioning-border-color);
}
.match-card-roles > li:last-child { border-bottom: none; }
.role-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pico-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 3rem;
}
.role-spacer {
    height: 1px;
    background: var(--pico-card-sectioning-border-color);
    opacity: 0.5;
}
.role-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--pico-color);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.role-value.open {
    color: var(--pico-muted-color);
}
.role-value .fee {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
}
.role-value .fee::after {
    content: " kr";
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    margin-left: 0.05rem;
}
.my-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--pico-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(7, 89, 133, 0.12);
}
[data-theme="dark"] .my-signup {
    color: #0c1929;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.18);
}

/* Status / error banners used inline above forms. */
.banner-success {
    border-left: 4px solid var(--pico-color-green-500);
    background: var(--pico-color-green-50);
}
.banner-error {
    border-left: 4px solid var(--pico-color-red-500);
    background: var(--pico-color-red-50);
}

/* Width cap for content pages that are mostly a form (profile, ny-kamp,
 * admin new-match). Without this they stretch across the full container
 * on wide desktops and the inputs feel unmoored. */
.page-narrow {
    max-width: 42rem;
}

/* "Mine kamper" section headers — heading on the left, count pill on the
 * right, thin border below to anchor the section as a distinct block. */
.my-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.my-section-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.my-section-count {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    font-variant-numeric: tabular-nums;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--pico-card-sectioning-background-color);
    font-weight: 500;
    line-height: 1;
}

/* Profile page tweaks — read-only email display inside its article. */
.profile-page article > dl {
    margin: 0 0 1rem;
}
.profile-page article > dl > dd {
    font-weight: 500;
    margin-inline-start: 0;
}

/* "Rediger som admin" pill — outlined, with a stroked pencil icon. Shown to
 * admins on the public match detail page so they can jump straight into edit. */
.admin-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: 999px;
    color: var(--pico-muted-color);
    background: transparent;
    font-size: 0.8rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color 120ms ease, color 120ms ease;
    margin-bottom: 1rem;
}
.admin-edit-link:hover,
.admin-edit-link:focus-visible {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}
.admin-edit-link svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Empty state — centered icon + headline + optional body. Used anywhere a
 * list/section is empty instead of a bare "Ingen X." paragraph. */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--pico-muted-color);
}
.empty-state-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.75rem;
    color: var(--pico-muted-color);
    opacity: 0.55;
}
.empty-state-icon svg { width: 100%; height: 100%; }
.empty-state-heading {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.35rem;
    color: var(--pico-color);
}
.empty-state-body {
    font-size: 0.85rem;
    margin: 0;
    max-width: 26rem;
    margin-inline: auto;
    line-height: 1.5;
}

/* Admin match list: dense, single-line-ish rows tuned for "scan many matches
 * fast" rather than "browse one match in depth". Mobile cards replace the
 * desktop table at <600px (see .admin-table-wrap toggle below). */
.admin-table-wrap { display: block; }
.admin-match-list { display: none; }
@media (max-width: 599px) {
    .admin-table-wrap { display: none; }
    .admin-match-list { display: block; }
}

.admin-match-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--pico-muted-border-color);
}
/* Pico v2 re-applies a marker via a more specific li rule, so list-style: none
 * on the ul isn't enough — kill it on the li too (same gotcha as .referee-card). */
.admin-match-list > li { list-style: none; }
.admin-match-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.7rem 0.15rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    text-decoration: none;
    color: inherit;
    transition: background-color 120ms ease;
}
.admin-match-row:hover,
.admin-match-row:focus-visible {
    background: var(--pico-secondary-background);
    color: inherit;
    text-decoration: none;
}
.admin-match-row .row-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--pico-color);
    min-width: 4rem;
    text-align: left;
}
.admin-match-row .row-date strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
}
.admin-match-row .row-date small {
    display: block;
    font-size: 0.7rem;
    color: var(--pico-muted-color);
    margin-top: 0.1rem;
    text-transform: uppercase;
}
.admin-match-row .row-main { min-width: 0; }
.admin-match-row .row-teams {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pico-color);
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.admin-match-row .row-meta {
    font-size: 0.75rem;
    color: var(--pico-muted-color);
    margin-top: 0.2rem;
    line-height: 1.3;
}
.admin-match-row .row-meta > span:not(:last-child)::after {
    content: "·";
    margin: 0 0.35rem;
    opacity: 0.5;
}
.admin-match-row .row-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* Admin referee card list — companion to the desktop user table at <600px. */
.admin-referee-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 599px) {
    .admin-referee-list { display: block; }
}
.referee-card {
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding: 0.75rem 0;
    list-style: none;
}
.referee-card:first-child {
    border-top: 1px solid var(--pico-muted-border-color);
}
.referee-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.referee-head-main { min-width: 0; flex: 1 1 auto; }
.referee-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pico-color);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.referee-email {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    margin-top: 0.15rem;
    word-break: break-all;
}
.referee-card .admin-toggle button {
    margin: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.referee-meta {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--pico-muted-color);
    margin: 0.35rem 0 0;
    line-height: 1.4;
}
.referee-meta > span:not(:last-child)::after {
    content: "·";
    margin: 0 0.45rem;
    opacity: 0.55;
}
.referee-meta strong {
    color: var(--pico-color);
    font-weight: 600;
}

/* Whole-row click affordance on match tables. Pico paints `td { background:
 * var(--pico-background-color) }` on every cell, so a `tr` hover bg gets
 * covered — we target the cells directly. */
/* "Stretched link" pattern: one real <a> in a `.row-link` cell, whose
   ::after covers the whole row. Click anywhere → activates the link
   (keyboard, middle-click, right-click "open in new tab" all work
   naturally — unlike the onclick=location.href= anti-pattern). */
.row-clickable { position: relative; }
.row-clickable > td { transition: background-color 120ms ease; }
.row-clickable:hover > td { background-color: var(--pico-secondary-background); }
.row-clickable .row-link a {
    color: inherit;
    text-decoration: none;
}
.row-clickable .row-link a::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: pointer;
}

/* Mobile bottom tab nav — hidden on desktop, primary actions visible on narrow
 * viewports. The top-nav right-side `<ul>` is hidden under the same breakpoint so
 * the brand stays in the top bar and everything else moves to the bottom.
 *
 * Position properties live outside the media query so the element is always
 * pinned to the viewport when displayed — only `display` toggles between
 * none (desktop) and flex (mobile). */
.bottom-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-tabs-height);
    padding: 0 0.25rem env(safe-area-inset-bottom);
    background: var(--pico-background-color);
    border-top: 1px solid var(--pico-form-element-border-color);
    z-index: 100;
    align-items: stretch;
}

/* Bottom-tab activation — hide the horizontal right-nav and reveal the tab bar
 * when the nav can't fit. Phones and non-admins flip at 767px; the admin nav
 * (body.nav-wide) carries more items, so it flips at 1023px. The visual styling
 * (the @media ≤1023 block further down) is always available across this range
 * but inert on desktop, since .bottom-tabs is display:none until one of these
 * activation blocks fires.
 *
 * overflow-x: clip guards against horizontal page scroll — when the body is
 * wider than the viewport, mobile browsers anchor `position: fixed` to the
 * document rather than the viewport, sliding .bottom-tabs out of view. Wide
 * content (e.g. tables) manages its own scroll via `<div class="overflow-auto">`. */
@media (max-width: 767px) {
    html, body { overflow-x: clip; }
    .site-header nav > ul:last-child { display: none; }
    main.container { padding-bottom: calc(var(--bottom-tabs-height) + var(--pico-spacing)); }
    .bottom-tabs { display: flex; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.nav-wide { overflow-x: clip; }
    body.nav-wide .site-header nav > ul:last-child { display: none; }
    body.nav-wide main.container { padding-bottom: calc(var(--bottom-tabs-height) + var(--pico-spacing)); }
    body.nav-wide .bottom-tabs { display: flex; }
}
@media (max-width: 1023px) {
    .bottom-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.4rem 0.25rem;
        color: var(--pico-secondary);
        text-decoration: none;
        font-size: 0.7rem;
        line-height: 1;
        min-width: 0;
    }
    .bottom-tab:hover,
    .bottom-tab:focus-visible {
        color: var(--pico-primary);
        background: transparent;
        text-decoration: none;
    }
    .bottom-tab-icon {
        position: relative;
        display: inline-flex;
        width: 1.5rem;
        height: 1.5rem;
    }
    .bottom-tab-icon svg { width: 100%; height: 100%; }
    .bottom-tab-label {
        display: block;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .bottom-tab-badge {
        position: absolute;
        top: -0.2rem;
        right: -0.45rem;
        font-size: 0.65rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        min-width: 1rem;
        text-align: center;
        line-height: 1.2;
    }
    .bottom-tab-admin-lock {
        position: absolute;
        top: -0.2rem;
        right: -0.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        border-radius: 999px;
        background: var(--pill-amber-bg);
        color: var(--pill-amber-fg);
    }
    .bottom-tab-admin-lock svg { width: 0.65rem; height: 0.65rem; }

    /* "Mer" tab: Pico <details> styled as a tab; the <ul> pops upward as a sheet. */
    details.bottom-tab-more {
        margin-bottom: 0;
        position: relative;
    }
    details.bottom-tab-more > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        height: 100%;
        padding: 0.4rem 0.25rem;
        color: var(--pico-secondary);
        font-size: 0.7rem;
        line-height: 1;
        background: transparent;
        border: 0;
    }
    details.bottom-tab-more > summary::-webkit-details-marker { display: none; }
    details.bottom-tab-more > summary::after { content: none; }
    details.bottom-tab-more[open] > summary { color: var(--pico-primary); }
    /* Sheet menu over the bottom tabs. Spans the viewport (minus side
       margins) and sits above the tab bar; backdrop dims the page behind. */
    nav ul.bottom-tab-sheet {
        --sheet-overlay: color-mix(in srgb, var(--pico-color) 15%, transparent);
        position: fixed;
        display: block;
        left: 0.5rem;
        right: 0.5rem;
        bottom: calc(var(--bottom-tabs-height) + 0.5rem);
        max-height: calc(100vh - var(--bottom-tabs-height) - 1rem);
        overflow: hidden;
        background: var(--pico-background-color);
        border-radius: 0.75rem;
        box-shadow: 0 1.25rem 2.5rem -0.625rem rgba(0, 0, 0, 0.35),
                    0 0 0 1px var(--pico-form-element-border-color);
        padding: 0.4rem 0;
        margin: 0;
        list-style: none;
        z-index: 102;
    }
    /* Backdrop. Sits below the sheet (102) and below the tab bar (100 —
       leaves "Mer" tappable to close). */
    details.bottom-tab-more[open]::before {
        content: '';
        position: fixed;
        inset: 0;
        background: color-mix(in srgb, var(--pico-color) 30%, transparent);
        z-index: 99;
        pointer-events: none;
    }
    nav ul.bottom-tab-sheet li {
        display: block;
        margin: 0;
        padding: 0;
    }
    nav ul.bottom-tab-sheet a {
        display: block;
        padding: 1.1rem 1.25rem;
        /* !important defeats Pico's `nav li :where(a, [role=link])` rule
           chain — :where() makes that hard to outrank by specificity alone. */
        color: var(--pico-color) !important;
        text-decoration: none;
        background: transparent;
        font-size: 1rem;
    }
    nav ul.bottom-tab-sheet a:hover,
    nav ul.bottom-tab-sheet a:focus-visible {
        background: var(--pico-secondary-background);
        color: var(--pico-color) !important;
    }
    /* Small-caps group label between sets of links. Not interactive.
       Bottom padding is generous so the next link's hover-bg doesn't
       creep visually into the label area — the link's box-padding of
       1.1rem fills with bg on hover, and a too-small label-bottom
       makes the bg look like it's overlapping the label. */
    nav ul.bottom-tab-sheet .sheet-section {
        padding: 0.75rem 1.25rem 0.6rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--pico-muted-color);
    }
    nav ul.bottom-tab-sheet .sheet-section.first { padding-top: 0.4rem; }
    nav ul.bottom-tab-sheet hr {
        display: block;
        height: 1px;
        border: 0;
        background: var(--sheet-overlay);
        margin: 0.25rem 0;
    }
    nav ul.bottom-tab-sheet a.signout {
        color: var(--pico-del-color, #b91c1c) !important;
    }
}

/* Landing page — rendered from web/LandingPage.kt for GET /.
 * Mobile-first: stacked articles, generous tap targets on CTAs,
 * horizontal scroll on the honorar table when there isn't room. */
.lede {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--pico-color);
    margin-bottom: 2rem;
}
.landing-section {
    margin-bottom: 2rem;
}
.landing-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.landing-bullets {
    padding-left: 1.25rem;
    margin: 1rem 0 1.5rem;
}
.landing-bullets li {
    margin-bottom: 0.75rem;
    line-height: 1.55;
}
.landing-bullets li:last-child { margin-bottom: 0; }

.cta-row {
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.cta-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: var(--pico-border-radius);
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
    line-height: 1.4;
}
.cta-button:hover,
.cta-button:focus-visible {
    background: var(--pico-primary-hover-background);
    color: var(--pico-primary-inverse);
    text-decoration: none;
}

.promo-section {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--pico-card-sectioning-background-color);
    border-radius: var(--pico-border-radius);
}
.promo-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--pico-primary-background);
    color: var(--pico-primary);
    border-radius: var(--pico-border-radius);
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
    line-height: 1.4;
}
.promo-button:hover,
.promo-button:focus-visible {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    text-decoration: none;
}

.honorar-table {
    margin: 0;
    min-width: 26rem;
}
.honorar-table th,
.honorar-table td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}
.honorar-table th.num,
.honorar-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.trio-tag {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.05rem 0.45rem;
    background: var(--pill-amber-bg);
    color: var(--pill-amber-fg);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.footnote {
    margin-top: 1rem;
    color: var(--pico-muted-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 599px) {
    .lede { font-size: 1rem; margin-bottom: 1.5rem; }
    .landing-section h2 { font-size: 1.25rem; }
    .landing-bullets { padding-left: 1.1rem; }
    .cta-button,
    .promo-button {
        display: block;
        width: 100%;
        text-align: center;
    }
    .honorar-table th,
    .honorar-table td { padding: 0.5rem 0.6rem; font-size: 0.95rem; }
}

/* Filter bar with pill rows — used on admin list views. CSS-only collapse
 * on mobile via a hidden checkbox + label-for toggle. Desktop media query
 * hides the summary entirely and force-shows the content. */
.filter-bar {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: 12px;
}
/* Toggle lives outside the swap region (on the page-level) so its state
 * survives htmx swaps. Selectors cross from the input to descendants of a
 * following sibling. */
.filter-toggle { position: absolute; opacity: 0; pointer-events: none; }
.filter-bar > .filter-content {
    display: none;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.75rem;
}
.filter-toggle:checked ~ .filter-region .filter-content { display: flex; }
.filter-toggle:checked ~ .filter-region .filter-summary { display: none; }

/* Close affordance inside the open content — mobile only. Top-right
 * chevron-up that's a label for the same checkbox, so tapping it
 * re-collapses. Matches the collapsed-state chevron in the summary. */
.filter-content { position: relative; }
.filter-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    padding: 0.5rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.filter-chevron-up { transform: rotate(-135deg); }
.filter-close:hover .filter-chevron-up { border-color: var(--pico-color); }
.filter-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 1.5rem 0.25rem 0;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.filter-chevron {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--pico-muted-color);
    border-bottom: 2px solid var(--pico-muted-color);
    transform: rotate(45deg);
    transition: transform 150ms;
}
.filter-summary > .filter-chevron {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.filter-toggle:checked ~ .filter-region .filter-summary .filter-chevron {
    transform: rotate(-135deg);
}
.filter-summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
}
.pill.pill-mini {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    min-height: 0;
    line-height: 1.3;
}
.filter-group { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pico-muted-color);
    margin: 0;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-row.primary .pill { font-size: 0.95rem; padding: 0.5rem 1rem; min-height: 2.5rem; }
.pill {
    border: 1px solid transparent;
    background: var(--pill-gray-bg);
    color: var(--pill-gray-fg);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    min-height: 2.25rem;
    transition: background-color 120ms, border-color 120ms, color 120ms;
}
.pill:hover {
    background: var(--pill-gray-bg-hover);
    text-decoration: none;
    color: var(--pill-gray-fg);
}
.pill.selected,
.pill.selected:hover {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse, #fff);
    border-color: var(--pico-primary);
}
.pill .count {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--pill-gray-bg-hover);
    color: var(--pill-gray-fg);
    padding: 0 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
}
.pill.selected .count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

/* Desktop: the filter card is always expanded. Hide the toggle + summary
 * so it looks like a static panel; force the content open regardless of
 * the underlying checkbox state. */
@media (min-width: 600px) {
    .filter-bar > .filter-toggle,
    .filter-bar > .filter-summary { display: none; }
    .filter-bar > .filter-content {
        display: flex !important;
        padding-top: 0;
    }
    .filter-close { display: none; }
}

@media (max-width: 599px) {
    .pill { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
    .pill-row.primary .pill { font-size: 0.9rem; padding: 0.5rem 1rem; }
}

/* Small `kr` badge marking the paying team. Sits inline next to the team
 * name in the invoice list, replacing the separate "Betales av" column. */
.kr-badge {
    display: inline-block;
    margin: 0 0.25rem;
    padding: 0 0.25rem;
    background: var(--pill-gray-bg);
    color: var(--pill-gray-fg);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: 1px;
}

/* Dual-label pattern for bulk action buttons: full label on desktop,
 * short label on mobile. Rendered both, CSS toggles visibility. */
.label-short { display: none; }
@media (max-width: 599px) {
    .label-full { display: none; }
    .label-short { display: inline; }
}

/* Invoice page: desktop table at >=600px, mobile cards below. Each card
 * stacks kickoff+status, team title (with kr badge), and the row action
 * buttons. */
.invoice-table-wrap { display: block; }
.invoice-card-list { display: none; }
@media (max-width: 599px) {
    .invoice-table-wrap { display: none; }
    .invoice-card-list { display: flex; flex-direction: column; gap: 0.75rem; }
}
.invoice-card {
    padding: 0.75rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-card-border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.invoice-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}
.invoice-card-head .kickoff {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--pico-color);
}
.invoice-card-teams {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}
.invoice-card-teams a {
    color: var(--pico-color);
    text-decoration: none;
}
.invoice-card-teams a:hover { text-decoration: underline; }