/*
 * Oclin Timelapse - designsystem på toppen av Bootstrap.
 *
 * Bildene er innholdet. De vises på svart, som på en klippebenk, mens
 * resten av grensesnittet holder seg lyst og stille. Blått betyr handling
 * og valgt tidsrom, grønt betyr at noe leverer eller er ferdig.
 */

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
    /* Oclins fargeprofil */
    --tl-black: #000000;
    --tl-graphite: #1F1F1F;
    --tl-white: #FFFFFF;
    --tl-mist: #F1F5F8;
    --tl-blue: #1D60FB;
    --tl-green: #77EAA9;

    /* Avledet for tekst, linjer og tilstander */
    --tl-ink: var(--tl-black);
    --tl-ink-muted: #5B6672;
    --tl-ink-faint: #8A949E;
    --tl-line: #DCE3E9;
    --tl-line-strong: #C3CDD6;
    --tl-blue-hover: #0F4FE6;
    --tl-blue-tint: #E6EEFF;
    --tl-green-tint: #E2FAEC;
    --tl-green-ink: #0A6B3B;
    --tl-amber: #F2B33D;
    --tl-amber-tint: #FEF4DF;
    --tl-red: #E5484D;
    --tl-red-tint: #FDECEC;
    --tl-red-ink: #B42328;

    --tl-radius-sm: 6px;
    --tl-radius: 10px;
    --tl-radius-lg: 14px;

    --tl-font: "sofia-pro", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Høyden på den faste topplinjen, så klebende paneler og rulling havner under den. */
    --tl-header-h: 60px;

    /* Bootstrap */
    --bs-body-font-family: var(--tl-font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--tl-ink);
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg: var(--tl-mist);
    --bs-emphasis-color: var(--tl-black);
    --bs-heading-color: var(--tl-black);
    --bs-secondary-color: var(--tl-ink-muted);
    --bs-secondary-rgb: 91, 102, 114;
    --bs-tertiary-bg: var(--tl-mist);
    --bs-border-color: var(--tl-line);
    --bs-border-radius: var(--tl-radius-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--tl-radius);
    --bs-border-radius-xl: var(--tl-radius-lg);
    --bs-primary: #1D60FB;
    --bs-primary-rgb: 29, 96, 251;
    --bs-link-color: var(--tl-blue);
    --bs-link-color-rgb: 29, 96, 251;
    --bs-link-hover-color: var(--tl-blue-hover);
    --bs-link-hover-color-rgb: 15, 79, 230;
    --bs-focus-ring-color: rgba(29, 96, 251, 0.35);
    --bs-success-rgb: 119, 234, 169;
    --bs-code-color: var(--tl-ink);
}

/* -------------------------------------------------------------- grunnlag */

html {
    /* Plass til rullefeltet på alle sider, så innholdet ikke hopper sidelengs
       mellom korte og lange sider. */
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--tl-header-h) + 1rem);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tl-mist);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern";
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 650;
    letter-spacing: -0.012em;
}

/* Bare elementene: adminsidene bruker Bootstraps .h3/.h6-klasser som de er. */
h1 { font-size: 1.875rem; line-height: 1.15; }
h2 { font-size: 1.3125rem; line-height: 1.25; }
h3 { font-size: 1.0625rem; line-height: 1.3; }

.small, small { font-size: 0.8125rem; }

/* Tidspunkter står under hverandre og endrer seg mens man ser på dem. */
time,
.tl-num {
    font-variant-numeric: tabular-nums;
}

a {
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 2px solid var(--tl-blue);
    outline-offset: 2px;
}

code {
    font-size: 0.85em;
    background: var(--tl-mist);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.text-body-secondary {
    color: var(--tl-ink-muted) !important;
}

.visually-hidden-focusable:focus {
    background: var(--tl-white);
    padding: 0.5rem 1rem;
}

/* ------------------------------------------------------------- topplinje */

.tl-header {
    background: var(--tl-black);
    color: var(--tl-white);
}

/* Topplinjen (og adminmenyen) ligger fast øverst mens siden rulles. */
.tl-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.tl-header__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 60px;
}

.tl-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--tl-white);
    text-decoration: none;
    white-space: nowrap;
}

.tl-brand:hover {
    color: var(--tl-white);
}

.tl-brand__logo {
    display: block;
    height: 1.25rem;
    width: auto;
}

.tl-brand__product {
    font-size: 0.9375rem;
    color: #A7B0B9;
}

