html {
    position: relative;
    min-height: 100%;
    padding: 0;
    margin: 0;

    /* Camera view is designed to fill the viewport exactly — no page scroll needed. */
    &:has(.camera-view) {
        overflow-y: hidden;
    }
}

body {
    padding: 0;
    margin: 0;

    &.user-view {
        background-color: #F8F8F8;
    }
    font-size: 14px;
    font-family: "Inter", system-ui, sans-serif;
    line-height: 150%;
}

.header-logo {
    background-repeat: no-repeat;
    background-size: contain;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

/* ── Layout shell ──────────────────────────────────────────────── */

header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    border-bottom: 1px solid #E5DFCF;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    padding: 1rem;

    .header-title {
        flex: 1;
        text-align: left;
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        line-height: inherit;
    }
}

footer {
    border-top: 1px #E5DFCF solid;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    margin: 2rem 1rem 0;
    padding: 2rem 0;

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
    }

    img {
        height: 21px;
        margin-top: -3px;
    }

    a:link {
        text-decoration: none;
        color: #321200;
    }

    .footer-version {
        display: block;
        color: #706A60;
        font-size: 10px;
        margin-top: 4px;
        letter-spacing: 0.05em;
    }
}

/* ── Header QR icon ──────────────────────────────────────────── */

.header-qr {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    img {
        width: 1.25rem;
        height: 1.25rem;
        opacity: .5;
        transition: opacity .15s;
    }

    &:hover img {
        opacity: .8;
    }
}

/* ── User section navigation ─────────────────────────────────── */

.me-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: #706A60;
    border-radius: 50%;
    text-decoration: none;
    transition: background .15s, color .15s;

    svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    &:hover {
        background: #F5F1E8;
        color: #321200;
    }

    &:focus-visible {
        outline: 2px solid #9D5200;
        outline-offset: 2px;
    }
}

.user-nav {
    position: relative;
    flex-shrink: 0;
}

.user-nav-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.5rem;
    height: 1.125rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;

    span {
        display: block;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }
}

.user-nav-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 100;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: white;
    border: 1px solid #E5DFCF;
    border-radius: .25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    min-width: 9rem;

    li a {
        display: block;
        padding: .5rem 1rem;
        text-decoration: none;
        color: inherit;
        white-space: nowrap;

        &[aria-current="page"] {
            font-weight: 700;
        }

        &:hover {
            background: #F5F1E8;
        }
    }

    li[role="separator"] {
        height: 0;
        margin: .25rem 0;
        border-top: 1px solid #E5DFCF;
        overflow: hidden;
    }
}

/* ── Shared content wrapper ──────────────────────────────────── */

.page-content {
    --label-color: #706A60;
    --sep-color: #E5DFCF;
    font-size: 14px;
    margin: 0 auto;
    padding: 0 1rem 1rem;
    max-width: 20rem;

    label::after,
    dt::after {
        content: ":";
    }

    .section {
        position: relative;
        &:first-child h2 {
            margin-top: 2.25rem;
        }
        h2 {
            margin-top: 2rem;
            margin-bottom: 0;
            font-size: 28px;
            font-weight: 600;
            padding: 0 0 .5rem 2rem;
            line-height: 24px;
            background-repeat: no-repeat;
            background-position: 0 4px;
            background-size: contain;
            position: relative;
        }
        &.aux h2 {
            background-image: url("../images/hat.svg");
            background-size: 22px;
        }
        &.user h2 {
            background-image: url("../images/head.svg");
            background-size: 16px;
        }
        &.cert h2 {
            background-image: url("../images/cert.svg");
            background-size: 22px;
        }
        &.controller h2 {
            background-image: url("../images/imark.svg");
            background-size: 18px;
        }
        dl {
            margin: .5rem 0;
            display: grid;
            grid-template-columns: max-content auto;
            row-gap: 1rem;

            dt {
                color: var(--label-color);
                font-size: 12px;
                font-weight: 600;
                grid-column: 1;
            }
            dd {
                grid-column: 2;
                font-weight: 400;

                &.user-title {
                    font-weight: 700;
                }
                &.course-status {

                    &::before {
                        content: "";
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        margin-right: .5rem;
                        background-color: black;
                    }
                    &.Valid::before {
                        background-color: #47CB81;
                    }
                    &.Expiring::before {
                        background-color: #E7C82A;
                    }
                    &.Expired::before {
                        background-color: #DC3636;
                    }
                }
            }

        }
        & > div {
            margin: 1rem 0;
        }

        &.cert object {
            width: 100%;
            height: 15.2rem;
            background-color: white;
        }
    }
}

