body{
    margin: 0;
    background-color: var(--admin-bg);
}

a:link{
    text-decoration: none!important;
    -webkit-tap-highlight-color: transparent;
}

.img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

[hidden]{
    display: none !important;
}

:root{
    /* Corner radii, used everywhere on the page: xs for tiny tags and focus
       rings, sm for controls (buttons, inputs, thumbnails, list rows), md for
       cards and panels, pill for chips, badges, segmented controls, steppers
       and progress bars. Circles stay 50%. */
    --admin-radius-xs: 4px;
    --admin-radius-sm: 8px;
    --admin-radius-md: 12px;
    --admin-radius-pill: 999px;
    --admin-bg: rgb(255, 255, 255);
    --admin-text: #1A1A1A;
    --admin-muted: #757575;
    --admin-subtle: #7D8187;
    --admin-border: #E5E5E7;
    --admin-field: rgb(255, 255, 255);
    --admin-surface: #F5F5F7;
    --admin-accent: #1A1A1A;
    --admin-on-accent: rgb(255, 255, 255);
    --admin-error: #E0483E;
    --admin-logo-filter: none;
    --admin-active-bg: #E4F6EA;
    --admin-active-text: #18794E;
    --admin-star: #F5B301;
    --admin-star-empty: #D6D6DA;
    --admin-divider: #DCDCE0;
    --admin-warn-bg: #FFF4D6;
    --admin-warn-text: #8A5A00;
    --admin-stale-bg: #FDE8E7;
    --admin-stale-text: #B42318;
    --admin-goal: #18794E;
    --admin-goal-track: #DCDCE0;
    --admin-mark: rgb(0, 122, 255);
    --admin-mark-tint: rgba(0, 122, 255, 0.1);
    --admin-mark-tint-hover: rgba(0, 122, 255, 0.16);
    --admin-tick-ring: #C7C7CC;
    --admin-ticket: rgb(255, 255, 255);
    --admin-ticket-edge: rgba(0, 0, 0, 0.4);
    --admin-ticket-shadow: rgba(0, 0, 0, 0.07);
    --admin-ticket-perf: #D1D1D6;
}

@media (prefers-color-scheme: dark){
    :root{
        --admin-bg: #0F0F10;
        --admin-text: #F2F2F2;
        --admin-muted: #A1A1A6;
        --admin-subtle: #8E9196;
        --admin-border: #2C2C2E;
        --admin-field: #1C1C1E;
        --admin-surface: #1C1C1E;
        --admin-accent: #F2F2F2;
        --admin-on-accent: #1A1A1A;
        --admin-error: #FF6B61;
        --admin-logo-filter: invert(1);
        --admin-active-bg: rgba(48, 164, 108, 0.2);
        --admin-active-text: #4CC38A;
        --admin-star: #FFC53D;
        --admin-star-empty: #48484A;
        --admin-divider: #3A3A3C;
        --admin-warn-bg: rgba(255, 178, 36, 0.18);
        --admin-warn-text: #FFC53D;
        --admin-stale-bg: rgba(255, 107, 97, 0.18);
        --admin-stale-text: #FF8A80;
        --admin-goal: #4CC38A;
        --admin-goal-track: #3A3A3C;
        --admin-mark-tint: rgba(10, 132, 255, 0.18);
        --admin-mark-tint-hover: rgba(10, 132, 255, 0.26);
        --admin-tick-ring: #48484A;
        --admin-ticket: #1C1C1E;
        --admin-ticket-edge: rgba(255, 255, 255, 0.22);
        --admin-ticket-shadow: rgba(0, 0, 0, 0.5);
        --admin-ticket-perf: #48484A;
    }
}


.admin-bar{
    width: min(1000px, 90%);
    margin: 0 auto;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: inter;

    .admin-brand{
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .admin-logo{
        display: block;
        min-width: 0;
        height: 14px;

        .img{
            width: auto;
            max-width: 100%;
            filter: var(--admin-logo-filter);
        }
    }

    .admin-account{
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        font-size: 13px;
        color: var(--admin-muted);
    }

    .admin-account-email{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-signout{
        flex-shrink: 0;
        height: 32px;
        padding: 0 14px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
        background: none;
        color: var(--admin-text);
        font-family: inter;
        font-size: 13px;
        cursor: pointer;
    }
}


.admin-page{
    width: min(1000px, 90%);
    margin: 0 auto;
    padding: 48px 0 120px;
    box-sizing: border-box;
    font-family: inter;
    color: var(--admin-text);
}

.admin-status{
    font-size: 14px;
    color: var(--admin-muted);
}

.admin-title{
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.admin-intro{
    margin: 12px 0 32px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--admin-muted);
}

.admin-error{
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--admin-error);
}

.admin-muted{
    color: var(--admin-muted);
}


/* ------------------------------------------------------------ sign in */

.admin-login{
    max-width: 400px;
    margin: 60px auto 0;
}

/* "Back to HPH Renewable" above the sign-in heading. */
.admin-back-site{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--admin-muted);
    text-decoration: none;

    .material-symbols-rounded{
        font-size: 18px;
    }

    &:hover{
        color: var(--admin-text);
    }
}

.admin-login-form{
    display: grid;
    gap: 20px;
}

.admin-field{
    display: flex;
    flex-direction: column;
    gap: 6px;

    .admin-label{
        font-size: 12px;
        color: var(--admin-subtle);
    }

    input{
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
        background-color: var(--admin-field);
        color: var(--admin-text);
        font-family: inter;
        font-size: 16px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus{
            border-color: var(--admin-accent);
            box-shadow: 0 0 0 3px rgba(125, 129, 135, 0.18);
        }
    }
}

.admin-login-form .admin-error{
    margin: 0;
}

/* "or" line between the password form and the Google button. */
.admin-or{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 12px;
    color: var(--admin-subtle);

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

.admin-google{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    color: var(--admin-text);
    font-family: inter;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease;

    .admin-google-logo{
        width: 20px;
        height: 20px;
    }

    &:hover, &:focus-visible{
        border-color: var(--admin-accent);
    }

    &:disabled{
        opacity: 0.6;
        cursor: default;
    }
}

.admin-button{
    width: 100%;
    height: 48px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-accent);
    color: var(--admin-on-accent);
    font-family: inter;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;

    &:disabled{
        opacity: 0.6;
        cursor: default;
    }
}


/* ---------------------------------------------------------- dashboard */

.admin-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.admin-refresh{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inter;
    font-size: 13px;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 18px;
    }

    &:disabled{
        opacity: 0.5;
        cursor: default;
    }
}

/* Live portfolio counters (../portfolio-counters.js), in one grey box. */
.admin-portfolio{
    margin-top: 28px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);
}

.admin-portfolio + .admin-stats{
    margin-top: 12px;
}

.admin-portfolio-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 16px;

    .admin-portfolio-title{
        font-size: 13px;
        font-weight: 600;
    }

    .admin-portfolio-status{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--admin-subtle);
    }

    /* Green while live; grey when paused (tab hidden); red on errors. */
    .admin-portfolio-dot{
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--admin-active-text);

        &.paused{
            background-color: var(--admin-subtle);
        }

        &.error{
            background-color: var(--admin-error);
        }
    }
}

/* Line dividers between the counters, like the Home page: vertical lines
   between the four on desktop; on phones (2 x 2) a vertical line between the
   columns and a horizontal line between the rows. */
.admin-portfolio-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.admin-portfolio-item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 4px 20px;

    &:first-child{
        padding-left: 0;
    }

    & + .admin-portfolio-item{
        border-left: 1px solid var(--admin-divider);
    }
}

/* Same look as the stat tiles' labels. */
.admin-portfolio-label{
    font-size: 12px;
    color: var(--admin-subtle);
}

.admin-portfolio-value{
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s ease;

    &.loading{
        opacity: 0.35;
    }

    .portfolio-unit{
        margin-left: 4px;
        font-size: 0.5em;
        font-weight: 600;
        color: var(--admin-subtle);
    }
}

.admin-portfolio-error{
    display: none;
    margin-top: 12px;
    font-size: 12px;
    color: var(--admin-error);

    &.show{
        display: block;
    }
}

/* Install goal progress bar (data-portfolio-goal, filled by
   ../portfolio-counters.js via --progress). */
.admin-goal{
    --progress: 0%;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--admin-divider);
}

.admin-goal-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 8px;
    font-size: 12px;

    .admin-goal-title{
        font-weight: 600;
    }

    .admin-goal-text{
        color: var(--admin-subtle);
        font-variant-numeric: tabular-nums;
    }
}

.admin-goal-track{
    height: 8px;
    border-radius: var(--admin-radius-pill);
    overflow: hidden;
    background-color: var(--admin-goal-track);

    .admin-goal-fill{
        width: var(--progress);
        height: 100%;
        border-radius: var(--admin-radius-pill);
        background-color: var(--admin-goal);
        transition: width 0.6s ease;
    }
}

/* Customer impact: estimated peso savings across all installs. */
.admin-impact{
    margin-top: 12px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);

    .admin-impact-note{
        font-size: 12px;
        color: var(--admin-subtle);
    }
}

.admin-impact-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.admin-impact + .admin-stats{
    margin-top: 12px;
}

/* Stale alert banner above the tabs. */
.admin-stale{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: -16px 0 24px;
    padding: 12px 16px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-warn-bg);
    color: var(--admin-warn-text);
    font-size: 13px;

    .admin-stale-text{
        flex: 1 1 240px;
    }

    .admin-stale-links{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-stale-link{
        padding: 6px 12px;
        border: 1px solid currentColor;
        border-radius: var(--admin-radius-pill);
        background: none;
        color: inherit;
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
}

/* Referrals: visit requests grouped by referral code. */
.admin-referrals{
    margin: -12px 0 28px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);

    summary{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 16px;
        list-style: none;
        cursor: pointer;
        font-size: 13px;

        &::-webkit-details-marker{
            display: none;
        }
    }

    .admin-referrals-title{
        font-weight: 600;
    }

    .admin-referrals-count{
        flex: 1;
        color: var(--admin-subtle);
        font-size: 12px;
    }

    .admin-chevron{
        color: var(--admin-subtle);
        transition: transform 0.2s ease;
    }

    &[open] .admin-chevron{
        transform: rotate(180deg);
    }
}

.admin-referrals-list{
    padding: 0 16px 8px;
}

.admin-referral{
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 4px 10px;
    padding: 12px 0;
    border-top: 1px solid var(--admin-divider);
    font-size: 13px;

    /* Leaderboard rank; the top three (with an install) get a gold ring. */
    .admin-referral-rank{
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--admin-bg);
        font-size: 12px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--admin-muted);

        &.admin-referral-top{
            box-shadow: inset 0 0 0 2px var(--admin-star);
            color: var(--admin-text);
        }
    }

    .admin-referral-code{
        padding: 3px 8px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-xs);
        background-color: var(--admin-bg);
        color: var(--admin-text);
        font: inherit;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;

        &:hover{
            border-color: var(--admin-accent);
        }
    }

    .admin-referral-stats{
        color: var(--admin-subtle);
        font-size: 12px;

        strong{
            color: var(--admin-text);
            font-weight: 600;
        }
    }

    .admin-referral-people{
        grid-column: 1 / -1;
        margin: 4px 0 0;
        padding-left: 52px;
        line-height: 1.7;
    }
}

/* Waitlist product chips. */
.admin-product-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 4px;
}

.admin-product-chip{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    color: var(--admin-text);
    font-family: inter;
    text-align: left;
    cursor: pointer;

    .admin-product-name{
        font-size: 13px;
        font-weight: 600;
    }

    .admin-product-sub{
        font-size: 11px;
        color: var(--admin-subtle);
    }

    &:hover{
        border-color: var(--admin-accent);
    }

    &[aria-pressed="true"]{
        border-color: var(--admin-accent);
        background-color: var(--admin-accent);
        color: var(--admin-on-accent);

        .admin-product-sub{
            color: inherit;
            opacity: 0.75;
        }
    }
}

.admin-stats{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin: 28px 0 36px;
}

.admin-stat{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);

    .admin-star-filled{
        color: var(--admin-star);
    }

    .admin-stat-value{
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .admin-stat-label{
        font-size: 12px;
        color: var(--admin-subtle);
    }
}

.admin-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-tabs{
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);
}