.tl-brand__tag {
    align-self: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tl-black);
    background: var(--tl-green);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.tl-nav-wrap {
    display: flex;
    align-self: stretch;
}

.tl-nav {
    display: flex;
    align-items: stretch;
    gap: 1.75rem;
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-nav a {
    display: flex;
    align-items: center;
    height: 100%;
    color: #C9D0D6;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    padding-top: 2px;
}

.tl-nav a:hover {
    color: var(--tl-white);
}

.tl-nav a[aria-current="page"] {
    color: var(--tl-white);
    border-bottom-color: var(--tl-blue);
}

.tl-account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #A7B0B9;
}

.tl-account form {
    margin: 0;
}

.tl-link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tl-white);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tl-link-button:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .tl-header__inner {
        flex-wrap: wrap;
        gap: 0 1.25rem;
        min-height: 0;
        padding-top: 0.75rem;
    }

    .tl-account__email {
        display: none;
    }

    .tl-nav-wrap {
        order: 3;
        width: 100%;
    }

    .tl-nav {
        gap: 1.25rem;
        height: 44px;
    }

    :root {
        --tl-header-h: 84px;
    }
}

/* ------------------------------------------------------------ sidehode */

.tl-page {
    padding-block: 2rem 3.5rem;
}

.tl-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.75rem;
}

.tl-page-head h1 {
    margin: 0;
}

.tl-page-head__meta {
    margin: 0.35rem 0 0;
    color: var(--tl-ink-muted);
}

.tl-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--tl-ink-muted);
}

.tl-crumbs li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--tl-line-strong);
}

.tl-crumbs a {
    color: var(--tl-ink-muted);
    text-decoration: none;
}

.tl-crumbs a:hover {
    color: var(--tl-ink);
    text-decoration: underline;
}

.tl-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 2.75rem 0 1rem;
}

.tl-section-title h2 {
    margin: 0;
}

/* ---------------------------------------------------------------- status */

.tl-status {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--tl-ink);
}

.tl-status::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--tl-ink-faint);
    vertical-align: 0.05em;
}

.tl-status--live::before {
    background: var(--tl-green);
    box-shadow: 0 0 0 1px rgba(10, 107, 59, 0.35);
}

.tl-status--stale::before {
    background: var(--tl-amber);
}

.tl-status--on-dark {
    color: var(--tl-white);
}

.tl-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--tl-mist);
    color: var(--tl-ink);
    border: 1px solid transparent;
}

.tl-pill--completed { background: var(--tl-green); color: var(--tl-black); }
.tl-pill--processing { background: var(--tl-blue); color: var(--tl-white); }
.tl-pill--queued { background: var(--tl-white); border-color: var(--tl-line-strong); }
.tl-pill--failed { background: var(--tl-red-tint); color: var(--tl-red-ink); }
.tl-pill--expired { background: var(--tl-mist); color: var(--tl-ink-muted); }

/* ------------------------------------------------------------- flater */

.tl-panel {
    background: var(--tl-white);
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius-lg);
    padding: 1.5rem;
}

.tl-panel > h2:first-child,
.tl-panel > .h2:first-child {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.tl-empty {
    background: var(--tl-white);
    border: 1px dashed var(--tl-line-strong);
    border-radius: var(--tl-radius-lg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--tl-ink-muted);
}

.tl-empty strong {
    display: block;
    color: var(--tl-ink);
    font-size: 1.0625rem;
    margin-bottom: 0.25rem;
}

/* ------------------------------------------------ fliser: prosjekt/kamera */

.tl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 2rem 1.5rem;
}

.tl-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.tl-tile:hover {
    color: inherit;
}

.tl-tile__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--tl-graphite);
    border-radius: var(--tl-radius-lg);
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: 3px;
}

.tl-tile:hover .tl-tile__media,
.tl-tile:focus-visible .tl-tile__media {
    outline-color: var(--tl-blue);
}

.tl-tile:focus-visible {
    outline: none;
}

.tl-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tl-tile__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #8C959E;
    font-size: 0.875rem;
}

.tl-tile__count {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background: rgba(0, 0, 0, 0.72);
    color: var(--tl-white);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.tl-tile__body {
    padding: 0.9rem 0.15rem 0;
}

.tl-tile__title {
    font-size: 1.125rem;
    font-weight: 650;
    margin: 0 0 0.1rem;
}

.tl-tile__meta {
    color: var(--tl-ink-muted);
    margin: 0 0 0.55rem;
}

/* ----------------------------------------------------------------- scene */

.tl-stage {
    background: var(--tl-black);
    border-radius: var(--tl-radius-lg);
    overflow: hidden;
    color: var(--tl-white);
}

.tl-stage__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: var(--tl-black);
}

