:root {
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    color: #222222;
    background: #f2f2f2;
    --iaa-red: #c90107;
    --iaa-red-dark: #a20106;
    --iaa-red-light: #f2dede;
    --black: #222222;
    --charcoal: #434343;
    --grey-600: #666666;
    --grey-400: #999999;
    --grey-300: #cccccc;
    --grey-200: #e8e8e8;
    --grey-100: #f2f2f2;
    --white: #ffffff;
    --success: #238723;
    --success-dark: #196119;
    --success-light: #deedde;
    --warning: #ffbf00;
    --focus: #00838f;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--grey-100);
    color: var(--black);
}

button, input, select { font: inherit; }
button { border: 0; }

.app-header {
    background: var(--white);
    border-bottom: 4px solid var(--iaa-red);
    box-shadow: 0 1px 5px rgba(34, 34, 34, .14);
}

.header-inner,
.page-shell,
.app-footer {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo {
    display: block;
    width: 86px;
    height: auto;
    flex: 0 0 auto;
}

.brand-divider {
    height: 36px;
    width: 1px;
    background: var(--grey-300);
}

.product-name {
    font-family: "Roboto Condensed", Roboto, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.15;
}

.product-subtitle {
    color: var(--grey-600);
    font-size: .78rem;
    margin-top: 3px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 2px;
    background: var(--grey-200);
    color: var(--charcoal);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.status-badge.online {
    background: var(--success-light);
    color: var(--success-dark);
}

.page-shell { padding: 38px 0 64px; }

.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

h1, h2, p { margin-top: 0; }

h1 {
    margin-bottom: 8px;
    font-family: "Roboto Condensed", Roboto, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

h2 {
    margin-bottom: 0;
    font-family: "Roboto Condensed", Roboto, sans-serif;
    font-size: 1.45rem;
    line-height: 1.2;
}

.eyebrow,
.step-label {
    margin-bottom: 7px;
    color: var(--iaa-red);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.intro-copy {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--grey-600);
    font-size: 1rem;
    line-height: 1.55;
}

.panel {
    margin-top: 20px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    box-shadow: 0 2px 7px rgba(34, 34, 34, .08);
}

.panel-heading {
    min-height: 86px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--grey-200);
}

.compact-heading { min-height: 76px; }

.heading-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.step-number {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    background: var(--black);
    color: var(--white);
    border-radius: 50%;
    font-weight: 700;
}

.setup-grid {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.field {
    display: grid;
    gap: 8px;
    color: var(--charcoal);
    font-size: .88rem;
    font-weight: 700;
}

input,
select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--grey-400);
    border-radius: 2px;
    background: var(--white);
    color: var(--black);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder { color: var(--grey-400); }

input:hover,
select:hover { border-color: var(--charcoal); }

input:focus,
select:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 2px rgba(0, 131, 143, .2);
}

.button {
    min-height: 44px;
    padding: 11px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 2px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, transform .05s ease;
}

.button:active { transform: translateY(1px); }

.button-primary {
    background: var(--iaa-red);
    color: var(--white);
}

.button-primary:hover { background: var(--iaa-red-dark); }
.button-primary:focus-visible { outline: 3px solid rgba(0, 131, 143, .35); outline-offset: 2px; }
.button-primary:disabled { background: var(--grey-400); cursor: wait; transform: none; }
.button-icon { font-size: .72rem; }

.camera-grid {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.camera-card {
    overflow: hidden;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    background: var(--white);
}

.camera-card.wide {
    width: calc(100% - 48px);
    margin: 24px;
}

.camera-title,
.capture-result {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.camera-title {
    min-height: 62px;
    border-bottom: 1px solid var(--grey-200);
}

.camera-title strong {
    display: block;
    font-size: .98rem;
}

.camera-position {
    display: block;
    margin-top: 3px;
    color: var(--grey-600);
    font-size: .75rem;
}

.camera-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success-dark);
    font-size: .75rem;
    font-weight: 700;
}

.state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

.preview-frame {
    position: relative;
    background: #111111;
}

.preview {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    background: #111111;
}

.preview.theta {
    height: 230px;
    object-fit: cover;
}

.live-label {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    background: rgba(34, 34, 34, .84);
    color: var(--white);
    border-left: 3px solid var(--iaa-red);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.capture-result {
    min-height: 46px;
    color: var(--grey-600);
    background: #fafafa;
    border-top: 1px solid var(--grey-200);
    font-size: .82rem;
}

.capture-result a {
    color: var(--iaa-red-dark);
    font-weight: 700;
    text-decoration: none;
}

.capture-result a:hover { text-decoration: underline; }

.activity-panel pre {
    min-height: 120px;
    margin: 0;
    padding: 18px 24px;
    white-space: pre-wrap;
    color: var(--charcoal);
    background: #fafafa;
    border: 0;
    border-radius: 0 0 2px 2px;
    font: .84rem/1.55 Consolas, "Courier New", monospace;
}

.app-footer {
    padding: 20px 0 28px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--grey-600);
    border-top: 1px solid var(--grey-300);
    font-size: .78rem;
}

@media (max-width: 980px) {
    .setup-grid,
    .camera-grid { grid-template-columns: 1fr; }

    .camera-card.wide { width: calc(100% - 40px); margin: 20px; }
}

@media (max-width: 680px) {
    .header-inner,
    .page-shell,
    .app-footer { width: min(100% - 24px, 1440px); }

    .header-inner { min-height: 68px; }
    .brand-divider, .product-subtitle { display: none; }
    .brand-logo { width: 72px; }
    .page-shell { padding-top: 26px; }

    .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .button { width: 100%; }
    .setup-grid, .camera-grid { padding: 18px; }
    .camera-card.wide { width: calc(100% - 36px); margin: 18px; }
    .preview,
    .preview.theta { height: auto; aspect-ratio: 16 / 9; }
    .app-footer { flex-direction: column; }
}

/* Captured image preview modal */
body.modal-open {
    overflow: hidden;
}

.image-modal[hidden] {
    display: none;
}

.image-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.image-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}

.image-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1200px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    background: var(--white);
    border-radius: 2px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .42);
}

.image-modal-header {
    min-height: 60px;
    padding: 12px 16px 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--grey-300);
}

.image-modal-header h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.1rem;
}

.modal-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--charcoal);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: var(--grey-200);
    color: var(--iaa-red);
}

.modal-close:focus-visible {
    outline: 3px solid rgba(0, 131, 143, .35);
    outline-offset: 1px;
}

.image-modal-body {
    height: calc(92vh - 60px);
    padding: 20px;
    display: grid;
    place-items: center;
    overflow: auto;
    background: #111111;
}

.image-modal-body img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.captured-image-link {
    cursor: zoom-in;
}

@media (max-width: 680px) {
    .image-modal {
        padding: 10px;
    }

    .image-modal-dialog {
        width: 100%;
        max-height: 96vh;
    }

    .image-modal-body {
        height: calc(96vh - 60px);
        padding: 10px;
    }
}

/* UI polish: consistent capture buttons and themed image preview */
.panel-heading > .button-primary {
    width: 190px;
    min-width: 190px;
    flex: 0 0 190px;
    text-align: center;
    justify-content: center;
}

.image-modal-backdrop {
    background: rgba(34, 34, 34, .58);
}

.image-modal-body {
    background: var(--grey-100);
}

.captured-image-link {
    cursor: pointer;
}

@media (max-width: 680px) {
    .panel-heading > .button-primary {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }
}

