.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.delete-image-preview {
    top: 0.25rem;
    right: 0.5rem;
    backdrop-filter: brightness(1.618) blur(5px);
}

input[type="file"]+*>img[src]:not([src=""]) {
    margin-left: auto;
    margin-top: 0.25rem;
    margin-right: 0.25rem;
    max-width: calc(100% - 0.5rem);
}

.d-flex[style*="display:block"],
.d-flex[style*="display: block"],
.flex-column[style*="display:block"],
.flex-column[style*="display: block"],
.flex-row[style*="display:block"],
.flex-row[style*="display: block"],
.row[style*="display:block"],
.row[style*="display: block"] {
    display: flex !important;
}

.form-switch.form-check-reverse.row .form-check-input {
    margin-left: 0;
    margin-right: 0;
}

.col-form-label:has(+ .form-text) {
    padding-bottom: 0;
}

.col-form-label+.form-text {
    margin-top: 0;
}

@media screen and (width < 576px) {

    .form-switch.form-check-reverse.row>div[class*="col-sm-"]:has(label),
    .form-switch.form-check-reverse.row>label[class*="col-sm-"] {
        flex: 1 1 0;
    }

    .form-switch.form-check-reverse.row>div[class*="col-sm-"]:has(input) {
        flex: 0 0 auto;
        width: auto;
    }

}

@media screen and (width < 768px) {

    .form-switch.form-check-reverse.row>div[class*="col-md-"]:has(label),
    .form-switch.form-check-reverse.row>label[class*="col-md-"] {
        flex: 1 1 0;
    }

    .form-switch.form-check-reverse.row>div[class*="col-md-"]:has(input) {
        flex: 0 0 auto;
        width: auto;
    }
}

.row .select2-container--default {
    width: 100% !important;
}

.select2-container--default .form-select.select2-selection {
    background-color: var(--bs-white);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bz-radius-control);
    min-height: var(--bz-control-h);
}

.select2-container--default .form-select.select2-selection .select2-selection__rendered {
    color: var(--bs-body-color);
    font-size: 15px;
    line-height: 1.4;
    padding-left: 0;
    padding-right: 0;
}

.select2-container--default .form-select.select2-selection .select2-selection__clear {
    font-size: 1.5rem;
    line-height: 1;
    font-weight: normal;
    margin-right: 0;
    padding: 0;
}

.select2-container--default .form-select.select2-selection--single .select2-selection__clear {
    margin-top: 0;
}

.select2-container--default .form-select.select2-selection .select2-selection__arrow {
    display: none;
}

.select2-container--default.select2-container--focus .form-select.select2-selection--multiple {
    border-color: var(--bs-primary);
}

.select2-container--default .form-select.select2-selection--multiple {
    padding-block: 0;
}

.select2-container--default.select2-container--open .form-select.select2-selection,
.select2-container--default.select2-container--focus .form-select.select2-selection {
    border-color: var(--bs-primary);
    box-shadow: var(--bz-focus-halo);
}

.select2-container--default .form-select.select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);
    border-radius: 6px;
    margin-top: 0.375rem;
    line-height: calc(1.5rem - 2px);
}

.select2-container--default .form-select.select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0;
    color: var(--bs-body-color);
    font-weight: normal;
    font-size: 1em;
}

.select2-container--default .select2-search--dropdown .form-control.select2-search__field {
    border-color: var(--bs-border-color);
    padding: .375rem .75rem;
}

.select2-container--default .select2-search--dropdown .form-control.select2-search__field:focus {
    border-color: var(--bs-primary);
}

.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 0.375rem !important;
}

.select2-dropdown {
    background-color: var(--bs-white) !important;
    border-color: var(--bs-border-color) !important;
    border-radius: var(--bz-radius-overlay) !important;
    box-shadow: var(--bz-shadow-overlay);
    overflow: hidden;
}

.select2-search--dropdown {
    padding: .75rem !important;
}