.tl-stage__frame img,
.tl-stage__frame video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tl-stage__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    background: var(--tl-graphite);
    font-size: 0.875rem;
}

.tl-stage__when {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tl-stage__label {
    color: #A7B0B9;
}

.tl-stage__controls {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.tl-stage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 8px;
    border: 1px solid #3A3A3A;
    background: transparent;
    color: var(--tl-white);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.tl-stage-btn:hover:not(:disabled) {
    background: #2C2C2C;
    color: var(--tl-white);
}

.tl-stage-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.tl-stage-btn[hidden] {
    display: none;
}

.tl-stage__message {
    padding: 2rem;
    text-align: center;
    color: #A7B0B9;
}

/* ------------------------------------------------------ webcam-lenke */

.tl-copy__input {
    background: var(--tl-mist) !important;
    color: var(--tl-ink-muted);
    font-size: 0.8125rem;
}

.tl-webcam__hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--tl-ink-muted);
}

/* ------------------------------------------------------ kamera: faner */

.tl-page-head--tabs {
    margin-bottom: 1rem;
}

.tl-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--tl-line-strong);
    overflow-x: auto;
    scrollbar-width: none;
}

.tl-tab {
    padding: 0.6rem 0.9rem 0.7rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--tl-ink-muted);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.tl-tab:hover {
    color: var(--tl-ink);
}

.tl-tab[aria-selected="true"] {
    color: var(--tl-ink);
    border-bottom-color: var(--tl-black);
}

/*
 * Samme to kolonner i alle faner: bilde (eller video) øverst til venstre,
 * fanens innhold under, og et panel til høyre.
 */
.tl-camera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
        "stage side"
        "below side";
    grid-template-rows: auto 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
}

.tl-camera__stage { grid-area: stage; }
.tl-camera__below { grid-area: below; }
.tl-camera__side { grid-area: side; }

/* Oversikt: kartet står ved siden av bildet i samme høyde, bildeseriene og tidslinjen under i full bredde. */
.tl-camera[data-tab="oversikt"] {
    grid-template-areas:
        "stage side"
        "below below";
    grid-template-rows: auto auto;
}

/* Eksport: skjemaet får hele bredden. */
.tl-camera[data-tab="eksport"] {
    grid-template-areas: "below below";
    grid-template-rows: auto;
}

.tl-camera__side--fill {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.tl-panel--fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1199.98px) {
    .tl-camera {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stage" "side" "below";
        grid-template-rows: none;
    }

    .tl-camera[data-tab="oversikt"] {
        grid-template-areas: "stage" "side" "below";
    }

    .tl-camera[data-tab="eksport"] {
        grid-template-areas: "below";
    }
}

.tl-map--camera {
    flex: 1;
    height: auto;
    min-height: 260px;
}

.tl-map-empty {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 200px;
    margin: 0;
    padding: 1rem;
    border-radius: var(--tl-radius);
    background: var(--tl-mist);
    color: var(--tl-ink-muted);
    font-size: 0.875rem;
    text-align: center;
}

.tl-series-list,
.tl-video-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-video-list li + li {
    border-top: 1px solid var(--tl-line);
}

/* I full bredde står bildeseriene side om side. */
.tl-series-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tl-series-list li {
    padding: 0 1.25rem;
    border-left: 1px solid var(--tl-line);
}

.tl-series-list li:first-child {
    padding-left: 0;
    border-left: 0;
}

@media (max-width: 767.98px) {
    .tl-series-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .tl-series-list li {
        padding: 0;
        border-left: 0;
    }

    .tl-series-list li + li {
        border-top: 1px solid var(--tl-line);
    }
}

.tl-series-list__item,
.tl-video-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 1rem;
    width: 100%;
    padding: 0.7rem 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tl-series-list__item:hover .tl-series-list__name,
.tl-video-list__item:hover .tl-video-list__when {
    text-decoration: underline;
}

.tl-series-list__name,
.tl-video-list__when {
    font-weight: 600;
}

.tl-series-list__meta,
.tl-video-list__size {
    font-size: 0.875rem;
    color: var(--tl-ink-muted);
    text-align: right;
}

.tl-series-list__item .tl-status {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    color: var(--tl-ink-muted);
}

.tl-video-list__item[aria-pressed="true"] .tl-video-list__when {
    color: var(--tl-blue);
}