.admin-tab{
    white-space: nowrap;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-muted);
    font-family: inter;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;

    &.active{
        background-color: var(--admin-bg);
        color: var(--admin-text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .admin-tab-count{
        margin-left: 4px;
        color: var(--admin-subtle);
        font-variant-numeric: tabular-nums;
    }
}

.admin-filters{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.admin-status-filter,
.admin-source-filter,
.admin-category-filter{
    flex-shrink: 0;
    height: 40px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237D8187' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--admin-text);
    font-family: inter;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;

    &:focus{
        border-color: var(--admin-accent);
    }
}

.admin-search{
    flex: 1;
    max-width: 320px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    color: var(--admin-text);
    font-family: inter;
    font-size: 14px;
    outline: none;

    &:focus{
        border-color: var(--admin-accent);
    }
}

.admin-empty{
    padding: 32px 0;
    margin: 0;
    font-size: 14px;
    color: var(--admin-muted);
    list-style: none;
}

.admin-entry{
    border-bottom: 1px solid var(--admin-border);

    summary{
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 0;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker{
            display: none;
        }
    }

    .admin-entry-main{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .admin-entry-heading{
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .admin-entry-title{
        min-width: 0;
        font-size: 15px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-entry-meta{
        font-size: 13px;
        color: var(--admin-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-entry-date{
        flex-shrink: 0;
        font-size: 13px;
        color: var(--admin-subtle);
        font-variant-numeric: tabular-nums;
    }

    .admin-chevron{
        flex-shrink: 0;
        color: var(--admin-subtle);
        transition: transform 0.2s ease;
    }

    &[open] .admin-chevron{
        transform: rotate(180deg);
    }

    /* Completed visits are dimmed so the ones still to do stand out. */
    &.admin-entry-done .admin-entry-title,
    &.admin-entry-done .admin-entry-meta{
        opacity: 0.55;
    }
}

.admin-badge{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-accent);
    color: var(--admin-on-accent);
    font-size: 11px;
    font-weight: 600;
}

/* Visit requests not yet marked done. */
.admin-badge-active{
    background-color: var(--admin-active-bg);
    color: var(--admin-active-text);
}

/* No contact after 48 h (amber), stale after 72 h (red). */
.admin-badge-warn{
    background-color: var(--admin-warn-bg);
    color: var(--admin-warn-text);
}

.admin-badge-stale{
    background-color: var(--admin-stale-bg);
    color: var(--admin-stale-text);
}

/* Pipeline stages between New and the won stage (blue), and Cancelled (grey). */
.admin-badge-stage{
    background-color: color-mix(in srgb, var(--admin-mark) 14%, transparent);
    color: var(--admin-mark);
}

.admin-badge-off{
    background: none;
    box-shadow: inset 0 0 0 1px var(--admin-border);
    color: var(--admin-muted);
}

/* Overview "Pipeline" box (renderPipeline() in admin.js). */
.admin-pipeline-hint{
    font-size: 12px;
    color: var(--admin-subtle);
}

.admin-pipeline{
    margin: 0 0 24px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);
}

.admin-pipeline-group{
    margin-top: 16px;

    & + .admin-pipeline-group{
        padding-top: 16px;
        border-top: 1px solid var(--admin-divider);
    }
}

.admin-pipeline-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .admin-pipeline-name{
        font-size: 13px;
        font-weight: 600;
    }

    .admin-pipeline-sub{
        font-size: 12px;
        color: var(--admin-subtle);
    }
}

.admin-pipeline-stages{
    display: grid;
    grid-template-columns: repeat(var(--stages), minmax(0, 1fr));
    gap: 8px;
}

.admin-pipeline-stage{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px 12px;
    border: 1px solid transparent;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-bg);
    color: var(--admin-text);
    font-family: inter;
    text-align: left;
    cursor: pointer;

    &:hover{
        border-color: var(--admin-accent);
    }

    .admin-pipeline-count{
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .admin-pipeline-label{
        max-width: 100%;
        font-size: 12px;
        color: var(--admin-subtle);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* "3 visits + 20 past installs" under the Installed box's label. */
    .admin-pipeline-note{
        max-width: 100%;
        font-size: 11px;
        line-height: 1.35;
        color: var(--admin-subtle);
    }

    /* Share of all entries at this stage. */
    .admin-pipeline-bar{
        position: relative;
        width: 100%;
        height: 4px;
        margin-top: 8px;
        border-radius: var(--admin-radius-pill);
        background-color: var(--admin-goal-track);
        overflow: hidden;

        &::after{
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: calc(var(--share) * 100%);
            border-radius: var(--admin-radius-pill);
            background-color: var(--admin-mark);
        }
    }

    &.admin-pipeline-off .admin-pipeline-bar::after{
        background-color: var(--admin-subtle);
    }
}

/* Stage stepper above the open entry's ticket (appendStage() in admin.js):
   dots joined by a line, blue up to the current stage. */
/* Two classes so it beats the plain .admin-actions rule further down. */
.admin-actions.admin-stage-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    /* Sits above the ticket. */
    margin: 8px 0 28px;
}

/* Runs edge to edge: the first stage is left-aligned and the last
   right-aligned, and those two get half the width of the others, which keeps
   the dots evenly spaced. One grey track (::before) and one blue fill
   (::after, --progress from admin.js: 0 at the first stage, 1 at the last)
   run behind the dots, from the first dot's centre to the last's. */
.admin-stages{
    --dot: 14px;
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;

    &::before, &::after{
        content: "";
        position: absolute;
        top: calc(var(--dot) / 2 + 1px);
        left: calc(var(--dot) / 2);
        height: 2px;
        border-radius: 1px;
    }

    &::before{
        right: calc(var(--dot) / 2);
        background-color: var(--admin-border);
    }

    &::after{
        width: calc((100% - var(--dot)) * var(--progress, 0));
        background-color: var(--admin-mark);
    }

    li{
        position: relative;
        /* Above the track and fill. */
        z-index: 1;
        flex: 1;
        min-width: 0;

        &:first-child, &:last-child{
            flex: 0.5;
        }

        &:first-child .admin-stage{
            align-items: flex-start;
            text-align: left;
        }

        &:last-child .admin-stage{
            align-items: flex-end;
            text-align: right;
        }

        &:first-child .admin-stage-label, &:last-child .admin-stage-label{
            white-space: nowrap;
        }
    }
}

.admin-stage{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-muted);
    font-family: inter;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;

    .admin-stage-dot{
        position: relative;
        width: var(--dot);
        height: var(--dot);
        margin-top: 2px;
        box-sizing: border-box;
        border: 2px solid var(--admin-border);
        border-radius: 50%;
        background-color: var(--admin-bg);
        transition: transform 0.15s ease;
    }

    &:hover .admin-stage-dot{
        transform: scale(1.2);
        border-color: var(--admin-mark);
    }

    &:disabled{
        cursor: default;
    }

    &[aria-current="step"]{
        color: var(--admin-text);
        font-weight: 600;
        cursor: default;

        .admin-stage-dot{
            transform: none;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--admin-mark) 25%, transparent);
        }
    }
}

.admin-stages li.reached .admin-stage{
    color: var(--admin-text);

    .admin-stage-dot{
        border-color: var(--admin-mark);
        background-color: var(--admin-mark);
    }
}

/* Phones: seven labels don't fit side by side, so the stepper runs down the
   page instead, one stage per row, the line and its blue fill on the left. */
@media only screen and (max-width:750px){
    .admin-stages{
        --row: 30px;
        flex-direction: column;

        &::before, &::after{
            top: calc(var(--row) / 2);
            left: calc(var(--dot) / 2 - 1px);
            width: 2px;
            height: auto;
        }

        &::before{
            right: auto;
            bottom: calc(var(--row) / 2);
        }

        &::after{
            height: calc((100% - var(--row)) * var(--progress, 0));
        }

        li, li:first-child, li:last-child{
            flex: none;
            height: var(--row);
        }

        li .admin-stage,
        li:first-child .admin-stage,
        li:last-child .admin-stage{
            height: 100%;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            text-align: left;
        }

        .admin-stage-dot{
            flex-shrink: 0;
            margin-top: 0;
        }

        .admin-stage{
            font-size: 13px;
        }
    }
}

/* Cancelled: the whole line greys out. */
.admin-stages-off{
    opacity: 0.5;
}

/* Right-aligned, under the end of the stepper. */
.admin-stage-buttons{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* Last stage (Installed/Delivered): no buttons, so no empty row, unless it's
   showing a save error from the stepper. */
.admin-stage-buttons:not(:has(button, .admin-action-error:not(:empty))){
    display: none;
}

/* Above the list: "12 of 40 shown" and Export CSV. */
.admin-list-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;

    .admin-list-count{
        font-size: 12px;
        color: var(--admin-subtle);
    }
}

.admin-export{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inter;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 16px;
    }

    &:hover{
        border-color: var(--admin-accent);
    }

    &:disabled{
        opacity: 0.4;
        cursor: default;
    }
}

.admin-stars{
    font-size: 14px;
    letter-spacing: 1px;

    .admin-star-filled{
        color: var(--admin-star);
    }

    .admin-star-empty{
        color: var(--admin-star-empty);
    }
}

.admin-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: -8px 0 20px;
}

.admin-action{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inter;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 18px;
    }

    /* "Mark as done" / "Mark as contacted": blue in light and dark mode. */
    &.admin-action-primary{
        border-color: var(--admin-mark);
        background-color: var(--admin-mark);
        color: rgb(255, 255, 255);
    }

    &:disabled{
        opacity: 0.5;
        cursor: default;
    }
}

.admin-action-error{
    font-size: 13px;
    color: var(--admin-error);
}

.admin-details{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin: 0 0 20px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);
}

.admin-detail{
    min-width: 0;

    dt{
        font-size: 12px;
        color: var(--admin-subtle);
    }

    dd{
        margin: 4px 0 0;
        font-size: 14px;
        line-height: 1.5;
        white-space: pre-wrap;
        overflow-wrap: anywhere;

        a{
            color: var(--admin-text);
            text-decoration: underline !important;
        }
    }

    /* Long free-text fields (message, note) span both columns. */
    &.admin-detail-wide{
        grid-column: 1 / -1;
    }
}

