html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Profile avatar overlay */
.profile-avatar-wrapper:hover .profile-avatar-overlay {
    opacity: 1;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    color: #fff;
    font-size: 1.5rem;
}

.profile-avatar-remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #dc3545;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-avatar-wrapper:hover .profile-avatar-remove {
    opacity: 1;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMudDEyMiAyOS4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


.public-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: url('/img/public-bg.png') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
}

/* Long-form variant: når en side rendrerer en `.public-longform`-blok inde
   i AnonymousLayout (fx privatlivspolitikken), kan indholdet være højere
   end viewporten. .public-bg's fixed/100vh/align-center-layout klipper
   så indholdet i top og bund. Her udskifter vi den med en flow-container
   der lader body scrolle naturligt. Baggrundsbilledet forbliver statisk
   via background-attachment: fixed. */
.public-bg:has(.public-longform) {
    position: static;
    width: 100%;
    height: auto;
    min-height: 100vh;
    align-items: flex-start;
    padding: 2rem 1rem;
}

.public-container {
    background: rgba(255,255,255,0.88);
    border-radius: 18px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.18);
    padding: 2rem 2.5rem;
    min-width: 320px;
    max-width: 460px;
    width: 100%;
    text-align: center;
}

/* Long-form anonym side (fx privatlivspolitikken på /legal/privacy):
   .public-container er som standard et smalt centreret login-/register-kort.
   Når siden indeholder et `.public-longform`-element, udvider vi kortet til
   en læsbar tekstspalte og fjerner center-justeringen. Bruger :has() der er
   understøttet af alle moderne browsere (Chrome 105+, Firefox 121+, Safari 15.4+). */
.public-container:has(.public-longform) {
    max-width: 880px;
    text-align: left;
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
}

.public-longform > h1 {
    margin-top: 0;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-eye-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    color: #555;
    border-radius: 4px;
}

    .toggle-eye-button:hover {
        background-color: #f0f0f0;
    }

.eye-icon {
    width: 20px;
    height: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem; /* spacing mellem felter */
}

    .form-group label {
        font-weight: 500;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.65rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1rem;
        width: 100%;
        box-sizing: border-box;
    }

.splash-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background:
        radial-gradient(1200px circle at 25% 20%, rgba(29, 78, 216, 0.18), transparent 55%),
        radial-gradient(900px circle at 80% 70%, rgba(38, 176, 80, 0.16), transparent 55%),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 40%, #f6fafd 100%);
    animation: fadeIn 400ms ease-out;
}

.splash-card {
    width: min(520px, calc(100% - 3rem));
    padding: 2.25rem 2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.splash-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideIn 450ms ease-out forwards;
}

.logo-animated {
    width: 84px;
    height: 84px;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLogo 1.2s ease forwards;
}

.splash-text {
    margin-top: 1rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: #1d4ed8;
    letter-spacing: 0.2px;
    opacity: 0;
    animation: fadeInText 500ms ease 350ms forwards;
}

.splash-subtext {
    margin: 0.25rem 0 0;
    font-size: 0.98rem;
    color: rgba(15, 23, 42, 0.72);
    opacity: 0;
    animation: fadeInText 500ms ease 500ms forwards;
}

.spinner {
    margin: 1.5rem auto 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 4px solid rgba(15, 23, 42, 0.12);
    border-top-color: #1d4ed8;
    animation: spin 900ms linear infinite;
}

/* Animations */
@keyframes drawLogo {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInText {
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sidebar-nav {
    padding-top: 1rem;
    background: transparent; /* host .app-sidebar provides the surface */
    min-height: 100vh;
}

.sidebar-link {
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

    .sidebar-link:hover,
    .sidebar-link.active {
        background-color: var(--sidebar-hover-bg);
        color: var(--sidebar-active-text);
    }
/* --- Modern startup splash (Blazor WASM) --- */
.splash {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;

    /* Photo + soft overlays for readability */
    background:
        linear-gradient(135deg, rgba(248, 251, 255, 0.92) 0%, rgba(238, 246, 255, 0.88) 45%, rgba(246, 250, 253, 0.92) 100%),
        radial-gradient(1200px circle at 22% 18%, rgba(29, 78, 216, 0.26), transparent 56%),
        radial-gradient(900px circle at 88% 78%, rgba(34, 197, 94, 0.20), transparent 60%),
        url('/img/public-bg.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;
}

/* Optional: ultra-subtle background motion (doesn't move the card) */
.splash {
    animation: splashBgPan 18s ease-in-out infinite alternate;
}

@keyframes splashBgPan {
    from { background-position: center, center, center, center; }
    to { background-position: center, 40% 30%, 60% 70%, 55% 45%; }
}

/* Keep the glow layer, but lighter since we now have a real image */
.splash::before {
    content: "";
    position: absolute;
    inset: -45% -45% -45% -45%;
    background:
        radial-gradient(circle at 18% 28%, rgba(37, 99, 235, 0.16), transparent 55%),
        radial-gradient(circle at 72% 62%, rgba(34, 197, 94, 0.12), transparent 60%),
        radial-gradient(circle at 55% 12%, rgba(168, 85, 247, 0.10), transparent 62%);
    animation: splashFloat 12s ease-in-out infinite;
    filter: blur(22px);
}

/* Keep subtle grain/noise overlay */
.splash::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image:
        repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.18) 0px, rgba(15, 23, 42, 0.18) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.12) 0px, rgba(15, 23, 42, 0.12) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
}

.splash-shell {
    position: relative;
    width: min(640px, 100%);
    padding: 1.6rem 1.4rem 1.25rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 60px rgba(2, 6, 23, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.splash-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.splash-mark {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.10), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.splash-mark svg {
    width: 44px;
    height: 44px;
}

.splash-titles {
    display: flex;
    flex-direction: column;
}

.splash-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #0f172a;
    line-height: 1.1;
}

.splash-tagline {
    margin-top: 0.15rem;
    color: rgba(15, 23, 42, 0.7);
    font-size: 0.98rem;
}

.splash-progress {
    margin-top: 1.2rem;
    height: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.splash-bar {
    height: 100%;
    width: 42%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 35%, #22c55e 100%);
    animation: splashIndeterminate 1.1s ease-in-out infinite;
}

.splash-skeleton {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.sk-line {
    height: 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
}

.sk-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
    animation: shimmer 1.15s linear infinite;
}

.splash-hint {
    margin-top: 1.2rem;
    font-size: 0.92rem;
    color: rgba(15, 23, 42, 0.62);
}

@keyframes splashIndeterminate {
    0% { transform: translateX(-60%); width: 42%; }
    50% { transform: translateX(20%); width: 55%; }
    100% { transform: translateX(130%); width: 42%; }
}

@keyframes shimmer {
    to { transform: translateX(120%); }
}

@keyframes splashFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}
/* === Scan status (ShoppingScan visual feedback) === */
.scan-status-area {
    min-height: 0;
}

.scan-status {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    animation: scanStatusIn 180ms ease-out;
}

.scan-status-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 0.6);
}