/* Tidslinjen: ett felt per døgn, høyden viser antall bilder */
.tl-timeline {
    user-select: none;
    -webkit-user-select: none;
}

.tl-timeline__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.tl-timeline__source {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tl-ink-muted);
    margin: 0 0 0.15rem;
}

.tl-timeline__selection {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tl-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Bildeserie og tidsrom på tidslinjen, skilt med en strek når begge får plass. */
.tl-timeline__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.tl-timeline__controls > .tl-presets + .tl-presets {
    border-left: 1px solid var(--tl-line);
    padding-left: 0.75rem;
}

@media (max-width: 767.98px) {
    /* Gruppene havner på hver sin linje, så streken mellom dem blir borte. */
    .tl-timeline__controls > .tl-presets + .tl-presets {
        border-left: 0;
        padding-left: 0;
    }
}

.tl-chip {
    border: 1px solid var(--tl-line-strong);
    background: var(--tl-white);
    color: var(--tl-ink);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.tl-chip:hover {
    border-color: var(--tl-ink);
}

.tl-chip[aria-pressed="true"] {
    background: var(--tl-black);
    border-color: var(--tl-black);
    color: var(--tl-white);
}

.tl-timeline__scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

/* Lerretet er minst like bredt som panelet, og vokser når døgnene ikke får plass. */
.tl-timeline__canvas {
    width: max-content;
    min-width: 100%;
}

.tl-timeline__track {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 88px;
    padding: 0 1px;
    border-bottom: 1px solid var(--tl-line-strong);
    touch-action: pan-x;
    cursor: crosshair;
}

.tl-timeline__track--hours {
    gap: 1px;
}

.tl-day {
    position: relative;
    flex: 1 0 6px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.tl-timeline__track--hours .tl-day {
    flex-basis: 3px;
}

.tl-day__bar {
    width: 100%;
    height: var(--h, 0%);
    min-height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--tl-line-strong);
}

.tl-day--empty .tl-day__bar {
    min-height: 0;
    height: 0;
}

.tl-day--empty::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--tl-line-strong) 0 2px, transparent 2px 4px);
}

.tl-day.is-selected .tl-day__bar {
    background: var(--tl-blue);
}

.tl-day:hover .tl-day__bar {
    background: var(--tl-black);
}

.tl-timeline__axis {
    position: relative;
    height: 1.5rem;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--tl-ink-muted);
    font-variant-numeric: tabular-nums;
}