/* Click-to-copy details (makeCopyable() in admin.js). */
.admin-detail-copy{
    position: relative;
    /* Highlight hugs the value instead of stretching to the grid row. */
    align-self: start;
    margin: -6px -8px;
    padding: 6px 36px 6px 8px;
    border-radius: var(--admin-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease;

    &:hover, &:focus-within{
        background-color: color-mix(in srgb, var(--admin-text) 6%, transparent);
    }

    &.copied{
        background-color: color-mix(in srgb, var(--admin-mark) 12%, transparent);
    }

    .admin-copy{
        position: absolute;
        top: 6px;
        right: 6px;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 26px;
        min-width: 26px;
        padding: 0 4px;
        box-sizing: border-box;
        justify-content: center;
        border: none;
        border-radius: var(--admin-radius-sm);
        background: none;
        color: var(--admin-subtle);
        font-family: inter;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s ease;

        .material-symbols-rounded{
            font-size: 16px;
        }

        &:hover{
            color: var(--admin-text);
        }
    }

    &:hover .admin-copy, .admin-copy:focus-visible{
        opacity: 1;
    }

    .admin-copy-done{
        display: none;
    }

    &.copied .admin-copy{
        opacity: 1;
        color: var(--admin-mark);

        .admin-copy-done{
            display: inline;
        }
    }
}

/* Touch screens have no hover: keep the copy icon faintly visible. */
@media (hover: none){
    .admin-detail-copy .admin-copy{
        opacity: 0.6;
    }
}

/* Entry details as a ticket (ticket() in admin.js): stub, perforation with a
   notch each side, then the details, with a torn zigzag bottom edge.
   --notch-y is the perforation's height from the top, matching the stub's
   height; --tear-w / --tear-h are each zigzag tooth's width and depth. */
.admin-ticket{
    --notch-y: 52px;
    --notch-r: 15px;
    --tear-w: 40px;
    --tear-h: 20px;
    margin: 0 0 20px;
    /* Outline + soft shadow; a filter follows the masked notches, a border wouldn't. */
    filter: drop-shadow(0 0 0.75px var(--admin-ticket-edge)) drop-shadow(0 8px 18px var(--admin-ticket-shadow));
}

.admin-ticket-paper{
    position: relative;
    /* Square bottom corners: the torn edge replaces them. */
    border-radius: var(--admin-radius-md) var(--admin-radius-md) 0 0;
    background-color: var(--admin-ticket);
    /* Three mask layers that don't overlap: the left and right halves (each
       with its notch) stop --tear-h above the bottom, and a strip of
       downward-pointing triangles fills that last bit. "round" fits a whole
       number of teeth across the width. */
    -webkit-mask:
        radial-gradient(circle var(--notch-r) at left var(--notch-y), transparent 98%, #000) left top / 51% calc(100% - var(--tear-h)) no-repeat,
        radial-gradient(circle var(--notch-r) at right var(--notch-y), transparent 98%, #000) right top / 51% calc(100% - var(--tear-h)) no-repeat,
        conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) left bottom / var(--tear-w) var(--tear-h) round no-repeat;
    mask:
        radial-gradient(circle var(--notch-r) at left var(--notch-y), transparent 98%, #000) left top / 51% calc(100% - var(--tear-h)) no-repeat,
        radial-gradient(circle var(--notch-r) at right var(--notch-y), transparent 98%, #000) right top / 51% calc(100% - var(--tear-h)) no-repeat,
        conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) left bottom / var(--tear-w) var(--tear-h) round no-repeat;

    /* Perforation between the notches. */
    &::after{
        content: "";
        position: absolute;
        top: calc(var(--notch-y) - 1px);
        left: calc(var(--notch-r) + 8px);
        right: calc(var(--notch-r) + 8px);
        border-top: 2px dashed var(--admin-ticket-perf);
    }

    /* The details sit on the ticket, not in their own grey box. */
    .admin-details{
        margin: 0;
        /* Extra bottom room for the torn edge. */
        padding: 24px 28px calc(26px + var(--tear-h));
        border-radius: 0;
        background: none;
    }
}

.admin-ticket-stub{
    height: var(--notch-y);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    box-sizing: border-box;
}

.admin-ticket-kind{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--admin-subtle);
    white-space: nowrap;

    .material-symbols-rounded{
        font-size: 20px;
        color: var(--admin-text);
    }
}

.admin-ticket-no{
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

/* The roof pinned on the Schedule a Visit map: the pin is drawn in the
   middle of a fixed satellite map. */
.admin-roof-map-wrap{
    position: relative;
    height: 420px;
    margin-top: 8px;
    border-radius: var(--admin-radius-md);
    overflow: hidden;
    background-color: var(--admin-subtle);
}

.admin-roof-map{
    position: absolute;
    inset: 0;
}

.admin-roof-map-wrap .admin-roof-pin{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    font-size: 40px;
    font-variation-settings: "FILL" 1;
    color: #E0483E;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.admin-roof-link{
    color: inherit;
    text-decoration: underline;
}

.admin-attachments{
    margin: -8px 0 20px;
    font-size: 14px;

    .admin-attachments-label{
        font-size: 12px;
        color: var(--admin-subtle);
    }

    .admin-empty{
        padding: 0;
    }
}

/* Bill photos as thumbnails (click to view), PDFs as cards. */
.admin-attachment-grid{
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;

    li{
        min-width: 0;
    }
}

.admin-thumb{
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
    background-color: var(--admin-surface);
    cursor: zoom-in;
    transition: border-color 0.2s ease;

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

    &:hover, &:focus-visible{
        border-color: var(--admin-accent);
    }
}

.admin-file-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 120px;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-surface);
    color: var(--admin-text);
    transition: border-color 0.2s ease;

    .material-symbols-rounded{
        font-size: 28px;
        color: var(--admin-subtle);
    }

    .admin-file-name{
        font-size: 13px;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

    .admin-file-type{
        font-size: 11px;
        color: var(--admin-subtle);
    }

    &:hover, &:focus-visible{
        border-color: var(--admin-accent);
    }
}

/* Paperclip + count next to a visit request's name. */
.admin-entry-files{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: var(--admin-subtle);

    .material-symbols-rounded{
        font-size: 16px;
    }
}

/* Full-size image viewer. */
.admin-viewer{
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: #0B0B0C;
    color: #FFFFFF;
    font-family: inter;

    &::backdrop{
        background: rgba(0, 0, 0, 0.6);
    }

    &[open]{
        display: flex;
        flex-direction: column;
    }
}

.admin-viewer-bar{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;

    .admin-viewer-caption{
        flex: 1;
        min-width: 0;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-viewer-original{
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #FFFFFF;
        font-size: 13px;

        .material-symbols-rounded{
            font-size: 18px;
        }
    }

    .admin-viewer-close{
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        color: #FFFFFF;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.admin-viewer-stage{
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px 16px;

    .admin-viewer-img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: var(--admin-radius-sm);
        background-color: #FFFFFF;
    }

    .admin-viewer-nav{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: #1A1A1A;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .admin-viewer-prev{
        left: 16px;
    }

    .admin-viewer-next{
        right: 16px;
    }
}


/* ------------------------------------------------- desktop: sidebar layout */
/* Signed in on desktop, the page fills the window: the top bar, a pinned
   sidebar on the left (tabs, filters and the list, which scrolls on its own)
   and the overview or the open entry on the right (also scrolling on its own).
   Phones keep the single column below. */

.admin-back{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inter;
    font-size: 13px;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 18px;
    }

    &:hover{
        border-color: var(--admin-accent);
    }
}

@media only screen and (min-width:751px){
    body:has(.admin-dashboard:not([hidden])){
        .admin-bar{
            width: auto;
            padding: 0 24px;
            box-sizing: border-box;
            border-bottom: 1px solid var(--admin-border);
        }

        .admin-page{
            width: 100%;
            padding: 0;
        }
    }

    .admin-dashboard{
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        grid-template-areas: "sidebar main";
        height: calc(100vh - 80px);
    }

    .admin-sidebar{
        grid-area: sidebar;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 20px 16px 0;
        box-sizing: border-box;
        border-right: 1px solid var(--admin-border);
    }

    .admin-main{
        /* Top padding, also used to pin .admin-detail-sticky to the very top. */
        --main-pad-top: 40px;
        --main-pad-bottom: 80px;
        grid-area: main;
        min-width: 0;
        overflow-y: auto;
        padding: var(--main-pad-top) 48px var(--main-pad-bottom);
        box-sizing: border-box;
    }

    .admin-overview, .admin-detail-pane{
        max-width: 1000px;
        margin: 0 auto;
    }

    /* The open entry (ticket) reads better a little narrower than the overview. */
    .admin-detail-pane{
        max-width: 620px;
    }

    /* Toolbar stacked: search, then the filters. */
    .admin-sidebar .admin-toolbar{
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 14px;
    }

    .admin-sidebar .admin-filters{
        flex-direction: column-reverse;
    }

    .admin-sidebar .admin-search{
        max-width: none;
        flex: none;
    }

    .admin-sidebar .admin-load-error{
        margin-top: 12px;
    }

    .admin-sidebar .admin-product-filter{
        margin: 12px 0 0;
    }

    .admin-sidebar .admin-product-chip{
        flex: 1 1 calc(50% - 4px);
        padding: 6px 10px;
    }

    /* The list: the only part of the sidebar that scrolls. */
    .admin-list-scroll{
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        margin: 8px -16px 0;
        padding: 0 8px 24px;
    }

    .admin-sidebar .admin-empty{
        padding: 24px 8px;
    }

    /* Sidebar rows: name and tags, details line, then the date. */
    .admin-sidebar .admin-entry{
        border-bottom: none;
        border-radius: var(--admin-radius-sm);

        summary{
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            padding: 12px;
            border-radius: var(--admin-radius-sm);
        }

        /* Hover is a lighter grey than the selected row, so the two differ. */
        &:hover summary{
            background-color: color-mix(in srgb, var(--admin-surface) 55%, transparent);
        }

        &.admin-entry-selected summary{
            background-color: var(--admin-surface);
        }

        .admin-entry-title{
            font-size: 14px;
        }

        .admin-entry-meta{
            font-size: 12px;
        }

        .admin-entry-date{
            font-size: 11px;
        }

        .admin-chevron{
            display: none;
        }

        /* Entries open in the pane, never in the sidebar. */
        > :not(summary){
            display: none;
        }
    }

    .admin-sidebar .admin-entry + .admin-entry{
        margin-top: 2px;
    }

    /* The open entry in the pane: its summary becomes the heading. */
    /* Back button + name line, pinned to the top of the right-hand panel
       while the entry scrolls under it. Sticky offsets count from inside the
       scroll container's padding, so `top` cancels .admin-main's top padding
       to pin it flush with the top edge. The negative margin pulls it into
       that padding so it sits where it did before pinning. */
    .admin-detail-sticky{
        position: sticky;
        top: calc(-1 * var(--main-pad-top));
        z-index: 2;
        /* 24px wider each side so the ticket's shadow doesn't show beside it. */
        margin: -24px -24px 24px;
        padding: 24px 24px 18px;
        background-color: var(--admin-bg);
    }

    .admin-detail-head{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
    }

    /* Copy of the entry's summary line (see showEntry()). */
    .admin-detail-title{
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    /* The entry's own summary is replaced by the pinned copy above. */
    .admin-detail-body .admin-entry-full > summary{
        display: none;
    }

    .admin-detail-kind{
        font-size: 13px;
        color: var(--admin-subtle);
    }

    .admin-entry.admin-entry-full{
        border-bottom: none;

        summary{
            padding: 0 0 24px;
            cursor: default;
        }

        .admin-entry-title{
            font-size: 28px;
            font-weight: 600;
            letter-spacing: -0.02em;
            white-space: normal;
        }

        .admin-entry-heading{
            flex-wrap: wrap;
            gap: 10px;
        }

        .admin-entry-meta{
            font-size: 14px;
            white-space: normal;
        }

        .admin-entry-date{
            align-self: flex-start;
            margin-top: 10px;
        }

        .admin-chevron{
            display: none;
        }

        /* Completed entries stay readable here; only the list dims them. */
        &.admin-entry-done .admin-entry-title,
        &.admin-entry-done .admin-entry-meta{
            opacity: 1;
        }
    }

    .admin-entry-full .admin-actions{
        margin-top: 0;
    }
}

@media only screen and (min-width:751px) and (max-width:1100px){
    .admin-dashboard{
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .admin-main{
        --main-pad-top: 32px;
        --main-pad-bottom: 64px;
        padding: var(--main-pad-top) 28px var(--main-pad-bottom);
    }

    .admin-stats{
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-pipeline-stages{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Narrow desktop: the portfolio counters go 2 x 2, as on phones. */
@media only screen and (min-width:751px) and (max-width:1000px){
    .admin-portfolio-grid{
        grid-template-columns: 1fr 1fr;
    }

    .admin-portfolio-item{
        padding: 14px 16px;

        &:nth-child(odd){
            padding-left: 0;
            border-left: none;
        }

        &:nth-child(-n+2){
            padding-top: 0;
        }

        &:nth-child(n+3){
            border-top: 1px solid var(--admin-divider);
            padding-bottom: 0;
        }
    }
}


/* ===== INSTALLS (installations / serial numbers) ===== */

/* Users (body[data-role="user"]) have no overview dashboard; admin.js hides
   the pages they can't use (applyAccess()). */
body[data-role="user"] .admin-overview{
    display: none !important;
}

/* Sidebar: "Add installation", and for admins "Import from Google Sheet". */
.admin-install-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;

    .admin-action{
        height: 34px;
        font-size: 12px;
    }
}

/* "Add visit request" / "Add sign-up" and "Import from OpenSolar": stacked
   on desktop, side by side on phones, with the import status below them. */
.admin-entry-actions-row{
    display: contents;
}

@media only screen and (max-width:750px){
    .admin-entry-actions-row:has(> :not([hidden])){
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content));
        align-items: center;
        gap: 8px;
        margin-top: 14px;

        .admin-import-status{
            grid-column: 1 / -1;
        }

        > .admin-install-actions:not([hidden]){
            display: contents;
        }

        /* Tighter, and allowed to shrink (cutting the label short), so both
           fit side by side on small phones too. */
        .admin-action{
            flex: 0 1 auto;
            min-width: 0;
            gap: 4px;
            padding: 0 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.admin-import-status{
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-subtle);
}

/* Accounts (admins only): the Settings group, its tab and the overview tile. */
body:not([data-role="admin"]){
    .admin-nav-group[data-group="settings"], .admin-tab[data-tab="accounts"], .admin-stat-link{
        display: none !important;
    }
}

/* Accounts: one row per page with Off / View / Edit / Edit + delete. */
.admin-access{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    border: none;

    legend{
        margin-bottom: 8px;
        padding: 0;
        font-size: 12px;
        color: var(--admin-subtle);
    }

    .admin-serial-summary{
        grid-column: 1 / -1;
        margin: 0;
    }

    @media (max-width: 750px){
        grid-template-columns: 1fr;
    }
}

.admin-access-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--admin-subtle);

    .admin-select{
        width: 150px;
        flex: 0 0 auto;
        min-height: 38px;
        font-size: 14px;
    }

    /* A page that's on reads in full colour. */
    &.admin-access-on{
        color: var(--admin-text);
        font-weight: 500;
    }
}

/* The overview's "Staff accounts" tile opens the Accounts section. */
.admin-stat.admin-stat-link{
    border: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;

    .admin-stat-label{
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }

    .material-symbols-rounded{
        font-size: 16px;
    }

    &:hover{
        box-shadow: inset 0 0 0 1px var(--admin-border);
    }
}

/* An account's name and pages, above its ticket. */
.admin-account-editor{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 20px;
    margin: 4px 0 8px;

    .admin-actions{
        grid-column: 1 / -1;
        margin: 0 0 16px;
    }

    @media (max-width: 750px){
        grid-template-columns: 1fr;
    }
}

/* Wishlist: what the open items add up to, under "Add to wishlist". */
.admin-wish-total{
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-subtle);
}

/* Delete: red outline. */
.admin-action.admin-action-danger{
    border-color: color-mix(in srgb, var(--admin-error) 45%, transparent);
    color: var(--admin-error);

    &:hover{
        border-color: var(--admin-error);
    }
}

/* Edit / Delete above an install's ticket, right-aligned. */
.admin-actions.admin-install-entry-actions{
    justify-content: flex-end;
    margin: 4px 0 24px;
}

/* Add / edit form. */
.admin-install-form{
    margin-bottom: 24px;
}

.admin-install-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;

    .admin-install-wide{
        grid-column: 1 / -1;
    }

    /* MX2250, panel and battery serials: each set off by a divider. */
    .admin-install-section{
        padding-top: 32px;
        margin-top: 16px;
        border-top: 1px solid var(--admin-divider);

        /* Its heading as a solid tag (inverts in dark mode). */
        > .admin-label{
            align-self: flex-start;
            padding: 3px 7px;
            border-radius: var(--admin-radius-xs);
            background: var(--admin-text);
            color: var(--admin-bg);
            font-size: 12px;
        }
    }

    textarea{
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
        background-color: var(--admin-field);
        color: var(--admin-text);
        font-family: ui-monospace, Menlo, monospace;
        font-size: 14px;
        line-height: 1.5;
        resize: vertical;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus{
            border-color: var(--admin-accent);
            box-shadow: 0 0 0 3px rgba(125, 129, 135, 0.18);
        }

        &.invalid{
            border-color: var(--admin-error);
        }
    }
}

/* "4 MX2250 serials · not recognised: …" under each serial box. */
.admin-serial-summary{
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-subtle);
    overflow-wrap: anywhere;

    &.bad{
        color: var(--admin-error);
    }
}

/* Calculated capacity in the install form: "5.2 kWp · 8 panels × 650 W". */
.admin-capacity-value{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 4px;
    min-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-surface);
    font-size: 14px;
    color: var(--admin-subtle);

    strong{
        font-size: 16px;
        font-weight: 600;
        color: var(--admin-text);
    }
}

.admin-install-form-actions{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 24px;

    .admin-install-error{
        flex: 1 1 240px;
        margin: 0;
        text-align: right;
    }
}