.select2-results__option {
    padding: .375rem .75rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.select2-results__option * {
    overflow-wrap: break-word;
}
#eventFilesUploader .nav-tabs .nav-link.active {
    background-color: var(--bs-modal-bg, #fff);
    border-bottom-color: var(--bs-modal-bg, #fff);
}

/* ---------- Footer ---------- */
.main-footer {
    background: var(--bz-canvas);
    color: var(--bz-text-muted);
    border-top: 1px solid var(--bz-border);
    padding: 20px 0 !important;
}

.main-footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}

.main-footer .footer-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.main-footer .footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bz-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.main-footer .footer-links a:hover {
    color: var(--bz-brand-hover);
    text-decoration: underline;
}

.main-footer .footer-links .bz-icon {
    width: 14px;
    height: 14px;
}

.main-footer .footer-copy {
    margin: 0;
}

/* ---------- Badges ---------- */
.badge-beta {
    background-color: var(--bz-accent-warm-soft);
    color: var(--bz-accent-warm);
}

.badge-new {
    background-color: var(--bz-brand-soft);
    color: var(--bz-brand);
}

/* ---------- Header dropdowns ---------- */
@media (min-width: 992px) {
    /* Open sub-menus on hover (auto collapse when the mouse leaves).
       The notifications dropdown is excluded — it opens on click only.
       A 6px visual gap sits between the item and its menu; the gap is
       part of the hover region so the pointer can travel into the menu. */
    .main-header .nav-item.dropdown:not(.notifications-dropdown):hover > .dropdown-menu {
        display: block;
        top: 100%;
        left: 0;
        margin-top: 6px;
    }

    .main-header .nav-item.dropdown > .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -7px;
        height: 7px;
    }

    .main-header .dropdown-menu {
        min-width: 240px;
    }
}

/* ---------- Page header: crumbs → H1 → introduction, actions on the right ---------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-header__main {
    min-width: 0;
    flex: 1 1 420px;
}

.page-header__title {
    margin: 0;
}

.page-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* Introduction: 16px / 400 / 1.55, muted, about 660px wide */
.page-intro {
    margin: 8px 0 0;
    max-width: 660px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--bz-text-muted);
    text-wrap: pretty;
}

/* Breadcrumbs (BRE-1294): a compact bordered strip so the trail reads as
   navigation rather than helper text — 32px white container, 8px radius,
   13/600 links, chevron separators, current location in brand indigo. */