.tl-timeline__axis span {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.tl-stack {
    display: grid;
    /* minmax(0, …): den brede tidslinjen skal scrolle inni panelet, ikke gjøre kolonnen bredere. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.tl-timeline__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 0.5rem;
}

.tl-timeline__foot .tl-timeline__hint {
    margin: 0;
}

.tl-timeline__hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--tl-ink-muted);
}

/* Arkiv: én rad per år, med månedene bortover */
.tl-archive__years {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tl-archive__year {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.tl-archive__label {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.tl-archive__months {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.25rem;
}

.tl-month {
    padding: 0.4rem 0;
    border: 1px solid var(--tl-line-strong);
    border-radius: 7px;
    background: var(--tl-white);
    color: var(--tl-ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.tl-month:hover:not(:disabled) {
    border-color: var(--tl-ink);
}

.tl-month[aria-pressed="true"] {
    background: var(--tl-black);
    border-color: var(--tl-black);
    color: var(--tl-white);
}

.tl-month:disabled {
    background: transparent;
    border-color: var(--tl-line);
    color: var(--tl-ink-faint);
    cursor: default;
}

.tl-archive__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tl-archive__zip {
    margin: 0 0 0 auto;
}

.tl-archive__month {
    font-size: 1.0625rem;
    margin: 0;
}

.tl-sheet__day {
    grid-column: 1 / -1;
    margin: 0.75rem 0 -0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tl-line);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
}

.tl-sheet__day:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 575.98px) {
    .tl-archive__year {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .tl-archive__months {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Kontaktark */
.tl-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem 0.75rem;
}

@media (max-width: 575.98px) {
    .tl-sheet {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem 0.5rem;
    }

    .tl-thumb time {
        font-size: 0.75rem;
    }
}

.tl-thumb {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tl-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--tl-radius-sm);
    background: var(--tl-graphite);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.tl-thumb:hover img,
.tl-thumb[aria-pressed="true"] img {
    outline-color: var(--tl-blue);
}

.tl-thumb:focus-visible {
    outline: none;
}

.tl-thumb:focus-visible img {
    outline-color: var(--tl-blue);
}

.tl-thumb time {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--tl-ink-muted);
}

.tl-thumb[aria-pressed="true"] time {
    color: var(--tl-ink);
    font-weight: 600;
}

/* --------------------------------------------------------- eksportpanel */

.tl-export__title {
    font-size: 1.125rem;
    margin: 0;
}

/* Fakta om valgt serie, som hjelp til å velge tidsrom. Egen rad under bildeserien. */
.tl-export__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2.5rem;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
}

.tl-export__meta dt {
    font-weight: 400;
    color: var(--tl-ink-muted);
}

.tl-export__meta dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.tl-field {
    margin-top: 1.25rem;
}

.tl-field > .form-label,
.tl-field > legend {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    float: none;
    width: auto;
    padding: 0;
}

/* Valgene står side om side og brytes til neste linje når det blir trangt. */
.tl-export__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2.5rem;
    margin-top: 1.25rem;
}

.tl-export__row > .tl-field {
    margin: 0;
    min-width: 220px;
}

.tl-export__row--settings {
    padding-top: 1.25rem;
    border-top: 1px solid var(--tl-line);
    margin-top: 1.5rem;
}

.tl-export__row--settings > .tl-field {
    flex: 1 1 260px;
    max-width: 420px;
}

.tl-sequence {
    flex: 0 1 320px;
}

/* Tidsrommet: Fra og Til med sitt første og siste bilde i stort format. */
.tl-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    border: 0;
    padding: 0;
    margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
    .tl-range {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tl-frame {
    margin-top: 0.6rem;
}

.tl-frame__image {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--tl-graphite);
    border-radius: var(--tl-radius);
    overflow: hidden;
}

.tl-frame__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-frame.is-loading .tl-frame__image img {
    opacity: 0.4;
}

.tl-frame__caption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.45rem;
    font-size: 0.875rem;
}

.tl-frame__name {
    font-weight: 600;
}

.tl-frame__time {
    color: var(--tl-ink-muted);
    font-variant-numeric: tabular-nums;
}

.tl-range label {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--tl-ink-muted);
    margin-bottom: 0.2rem;
}

/* Segmentvalg: radioknapper som ser ut som én knapperad */
.tl-segment {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    border: 0;
    margin: 0;
    padding: 0;
    gap: 0.35rem;
}

.tl-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tl-segment label {
    text-align: center;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--tl-line-strong);
    border-radius: 8px;
    background: var(--tl-white);
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
}

.tl-segment label:hover {
    border-color: var(--tl-ink);
}

.tl-segment input:checked + label {
    background: var(--tl-black);
    border-color: var(--tl-black);
    color: var(--tl-white);
}

.tl-segment input:focus-visible + label {
    outline: 2px solid var(--tl-blue);
    outline-offset: 2px;
}

/* Varighet: hvor mange bilder som hoppes over, med «Alle» helt til høyre */
.tl-slider__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.35rem;
}

.tl-slider__head output {
    font-size: 0.875rem;
    font-weight: 600;
}

.tl-slider__input {
    width: 100%;
    accent-color: var(--tl-black);
    cursor: pointer;
}

.tl-slider__ticks {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    font-size: 0.75rem;
    color: var(--tl-ink-muted);
    font-variant-numeric: tabular-nums;
}

.tl-slider__ticks span {
    text-align: center;
}

.tl-slider__ticks span:first-child {
    text-align: left;
}

.tl-slider__ticks span:last-child {
    text-align: right;
}

.tl-summary--warning {
    background: var(--tl-amber-tint);
}

.tl-summary {
    margin: 1.5rem 0 1rem;
    padding: 0.9rem 1rem;
    background: var(--tl-mist);
    border-radius: var(--tl-radius);
    font-size: 0.875rem;
}

/* Lengde og utvalg til venstre, anslått filstørrelse og tid til høyre. */
.tl-summary__main span {
    display: block;
}

.tl-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 2rem;
}

.tl-summary__stats {
    display: flex;
    gap: 0.25rem 2rem;
    margin: 0;
}

.tl-summary__stats dt {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--tl-ink-muted);
}

.tl-summary__stats dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Oppsummering og knapp nederst i kortet. */
.tl-export__bar {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.tl-export__bar .tl-summary {
    flex: 1;
    margin: 0;
    padding: 0.6rem 0.9rem;
}

.tl-export__bar .btn {
    flex: none;
    min-width: 200px;
}

@media (max-width: 767.98px) {
    .tl-export__bar {
        flex-direction: column;
        align-items: stretch;
    }
}

.tl-summary strong {
    display: block;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.tl-export__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--tl-line);
    font-size: 0.8125rem;
}