.scan-status-body { min-width: 0; flex: 1 1 auto; }
.scan-status-title { font-weight: 600; line-height: 1.2; word-break: break-word; }
.scan-status-sub { margin-top: 0.15rem; font-size: 0.85rem; opacity: 0.85; }

.scan-status-busy {
    background: linear-gradient(90deg, #eef2ff, #e0f2fe);
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.scan-status-success {
    background: linear-gradient(90deg, #ecfdf5, #d1fae5);
    border-color: #86efac;
    color: #065f46;
    animation: scanStatusIn 180ms ease-out, scanStatusPulse 600ms ease-out;
}
.scan-status-error {
    background: linear-gradient(90deg, #fef2f2, #fee2e2);
    border-color: #fca5a5;
    color: #991b1b;
}

.scan-busy-overlay {
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.0) 0%,
        rgba(59, 130, 246, 0.18) 50%,
        rgba(59, 130, 246, 0.0) 100%);
    background-size: 200% 100%;
    animation: scanBusySweep 1.1s linear infinite;
}

@keyframes scanStatusIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scanStatusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}
@keyframes scanBusySweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ──── Barcode camera preview ──── */
.barcode-camera-wrap {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    background: #000;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.barcode-camera-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.barcode-camera-preview video,
.barcode-camera-preview canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.barcode-reticle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Soft vignette around the reticle box */
    background:
        radial-gradient(ellipse 70% 45% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.barcode-reticle-box {
    position: relative;
    width: 80%;
    max-width: 480px;
    height: 38%;
    border-radius: 0.5rem;
}

.barcode-reticle-box .corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid #22d3ee;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.7);
}
.barcode-reticle-box .corner.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.barcode-reticle-box .corner.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.barcode-reticle-box .corner.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.barcode-reticle-box .corner.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.barcode-reticle-box .scan-line {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #22d3ee, transparent);
    box-shadow: 0 0 12px #22d3ee;
    animation: barcodeScanLine 1.6s ease-in-out infinite;
}

.barcode-reticle-hint {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.45);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.barcode-camera-toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.4rem;
    z-index: 2;
}

.barcode-camera-btn {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
    transition: background 120ms ease, transform 120ms ease;
}
.barcode-camera-btn:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.05); }
.barcode-camera-btn:active { transform: scale(0.95); }

@keyframes barcodeScanLine {
    0%   { top: 12%; opacity: 0.4; }
    50%  { top: 88%; opacity: 1; }
    100% { top: 12%; opacity: 0.4; }
}

@media (max-width: 575.98px) {
    .barcode-camera-wrap { aspect-ratio: 4 / 5; max-width: 100%; }
    .barcode-reticle-box { width: 86%; height: 26%; }
}

/* Quantity stepper used in scan log rows. Keeps -, value, + visually unified. */
.qty-stepper { flex-wrap: nowrap; }
.qty-stepper .qty-stepper-value {
    min-width: 2.5rem;
    pointer-events: none;
    color: var(--bs-body-color);
    background: transparent;
    border-color: var(--bs-border-color);
    opacity: 1;
}

/* Dark-theme overrides for scan-status banner — light gradients become muted
   tinted surfaces so the banner doesn't look like a light-mode rectangle on a
   dark page. */
[data-bs-theme="dark"] .scan-status {
    box-shadow: none;
}
[data-bs-theme="dark"] .scan-status-icon {
    background: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .scan-status-busy {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
    color: #bfdbfe;
}
[data-bs-theme="dark"] .scan-status-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.45);
    color: #bbf7d0;
}
[data-bs-theme="dark"] .scan-status-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
}
.scan-status code,
.scan-status-sub code {
    color: inherit;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}
[data-bs-theme="dark"] .scan-status code,
[data-bs-theme="dark"] .scan-status-sub code {
    background: rgba(255, 255, 255, 0.08);
}

/* Inline <code> used for barcodes in list rows: default Bootstrap pink has
   very low contrast on a dark surface. Use a muted tone instead. */
.list-group-item code {
    color: var(--color-text-muted);
    background: transparent;
    font-size: 0.85em;
}
[data-bs-theme="dark"] .list-group-item code {
    color: var(--color-text-muted);
}