.crumbs {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 12px;
    padding: 0 8px 0 0;
    min-height: 32px;
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    color: var(--bz-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    max-width: 100%;
}

.crumbs a,
.crumbs > span:not(.separator):not(.nav-chevron) {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.crumbs a {
    color: var(--bz-text-secondary);
    text-decoration: none;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.crumbs a:hover {
    color: var(--bz-brand-hover);
    background: var(--bz-surface-muted);
    text-decoration: none;
}

.crumbs a:focus-visible {
    outline: 2px solid var(--bz-brand);
    outline-offset: -2px;
}

.crumbs .active-crumb {
    color: var(--bz-brand);
    font-weight: 600;
}

.crumbs .separator {
    display: inline-flex;
    align-items: center;
    color: var(--bz-text-disabled);
    font-size: 0;
    line-height: 0;
}

.crumbs .separator > .bz-icon { width: 14px; height: 14px; }

.crumbs .nav-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 6px;
    padding: 0;
    color: var(--bz-text-secondary);
    border-right: 1px solid var(--bz-divider);
    border-radius: 7px 0 0 7px;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.crumbs .nav-chevron.is-disabled {
    opacity: .35;
    cursor: default;
}

.crumbs .nav-chevron:not(.is-disabled):hover {
    background: var(--bz-surface-muted);
    color: var(--bz-brand);
    text-decoration: none;
}

@media (max-width: 767px) {
    .page-intro { font-size: 15px; }
    .crumbs { margin-bottom: 8px; }
}

/* ---------- Dashboard tiles ---------- */
.dashboard-tiles .card {
    color: var(--bz-text);
    transition: border-color .12s ease, background-color .12s ease;
}

.dashboard-tiles .card:hover,
.dashboard-tiles .card:focus-visible {
    background-color: var(--bz-surface-subtle);
    border-color: var(--bz-control-border);
}

.dashboard-tiles .card-body > .d-flex {
    align-items: flex-start;
    gap: 12px;
}

.dashboard-tiles .card-body > .d-flex > .bz-icon,
.dashboard-tiles .card-body > .d-flex > .bz-brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: var(--bz-radius-control);
    background: var(--bz-brand-soft);
    color: var(--bz-brand);
    font-size: 18px;
}

/* Highlighted tile (new feature): brand-tinted border, same hover as the rest */
.dashboard-tiles .card--highlight {
    border-color: var(--bz-brand-soft);
    box-shadow: 0 0 0 1px var(--bz-brand-soft);
}

.dashboard-tiles .card--highlight:hover,
.dashboard-tiles .card--highlight:focus-visible {
    border-color: var(--bz-brand);
    box-shadow: none;
}

/* Dashboard tile icons are solid Font Awesome glyphs (brand silhouettes for Apple/Windows), all on the indigo tint */
.dashboard-tiles .card-body > .d-flex > .bz-brand-mark {
    line-height: 1;
}

/* ---------- Formatted (JSON) lists ---------- */
/* reset.css strips list markers/indentation from every ul/ol; restore them
   here so the recursively rendered lists show bullets and nest visibly. */
.formatted-list ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.formatted-list ul ul {
    list-style: circle;
}

/* ---------- Emulation banner ---------- */
.emulation-banner {
    background: var(--bz-warning-soft);
    color: var(--bz-warning);
    border-bottom: 1px solid #f3e3a3;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
}

.emulation-banner .bz-icon {
    margin-right: 6px;
}

/* ---------- Header right-hand controls ---------- */
@media (max-width: 991.98px) {
    .main-header .header-controls {
        padding-top: 12px;
        border-top: 1px solid var(--bz-divider);
    }
}

/* ---------- Auth pages ---------- */
.wrapper > .container-lg.my-auto {
    padding-top: 40px;
    padding-bottom: 40px;
}

.auth-card__brand {
    display: flex;
    justify-content: center;
    padding-bottom: 0;
}

.auth-card__logo {
    height: 28px;
    width: auto;
}

.auth-card h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.auth-card .form-control {
    font-size: 16px;
}

/* =========================================================================
   APP SHELL — header row, sidebar rail, main column (mirrors the Event
   Editor's .breeze-shell so the embedded editor reads as one application)
   ========================================================================= */
:root {
    --bz-sidebar-w: 260px;
    --bz-sidebar-collapsed-w: 76px;
}

.breeze-shell {
    display: grid;
    grid-template-columns: var(--bz-sidebar-w) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "header header"
        "banner banner"
        "sidebar main";
    min-height: 100vh;
    background: var(--bz-canvas);
    transition: grid-template-columns var(--bz-transition-base);
}

.breeze-shell--nav-collapsed {
    grid-template-columns: var(--bz-sidebar-collapsed-w) minmax(0, 1fr);
}

.breeze-shell > .main-header { grid-area: header; min-width: 0; }
.breeze-shell > .emulation-banner { grid-area: banner; }
.breeze-shell > .breeze-sidebar { grid-area: sidebar; min-width: 0; }
.breeze-shell > .breeze-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }

.breeze-main > .main-content { flex: 1 1 auto; }

/* ---------- Header ----------
   Shared header anatomy (identical in the Event Editor's app-status-bar):
   [wordmark 20px] 16px [hairline 1×24] 16px [product switcher] … [page controls]
   Header is 60px, white, 1px bottom border, 0 20px padding (theme.css .main-header). */
.breeze-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--bz-header-h);
}

.breeze-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
    border-radius: var(--bz-radius-control);
    text-decoration: none;
}

.breeze-brand:focus-visible {
    outline: 2px solid var(--bz-brand);
    outline-offset: 3px;
}

.breeze-brand__wordmark {
    display: block;
    height: 20px;
    width: auto;
    aspect-ratio: 534 / 118;
}