@media only screen and (max-width:750px){
    /* Phones use the right-hand pane only for the install form and a just-
       saved installation: it sits at the top of the page, not pinned. */
    .admin-detail-pane{
        margin-bottom: 32px;
    }

    .admin-detail-head{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-bottom: 14px;
    }

    .admin-detail-kind{
        font-size: 13px;
        color: var(--admin-subtle);
    }

    .admin-detail-title{
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 20px;
        border-bottom: none;

        .admin-entry-title{
            font-size: 24px;
            font-weight: 600;
            letter-spacing: -0.02em;
            white-space: normal;
        }

        .admin-entry-heading{
            flex-wrap: wrap;
        }

        .admin-entry-meta{
            white-space: normal;
        }

        .admin-chevron{
            display: none;
        }
    }

    .admin-detail-body .admin-entry-full{
        border-bottom: none;

        > summary{
            display: none;
        }
    }

    .admin-install-grid{
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-install-form-actions .admin-install-error{
        text-align: left;
    }
}

/* ===== IMPORT FROM OPENSOLAR (review screen) ===== */

.admin-os-summary{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.admin-os-chip{
    padding: 6px 12px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-surface);
    font-size: 13px;
    color: var(--admin-muted);

    strong{
        color: var(--admin-text);
        font-weight: 600;
    }

    &.admin-os-new strong{ color: var(--admin-active-text); }
    &.admin-os-update strong, &.admin-os-match strong{ color: var(--admin-mark); }
}

.admin-os-heading{
    margin: 24px 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.admin-os-list{
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--admin-border);
}

.admin-os-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-os-name{
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
}

.admin-os-meta{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--admin-subtle);
    overflow-wrap: anywhere;
}

/* Match / new rows: the client, then its "Same client as…" picker. */
.admin-os-row-pick{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 8px 16px;

    .admin-os-pick{
        min-height: 36px;
        font-size: 13px;
    }
}

@media only screen and (max-width:750px){
    .admin-os-row-pick{
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-os-link{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 45%;
    font-size: 12px;
    color: var(--admin-muted);
    cursor: pointer;

    input{
        accent-color: var(--admin-mark);
    }
}

.admin-os-note{
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--admin-subtle);
}

body[data-role="user"] .admin-visit-actions{
    display: none !important;
}

/* ===== SERIAL QUICK ENTRY (install form) ===== */

/* Batch prefix, then one row per unit: prefix + last-4 box (or a full
   serial), and Add buttons. */
.admin-sn{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-sn-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 12px;
    color: var(--admin-subtle);

    .admin-sn-prefix{
        width: 22ch;
        min-height: 32px;
        padding: 0 8px;
        border: 1px dashed var(--admin-border);
        border-radius: var(--admin-radius-xs);
        background: none;
        color: var(--admin-text);
        font-family: ui-monospace, Menlo, monospace;
        font-size: 13px;
        outline: none;

        &:focus{ border-style: solid; border-color: var(--admin-accent); }
    }

    /* Batteries: the batch's model, which fills in its prefix. */
    .admin-sn-model{
        min-height: 32px;
        padding: 0 28px 0 10px;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
        background: var(--admin-bg);
        color: var(--admin-text);
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;

        &:focus{ outline: none; border-color: var(--admin-accent); }
    }
}

/* Under the battery serials: "1 MAU5000 Elite · 2 B5000 Elite", and an
   amber line for a setup that can't work as recorded. */
.admin-battery-note{
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;

    &:empty{ display: none; }

    .admin-battery-setup{
        color: var(--admin-text);
        font-weight: 500;
    }

    .admin-battery-warn{
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 10px;
        border-radius: var(--admin-radius-sm);
        background: var(--admin-warn-bg);
        color: var(--admin-warn-text);

        .material-symbols-rounded{ font-size: 16px; line-height: 18px; }
    }
}

.admin-sn-rows{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 6px 12px;
    margin: 0;
    padding: 0;
    list-style: none;

    &:empty{ display: none; }
}

.admin-sn-row{
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 14px;

    .admin-sn-num{
        flex-shrink: 0;
        width: 2ch;
        font-family: inter;
        font-size: 11px;
        color: var(--admin-subtle);
        text-align: right;
    }

    .admin-sn-fixed{
        color: var(--admin-subtle);
        letter-spacing: 0.02em;
    }

    input{
        min-height: 34px;
        padding: 0 8px;
        box-sizing: border-box;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius-sm);
        background-color: var(--admin-field);
        color: var(--admin-text);
        font: inherit;
        font-weight: 600;
        letter-spacing: 0.04em;
        outline: none;

        &:focus{ border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(125, 129, 135, 0.18); }
        &.short{ border-color: var(--admin-error); }
    }

    .admin-sn-last{ width: 7ch; text-transform: uppercase; }
    .admin-sn-full{ flex: 1; min-width: 0; text-transform: uppercase; }
}

.admin-sn-remove{
    flex-shrink: 0;
    display: flex;
    padding: 4px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-subtle);
    cursor: pointer;

    .material-symbols-rounded{ font-size: 16px; }
    &:hover{ color: var(--admin-error); background-color: var(--admin-surface); }
}

.admin-sn-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;

    .admin-action{
        height: 32px;
        font-size: 12px;
    }
}

/* Batches: each with its own prefix, rows and Add buttons; a second batch
   (another prefix) sits under a divider. */
.admin-sn-batches{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-sn-group{
    display: flex;
    flex-direction: column;
    gap: 8px;

    & + .admin-sn-group{
        padding-top: 14px;
        border-top: 1px dashed var(--admin-border);
    }
}

/* "Add another prefix" and "Paste full serials", under the batches. */
/* "Paste full serials": a text link. */
.admin-link-button{
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-mark);
    font-family: inter;
    font-size: 12px;
    cursor: pointer;

    &:hover{ text-decoration: underline; }
}

/* ===== EDIT DETAILS (visit requests, waitlist) ===== */

/* Dropdowns in the edit form, styled like text boxes. */
.admin-select{
    width: 100%;
    min-height: 44px;
    padding: 0 36px 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237D8187' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--admin-text);
    font-family: inter;
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;

    &:focus{
        border-color: var(--admin-accent);
        box-shadow: 0 0 0 3px rgba(125, 129, 135, 0.18);
    }
}

.admin-install-grid textarea[name="message"]{
    font-family: inter;
}

/* Attachments: saved and new files, each removable, then a drop zone with
   "Add files". The zone turns blue while files are dragged over it. */
.admin-edit-files{
    gap: 8px;
}

.admin-edit-drop{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 16px;
    border: 1.5px dashed var(--admin-border);
    border-radius: var(--admin-radius-md);
    font-size: 13px;
    color: var(--admin-subtle);
    transition: border-color 0.15s ease, background-color 0.15s ease;

    > .material-symbols-rounded{
        font-size: 22px;
    }

    .admin-action{
        height: 34px;
        font-size: 12px;
    }
}

.admin-edit-files.dragging .admin-edit-drop{
    border-color: var(--admin-mark);
    background-color: color-mix(in srgb, var(--admin-mark) 8%, transparent);
    color: var(--admin-mark);

    .admin-edit-drop-text{
        font-weight: 600;
    }
}

/* Touch screens can't drag files in: just the button. */
@media (hover: none){
    .admin-edit-drop-text{
        display: none;
    }
}

.admin-edit-file-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;

    &:empty{
        display: none;
    }
}

.admin-edit-file{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    font-size: 13px;

    > .material-symbols-rounded{
        flex-shrink: 0;
        font-size: 20px;
        color: var(--admin-subtle);
    }

    &.is-new{
        border-style: dashed;
        border-color: var(--admin-mark);
    }
}

.admin-edit-file-name{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-edit-file-detail{
    flex-shrink: 0;
    font-size: 12px;
    color: var(--admin-subtle);
}

.admin-edit-file-remove{
    flex-shrink: 0;
    display: flex;
    padding: 4px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-subtle);
    cursor: pointer;

    .material-symbols-rounded{ font-size: 18px; }

    &:hover{
        color: var(--admin-error);
        background-color: var(--admin-surface);
    }
}

/* ------------------------------------------------------------- mobile */

@media only screen and (max-width:750px){
    .admin-page{
        padding-top: 24px;
    }

    .admin-title{
        font-size: 26px;
    }

    .admin-stats{
        grid-template-columns: 1fr 1fr;
    }

    .admin-portfolio-grid{
        grid-template-columns: 1fr 1fr;
    }

    .admin-impact-grid .admin-portfolio-item{
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }

    .admin-product-chip{
        flex: 1 1 calc(50% - 4px);
    }

    .admin-portfolio-item{
        padding: 14px 16px;

        &:nth-child(odd){
            padding-left: 0;
            border-left: none;
        }

        &:nth-child(-n+2){
            padding-top: 0;
        }

        &:nth-child(n+3){
            border-top: 1px solid var(--admin-divider);
            padding-bottom: 0;
        }
    }

    /* Odd number of tiles: the last one spans the row. */
    .admin-stat:last-child:nth-child(odd){
        grid-column: 1 / -1;
    }

    /* nowrap: in a wrapping column, rows size to their content instead of
       the screen, which pushed the tabs and search box off the right edge. */
    .admin-toolbar{
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    /* Three tabs on narrow phones: tighter tabs, and the bar scrolls on its
       own (rather than widening the page) if large counts still don't fit. */
    .admin-tabs{
        overflow-x: auto;
        scrollbar-width: none;
    }

    .admin-tab{
        flex: 1 0 auto;
        padding: 0 8px;
        font-size: 12px;
    }

    .admin-search{
        max-width: none;
    }

    /* Search on its own row, then the stage and source / category dropdowns
       sharing the row below. They can't overflow the screen: each shrinks,
       cutting a long choice short with an ellipsis. */
    .admin-filters{
        flex-wrap: wrap;
        justify-content: stretch;

        .admin-search{
            order: -1;
            flex: 1 1 100%;
        }

        .admin-status-filter,
        .admin-source-filter,
        .admin-category-filter{
            flex: 1 1 0;
            min-width: 0;
            text-overflow: ellipsis;
        }
    }

    .admin-bar .admin-account-email{
        display: none;
    }

    .admin-entry .admin-entry-date{
        display: none;
    }

    .admin-details{
        grid-template-columns: 1fr;
    }

    .admin-ticket-stub{
        padding: 0 20px;
    }

    .admin-ticket-paper .admin-details{
        padding: 20px 20px calc(20px + var(--tear-h));
    }

    .admin-pipeline-stages{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-stage{
        font-size: 11px;
    }

    .admin-referral-people{
        padding-left: 0;
    }
}

/* ===== Installer checklist =====
   The Checklists page (the "installer checklist" section of admin.js and
   checklist-templates.js): the overview box here; the form, the read-only
   report and the printed report in the "Installer checklist form" block
   further down. Inventory reuses a few of these (section titles, intro text,
   the photo grid and error text). */

/* A small progress bar (overview cells). */
.admin-ck-minibar{
    flex: 0 0 auto;
    display: inline-block;
    width: 56px;
    height: 6px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-goal-track);
    overflow: hidden;

    i{
        display: block;
        height: 100%;
        border-radius: var(--admin-radius-pill);
        background-color: var(--admin-goal);
        transition: width 0.25s ease;
    }
}

/* Shared with the Inventory tab. */
.admin-ck-intro{
    margin: 14px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--admin-mark);
    border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
    background-color: var(--admin-surface);
    font-size: 13px;
    line-height: 1.5;
    color: var(--admin-muted);
}

.admin-ck-section-title{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-subtle);

    &::after{
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--admin-border);
    }
}

.admin-ck-error{
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--admin-error);

    &:empty{
        display: none;
    }
}

/* Photos: the attachment thumbnail grid, smaller, with a remove button. */
.admin-ck-photos{
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin: 0;

    &:empty{
        display: none;
    }

    li{
        position: relative;
    }
}

.admin-ck-photo{
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
    cursor: default;

    &.admin-ck-photo-broken{
        display: grid;
        place-items: center;

        img{
            display: none;
        }

        &::before{
            content: "image_not_supported";
            font-family: "Material Symbols Rounded";
            font-size: 24px;
            color: var(--admin-subtle);
        }
    }
}

.admin-ck-photo-remove{
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 16px;
    }
}

/* Overview: Inventory box, the installer's "Stock on hand" summary. On the
   box's grey background the plain tiles and restock rows are white. */
.admin-inventory-box{
    margin: 0 0 24px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);

    &[hidden]{
        display: none;
    }

    .admin-inv-home{
        padding-top: 14px;
    }

    .admin-inv-tile:not(.admin-inv-tile-low):not(.admin-inv-tile-out){
        background-color: var(--admin-bg);
    }
}

/* Overview: how far each job's checklists are. */
.admin-checklists{
    margin: 0 0 24px;
    padding: 20px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);

    &[hidden]{
        display: none;
    }
}

.admin-checklists-summary{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 14px;

    .admin-stat{
        padding: 16px;
        background-color: var(--admin-bg);
    }

    .admin-stat-value-small{
        font-size: 14px;
        line-height: 1.35;
        letter-spacing: 0;
    }
}

.admin-checklists-alert{
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-warn-bg);
    color: var(--admin-warn-text);
    font-size: 13px;
    line-height: 1.45;
}

.admin-checklists-table{
    margin-top: 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-bg);
    overflow: hidden;
}

.admin-checklists-row{
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 14px;

    & + &{
        border-top: 1px solid var(--admin-border);
    }
}

.admin-checklists-head{
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--admin-subtle);
}