/* Pause the sweeping scan line while a confirmation is pending. */
.barcode-reticle.is-paused .scan-line { animation: none; opacity: 0.2; }
.barcode-reticle.is-paused .corner   { border-color: #94a3b8; box-shadow: none; }

/* Confirmation overlay shown when a camera scan is awaiting the user. */
.barcode-confirm {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 3;
    animation: barcodeConfirmIn 140ms ease-out;
}

.barcode-confirm-card {
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.85rem;
    padding: 1rem 1.25rem 1.1rem;
    text-align: center;
    min-width: 16rem;
    max-width: 90%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.barcode-confirm-icon {
    font-size: 2rem;
    color: #4ade80;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.barcode-confirm-label { font-size: 0.85rem; opacity: 0.8; }
.barcode-confirm-code  { font-size: 1.1rem; margin: 0.25rem 0 0.85rem; }
.barcode-confirm-code code { color: #fde68a; background: transparent; font-size: 1.05rem; }

.barcode-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes barcodeConfirmIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* === Mobile responsiveness improvements (global) === */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    h4, .h4 { font-size: 1.05rem; }

    .card-body { padding: 0.85rem; }
    .card-header { padding: 0.6rem 0.85rem; }

    .btn { padding: 0.4rem 0.7rem; }
    .btn-sm { padding: 0.25rem 0.5rem; }

    /* 16px font on form controls avoids iOS auto-zoom on focus. */
    .form-control,
    .form-select,
    .input-group-text {
        font-size: 16px;
    }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .badge.fs-6 { font-size: 0.85rem !important; }
    .pagination { flex-wrap: wrap; }
}

/* Header toolbars (title on the left, action buttons on the right) must be allowed
   to wrap on tablets and phones — otherwise nowrap buttons push the page wider
   than the viewport and the whole layout overflows to the right. */
@media (max-width: 991.98px) {
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    /* When the toolbar wraps, make the action group take the full width and align left. */
    .d-flex.justify-content-between > .d-flex {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    /* Tabs/nav rows scroll horizontally instead of overflowing. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* Pager: allow controls to wrap to next line. */
    .pagination { flex-wrap: wrap; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .card-body { padding: 1rem; }
    .modal-dialog { max-width: 92vw; }
}

/* Defensive: stop common Bootstrap rows/grids from being able to push past the viewport.
   Without min-width:0 on flex items, long text (e.g. titles, search inputs) can force
   a column to be wider than its parent and cause the whole page to scroll horizontally. */
.row > [class*="col-"],
.d-flex > * {
    min-width: 0;
}

/* Prevent horizontal scroll on small screens. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Long barcodes/URLs wrap instead of breaking the layout. */
code, pre {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* === ShoppingListDetail === */
/* Eyebrow above the page title showing which section the user is in. */
.app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.app-eyebrow > i { font-size: 0.85rem; }

/* Compact segmented control used inline next to totals etc. */
.app-segmented-sm.btn-group .btn,
.app-segmented-sm .btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Detail meta block (presence chips + list notes) between header and toolbar. */
.shopping-detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Totals card: allow wrap on very narrow screens. */
.shopping-totals { row-gap: var(--space-2); }

/* Shopping list item rows: keep price chunks and totals from wrapping mid-word. */
.shopping-item-row .text-muted .price-per-unit,
.shopping-item-row .line-total {
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .shopping-item-row {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }
    .shopping-item-row .line-total {
        min-width: 0 !important;
        margin-left: auto;
    }
    .shopping-item-row .item-actions {
        margin-left: auto;
    }
}

/* ShoppingListItemRow — expandable, dense list item used in shopping detail.
   Left stripe is only set when the page enables it (GroupMode.None). */
.shopping-list-item {
    position: relative;
    padding: 0.5rem 0.75rem;
}
.shopping-list-item.has-stripe {
    padding-left: 1rem;
    /* Inset shadow-streg er mere robust end ::before – ingen border-radius/overflow-clipping kan skjule den. */
    box-shadow: inset 5px 0 0 0 var(--shopping-stripe, #adb5bd);
}
.shopping-list-item__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    flex-wrap: nowrap;
}
.shopping-list-item__row:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.shopping-list-item.is-purchased .shopping-list-item__name,
.shopping-list-item.is-purchased .shopping-list-item__meta {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}
.shopping-list-item__check {
    flex: 0 0 auto;
}
.shopping-list-item__body {
    min-width: 0;
    flex: 1 1 auto;
}
.shopping-list-item__name {
    font-weight: 500;
}
.shopping-list-item__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    line-height: 1.25;
}
.shopping-list-item__meta {
    line-height: 1.25;
    margin-top: 0.1rem;
}
.shopping-list-item__total {
    flex: 0 0 auto;
    width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}
.shopping-list-item__total .shopping-list-item__store {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
}
.shopping-list-item__chev {
    flex: 0 0 auto;
    font-size: 0.85rem;
}
.shopping-list-item__expanded {
    padding: 0.4rem 0 0.1rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.shopping-list-item__notes {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}
.shopping-list-item__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .shopping-list-item {
        padding: 0.4rem 0.6rem;
    }
    .shopping-list-item__name {
        font-size: 0.95rem;
    }
    .shopping-list-item__meta {
        font-size: 0.8rem;
    }
    .shopping-list-item__total {
        font-size: 0.9rem;
    }
}

/* === Buttons inside flex-wrap toolbars: never grow vertically into multi-line giants === */
.d-flex .btn,
.btn-group .btn {
    white-space: nowrap;
}

/* === Card list fallback for table-style pages on phones === */
.assembly-card {
    cursor: pointer;
}
.assembly-card:hover {
    background-color: #f8f9fa;
}
.min-w-0 {
    min-width: 0;
}

/* ============================================================
   APP DESIGN SYSTEM
   Reusable, mobile-first patterns for list/detail/admin pages.
   Tokens + components below should be preferred over ad-hoc
   Bootstrap utility stacks on new pages.
   ============================================================ */

:root {
    /* Spacing scale (4/8 px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Surface / line / text */
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-text: #0f172a;
    --color-text-muted: #64748b;

    /* Brand */
    --color-primary: #1b6ec2;
    --color-primary-strong: #1861ac;

    /* Status */
    --color-success-bg: #dcfce7;
    --color-success-fg: #166534;
    --color-info-bg: #e0f2fe;
    --color-info-fg: #075985;
    --color-warning-bg: #fef3c7;
    --color-warning-fg: #92400e;
    --color-muted-bg: #f1f5f9;
    --color-muted-fg: #475569;

    /* Touch target */
    --tap-target: 44px;

    /* Sidebar (neutral slate surface; brand-farver kun som accent på active).
       Reviewer-feedback: emerald-paletten lækkede brand-farve ind i navigations-
       chrome. Neutralt slate-look matcher M3 surface-container-low så indholdet
       på siden bærer brand-identiteten, ikke menuen. */
    --sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); /* slate-50 → slate-100 */
    --sidebar-border: #e2e8f0;            /* slate-200 */
    --sidebar-text: #334155;              /* slate-700 */
    --sidebar-text-muted: #64748b;        /* slate-500 */
    --sidebar-hover-bg: rgba(15, 23, 42, 0.05);
    --sidebar-active-bg: rgba(59, 130, 246, 0.12);
    --sidebar-active-text: #1d4ed8;       /* blue-700 */
    --sidebar-brand-text: #0f172a;        /* slate-900 */
    --sidebar-scrollbar: rgba(15, 23, 42, 0.25);

    /* Sticky note colors (light theme: classic pastel paper).
       Hver farve har en bg-token og en fg-token så tekst-kontrast holder
       i begge temaer. Bruges af .color-X klasserne i notes.css. */
    --note-bg-yellow: #fff3a0;
    --note-fg-yellow: #1f2937;
    --note-bg-pink:   #ffc1d5;
    --note-fg-pink:   #1f2937;
    --note-bg-blue:   #bde0ff;
    --note-fg-blue:   #1f2937;
    --note-bg-green:  #c8edc1;
    --note-fg-green:  #1f2937;
    --note-bg-orange: #ffd3a3;
    --note-fg-orange: #1f2937;
    --note-bg-purple: #dcc8ff;
    --note-fg-purple: #1f2937;
    --note-bg-gray:   #e0e0e0;
    --note-fg-gray:   #1f2937;
}

/* ---- Dark theme overrides ----
   Bootstrap toggles its own palette via [data-bs-theme="dark"]. We mirror the
   same trigger so our app-specific design tokens follow along. */
[data-bs-theme="dark"] {
    --color-surface: #1e293b;        /* slate-800 */
    --color-surface-alt: #0f172a;    /* slate-900 */
    --color-border: #334155;         /* slate-700 */
    --color-border-strong: #475569;  /* slate-600 */
    --color-text: #e2e8f0;           /* slate-200 */
    --color-text-muted: #94a3b8;     /* slate-400 */

    --color-primary: #60a5fa;        /* blue-400 */
    --color-primary-strong: #3b82f6; /* blue-500 */

    --color-success-bg: #052e1a;
    --color-success-fg: #4ade80;
    --color-info-bg: #082f49;
    --color-info-fg: #7dd3fc;
    --color-warning-bg: #3a2a05;
    --color-warning-fg: #fbbf24;
    --color-muted-bg: #1f2937;
    --color-muted-fg: #cbd5e1;

    /* Sidebar (deep slate for dark mode; matcher topbar-gradienten i
       EnterpriseSidebar.razor.css så hele venstrekanten læses som én surface). */
    --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); /* slate-900 → slate-800 */
    --sidebar-border: rgba(148, 163, 184, 0.16);
    --sidebar-text: #cbd5e1;              /* slate-300 */
    --sidebar-text-muted: #94a3b8;        /* slate-400 */
    --sidebar-hover-bg: rgba(148, 163, 184, 0.10);
    --sidebar-active-bg: rgba(96, 165, 250, 0.18);
    --sidebar-active-text: #93c5fd;       /* blue-300 */
    --sidebar-brand-text: #f8fafc;        /* slate-50 */
    --sidebar-scrollbar: rgba(148, 163, 184, 0.35);

    /* Sticky note colors (dark theme: deep tonal tints + light fg).
       Holder farve-identiteten genkendelig men uden „lysende post-it” look. */
    --note-bg-yellow: #4a3f12;
    --note-fg-yellow: #fef3c7;
    --note-bg-pink:   #4a1d2e;
    --note-fg-pink:   #fce7f3;
    --note-bg-blue:   #102a43;
    --note-fg-blue:   #dbeafe;
    --note-bg-green:  #14391f;
    --note-fg-green:  #dcfce7;
    --note-bg-orange: #4a2e10;
    --note-fg-orange: #ffedd5;
    --note-bg-purple: #2e1d4d;
    --note-fg-purple: #ede9fe;
    --note-bg-gray:   #2a2f3a;
    --note-fg-gray:   #e2e8f0;
}

[data-bs-theme="dark"] body {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

/* Bootstrap utility classes that hardcode light colors */
[data-bs-theme="dark"] .bg-white { background-color: var(--color-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--color-surface-alt) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--color-text-muted) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start { border-color: var(--color-border) !important; }

/* Bootstrap nav-pills: inaktive links bliver utydelige på mørk baggrund. */
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: var(--color-text);
}
[data-bs-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--color-surface);
    color: var(--color-text);
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: #fff;
}

/* Card-baggrunde og horisontale skillelinjer skal følge temaet. */
[data-bs-theme="dark"] .card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-bs-theme="dark"] hr {
    border-color: var(--color-border);
    opacity: 1;
}

/* Formularer: labels, inputs og selects skal være læsbare på mørk baggrund. */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] label {
    color: var(--color-text);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--color-text-muted);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
}