.tl-export__facts dt {
    font-weight: 400;
    color: var(--tl-ink-muted);
}

.tl-export__facts dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ eksport */

.tl-progress {
    width: min(420px, 80%);
}

.tl-progress__track {
    height: 6px;
    border-radius: 999px;
    background: #333;
    overflow: hidden;
}

.tl-progress__fill {
    height: 100%;
    width: var(--p, 0%);
    background: var(--tl-blue);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.tl-progress__text {
    margin-top: 1rem;
    text-align: center;
    color: var(--tl-white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tl-progress__sub {
    text-align: center;
    color: #A7B0B9;
    font-size: 0.875rem;
}

.tl-reveal {
    animation: tl-reveal 0.5s ease both;
}

@keyframes tl-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem 1.5rem;
    margin: 0;
}

.tl-facts dt {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--tl-ink-muted);
}

.tl-facts dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- prosjektside */

/* Kameraene tar 70 %, eksportene står i en smal kolonne ved siden av. */
.tl-project {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .tl-project {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tl-cameras {
    display: grid;
    gap: 1rem;
}

/*
 * Oversikten: overskriftene står på samme linje, og innholdet under dem.
 * På smale skjermer kommer eksportene etter prosjektene.
 */
.tl-overview {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    grid-template-areas:
        "head  aside-head"
        "main  aside";
    column-gap: 2.5rem;
}

.tl-overview__head { grid-area: head; }
.tl-overview__main { grid-area: main; }
.tl-overview__aside { grid-area: aside; }

.tl-overview__aside-head {
    grid-area: aside-head;
    align-self: end;
    margin: 0 0 1.75rem;
}

@media (max-width: 991.98px) {
    .tl-overview {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "main" "aside-head" "aside";
    }

    .tl-overview__aside-head {
        margin: 2.75rem 0 1rem;
    }
}

/* Liggende kamerakort: siste bilde til venstre, status og bildeserier til høyre. */
.tl-hcard {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.5rem;
    padding: 0.75rem;
    background: var(--tl-white);
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius-lg);
    color: inherit;
    text-decoration: none;
}

.tl-hcard:hover,
.tl-hcard:focus-visible {
    color: inherit;
    border-color: var(--tl-blue);
    box-shadow: 0 0 0 1px var(--tl-blue);
    outline: none;
}

.tl-hcard__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--tl-graphite);
    border-radius: calc(var(--tl-radius-lg) - 4px);
    overflow: hidden;
}

.tl-hcard__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-hcard__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 0.5rem 0.75rem 0.5rem 0;
}

.tl-hcard__title {
    font-size: 1.1875rem;
    margin: 0 0 0.3rem;
}

.tl-hcard__meta {
    margin: 0 0 0.6rem;
    color: var(--tl-ink-muted);
}

.tl-hcard__late {
    color: #7A4B00;
}

.tl-hcard__series {
    align-self: stretch;
    margin: 1.1rem 0 0;
    font-size: 0.875rem;
}

.tl-hcard__series div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--tl-line);
}

.tl-hcard__series dt {
    font-weight: 400;
    color: var(--tl-ink-muted);
}

.tl-hcard__series dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl-hcard__cta {
    margin-top: auto;
    padding-top: 0.9rem;
    color: var(--tl-blue);
    font-size: 0.875rem;
    font-weight: 600;
}

.tl-hcard:hover .tl-hcard__cta {
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .tl-hcard {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .tl-hcard__body {
        padding: 0 0.25rem 0.25rem;
    }
}

/* ---------------------------------------------------- eksportliste */

.tl-list {
    background: var(--tl-white);
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-radius-lg);
    overflow: hidden;
}

.tl-list__row {
    display: grid;
    /* Fast bredde på knappekolonnen, så kolonnene står likt selv om filstørrelsen varierer. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) 11rem;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--tl-line);
}

.tl-list__row:first-child {
    border-top: 0;
}

.tl-list__title {
    font-weight: 600;
    color: var(--tl-ink);
    text-decoration: none;
}

.tl-list__title:hover {
    text-decoration: underline;
}

.tl-list__sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--tl-ink-muted);
}

.tl-list__status .tl-list__sub {
    margin-top: 0.3rem;
}

.tl-list__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Smal variant i sidekolonnen: tittel og status på første linje. */
.tl-list--compact .tl-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.4rem 0.75rem;
    padding: 0.9rem 1rem;
}