/* ---------- Header product switcher (Breeze Cloud ⇄ Event Editor) ---------- */
.breeze-header-divider {
    width: 1px;
    height: 24px;
    background: var(--bz-border);
    margin: 0 4px;
    flex: 0 0 auto;
}

.breeze-app-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Navigation row at header scale (§6 Navigation): 36px tall, 8px radius,
   18px outline icon, 11px icon gap, 15px text; selected = indigo on pale indigo, 600. */
.breeze-app-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--bz-radius-control);
    color: var(--bz-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.breeze-app-nav__link > .bz-icon {
    color: var(--bz-text-secondary);
    opacity: .85;
}

.breeze-app-nav__link:hover {
    background: var(--bz-surface-muted);
    color: var(--bz-text);
    text-decoration: none;
}

.breeze-app-nav__link:focus-visible {
    outline: 2px solid var(--bz-brand);
    outline-offset: -2px;
}

.breeze-app-nav__link.active {
    background: var(--bz-brand-soft);
    color: var(--bz-brand);
    font-weight: 600;
}

.breeze-app-nav__link.active > .bz-icon {
    color: var(--bz-brand);
    opacity: 1;
}

@media (max-width: 991.98px) {
    /* Below lg the drawer's section list is the switcher (partials/sidebar) */
    .breeze-app-nav, .breeze-header-divider { display: none; }
}

.breeze-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 36px square icon button (header + sidebar controls) */
.bz-icobtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--bz-text-secondary);
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    cursor: pointer;
    transition: background-color var(--bz-transition-fast), border-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.bz-icobtn:hover {
    color: var(--bz-text);
    background: var(--bz-surface-muted);
    border-color: var(--bz-control-border);
}

.bz-icobtn:disabled {
    opacity: .55;
    cursor: default;
}

/* ---------- Sidebar ---------- */
.breeze-sidebar {
    background: var(--bz-surface);
    border-right: 1px solid var(--bz-border);
    transition: padding var(--bz-transition-base);
}

.breeze-sidebar-body {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    min-height: 100%;
}

@media (min-width: 992px) {
    /* Sticky, viewport-tall rail (minus the header row) */
    .breeze-shell > .breeze-sidebar {
        position: sticky;
        top: 0;
        height: calc(100vh - var(--bz-header-h));
        /* overflow-x can't be visible while overflow-y is auto (it computes to
           auto and shows a horizontal bar), so clip; the collapsed rail sets
           overflow: visible instead so its flyouts and tooltips can hang out. */
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        z-index: 1001;
        /* neutralise Bootstrap's responsive offcanvas defaults at ≥lg */
        background-color: var(--bz-surface) !important;
        border-right: 1px solid var(--bz-border) !important;
    }

    .breeze-shell > .breeze-sidebar > .offcanvas-body {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: visible;
        padding: 22px 20px;
        background-color: transparent !important;
    }
}

.breeze-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
    min-height: 30px;
}

/* Same 30px bordered icon button as the Event Editor's sidebar toggle */
.breeze-sidebar-toggle { width: 30px; height: 30px; border-color: var(--bz-border); }
.breeze-sidebar-toggle:hover { border-color: var(--bz-control-border); background: var(--bz-surface-muted); }
.breeze-sidebar-toggle__expand { display: none; }

.breeze-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.breeze-side-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--bz-text-disabled);
    margin: 0 0 6px 10px;
    white-space: nowrap;
}

/* Section heading at the top of the sidebar panel */
.breeze-sidebar-title { margin-bottom: 8px; }

/* Collapsible sub-groups inside a section's item list */
.breeze-subnav { display: flex; flex-direction: column; }
.breeze-subnav + .breeze-subnav { margin-top: 10px; }

.breeze-subnav-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 10px);
    padding: 4px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.breeze-subnav-toggle:hover { color: var(--bz-text-muted); }

.breeze-subnav-caret {
    margin-left: auto;
    transition: transform var(--bz-transition-base);
}

.breeze-subnav-toggle[aria-expanded="true"] > .breeze-subnav-caret { transform: rotate(180deg); }

.breeze-subnav-items { gap: 2px; }
.breeze-subnav-items.show { display: flex; flex-direction: column; }