.admin-checklists-job{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;

    strong{
        overflow: hidden;
        font-size: 13px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    span{
        overflow: hidden;
        font-size: 12px;
        color: var(--admin-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.admin-ck-cell{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;

    &:hover{
        background-color: var(--admin-surface);
    }
}

.admin-checklists-system{
    overflow: hidden;
    font-size: 12px;
    color: var(--admin-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media only screen and (max-width:750px){
    .admin-checklists-summary{
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-checklists-head{
        display: none;
    }

    .admin-checklists-row{
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
    }

    .admin-checklists-job, .admin-checklists-system{
        grid-column: 1 / -1;
    }
}


/* ===== Inventory =====
   The Inventory tab (installer and admins; the "inventory" section of
   admin.js): the stock panel on each item (count, Use / Add stock / Set count,
   a −/+ stepper and a preview of the new count), its photos and history, the
   add / edit form, the installer's "Stock on hand" home, and the sidebar's
   "Restock needed" filter. */

/* Sidebar: "Restock needed (n)" turns amber when something needs restocking,
   and solid while it's filtering the list. */
.admin-action.admin-low-filter{
    &.admin-low-filter-alert{
        border-color: color-mix(in srgb, var(--admin-warn-text) 45%, transparent);
        color: var(--admin-warn-text);
    }

    &[aria-pressed="true"]{
        border-color: var(--admin-warn-text);
        background-color: var(--admin-warn-bg);
        color: var(--admin-warn-text);
    }
}

/* Inventory list grouped by category: a heading per category with its item
   count and how many need restocking. On desktop it stays pinned at the top
   of the sidebar list while that category scrolls past. */
.admin-inv-group{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 0 8px;
    border-bottom: 1px solid var(--admin-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-subtle);

    &:first-child{
        padding-top: 4px;
    }
}

.admin-inv-group-count{
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.admin-inv-group-low{
    margin-left: auto;
    font-weight: 600;
    color: var(--admin-warn-text);
}

@media only screen and (min-width:751px){
    .admin-sidebar .admin-inv-group{
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -4px;
        padding-left: 4px;
        padding-right: 4px;
        border-bottom: none;
        background-color: var(--admin-bg);
    }
}

.admin-inv{
    display: grid;
    gap: 20px;
    padding-bottom: 8px;
}

.admin-inv-stock{
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-bg);
}

.admin-inv-top{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

.admin-inv-count{
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.admin-inv-qty{
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.admin-inv-unit{
    font-size: 16px;
    color: var(--admin-muted);
}

.admin-inv-state{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--admin-active-text);

    .admin-inv-state-dot{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: currentColor;
    }
}

.admin-inv-stock-low .admin-inv-state{
    color: var(--admin-warn-text);
}

.admin-inv-stock-out .admin-inv-state{
    color: var(--admin-stale-text);
}

/* Use / Add stock / Set count: a segmented control, like the checklist answers. */
.admin-inv-modes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 3px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-surface);
}

.admin-inv-mode{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 36px;
    padding: 0 8px;
    border: none;
    border-radius: var(--admin-radius-pill);
    background: none;
    color: var(--admin-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;

    .material-symbols-rounded{
        font-size: 18px;
    }

    &:hover{
        color: var(--admin-text);
    }

    &[aria-pressed="true"]{
        background-color: var(--admin-bg);
        color: var(--admin-text);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 2px;
    }
}

.admin-inv-steprow{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

/* − [n] +, iOS-style capsule. */
.admin-inv-stepper{
    display: inline-flex;
    align-items: center;
    height: 48px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-surface);
}

.admin-inv-step{
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: var(--admin-radius-pill);
    background: none;
    color: var(--admin-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    .material-symbols-rounded{
        font-size: 22px;
    }

    &:disabled{
        color: var(--admin-subtle);
        opacity: 0.5;
        cursor: default;
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: -2px;
    }
}

.admin-inv-amount{
    width: 72px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
        -webkit-appearance: none;
        margin: 0;
    }

    &:focus{
        outline: none;
        background-color: var(--admin-bg);
        box-shadow: 0 0 0 2px var(--admin-mark);
    }
}

.admin-inv-preview{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--admin-muted);
    font-variant-numeric: tabular-nums;

    .material-symbols-rounded{
        font-size: 18px;
    }

    strong{
        color: var(--admin-text);
        font-weight: 600;
    }

    .admin-inv-preview-bad{
        color: var(--admin-error);
    }
}

.admin-inv-field{
    &[hidden]{
        display: none;
    }

    input{
        border-radius: var(--admin-radius-sm);
        font-size: 15px;
    }
}

/* Instead of a save button: "Saving in a moment… Cancel", "Saving…",
   "Saved" or an error, under the controls. Holds its height so the panel
   doesn't jump. */
.admin-inv-autosave{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    margin: 0;
    font-size: 13px;
    color: var(--admin-muted);

    &[data-tone="wait"], &[data-tone="busy"]{
        color: var(--admin-mark);
    }

    &[data-tone="busy"] .admin-inv-autosave-text::before,
    &[data-tone="wait"] .admin-inv-autosave-text::before{
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 8px;
        border-radius: 50%;
        background-color: currentColor;
        vertical-align: 1px;
        animation: admin-inv-pulse 1s ease-in-out infinite;
    }

    &[data-tone="ok"]{
        color: var(--admin-active-text);
    }

    &[data-tone="ok"] .admin-inv-autosave-text::before{
        content: "check_circle";
        margin-right: 6px;
        font-family: "Material Symbols Rounded";
        font-size: 17px;
        vertical-align: -3px;
    }

    &[data-tone="error"]{
        color: var(--admin-error);
    }
}

.admin-inv-autosave-cancel{
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;

    &[hidden]{
        display: none;
    }
}

@keyframes admin-inv-pulse{
    50%{
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce){
    .admin-inv-autosave .admin-inv-autosave-text::before{
        animation: none !important;
    }
}

.admin-inv-stock .admin-ck-error{
    margin: 0;
}

/* The photo beside an item's name: in the list, the phone list and the open
   item's header. A box icon when there's no photo. */
.admin-inv-thumb{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background-color: var(--admin-surface);
    overflow: hidden;

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

    .material-symbols-rounded{
        font-size: 22px;
        color: var(--admin-subtle);
    }

    &.admin-inv-thumb-broken img{
        display: none;
    }
}

/* The desktop sidebar stacks a row's name over its date; inventory rows put
   the photo on the left of the name and count instead. */
.admin-sidebar .admin-entry.admin-inv-entry summary{
    flex-direction: row;
    align-items: center;
    gap: 12px;

    .admin-entry-date{
        display: none;
    }
}

/* Quick − count + on each list row (quickStepper() in admin.js). The count
   turns blue while taps are waiting to be saved. */
.admin-inv-quick{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 36px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-surface);
    cursor: default;
}

.admin-inv-quick-btn{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--admin-radius-pill);
    background: none;
    color: var(--admin-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.1s ease;

    .material-symbols-rounded{
        font-size: 20px;
    }

    &:hover{
        background-color: color-mix(in srgb, var(--admin-text) 8%, transparent);
    }

    &:active{
        transform: scale(0.9);
    }

    &:disabled{
        color: var(--admin-subtle);
        opacity: 0.45;
        cursor: default;

        &:hover{
            background: none;
        }
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: -2px;
    }
}

.admin-inv-quick-count{
    min-width: 30px;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease;
}

.admin-inv-quick.pending .admin-inv-quick-count{
    color: var(--admin-mark);
}

/* An item's Restock / Out of stock tag, on its own line under the count. */
.admin-inv-tagline{
    display: flex;
    margin-top: 2px;
}

/* The open item's header: a bigger photo. */
.admin-detail-title .admin-inv-thumb{
    width: 56px;
    height: 56px;
    border-radius: var(--admin-radius-xs);
}

/* The open item's photo, like a social media profile picture: a square photo
   with slightly rounded corners and a ring, beside the name and category (the stock panel below shows the
   status). */
.admin-inv-profile{
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
}

.admin-inv-avatar{
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    padding: 0;
    border: 4px solid var(--admin-bg);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-surface);
    box-shadow: 0 0 0 1px var(--admin-border), 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;

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

    &:hover{
        transform: scale(1.03);
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 3px;
    }

    &.loading img:not([src]), &.broken img{
        visibility: hidden;
    }

    &.broken::after{
        content: "image_not_supported";
        position: absolute;
        font-family: "Material Symbols Rounded";
        font-size: 28px;
        color: var(--admin-subtle);
    }

    /* No photo yet: a dashed box that opens the edit form. */
    &.admin-inv-avatar-empty{
        border: 1.5px dashed var(--admin-subtle);
        background: none;
        box-shadow: none;
        color: var(--admin-subtle);
        cursor: pointer;

        .material-symbols-rounded{
            font-size: 32px;
        }

        &:hover{
            color: var(--admin-text);
            border-color: var(--admin-text);
        }
    }
}

.admin-inv-profile-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.admin-inv-profile-name{
    max-width: 100%;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.admin-inv-profile-sub{
    font-size: 14px;
    color: var(--admin-muted);
}

.admin-inv-profile-hint{
    font-size: 12px;
    color: var(--admin-subtle);
}

.admin-inv-profile-photos{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-mark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 18px;
    }

    &:hover{
        text-decoration: underline;
    }
}

@media only screen and (max-width:750px){
    .admin-inv-thumb{
        width: 48px;
        height: 48px;
    }

    /* Bigger targets for thumbs. */
    .admin-inv-quick{
        height: 40px;
        border-radius: var(--admin-radius-pill);
    }

    .admin-inv-quick-btn{
        width: 40px;
        height: 40px;
        border-radius: var(--admin-radius-pill);
    }

    .admin-inv-avatar{
        width: 96px;
        height: 96px;
    }

    .admin-inv-profile-name{
        font-size: 20px;
    }
}

.admin-inv-photos{
    margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));

    .admin-thumb{
        aspect-ratio: 1 / 1;
        border-radius: var(--admin-radius-sm);
        overflow: hidden;
    }
}

.admin-inv .admin-details{
    margin: 0;
}

/* History: newest first, with the change on the right. */
.admin-inv-log{
    display: grid;
    gap: 0;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.admin-inv-log-row{
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--admin-border);

    &:last-child{
        border-bottom: none;
    }
}

.admin-inv-log-icon{
    font-size: 20px;
    color: var(--admin-active-text);
}

.admin-inv-log-down .admin-inv-log-icon{
    color: var(--admin-warn-text);
}

.admin-inv-log-line{
    font-size: 14px;
    line-height: 1.4;

    strong{
        font-weight: 600;
    }
}

.admin-inv-log-meta{
    margin-top: 2px;
    overflow: hidden;
    font-size: 12px;
    color: var(--admin-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-inv-log-note{
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-surface);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.admin-inv-log-change{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-variant-numeric: tabular-nums;

    strong{
        font-size: 15px;
        font-weight: 600;
        color: var(--admin-active-text);
    }

    span{
        font-size: 12px;
        color: var(--admin-muted);
        white-space: nowrap;
    }
}

.admin-inv-log-down .admin-inv-log-change strong{
    color: var(--admin-warn-text);
}

/* Add / edit form. */
.admin-inv-form{
    .admin-install-grid textarea{
        font-family: inherit;
        font-size: 15px;
    }

    /* "Add photo": a standard outlined button, under the thumbnails. */
    .admin-inv-add-photo{
        align-self: flex-start;
    }
}

/* Add item / Save changes on the left, Cancel on the right, the same width;
   any error sits on its own line above them. */
.admin-install-form-actions.admin-inv-form-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 12px;

    .admin-install-error{
        flex: 1 1 100%;
        text-align: left;

        &:empty{
            display: none;
        }
    }

    .admin-action{
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        height: 44px;
    }
}

.admin-inv-form-photos:empty{
    display: none;
}

/* The installer's "Stock on hand" home. */
.admin-inv-home{
    display: grid;
    gap: 18px;
    padding-top: 6px;

    .admin-ck-intro{
        margin: 0;
    }
}

.admin-inv-tiles{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.admin-inv-tile{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);

    &.admin-inv-tile-low{
        background-color: var(--admin-warn-bg);
        color: var(--admin-warn-text);
    }

    &.admin-inv-tile-out{
        background-color: var(--admin-stale-bg);
        color: var(--admin-stale-text);
    }
}

.admin-inv-tile-value{
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.admin-inv-tile-label{
    font-size: 12px;
    color: inherit;
    opacity: 0.8;
}

/* Inventory "System presets" pane: a card per system with its Use button and
   its parts (each linked to an inventory item), and what was just used, with
   Undo. Colours come from the admin tokens, so dark mode follows. */
.admin-presets-pane{
    display: grid;
    gap: 14px;
    padding-top: 6px;

    .admin-preset-status:empty{
        display: none;
    }
}

.admin-preset, .admin-preset-use{
    border: 1px solid var(--admin-border);
    background-color: var(--admin-bg);
}

.admin-preset.has-problem{
    border-color: var(--admin-warn-text);
}

.admin-preset-head, .admin-preset-use-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 14px;
}

/* A system's header is the summary of its fold-up card. */
.admin-preset-head{
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    &::-webkit-details-marker{
        display: none;
    }

    .admin-preset-title{
        flex: 1;
    }

    .admin-preset-chevron{
        color: var(--admin-muted);
        transition: transform 0.2s ease;
    }
}

.admin-preset[open] .admin-preset-chevron{
    transform: rotate(180deg);
}

.admin-preset-title, .admin-preset-use-title{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;

    strong{
        font-size: 16px;
        font-weight: 600;
    }

    span{
        font-size: 13px;
        color: var(--admin-muted);
    }

    .admin-preset-ok{
        color: var(--admin-active-text);
    }

    .admin-preset-warn{
        color: var(--admin-warn-text);
    }
}

.admin-preset-parts{
    border-top: 1px solid var(--admin-border);

    .admin-preset-parts-title{
        margin: 0;
        padding: 10px 14px 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--admin-muted);
    }
}

.admin-preset-lines{
    display: grid;
    margin: 0;
    padding: 0 14px 14px;
    list-style: none;
}

.admin-preset-line{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    align-items: center;
    gap: 8px 14px;
    padding: 10px 0;
    border-top: 1px solid var(--admin-border);

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

    .admin-preset-line-what{
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;

        strong{
            font-size: 14px;
            font-weight: 500;
        }

        span{
            font-size: 12px;
            color: var(--admin-muted);
        }
    }

    &.is-short .admin-preset-line-what span{
        color: var(--admin-stale-text);
    }

    &.is-unlinked .admin-preset-line-what span{
        color: var(--admin-warn-text);
    }

    .admin-preset-pick{
        min-height: 36px;
        font-size: 14px;
    }
}

.admin-preset-use.is-undone{
    opacity: 0.6;
}

.admin-preset-use-list{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0 14px 14px;
    list-style: none;

    li{
        padding: 3px 8px;
        border-radius: var(--admin-radius-sm);
        background-color: var(--admin-surface);
        font-size: 12px;
    }
}

@media (max-width: 750px){
    .admin-preset-line{
        grid-template-columns: 1fr;
    }

    /* Phones: name and chevron on the first row, the Use button below. */
    .admin-preset-head{
        .admin-preset-title{
            flex: 1 1 0;
        }

        .admin-action{
            order: 2;
            width: 100%;
            justify-content: center;
        }
    }
}

.admin-inv-restock-list{
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.admin-inv-restock-row{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--admin-border);
    border-radius: 0;
    background-color: var(--admin-bg);
    color: var(--admin-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;

    &:hover{
        border-color: var(--admin-subtle);
        background-color: var(--admin-surface);
    }

    > .material-symbols-rounded{
        color: var(--admin-subtle);
    }

    /* A straight coloured edge on the left. */
    &.admin-inv-restock-low, &.admin-inv-restock-out{
        border-left-width: 3px;
    }

    &.admin-inv-restock-low{
        border-left-color: var(--admin-warn-text);
    }

    &.admin-inv-restock-out{
        border-left-color: var(--admin-stale-text);
    }
}

.admin-inv-restock-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;

    strong{
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    span{
        font-size: 12px;
        color: var(--admin-muted);
    }
}

.admin-inv-restock-qty{
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.admin-inv-restock-low .admin-inv-restock-qty{
    color: var(--admin-warn-text);
}

.admin-inv-restock-out .admin-inv-restock-qty{
    color: var(--admin-stale-text);
}

@media only screen and (max-width:750px){
    .admin-inv-stock{
        padding: 16px 14px;
    }

    .admin-inv-mode{
        height: 40px;
        border-radius: var(--admin-radius-pill);
    }

    .admin-inv-modes{
        border-radius: var(--admin-radius-pill);
    }


    .admin-inv-tile{
        padding: 12px;
    }

    .admin-inv-tile-value{
        font-size: 24px;
    }
}

/* ===== Phone top bar and menu =====
   Matches the website's phone nav and menu (home page): a fixed 64px bar with
   the logo and a two-line burger that turns into an X, and a panel that opens
   behind the bar, extends down the screen, and fades in big 28px rows one by
   one, then a dark full-width button. The menu holds the account's tabs (the
   tab bar is hidden on phones) and Sign out. */
.admin-burger, .admin-menu{
    display: none;
}

@media only screen and (max-width:750px){
    html{
        /* Keeps scrollIntoView() targets clear of the fixed bar. */
        scroll-padding-top: calc(64px + env(safe-area-inset-top) + 12px);
    }

    .admin-bar{
        --bar-height: calc(64px + env(safe-area-inset-top));
        position: fixed;
        top: 0;
        left: 0;
        z-index: 110;
        width: 100%;
        height: var(--bar-height);
        box-sizing: border-box;
        padding: env(safe-area-inset-top) 20px 0;
        background-color: var(--admin-bg);

        .admin-account .admin-signout{
            display: none;
        }
    }

    .admin-page{
        padding-top: calc(64px + env(safe-area-inset-top) + 24px);
    }

    .admin-sidebar .admin-tabs{
        display: none;
    }

    .admin-bar .admin-burger{
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-burger-line{
        display: block;
        width: 20px;
        height: 1.5px;
        border-radius: 1px;
        background-color: #1A1A1A;
        transition: transform 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
    }

    .admin-burger.active{
        .admin-burger-line:nth-child(1){
            transform: translateY(3.75px) rotate(45deg);
        }

        .admin-burger-line:nth-child(2){
            transform: translateY(-3.75px) rotate(-45deg);
        }
    }

    body.admin-menu-open{
        overflow: hidden;
    }

    .admin-menu{
        --nav-height: calc(64px + env(safe-area-inset-top));
        --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);

        position: fixed;
        inset: 0;
        z-index: 100;
        display: block;
        background-color: #FFFFFF;
        color: #1A1A1A;
        font-family: inter;
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        clip-path: inset(0 0 calc(100% - var(--nav-height)) 0);
        transition: clip-path 0.45s var(--ease-panel) 0.12s, visibility 0s linear 0.57s;

        &.open{
            visibility: visible;
            clip-path: inset(0 0 0 0);
            transition: clip-path 0.5s var(--ease-panel), visibility 0s linear 0s;
        }
    }

    .admin-menu-inner{
        box-sizing: border-box;
        min-height: 100%;
        padding: calc(88px + env(safe-area-inset-top)) 24px 48px;
        display: flex;
        flex-direction: column;

        > *{
            opacity: 0;
            transform: translateY(-8px);
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
    }

    .admin-menu.open .admin-menu-inner > *{
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.4s ease, transform 0.4s var(--ease-panel);
    }

    .admin-menu.open .admin-menu-inner > :nth-child(1){ transition-delay: 0.18s; }
    .admin-menu.open .admin-menu-inner > :nth-child(2){ transition-delay: 0.23s; }
    .admin-menu.open .admin-menu-inner > :nth-child(3){ transition-delay: 0.28s; }

    @media (prefers-reduced-motion: reduce){
        .admin-menu, .admin-menu.open, .admin-menu-inner > *, .admin-menu.open .admin-menu-inner > *,
        .admin-burger-line{
            transition-duration: 0s !important;
            transition-delay: 0s !important;
        }
    }

    .admin-menu-heading{
        font-size: 12px;
        font-weight: 400;
        color: #7D8187;
    }

    .admin-menu-tabs{
        display: flex;
        flex-direction: column;
        margin-top: 6px;
    }

    .admin-menu-tab{
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 0;
        border: none;
        background: none;
        color: #7D8187;
        font-family: inherit;
        font-size: 28px;
        font-weight: 500;
        letter-spacing: -0.02em;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        .admin-menu-label{
            flex: 1;
            min-width: 0;
        }

        .admin-menu-count{
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0;
            color: #7D8187;
            font-variant-numeric: tabular-nums;
        }

        /* The open tab is dark, marked with a small blue dot (the website's accent). */
        .admin-menu-dot{
            flex: 0 0 auto;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--admin-mark);
            opacity: 0;
            transform: scale(0.4);
            transition: opacity 0.2s ease, transform 0.3s var(--ease-panel);
        }

        &.active{
            color: #1A1A1A;

            .admin-menu-dot{
                opacity: 1;
                transform: scale(1);
            }
        }
    }

    /* Admins have seven tabs: slightly smaller rows so they fit. */
    body[data-role="admin"] .admin-menu-tab{
        padding: 10px 0;
        font-size: 24px;
    }

    /* "Signed in as" and the email, centred above the Sign out button. */
    .admin-menu-foot{
        margin-top: auto;
        padding-top: 56px;
        display: grid;
        gap: 6px;
        text-align: center;
    }

    .admin-menu-email{
        overflow: hidden;
        font-size: 15px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-menu-signout{
        margin-top: 16px;
        height: 48px;
        border: none;
        border-radius: var(--admin-radius-sm);
        background-color: #1A1A1A;
        color: #FFFFFF;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Dark theme: the website's text colours (#EBEBEB / #9E9E9E). */
    @media (prefers-color-scheme: dark){
        /* The admin page's own dark surface, so the bar and menu blend into it. */
        .admin-menu{
            background-color: var(--admin-bg);
            color: #EBEBEB;
        }

        .admin-burger-line{
            background-color: #EBEBEB;
        }

        .admin-menu-tab{
            color: #9E9E9E;

            .admin-menu-count{
                color: #9E9E9E;
            }

            &.active{
                color: #EBEBEB;
            }
        }

        .admin-menu-signout{
            background-color: #EBEBEB;
            color: #0C0C0C;
        }
    }
}


/* Phones, admins: Overview is its own page (no list under it), picked from
   the burger menu; each section's page shows just its list. */
@media only screen and (max-width:750px){
    body[data-view="overview"] .admin-sidebar{
        display: none;
    }
}

/* ===== Navigation column (desktop) =====
   Like a macOS app's sidebar (e.g. Apple Music): the logo, Overview (admins),
   the tabs in two groups with small grey headings, each row an accent icon,
   its name and count, the open one on a soft rounded highlight, and the
   account at the bottom. Three columns: navigation, the list
   (.admin-sidebar, with the section's name on top), and the right-hand pane.
   On Overview the list column hides. Phones use the burger menu instead. */
.admin-nav, .admin-list-title, .admin-pane-empty{
    display: none;
}

@media only screen and (min-width:751px){
    /* No logo on desktop (the sign-in bar and the navigation); phones keep
       theirs in the top bar. */
    .admin-bar .admin-logo, .admin-nav-brand{
        display: none !important;
    }

    /* The navigation has the account, so the top bar goes. */
    body:has(.admin-dashboard:not([hidden])) .admin-bar{
        display: none;
    }

    /* Column widths: the navigation (--nav-w) and the list (--list-w). */
    .admin-dashboard{
        --nav-w: 232px;
        --list-w: 340px;
        grid-template-columns: var(--nav-w) var(--list-w) minmax(0, 1fr);
        grid-template-areas: "nav sidebar main";
        height: 100vh;
        height: 100dvh;
    }

    body:is([data-view="overview"], [data-view="settings"]) .admin-dashboard{
        grid-template-columns: var(--nav-w) minmax(0, 1fr);
        grid-template-areas: "nav main";

        .admin-sidebar{
            display: none;
        }
    }

    /* A container, so it shrinks to icons whenever its column is narrow (see
       "icons only" below): on narrow screens, or when collapsed. */
    .admin-nav{
        container: admin-nav / inline-size;
        grid-area: nav;
        min-height: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border-right: 1px solid var(--admin-border);
        background-color: var(--admin-surface);
        font-family: inter;
    }

    .admin-nav-brand{
        display: block;
        flex: 0 0 auto;
        padding: 28px 24px 60px;

        /* Scales with the column and keeps its proportions (the logo is about
           16.5:1, so a fixed height would squeeze it in a narrow column). */
        img{
            display: block;
            width: 100%;
            max-width: 200px;
            height: auto;
            filter: var(--admin-logo-filter);
        }
    }

    .admin-nav-scroll{
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 20px 12px 16px;
    }

    .admin-nav-heading{
        margin: 20px 0 6px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
        color: var(--admin-subtle);
    }

    /* The tabs, as navigation rows (more specific than .admin-tab's own rules). */
    .admin-nav .admin-tabs{
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .admin-nav .admin-tab, .admin-nav .admin-nav-item{
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 38px;
        padding: 0 12px;
        border: none;
        border-radius: var(--admin-radius-sm);
        background: none;
        box-shadow: none;
        color: var(--admin-text);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease;

        .admin-tab-icon{
            flex: 0 0 auto;
            font-size: 21px;
            /* The text colour: black (near-white in dark mode). */
            color: var(--admin-text);
        }

        .admin-tab-label{
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .admin-tab-count{
            margin: 0;
            font-size: 12px;
            font-weight: 500;
            color: var(--admin-subtle);
        }

        &:hover{
            background-color: color-mix(in srgb, var(--admin-text) 5%, transparent);
        }

        &:focus-visible{
            outline: 2px solid var(--admin-mark);
            outline-offset: -2px;
        }
    }

    /* The open section: a soft highlight and bold name. On Overview, no tab is. */
    .admin-nav .admin-nav-overview.active,
    body[data-view="list"] .admin-nav .admin-tab.active{
        background-color: color-mix(in srgb, var(--admin-text) 9%, transparent);
        font-weight: 600;
    }

    .admin-nav .admin-nav-overview{
        margin-bottom: 2px;
    }

    /* Overview is for admins; the installer has no Clients tabs. */
    body:not([data-role="admin"]) .admin-nav-overview{
        display: none;
    }

    /* "Collapse sidebar" (.admin-nav-collapse), above the account: shrinks the
       navigation to icons (body.admin-nav-collapsed, remembered per browser). */
    .admin-nav-foot{
        flex: 0 0 auto;
        padding: 0 12px 8px;
    }

    .admin-nav .admin-nav-collapse{
        color: var(--admin-muted);

        .admin-tab-icon{
            color: var(--admin-muted);
        }
    }

    body.admin-nav-collapsed .admin-dashboard{
        --nav-w: 64px;
    }

    /* The account, pinned at the bottom. */
    .admin-nav-account{
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px 18px 20px;
        border-top: 1px solid var(--admin-border);
    }

    /* The avatar, role and email: a button that opens Settings. */
    .admin-nav-profile{
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: -6px 0 -6px -8px;
        padding: 6px 8px;
        border: none;
        border-radius: var(--admin-radius-sm);
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;

        &:hover{
            background-color: color-mix(in srgb, var(--admin-text) 5%, transparent);
        }

        &.active{
            background-color: color-mix(in srgb, var(--admin-text) 9%, transparent);
        }

        &:focus-visible{
            outline: 2px solid var(--admin-mark);
            outline-offset: -2px;
        }
    }

    .admin-nav-avatar{
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(160deg, color-mix(in srgb, var(--admin-mark) 55%, #FFFFFF), var(--admin-mark));
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .admin-nav-who{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .admin-nav-role{
        font-size: 14px;
        font-weight: 600;
        color: var(--admin-text);
    }

    .admin-nav-email{
        overflow: hidden;
        font-size: 12px;
        color: var(--admin-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-nav-signout{
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: none;
        border-radius: var(--admin-radius-sm);
        background: none;
        color: var(--admin-muted);
        cursor: pointer;

        .material-symbols-rounded{
            font-size: 20px;
        }

        &:hover{
            background-color: color-mix(in srgb, var(--admin-text) 7%, transparent);
            color: var(--admin-text);
        }
    }

    /* The list column: the open section's name on top. */
    .admin-list-title{
        display: block;
        margin: 6px 0 14px;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--admin-text);
    }

    .admin-sidebar{
        padding-top: 22px;
        border-right: 1px solid var(--admin-border);
    }

    /* Nothing open in list view. */
    .admin-main:has(> .admin-overview[hidden]):has(> .admin-detail-pane[hidden]):has(> .admin-settings[hidden]) .admin-pane-empty{
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 10px;
        height: 100%;
        min-height: 300px;
        color: var(--admin-subtle);
        text-align: center;

        .material-symbols-rounded{
            font-size: 40px;
        }

        p{
            margin: 0;
            font-size: 14px;
        }
    }
}

@media only screen and (min-width:751px) and (max-width:1100px){
    .admin-dashboard{
        --nav-w: 200px;
        --list-w: 300px;
    }
}

/* Narrow desktop: the navigation is always icons, so there's nothing to collapse. */
@media only screen and (min-width:751px) and (max-width:900px){
    .admin-dashboard, body.admin-nav-collapsed .admin-dashboard{
        --nav-w: 64px;
        --list-w: 280px;
    }

    .admin-nav-foot{
        display: none;
    }
}

/* Icons only (names in tooltips): whenever the navigation column is narrow,
   on narrow desktops or when collapsed. */
@container admin-nav (max-width: 100px){
    .admin-nav-brand{
        padding: 24px 0 14px;
        overflow: hidden;

        img{
            width: 40px;
            height: auto;
            margin: 0 auto;
            object-fit: cover;
            object-position: left;
        }
    }

    .admin-nav-scroll{
        padding: 20px 8px 12px;
    }

    .admin-nav-foot{
        padding: 0 8px 8px;
    }

    .admin-nav-heading{
        height: 1px;
        margin: 12px 8px;
        padding: 0;
        overflow: hidden;
        background-color: var(--admin-border);
        color: transparent;
    }

    .admin-nav .admin-tab, .admin-nav .admin-nav-item{
        justify-content: center;
        padding: 0;

        .admin-tab-label, .admin-tab-count{
            display: none;
        }
    }

    .admin-nav-account{
        justify-content: center;
        padding: 12px 0 16px;

        .admin-nav-who, .admin-nav-signout{
            display: none;
        }
    }

    .admin-nav-profile{
        flex: 0 0 auto;
        margin: 0;
        padding: 4px;
        border-radius: 50%;
    }
}


/* ===== Settings (desktop) =====
   Opened by clicking the profile at the bottom of the navigation: the
   signed-in account with Sign out, then Accounts for owners, as rows like
   System Settings'. Laid out like the overview (no list column). */
.admin-settings{
    max-width: 520px;
    margin: 0 auto;
    font-family: inter;
}

.admin-settings[hidden]{
    display: none;
}

.admin-settings-card{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
}

.admin-settings-avatar{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(160deg, color-mix(in srgb, var(--admin-mark) 55%, #FFFFFF), var(--admin-mark));
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.admin-settings-who{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-settings-role{
    font-size: 17px;
    font-weight: 600;
    color: var(--admin-text);
}

.admin-settings-email{
    overflow: hidden;
    font-size: 14px;
    color: var(--admin-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-settings-group[hidden]{
    display: none;
}

.admin-settings-heading{
    margin: 32px 0 8px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-subtle);
}

.admin-settings-row{
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    background: none;
    color: var(--admin-text);
    font: inherit;
    text-align: left;
    cursor: pointer;

    &:hover{
        background-color: color-mix(in srgb, var(--admin-text) 5%, transparent);
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: -2px;
    }
}

.admin-settings-icon{
    flex: 0 0 auto;
    font-size: 24px;
}

.admin-settings-text{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-settings-name{
    font-size: 15px;
    font-weight: 600;
}

.admin-settings-desc{
    font-size: 13px;
    color: var(--admin-muted);
}

.admin-settings-count, .admin-settings-chevron{
    flex: 0 0 auto;
    color: var(--admin-subtle);
}

.admin-settings-count{
    font-size: 14px;
}

.admin-settings-home[hidden], .admin-settings-suppliers[hidden]{
    display: none;
}

/* Settings → Suppliers: a back link, then the supplier list, a supplier's
   profile (details and its items) or the add / edit form. */
.admin-settings-back{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px -6px;
    padding: 4px 8px 4px 2px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-mark);
    font: inherit;
    font-size: 14px;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 22px;
    }

    &:hover{
        background-color: color-mix(in srgb, var(--admin-text) 5%, transparent);
    }
}

.admin-settings-intro{
    margin: 8px 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--admin-muted);
}

.admin-suppliers-search{
    width: 100%;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    color: var(--admin-text);
    font-family: inter;
    font-size: 14px;
    outline: none;

    &:focus{
        border-color: var(--admin-accent);
    }
}

/* Supplier rows on the list are spaced settings rows. */
.admin-suppliers-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* Add supplier / Edit / Delete beside the page title. */
.admin-supplier-tools{
    display: flex;
    gap: 8px;
}

.admin-supplier-error:empty{
    display: none;
}

/* A supplier's details. */
.admin-supplier-profile{
    margin-top: 20px;
    padding: 4px 20px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
}

/* The supplier's items: one row each, with an x to unlink. */
.admin-supplier-items{
    border-top: 1px solid var(--admin-border);

    .admin-empty{
        margin: 12px 0;
    }
}

.admin-supplier-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-supplier-item{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-supplier-name{
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: var(--admin-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-supplier-meta{
    font-size: 12px;
    color: var(--admin-muted);
}

.admin-supplier-unlink{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-muted);
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 18px;
    }

    &:hover{
        background-color: color-mix(in srgb, var(--admin-text) 7%, transparent);
        color: var(--admin-text);
    }
}

.admin-supplier-link{
    width: 100%;
    margin-top: 12px;
}

.admin-supplier-form{
    margin-top: 20px;
}

/* The form's "Products from this supplier": a search box over a scrolling
   tick list of inventory items, by category. */
.admin-supplier-products{
    .admin-suppliers-search{
        margin: 6px 0 8px;
    }
}

.admin-supplier-picks{
    max-height: 320px;
    overflow-y: auto;
    padding: 0 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);

    .admin-empty{
        margin: 12px 0;
    }
}

.admin-supplier-pick-group{
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 0 4px;
    background-color: var(--admin-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-subtle);
}

.admin-supplier-pick{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--admin-border);
    cursor: pointer;

    input{
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--admin-mark);
        cursor: pointer;
    }
}

.admin-supplier-pick-group + .admin-supplier-pick{
    border-top: none;
}


/* ===== Overview on phones =====
   Desktop is unchanged (these pieces are hidden there). On phones: "Needs
   attention" on top, sections that fold to a head with a one-line summary
   (data-collapse, .admin-folded), Portfolio and Customer impact as one card,
   the stat tiles as a row of chips you can swipe, the Pipeline as rows with
   empty stages hidden, and long lists cut to 3 rows with "Show all". */
.admin-attention, .admin-sec-sum, .admin-sec-chevron,
.admin-portfolio-savings, .admin-show-all{
    display: none;
}

@media only screen and (max-width:750px){
    /* Covered by "Needs attention", or folded into the portfolio card. */
    .admin-stale, .admin-checklists-alert, .admin-impact{
        display: none !important;
    }

    /* ---- Needs attention */
    .admin-attention:not([hidden]){
        display: block;
        margin: 16px 0;
        padding: 14px 14px 6px;
        border-radius: var(--admin-radius-md);
        background-color: var(--admin-warn-bg);
    }

    .admin-attention-title{
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--admin-warn-text);

        .material-symbols-rounded{
            font-size: 20px;
        }
    }

    .admin-attention-list{
        margin: 0;
        padding: 0;
        list-style: none;

        li + li{
            border-top: 1px solid color-mix(in srgb, var(--admin-warn-text) 18%, transparent);
        }
    }

    .admin-attention-item{
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 8px 0;
        border: none;
        background: none;
        color: var(--admin-text);
        font-family: inherit;
        font-size: 14px;
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-attention-icon{
        flex: 0 0 auto;
        font-size: 20px;
        color: var(--admin-warn-text);
    }

    .admin-attention-stale .admin-attention-icon{
        color: var(--admin-stale-text);
    }

    .admin-attention-text{
        flex: 1;
        min-width: 0;
    }

    .admin-attention-go{
        flex: 0 0 auto;
        color: var(--admin-subtle);
    }

    /* ---- Folding sections: the head is the toggle */
    [data-collapse] > .admin-portfolio-head{
        flex-wrap: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        .admin-portfolio-title{
            flex: 0 0 auto;
        }

        /* The desktop hints and live status make way for the summary. */
        .admin-pipeline-hint, .admin-portfolio-status{
            display: none;
        }

        .admin-sec-sum{
            display: block;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            font-size: 13px;
            color: var(--admin-muted);
            text-align: right;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .admin-sec-chevron{
            display: block;
            flex: 0 0 auto;
            margin-left: -6px;
            color: var(--admin-subtle);
            transition: transform 0.2s ease;
        }

        &:focus-visible{
            outline: 2px solid var(--admin-mark);
            outline-offset: 4px;
            border-radius: var(--admin-radius-xs);
        }
    }

    [data-collapse]:not(.admin-folded) > .admin-portfolio-head .admin-sec-chevron{
        transform: rotate(180deg);
    }

    /* Folded: just the head (the portfolio keeps its 2 headline numbers, goal
       and savings line, see below). */
    [data-collapse].admin-folded:not(.admin-portfolio) > :not(.admin-portfolio-head){
        display: none !important;
    }

    [data-collapse].admin-folded > .admin-portfolio-head{
        margin-bottom: 0;
    }

    /* ---- Portfolio + Customer impact, one card */
    .admin-portfolio.admin-folded{
        > .admin-portfolio-head{
            margin-bottom: 14px;
        }

        /* Two headline numbers: MX2250s installed and total kWp. */
        .admin-portfolio-item:nth-child(2), .admin-portfolio-item:nth-child(3){
            display: none;
        }

        .admin-portfolio-item:nth-child(4){
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 16px;
            border-top: none;
            border-left: 1px solid var(--admin-divider);
        }

    }

    /* Its numbers are always in view, so its head needs no summary. */
    .admin-portfolio .admin-sec-sum{
        visibility: hidden;
    }

    .admin-portfolio-savings{
        display: block;
        margin: 12px 0 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--admin-muted);

        strong{
            color: var(--admin-text);
            font-weight: 600;
        }
    }

    /* ---- Stat tiles: one row of chips you can swipe */
    .admin-overview .admin-stats{
        display: flex;
        gap: 8px;
        margin: 12px 0 16px;
        padding: 0 0 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;

        &::-webkit-scrollbar{
            display: none;
        }
    }

    .admin-overview .admin-stat{
        flex: 0 0 auto;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        padding: 8px 14px;
        border-radius: var(--admin-radius-pill);
        scroll-snap-align: start;

        .admin-stat-value{
            font-size: 16px;
        }

        .admin-stat-label{
            font-size: 12px;
            white-space: nowrap;
        }
    }

    /* ---- Pipeline: one row per stage, empty stages hidden */
    .admin-pipeline-stages{
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: var(--admin-radius-md);
        background-color: var(--admin-bg);
        overflow: hidden;
    }

    .admin-pipeline-stage{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2px 12px;
        padding: 12px 14px;
        border: none;
        border-radius: 0;

        & + .admin-pipeline-stage{
            border-top: 1px solid var(--admin-border);
        }

        &.admin-pipeline-empty{
            display: none;
        }

        .admin-pipeline-label{
            grid-row: 1;
            grid-column: 1;
            font-size: 14px;
            color: var(--admin-text);
        }

        .admin-pipeline-count{
            grid-row: 1;
            grid-column: 2;
            font-size: 16px;
        }

        .admin-pipeline-note{
            grid-column: 1 / -1;
        }

        /* The share bar becomes a thin line under the row. */
        .admin-pipeline-bar{
            grid-column: 1 / -1;
            height: 3px;
            margin-top: 4px;
        }
    }

    /* ---- Long lists: 3 rows, then "Show all" */
    :not(.admin-showing-all) > .admin-cap-hide{
        display: none !important;
    }

    .admin-show-all{
        display: block;
        width: 100%;
        margin-top: 8px;
        padding: 10px 0;
        border: none;
        background: none;
        color: var(--admin-mark);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }
}

/* A waitlist sign-up added by hand: its order (system, units, batteries)
   above the contact fields, with the running estimate under them. */
.admin-waitlist-order{
    gap: 10px;
    padding: 16px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);
}

.admin-waitlist-order-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media only screen and (max-width:750px){
    .admin-waitlist-order-row{
        grid-template-columns: 1fr;
    }
}



/* ===== Installer checklist form =====
   One checklist per job (the "installer checklist" section of admin.js): the
   job's details, the Site inspection / Commissioning tabs, the items, and a
   Save bar pinned to the bottom. Then the read-only report (View access) and
   the printed report. Colours come from the admin tokens, so dark mode
   follows. */
.admin-ck-form{
    display: grid;
    gap: 18px;
    padding-top: 4px;
}

.admin-ck-job{
    padding: 18px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
}

.admin-ck-heading{
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-subtle);
}

/* Client name, with suggestions from Ocular Visits under it. */
.admin-ck-name{
    position: relative;
}

.admin-ck-suggest{
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 6;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.admin-ck-suggestion{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;

    &:hover, &:focus-visible{
        outline: none;
        background-color: var(--admin-surface);
    }

    .admin-badge{
        flex: 0 0 auto;
    }
}

.admin-ck-suggestion-info{
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;

    strong{
        font-size: 14px;
        font-weight: 600;
    }

    span{
        overflow: hidden;
        font-size: 12px;
        color: var(--admin-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.admin-ck-linked{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--admin-active-text);

    .material-symbols-rounded{
        font-size: 16px;
    }
}

.admin-ck-unlink{
    padding: 0;
    border: none;
    background: none;
    color: var(--admin-muted);
    font-family: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* System type: a segmented control. */
.admin-ck-systems{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border-radius: var(--admin-radius-md);
    background-color: var(--admin-surface);
}

.admin-ck-system{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 46px;
    padding: 6px 8px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: none;
    color: var(--admin-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover{
        color: var(--admin-text);
    }

    &[aria-checked="true"]{
        background-color: var(--admin-bg);
        color: var(--admin-text);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 2px;
    }
}

.admin-ck-system-soon{
    font-size: 10px;
    font-weight: 500;
    color: var(--admin-subtle);
}

/* Site inspection / Commissioning. */
.admin-ck-tabs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-ck-tab{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-md);
    background: none;
    color: var(--admin-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    .material-symbols-rounded{
        font-size: 20px;
    }

    &:hover{
        color: var(--admin-text);
    }

    &[aria-selected="true"]{
        border-color: var(--admin-text);
        box-shadow: inset 0 0 0 1px var(--admin-text);
        color: var(--admin-text);
        font-weight: 600;
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 2px;
    }
}

.admin-ck-tab-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ck-tab-count{
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--admin-radius-pill);
    background-color: var(--admin-surface);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;

    &:empty{
        display: none;
    }
}

.admin-ck-tab-done .admin-ck-tab-count{
    background-color: var(--admin-active-bg);
    color: var(--admin-active-text);
}

/* Items: a flat list like Apple Reminders. A hollow circle that fills in
   once the item is done, the item's text beside it with its hint underneath,
   any answer controls lined up under the text, and a hairline between items
   that starts where the text does. */
.admin-ck-panel{
    display: grid;
    gap: 0;
    padding: 0 0 0 4px;
}

.admin-ck-item{
    --ck-indent: 36px;
    position: relative;
    display: grid;
    gap: 10px;
    padding: 13px 0 14px;
    background: none;

    /* The answer controls sit under the text, not under the circle. */
    > :not(.admin-ck-item-head){
        margin-left: var(--ck-indent);
    }

    &::after{
        content: "";
        position: absolute;
        left: var(--ck-indent);
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: var(--admin-border);
    }

    &:last-child::after{
        display: none;
    }
}

/* When Note is an item's only button (ticks, typed answers), it sits at the
   right end of the item's first line instead of on a line of its own. */
.admin-ck-item:has(> .admin-ck-tools > .admin-ck-tool:only-child){
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;

    > *{
        grid-column: 1 / -1;
    }

    > .admin-ck-item-head{
        grid-column: 1;
        grid-row: 1;
    }

    > .admin-ck-tools{
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: -5px 0 0;
    }
}

.admin-ck-item-head{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.admin-ck-tick{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 1.5px solid var(--admin-tick-ring);
    border-radius: 50%;
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;

    .material-symbols-rounded{
        font-size: 15px;
        font-weight: 700;
    }
}

.admin-ck-item[data-done="true"] .admin-ck-tick{
    border-color: var(--admin-mark);
    background-color: var(--admin-mark);
    color: #FFFFFF;
}

.admin-ck-label{
    min-width: 0;
    padding-top: 1px;
}

.admin-ck-text{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.admin-ck-hint{
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--admin-muted);
}

/* A tick item: the whole line is the button. */
.admin-ck-check{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 4px;
        border-radius: var(--admin-radius-xs);
    }
}

.admin-ck-input{
    box-sizing: border-box;
    width: 100%;
    max-width: 340px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    color: var(--admin-text);
    font-family: inter;
    font-size: 16px;

    &:focus{
        outline: none;
        border-color: var(--admin-accent);
    }
}

/* A typed answer directly in an item fills the space after the indent. */
.admin-ck-item > .admin-ck-input{
    justify-self: stretch;
    width: auto;
    min-width: 0;
}

/* AC and DC cable lengths. */
.admin-ck-lengths{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.admin-ck-length{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 200px;

    .admin-ck-input{
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
}

.admin-ck-length-key{
    flex: 0 0 24px;
    font-size: 12px;
    font-weight: 600;
    color: var(--admin-subtle);
}

.admin-ck-length-unit{
    font-size: 13px;
    color: var(--admin-muted);
}

/* Set answers (e.g. shading): pills. */
.admin-ck-choices{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-ck-choice{
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-pill);
    background: none;
    color: var(--admin-text);
    font-family: inter;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    &[aria-checked="true"]{
        border-color: var(--admin-mark);
        background-color: var(--admin-mark);
        color: #FFFFFF;
    }

    &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 2px;
    }
}

/* Add photo / Add screenshot: a small blue tinted pill. Import from Ocular
   Visit and Note: quiet text buttons. */
.admin-ck-tools{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-ck-tool{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: var(--admin-radius-pill);
    background: none;
    color: var(--admin-muted);
    font-family: inter;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    .material-symbols-rounded{
        font-size: 17px;
        color: var(--admin-subtle);
    }

    &:hover{
        background-color: var(--admin-surface);
        color: var(--admin-text);
    }

    &:focus-within, &:focus-visible{
        outline: 2px solid var(--admin-mark);
        outline-offset: 2px;
    }

    /* The item's answer (Add photo / Add screenshot): blue. */
    &.admin-ck-tool-main{
        padding: 0 12px;
        background-color: var(--admin-mark-tint);
        color: var(--admin-mark);

        .material-symbols-rounded{
            color: inherit;
        }

        &:hover{
            background-color: var(--admin-mark-tint-hover);
        }
    }
}

.admin-ck-note{
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background-color: var(--admin-field);
    color: var(--admin-text);
    font-family: inter;
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;

    &:focus{
        outline: none;
        border-color: var(--admin-accent);
    }
}

.admin-ck-form .admin-ck-photo{
    cursor: zoom-in;
}

/* A PDF linked from the visit request: a tile that opens the file; anything
   linked rather than uploaded here gets a small "From visit" tag. */
.admin-ck-photo.admin-ck-photo-pdf{
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    background-color: var(--admin-surface);
    color: var(--admin-error);
    text-decoration: none;
    cursor: pointer;

    .material-symbols-rounded{
        font-size: 30px;
    }
}

.admin-ck-photo-label{
    font-size: 11px;
    font-weight: 600;
    color: var(--admin-muted);
}

.admin-ck-photo-linked{
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: var(--admin-radius-xs);
    background-color: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}

/* MAU5000 Elite / MSU4000 Elite, until their checklists exist. */
.admin-ck-soon{
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 32px 20px;
    border: 1px dashed var(--admin-border);
    border-radius: var(--admin-radius-md);
    color: var(--admin-muted);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;

    .material-symbols-rounded{
        font-size: 32px;
        color: var(--admin-subtle);
    }

    strong{
        font-size: 15px;
        color: var(--admin-text);
    }
}

/* Save bar, pinned to the bottom while the checklist scrolls. Sticky offsets
   count from inside the scroll container's padding, so on desktop it cancels
   --main-pad-bottom (like the pane header's --main-pad-top). */
.admin-ck-bar{
    position: sticky;
    bottom: calc(-1 * var(--main-pad-bottom, 0px));
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--admin-border);
    background-color: var(--admin-bg);
}

.admin-ck-bar-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;

    .admin-action-error:empty{
        display: none;
    }
}

.admin-ck-status{
    font-size: 13px;
    color: var(--admin-muted);

    &[data-state="dirty"]{
        color: var(--admin-warn-text);
        font-weight: 500;
    }

    &[data-state="ok"]{
        color: var(--admin-active-text);
    }
}

.admin-ck-bar-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .admin-action{
        height: 40px;
        padding: 0 16px;

        &:disabled{
            opacity: 0.45;
            cursor: not-allowed;
        }
    }

    .admin-action-primary{
        min-width: 110px;
        justify-content: center;
    }
}

.admin-ck-delete{
    display: contents;
}

/* The read-only report (View access). */
.admin-ck-report{
    display: grid;
    gap: 18px;

    .admin-details{
        margin: 0;
    }
}

.admin-ck-report-tab{
    display: grid;
    gap: 0;
}

.admin-ck-report-title{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-subtle);
}

.admin-ck-report-answer, .admin-ck-report-note, .admin-ck-report .admin-attachment-grid{
    margin-top: 0;
    margin-bottom: 0;
}

.admin-ck-report-answer{
    font-size: 13px;
}

.admin-ck-item[data-done="false"] .admin-ck-report-answer{
    color: var(--admin-subtle);
}

.admin-ck-report-note{
    font-size: 13px;
    line-height: 1.45;
    color: var(--admin-muted);
    white-space: pre-wrap;
}

.admin-ck-report .admin-attachment-grid{
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

@media only screen and (max-width:750px){
    .admin-ck-job{
        padding: 14px;
    }

    .admin-ck-system{
        font-size: 12px;
    }

    /* Two tabs side by side: no icons, so the names fit. */
    .admin-ck-tab{
        padding: 0 10px;

        > .material-symbols-rounded{
            display: none;
        }
    }

    .admin-ck-tool{
        height: 36px;
    }

    .admin-ck-length{
        flex: 1 1 130px;
    }

    /* Print, Delete and Save share one row. */
    .admin-ck-bar{
        padding-top: 10px;
    }

    .admin-ck-bar-buttons{
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;

        .admin-action{
            flex: 1 1 0;
            min-width: 0;
            padding: 0 8px;
            justify-content: center;
        }
    }
}

/* The printed report (Print report, printChecklist() in admin.js): only it
   prints, black on white whatever the colour scheme. */
.admin-print{
    display: none;
}

@media print{
    @page{
        size: A4;
        margin: 14mm 15mm;
    }

    body > :not(.admin-print){
        display: none !important;
    }

    body{
        background: #FFFFFF !important;
    }

    .admin-print{
        display: block;
        color: #111111;
        font-family: inter, Arial, sans-serif;
        font-size: 10.5pt;
        line-height: 1.4;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

.admin-print-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #DDDDDD;
}

.admin-print-logo{
    width: auto;
    height: 11px;
}

.admin-print-ref{
    font-size: 8pt;
    color: #777777;
}

.admin-print-title{
    margin: 16px 0 10px;
    font-size: 15pt;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The job: two columns of label over value, in a light box. */
.admin-print-facts{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #E2E2E2;
    border-radius: 6px;
    background-color: #F7F7F8;
    break-inside: avoid;

    dt{
        font-size: 7.5pt;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #777777;
    }

    dd{
        margin: 1px 0 0;
        font-size: 9.5pt;
        font-weight: 500;
    }
}

.admin-print-fact-wide{
    grid-column: 1 / -1;
}

.admin-print-section{
    margin-top: 18px;

    h2{
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding-bottom: 5px;
        border-bottom: 1.5px solid #111111;
        font-size: 11pt;
        font-weight: 700;
        break-after: avoid;
    }
}

.admin-print-count{
    font-size: 8.5pt;
    font-weight: 500;
    color: #666666;
}

/* One item: mark, text and answer on a line; note and photos underneath,
   lined up with the text. */
.admin-print-item{
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid #EBEBEB;
    font-size: 9.5pt;
    break-inside: avoid;
}

.admin-print-mark{
    font-weight: 700;
    color: #AAAAAA;
}

.admin-print-item[data-done="true"] .admin-print-mark{
    color: #18794E;
}

.admin-print-text{
    font-weight: 500;
}

.admin-print-answer{
    max-width: 260px;
    text-align: right;
    font-weight: 500;
}

.admin-print-item[data-done="false"] .admin-print-answer{
    font-weight: 400;
    color: #999999;
}

.admin-print-note, .admin-print-photos{
    grid-column: 2 / -1;
}

.admin-print-note{
    margin-top: 3px;
    font-size: 8.5pt;
    color: #555555;
    white-space: pre-wrap;
}

/* Photos: five to a row, all the same size. */
.admin-print-photos{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 6px;

    img{
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        border: 1px solid #E2E2E2;
        border-radius: 4px;
        object-fit: cover;
    }
}

.admin-print-file{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    background-color: #F7F7F8;
    font-size: 7.5pt;
    color: #555555;
    overflow-wrap: anywhere;

    strong{
        font-size: 9pt;
        color: #B42318;
    }
}

.admin-print-soon{
    margin-top: 18px;
    color: #555555;
}

.admin-print-foot{
    margin-top: 16px;
    font-size: 7.5pt;
    color: #999999;
    text-align: center;
}