/*
 * Viewport-responsive base font size.
 * At 1920px → ~17px  (1080p monitor)
 * At 2560px → ~23px  (1440p monitor)
 * At 3840px → capped at 26px  (4K at 100% OS scaling)
 * At 1366px → floored at 13px (laptop)
 *
 * All DMC/Mantine components use rem internally, so they scale
 * automatically when this root size changes.
 */
html {
    font-size: clamp(13px, 0.9vw, 26px);
    --feature-color: #0ea5c8;
    --feature-muted: #dff5fb;
    --feature-bike: #9ff6df;
}

body {
    margin: 0;
    padding: 0;
}

/* ── Feature shell: top bar, sidebar, and sub-menu ───────────────────────────*/
.feature-shell {
    --feature-color: #0ea5c8;
    --feature-muted: #dff5fb;
    --feature-bike: #9ff6df;
}

.top-bar {
    height: 3rem;
    background: var(--feature-color);
    border-bottom: 1px solid color-mix(in srgb, var(--feature-color) 74%, #000);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.brand-logo {
    position: relative;
    width: 9.1rem;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    flex-shrink: 0;
}
.brand-logo-base {
    width: 5.2rem;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.brand-logo-rider {
    position: absolute;
    left: 0.7rem;
    width: 5.2rem;
    aspect-ratio: 933.03138 / 299.10922;
    background-color: var(--feature-bike);
    -webkit-mask-image: url('/assets/logo-rider.svg');
    mask-image: url('/assets/logo-rider.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}
.active-module-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}
.top-actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.7rem;
    gap: 0.55rem;
}
#top-bar .mantine-SegmentedControl-root {
    background: color-mix(in srgb, var(--feature-color) 72%, #000);
}
#top-bar .mantine-SegmentedControl-label {
    color: rgba(255,255,255,0.82);
}
#top-bar .mantine-SegmentedControl-control[data-active] .mantine-SegmentedControl-label,
#top-bar .mantine-SegmentedControl-input:checked + .mantine-SegmentedControl-label {
    color: #102033;
}