.tl-list__download {
    grid-column: 1 / -1;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.tl-list__download:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .tl-list__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tl-list__period {
        grid-column: 1 / -1;
        order: 3;
    }

    .tl-list__status {
        justify-self: end;
    }

    .tl-list__actions {
        grid-column: 1 / -1;
        order: 4;
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------- innlogging */

.tl-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.tl-auth__brand {
    background: var(--tl-black);
    color: var(--tl-white);
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.tl-auth__statement {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 14ch;
    margin: 0;
}

/* Et filmstripe-motiv: tidslinjens søyler i liten skala, uten tall. */
.tl-auth__strip {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 72px;
    margin-top: 2.5rem;
}

.tl-auth__strip span {
    flex: 1;
    background: #2E2E2E;
    border-radius: 2px 2px 0 0;
}

.tl-auth__strip span.is-on {
    background: var(--tl-blue);
}

.tl-auth__foot {
    color: #8C959E;
    font-size: 0.8125rem;
}

.tl-auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: var(--tl-white);
}

.tl-auth__card {
    width: 100%;
    max-width: 380px;
}

.tl-auth__card h1 {
    font-size: 1.625rem;
    margin-bottom: 0.4rem;
}

.tl-code-input {
    font-size: 2rem !important;
    font-weight: 650;
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: 0.4em !important;
    height: auto !important;
}

@media (max-width: 767.98px) {
    .tl-auth {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .tl-auth__brand {
        padding: 1.5rem;
    }

    .tl-auth__statement {
        font-size: 1.75rem;
        margin-top: 1.5rem;
    }

    .tl-auth__strip,
    .tl-auth__foot {
        display: none;
    }

    .tl-auth__form {
        align-items: flex-start;
        padding-top: 2rem;
    }
}

/* ------------------------------------------------- Bootstrap-komponenter */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-border-radius: 8px;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(29, 96, 251, 0.35);
}

.btn-sm {
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: 7px;
}

.btn-lg {
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 10px;
}

.btn-primary {
    --bs-btn-bg: var(--tl-blue);
    --bs-btn-border-color: var(--tl-blue);
    --bs-btn-hover-bg: var(--tl-blue-hover);
    --bs-btn-hover-border-color: var(--tl-blue-hover);
    --bs-btn-active-bg: #0B43C7;
    --bs-btn-active-border-color: #0B43C7;
    --bs-btn-disabled-bg: var(--tl-blue);
    --bs-btn-disabled-border-color: var(--tl-blue);
}

.btn-dark {
    --bs-btn-bg: var(--tl-black);
    --bs-btn-border-color: var(--tl-black);
    --bs-btn-hover-bg: var(--tl-graphite);
    --bs-btn-hover-border-color: var(--tl-graphite);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-light {
    --bs-btn-color: var(--tl-ink);
    --bs-btn-bg: var(--tl-white);
    --bs-btn-border-color: var(--tl-line-strong);
    --bs-btn-hover-color: var(--tl-ink);
    --bs-btn-hover-bg: var(--tl-mist);
    --bs-btn-hover-border-color: var(--tl-ink);
    --bs-btn-active-color: var(--tl-ink);
    --bs-btn-active-bg: var(--tl-mist);
    --bs-btn-active-border-color: var(--tl-ink);
}

.btn-outline-light {
    --bs-btn-color: var(--tl-white);
    --bs-btn-border-color: #3A3A3A;
    --bs-btn-hover-bg: #2C2C2C;
    --bs-btn-hover-color: var(--tl-white);
    --bs-btn-hover-border-color: #555;
}

.form-control,
.form-select {
    background-color: var(--tl-white);
    border-color: var(--tl-line-strong);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
}

.form-control-sm,
.form-select-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    border-radius: 7px;
}

.form-control-lg {
    padding: 0.7rem 0.9rem;
    font-size: 1.0625rem;
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tl-blue);
    box-shadow: 0 0 0 3px rgba(29, 96, 251, 0.2);
}

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
}

.form-text {
    color: var(--tl-ink-muted);
    font-size: 0.8125rem;
}

.form-check-input:checked {
    background-color: var(--tl-blue);
    border-color: var(--tl-blue);
}

.card {
    --bs-card-border-color: var(--tl-line);
    --bs-card-border-radius: var(--tl-radius-lg);
    --bs-card-inner-border-radius: calc(var(--tl-radius-lg) - 1px);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}

.shadow-sm {
    box-shadow: none !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tl-line);
    --bs-table-hover-bg: var(--tl-mist);
    font-size: 0.875rem;
}