/* ── Certificate detail view ─────────────────────────────────── */

.page-content.cert-detail {
    .section h2 { font-size: 21px; border-bottom: 1px var(--sep-color) solid; }
    .section.cert h2 { background-size: 18px; }

    .core {
        margin: 1rem 0;
        display: flex;
        flex-direction: column;
        row-gap: 1rem;

        label {
            color: var(--label-color);
            font-weight: 600;
        }

        h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            line-height: 24px;
        }

        .course-description {
            line-height: 22px;
        }

    }
}

/* ── User view ────────────────────────────────────────────────── */

.page-content.user-content {
    padding-top: 1.25rem;

    .section.user h2 { font-size: 21px; border-bottom: 1px var(--sep-color) solid; }

    .section.cert h2 {
        background-image: url("../images/Certificate.svg");
        background-size: 24px 24px;
        background-position: 0 0;
    }


    .cert-search-row {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin: 1rem 0 0.375rem;
    }

    .cert-search-input {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--sep-color);
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        font-size: 14px;
        font-family: inherit;

        &:focus {
            outline: none;
            border-color: #706A60;
        }

        &:focus-visible {
            outline: 2px solid #FC5220;
            outline-offset: 1px;
        }

        &:not(:placeholder-shown) {
            border-color: #FC5220;
        }
    }

    .cert-status-seg {
        display: inline-flex;
        margin: 0 0 0.75rem;
        border: 1px solid var(--sep-color, #E5DFCF);
        border-radius: 4px;
        overflow: hidden;

        button {
            padding: 0.3rem 0.875rem;
            border: none;
            border-left: 1px solid var(--sep-color, #E5DFCF);
            background: white;
            font-size: 14px;
            font-family: inherit;
            cursor: pointer;
            line-height: 1.4;

            &:first-child { border-left: none; }

            &.active {
                background: #FC5220;
                color: white;
            }
        }
    }

    .cert-filter-btn {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--sep-color);
        border-radius: 0.375rem;
        background: white;
        cursor: pointer;

        svg { width: 1rem; height: 1rem; }

        &.has-filters {
            border-color: #FC5220;
            color: #FC5220;
        }
    }

    .filter-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        border: 1px solid var(--sep-color, #E5DFCF);
        border-radius: 4px;
        background: white;
        font-size: 14px;
        font-family: inherit;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s, color 0.15s;

        &.active {
            border-color: #FC5220;
            background: #FC5220;
            color: white;
        }
    }

    /* ── Certificate expandable cards ────────────────────────────── */

    .cert-card-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-top: 0.5rem;
        counter-reset: cert-counter;
    }

    .cert-card {
        background: white;
        border: 1px solid var(--sep-color);
        border-radius: 0.5rem;
        overflow: hidden;
        counter-increment: cert-counter;
    }

    .cert-card-summary {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 0.75rem;
        cursor: pointer;
        font-size: 14px;
        font-family: inherit;
        color: inherit;

        @media (hover: hover) {
            &:hover {
                background: #F5F1E8;
            }
        }
    }

    .cert-card-top {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.625rem;

        &::before {
            content: counter(cert-counter);
            flex-shrink: 0;
            font-weight: 600;
            min-width: 1.25rem;
        }
    }

    .cert-card-title {
        flex: 1;
        font-weight: 600;
        line-height: 1.35;
    }

    .cert-card-chevron {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        margin-top: 0.125rem;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);

        .cert-card.expanded & {
            transform: rotate(180deg);
        }
    }

    .cert-card-meta {
        display: grid;
        grid-template-columns: 88px 88px 1fr;
        padding-left: 1.75rem;
    }

    .cert-card-meta-item {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .cert-card-meta-label {
        font-size: 12px;
        color: var(--label-color);
    }

    .cert-card-meta-value {
        font-size: 12px;
        color: #FC5220;

        .cert-card-meta-item:not(:last-child) & {
            color: inherit;
        }

        &.course-status {
            display: inline-flex;
            align-items: center;
            color: inherit;

            &::before {
                content: "";
                flex-shrink: 0;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 0.3rem;
                background-color: #000;
            }

            &.Valid::before    { background-color: #47CB81; }
            &.Expiring::before { background-color: #E7C82A; }
            &.Expired::before  { background-color: #DC3636; }
            &.Revoked::before  { background-color: #DC3636; }
            &.Planned::before  { background-color: #5B9BF0; }
        }
    }

    .cert-card-detail {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1);

        .cert-card.expanded & {
            grid-template-rows: 1fr;
        }
    }

    .cert-card-detail-inner {
        min-height: 0;
    }

    .cert-card-detail-body {
        padding: 0 0.75rem 0.875rem;
        opacity: 0;
        transition: opacity 0.25s ease;

        .cert-card.expanded & {
            opacity: 1;
        }

        dl {
            margin: 0 0 0.75rem;
            display: grid;
            grid-template-columns: max-content auto;
            column-gap: 1rem;
            row-gap: 0.5rem;

            dt {
                color: var(--label-color);
                font-size: 12px;
                font-weight: 600;
                grid-column: 1;
            }

            dd {
                grid-column: 2;
                font-weight: 400;
                margin: 0;
            }
        }
    }

    .cert-card-divider {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        margin: 0 0 0.75rem;
        font-size: 12px;
        font-weight: 600;
        color: var(--label-color);
        text-transform: uppercase;
        letter-spacing: 0.16em;

        &::before,
        &::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--sep-color);
        }
    }

    .cert-card-pdf {
        display: block;
        width: 100%;
        border-radius: 0.25rem;
    }

    .cert-card-pdf-fallback {
        padding: 0.75rem;
        background: #F5F1E8;
        border-radius: 0.25rem;
        text-align: center;
        font-size: 13px;

        .pdf-fallback-msg {
            margin: 0 0 0.5rem;
            color: #7A6A5A;
        }
    }

    /* ── Skills section icon ─────────────────────────────────── */

    .section.aux h2 {
        background-size: 24px;
    }

    /* ── Skill search row & status toggles ───────────────────── */

    .skill-search-row {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin: 1rem 0 0.375rem;
    }

    .skill-search-input {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--sep-color);
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        font-size: 14px;
        font-family: inherit;

        &:focus {
            outline: none;
            border-color: #706A60;
        }

        &:focus-visible {
            outline: 2px solid #FC5220;
            outline-offset: 1px;
        }

        &:not(:placeholder-shown) {
            border-color: #FC5220;
        }
    }

    .skill-filter-btn {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--sep-color);
        border-radius: 0.375rem;
        background: white;
        cursor: pointer;

        svg { width: 1rem; height: 1rem; }

        &.has-filters {
            border-color: #FC5220;
            color: #FC5220;
        }
    }

    .skill-status-toggle {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        margin: 0 0 0.75rem;

        button {
            padding: 0.3rem 0.875rem;
            border: 1px solid var(--sep-color, #E5DFCF);
            border-radius: 4px;
            background: white;
            font-size: 14px;
            font-family: inherit;
            cursor: pointer;
            line-height: 1.4;
            transition: border-color 0.15s, background 0.15s, color 0.15s;

            &.active {
                border-color: #FC5220;
                background: #FC5220;
                color: white;
            }
        }
    }

    /* ── Skill expandable cards ──────────────────────────────────── */

    .skill-card-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-top: 0.5rem;
        counter-reset: skill-counter;
    }

    .skill-card {
        background: white;
        border: 1px solid var(--sep-color);
        border-radius: 0.5rem;
        overflow: hidden;
        counter-increment: skill-counter;
    }

    .skill-card-summary {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 0.75rem;
        cursor: pointer;
        font-size: 14px;
        font-family: inherit;
        color: inherit;

        @media (hover: hover) {
            &:hover {
                background: #F5F1E8;
            }
        }
    }

    .skill-card-top {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.625rem;

        &::before {
            content: counter(skill-counter);
            flex-shrink: 0;
            font-weight: 600;
            min-width: 1.25rem;
        }
    }

    .skill-card-title {
        flex: 1;
        font-weight: 600;
        line-height: 1.35;
    }

    .skill-card-chevron {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        margin-top: 0.125rem;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);

        .skill-card.expanded & {
            transform: rotate(180deg);
        }
    }

    .skill-card-meta {
        display: grid;
        grid-template-columns: 88px 100px 1fr;
        padding-left: 1.75rem;
    }

    .skill-card-meta-item {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .skill-card-meta-label {
        font-size: 12px;
        color: var(--label-color);
    }

    .skill-card-meta-value {
        font-size: 12px;
        color: #FC5220;

        .skill-card-meta-item:not(:last-child) & {
            color: inherit;
        }

        &.course-status {
            display: inline-flex;
            align-items: center;
            color: inherit;

            &::before {
                content: "";
                flex-shrink: 0;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 0.3rem;
                background-color: #000;
            }

            &.Valid::before    { background-color: #47CB81; }
            &.Revoked::before  { background-color: #DC3636; }
            &.Expired::before  { background-color: #DC3636; }
            &.Planned::before  { background-color: #5B9BF0; }
        }
    }

    .skill-card-detail {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1);

        .skill-card.expanded & {
            grid-template-rows: 1fr;
        }
    }

    .skill-card-detail-inner {
        min-height: 0;
    }

    .skill-card-detail-body {
        padding: 0 0.75rem 0.75rem;
        opacity: 0;
        transition: opacity 0.25s ease;

        .skill-card.expanded & {
            opacity: 1;
        }

        dl {
            margin: 0;
            display: grid;
            grid-template-columns: max-content auto;
            column-gap: 1rem;
            row-gap: 0.25rem;

            dt {
                color: var(--label-color);
                font-size: 12px;
                font-weight: 600;
                grid-column: 1;
            }

            dd {
                grid-column: 2;
                font-weight: 400;
                font-size: 12px;
                margin: 0;
            }
        }

        .skill-categories-dd {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem;
            align-items: center;
        }

        .skill-category-chip {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            background: var(--sep-color, #E5DFCF);
            border-radius: 9999px;
            font-size: 12px;
            line-height: 1.5;
            color: inherit;
        }
    }
}

.skill-no-results {
    text-align: center;
    color: var(--label-color, #706A60);
    padding: 1.5rem 0;
    font-size: 14px;
    margin: 0;
}

.cert-no-results {
    text-align: center;
    color: var(--label-color, #706A60);
    padding: 1.5rem 0;
    font-size: 14px;
    margin: 0;
}

.filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;

    &.open {
        opacity: 1;
        pointer-events: auto;
    }
}

.filter-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    background: white;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
    max-width: 20rem;
    margin: 0 auto;
    padding: 0.5rem 1rem 1.5rem;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s;

    &.open {
        visibility: visible;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
    }

    .filter-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--sep-color, #E5DFCF);
    }

    .filter-panel-title {
        font-weight: 600;
        font-size: 16px;
    }

    .filter-panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border: none;
        background: none;
        cursor: pointer;
        color: inherit;

        svg { width: 1rem; height: 1rem; }
    }

    .filter-panel-body {
        padding: 0.75rem 0;
    }

    .filter-section {
        margin-bottom: 1rem;

        &:last-child { margin-bottom: 0; }
    }

    .filter-section-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--label-color, #706A60);
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .sort-dir-icon {
        font-size: 11px;
        line-height: 1;
        opacity: 0.7;
    }

    .filter-panel-footer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--sep-color, #E5DFCF);
    }

    .filter-clear-btn {
        flex: 1;
        padding: 0.625rem 1rem;
        background: white;
        color: inherit;
        border: 1px solid var(--sep-color, #E5DFCF);
        border-radius: 4px;
        font-size: 14px;
        font-family: inherit;
        font-weight: 600;
        cursor: pointer;

        &:hover { border-color: #706A60; }
    }

    .filter-apply-btn {
        flex: 1;
        padding: 0.625rem 1rem;
        background: #FC5220;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-family: inherit;
        font-weight: 600;
        cursor: pointer;

        &:hover { background: #D4461B; }
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Camera / QR scanner view
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header logo link ──────────────────────────────────────────── */

a.header-logo {
    display: block;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity .15s;

    &:hover { opacity: .75; }
    &:focus-visible {
        outline: 2px solid #FC5220;
        outline-offset: 3px;
    }
}

/* ── Camera view layout ────────────────────────────────────────── */

.camera-view {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Fill the viewport between header and footer.
       5rem = header; 8.875rem ≈ footer (2rem margin-top + 2rem pad-top + two 21px lines + 4px gap + 2rem pad-bottom) */
    min-height: calc(100dvh - 5rem - 9rem);
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

/* Wrapper gives the paused overlay a position:relative anchor scoped to the viewfinder */
.scanner-viewfinder-wrapper {
    position: relative;
    width: 100%;
    max-width: 22rem;
}

/* html5-qrcode renders a <video> + <canvas> inside this element */
#scanner-viewfinder {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    background: #151515;
    /* Animate in */
    animation: scanner-fadein .35s ease;

    video {
        width: 100%;
        height: auto;
        display: block;
    }
}

@keyframes scanner-fadein {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Paused overlay ────────────────────────────────────────────── */

.scanner-paused-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 5;
    animation: scanner-fadein .2s ease;

    &[hidden] { display: none; }

    .scanner-paused-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .75rem;
        color: white;

        svg {
            width: 2.5rem;
            height: 2.5rem;
            fill: white;
            opacity: .85;
        }

        span {
            font-size: 15px;
            font-weight: 600;
            letter-spacing: .02em;
        }
    }
}

/* ── Error state ───────────────────────────────────────────────── */

.scanner-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    color: #321200;
    text-align: center;

    &[hidden] { display: none; }

    svg {
        width: 3rem;
        height: 3rem;
        fill: #BFB9AB;
    }

    p {
        margin: 0;
        font-size: 15px;
        max-width: 18rem;
    }

    a {
        font-size: 13px;
        color: #706A60;
        text-decoration: underline;
        text-underline-offset: 2px;

        &:hover { color: #321200; }
    }
}

/* ── Toast notification ────────────────────────────────────────── */

.scanner-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(1.5rem);
    z-index: 100;
    background: rgba(20, 20, 20, .92);
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: .75rem 1.25rem;
    border-radius: .5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    text-align: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;

    &[hidden] { display: none; }

    &.scanner-toast--visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    &.scanner-toast--hiding {
        opacity: 0;
        transform: translateX(-50%) translateY(.5rem);
    }
}

/* ── Admin environment picker ───────────────────────────────────── */

.env-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: 1.25rem;
}

.env-picker-item {
    font-size: 11px;
    font-family: "Roboto Mono", monospace;
    padding: .25rem .625rem;
    border: 1px solid #E5DFCF;
    border-radius: .25rem;
    text-decoration: none;
    color: #321200;
    background: white;
    transition: border-color .1s, background .1s;

    &.active {
        border-color: #FC5220;
        color: #FC5220;
        font-weight: 600;
    }

    &:not(.active):hover { background: #F5F1E8; }

    &.disabled {
        color: #706A60;
        border-color: #E5DFCF;
        cursor: default;
        font-style: italic;
    }
}

/* ── Scan-bracket pulse animation ──────────────────────────────── */

@keyframes bracket-pulse {
    0%, 100% { opacity: .6; }
    50%       { opacity: 1; }
}

/* ── Admin page ─────────────────────────────────────────────────── */

.admin-page {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-size: 14px;
}

.admin-heading {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 1.25rem;
}

.admin-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #706A60;
    margin-bottom: .375rem;

    &::after { content: ""; }
}

.admin-hint {
    font-size: 12px;
    color: #706A60;
    margin: .25rem 0 0;
}

.admin-warning {
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: .375rem;
    padding: .875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 13px;
    line-height: 1.5;
}

.admin-tabs {
    display: flex;
    margin-bottom: 1.25rem;
    border: 1px solid #E5DFCF;
    border-radius: .375rem;
    overflow: hidden;

    .admin-tab {
        flex: 1;
        padding: .5rem 1rem;
        border: none;
        border-left: 1px solid #E5DFCF;
        background: white;
        cursor: pointer;
        font-size: 14px;
        font-family: inherit;
        transition: background .1s, color .1s;

        &:first-child { border-left: none; }

        &.active {
            background: #FC5220;
            color: white;
        }

        &:not(.active):hover { background: #F5F1E8; }
    }
}

.admin-panel {
    margin-bottom: 1rem;
}

.admin-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #E5DFCF;
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .1s;

    &:focus {
        outline: none;
        border-color: #706A60;
    }

    &:focus-visible {
        outline: 2px solid #FC5220;
        outline-offset: 1px;
    }
}

.admin-search-wrap {
    position: relative;
}

.admin-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: .25rem 0;
    background: white;
    border: 1px solid #E5DFCF;
    border-radius: .375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    max-height: 14rem;
    overflow-y: auto;

    li {
        padding: .5rem 1rem;
        cursor: pointer;
        font-size: 13px;
        line-height: 1.4;

        &:hover { background: #F5F1E8; }

        .user-email { color: #706A60; }
    }

    .admin-results-status {
        color: #706A60;
        font-style: italic;
        cursor: default;
        display: flex;
        align-items: center;
        gap: .5rem;

        &:hover { background: transparent; }
    }
}

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

.admin-results-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #E5DFCF;
    border-top-color: #FC5220;
    border-radius: 50%;
    animation: admin-spin .6s linear infinite;
    flex-shrink: 0;
}

.admin-selected {
    margin-top: .375rem;
    padding: .375rem .75rem;
    background: #F5F1E8;
    border-radius: .375rem;
    font-size: 13px;
}

.admin-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .625rem 1rem;
    background: #FC5220;
    color: white;
    border: none;
    border-radius: .375rem;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-top: .75rem;
    transition: background .1s;

    &:hover:not(:disabled) { background: #D4461B; }
    &:disabled {
        background: #BFB9AB;
        cursor: not-allowed;
    }
}

.admin-result {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E5DFCF;
}

.admin-result-subject {
    text-align: center;
    margin: 0 0 1rem;
    font-size: 14px;
    color: #151515;

    strong { display: block; }
}

.admin-result-secondary {
    font-size: 12px;
    color: #706A60;
}

.admin-qr-image {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 1.25rem;
    image-rendering: pixelated;
}

.admin-url-row {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
    align-items: center;
}

.admin-download-row {
    display: flex;
    gap: .5rem;
    margin-top: .75rem;

    > .admin-btn {
        flex: 1;
        margin-top: 0;
    }
}


.admin-url-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #E5DFCF;
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: 12px;
    font-family: inherit;
    background: #F5F1E8;
    color: #321200;

    &:focus { outline: none; }
    &:focus-visible { outline: 2px solid #FC5220; outline-offset: 1px; }
}

.admin-btn-sm {
    flex-shrink: 0;
    padding: .5rem .875rem;
    background: white;
    color: #FC5220;
    border: 1px solid #FC5220;
    border-radius: .375rem;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s;

    &:hover { background: #FFD0B5; }
}

/* ── PDF fallback (detail view) ───────────────────────────── */

.pdf-fallback {
    padding: 1rem;
    background: #F5F1E8;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 13px;

    .pdf-fallback-msg {
        margin: 0 0 0.5rem;
        color: #7A6A5A;
    }
}

.pdf-fallback-link {
    color: #FC5220;
    font-weight: 500;
    text-decoration: none;

    &:hover { text-decoration: underline; }
    &:focus-visible { outline: 2px solid #FC5220; outline-offset: 2px; }
}

/* ── Me page (self-service QR code) ─────────────────────────── */

.me-page {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

.me-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    max-width: 20rem;
    width: 100%;
    padding: 2rem 1.5rem;
    background: white;
    border: 1px solid #E5DFCF;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    text-align: center;
}

.me-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #151515;
}

.me-upn {
    margin: 0;
    font-size: 13px;
    color: #706A60;
    word-break: break-all;
}

.me-qr-image {
    display: block;
    width: 200px;
    height: 200px;
    margin-top: .5rem;
    image-rendering: pixelated;
}