.account-menu-wrap {
    position: relative;
}
.account-menu-btn {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.16);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
}
.account-menu {
    position: absolute;
    top: 2.25rem;
    right: 0;
    width: 14rem;
    background: white;
    color: #172033;
    border: 1px solid #d8dee6;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
    padding: 0.6rem;
    z-index: 2000;
}
.account-menu-identity {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e6eaf0;
    overflow-wrap: anywhere;
}
.account-menu-identity div + div {
    color: #64748b;
    font-weight: 500;
}
.account-menu-meta {
    font-size: 0.72rem;
    color: #475569;
    line-height: 1.4;
    padding: 0.5rem 0;
}
.account-menu-item {
    width: 100%;
    border: 0;
    background: #f1f5f9;
    color: #172033;
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    margin-top: 0.25rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.account-menu-item:hover {
    background: #e2e8f0;
}

.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    overflow: auto;
    isolation: isolate;
}
.bootstrap-auth-screen {
    display: flex;
    z-index: 6000;
    opacity: 1;
    transition: opacity 240ms ease;
    /* Mantine installs these baseline rules when Dash mounts.  Keep the
       lightweight login shell on the same metrics from its first paint so
       hydration cannot change its font or resize its 100%-wide controls. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.55;
}
.bootstrap-auth-screen,
.bootstrap-auth-screen *,
.bootstrap-auth-screen *::before,
.bootstrap-auth-screen *::after {
    box-sizing: border-box;
}
.bootstrap-auth-screen.bootstrap-auth-leaving {
    opacity: 0;
    pointer-events: none;
}
.bootstrap-login-shell {
    display: grid;
}
.bootstrap-field {
    display: block;
    margin-bottom: 0.75rem;
    color: #102d4f;
    font-size: 0.875rem;
    font-weight: 500;
}
.bootstrap-field span {
    display: block;
    margin-bottom: 0.32rem;
}
.bootstrap-field input {
    width: 100%;
    height: 2.25rem;
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    background: white;
    padding: 0 0.75rem;
    color: #102d4f;
    font: inherit;
    line-height: 1.55;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bootstrap-field input:focus {
    border-color: #20b99d;
    box-shadow: 0 0 0 3px rgba(32, 200, 168, 0.14);
}
.bootstrap-login-card button {
    width: 100%;
    min-height: 2.5rem;
    border: 0;
    border-radius: 8px;
    background: #08254a;
    color: white;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.55;
    cursor: pointer;
}
.bootstrap-login-card button:hover {
    background: #0d3565;
}
.bootstrap-login-card button:disabled {
    cursor: wait;
    opacity: 0.78;
}
.bootstrap-resume-message {
    display: none;
    color: #5b7087;
    font-size: 0.88rem;
    text-align: center;
}
.bootstrap-auth-resume .bootstrap-login-shell {
    width: min(31rem, calc(100vw - 3rem));
    grid-template-columns: 1fr;
    justify-items: center;
}
.bootstrap-auth-resume .auth-brand-stage {
    align-items: center;
}
.bootstrap-auth-resume .auth-brand-copy,
.bootstrap-auth-resume .bootstrap-login-card {
    display: none;
}
.bootstrap-auth-resume .bootstrap-resume-message {
    display: block;
    margin-top: 0.8rem;
}
.auth-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 29% 45%, rgba(32, 200, 168, 0.14), transparent 31rem),
        radial-gradient(circle at 82% 12%, rgba(14, 165, 200, 0.08), transparent 24rem),
        linear-gradient(145deg, #f7fafc 0%, #edf4f7 55%, #f5f8fa 100%);
    opacity: 1;
    transition: opacity 280ms ease 180ms;
}
.auth-screen > * {
    position: relative;
    z-index: 1;
}
.auth-screen.auth-screen-leaving::before {
    opacity: 0;
}
.auth-login-shell {
    width: min(64rem, calc(100vw - 3rem));
    grid-template-columns: minmax(0, 1.15fr) minmax(21rem, 24rem);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
}
.auth-login-shell.auth-intro-pending {
    visibility: hidden;
}
.auth-login-shell.auth-intro-ready {
    visibility: visible;
}
.auth-brand-stage {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.auth-hero-logo {
    width: min(100%, 31rem);
    height: auto;
    display: block;
    transform-origin: top left;
    will-change: transform, opacity;
}
.auth-brand-copy {
    margin-top: 1.15rem;
    padding-left: 0;
}
.auth-brand-title {
    color: #5b7087;
    font-size: clamp(1.02rem, 1.6vw, 1.35rem);
    font-weight: 750;
    letter-spacing: -0.015em;
}
.auth-brand-subtitle {
    max-width: 31rem;
    margin: 0.38rem 0 0;
    color: #5b7087;
    font-size: 0.88rem;
    line-height: 1.55;
}
.auth-card {
    width: min(24rem, calc(100vw - 2.5rem));
    background: white;
    border: 1px solid #d8dee6;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
    padding: 1.6rem;
}
.auth-login-card {
    width: 100%;
    padding: clamp(1.55rem, 3vw, 2rem);
    border-color: rgba(199, 211, 221, 0.9);
    border-radius: 18px;
    box-shadow:
        0 26px 70px rgba(3, 27, 63, 0.13),
        0 2px 8px rgba(3, 27, 63, 0.05);
}
.auth-login-shell.auth-intro-ready .auth-hero-logo {
    animation: auth-hero-arrive 420ms cubic-bezier(.22, .8, .32, 1) both;
}
.auth-login-shell.auth-intro-ready .auth-brand-copy {
    animation: auth-copy-enter 420ms ease both;
}
.auth-login-shell.auth-intro-ready .auth-login-card {
    animation: auth-card-enter 460ms cubic-bezier(.22, .8, .32, 1) both;
}
.auth-login-shell.auth-intro-handoff .auth-hero-logo,
.auth-login-shell.auth-intro-handoff .auth-brand-copy,
.auth-login-shell.auth-intro-handoff .auth-login-card {
    animation: none;
}
.auth-card-eyebrow {
    margin-bottom: 0.5rem;
    color: #20a98f;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}
.auth-card-intro {
    margin: -0.55rem 0 1.25rem;
    color: #64748b;
    font-size: 0.83rem;
    line-height: 1.45;
}
.auth-logo {
    width: 6.8rem;
    display: block;
    margin-bottom: 1rem;
}
.auth-card h2 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: #102d4f;
}
.auth-card .mantine-InputWrapper-root {
    margin-bottom: 0.75rem;
}
.auth-login-card .mantine-Input-input {
    border-color: #cfd9e3;
    border-radius: 8px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.auth-login-card .mantine-Input-input:focus {
    border-color: #20b99d;
    box-shadow: 0 0 0 3px rgba(32, 200, 168, 0.14);
}
.auth-login-card .mantine-Button-root {
    min-height: 2.5rem;
    margin-top: 0.2rem;
    border-radius: 8px;
    background: #08254a;
    transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.auth-login-card .mantine-Button-root:hover {
    background: #0d3565;
    box-shadow: 0 8px 20px rgba(3, 27, 63, 0.16);
}
.auth-login-card .mantine-Button-root:active {
    transform: translateY(1px);
}
.auth-error {
    min-height: 1.1rem;
    margin-top: 0.65rem;
    color: #b42318;
    font-size: 0.78rem;
}
.auth-info {
    margin: 0.35rem 0 0.85rem;
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.45;
}
.auth-secondary-link {
    display: block;
    margin-top: 0.8rem;
    color: #0b6f67;
    font-size: 0.8rem;
    text-align: center;
    text-decoration: none;
}
.auth-secondary-link:hover {
    text-decoration: underline;
}

.auth-login-shell.auth-leaving .auth-brand-copy {
    animation: auth-content-leave 220ms ease forwards;
}
.auth-login-shell.auth-leaving .auth-login-card {
    animation: auth-card-leave 260ms ease forwards;
    pointer-events: none;
}
.auth-login-shell.auth-leaving .auth-hero-logo {
    position: relative;
    z-index: 2;
    animation: auth-logo-dock 560ms cubic-bezier(.55, 0, .2, 1) forwards;
}

@keyframes auth-hero-arrive {
    from { opacity: 0; transform: translateY(8px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-copy-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes auth-card-enter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes auth-content-leave {
    to { opacity: 0; transform: translateY(-5px); }
}
@keyframes auth-card-leave {
    to { opacity: 0; transform: translateY(10px); }
}
@keyframes auth-logo-dock {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    82% {
        opacity: 1;
        transform:
            translate3d(var(--auth-logo-exit-x, 0), var(--auth-logo-exit-y, 0), 0)
            scale(var(--auth-logo-exit-scale, .2));
    }
    100% {
        opacity: 0;
        transform:
            translate3d(var(--auth-logo-exit-x, 0), var(--auth-logo-exit-y, 0), 0)
            scale(var(--auth-logo-exit-scale, .2));
    }
}

@media (max-width: 760px) {
    .auth-screen {
        align-items: flex-start;
        padding: 1.5rem 1rem 2rem;
    }
    .auth-login-shell {
        width: min(27rem, 100%);
        grid-template-columns: 1fr;
        gap: 1.35rem;
        margin: auto 0;
    }
    .auth-brand-stage {
        align-items: center;
        text-align: center;
    }
    .auth-hero-logo {
        width: min(76vw, 20rem);
    }
    .auth-brand-copy {
        margin-top: 0.55rem;
        padding-left: 0;
    }
    .auth-brand-subtitle {
        max-width: 23rem;
    }
    .auth-login-card {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-hero-logo,
    .auth-brand-copy,
    .auth-login-card,
    .auth-login-shell.auth-intro-ready .auth-hero-logo,
    .auth-login-shell.auth-intro-ready .auth-brand-copy,
    .auth-login-shell.auth-intro-ready .auth-login-card,
    .auth-login-shell.auth-leaving .auth-hero-logo,
    .auth-login-shell.auth-leaving .auth-brand-copy,
    .auth-login-shell.auth-leaving .auth-login-card {
        animation: none;
    }
}
/* A page, not a dialog. It was a floating card with a shadow and a × in the
   corner, which invited the reader to treat it as something that had popped up
   over their work — and then it did not go away when they navigated elsewhere.
   It now fills the content area beside the sidebar and below the top bar, so
   it reads as somewhere you went rather than something that appeared. */
.admin-panel {
    position: fixed;
    top: 3.2rem;
    left: 3.4rem;
    right: 0;
    bottom: 0;
    background: #f6f8fa;
    border-left: 1px solid #e2e8f0;
    z-index: 4500;
    padding: 1.4rem 1.6rem;
    overflow: auto;
}
.admin-panel > * {
    max-width: 96rem;
}
/* The customer picker and the + that creates a new one, on one line. */
.admin-customer-picker {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}
.admin-customer-picker > *:first-child {
    flex: 1;
    min-width: 0;
}
.admin-new-customer-btn {
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #1971c2;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-new-customer-btn:hover {
    background: #e7f5ff;
    border-color: #1971c2;
}
.admin-panel-subtitle {
    color: #64748b;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.admin-customer-shell {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.admin-customer-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}
.admin-customer-summary {
    padding: 0.7rem;
    border-radius: 8px;
    background: #f3f7fa;
    color: #334155;
    font-size: 0.78rem;
}
.admin-customer-summary strong,
.admin-customer-summary div {
    display: block;
}
.admin-create-customer,
.admin-danger-zone {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.7rem;
}
.admin-create-customer summary,
.admin-danger-zone summary {
    cursor: pointer;
    font-weight: 700;
    color: #172033;
    margin-bottom: 0.75rem;
}
.admin-customer-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.admin-customer-hero {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 0.15rem 0.1rem;
}
.admin-customer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}
.admin-customer-meta span {
    border-radius: 999px;
    padding: 0.2rem 0.52rem;
    background: #edf7f5;
    color: #0f6d61;
    font-size: 0.72rem;
}
.admin-detail-grid,
.admin-users-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.admin-field-label {
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.admin-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.65rem;
    margin: 0.65rem 0 0.85rem;
    color: #172033;
    font-size: 0.78rem;
}
.admin-product-list label {
    display: flex;
    align-items: center;
    gap: 0.38rem;
}
.admin-danger-zone {
    border-color: #fecaca;
    background: #fffafa;
}
.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.admin-panel h3,
.admin-panel h4 {
    margin: 0;
    color: #172033;
}
.admin-panel h4 {
    font-size: 0.92rem;
    margin-bottom: 0.75rem;
}
.admin-close-btn {
    border: 0;
    background: #f1f5f9;
    color: #172033;
    border-radius: 6px;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    font-size: 1.1rem;
}
.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.admin-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.admin-section {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem;
    min-width: 0;
}
.feature-checklist {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    margin: 0.75rem 0;
    font-size: 0.78rem;
    color: #172033;
}
.feature-checklist label {
    display: block;
    margin: 0.28rem 0;
}
.feature-tree {
    max-height: 18rem;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    margin: 0.75rem 0;
    font-size: 0.78rem;
    color: #172033;
}
.feature-tree-group {
    padding: 0.35rem 0;
    border-bottom: 1px solid #edf2f7;
}
.feature-tree-group:last-child {
    border-bottom: 0;
}
.feature-tree-parent label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 750;
    margin: 0.1rem 0;
    line-height: 1.2;
}
.feature-tree-children {
    margin-left: 1rem;
    margin-top: 0.25rem;
}
.feature-tree-children label {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    margin: 0.16rem 0;
    line-height: 1.2;
}
.feature-tree input[type="checkbox"],
.admin-single-check input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}
.admin-single-check {
    margin: 0.75rem 0 0.45rem;
    font-size: 0.78rem;
    color: #172033;
}
.admin-single-check label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
}
.invite-output {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: #334155;
}