.table > thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tl-ink-muted);
    border-bottom-color: var(--tl-line-strong);
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.3em 0.65em;
}

.text-bg-success { background-color: var(--tl-green) !important; color: var(--tl-black) !important; }
.text-bg-primary { background-color: var(--tl-blue) !important; color: var(--tl-white) !important; }
.text-bg-secondary { background-color: var(--tl-white) !important; color: var(--tl-ink) !important; box-shadow: inset 0 0 0 1px var(--tl-line-strong); }
.text-bg-danger { background-color: var(--tl-red-tint) !important; color: var(--tl-red-ink) !important; }
.text-bg-warning { background-color: var(--tl-amber-tint) !important; color: #7A4B00 !important; }
.text-bg-light { background-color: var(--tl-mist) !important; color: var(--tl-ink) !important; }

.alert {
    --bs-alert-border-radius: var(--tl-radius);
    --bs-alert-border-color: transparent;
    font-size: 0.9375rem;
}

.alert-info,
.alert-secondary { --bs-alert-bg: var(--tl-blue-tint); --bs-alert-color: #0B2E80; }
.alert-success { --bs-alert-bg: var(--tl-green-tint); --bs-alert-color: var(--tl-green-ink); }
.alert-warning { --bs-alert-bg: var(--tl-amber-tint); --bs-alert-color: #6B4200; }
.alert-danger { --bs-alert-bg: var(--tl-red-tint); --bs-alert-color: var(--tl-red-ink); }

.progress {
    --bs-progress-bg: var(--tl-mist);
    --bs-progress-bar-bg: var(--tl-blue);
    --bs-progress-border-radius: 999px;
}

.list-group {
    --bs-list-group-border-color: var(--tl-line);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tl-black);
    --bs-nav-link-color: var(--tl-ink);
    --bs-nav-link-hover-color: var(--tl-ink);
}

/* ------------------------------------------------------------------ admin */

/* Svar fra S3 i kameraskjemaet. Bootstraps «success» er merkevaregrønn og for lys som tekst. */
.tl-note--ok {
    color: var(--tl-green-ink);
}

.tl-note--error {
    color: var(--tl-red-ink);
}

.tl-admin-nav {
    background: var(--tl-graphite);
}

/* Admin har menyen under topplinjen, og den følger med. */
:root.tl-admin {
    --tl-header-h: 104px;
}

.tl-admin-nav ul {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.tl-admin-nav a {
    display: block;
    padding: 0.65rem 0.8rem;
    color: #C9D0D6;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.tl-admin-nav a:hover {
    color: var(--tl-white);
}

.tl-admin-nav a[aria-current="page"] {
    color: var(--tl-white);
    border-bottom-color: var(--tl-green);
}

/* Kart over kameraene (Leaflet med Kartverkets kartfliser) */
.tl-map {
    height: 380px;
    border-radius: var(--tl-radius);
    border: 1px solid var(--tl-line);
    overflow: hidden;
    z-index: 0;
}

/* Kartfargene tones ned til halv metning, så markørene og bildene får oppmerksomheten. */
.tl-map .leaflet-tile-pane {
    filter: saturate(50%);
}

.tl-map--picker {
    height: 260px;
}

.tl-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tl-green);
    border: 3px solid var(--tl-black);
    box-shadow: 0 0 0 2px var(--tl-white);
}

.tl-marker--inactive {
    background: var(--tl-ink-faint);
}

.tl-marker--editing {
    background: var(--tl-blue);
    border-color: var(--tl-white);
    box-shadow: 0 0 0 2px var(--tl-blue);
}

.tl-map .leaflet-popup-content {
    font-family: var(--tl-font);
    font-size: 0.875rem;
    margin: 0.75rem 1rem;
}

.tl-address {
    position: relative;
}

.tl-address__results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--tl-white);
    border: 1px solid var(--tl-line-strong);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tl-address__results button {
    display: block;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    color: var(--tl-ink);
}

.tl-address__results button:hover,
.tl-address__results button:focus-visible {
    background: var(--tl-mist);
}

.tl-address__results li.is-empty {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    color: var(--tl-ink-muted);
}

.tl-footer {
    padding-block: 1.5rem;
    border-top: 1px solid var(--tl-line);
    color: var(--tl-ink-muted);
    font-size: 0.8125rem;
}

/* ------------------------------------------------------------- bevegelse */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Tekst på grønn fyll må være svart for å kunne leses. */
.progress-bar.bg-success {
    color: var(--tl-black);
}