/* Mobile-only section list inside the drawer */
.breeze-sidebar-sections {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--bz-divider);
}

/* Drawer accordion: a section row toggles its items in place (Bootstrap collapse) */
.breeze-drawer-group { display: flex; flex-direction: column; gap: 2px; }

.breeze-nav-link > .bz-icon.breeze-drawer-caret {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--bz-text-disabled);
    transition: transform var(--bz-transition-base);
}

.breeze-drawer-toggle[aria-expanded="true"] > .breeze-drawer-caret { transform: rotate(180deg); }

/* An open group's row stays quiet; the active child row carries the indigo state */
.breeze-drawer-group.is-active > .breeze-drawer-toggle[aria-expanded="true"] {
    background: transparent;
    color: var(--bz-text);
}

.breeze-drawer-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 4px 12px;
    margin-left: 18px;
    border-left: 1px solid var(--bz-divider);
}

.breeze-drawer-items .breeze-nav-link { padding: 7px 10px; font-size: 14px; }
.breeze-drawer-items .breeze-nav-link > .bz-icon { width: 16px; height: 16px; flex-basis: 16px; }

.breeze-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--bz-radius-control);
    background: transparent;
    color: var(--bz-text);
    font: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bz-transition-fast), color var(--bz-transition-fast);
}

.breeze-nav-link > .bz-icon,
.breeze-nav-link > .bz-brand-mark {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--bz-text-secondary);
    opacity: .85;
}

.breeze-nav-link > .bz-brand-mark { font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }

.breeze-nav-link > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breeze-nav-link:hover { background: var(--bz-surface-muted); color: var(--bz-text); }
.breeze-nav-link:focus-visible { outline: 2px solid var(--bz-brand); outline-offset: -2px; }

.breeze-nav-link.active {
    background: var(--bz-brand-soft);
    color: var(--bz-brand-hover);
    font-weight: 600;
}

.breeze-nav-link.active > .bz-icon,
.breeze-nav-link.active > .bz-brand-mark { color: var(--bz-brand); opacity: 1; }

/* Tooltips shown beside the collapsed rail */
/* Tooltips only exist in the collapsed rail; keep them out of layout otherwise */
.breeze-nav-tip {
    display: none;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bz-text);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bz-transition-fast);
    z-index: 60;
}

/* ---------- Account card (sidebar footer) — opens the account menu ---------- */
.breeze-sidebar-account {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--bz-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Hairline between "Pair a device" and the account row, as in Breeze Studio */
.breeze-sidebar-account .breeze-account-card {
    padding-top: 12px;
    border-top: 1px solid var(--bz-divider);
}

/* ---------- "Pair a device" (BRE-1292) — identical to Breeze Studio's sidebar footer ---------- */
.breeze-pair { position: relative; }

.breeze-pair-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-control);
    background: var(--bz-surface);
    color: var(--bz-text-secondary);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--bz-transition-fast), color var(--bz-transition-fast), border-color var(--bz-transition-fast);
}

.breeze-pair-btn > .bz-icon { color: var(--bz-brand); flex: 0 0 auto; }
.breeze-pair-btn:hover { background: var(--bz-surface-muted); color: var(--bz-text); border-color: var(--bz-control-border); }
.breeze-pair-btn:focus-visible { outline: 2px solid var(--bz-brand); outline-offset: 2px; }
.breeze-pair.is-open .breeze-pair-btn { border-color: var(--bz-brand); color: var(--bz-brand); background: var(--bz-brand-soft); }
.breeze-pair.is-open .breeze-nav-tip { display: none; }

.breeze-pair-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.breeze-pair-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bz-text-disabled);
    flex: 0 0 auto;
}
.breeze-pair-dot.is-ready { background: #22c55e; }

.breeze-pair-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 100%;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-overlay);
    padding: 16px;
    box-shadow: var(--bz-shadow-overlay);
    z-index: 1100;
}
.breeze-pair-popover[hidden] { display: none; }