/* Two-column capture workspace and saved capture library */
.page-shell {
    width: min(1840px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.workspace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 24px;
}

.capture-workspace {
    min-width: 0;
}

.capture-workspace > .panel:first-child,
.capture-library.panel {
    margin-top: 0;
}

.capture-library {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

.library-heading {
    padding-left: 20px;
    padding-right: 16px;
}

.library-refresh {
    padding: 8px 10px;
    background: transparent;
    color: var(--iaa-red-dark);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.library-refresh:hover {
    text-decoration: underline;
}

.capture-library-content {
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    padding: 12px;
    background: #fafafa;
}

.library-empty,
.library-error {
    margin: 0;
    padding: 18px 12px;
    color: var(--grey-600);
    font-size: .86rem;
    line-height: 1.45;
}

.library-error {
    color: var(--iaa-red-dark);
}

.capture-folder {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    background: var(--white);
}

.capture-folder:last-child {
    margin-bottom: 0;
}

.capture-folder summary {
    min-height: 52px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.capture-folder summary::-webkit-details-marker {
    display: none;
}

.capture-folder summary::after {
    content: "+";
    width: 24px;
    flex: 0 0 24px;
    color: var(--iaa-red);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}

.capture-folder[open] summary::after {
    content: "−";
}

.folder-summary-text {
    min-width: 0;
}

.folder-stock {
    display: block;
    overflow: hidden;
    color: var(--black);
    font-size: .9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-count {
    display: block;
    margin-top: 3px;
    color: var(--grey-600);
    font-size: .73rem;
}

.folder-images {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--grey-200);
    background: var(--grey-100);
}

.library-image-link {
    min-width: 0;
    padding: 8px;
    display: block;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--grey-300);
    color: var(--iaa-red-dark);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.library-image-link:hover {
    border-color: var(--iaa-red);
    text-decoration: underline;
}

@media (max-width: 1280px) {
    .workspace-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1050px) {
    .workspace-layout {
        grid-template-columns: 1fr;
    }

    .capture-library {
        position: static;
        max-height: none;
    }

    .capture-library-content {
        max-height: 480px;
    }
}


/* Forced left-aligned workspace with visible capture browser */
.page-shell {
    width: auto !important;
    max-width: none !important;
    margin: 0 24px !important;
}

.workspace-layout {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(720px, 1fr) 380px !important;
    align-items: start;
    gap: 24px;
}

.capture-workspace {
    width: 100%;
    min-width: 0;
}

.capture-library.panel {
    display: block !important;
    width: 380px;
    margin: 0 !important;
    position: sticky;
    top: 20px;
}

@media (max-width: 1180px) {
    .workspace-layout {
        grid-template-columns: 1fr !important;
    }

    .capture-library.panel {
        width: 100%;
        position: static;
    }
}

/* Capture library visibility fix - force desktop split layout */
.page-shell {
    width: calc(100% - 32px) !important;
    max-width: 1900px !important;
    margin: 0 16px !important;
}

.workspace-layout {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

.capture-workspace {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.capture-library.panel {
    display: block !important;
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 360px !important;
    margin: 0 !important;
    position: sticky !important;
    top: 20px !important;
    border-top: 4px solid var(--iaa-red) !important;
}

@media (max-width: 900px) {
    .workspace-layout {
        flex-direction: column !important;
    }

    .capture-library.panel {
        width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
        position: static !important;
    }
}


/* Open all images from a capture folder */
.capture-folder summary {
    position: relative;
}

.folder-open-all {
    margin-left: auto;
    padding: 7px 9px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    color: var(--iaa-red-dark);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.folder-open-all:hover {
    border-color: var(--iaa-red);
    background: var(--grey-100);
}

.folder-open-all:focus-visible {
    outline: 3px solid rgba(0, 131, 143, .35);
    outline-offset: 1px;
}

.image-modal-single {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.image-modal-single[hidden],
.image-modal-grid[hidden] {
    display: none;
}

.image-modal-single img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-modal-grid {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
    gap: 10px;
    overflow: hidden;
}

.all-images-item {
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--grey-300);
}

.all-images-item img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    background: var(--white);
}

.all-images-item figcaption {
    min-height: 28px;
    padding: 6px 8px;
    overflow: hidden;
    color: var(--charcoal);
    background: #fafafa;
    border-top: 1px solid var(--grey-200);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-modal.multi-image-mode .image-modal-dialog {
    width: min(1500px, 98vw);
    height: 94vh;
    max-height: 94vh;
}

.image-modal.multi-image-mode .image-modal-body {
    height: calc(94vh - 60px);
    overflow: hidden;
    padding: 12px;
}

@media (max-width: 680px) {
    .folder-open-all {
        padding: 6px 7px;
        font-size: .68rem;
    }

    .image-modal-grid {
        gap: 6px;
    }

    .all-images-item figcaption {
        min-height: 24px;
        padding: 4px;
        font-size: .62rem;
    }
}


/* Capture folder search */
.capture-library-search-wrap {
    padding: 12px 12px 10px;
    background: #fafafa;
    border-bottom: 1px solid var(--grey-200);
}

.capture-library-search-label {
    display: block;
    margin-bottom: 6px;
    color: var(--charcoal);
    font-size: .75rem;
    font-weight: 700;
}

.capture-library-search {
    min-height: 40px;
    padding: 8px 10px;
    font-size: .84rem;
}

.capture-library-content {
    max-height: calc(100vh - 202px);
}


/* Entra SSO, header account controls and administration */
.header-actions{display:flex;align-items:center;gap:12px}.header-user{font-size:.82rem;font-weight:700;color:var(--charcoal)}.header-link{display:inline-flex;align-items:center;min-height:36px;padding:7px 11px;border:1px solid var(--grey-300);color:var(--iaa-red-dark);background:#fff;text-decoration:none;font-size:.78rem;font-weight:700}.header-link:hover{border-color:var(--iaa-red);background:var(--grey-100)}.auth-page{min-height:100vh;display:grid;place-items:center;background:var(--grey-100);padding:24px}.auth-card{width:min(460px,100%);padding:36px;background:#fff;border:1px solid var(--grey-300);border-top:5px solid var(--iaa-red);box-shadow:0 18px 45px rgba(0,0,0,.12)}.auth-card h1{margin:8px 0 14px}.auth-card p{line-height:1.55}.auth-logo{width:112px;height:auto;margin-bottom:22px}.auth-button{display:inline-flex;margin-top:16px;text-decoration:none}.admin-shell{width:calc(100% - 32px);max-width:1900px;margin:24px auto}.admin-shell h1{margin:0}.audit-filters{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:12px;padding:16px;border-top:1px solid var(--grey-200);border-bottom:1px solid var(--grey-200);background:#fafafa}.audit-filters label{display:grid;gap:6px;font-size:.75rem;font-weight:700}.audit-filters input,.audit-filters select{min-height:40px;padding:8px 10px;border:1px solid var(--grey-300);background:#fff}.audit-filter-actions{display:flex;align-items:end;gap:8px}.button-secondary{background:#fff;color:var(--charcoal);border:1px solid var(--grey-300);text-decoration:none}.audit-table-wrap{overflow:auto;max-height:calc(100vh - 330px)}.audit-table{width:100%;border-collapse:collapse;font-size:.76rem}.audit-table th{position:sticky;top:0;z-index:1;padding:10px;text-align:left;background:var(--charcoal);color:#fff;white-space:nowrap}.audit-table td{padding:9px 10px;border-bottom:1px solid var(--grey-200);vertical-align:top;max-width:320px;word-break:break-word}.audit-table tbody tr:nth-child(even){background:#fafafa}.audit-table td span{color:var(--grey-600)}.audit-result{display:inline-block;padding:3px 6px;font-weight:800}.audit-success{background:#e8f5e9;color:#1b5e20}.audit-failed,.audit-denied{background:#ffebee;color:#9b1c1c}.audit-empty{text-align:center;padding:35px!important}.audit-note{padding:10px 16px;margin:0;color:var(--grey-600);font-size:.75rem}@media(max-width:1100px){.audit-filters{grid-template-columns:repeat(2,minmax(140px,1fr))}.header-user{display:none}}

.auth-help { margin-top: 18px; color: #5b6168; font-size: 0.9rem; line-height: 1.45; }


/* === 2026-07-21 header/navigation refresh === */
.header-inner.header-layout {
    width: calc(100% - 32px) !important;
    max-width: 1900px !important;
    margin: 0 16px !important;
    min-height: 76px;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto 360px;
    align-items: center;
    gap: 20px;
}

.brand-group-left {
    justify-self: start;
}

.header-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header-nav-link {
    min-height: 40px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    background: var(--white);
    color: var(--charcoal);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
}

.header-nav-link:hover {
    border-color: var(--iaa-red);
    color: var(--iaa-red-dark);
    background: var(--grey-100);
}

.header-nav-link.active {
    border-color: var(--iaa-red);
    background: var(--iaa-red);
    color: var(--white);
}

.header-actions-right {
    justify-self: stretch;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-role-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--grey-200);
    color: var(--charcoal);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.header-user {
    font-size: .86rem;
    font-weight: 700;
    color: var(--charcoal);
    white-space: nowrap;
}

.header-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--iaa-red);
    background: var(--white);
    color: var(--iaa-red-dark);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
}

.header-link:hover {
    background: var(--grey-100);
    border-color: var(--iaa-red-dark);
}

.status-badge,
#modeBadge,
#logoutButton {
    display: none !important;
}

@media (max-width: 1180px) {
    .header-inner.header-layout {
        grid-template-columns: 1fr;
        justify-items: start;
        padding: 14px 0;
    }

    .header-nav,
    .header-actions-right {
        justify-self: start;
    }
}

@media (max-width: 680px) {
    .header-actions-right {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .brand-divider {
        display: none;
    }
}


/* === 2026-07-21 centred Manage navigation refinement === */
.brand-home-link {
    color: inherit;
    text-decoration: none;
}

.brand-home-link:hover .product-name {
    color: var(--iaa-red-dark);
}

.header-inner.header-layout {
    position: relative;
    grid-template-columns: minmax(260px, 1fr) 360px;
}

.header-nav,
.header-nav-placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.header-nav-placeholder {
    width: 1px;
    height: 1px;
}

.header-actions-right {
    grid-column: 2;
}

@media (max-width: 1180px) {
    .header-inner.header-layout {
        grid-template-columns: 1fr;
    }

    .header-nav,
    .header-nav-placeholder {
        position: static;
        transform: none;
    }

    .header-actions-right {
        grid-column: 1;
    }
}


/* === 2026-07-21 Administration label and sticky header refinement === */
.app-header {
    position: sticky;
    top: 0;
    z-index: 2400;
}

/* Administration and Back use the same outlined navigation style. */
.header-nav-link,
.header-nav-link.active {
    border-color: var(--grey-300);
    background: var(--white);
    color: var(--charcoal);
}

.header-nav-link:hover,
.header-nav-link.active:hover {
    border-color: var(--iaa-red);
    background: var(--grey-100);
    color: var(--iaa-red-dark);
}

/* Keep the sticky capture folder panel below the sticky page header. */
.capture-library,
.capture-library.panel {
    top: 96px !important;
    max-height: calc(100vh - 116px) !important;
}

.capture-library-content {
    max-height: calc(100vh - 278px) !important;
}

@media (max-width: 1180px) {
    .app-header {
        position: static;
    }

    .capture-library,
    .capture-library.panel {
        top: 20px !important;
        max-height: none !important;
    }

    .capture-library-content {
        max-height: 480px !important;
    }
}


/* === 2026-07-21 adjacent navigation and fixed sticky-panel gap === */
.header-inner.header-layout {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    align-items: center;
}

.header-left-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-self: start;
}

.header-nav,
.header-nav-placeholder {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

.header-actions-right {
    grid-column: 2;
}

/* Match the panel's original page-top spacing after it becomes sticky. */
.capture-library,
.capture-library.panel {
    top: 118px !important;
    max-height: calc(100vh - 138px) !important;
}

.capture-library-content {
    max-height: calc(100vh - 300px) !important;
}

@media (max-width: 1180px) {
    .header-inner.header-layout {
        grid-template-columns: 1fr !important;
    }

    .header-left-group {
        flex-wrap: wrap;
        gap: 14px;
    }

    .header-actions-right {
        grid-column: 1;
    }

    .capture-library,
    .capture-library.panel {
        top: 20px !important;
        max-height: none !important;
    }

    .capture-library-content {
        max-height: 480px !important;
    }
}


/* === 2026-07-21 authentication screen branding refresh === */
.auth-card-branded {
    padding: 0;
    overflow: hidden;
}

.auth-brand {
    min-height: 92px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--grey-200);
    color: inherit;
    text-decoration: none;
}

.auth-brand:hover .auth-brand-copy strong {
    color: var(--iaa-red-dark);
}

.auth-brand-logo {
    display: block;
    width: 72px;
    height: auto;
    flex: 0 0 auto;
}

.auth-brand-divider {
    width: 1px;
    height: 38px;
    flex: 0 0 1px;
    background: var(--grey-300);
}

.auth-brand-copy {
    display: grid;
    gap: 3px;
}

.auth-brand-copy strong {
    font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 1.12rem;
    line-height: 1.1;
}

.auth-brand-copy span {
    color: var(--grey-600);
    font-size: .78rem;
}

.auth-content {
    padding: 30px 36px 36px;
}

.auth-content h1 {
    margin: 0 0 18px;
    font-size: clamp(2rem, 5vw, 2.7rem);
}

.auth-content p {
    margin-bottom: 14px;
}

.auth-content .auth-button {
    margin-top: 4px;
}

.auth-content .auth-help {
    margin: 20px 0 0;
    color: var(--grey-600);
}

.auth-email {
    color: var(--iaa-red-dark);
    font-weight: 700;
}

@media (max-width: 520px) {
    .auth-brand {
        padding: 20px;
    }

    .auth-content {
        padding: 26px 24px 30px;
    }
}


/* === 2026-07-21 centred authentication screens === */
.auth-card-centred {
    text-align: center;
}

.auth-brand-centred {
    justify-content: center;
    text-align: left;
}

.auth-content-centred {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auth-content-centred h1 {
    width: 100%;
    text-align: center;
}

.auth-content-centred .auth-button {
    margin-left: auto;
    margin-right: auto;
}

.auth-content-centred .auth-help {
    max-width: 340px;
}

.attempted-email {
    margin: 0 0 16px !important;
    color: var(--charcoal);
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}


/* Final authentication alignment refinements */
.auth-content-no-heading {
    padding-top: 10px;
}

.auth-content-no-heading .auth-button {
    margin-top: 0;
}

.auth-error-content {
    text-align: center;
}

.auth-error-content h1 {
    margin-top: 0;
}

.auth-error-content .auth-button {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
}


/* === 2026-07-21 larger, more spacious authentication presentation === */
.auth-card.auth-card-branded {
    width: min(540px, 100%);
}

.auth-brand {
    min-height: 132px;
    padding: 30px 38px;
    gap: 22px;
}

.auth-brand-logo {
    width: 100px;
}

.auth-brand-divider {
    height: 54px;
}

.auth-brand-copy {
    gap: 6px;
}

.auth-brand-copy strong {
    font-size: 1.48rem;
}

.auth-brand-copy span {
    font-size: .9rem;
}

.auth-content {
    padding: 42px 48px 48px;
}

.auth-content h1 {
    margin-bottom: 24px;
    font-size: clamp(2.15rem, 5vw, 3rem);
}

.auth-content p {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
}

.auth-content .auth-button {
    min-height: 50px;
    padding: 13px 24px;
    font-size: .96rem;
}

.auth-content .auth-help {
    max-width: 390px;
    margin-top: 30px;
}

.auth-content-no-heading {
    min-height: 230px;
    padding-top: 48px;
    padding-bottom: 48px;
    justify-content: center;
    gap: 2px;
}

.auth-error-content,
.auth-content-centred:not(.auth-content-no-heading) {
    min-height: 300px;
    justify-content: center;
}

.attempted-email {
    margin-bottom: 22px !important;
    font-size: 1.08rem;
}

@media (max-width: 560px) {
    .auth-page {
        padding: 16px;
    }

    .auth-brand {
        min-height: 112px;
        padding: 24px 22px;
        gap: 16px;
    }

    .auth-brand-logo {
        width: 82px;
    }

    .auth-brand-divider {
        height: 46px;
    }

    .auth-brand-copy strong {
        font-size: 1.28rem;
    }

    .auth-content {
        padding: 34px 26px 38px;
    }

    .auth-content-no-heading {
        min-height: 210px;
    }
}


/* Sign-in screen equal vertical spacing */
.auth-content-no-heading {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    justify-content: flex-start;
    gap: 24px;
}

.auth-content-no-heading .auth-button,
.auth-content-no-heading .auth-help {
    margin-top: 0;
    margin-bottom: 0;
}


/* Site management */
.admin-menu-shell,.site-management-shell{width:calc(100% - 32px);max-width:1900px;margin:24px auto 64px}.admin-menu-panel{margin-top:0}.admin-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:20px;padding:24px}.admin-menu-card{display:grid;gap:10px;padding:24px;border:1px solid var(--grey-300);border-top:4px solid var(--iaa-red);background:#fff;color:var(--black);text-decoration:none;box-shadow:0 2px 7px rgba(34,34,34,.08)}.admin-menu-card strong{font-size:1.35rem}.admin-menu-card span{color:var(--grey-600);line-height:1.5}.admin-menu-card:hover{border-color:var(--iaa-red)}
.management-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding:20px}.management-form,.camera-management-card{display:grid;gap:12px;padding:16px;border:1px solid var(--grey-300);background:#fff}.management-form h3{margin:0}.management-form label,.camera-management-card label{display:grid;gap:6px;font-size:.78rem;font-weight:700}.management-actions{display:flex;flex-wrap:wrap;gap:8px}.danger-button{background:#fff;color:#9b1c1c;border:1px solid #d9a6a6}.danger-button:hover{background:#ffebee}.site-tree{padding:20px}.tree-site,.tree-bay{margin:0 0 16px;border:1px solid var(--grey-300);background:#fafafa}.tree-site>summary,.tree-bay>summary{display:flex;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;list-style:none}.tree-site>summary{border-left:5px solid var(--iaa-red);font-size:1.1rem}.tree-bay>summary{border-left:5px solid var(--charcoal)}.tree-body{display:grid;gap:14px;padding:16px;border-top:1px solid var(--grey-300)}.compact-management{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end}.add-child,.add-camera-form{background:#f7f7f7}.camera-list{display:grid;gap:12px}.camera-management-card{border-left:5px solid var(--grey-400)}.camera-management-heading{display:flex;justify-content:space-between;align-items:center}.camera-type-pill{padding:4px 8px;font-size:.7rem;font-weight:800;border-radius:999px;background:var(--grey-200)}.camera-type-pill.exterior{background:#e7f0f7;color:#174f78}.camera-type-pill.interior{background:#f2dede;color:#8f0005}.camera-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.checkbox-label{display:flex!important;align-items:center;gap:8px!important}.checkbox-label input{width:auto;min-height:0}.camera-config-message{padding:30px;color:var(--grey-600)}
@media(max-width:800px){.admin-menu-grid{grid-template-columns:1fr}.compact-management{grid-template-columns:1fr}}


/* Site Management collapsed sections */
.collapsible-management-grid {
    align-items: start;
}

.management-collapsible {
    overflow: hidden;
    border: 1px solid var(--grey-300);
    background: var(--white);
}

.management-collapsible > summary {
    min-height: 58px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.management-collapsible > summary::-webkit-details-marker,
.tree-site > summary::-webkit-details-marker,
.tree-bay > summary::-webkit-details-marker {
    display: none;
}

.management-collapsible > summary::after,
.tree-site > summary::after,
.tree-bay > summary::after {
    content: "+";
    margin-left: auto;
    color: var(--iaa-red);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.management-collapsible[open] > summary::after,
.tree-site[open] > summary::after,
.tree-bay[open] > summary::after {
    content: "−";
}

.management-collapsible > summary span {
    color: var(--grey-600);
    font-size: .78rem;
    font-weight: 400;
}

.management-collapsible > .management-form {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--grey-300);
}

.add-management-collapsible,
.add-site-collapsible {
    border-left: 5px solid var(--iaa-red);
}

.add-site-collapsible {
    margin-bottom: 16px;
}

.tree-site > summary,
.tree-bay > summary {
    justify-content: flex-start;
}

.tree-site > summary span,
.tree-bay > summary span {
    margin-left: auto;
}


/* Site Management two-column layout matching Capture Folders */
.site-management-shell {
    width: calc(100% - 32px) !important;
    max-width: 1900px !important;
    margin: 24px 16px 64px !important;
}

.site-management-layout {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 20px;
}

.site-management-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.credential-library {
    display: block;
    flex: 0 0 360px;
    width: 360px;
    min-width: 360px;
    margin: 0;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    border-top: 4px solid var(--iaa-red);
}

.credential-library-content {
    max-height: calc(100vh - 198px);
    overflow-y: auto;
    padding: 12px;
    background: #fafafa;
}

.credential-library .management-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
}

.credential-library .management-collapsible {
    margin: 0;
    border-radius: 2px;
}

.credential-library .management-collapsible > summary {
    min-height: 52px;
    padding: 11px 12px;
}

.credential-library .management-collapsible > summary strong {
    font-size: .9rem;
}

.credential-library .management-collapsible > summary span {
    display: block;
    margin-top: 3px;
    font-size: .73rem;
}

.credential-library .management-form {
    padding: 12px;
}

.site-management-shell .panel-heading h1,
.site-management-shell .panel-heading h2 {
    margin: 0;
    font-family: "Roboto Condensed", Roboto, sans-serif;
    font-size: 1.45rem;
    line-height: 1.2;
}

.site-management-shell .panel-heading .step-label {
    margin-bottom: 7px;
    font-size: .76rem;
}

@media (max-width: 1050px) {
    .site-management-layout {
        flex-direction: column;
    }

    .credential-library {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        position: static;
        max-height: none;
    }

    .credential-library-content {
        max-height: 520px;
    }
}


/* Compact collapsible Add Bay and Add Camera forms */
.add-child-collapsible,
.add-camera-collapsible {
    margin: 0;
    border: 1px solid var(--grey-300);
    background: var(--white);
}

.add-child-collapsible > summary,
.add-camera-collapsible > summary {
    min-height: 52px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    border-left: 5px solid var(--grey-400);
}

.add-child-collapsible > summary::-webkit-details-marker,
.add-camera-collapsible > summary::-webkit-details-marker {
    display: none;
}

.add-child-collapsible > summary::after,
.add-camera-collapsible > summary::after {
    content: "+";
    color: var(--iaa-red);
    font-size: 1.25rem;
    font-weight: 800;
}

.add-child-collapsible[open] > summary::after,
.add-camera-collapsible[open] > summary::after {
    content: "−";
}

.add-child-collapsible > summary strong,
.add-camera-collapsible > summary strong {
    font-size: .95rem;
}

.add-child-collapsible > summary span,
.add-camera-collapsible > summary span {
    margin-left: auto;
    color: var(--grey-600);
    font-size: .75rem;
}

.add-child-collapsible .add-child,
.add-camera-collapsible .add-camera-form {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--grey-300);
    border-left: 5px solid var(--grey-400);
    box-shadow: none;
}

.add-camera-collapsible .add-camera-form {
    padding: 14px 16px;
    gap: 10px;
}

.add-camera-collapsible .camera-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.add-camera-collapsible .management-actions {
    justify-content: flex-start;
}

.add-camera-collapsible .button-primary,
.add-child-collapsible .button-primary {
    width: auto;
    min-width: 130px;
}


/* Compact camera editor and conditional credential fields */
.camera-management-card {
    gap: 10px;
    padding: 12px 14px;
}

.camera-management-heading {
    min-height: 30px;
}

.camera-heading-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.camera-enabled {
    margin: 0;
    white-space: nowrap;
    font-size: .78rem !important;
}

.compact-camera-grid {
    display: grid;
    grid-template-columns:
        minmax(80px, .55fr)
        minmax(110px, .75fr)
        minmax(120px, .8fr)
        minmax(180px, 1.2fr)
        minmax(145px, .9fr)
        minmax(180px, 1.1fr);
    align-items: end;
    gap: 8px;
}

.compact-camera-grid label {
    min-width: 0;
}

.compact-camera-grid input,
.compact-camera-grid select {
    min-height: 40px;
    padding: 8px 10px;
}

.compact-camera-grid [hidden] {
    display: none !important;
}

.camera-management-card .management-actions {
    margin-top: 2px;
}

.camera-management-card .management-actions .button {
    min-height: 40px;
    padding: 8px 14px;
}

@media (max-width: 1500px) {
    .compact-camera-grid {
        grid-template-columns: repeat(4, minmax(145px, 1fr));
    }
}

@media (max-width: 980px) {
    .compact-camera-grid {
        grid-template-columns: repeat(2, minmax(145px, 1fr));
    }
}

@media (max-width: 620px) {
    .compact-camera-grid {
        grid-template-columns: 1fr;
    }

    .camera-management-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .camera-heading-controls {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}


/* Site Management asynchronous save feedback */
.management-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 5000;
    max-width: 420px;
    padding: 13px 18px;
    border-left: 4px solid var(--success);
    background: var(--charcoal);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    font-size: .86rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.management-toast.show { opacity: 1; transform: translateY(0); }
.management-toast.error { border-left-color: var(--iaa-red); }
.site-management-layout form button:disabled { opacity: .65; cursor: wait; }


/* Camera editor: keep camera-specific credentials on one desktop row */
.compact-camera-grid,
.add-camera-collapsible .camera-form-grid {
    grid-template-columns:
        minmax(72px, .55fr)
        minmax(105px, .78fr)
        minmax(115px, .86fr)
        minmax(185px, 1.42fr)
        minmax(140px, 1.02fr)
        minmax(130px, 1fr)
        minmax(145px, 1.08fr) !important;
    gap: 8px !important;
}

.compact-camera-grid label,
.add-camera-collapsible .camera-form-grid label {
    min-width: 0;
}

.compact-camera-grid input,
.compact-camera-grid select,
.add-camera-collapsible .camera-form-grid input,
.add-camera-collapsible .camera-form-grid select {
    width: 100%;
    min-width: 0;
}

/* Do not collapse desktop camera forms into four columns too early. */
@media (min-width: 1101px) and (max-width: 1500px) {
    .compact-camera-grid,
    .add-camera-collapsible .camera-form-grid {
        grid-template-columns:
            minmax(72px, .55fr)
            minmax(105px, .78fr)
            minmax(115px, .86fr)
            minmax(185px, 1.42fr)
            minmax(140px, 1.02fr)
            minmax(130px, 1fr)
            minmax(145px, 1.08fr) !important;
    }
}

@media (max-width: 1100px) {
    .compact-camera-grid,
    .add-camera-collapsible .camera-form-grid {
        grid-template-columns: repeat(2, minmax(145px, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .compact-camera-grid,
    .add-camera-collapsible .camera-form-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Capture page: interior cameras must remain full-width and stack vertically.
   This is intentionally scoped to #interiorCameraContainer so it does not
   affect the compact camera editor on Site Management. */
#interiorCameraContainer.interior-camera-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    gap: 20px !important;
    padding: 24px !important;
}

#interiorCameraContainer.interior-camera-grid > .camera-card,
#interiorCameraContainer.interior-camera-grid > .camera-card.wide {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    grid-column: 1 / -1 !important;
}

#interiorCameraContainer.interior-camera-grid > .camera-config-message {
    width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 680px) {
    #interiorCameraContainer.interior-camera-grid {
        gap: 18px !important;
        padding: 18px !important;
    }
}


/* User Management */
.user-management-shell{width:calc(100% - 32px);max-width:1900px;margin:24px auto 60px}.management-alert{margin:20px 24px;padding:16px;display:grid;gap:7px;border:1px solid var(--grey-300)}.management-alert-error{border-color:#d88;background:#fff5f5;color:#8a1414}.user-management-toolbar{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--grey-200)}.user-management-toolbar>div{display:grid;gap:4px}.user-management-toolbar span{color:var(--grey-600);font-size:.82rem}.management-add-assignment{min-width:540px;border:1px solid var(--grey-300);background:#fff}.management-add-assignment summary{padding:11px 14px;color:var(--iaa-red-dark);font-weight:700;cursor:pointer}.management-add-assignment form{padding:14px;display:grid;grid-template-columns:1.4fr 1fr auto;align-items:end;gap:10px;border-top:1px solid var(--grey-200)}.management-add-assignment label{display:grid;gap:5px;font-size:.76rem;font-weight:700}.assignment-table-wrap,.role-matrix-wrap{overflow:auto}.assignment-table,.role-matrix{width:100%;border-collapse:collapse;font-size:.8rem}.assignment-table th,.role-matrix th{padding:11px;text-align:left;background:var(--charcoal);color:#fff;white-space:nowrap}.assignment-table td,.role-matrix td{padding:10px 11px;border-bottom:1px solid var(--grey-200);vertical-align:middle}.assignment-table td>strong,.assignment-table td>span,.assignment-table td>small,.role-matrix td>strong,.role-matrix td>small{display:block}.assignment-table td>span,.assignment-table td>small,.role-matrix td>small{margin-top:3px;color:var(--grey-600)}.assignment-role-form{display:flex;align-items:center;gap:8px}.assignment-role-form select{min-width:190px;min-height:38px}.button-danger{border:1px solid #d88;background:#fff;color:#a40000}.role-matrix-note{margin:0;padding:15px 24px;color:var(--grey-600);border-bottom:1px solid var(--grey-200)}.role-matrix th:not(:first-child),.role-matrix td:not(:first-child){text-align:center}.matrix-check{display:inline-grid;justify-items:center;gap:3px;font-size:.7rem;color:var(--grey-600)}.matrix-check input{width:18px;height:18px;min-height:0}.role-matrix tbody tr:nth-child(even),.assignment-table tbody tr:nth-child(even){background:#fafafa}@media(max-width:1000px){.user-management-toolbar{align-items:stretch;flex-direction:column}.management-add-assignment{min-width:0}.management-add-assignment form{grid-template-columns:1fr}}
.role-order-controls form{display:flex;gap:5px;justify-content:center}.matrix-move{width:30px;height:30px;border:1px solid var(--grey-300);background:#fff;cursor:pointer}.matrix-move:disabled{opacity:.35;cursor:not-allowed}.protected-badge,.protected-role-label{display:inline-block;color:#8a1414;font-weight:700}.read-only-action{color:var(--grey-600);font-size:.75rem}.role-matrix th:first-child,.role-matrix td:first-child{width:84px;text-align:center}.button:disabled{opacity:.45;cursor:not-allowed}


.folder-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.folder-delete { border: 1px solid #b42318; background: #fff; color: #b42318; border-radius: 4px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.folder-delete:hover { background: #fff1f0; }
.folder-delete:disabled { opacity: .55; cursor: wait; }


/* Capture deletion controls */
.folder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.folder-action-button {
    padding: 7px 9px;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    color: var(--iaa-red-dark);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.folder-action-button:hover {
    border-color: var(--iaa-red);
    background: var(--grey-100);
}
.folder-action-button:focus-visible {
    outline: 3px solid rgba(0, 131, 143, .35);
    outline-offset: 1px;
}
.folder-action-button:disabled { opacity: .55; cursor: wait; }
.library-image-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.library-image-row .library-image-link {
    flex: 1 1 auto;
    min-width: 0;
}
.image-delete-button {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 4px;
    flex: 0 0 26px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--iaa-red-dark);
    cursor: pointer;
}
.image-delete-button svg { width: 16px; height: 16px; fill: currentColor; }
.image-delete-button:hover { background: #fff1f0; color: #b42318; }
.image-delete-button:focus-visible { outline: 3px solid rgba(0, 131, 143, .35); outline-offset: 1px; }
.image-delete-button:disabled { opacity: .45; cursor: wait; }


/* Capture gallery layout refinements */
.image-modal {
    z-index: 5000;
    padding: 92px 24px 24px;
    align-items: start;
}
.image-modal-dialog {
    width: min(1100px, 92vw);
    max-height: calc(100vh - 116px);
}
.image-modal-body {
    height: calc(100vh - 176px);
    max-height: calc(100vh - 176px);
}
.image-modal.multi-image-mode .image-modal-dialog {
    width: min(1420px, 96vw);
    height: calc(100vh - 116px);
    max-height: calc(100vh - 116px);
}
.image-modal.multi-image-mode .image-modal-body {
    height: calc(100vh - 176px);
    max-height: calc(100vh - 176px);
}
.capture-folder summary {
    justify-content: flex-start;
}
.folder-summary-text {
    flex: 1 1 auto;
}
.folder-actions {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 6px;
}
.folder-open-all {
    margin-left: 0;
}
.folder-action-button,
.folder-open-all,
.folder-delete {
    box-sizing: border-box;
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    background: transparent;
    color: var(--iaa-red-dark);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}
.folder-delete:hover,
.folder-open-all:hover {
    border-color: var(--iaa-red);
    background: var(--grey-100);
}
.capture-folder summary::after {
    margin-left: 0;
}
.library-image-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 5px;
    align-items: stretch;
}
.image-delete-button {
    width: 30px;
    height: auto;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    background: var(--white);
    color: var(--iaa-red-dark);
    font-size: 18px;
    line-height: 1;
}
.image-delete-button span {
    display: block;
    transform: translateY(-1px);
}
.image-delete-button:hover {
    border-color: var(--iaa-red);
    background: #fff1f0;
    color: #b42318;
}
@media (max-width: 680px) {
    .image-modal {
        padding: 84px 10px 10px;
    }
    .image-modal-dialog,
    .image-modal.multi-image-mode .image-modal-dialog {
        width: 100%;
        max-height: calc(100vh - 94px);
        height: auto;
    }
    .image-modal-body,
    .image-modal.multi-image-mode .image-modal-body {
        height: calc(100vh - 154px);
        max-height: calc(100vh - 154px);
    }
}


/* Capture deletion visual tweaks */
.folder-delete {
    border-color: var(--iaa-red-dark);
    background: var(--iaa-red-dark);
    color: var(--white);
}
.folder-delete:hover {
    border-color: var(--iaa-red);
    background: var(--iaa-red);
    color: var(--white);
}
.library-image-row {
    gap: 0;
}
.image-delete-button svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: currentColor;
}


/* Capture folder management and inline rename */
.folder-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.folder-name-row .folder-stock {
    display: inline-block;
    min-width: 0;
}
.folder-rename-button,
.folder-rename-choice {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 3px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--grey-600);
    cursor: pointer;
}
.folder-rename-button svg,
.folder-rename-choice svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}
.folder-rename-button:hover {
    background: var(--grey-100);
    color: var(--iaa-red-dark);
}
.folder-rename-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: min(360px, 100%);
}
.folder-rename-active {
    flex: 1 1 auto;
}
.folder-rename-input {
    width: 100%;
    min-width: 90px;
    height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--grey-400);
    border-radius: 2px;
    color: var(--black);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
}
.folder-rename-input:focus {
    border-color: var(--iaa-teal);
    outline: 3px solid rgba(0, 131, 143, .18);
}
.folder-rename-confirm { color: #08783e; }
.folder-rename-confirm:hover { background: #eaf7ef; }
.folder-rename-cancel { color: var(--iaa-red-dark); }
.folder-rename-cancel:hover { background: #fff1f0; }
.folder-rename-choice:disabled,
.folder-rename-input:disabled { opacity: .55; cursor: wait; }


/* Folder rename edit mode */
.capture-folder.folder-editing > summary .folder-actions {
    display: none;
}
.capture-folder.folder-editing > summary::after {
    display: none;
    content: none;
}
.capture-folder.folder-editing > summary {
    cursor: default;
}


/* Ensure rename mode has the full summary width and no competing controls. */
.capture-folder.folder-editing > summary .folder-actions {
    display: none !important;
}
.capture-folder.folder-editing > summary::after {
    display: none !important;
    width: 0 !important;
    flex-basis: 0 !important;
    margin: 0 !important;
    content: none !important;
}
.capture-folder.folder-editing > summary::marker {
    content: "";
    font-size: 0;
}
.capture-folder.folder-editing > summary::-webkit-details-marker {
    display: none !important;
}
.capture-folder.folder-editing > summary .folder-summary-text {
    flex: 1 1 100%;
    width: 100%;
}
.capture-folder.folder-editing .folder-rename-row {
    width: 100%;
}
.capture-folder.folder-editing .folder-rename-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* Audit Log: keep Role and Result fully visible. */
.audit-table .audit-role-column,
.audit-table .audit-role-cell {
    min-width: 175px;
    width: 175px;
    max-width: none;
    white-space: nowrap;
    word-break: normal;
    overflow: visible;
}

.audit-table .audit-result-column,
.audit-table .audit-result-cell {
    min-width: 100px;
    width: 100px;
    max-width: none;
    white-space: nowrap;
    word-break: normal;
    overflow: visible;
}

.audit-table .audit-result-cell .audit-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    white-space: nowrap;
    overflow: visible;
}


/* Audit Log: rebalance IP and File columns. */
.audit-table .audit-ip-column,
.audit-table .audit-ip-cell {
    min-width: 145px;
    width: 145px;
    white-space: nowrap;
    word-break: normal;
}

.audit-table .audit-file-column,
.audit-table .audit-file-cell {
    width: 105px;
    min-width: 105px;
    max-width: 105px;
}

.audit-table .audit-file-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}


/* Audit Log: balanced widths based on actual audit values.
   Fixed column sizing stops short Stock values consuming unused space. */
.audit-table {
    min-width: 1630px;
    table-layout: fixed;
}

.audit-table .audit-time-column,
.audit-table .audit-time-cell {
    width: 185px;
    min-width: 185px;
    white-space: nowrap;
}

.audit-table .audit-user-column,
.audit-table .audit-user-cell {
    width: 220px;
    min-width: 220px;
}

.audit-table .audit-role-column,
.audit-table .audit-role-cell {
    width: 165px;
    min-width: 165px;
}

.audit-table .audit-ip-column,
.audit-table .audit-ip-cell {
    width: 155px;
    min-width: 155px;
}

.audit-table .audit-action-column,
.audit-table .audit-action-cell {
    width: 180px;
    min-width: 180px;
}

.audit-table .audit-stock-column,
.audit-table .audit-stock-cell {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-table .audit-file-column,
.audit-table .audit-file-cell {
    width: 225px;
    min-width: 225px;
    max-width: 225px;
}

.audit-table .audit-result-column,
.audit-table .audit-result-cell {
    width: 95px;
    min-width: 95px;
}

.audit-table .audit-details-column,
.audit-table .audit-details-cell {
    width: 285px;
    min-width: 285px;
}

.audit-table .audit-file-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audit-table .audit-user-cell,
.audit-table .audit-details-cell {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* 2026-07-23 User Management QOL: evenly spaced permissions and Entra-owned membership */
.role-matrix {
    table-layout: fixed;
    min-width: 1460px;
}
.role-matrix col.role-matrix-col-order { width: 6%; }
.role-matrix col.role-matrix-col-role { width: 14%; }
.role-matrix col.role-matrix-col-permission { width: 9%; }
.role-matrix col.role-matrix-col-save { width: 8%; }
.role-matrix th,
.role-matrix td {
    box-sizing: border-box;
}
.role-matrix th:nth-child(n+3):nth-child(-n+10) {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
}
.role-matrix td:nth-child(n+3):nth-child(-n+10) {
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}
.user-management-toolbar {
    justify-content: flex-start;
}
.assignment-table {
    table-layout: fixed;
}
.assignment-table th:nth-child(1) { width: 36%; }
.assignment-table th:nth-child(2) { width: 12%; }
.assignment-table th:nth-child(3) { width: 34%; }
.assignment-table th:nth-child(4) { width: 18%; }
.assignment-role-form {
    justify-content: flex-start;
}
.assignment-role-form select {
    flex: 1 1 220px;
    max-width: 320px;
}

/* 2026-07-23 Role matrix: true spreadsheet-style equal permission columns */
.role-matrix {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1660px !important;
}
.role-matrix col.role-matrix-col-order {
    width: 96px !important;
}
.role-matrix col.role-matrix-col-role {
    width: 220px !important;
}
.role-matrix col.role-matrix-col-permission {
    width: 150px !important;
}
.role-matrix col.role-matrix-col-save {
    width: 110px !important;
}
.role-matrix th,
.role-matrix td {
    box-sizing: border-box !important;
}
.role-matrix th:nth-child(n+3):nth-child(-n+10),
.role-matrix td:nth-child(n+3):nth-child(-n+10) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    text-align: center !important;
}
.role-matrix th:nth-child(n+3):nth-child(-n+10) {
    height: 64px;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.2;
    vertical-align: middle;
}
.role-matrix .role-permission-cell {
    height: 58px;
    vertical-align: middle;
}
.role-matrix .matrix-check {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.role-matrix .matrix-check span {
    display: none !important;
}
.role-matrix .matrix-check input[type="checkbox"] {
    margin: 0;
}


/* 2026-07-23 Role matrix presentation polish.
   Keep spreadsheet-style equal permission widths while restoring clear labels. */
.role-matrix thead th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    height: 44px !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
}

.role-matrix th:nth-child(n+3):nth-child(-n+10) {
    height: 44px !important;
}

.role-matrix td:nth-child(2) strong,
.role-matrix td:nth-child(2) small {
    display: block !important;
    width: 100%;
}

.role-matrix td:nth-child(2) strong {
    margin-bottom: 4px;
}

.role-matrix td:nth-child(2) small {
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.role-matrix .role-permission-cell {
    height: 78px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.role-matrix .matrix-check {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
}

.role-matrix .matrix-check span {
    display: block !important;
    max-width: 128px;
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.role-matrix .matrix-check input[type="checkbox"] {
    margin: 0 !important;
}

.role-matrix thead th:last-child {
    font-size: 0 !important;
}


/* Site Management: compact, aligned Credential Group summaries */
.credential-library .credential-collapsible > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
}

.credential-library .credential-collapsible > summary strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.credential-library .credential-collapsible > summary span {
    display: block;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.credential-library .credential-collapsible > summary::after {
    margin-left: 0;
}

.credential-library .add-management-collapsible > summary {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.credential-library .add-management-collapsible > summary strong {
    white-space: nowrap;
}

.credential-library .add-management-collapsible > summary::after {
    margin-left: 0;
}

/* Credential Groups: anchor the type label at the right edge, immediately before the toggle. */
.credential-library details.credential-collapsible > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
}

.credential-library details.credential-collapsible > summary > strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 16px !important;
}

.credential-library details.credential-collapsible > summary > span {
    flex: 0 0 auto !important;
    margin: 0 10px 0 auto !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.credential-library details.credential-collapsible > summary::after {
    flex: 0 0 18px !important;
    width: 18px !important;
    margin: 0 !important;
    text-align: center !important;
}


/* Credential Group usage count and aligned summary metadata */
.credential-library details.credential-collapsible > summary > .credential-summary-meta {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto !important;
    margin: 0 10px 0 auto !important;
    white-space: nowrap;
}

.credential-library .credential-active-count {
    color: var(--iaa-red);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
}

.credential-library .credential-group-label {
    margin: 0 !important;
    color: var(--grey-600);
    font-size: .73rem;
    font-weight: 400;
    text-align: right;
}

/* Site Management in-page confirmation dialog; replaces browser confirm popups. */
.management-dialog-backdrop[hidden] { display: none; }
.management-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(18, 18, 18, .56);
}
.management-dialog {
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid var(--grey-300);
    border-top: 5px solid var(--iaa-red);
    background: var(--white);
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.management-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--grey-300);
}
.management-dialog-header h2 { margin: 0; font-size: 1.25rem; }
.management-dialog-close {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}
.management-dialog-body { padding: 20px; }
.management-dialog-body p { margin: 0; line-height: 1.5; }
.management-camera-impact {
    margin-top: 14px !important;
    padding: 12px 14px;
    border-left: 4px solid var(--iaa-red);
    background: #fff3f4;
}
.management-camera-impact strong {
    color: var(--iaa-red);
    font-size: 1.15rem;
}
.management-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 20px;
}


/* Credential Group header: enabled-camera count sits directly before the label. */
.credential-library details.credential-collapsible > summary > .credential-summary-meta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    gap: 7px !important;
    margin: 0 10px 0 auto !important;
    white-space: nowrap !important;
}
.credential-library details.credential-collapsible > summary .credential-active-count {
    display: inline-block !important;
    margin: 0 !important;
    color: #c90107 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.credential-library details.credential-collapsible > summary .credential-group-label {
    display: inline-block !important;
    margin: 0 !important;
    color: var(--grey-600) !important;
    font-size: .73rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: right !important;
}

/* Site Management delete dialog: exact visual language used by Overwrite Capture. */
.app-dialog-backdrop[hidden] { display: none !important; }
.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 20, 35, 0.72);
    backdrop-filter: blur(2px);
}
.app-dialog {
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid #d4d8dd;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.app-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #dfe3e8;
    background: #f7f8fa;
}
.app-dialog-title {
    margin: 0;
    color: #202a35;
    font-size: 20px;
    font-weight: 700;
}
.app-dialog-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #394552;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.app-dialog-close:hover { background: #e8ebef; }
.app-dialog-body {
    padding: 22px 20px;
    color: #2c3640;
    font-size: 16px;
    line-height: 1.5;
}
.app-dialog-message { margin: 0; white-space: pre-line; }
.app-dialog-files {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid #e0e4e8;
    border-radius: 5px;
    background: #f7f8fa;
    color: #202a35;
    font-family: Consolas, monospace;
    font-size: 14px;
    white-space: pre-wrap;
}
.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid #e3e6ea;
    background: #fafbfc;
}
.app-dialog-button {
    min-width: 100px;
    padding: 10px 18px;
    border-radius: 4px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.app-dialog-cancel {
    border: 1px solid #9aa4ae;
    background: #ffffff;
    color: #27323c;
}
.app-dialog-cancel:hover { background: #f0f2f4; }
.app-dialog-continue {
    border: 1px solid #c8202f;
    background: #c8202f;
    color: #ffffff;
}
.app-dialog-continue:hover { background: #a91926; }
.app-dialog-error .app-dialog-header { border-top: 5px solid #c8202f; }
.credential-delete-impact strong {
    color: #c90107;
    font-size: 1.05rem;
    font-weight: 800;
}


/* Credential Group active camera count appended to the title. */
.credential-library details.credential-collapsible > summary .credential-title-count {
    color: #c90107 !important;
    font-weight: 400 !important;
}

/* Credential Group title count: keep the count as part of the title text. */
.credential-library details.credential-collapsible > summary > strong .credential-title-count {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c90107 !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    text-align: inherit !important;
    white-space: nowrap !important;
}


/* Credential Group title: name and usage count are one continuous inline title. */
.credential-library details.credential-collapsible > summary > strong.credential-title {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding-right: 16px !important;
    white-space: nowrap !important;
}

.credential-library details.credential-collapsible > summary > strong.credential-title > span {
    display: inline !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.credential-library details.credential-collapsible > summary .credential-title-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.credential-library details.credential-collapsible > summary .credential-title-brackets {
    color: inherit !important;
    font-weight: inherit !important;
}

.credential-library details.credential-collapsible > summary .credential-title-number {
    display: inline !important;
    color: #c90107 !important;
    font-weight: 400 !important;
}

/* Credential Group title: entire name and count are bold; only the digit is red. */
.credential-library details.credential-collapsible > summary > strong.credential-title,
.credential-library details.credential-collapsible > summary .credential-title-name,
.credential-library details.credential-collapsible > summary .credential-title-brackets,
.credential-library details.credential-collapsible > summary .credential-title-number {
    font-weight: 700 !important;
}

.credential-library details.credential-collapsible > summary .credential-title-number {
    color: #c90107 !important;
}

/* Credential Group title: match Add Credential Group black and use the exact toggle red. */
.credential-library details.credential-collapsible > summary > strong.credential-title,
.credential-library details.credential-collapsible > summary .credential-title-name,
.credential-library details.credential-collapsible > summary .credential-title-brackets {
    color: var(--black) !important;
    font-weight: 700 !important;
}

.credential-library details.credential-collapsible > summary .credential-title-number {
    color: var(--iaa-red) !important;
    font-weight: 700 !important;
}


/* Site and Bay inline editors: hidden until the pencil icon is selected. */
.tree-summary-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.tree-edit-button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--iaa-red);
    cursor: pointer;
}

.tree-edit-button:hover,
.tree-edit-button:focus-visible {
    background: rgba(204, 0, 0, .08);
    outline: none;
}

.tree-edit-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.tree-edit-panel[hidden] {
    display: none !important;
}

.tree-edit-panel {
    margin-bottom: 16px;
}

.tree-item-editing > summary .tree-edit-button {
    background: rgba(204, 0, 0, .1);
}

.tree-site > summary,
.tree-bay > summary {
    align-items: center;
}

@media (max-width: 680px) {
    .tree-summary-actions {
        gap: 6px;
    }
}

/* Site/Bay inline editing controls aligned with the Capture Folder editor. */
.tree-title-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tree-title-group > strong {
    color: var(--black);
}

.tree-inline-controls,
.tree-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tree-inline-controls [hidden],
.tree-edit-actions[hidden] {
    display: none !important;
}

.tree-action-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
}

.tree-action-save {
    color: #16823a;
}

.tree-action-cancel {
    color: var(--iaa-red);
}

.tree-action-button:hover,
.tree-action-button:focus-visible {
    background: rgba(0, 0, 0, .06);
    outline: none;
}

.tree-delete-button {
    margin-left: 3px;
    padding: 5px 10px;
    border: 1px solid var(--iaa-red);
    border-radius: 4px;
    background: #fff;
    color: var(--iaa-red);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.tree-delete-button:hover,
.tree-delete-button:focus-visible {
    background: var(--iaa-red);
    color: #fff;
    outline: none;
}

.tree-edit-panel {
    padding-top: 4px;
}

.tree-edit-panel .management-form {
    margin-bottom: 0;
}

/* Keep Site/Bay names and their inline edit controls aligned on the left. */
.tree-site > summary > .tree-title-group,
.tree-bay > summary > .tree-title-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.tree-site > summary > .tree-title-group > strong,
.tree-bay > summary > .tree-title-group > strong,
.tree-site > summary > .tree-title-group > .tree-inline-controls,
.tree-bay > summary > .tree-title-group > .tree-inline-controls,
.tree-site > summary > .tree-title-group .tree-edit-actions,
.tree-bay > summary > .tree-title-group .tree-edit-actions {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.tree-site > summary > .tree-summary-actions,
.tree-bay > summary > .tree-summary-actions {
    margin-left: auto !important;
}

/* Definitive Site/Bay header alignment: only the count is allowed to push right. */
.tree-site > summary > .tree-title-group,
.tree-bay > summary > .tree-title-group {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.tree-site > summary > .tree-title-group span,
.tree-bay > summary > .tree-title-group span,
.tree-site > summary > .tree-title-group strong,
.tree-bay > summary > .tree-title-group strong {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.tree-site > summary > .tree-summary-actions,
.tree-bay > summary > .tree-summary-actions {
    margin-left: auto !important;
    margin-right: 18px !important;
    flex: 0 0 auto !important;
}

/* Inline Site/Bay descriptions and Add Bay/Add Camera supporting text. */
.tree-title-name {
    color: var(--black);
    font-weight: 700;
    white-space: nowrap;
}

.tree-title-description {
    color: #5d6470;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(34vw, 520px);
}

.management-summary-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-width: 0;
    margin: 0 !important;
}

.management-summary-name {
    color: var(--black);
    font-weight: 700;
    white-space: nowrap;
}

.management-summary-description {
    color: #5d6470;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-child-collapsible > summary > .management-summary-title,
.add-camera-collapsible > summary > .management-summary-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 1 auto !important;
}

@media (max-width: 800px) {
    .tree-title-description,
    .management-summary-description {
        display: none;
    }
}


/* Site/Bay header polish: match the Add Site title/description pattern exactly. */
.tree-site > summary > .tree-title-group,
.tree-bay > summary > .tree-title-group,
.add-child-collapsible > summary > .management-summary-title,
.add-camera-collapsible > summary > .management-summary-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--black) !important;
}

/* The title must remain the same bold black used by Add Site. */
.add-child-collapsible > summary .management-summary-name,
.add-camera-collapsible > summary .management-summary-name,
.tree-site > summary .tree-title-name,
.tree-bay > summary .tree-title-name {
    margin-left: 0 !important;
    color: var(--black) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Supporting text matches 'Create a new site'. */
.add-child-collapsible > summary .management-summary-description,
.add-camera-collapsible > summary .management-summary-description,
.tree-site > summary .tree-title-description,
.tree-bay > summary .tree-title-description {
    margin-left: 0 !important;
    color: var(--grey-600) !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Keep the pencil immediately after the Site/Bay description. */
.tree-site > summary .tree-inline-controls,
.tree-bay > summary .tree-inline-controls {
    margin-left: -10px !important;
    flex: 0 0 auto !important;
}

/* Definitive Site/Bay/Add header layout repair.
   All title/description groups stay at the far left with identical spacing. */
.site-tree .tree-site > summary,
.site-tree .tree-bay > summary,
.site-tree .add-site-collapsible > summary,
.site-tree .add-child-collapsible > summary,
.site-tree .add-camera-collapsible > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.site-tree summary > .tree-heading-left {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 1 auto !important;
    text-align: left !important;
}

.site-tree summary > .tree-heading-left > .tree-title-name,
.site-tree summary > .tree-heading-left > .tree-title-description,
.site-tree summary > .tree-heading-left > .tree-inline-controls {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
}

.site-tree summary > .tree-heading-left > .tree-title-name {
    color: #111 !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.site-tree summary > .tree-heading-left > .tree-title-description {
    color: var(--grey-600) !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.site-tree .tree-site > summary > .tree-summary-actions,
.site-tree .tree-bay > summary > .tree-summary-actions {
    margin-left: auto !important;
    margin-right: 18px !important;
    flex: 0 0 auto !important;
}

.site-tree summary > .tree-heading-left > .tree-inline-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

/* Stop legacy generic summary span rules from repositioning nested header text. */
.site-tree .add-site-collapsible > summary > .tree-heading-left,
.site-tree .add-child-collapsible > summary > .tree-heading-left,
.site-tree .add-camera-collapsible > summary > .tree-heading-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================\n   IAA AutoPhotoBay Design System — 2026-07-23\n   ========================================================================== */
:root {
  --iaa-red: #c8102e;
  --iaa-red-dark: #9f0c24;
  --iaa-red-soft: #fbeaec;
  --ink-900: #1b1b1b;
  --ink-700: #3f3f3f;
  --ink-500: #666;
  --surface: #fff;
  --surface-muted: #f5f5f5;
  --border: #d3d3d3;
  --border-strong: #a7a7a7;
  --success: #237a36;
  --success-soft: #e7f4ea;
  --warning: #a56600;
  --warning-soft: #fff3d6;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --focus: #006f85;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius: 2px;
  --shadow: 0 2px 8px rgba(0,0,0,.09);
  --transition: 150ms ease;
}
html { color-scheme: light; }
body { font-family: Roboto, "Segoe UI", Arial, sans-serif; color: var(--ink-900); background: #f1f1f1; line-height: 1.45; }
h1,h2,h3,.product-name,.tree-title-name,.credential-title { font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif; }
:focus-visible { outline: 3px solid rgba(0,111,133,.35) !important; outline-offset: 2px; }
::selection { background: var(--iaa-red-soft); color: var(--ink-900); }

.panel,.tile,.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-heading,.tile-header,.card-head { min-height: 72px; padding: var(--space-4) var(--space-6); border-bottom: 1px solid #e6e6e6; }
.panel-heading h1,.panel-heading h2 { margin: 0; }
.step-label,.eyebrow { color: var(--iaa-red); letter-spacing: .07em; }
.intro-copy,.component-help,.tree-title-description,.header-supporting-text { color: var(--ink-500); font-weight: 400; }
.component-help { display:flex; align-items:center; gap:8px; margin:6px 0 0; font-size:.82rem; }
.component-help img { width:18px; height:18px; }

.button,.header-link,.header-nav-link { border-radius: var(--radius); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); }
.button { min-height: 40px; padding: 9px 16px; font-weight: 700; }
.button img,.icon-text-button img,.header-nav-link img { width: 17px; height: 17px; flex:none; }
.button-primary { background: var(--iaa-red); color:#fff; }
.button-primary:hover { background: var(--iaa-red-dark); }
.button-secondary { background:#fff; border:1px solid var(--border-strong); color:var(--ink-900); }
.button-secondary:hover { background:var(--surface-muted); border-color:var(--ink-700); }
.danger-button,.button-danger { background:#fff; border:1px solid var(--danger); color:var(--danger); }
.danger-button:hover,.button-danger:hover { background:var(--danger-soft); }
.button:disabled { opacity:.55; cursor:not-allowed; }
.button.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.button.is-loading::after { content:""; position:absolute; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:iaa-spin .7s linear infinite; color:var(--ink-700); }
@keyframes iaa-spin { to { transform:rotate(360deg); } }

input,select,textarea { min-height:40px; border:1px solid var(--border-strong); border-radius:var(--radius); color:var(--ink-900); background:#fff; }
input:focus,select:focus,textarea:focus { border-color:var(--focus); box-shadow:0 0 0 2px rgba(0,111,133,.18); }
input:disabled,select:disabled,textarea:disabled { background:#ededed; color:#707070; cursor:not-allowed; }
.field > span,label { color:var(--ink-700); }

.app-header { border-bottom-color:var(--iaa-red); }
.header-nav-link { display:inline-flex; align-items:center; gap:7px; }
.header-role-label { background:#ececec; color:var(--ink-700); border-radius:var(--radius); }
.header-nav-link[aria-current="page"] { color:var(--iaa-red); border-bottom:2px solid var(--iaa-red); }

.admin-menu-card { min-height:160px; align-content:start; gap:10px; border-top:4px solid var(--iaa-red); }
.admin-menu-card:hover,.admin-menu-card:focus-visible { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.admin-card-icon { width:32px; height:32px; margin-bottom:4px; }

.management-alert,.error,.setup { border-radius:var(--radius); }
.management-alert { border-left:4px solid var(--focus); background:#e9f4f6; }
.management-alert-error,.error { border-left-color:var(--danger); background:var(--danger-soft); color:#721c16; }
.setup { border-left-color:var(--warning); background:var(--warning-soft); }

.audit-table,.assignment-table,.role-matrix { border-collapse:collapse; width:100%; }
.audit-table caption,.assignment-table caption,.role-matrix caption { text-align:left; font-weight:700; padding:0 0 12px; }
.audit-table th,.assignment-table th,.role-matrix th { background:#ececec; color:var(--ink-900); border-bottom:2px solid var(--border-strong); }
.audit-table th[role="button"] { cursor:pointer; position:relative; padding-right:24px; }
.audit-table th[aria-sort="ascending"]::after { content:"▲"; position:absolute; right:8px; font-size:.65rem; }
.audit-table th[aria-sort="descending"]::after { content:"▼"; position:absolute; right:8px; font-size:.65rem; }
.audit-table tbody tr:nth-child(even),.assignment-table tbody tr:nth-child(even),.role-matrix tbody tr:nth-child(even) { background:#fafafa; }
.audit-table tbody tr:hover,.assignment-table tbody tr:hover,.role-matrix tbody tr:hover { background:#fff6f7; }
.audit-result { border-radius:999px; padding:4px 8px; font-weight:700; }
.audit-success { background:var(--success-soft); color:var(--success); }
.audit-failed,.audit-denied { background:var(--danger-soft); color:var(--danger); }
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; padding:18px 0 4px; }
.audit-note { text-align:center; color:var(--ink-500); }

.role-matrix { table-layout:fixed; min-width:1220px; }
.role-matrix-col-permission { width:118px; }
.role-matrix th,.role-matrix td { text-align:center; vertical-align:middle; }
.role-matrix th:nth-child(1),.role-matrix td:nth-child(1),.role-matrix th:nth-child(2),.role-matrix td:nth-child(2) { position:sticky; z-index:2; background:inherit; }
.role-matrix th:nth-child(1),.role-matrix td:nth-child(1) { left:0; }
.role-matrix th:nth-child(2),.role-matrix td:nth-child(2) { left:90px; box-shadow:3px 0 5px rgba(0,0,0,.05); }
.role-matrix tr.is-changed { background:var(--warning-soft) !important; }
.matrix-move img { width:16px; height:16px; }
.matrix-check span { display:block; margin-top:5px; font-size:.72rem; line-height:1.15; }

summary { cursor:pointer; }
summary::-webkit-details-marker { display:none; }
.tree-site > summary,.tree-bay > summary,.management-collapsible > summary { min-height:54px; align-items:center; }
.tree-heading-left { display:flex; align-items:center; gap:12px; min-width:0; }
.tree-title-name,.credential-title { color:#111; font-weight:700; }
.tree-title-description { margin-left:0 !important; }
.tree-summary-actions { margin-left:auto; }
.tree-edit-button,.tree-action-button,.matrix-move,.modal-close,.library-refresh { min-width:36px; min-height:36px; display:inline-grid; place-items:center; border-radius:var(--radius); }
.tree-edit-button:hover,.tree-action-button:hover,.matrix-move:hover,.modal-close:hover,.library-refresh:hover { background:var(--iaa-red-soft); }
.tree-edit-button svg,.tree-action-button img,.matrix-move img,.modal-close img { width:18px; height:18px; }
.camera-type-pill,.protected-badge,.status-badge { border-radius:999px; }
.camera-management-card { border:1px solid var(--border); box-shadow:none; }
.camera-management-heading { border-bottom:1px solid #e7e7e7; }

.image-modal,.management-dialog { backdrop-filter:blur(2px); }
.image-modal-dialog,.management-dialog-panel { border-top:4px solid var(--iaa-red); box-shadow:0 18px 50px rgba(0,0,0,.25); }
.modal-close { background:transparent; }

.interior-camera-grid { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:20px !important; padding:24px !important; }
.interior-camera-grid > * { width:100% !important; max-width:none !important; }
.camera-config-message,.library-empty,.audit-empty { padding:28px; text-align:center; color:var(--ink-500); background:var(--surface-muted); border:1px dashed var(--border-strong); }

.icon-text-button { display:inline-flex; align-items:center; gap:7px; }
.app-footer { border-top:1px solid var(--border); }

@media (max-width: 1100px) {
  .header-inner,.page-shell,.app-footer { width:min(100% - 24px, 1440px); }
  .setup-grid { grid-template-columns:1fr 1fr; }
  .camera-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px) {
  .header-inner { min-height:64px; gap:12px; }
  .brand-logo { width:70px; }
  .header-user { display:none; }
  .page-shell { padding-top:20px; }
  .panel-heading { align-items:flex-start; flex-direction:column; }
  .setup-grid,.camera-grid { grid-template-columns:1fr; padding:16px; }
  .tree-heading-left { flex-wrap:wrap; gap:6px 10px; }
  .tree-title-description { flex-basis:100%; }
  .pagination { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ==========================================================================\n   Semantic icon colours\n   Icons communicate purpose rather than defaulting to black.\n   ========================================================================== */
.tree-edit-button svg {
  fill: var(--iaa-red) !important;
}
.tree-edit-button:hover svg,
.tree-edit-button:focus-visible svg {
  fill: var(--iaa-red-dark) !important;
}
.button-primary img {
  filter: none !important;
}
.button-secondary img,
.icon-text-button img,
.header-nav-link img,
.admin-card-icon,
.component-help img,
.error-page-icon,
.matrix-move img,
.tree-action-button img,
.modal-close img {
  opacity: 1;
}
.button:disabled img,
.matrix-move:disabled img,
.tree-action-button:disabled img {
  opacity: .5;
}
.danger-button img,
.button-danger img,
.image-delete-button img,
.tree-delete-button img {
  color: var(--danger);
}

/* Shared inline edit controls: Site/Bay controls intentionally match Capture Folders. */
.tree-inline-controls,
.tree-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-style: normal;
}

.tree-edit-button.folder-rename-button,
.tree-action-button.folder-rename-choice {
    width: 24px;
    height: 24px;
    padding: 3px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

.tree-edit-button.folder-rename-button svg,
.tree-action-button.folder-rename-choice svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: currentColor;
}

.tree-edit-button.folder-rename-button {
    color: var(--grey-600);
}

.tree-edit-button.folder-rename-button:hover {
    background: var(--grey-100);
    color: var(--iaa-red-dark);
}

.tree-action-button.folder-rename-confirm {
    color: #08783e;
}

.tree-action-button.folder-rename-confirm:hover {
    background: #eaf7ef;
}

.tree-action-button.folder-rename-cancel {
    color: var(--iaa-red-dark);
}

.tree-action-button.folder-rename-cancel:hover {
    background: #fff1f0;
}

.tree-delete-button {
    font-style: normal !important;
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
}


/* Capture folders: inline search/sort toolbar and collapsed accordion */
.capture-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: var(--space-3, 12px);
    align-items: end;
    padding: 12px;
    border-bottom: 1px solid var(--grey-200);
}
.capture-library-toolbar .capture-library-search-wrap,
.capture-library-sort-wrap {
    min-width: 0;
    padding: 0;
}
.capture-library-sort-wrap {
    display: grid;
    gap: 5px;
}
.capture-library-sort {
    width: 100%;
    min-height: 40px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--grey-300);
    border-radius: 2px;
    background-color: var(--white);
    color: var(--black);
    font: inherit;
    font-size: .84rem;
}
.capture-library-sort:focus-visible {
    border-color: var(--iaa-red);
    outline: 3px solid rgba(201, 1, 7, .16);
    outline-offset: 1px;
}
@media (max-width: 720px) {
    .capture-library-toolbar {
        grid-template-columns: 1fr;
    }
}
\n\n/* Audit Log: keep the page fixed and scroll only the records area. */\nhtml:has(body.audit-page) {\n    height: 100%;\n    overflow: hidden;\n}\n\nbody.audit-page {\n    height: 100vh;\n    height: 100dvh;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden !important;\n}\n\nbody.audit-page > .app-header {\n    flex: 0 0 auto;\n}\n\nbody.audit-page .audit-page-main {\n    flex: 1 1 auto;\n    min-height: 0;\n    width: calc(100% - 32px);\n    max-width: 1900px;\n    margin: 16px auto;\n    display: flex;\n    overflow: hidden;\n}\n\nbody.audit-page .audit-log-panel {\n    flex: 1 1 auto;\n    min-width: 0;\n    min-height: 0;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\nbody.audit-page .audit-log-panel > .panel-heading,\nbody.audit-page .audit-log-panel > .audit-filters,\nbody.audit-page .audit-log-panel > .pagination,\nbody.audit-page .audit-log-panel > .audit-note {\n    flex: 0 0 auto;\n}\n\nbody.audit-page .audit-scroll-region {\n    flex: 1 1 auto;\n    min-height: 0;\n    max-height: none !important;\n    overflow: auto !important;\n    overscroll-behavior: contain;\n    scrollbar-gutter: stable;\n}\n\nbody.audit-page .audit-scroll-region .audit-table {\n    margin: 0;\n}\n\nbody.audit-page .audit-scroll-region .audit-table thead th {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n    background: var(--surface, #ffffff);\n    box-shadow: 0 1px 0 var(--border, #d7d7d7);\n}\n\nbody.audit-page .pagination {\n    padding: 10px 16px 4px;\n}\n\nbody.audit-page .audit-note {\n    margin: 0;\n    padding: 4px 16px 12px;\n}\n\n@media (max-width: 760px) {\n    body.audit-page .audit-page-main {\n        width: calc(100% - 16px);\n        margin: 8px auto;\n    }\n}\n\n\n/* Camera connectivity state */\n.camera-state.ready {\n    color: var(--success-dark);\n}\n\n.camera-state.ready .state-dot {\n    background: var(--success);\n}\n\n.camera-state.not-ready {\n    color: var(--danger, #c90107);\n}\n\n.camera-state.not-ready .state-dot {\n    background: var(--danger, #c90107);\n}\n\n.preview-frame.camera-disconnected {\n    min-height: 230px;\n    display: grid;\n    place-items: center;\n    background: var(--grey-100, #f4f4f4);\n}\n\n.preview-frame.camera-disconnected .preview {\n    opacity: 0;\n}\n\n.camera-disconnected-message {\n    display: none;\n}\n\n.preview-frame.camera-disconnected .camera-disconnected-message {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 24px;\n    text-align: center;\n    color: var(--grey-700, #434343);\n    background: var(--grey-100, #f4f4f4);\n}\n\n.camera-disconnected-message strong {\n    color: var(--black, #222);\n    font-size: 1rem;\n}\n\n.camera-disconnected-message span {\n    color: var(--grey-600, #666);\n    font-size: .78rem;\n}\n\n.preview-frame.camera-disconnected .live-label {\n    display: none;\n}\n

/* Camera status correction: one deterministic connected/offline state */
.camera-state.ready { color: #217346 !important; }
.camera-state.ready .state-dot { background-color: #217346 !important; }
.camera-state.not-ready { color: #c90107 !important; }
.camera-state.not-ready .state-dot { background-color: #c90107 !important; }

.preview-frame[data-camera-preview-frame] {
    position: relative;
    overflow: hidden;
    min-height: 230px;
}
.preview-frame.camera-disconnected {
    display: block !important;
    background: #f4f4f4 !important;
}
.preview-frame.camera-disconnected > img.preview {
    display: none !important;
}
.preview-frame.camera-connected .camera-disconnected-message {
    display: none !important;
}
.preview-frame.camera-disconnected .camera-disconnected-message {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    background: #f4f4f4 !important;
    color: #434343;
}
.live-label[hidden],
.capture-result[hidden],
.preview[hidden] {
    display: none !important;
}

/* Exterior two-state capture controls */
.exterior-capture-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .exterior-capture-actions {
        width: 100%;
        justify-content: stretch;
    }

    .exterior-capture-actions .button {
        flex: 1 1 150px;
    }
}


/* Standardised capture action buttons */
.capture-action-button {
    width: 132px;
    min-width: 132px;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .exterior-capture-actions .capture-action-button,
    #snapInterior.capture-action-button {
        width: 132px;
        min-width: 132px;
        flex: 0 0 132px;
    }
}


/* Capture actions: identical dimensions across State 1, State 2 and Interior */
.exterior-capture-actions .capture-action-button,
#snapInterior.capture-action-button {
    width: 156px !important;
    min-width: 156px !important;
    max-width: 156px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 156px !important;
    box-sizing: border-box;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}


/* THETA X live preview only: correct client-mode preview orientation and provide a taller viewing area.
   Saved 360 photographs are not affected. */
#interiorCameraContainer .preview-frame {
    overflow: hidden;
}

#interiorCameraContainer img.preview.theta {
    height: 340px !important;
    min-height: 340px;
    object-fit: cover;
    transform: rotate(180deg);
    transform-origin: center center;
}

@media (max-width: 720px) {
    #interiorCameraContainer img.preview.theta {
        height: 290px !important;
        min-height: 290px;
    }
}