/* Login/anonymt kort: følg temaet i stedet for en fast hvid baggrund. */
[data-bs-theme="dark"] .public-container {
    background: rgba(15, 23, 42, 0.92); /* slate-900 m. let gennemsigtighed */
    color: var(--color-text);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}
[data-bs-theme="dark"] .public-container a,
[data-bs-theme="dark"] .public-container .btn-link {
    color: var(--color-primary);
}

/* ---- Page shell ---- */
.app-page {
    /* Mobile-first: tiny 4 px side gutter so cards/rows don't touch the
       screen edge but still use almost the full viewport width. Desktop
       reintroduces a comfortable margin via the @media block below. */
    padding: var(--space-2) var(--space-1) var(--space-6);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Defensive containment: a wide descendant (long barcode, ikke-ombrydende
       tekst, bred chip-række) må aldrig kunne presse selve siden bredere end
       viewporten — det skubber ellers topbarens søg/avatar og headerens
       primær-CTA ud af skærmen på mobil. */
    overflow-x: clip;
}

.app-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-width: 0;
    max-width: 100%;
}
.app-page-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
}
.app-page-title > i {
    color: var(--color-text-muted);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.app-page-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Short description rendered below the page header. */
.app-page-header:has(+ .app-page-subtitle) {
    margin-bottom: var(--space-1);
}
.app-page-subtitle {
    margin: 0 0 var(--space-3);
    font-size: 0.925rem;
    line-height: 1.4;
    /* Tillad ombrydning af lange/sammensatte ord (fx "System­poster") så
       subtitle aldrig presser siden bredere end viewporten på mobil. */
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Subtle inline status dot (replaces bulky badges in headers) */
.app-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    display: inline-block;
    flex-shrink: 0;
}
.app-status-dot.is-live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.app-status-dot.is-warning { background: #f59e0b; }

/* Equalize the visual height of all action buttons inside the page header
   (segmented control, icon-only buttons, primary CTA) on every viewport. */
.app-page-header .btn,
.app-page-header .btn-group > .btn,
.app-page-header .btn-group-sm > .btn {
    min-height: 2.25rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-status-dot.is-offline { background: #ef4444; }

/* ---- Group toggle (segmented control in page header) ----
   Style is driven entirely by aria-pressed so Bootstrap's btn-primary /
   btn-outline-secondary :hover/:focus/:active rules can't make unselected
   buttons look "sticky blue" on touch. We also strip the mobile tap
   highlight and any focus ring leak. */
.app-group-toggle.btn-group > .btn,
.app-group-toggle > .btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.app-group-toggle.btn-group > .btn:focus,
.app-group-toggle.btn-group > .btn:focus-visible {
    outline: none !important;
}
.app-group-toggle.btn-group > .btn[aria-pressed="false"],
.app-group-toggle.btn-group > .btn[aria-pressed="false"]:hover,
.app-group-toggle.btn-group > .btn[aria-pressed="false"]:focus,
.app-group-toggle.btn-group > .btn[aria-pressed="false"]:focus-visible,
.app-group-toggle.btn-group > .btn[aria-pressed="false"]:active,
.app-group-toggle.btn-group > .btn[aria-pressed="false"].active {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}
.app-group-toggle.btn-group > .btn[aria-pressed="false"]:hover {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
}
.app-group-toggle.btn-group > .btn[aria-pressed="true"],
.app-group-toggle.btn-group > .btn[aria-pressed="true"]:hover,
.app-group-toggle.btn-group > .btn[aria-pressed="true"]:focus,
.app-group-toggle.btn-group > .btn[aria-pressed="true"]:focus-visible,
.app-group-toggle.btn-group > .btn[aria-pressed="true"]:active {
    background-color: var(--bs-primary, #0d6efd) !important;
    background-image: none !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.18) !important;
}

/* ---- Toolbar (header action row) ---- */
.app-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.app-toolbar > .app-toolbar-spacer { flex: 1 1 auto; }

/* Standard buttons inherit Bootstrap, but enforce tap targets */
.app-toolbar .btn,
.app-segmented > button,
.app-list-row .btn {
    min-height: var(--tap-target);
}

/* ---- Segmented control (replaces nav-tabs on mobile) ---- */
.app-segmented {
    display: flex;
    gap: 2px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.app-segmented::-webkit-scrollbar { display: none; }
.app-segmented > button {
    flex: 1 1 0;
    min-width: max-content;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.app-segmented > button:hover { color: var(--color-text); }
.app-segmented > button.active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}

/* ---- Filters row (segmented + toolbar) — mobile-first ----
   Keep segmented control and view-toggle on the SAME row on mobile;
   the segmented strip flexes/scrolls inside the available width, and
   the view-toggle hugs the right edge inline — no overflow off-screen.
   Desktop refines spacing in the ≥992 px block below. */
.app-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-width: 0;
}
.app-filters > .app-segmented {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
.app-filters > .app-toolbar {
    flex: 0 0 auto;
    margin-bottom: 0;
    flex-wrap: nowrap;
}
/* On mobile, spacer would push the view-toggle off-screen — hide it. */
.app-filters > .app-toolbar > .app-toolbar-spacer { display: none; }

/* ---- View-mode toggle (Cards/Board vs List) ----
   Hidden on mobile — small screens always render the mobile-optimized
   default (typically Cards/Board). Pages still keep their `_viewMode`
   state for desktop; they force it to the mobile default at startup
   via ViewportService. */
.app-view-toggle { display: none !important; }
@media (min-width: 768px) {
    .app-view-toggle { display: inline-flex !important; }
}

/* ---- Search row ---- */
.app-search-row { margin-bottom: var(--space-3); }

/* When the page hoists its search into the mobile topbar, hide the inline
   row on small screens to avoid duplication. */
@media (max-width: 767.98px) {
    .app-search-row.app-search-row--mobile-topbar { display: none; }
}

/* ---- Pager (mobile-optimized) ----
   On mobile we strip the pager down to a single centered row: prev/page/next.
   The page-size selector, "Viser X af Y" range and the first/last edges are
   hidden because they add noise without value on small screens. When there
   is only one page we hide the entire pager. */
@media (max-width: 767.98px) {
    .pager.pager--single { display: none !important; }
    .pager { justify-content: center !important; }
    .pager .pager-range { display: none; }
    .pager .pager-pagesize { display: none; }
    .pager .pager-edge { display: none; }
    .pager .pager-controls-wrap { width: 100%; justify-content: center; }
    .pager .pager-controls { flex-wrap: nowrap; }
    .pager .pager-current { min-width: 7rem; text-align: center; }
}
.app-search-row .input-group .form-control,
.app-search-row .input-group .input-group-text,
.app-search-row .input-group .btn {
    min-height: var(--tap-target);
}

/* ---- List ---- */
.app-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.app-list-row {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    min-height: var(--tap-target);
}
.app-list-row:hover,
.app-list-row:focus-visible {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    outline: none;
}
.app-list-row-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.app-list-row-body { flex: 1 1 auto; min-width: 0; }
.app-list-row-title {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.3;
    word-break: break-word;
}
.app-list-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.app-list-row-meta i { margin-right: 4px; }
.app-list-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ---- Dense list (compact list view) ---- */
.app-dense-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--surface, #fff);
    overflow: hidden;
}
.app-dense-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 6px var(--space-3);
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    cursor: pointer;
    min-height: 44px;
    transition: background-color 120ms ease;
}
.app-dense-row:last-child { border-bottom: 0; }
.app-dense-row:hover,
.app-dense-row:focus-visible {
    background: var(--surface-hover, #f3f4f6);
    outline: none;
}
.app-dense-row.is-completed .app-dense-title { color: var(--muted, #6b7280); }

.app-dense-head {
    cursor: default;
    background: var(--surface-2, #f9fafb);
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.app-dense-head:hover { background: var(--surface-2, #f9fafb); }
.app-dense-th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--muted, #6b7280);
}

.app-dense-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted, #9ca3af);
}
.app-dense-status-dot[data-status="active"] { background: var(--success, #16a34a); }
.app-dense-status-dot[data-status="completed"] { background: var(--muted, #9ca3af); }

.app-dense-main { min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
.app-dense-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-dense-title {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-dense-icon { color: var(--muted, #6b7280); font-size: 0.85rem; flex-shrink: 0; }
.app-dense-sub {
    font-size: 0.78rem;
    color: var(--muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-dense-mobile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.2;
    text-align: right;
    flex-shrink: 0;
}
.app-dense-mobile-date {
    font-size: 0.82rem;
    color: var(--body, #1f2937);
}
.app-dense-mobile-count,
.app-dense-mobile-total {
    font-size: 0.78rem;
    color: var(--muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.app-dense-col {
    font-size: 0.85rem;
    color: var(--body, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.app-dense-notes { color: var(--muted, #6b7280); }
.app-dense-count,
.app-dense-total { font-variant-numeric: tabular-nums; text-align: right; }
.app-dense-muted { color: var(--muted, #9ca3af); }

.app-dense-progress {
    height: 4px;
    background: var(--border-subtle, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
}
.app-dense-progress-bar {
    height: 100%;
    background: var(--success, #16a34a);
    transition: width 200ms ease;
}

.app-dense-date {
    font-size: 0.78rem;
    color: var(--muted, #6b7280);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.app-dense-actions { display: flex; align-items: center; justify-content: flex-end; }
.app-dense-actions .btn { color: var(--muted, #6b7280); }

@media (max-width: 767.98px) {
    .app-dense-list {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        background: transparent;
    }
    .app-dense-row {
        align-items: center;
        gap: var(--space-2);
        padding: 10px var(--space-2);
        min-height: 56px;
        grid-template-columns: 10px minmax(0, 1fr) auto auto;
    }
    .app-dense-status-dot { margin-top: 0; width: 10px; height: 10px; }
    .app-dense-title { font-size: 1rem; }
    .app-dense-actions .btn {
        padding: 2px 6px;
        min-height: 0;
        line-height: 1;
    }
    .app-dense-actions .btn i { font-size: 1rem; }
}

/* ── AppFormField — fælles styling for label, required-markør og fejl-state ─ */
.app-form-field {
    display: block;
    min-width: 0;
}
.app-form-field > label {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: var(--color-text);
}
.app-form-field-label-text {
    font-weight: 500;
}
.app-form-field-required {
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
    line-height: 1;
}
.app-form-field--required > label .app-form-field-label-text::after {
    /* Tom hook — selve stjernen renderes som separat span,
       men holder vi specificiteten klar til evt. fremtidig styling. */
    content: "";
}
/* Tydeligere fokus + kant på inputs i required-felter mens de er tomme. */
.app-form-field--required :is(input, select, textarea):required:placeholder-shown,
.app-form-field--required :is(input, select, textarea).is-required-empty {
    border-color: var(--bs-warning, #ffc107);
    box-shadow: inset 0 0 0 1px rgba(255, 193, 7, .25);
}
.app-form-field--error :is(input, select, textarea) {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .15);
}

/* Desktop md+: columns dot | name | notes | count | progress | total | date | actions */
@media (min-width: 768px) {
    .app-dense-row {
        grid-template-columns:
            8px                 /* status dot */
            minmax(0, 2fr)      /* navn */
            minmax(0, 2fr)      /* noter */
            60px                /* antal */
            120px               /* progress */
            90px                /* total */
            60px                /* dato */
            32px;               /* actions */
    }
    .app-dense-head.d-md-grid { display: grid; }
}

/* Desktop lg+: insert "delt fra" column before date */
@media (min-width: 992px) {
    .app-dense-row {
        grid-template-columns:
            8px
            minmax(0, 2fr)
            minmax(0, 2fr)
            60px
            140px
            90px
            minmax(0, 1fr)      /* delt fra */
            60px
            32px;
    }
}

/* ---- Chips (status badges) ---- */
.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.app-chip-success { background: var(--color-success-bg); color: var(--color-success-fg); }
.app-chip-muted   { background: var(--color-muted-bg);   color: var(--color-muted-fg); }
.app-chip-info    { background: var(--color-info-bg);    color: var(--color-info-fg); }
.app-chip-warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.app-chip-danger  { background: var(--color-danger-bg, #fee2e2);  color: var(--color-danger-fg, #991b1b); }

/* ---- Progress strip ---- */
.app-progress {
    height: 3px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    margin-top: var(--space-2);
}
.app-progress > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
    transition: width .25s ease;
}

/* ---- Empty state ---- */
.app-empty {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
}
.app-empty > i { font-size: 2.25rem; opacity: 0.5; }
.app-empty > p { margin: var(--space-2) 0 0; font-size: 0.95rem; }

/* ---- Dashboard widgets ---- */
.dashboard-widget__body { padding: 1rem 1.1rem 1.1rem; }
.dashboard-widget__header { margin-bottom: 0.6rem; }
.dashboard-widget__icon {
    width: 34px; height: 34px;
    border-radius: 0.6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.dashboard-widget__title { font-weight: 600; font-size: 0.95rem; line-height: 1.15; }
.dashboard-widget__subtitle { display: block; font-size: 0.72rem; line-height: 1.1; }
.dashboard-widget__content ul li,
.dashboard-widget__content .border-bottom { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.dashboard-widget__content ul li:last-child,
.dashboard-widget__content > *:last-child { border-bottom: 0 !important; }
.dashboard-widget__footer { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px solid rgba(0,0,0,0.05); }
.dashboard-widget__empty { padding: 0.5rem 0.5rem 0.25rem !important; }
.dashboard-widget__empty > i { font-size: 1.5rem !important; opacity: 0.4 !important; }
.dashboard-widget__empty > p { font-size: 0.85rem !important; margin-top: 0.25rem !important; margin-bottom: 0 !important; }
.dashboard-note { transition: filter .15s ease; cursor: pointer; }
.dashboard-note:hover { filter: brightness(0.97); }

/* ---- Compact pager on mobile ---- */
@media (max-width: 575.98px) {
    .pagination, .pager .btn-group { gap: 2px; }
    .pager nav, nav[aria-label]:has(.btn-group) {
        flex-direction: column;
        align-items: stretch !important;
    }
}

/* ---- Desktop scaling (≥768 px) ---------------------------------------
   Mobile-first defaults stay compact; desktop just gets a bit more
   breathing room and slightly larger typography. The page uses the
   full content width (matches the rest of the app's container-fluid
   layout) — no centred narrow column. */
@media (min-width: 768px) {
    .app-page {
        padding: var(--space-5) var(--space-5) var(--space-6);
        max-width: none;
    }
    .app-page-header { margin-bottom: var(--space-4); gap: var(--space-3); }
    .app-page-title { font-size: 1.35rem; }
    .app-page-title > i { font-size: 1.4rem; }

    .app-toolbar { margin-bottom: var(--space-4); gap: var(--space-3); }
    .app-segmented { margin-bottom: var(--space-4); }
    .app-segmented > button { font-size: 0.95rem; padding: var(--space-2) var(--space-4); }

    .app-list { gap: var(--space-3); }
    .app-list-row { padding: var(--space-4); }
    .app-list-row-title { font-size: 1rem; }
    .app-list-row-meta { font-size: 0.85rem; gap: var(--space-1) var(--space-4); }

    .app-empty { padding: var(--space-6) var(--space-5); }
    .app-empty > i { font-size: 2.75rem; }

    /* Header primary action: full size on desktop. */
    .app-page-header > .btn-sm {
        padding: 0.45rem 0.95rem;
        font-size: 0.95rem;
    }
    /* Match height of segmented-control buttons and other inline action
       buttons to the primary CTA (AppButton btn-sm) on mobile so the
       header actions sit on a single visual baseline. */
    .app-page-header .btn-group-sm > .btn,
    .app-page-header > .btn-group > .btn-sm {
        padding: 0.45rem 0.7rem;
        font-size: 0.95rem;
    }

    /* Search row should not stretch edge-to-edge on wide screens —
       a single-line filter input looks better at a moderate width. */
    .app-search-row .input-group { max-width: 420px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Sidebar collapse (desktop only).
   Aktiveres kun >= 1025px hvor sidebaren er fast forankret. På tablets/mobile
   styres sidebaren stadig af .sidebar-open overlay-mønsteret i MainLayout.razor.css.
   Klassen .app-layout.sidebar-collapsed tilføjes/fjernes af window.frSidebar
   (wwwroot/js/sidebarCollapse.js) når brugeren klikker hamburger-knappen i topbar.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .app-layout.sidebar-collapsed .app-sidebar {
        width: 64px;
    }

    .app-layout.sidebar-collapsed .app-main {
        margin-left: 64px;
    }

    .app-layout.sidebar-collapsed .sidebar-brand {
        padding: 0;
        justify-content: center;
    }

    .app-layout.sidebar-collapsed .sidebar-brand .brand-text {
        display: none;
    }

    .app-layout.sidebar-collapsed .sidebar-nav {
        padding: 0.5rem 0.35rem 0.75rem;
        gap: 1px;
    }

    /* Visuel adskillelse mellem grupper i collapsed mode. Den store
       section-header er skjult, så vi har brug for et tydeligt skel mellem
       grupperne — ellers fløder 18+ ikoner sammen som én lang stak. */
    .app-layout.sidebar-collapsed .sidebar-section + .sidebar-section {
        border-top: 1px solid var(--sidebar-border);
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    /* Skjul section-headers helt — de bærer ingen information når labels og
       chevron er skjult, og deres klikbarhed forvirrer mere end den hjælper.
       Sidebaren collapses/expandes nu kun via hamburger-knappen i topbar. */
    .app-layout.sidebar-collapsed .sidebar-section-header {
        display: none;
    }

    /* Vis ALTID items i collapsed mode, uanset om gruppen er foldet sammen
       i normal-mode. Ellers ville en bruger der har foldet "Mit hjem" sammen
       miste alle hjem-ikoner når sidebaren collapses. */
    .app-layout.sidebar-collapsed .sidebar-section .sidebar-section-items,
    .app-layout.sidebar-collapsed .sidebar-section.is-collapsed .sidebar-section-items {
        display: flex;
        flex-direction: column;
        gap: 1px;
        border-left: none;
        margin-left: 0;
        padding: 0;
    }

    /* Ikon-only links — kvadratiske, centrerede, lidt større ikoner. */
    .app-layout.sidebar-collapsed .sidebar-link {
        position: relative;
        justify-content: center;
        padding: 0;
        gap: 0;
        height: 40px;
        width: 40px;
        margin: 0 auto;
        border-radius: 8px;
    }

    .app-layout.sidebar-collapsed .sidebar-link .sidebar-icon {
        font-size: 1.2rem;
        width: auto;
    }

    .app-layout.sidebar-collapsed .sidebar-link > span,
    .app-layout.sidebar-collapsed .sidebar-children,
    .app-layout.sidebar-collapsed .sidebar-version,
    .app-layout.sidebar-collapsed .sidebar-link-child {
        display: none;
    }

    /* Aktiv-state: tydelig venstre-accent + stærkere baggrund. */
    .app-layout.sidebar-collapsed .sidebar-link.active {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
    }

    .app-layout.sidebar-collapsed .sidebar-link.active::before {
        content: "";
        position: absolute;
        left: -0.35rem;
        top: 6px;
        bottom: 6px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--sidebar-active-text, #3b82f6);
    }

    /* Badges (fx ulæste lån) bliver til en lille overlay-prik øverst-højre
       på ikonet i stedet for en chip i højre side. */
    .app-layout.sidebar-collapsed .sidebar-link .app-chip {
        position: absolute;
        top: 2px;
        right: 2px;
        margin: 0 !important;
        padding: 0;
        min-width: 16px;
        height: 16px;
        font-size: 0.65rem;
        line-height: 16px;
        border-radius: 999px;
        text-align: center;
    }

    .app-layout.sidebar-collapsed .sidebar-footer {
        padding: 0.5rem 0.25rem;
        display: flex;
        justify-content: center;
    }

    .app-layout.sidebar-collapsed .sidebar-logout {
        height: 40px;
        width: 40px;
        padding: 0;
        margin: 0 auto;
    }
}

/* On wide screens, segmented control should hug content instead of
   stretching across the full row — looks more like a control, less
   like a page-wide tab bar. */
@media (min-width: 992px) {
    .app-segmented {
        display: inline-flex;
        width: auto;
    }
    .app-segmented > button { flex: 0 0 auto; }

    /* Desktop: restore the spacer so the view-toggle sits at the far right. */
    .app-filters > .app-toolbar > .app-toolbar-spacer { display: block; }
}

/* Denser card grid on very wide screens so 4-up cards don't look
   stranded with huge gaps. */
@media (min-width: 1400px) {
    .app-page .row.g-2 > [class*="col-"] { flex: 0 0 auto; width: 25%; }
}

/* ===== Loan card meta (label/value list on mobile) ===== */
.loan-card-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}
.loan-card-meta > dt {
    color: var(--color-text-muted);
    font-weight: 500;
}
.loan-card-meta > dd {
    margin: 0;
    min-width: 0;
}

/* ===== AppSearchPicker ===== */
.app-search-picker { position: relative; }
.app-search-picker-input { width: 100%; }
.app-search-picker-results {
    position: absolute; z-index: 1080; top: 100%; left: 0; right: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
    max-height: 16rem; overflow-y: auto; margin-top: .25rem; padding: .25rem 0;
}
.app-search-picker-option {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; text-align: left; padding: .5rem .75rem;
    background: transparent; border: 0; cursor: pointer;
}
.app-search-picker-option:hover, .app-search-picker-option.active {
    background: var(--bs-primary-bg-subtle, #e7f1ff);
}
.app-search-picker-option-label { font-weight: 500; }
.app-search-picker-empty, .app-search-picker-more { padding: .5rem .75rem; }
.app-search-picker-selected {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .375rem .5rem .375rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem; background: var(--bs-tertiary-bg, #f8f9fa);
}
.app-search-picker-selected-text { display: flex; flex-direction: column; min-width: 0; }
.app-search-picker-selected-label { font-weight: 500; }
.app-search-picker-selected-secondary { color: var(--bs-secondary-color, #6c757d); font-size: .85em; }
.app-search-picker-clear { padding: .125rem .25rem; line-height: 1; text-decoration: none; }

/* LanguageSwitcher — custom flag dropdown with inline SVG so Chrome on
   Windows shows real flags instead of regional-indicator emoji fallback. */
.lang-switcher { display: inline-block; }
.lang-switcher-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    min-width: 8rem;
    background-color: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
}
.lang-switcher-toggle:hover, .lang-switcher-toggle:focus {
    background-color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}
.lang-switcher-flag {
    width: 1.25rem; height: .875rem;
    border-radius: 2px; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    display: inline-block; vertical-align: middle;
}
.lang-switcher-label { font-weight: 500; }
.lang-switcher-menu { min-width: 9rem; }
.lang-switcher-item {
    display: flex; align-items: center; gap: .5rem;
}
.lang-switcher-item.active {
    background-color: var(--bs-primary-bg-subtle, #e7f1ff);
    color: inherit;
}

/* ---- Choice card (Settings / Appearance) ---- */
.app-choice-card {
    display: block;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-lg, 0.75rem);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    color: inherit;
}
.app-choice-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.app-choice-card:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}
.app-choice-card.active {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px var(--bs-primary-bg-subtle, #cfe2ff) inset;
}
.app-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle, #e7f1ff);
    color: var(--bs-primary, #0d6efd);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.app-choice-icon.dark {
    background: #2b2f3a;
    color: #ffd76b;
}
.app-choice-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border, #dee2e6);
    flex-shrink: 0;
}
.app-choice-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* Admin pages: mobile card layout for table-heavy super-admin lists */
.admin-mobile-card { border-color: var(--bs-border-color, #e5e7eb); }
.admin-mobile-card .card-body { font-size: 0.925rem; }
.min-w-0 { min-width: 0; }

/* Suppress sticky :hover on touch for the action buttons inside admin
   mobile cards so a tap doesn't leave the button in a darker "hover" state. */
@media (hover: none) {
    .admin-mobile-card .btn { -webkit-tap-highlight-color: transparent; }
    .admin-mobile-card .btn:hover,
    .admin-mobile-card .btn:focus,
    .admin-mobile-card .btn:focus-visible {
        filter: none;
    }
}