.breeze-pair-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
/* 30px icon buttons (§6) inside the popover — fixed size so flex/grid never squash them */
.breeze-pair-popover .bz-icobtn {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
}
.breeze-pair-popover .bz-icobtn > .bz-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.breeze-pair-title { font-size: 18px; font-weight: 600; line-height: 1.4; }
.breeze-pair-sub { font-size: 14px; color: var(--bz-text-muted); line-height: 1.5; }

.breeze-pair .qr-box {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bz-surface);
    border-radius: var(--bz-radius-card);
    padding: 8px;
    border: 1px solid var(--bz-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.breeze-pair .qr-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.breeze-pair .qr-box img[hidden] { display: none; }
.breeze-pair .qr-loading { font-size: 13px; color: var(--bz-text-muted); text-align: center; padding: 8px; }

.breeze-pair .link-url-label { font-size: 13px; font-weight: 600; color: var(--bz-text); margin-bottom: 6px; }
.breeze-pair .link-url-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px 30px;
    gap: 8px;
    align-items: center;
}
.breeze-pair .link-url-row .link-url { height: 30px; line-height: 16px; }
.breeze-pair .link-url {
    min-width: 0;
    border: 1px solid var(--bz-border);
    background: var(--bz-surface-subtle);
    border-radius: var(--bz-radius-control);
    padding: 6px 10px;
    font-family: var(--bz-font-code);
    font-size: 12px;
    color: var(--bz-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-settings-modal-card .modal-subtitle { font-size: 14px; color: var(--bz-text-muted); }
.qr-settings-modal-card .form-label { font-weight: 600; color: var(--bz-text); margin-bottom: 6px; }
.qr-settings-modal-card .form-check-label { color: var(--bz-text-secondary); }

.breeze-account-card { position: relative; }

.breeze-account-card .account-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    margin: -6px;
    border: 0;
    border-radius: var(--bz-radius-control);
    background: transparent;
    color: var(--bz-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--bz-transition-fast);
}

.breeze-account-card .account-row:hover,
.breeze-account-card .account-row[aria-expanded="true"] { background: var(--bz-surface-muted); }
.breeze-account-card .account-row:focus-visible { outline: 2px solid var(--bz-brand); outline-offset: 2px; }

.breeze-account-card .account-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--bz-radius-control);
    background: var(--bz-brand-soft);
    color: var(--bz-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.breeze-account-card .account-meta { display: block; min-width: 0; flex: 1 1 0; }
.breeze-account-card .account-name { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breeze-account-card .account-sub { display: block; font-size: 12px; color: var(--bz-text-disabled); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.breeze-account-card .account-caret {
    flex: 0 0 14px;
    color: var(--bz-text-disabled);
    transition: transform var(--bz-transition-base);
}

.breeze-account-card .account-row[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

/* The popup: overlay style, sized to the expanded rail */
/* Expanded rail clips horizontally, so the menu matches the card's width;
   the collapsed rail is overflow: visible, so it can take its full width there. */
.account-menu {
    --bs-dropdown-min-width: 0;
    width: 100%;
}

@media (min-width: 992px) {
    .breeze-shell--nav-collapsed .account-menu { width: 248px; }
}

.account-menu__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 6px;
}

.account-menu .dropdown-item.active { pointer-events: none; }
.account-menu .dropdown-item.active > .bz-icon { color: var(--bz-brand); }
.account-menu .dropdown-item.active:disabled {
    opacity: 1;
    color: var(--bz-brand-hover);
    background: var(--bz-brand-soft);
}
.account-menu__logout { color: var(--bz-danger); }
.account-menu__logout:hover,
.account-menu__logout:focus { color: var(--bz-danger); background: var(--bz-danger-soft); }
.account-menu__logout > .bz-icon { color: var(--bz-danger); }

/* ---------- Collapsed 76px rail: icons only, flyouts + tooltips on hover ---------- */
@media (min-width: 992px) {
    /* Flyouts and tooltips hang outside the 76px rail, so it must not clip */
    .breeze-shell--nav-collapsed > .breeze-sidebar { overflow: visible; }
    .breeze-shell--nav-collapsed > .breeze-sidebar > .offcanvas-body { padding: 20px 14px; overflow: visible; }
    .breeze-shell--nav-collapsed .breeze-sidebar-head { justify-content: center; }
    .breeze-shell--nav-collapsed .breeze-sidebar-toggle__collapse { display: none; }
    .breeze-shell--nav-collapsed .breeze-sidebar-toggle__expand { display: block; }

    .breeze-shell--nav-collapsed .breeze-side-title {
        margin: 0 0 8px;
        height: 1px;
        overflow: hidden;
        text-indent: -999px;
        background: var(--bz-divider);
    }

    /* The icon rail has no room for group toggles: show every group's items, divided by a line */
    .breeze-shell--nav-collapsed .breeze-subnav-toggle { width: 100%; padding: 0; pointer-events: none; }
    .breeze-shell--nav-collapsed .breeze-subnav-caret { display: none; }
    .breeze-shell--nav-collapsed .breeze-subnav-items {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
    }

    .breeze-shell--nav-collapsed .breeze-nav-link {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
    }

    .breeze-shell--nav-collapsed .breeze-nav-link > span:first-of-type { display: none; }

    .breeze-shell--nav-collapsed .breeze-nav-tip { display: block; }

    .breeze-shell--nav-collapsed .breeze-nav-link:hover > .breeze-nav-tip,
    .breeze-shell--nav-collapsed .breeze-nav-link:focus-visible > .breeze-nav-tip { opacity: 1; }

    /* Pair a device: icon-only button with tooltip; the popover hangs beside the rail */
    .breeze-shell--nav-collapsed .breeze-pair-btn { justify-content: center; gap: 0; padding: 10px 0; }
    .breeze-shell--nav-collapsed .breeze-pair-btn .breeze-pair-label,
    .breeze-shell--nav-collapsed .breeze-pair-btn .breeze-pair-dot { display: none; }
    .breeze-shell--nav-collapsed .breeze-pair-btn > .breeze-nav-tip { display: block; }
    .breeze-shell--nav-collapsed .breeze-pair-btn:hover > .breeze-nav-tip,
    .breeze-shell--nav-collapsed .breeze-pair-btn:focus-visible > .breeze-nav-tip { opacity: 1; }
    .breeze-shell--nav-collapsed .breeze-pair-popover {
        position: fixed;
        left: calc(var(--bz-sidebar-collapsed, 76px) + 10px);
        bottom: 24px;
        width: 288px;
    }

    /* Account: avatar only; the menu opens beside the rail */
    .breeze-shell--nav-collapsed .breeze-account-card .account-row { justify-content: center; padding: 6px 0; margin: 0; }
    .breeze-shell--nav-collapsed .breeze-account-card .account-row .account-meta,
    .breeze-shell--nav-collapsed .breeze-account-card .account-caret { display: none; }
}

/* ---------- Below lg: header + main stack; the sidebar is an offcanvas panel ---------- */
@media (max-width: 991.98px) {
    .breeze-shell,
    .breeze-shell--nav-collapsed {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "banner"
            "main";
    }

    .breeze-shell > .breeze-sidebar { grid-area: auto; }

    .breeze-sidebar.offcanvas-lg {
        --bs-offcanvas-width: var(--bz-sidebar-w);
        border-right: 0;
    }

    .breeze-sidebar .offcanvas-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        min-height: var(--bz-header-h);
        border-bottom: 1px solid var(--bz-border);
    }

    /* min-height: 0 undoes the desktop 100% rule, which would push the footer past the drawer header */
    .breeze-sidebar .offcanvas-body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

    /* Mobile browsers: size the drawer to the visible viewport so the footer isn't cut by the toolbar */
    @supports (height: 100dvh) {
        .breeze-sidebar.offcanvas-lg { height: 100dvh; }
    }

    /* Account menu renders in flow above the account row instead of a Popper overlay,
       which the scrolling drawer would clip. The !important overrides Popper's inline styles. */
    .breeze-sidebar .breeze-account-card { display: flex; flex-direction: column-reverse; }
    .breeze-sidebar .account-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        margin: 0 0 8px !important;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .breeze-shell { transition: none; }
}