@media (max-width: 760px) {
    .admin-panel {
        top: 3.4rem;
        left: 0.6rem;
        right: 0.6rem;
        bottom: 0.6rem;
        width: auto;
    }
    .admin-grid {
        grid-template-columns: 1fr;
    }
    .admin-customer-shell,
    .admin-detail-grid,
    .admin-users-grid {
        grid-template-columns: 1fr;
    }
    .admin-customer-sidebar {
        position: static;
    }
    .admin-product-list {
        grid-template-columns: 1fr;
    }
    .account-menu {
        right: -0.2rem;
    }
}

.left-sidebar {
    width: 3.25rem;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--feature-muted), white 16rem);
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}
.left-sidebar::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.28rem;
    width: calc(3.25rem - 0.45rem);
    height: 3.15rem;
    border-radius: 12px 0 0 12px;
    background: var(--feature-muted);
    z-index: 0;
}
.module-btn {
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid transparent;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Placeholder modules are not navigable. Clickability follows .enabled,
       NOT .active — .active only marks the module currently being viewed, so
       keying the cursor off it made every other module, including the working
       ones, show a "forbidden" cursor. */
    cursor: not-allowed;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    color: var(--module-color);
}
.module-btn.enabled {
    cursor: pointer;
}
.module-btn.enabled:hover:not(.active) {
    background: color-mix(in srgb, var(--module-color) 10%, white);
    border-color: color-mix(in srgb, var(--module-color) 22%, white);
}
.module-btn.active {
    background: white;
    border-color: color-mix(in srgb, var(--feature-color) 28%, white);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--feature-color) 18%, transparent);
    color: var(--feature-color);
}
.module-btn .sidebar-icon {
    background-color: currentColor;
}
.sidebar-module-separator {
    width: 1.65rem;
    height: 1px;
    margin: 0.18rem 0;
    background: #cfd8df;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.sub-tabs-bar {
    height: 2.5rem;
    background: var(--feature-muted);
    border-bottom: 1px solid color-mix(in srgb, var(--feature-color) 18%, #dfe5ea);
    display: flex;
    align-items: center;
    padding: 0 0.25rem 0 0.72rem;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}
.sub-tabs-bar::before {
    content: "";
    position: absolute;
    left: -0.02rem;
    top: 0;
    bottom: 0;
    width: 1rem;
    background: var(--feature-muted);
    z-index: 0;
}
.sub-tabs-bar > * {
    position: relative;
    z-index: 1;
}

/* ── Sidebar icon masks ───────────────────────────────────────────────────────
   Each icon is an SVG file used as a CSS mask. The background-color of the
   div shows through the icon shape, giving full colour control in Python.   */
.sidebar-icon {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}
.icon-mobility { -webkit-mask-image: url('/assets/icons/mobility.svg');  mask-image: url('/assets/icons/mobility.svg'); }
.icon-greenwave { -webkit-mask-image: url('/assets/icons/greenwave.svg'); mask-image: url('/assets/icons/greenwave.svg'); }
.icon-signalanalysis { -webkit-mask-image: url('/assets/icons/signal-analysis.svg'); mask-image: url('/assets/icons/signal-analysis.svg'); }
.icon-road      { -webkit-mask-image: url('/assets/icons/road.svg');      mask-image: url('/assets/icons/road.svg'); }
.icon-accident  { -webkit-mask-image: url('/assets/icons/accidents.svg'); mask-image: url('/assets/icons/accidents.svg'); }
.icon-od        { -webkit-mask-image: url('/assets/icons/od.svg');        mask-image: url('/assets/icons/od.svg'); }
.icon-feedback  { -webkit-mask-image: url('/assets/icons/feedback.svg');  mask-image: url('/assets/icons/feedback.svg'); }
.icon-cyclistcommunication { -webkit-mask-image: url('/assets/icons/cyclist-communication.svg'); mask-image: url('/assets/icons/cyclist-communication.svg'); }
.icon-modelbuilder { -webkit-mask-image: url('/assets/icons/modelbuilder.svg'); mask-image: url('/assets/icons/modelbuilder.svg'); }
.icon-settings  { -webkit-mask-image: url('/assets/icons/settings.svg');  mask-image: url('/assets/icons/settings.svg'); }

/* ── Sub-tab buttons ─────────────────────────────────────────────────────────*/
.subtab-btn {
    box-sizing: border-box;
    position: relative;   /* sit above .sub-tabs-bar::before left overlay even when */
    z-index: 1;           /* wrapped in a display:contents group (greenwave subtabs) */
    height: calc(100% - 0.45rem);
    margin: 0 0.35rem 0 0;
    padding: 0 0.55rem;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: white;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.82em;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.subtab-btn.active {
    border-color: var(--feature-color);
    background: white;
    color: color-mix(in srgb, var(--feature-color) 78%, #102033);
    font-weight: 600;
}
.subtab-btn:hover:not(.active) {
    background: #f8f9fa;
}
.tab-icon {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    background-color: #495057;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.15s;
}
.subtab-btn.active .tab-icon {
    background-color: var(--feature-color);
}
.subtab-label {
    line-height: 1;
}
.icon-tab-analyse       { -webkit-mask-image: url('/assets/icons/tab-analyse.svg');       mask-image: url('/assets/icons/tab-analyse.svg'); }
/* Row action on Prioritering: open the stretch in Tilstandsoverblik. */
.prio-detail-btn {
    border: 1px solid #d9c4a9;
    border-radius: 5px;
    background: #fbfaf8;
    color: #9c6b3f;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.prio-detail-btn:hover { background: #f3ece3; border-color: #9c6b3f; }

/* The rank number doubles as the jump target — styled as a link so it reads as
   clickable without turning the first column into a row of buttons. */
.prio-rank-btn {
    border: 0;
    background: none;
    padding: 0;
    color: #9c6b3f;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-variant-numeric: tabular-nums;
}
.prio-rank-btn:hover { color: #6f4a2a; }

/* Fold-out header for the per-route history heatmap on Tilstandsoverblik. */
.road-hist-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fbfaf8;
    color: #495057;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
}
.road-hist-toggle:hover { background: #f3ece3; border-color: #d9c4a9; }
.road-hist-toggle.open  { background: #f3ece3; border-color: #d9c4a9; color: #9c6b3f; }
.road-hist-caret {
    display: inline-block;
    font-size: 0.7rem;
    color: #9c6b3f;
    transition: transform 0.15s;
}
.road-hist-caret.open { transform: rotate(90deg); }

/* Vejbeskaffenhed subtabs — one glyph each; they all shared tab-analyse before.
   road-condition = roughness trace over a road, ranking = bars to compare,
   prioritering = a cone (what the ranked stretches turn into), udvikling = trend. */
.icon-tab-road-condition { -webkit-mask-image: url('/assets/icons/tab-road-condition.svg'); mask-image: url('/assets/icons/tab-road-condition.svg'); }
.icon-tab-ranking       { -webkit-mask-image: url('/assets/icons/tab-ranking.svg');       mask-image: url('/assets/icons/tab-ranking.svg'); }
.icon-tab-prioritering  { -webkit-mask-image: url('/assets/icons/tab-prioritering.svg');  mask-image: url('/assets/icons/tab-prioritering.svg'); }
.icon-tab-udvikling     { -webkit-mask-image: url('/assets/icons/tab-udvikling.svg');     mask-image: url('/assets/icons/tab-udvikling.svg'); }
.icon-tab-hastighed     { -webkit-mask-image: url('/assets/icons/tab-hastighed.svg');     mask-image: url('/assets/icons/tab-hastighed.svg'); }
.icon-tab-forsinkelse   { -webkit-mask-image: url('/assets/icons/tab-forsinkelse.svg');   mask-image: url('/assets/icons/tab-forsinkelse.svg'); }
.icon-tab-stop          { -webkit-mask-image: url('/assets/icons/tab-stop.svg');          mask-image: url('/assets/icons/tab-stop.svg'); }
.icon-tab-opbremsninger { -webkit-mask-image: url('/assets/icons/tab-opbremsninger.svg'); mask-image: url('/assets/icons/tab-opbremsninger.svg'); }
.icon-tab-kryds         { -webkit-mask-image: url('/assets/icons/tab-kryds.svg');         mask-image: url('/assets/icons/tab-kryds.svg'); }
.icon-tab-gw-maalt      { -webkit-mask-image: url('/assets/icons/tab-gw-maalt.svg');      mask-image: url('/assets/icons/tab-gw-maalt.svg'); }
.icon-tab-gw-simulering { -webkit-mask-image: url('/assets/icons/tab-gw-simulering.svg'); mask-image: url('/assets/icons/tab-gw-simulering.svg'); }
.icon-tab-gw-optimering { -webkit-mask-image: url('/assets/icons/tab-gw-optimering.svg'); mask-image: url('/assets/icons/tab-gw-optimering.svg'); }
.icon-tab-gw-signaler   { -webkit-mask-image: url('/assets/icons/tab-gw-signaler.svg');   mask-image: url('/assets/icons/tab-gw-signaler.svg'); }

.routes-db-subtab-btn {
    box-sizing: border-box;
    height: calc(100% - 0.45rem);
    margin: 0 0.1rem 0 0.35rem;
    padding: 0 0.55rem;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: white;
    color: #495057;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82em;
    white-space: nowrap;
}
.routes-db-subtab-btn:hover:not(.active) {
    background: #f8f9fa;
}
.routes-db-subtab-btn.active {
    border-color: var(--feature-color);
    color: color-mix(in srgb, var(--feature-color) 78%, #102033);
    font-weight: 600;
}
.routes-db-subtab-btn.active .routes-db-icon {
    background-color: var(--feature-color);
}
.routes-db-icon {
    width: 1.1rem;
    height: 1.1rem;
    background-color: #495057;
    flex-shrink: 0;
    -webkit-mask-image: url('/assets/icons/database.svg');
    mask-image: url('/assets/icons/database.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── Filter trigger button (in sub-tabs bar) ─────────────────────────────────*/
.filter-trigger-btn {
    box-sizing: border-box;
    height: calc(100% - 0.45rem);
    padding: 0 0.6rem;
    border: 1px solid color-mix(in srgb, var(--feature-color) 22%, #dee2e6);
    border-radius: 5px;
    background: white;
    color: var(--feature-color);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.filter-trigger-btn:hover { background: #f0fbfe; }
.filter-trigger-btn.open  { border-color: var(--feature-color); background: #e8f8fd; }
.fp-trigger-text { color: #212529; font-size: 0.95em; }
.fp-caret { font-size: 0.75em; opacity: 0.55; margin-left: 1px; }
.fp-filter-icon {
    width: 1.1rem; height: 1.1rem; flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}

/* ── Filter dropdown panel ───────────────────────────────────────────────────*/
/* position/display/top/right are set dynamically via clientside callback     */
.filter-dropdown {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    padding: 0.8rem 0.9rem 0.65rem;
    width: 420px;
}
.fp-section-label {
    font-size: 0.67em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #adb5bd;
    margin-bottom: 0.3rem;
    margin-top: 0.05rem;
}
.fp-label-a { color: var(--feature-color); }
.fp-label-b { color: #b05d00; }

/* 24-hour band */
.hour-band {
    display: flex;
    gap: 2px;
    background: #f3f5f7;
    border-radius: 5px;
    padding: 3px;
    user-select: none;
}
.hour-cell {
    flex: 1;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    background: white;
    border: 1px solid #e9ecef;
    transition: background 0.08s, border-color 0.08s;
}
.hour-cell:hover { border-color: #74c6db; background: #e8f8fd; }
.hour-cell.selected { background: var(--feature-color); border-color: #0993b3; }
.hour-cell.selected:hover { background: #0993b3; }

/* ── Vejbeskaffenhed period matrix (year × month) ─────────────────────────── */
/* Sized in rem throughout, NOT px. html sets font-size: clamp(13px, 0.9vw, 26px),
   so text here scales with the viewport while a px panel would not — that
   mismatch is what pushed the grid outside the panel on a wide screen.

   width is fit-content rather than a number: the panel then hugs the grid and
   the 0.9rem side padding is symmetric by construction. A hard width has to
   agree with the grid's total AND with whether the box is content- or
   border-box (Mantine's reset makes it the latter) — get either wrong and the
   grid eats one side's padding, which is exactly what happened at 33.4rem. */
.rq-period-dropdown { width: fit-content; }

.rq-matrix-wrap { margin-bottom: 0.5rem; }

.rq-matrix {
    display: grid;
    /* Fixed rem tracks, not 1fr: an fr track floors at min-content, so a header
       whose text is wider than its share pushes the whole grid past the panel
       instead of shrinking. */
    grid-template-columns: 4.6rem repeat(12, 2.1rem);
    gap: 0.2rem;
}
/* Header row is its own grid; identical columns keep the two aligned. */
.rq-matrix-head { margin-bottom: 0.2rem; }

/* Column headers (month names) and row headers (years) are themselves the
   bulk-select controls, so they look clickable rather than like labels. */
.rq-hdr {
    font-size: 0.63em;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #495057;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.55rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.08s, border-color 0.08s, color 0.08s;
}
.rq-hdr:hover { border-color: #74c6db; background: #e8f8fd; color: #0a7999; }
/* A header goes solid only when every selectable cell behind it is on. */
.rq-hdr.full { background: var(--feature-color); border-color: #0993b3; color: white; }
.rq-hdr.full:hover { background: #0993b3; }
/* Partly selected: readable at a glance without claiming "all". */
.rq-hdr.partial { background: #d4f0f9; border-color: #74c6db; color: #0a7999; }

/* "Alle data" has to fit the 4.6rem corner on one line — it wrapped and
   clipped at the 0.63em the other headers use. */
.rq-corner { font-size: 0.55em; letter-spacing: 0; }
.rq-year   { font-size: 0.74em; letter-spacing: 0; }

.rq-cell {
    height: 1.55rem;
    border-radius: 3px;
    cursor: pointer;
    background: white;
    border: 1px solid #e9ecef;
    transition: background 0.08s, border-color 0.08s;
}
.rq-cell:hover { border-color: #74c6db; background: #e8f8fd; }
.rq-cell.selected { background: var(--feature-color); border-color: #0993b3; }
.rq-cell.selected:hover { background: #0993b3; }

/* No data in the database for this month — not a choice the user can make. */
.rq-cell.empty {
    background: repeating-linear-gradient(
        45deg, #f8f9fa, #f8f9fa 3px, #f1f3f5 3px, #f1f3f5 6px);
    border-color: #f1f3f5;
    cursor: default;
}
.rq-cell.empty:hover { border-color: #f1f3f5; }

.rq-period-summary {
    font-size: 0.7em;
    color: #868e96;
    margin-bottom: 0.4rem;
    min-height: 1.1em;
}
.rq-period-summary.warn { color: #e8590c; font-weight: 600; }

/* Calendar glyph on the toolbar trigger. */
.rq-period-icon {
    width: 13px;
    height: 13px;
    border: 1.5px solid #495057;
    border-radius: 2px;
    border-top-width: 4px;
    flex: none;
}

.hour-ticks {
    display: flex;
    justify-content: space-between;
    padding: 2px 3px 0;
    font-size: 0.64em;
    color: #adb5bd;
    margin-bottom: 0.35rem;
}
/* Signaler editor */
.signaler-view {
    height: 100%;
    min-height: 0;
}

.signaler-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.55rem;
}

.signaler-route-picker {
    flex: 1 1 360px;
    max-width: 520px;
}

.signaler-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #495057;
    font-size: 0.74rem;
}

.signaler-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.sig-dot {
    display: inline-block;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(15, 23, 42, 0.16);
}

.sig-dot-open { background: #f59e0b; }
.sig-dot-ok { background: #16a34a; }
.sig-dot-selected { background: #2563eb; }

.signaler-map {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #d7dee5;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.signaler-panel {
    flex: 1 1 auto;
    min-width: 420px;
    height: 100%;
    min-height: 0;
    overflow: auto;
    border: 1px solid #d7dee5;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.signaler-panel-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868e96;
    font-size: 0.84rem;
}

.signaler-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #e9ecef;
    padding: 0.58rem 0.65rem;
}

.signaler-sheet-title {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
}

.signaler-sheet-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: #212529;
}

.signaler-sheet-route {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #868e96;
    font-size: 0.72rem;
}

.signaler-lock-btn {
    width: 1.8rem;
    height: 1.8rem;
}

.signaler-lock-icon {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    background-color: currentColor;
    -webkit-mask: url("/assets/lock-open.svg") center / contain no-repeat;
    mask: url("/assets/lock-open.svg") center / contain no-repeat;
}

.signaler-lock-btn.locked .signaler-lock-icon {
    -webkit-mask-image: url("/assets/lock.svg");
    mask-image: url("/assets/lock.svg");
}

.signaler-sheet-scroll {
    padding: 0.45rem 0.55rem 0.65rem;
}

.signaler-sheet {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.signaler-sheet th {
    position: sticky;
    top: 3.25rem;
    z-index: 1;
    background: white;
    text-align: left;
    font-weight: 700;
    font-size: 0.66rem;
    line-height: 1;
    color: #868e96;
    padding: 0.38rem 0.42rem;
    border-bottom: 1px solid #e9ecef;
    text-transform: uppercase;
}

.signaler-sheet td {
    vertical-align: middle;
    padding: 0.28rem 0.42rem;
    border-bottom: 1px solid #f1f3f5;
}

.signaler-sheet tbody.signaler-jgroup:hover td {
    background: #f8fafc;
}

.signaler-code-cell {
    color: #495057;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.signaler-code-loc {
    color: #adb5bd;
    font-weight: 400;
}

.signaler-time-input input {
    text-align: right;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* Locked sheet: lighten DMC's default disabled-input grey */
.signaler-sheet input:disabled,
.signaler-sheet input[data-disabled] {
    background-color: #fafbfc;
    color: #adb5bd;
    -webkit-text-fill-color: #adb5bd;
    opacity: 1;
}

.signaler-letter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px white, 0 1px 4px rgba(15, 23, 42, 0.18);
}

.signaler-letter-badge.ok { background: #16a34a; }
.signaler-letter-badge.open { background: #f59e0b; }

.signaler-note {
    color: #868e96;
    font-size: 0.72rem;
    line-height: 1.35;
    margin-top: 0.55rem;
}

/* Signaler map: permanent junction-letter label on capsules / one-sided markers */
.leaflet-tooltip.sig-cap-label {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    font-weight: 700;
    font-size: 0.72rem;
    color: #1f2937;
    padding: 1px 5px;
    border-radius: 4px;
}
.leaflet-tooltip.sig-cap-label::before { display: none; }

.sig-popup {
    min-width: 220px;
    max-width: 280px;
}

.sig-popup-title {
    color: #212529;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.28rem;
}

.sig-popup-text {
    color: #495057;
    font-size: 0.74rem;
    line-height: 1.3;
    margin-bottom: 0.45rem;
}

.sig-popup-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    border-radius: 7px;
    background: #e6f6ec;
    color: #16a34a;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.1;
    padding: 0.34rem 0.55rem;
    margin-bottom: 0.45rem;
    white-space: normal;
}

.sig-popup-status::before {
    content: "✓";
    font-weight: 900;
}

.sig-popup-hint {
    color: #868e96;
    font-size: 0.68rem;
    line-height: 1.25;
    margin-top: 0.42rem;
}

.fp-presets { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.35rem; }

/* Data-scope info badge on Green Wave signal cards */
.gw-info-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid #adb5bd;
    color: #868e96;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
    cursor: help;
    user-select: none;
}
.gw-info-i.filtered {
    border-color: var(--feature-color, #16a34a);
    color: #fff;
    background: var(--feature-color, #16a34a);
}
.fp-preset-btn {
    font-size: 0.71em;
    padding: 2px 9px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    background: white;
    color: #495057;
    cursor: pointer;
}
.fp-preset-btn:hover { background: #e8f8fd; border-color: #74c6db; color: #0a7999; }
.fp-preset-btn.active { background: var(--feature-color); border-color: #0993b3; color: white; }
.fp-preset-btn.active:hover { background: #0993b3; }

/* Weekday buttons */
.fp-weekday-row { display: flex; gap: 0.28rem; margin-bottom: 0.35rem; }
.fp-day-btn {
    flex: 1;
    height: 28px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: white;
    cursor: pointer;
    font-size: 0.76em;
    font-weight: 500;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.08s, border-color 0.08s;
}
.fp-day-btn:hover { border-color: #74c6db; background: #e8f8fd; }
.fp-day-btn.selected { background: var(--feature-color); border-color: #0993b3; color: white; }
.fp-day-btn.weekend { color: #868e96; }
.fp-day-btn.weekend.selected { background: var(--feature-color); color: white; }

/* Divider */
.fp-divider { border: none; border-top: 1px solid #f0f0f0; margin: 0.55rem 0; }

/* Compare toggle row */
.fp-cmp-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0;
}
.fp-cmp-label { font-size: 0.74em; color: #495057; cursor: pointer; }

/* Action buttons row */
.fp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

/* ── Route selector: Leaflet-style button + expandable panel ─────────────────*/
.route-select-btn {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    background: white;
    border: 2px solid color-mix(in srgb, var(--feature-color) 32%, rgba(0,0,0,0.2));
    background-clip: padding-box;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    user-select: none;
}
.route-select-btn:hover {
    background: color-mix(in srgb, var(--feature-color) 8%, white);
}
.route-select-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--feature-color);
    -webkit-mask-image: url('/assets/icons/route-select.svg');
    mask-image: url('/assets/icons/route-select.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}
.route-select-panel {
    position: absolute;
    top: 0;
    right: 58px;
    background: white;
    border: none;
    border-radius: 5px;
    width: min(360px, calc(100vw - 120px));
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    overflow: hidden;
}
.route-panel-list {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px;
}
.route-panel-list label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    font-size: 0.76em;
    cursor: pointer;
    line-height: 1.3;
    white-space: normal;
}
.route-panel-list input {
    flex-shrink: 0;
    accent-color: var(--feature-color);
}
.route-panel-list label span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.route-done-btn {
    box-sizing: border-box;
    width: 100%;
    background: var(--feature-color);
    color: white;
    border: none;
    padding: 7px 0;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 500;
    text-align: center;
    user-select: none;
}
.route-done-btn:hover {
    background: color-mix(in srgb, var(--feature-color) 86%, #000);
}

/* Remove Leaflet's default focus rectangle on clicked map elements */
path.leaflet-interactive:focus {
    outline: none;
}

/* Prioritering: rank-number badges on the map */
.leaflet-tooltip.prio-rank-tip {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 1px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.leaflet-tooltip.prio-rank-tip::before { display: none; }

/* Embedded Street View overlay */
.sv-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
}
.sv-box {
    width: min(900px, 92vw); background: #fff; border-radius: 10px;
    overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.sv-box-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.8rem; border-bottom: 1px solid #e9ecef;
    font-weight: 700; font-size: 0.85rem; color: #212529;
    cursor: grab; user-select: none;
}
.sv-box-brand { display: flex; align-items: center; gap: 0.5rem; }
.sv-box-logo { height: 18px; width: auto; display: block; }
.sv-embed-head {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.6rem 0 0.35rem; font-weight: 700; font-size: 0.8rem; color: #212529;
}
.sv-box-title { font-weight: 700; }
.sv-close-btn {
    border: none; background: #f1f3f5; border-radius: 6px; width: 28px; height: 28px;
    cursor: pointer; font-size: 0.9rem; color: #495057;
}
.sv-close-btn:hover { background: #e9ecef; }

/* ── Vejbeskaffenhed: busy veil over the Tilstandsoverblik map ──────────────
   Shown while route reports are fetched + segments drawn. Translucent so the
   basemap stays readable; pointer-events blocked so clicks can't select a
   segment from a half-built layer. */
.road-loading-overlay {
    position: absolute; inset: 0.3rem; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248, 249, 250, 0.55);
    backdrop-filter: blur(1.5px);
    border-radius: 8px;
    pointer-events: all;
    cursor: progress;
}
.road-loading-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    background: #fff; border: 1px solid #dee2e6; border-radius: 10px;
    padding: 1rem 1.6rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.road-loading-title {
    font-size: 0.82rem; font-weight: 700; color: #9c6b3f;
}
.road-loading-spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid #ecdfd2; border-top-color: #9c6b3f;
    animation: road-spin 0.8s linear infinite;
}
@keyframes road-spin { to { transform: rotate(360deg); } }

/* ── Vejbeskaffenhed: disk-usage panel (Data view) ─────────────────────── */
.rq-storage-cards {
    display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem;
}
.rq-storage-card {
    flex: 1 1 165px; min-width: 165px;
    border: 1px solid #e9ecef; border-left: 3px solid #9c6b3f;
    border-radius: 8px; padding: 0.55rem 0.7rem; background: #fff;
}
.rq-storage-card .lbl {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.02em;
    color: #868e96;
}
.rq-storage-card .val {
    font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: #212529;
}
.rq-storage-card .sub { font-size: 0.66rem; color: #adb5bd; }
/* Stacked proportion bar: where the bytes actually sit. */
.rq-storage-bar {
    display: flex; height: 14px; border-radius: 4px; overflow: hidden;
    border: 1px solid #e9ecef; margin-bottom: 0.4rem;
}
.rq-storage-bar > div { height: 100%; }
.rq-storage-legend {
    display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.7rem;
    color: #495057; margin-bottom: 1rem;
}
.rq-storage-legend .dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px;
    margin-right: 0.35rem;
}

/* ---- Vejnet (Opsætning → road-network administration) ---- */
.vejnet-banner {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.vejnet-banner.ok    { background: #e6f6ec; color: #1c6b39; }
.vejnet-banner.warn  { background: #fff2d8; color: #7a4f06; }
.vejnet-banner.error { background: #fdeae6; color: #8c2d1a; }
.vejnet-banner ul    { margin: 6px 0 0; padding-left: 18px; }

.vejnet-current-box {
    padding: 10px 12px;
    border: 1px solid #dce3e9;
    border-radius: 7px;
    background: #fbfcfd;
}
.vejnet-current-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #667382;
}
.vejnet-current-value { font-size: 15px; font-weight: 700; margin-top: 2px; }
.vejnet-current-meta  { font-size: 11.5px; color: #667382; margin-top: 2px; }

.vejnet-history-title {
    margin: 14px 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #667382;
}
.vejnet-history { max-height: 240px; overflow-y: auto; }
.vejnet-row {
    padding: 7px 9px;
    border: 1px solid #edf1f4;
    border-radius: 6px;
    margin-bottom: 5px;
}
.vejnet-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vejnet-row-date   { font-size: 12px; font-weight: 600; }
.vejnet-row-detail { font-size: 11.5px; color: #667382; }
.vejnet-row-error  { font-size: 11.5px; color: #8c2d1a; margin-top: 3px; }
.vejnet-row-status {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #eef2f5;
    color: #52616f;
}
.vejnet-row-status.current    { background: #e6f6ec; color: #1c6b39; }
.vejnet-row-status.ready      { background: #dff4f2; color: #0b5f63; }
.vejnet-row-status.failed     { background: #fdeae6; color: #8c2d1a; }
.vejnet-row-status.importing  { background: #fff2d8; color: #7a4f06; }
/* Route databases: keep identity visible when the pointer travels from the
   name on the left to the action at the far right. */
.db-route-row { transition: background-color 120ms ease; }
.db-route-row:hover { background: #eef7f6; }
.route-trash { margin-top: .8rem; border-top: 1px solid #dee2e6; padding-top: .65rem; }
.route-trash > summary { cursor: pointer; color: #66727d; font-weight: 650; padding: .35rem .2rem; }
.route-trash[open] > summary { margin-bottom: .35rem; }

/* ── O/D · Punktflow ──────────────────────────────────────────────────────
   Map left, answer right. The panel is fixed-width rather than a percentage:
   the numbers are tabular and must not reflow as the window changes. */
.od-view { display: flex; height: 100%; min-height: 0; }
.od-map-wrap { flex: 1; position: relative; min-width: 0; }
.od-map { width: 100%; height: 100%; }
.od-map-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 600;
  padding: 6px 10px; border-radius: 5px; max-width: 22rem;
  background: rgb(255 255 255 / 94%); border: 1px solid #cfd8df;
  font-size: 0.78rem; color: #43515d; pointer-events: none;
}
.od-legend {
  position: absolute; right: 12px; bottom: 12px; z-index: 600;
  padding: 7px 10px; border-radius: 5px;
  background: rgb(255 255 255 / 94%); border: 1px solid #cfd8df;
}
.od-legend-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
                   text-transform: uppercase; color: #5d6b78; margin-bottom: 4px; }
.od-legend-ramp { display: flex; gap: 0; }
.od-legend-swatch { width: 26px; height: 9px; }
.od-legend-swatch:first-child { border-radius: 2px 0 0 2px; }
.od-legend-swatch:last-child { border-radius: 0 2px 2px 0; }
.od-legend-scale { display: flex; justify-content: space-between;
                   font-size: 0.68rem; color: #6b7783; margin-top: 3px; }
.od-legend-peak { font-variant-numeric: tabular-nums; font-weight: 600; }

.od-panel {
  width: 320px; flex: 0 0 320px; overflow-y: auto;
  border-left: 1px solid var(--line, #dce3e9); background: #fff;
  padding: 0.75rem 0.9rem;
}
.od-panel-empty { color: #7a8794; font-size: 0.82rem; padding: 0.6rem 0; }
.od-panel-title { font-weight: 700; font-size: 0.92rem; color: #172433;
                  margin-bottom: 0.55rem; }
.od-dir-block {
  border: 1px solid #e4e9ee; border-radius: 6px; background: #fbfcfd;
  padding: 0.6rem; margin-bottom: 0.6rem;
}
.od-dir-line { display: flex; align-items: center; gap: 0.5rem; }
.od-dir-arrow {
  display: inline-block; font-size: 1.35rem; line-height: 1;
  color: #7466d8; font-weight: 700;
}
.od-dir-towards { font-weight: 650; font-size: 0.95rem; color: #172433; }
.od-dir-count {
  font-size: 0.82rem; color: #4a5762; margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.od-corridor-count { font-size: 0.82rem; font-weight: 600; color: #172433; }
.od-corridor-help { font-size: 0.74rem; color: #6b7783; line-height: 1.45;
                    margin-top: 0.2rem; }
.od-panel-note {
  margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid #eef2f5;
  font-size: 0.7rem; color: #7a8794; line-height: 1.45;
}

/* Blank basemap: Leaflet paints its own grey when no tiles are active, which
   is not "no background" — the spider net needs white under it. */
.od-map .leaflet-container { background: #ffffff; }

/* Direction arrows sit on the clicked point, one per way the road is ridden.
   Grey means "not shown"; either or both can be on. */
.od-arrow-wrap { background: none !important; border: none !important; }
.od-arrow-disc {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgb(15 23 42 / 35%);
  transition: transform 0.1s ease;
}
.od-arrow-disc:hover { transform: scale(1.12); }
/* Selected is the blue of the flow it draws; unselected is plainly grey and
   faded, so which one is active is not a judgement about shade. */
.od-arrow-disc.on  { background: #1d4ed8; }
.od-arrow-disc.off { background: #98a2ad; opacity: 0.75; }
.od-arrow-disc svg { transform-origin: 50% 50%; display: block; }

.od-dir-toggle-row { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.od-dir-chip {
  flex: 1; border: 1px solid #d8dfe6; border-radius: 5px; padding: 0.35rem 0.4rem;
  font-size: 0.76rem; text-align: center; background: #fff; color: #6b7783;
}
.od-dir-chip.on { border-color: #7466d8; background: #f2f0fd; color: #3f3494; font-weight: 650; }
.od-bins { margin-top: 4px; }
.od-bin-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #5d6b78; }
.od-bin-swatch { width: 22px; height: 4px; border-radius: 2px; }
.od-map-controls {
  position: absolute; left: 12px; top: 12px; z-index: 600;
  padding: 5px 9px; border-radius: 5px;
  background: rgb(255 255 255 / 94%); border: 1px solid #cfd8df;
}
.od-dir-bikes, .od-dir-passes { font-size: 0.68rem; color: #7a8794; }
.od-gap-note { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eef2f5; }
.od-gap-row { display: flex; align-items: center; gap: 6px; font-size: 0.74rem;
              color: #5d6b78; padding: 1px 0; }
.od-gap-dash { width: 20px; height: 0; border-top: 2px dashed currentColor; }
.od-gap-dash { width: 20px; height: 2px; border-radius: 1px; opacity: 0.85; }


/* The running release, shown in the account menu. Deliberately quiet: it is
   there to be read out in a support call, not to be part of the interface. */
.account-menu-release {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid #e9ecef;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}


/* A row whose route is on its way to the trash. Applied client-side the moment
   Slet is pressed, so the answer to "did that work?" does not wait for a
   round trip and a table rebuild. The authoritative table replaces the row a
   moment later — and if the delete failed, replaces it with the row intact. */
.row-pending-delete {
    opacity: 0.4;
    transition: opacity 0.12s ease-out;
    pointer-events: none;
}
/* Second cell only — the one holding the route name. It was briefly on the
   first cell too, which put a stray "· flyttes til papirkurv…" in the
   checkbox column with nothing to attach itself to. */
.row-pending-delete td:nth-child(2)::after {
    content: " · flyttes til papirkurv…";
    font-size: 0.72rem;
    font-style: italic;
    color: #868e96;
}