/* NOTE (UX pass): the page-level "surface" containers below previously used
   `overflow-wrap: anywhere`. Because that property also lets a box shrink to a
   single character when the browser computes min-content width, every word on
   every page inherited permission to break mid-character - producing
   "Photograp/her", "Collaborat/ing" and "Sta/tus". `break-word` gives the same
   protection against genuinely unbreakable strings without the shrink-to-one-
   character side effect. Components that really do hold URLs or codes
   (.qr-payload, .code-block) keep `anywhere` in app.css. */

/* Compatibility-first component contracts. Existing pages migrate to these in later Himu tasks. */
.bz-app { min-height: 100vh; }
.bz-sidebar { min-width: 0; }
.bz-main { min-width: 0; }
.bz-content { min-width: 0; }
.bz-page { display: grid; gap: var(--bz-space-8); min-width: 0; }
.bz-page-header { align-items: flex-start; display: flex; gap: var(--bz-space-6); justify-content: space-between; }
.bz-page-header__content { min-width: 0; }
.bz-page-header__eyebrow { color: var(--bz-text-tertiary); font-size: var(--bz-text-supporting); letter-spacing: 0.08em; text-transform: uppercase; }
.bz-page-header__title { color: var(--bz-text-primary); font-size: var(--bz-text-page-title); line-height: 1.15; margin: 0; }
.bz-page-header__description { color: var(--bz-text-secondary); margin: var(--bz-space-2) 0 0; max-width: 720px; }
.bz-page-header__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bz-space-2); }
.bz-section { display: grid; gap: var(--bz-space-4); min-width: 0; }
.bz-section-header { align-items: flex-end; display: flex; gap: var(--bz-space-4); justify-content: space-between; }
.bz-section-title { color: var(--bz-text-primary); font-size: var(--bz-text-section-title); margin: 0; }
.bz-section-description { color: var(--bz-text-secondary); margin: 0; }
.bz-card { background: var(--bz-bg-surface); border: 1px solid var(--bz-border-default); border-radius: var(--bz-radius-md); min-width: 0; }
.bz-card--raised { box-shadow: var(--bz-shadow-md); }
.bz-card--interactive { transition: border-color 160ms ease, background-color 160ms ease; }
.bz-card--interactive:hover { background: var(--bz-bg-surface-hover); border-color: var(--bz-border-strong); }
.bz-card__header, .bz-card__body, .bz-card__footer { padding: var(--bz-space-5); }
.bz-card__header + .bz-card__body, .bz-card__body + .bz-card__footer { padding-top: 0; }
.bz-kpi-grid { display: grid; gap: var(--bz-space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bz-kpi-card { background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-md); padding: var(--bz-space-5); }
.bz-kpi-card__label, .bz-kpi-card__support { color: var(--bz-text-secondary); font-size: var(--bz-text-supporting); }
.bz-kpi-card__value { color: var(--bz-text-primary); font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.1; margin: var(--bz-space-2) 0; }
.bz-btn { align-items: center; border: 1px solid var(--bz-border-default); border-radius: var(--bz-radius-sm); cursor: pointer; display: inline-flex; gap: var(--bz-space-2); justify-content: center; min-height: 42px; padding: 9px 14px; }
.bz-btn--primary { background: var(--bz-brand-gradient); border-color: transparent; color: #fff; }
.bz-btn--primary:hover { background: var(--bz-brand-gradient-hover); border-color: transparent; }
.bz-btn--secondary { background: var(--bz-bg-surface-raised); color: var(--bz-text-primary); }
.bz-btn--ghost { background: transparent; color: var(--bz-text-secondary); }
.bz-btn--danger { background: var(--bz-danger-soft); border-color: rgba(251, 113, 133, 0.35); color: var(--bz-danger); }
.bz-btn--success { background: var(--bz-success-soft); border-color: rgba(52, 211, 153, 0.35); color: var(--bz-success); }
.bz-btn--sm { min-height: 36px; padding: 7px 10px; }
.bz-btn--lg { min-height: 48px; padding: 12px 18px; }
.bz-btn--icon { min-width: 42px; padding: 9px; }
.bz-form-grid { display: grid; gap: var(--bz-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.currency-display-selector {
    display: grid;
    gap: .5rem;
    max-width: 28rem;
}

.currency-display-selector label {
    display: grid;
    gap: .45rem;
    font-weight: 700;
}

.currency-display-selector select {
    min-height: 2.75rem;
}

.currency-display-selector small,
.currency-display-approx {
    color: var(--bz-text-muted, #a8afc2);
    font-size: .82rem;
}
.account-menu-currency {
    border-top: 1px solid var(--bz-border-default, rgba(255,255,255,.1));
    margin-top: .75rem;
    padding-top: .75rem;
}
.account-menu-currency .currency-display-selector { max-width: none; }
.currency-display-checkout-note {
    display: grid;
    gap: .25rem;
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid var(--bz-border-default, rgba(255,255,255,.12));
    border-radius: var(--bz-radius-sm, .5rem);
    background: var(--bz-bg-subtle, rgba(255,255,255,.04));
}
.currency-display-checkout-note span { color: var(--bz-text-secondary, #c7ccda); }
.currency-display-checkout-note small { color: var(--bz-text-muted, #a8afc2); }
.bz-field { display: grid; gap: var(--bz-space-2); }
.bz-label { color: var(--bz-text-secondary); font-size: var(--bz-text-supporting); font-weight: 600; }
.bz-input, .bz-select, .bz-textarea { background: var(--bz-bg-input); border: 1px solid var(--bz-border-default); border-radius: var(--bz-radius-sm); color: var(--bz-text-primary); min-height: 42px; padding: 10px 12px; }
.bz-input:focus, .bz-select:focus, .bz-textarea:focus, .bz-btn:focus-visible { border-color: var(--bz-brand); box-shadow: 0 0 0 3px var(--bz-brand-soft); outline: none; }
.bz-help-text { color: var(--bz-text-tertiary); font-size: var(--bz-text-supporting); }
.bz-table-shell { min-width: 0; overflow-x: auto; }
.bz-table { border-collapse: collapse; min-width: 640px; width: 100%; }
.bz-table th, .bz-table td { border-bottom: 1px solid var(--bz-border-subtle); padding: 12px 16px; text-align: left; }
.bz-badge { align-items: center; border: 1px solid var(--bz-border-default); border-radius: var(--bz-radius-pill); display: inline-flex; font-size: var(--bz-text-supporting); gap: 6px; min-height: 26px; padding: 4px 9px; }
.bz-badge--neutral { color: var(--bz-text-secondary); }
.bz-badge--success { background: var(--bz-success-soft); color: var(--bz-success); }
.bz-badge--warning { background: var(--bz-warning-soft); color: var(--bz-warning); }
.bz-badge--danger { background: var(--bz-danger-soft); color: var(--bz-danger); }
.bz-badge--info { background: var(--bz-info-soft); color: var(--bz-info); }
.bz-badge--brand { background: var(--bz-brand-soft); color: var(--bz-brand-hover); }
.bz-progress { background: var(--bz-bg-surface-raised); border-radius: var(--bz-radius-pill); height: 8px; overflow: hidden; }
.bz-progress__bar { background: var(--bz-brand); border-radius: inherit; height: 100%; }
/* Spacing lives in bz-ux.css with the border and radius; the gap and padding
   stated here never showed. */
.bz-empty { align-items: center; color: var(--bz-text-secondary); display: grid; justify-items: center; text-align: center; }
.empty-state { min-width: 0; overflow-wrap: break-word; }
.bz-alert { border: 1px solid var(--bz-border-default); border-radius: var(--bz-radius-md); padding: var(--bz-space-4); }
.bz-alert--success { background: var(--bz-success-soft); color: var(--bz-success); }
.bz-alert--warning { background: var(--bz-warning-soft); color: var(--bz-warning); }
.bz-alert--danger { background: var(--bz-danger-soft); color: var(--bz-danger); }
.bz-alert--info { background: var(--bz-info-soft); color: var(--bz-info); }
.alert.bz-alert { border-radius: var(--bz-radius-md); overflow-wrap: break-word; }
.bz-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bz-space-3); justify-content: space-between; }
.bz-toolbar__group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bz-space-2); }
.bz-tabs { align-items: center; border-bottom: 1px solid var(--bz-border-subtle); display: flex; gap: var(--bz-space-4); overflow-x: auto; }
.bz-tab { border-bottom: 2px solid transparent; color: var(--bz-text-secondary); padding: 10px 2px; white-space: nowrap; }
.bz-tab--active { border-color: var(--bz-brand); color: var(--bz-text-primary); }
.bz-avatar { align-items: center; background: var(--bz-brand-soft); border-radius: 50%; color: var(--bz-brand-hover); display: inline-flex; justify-content: center; overflow: hidden; }
.bz-avatar--sm { height: 32px; width: 32px; }
.bz-avatar--md { height: 40px; width: 40px; }
.bz-avatar--lg { height: 56px; width: 56px; }

/* Dashboard migration contract: role-specific layouts keep their information architecture,
   while shared containment and token semantics can be adopted incrementally. */
.bz-dashboard-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-dashboard-surface img,
.bz-dashboard-surface svg,
.bz-dashboard-surface table {
    max-width: 100%;
}
.bz-dashboard-surface :is(.mc-panel, .staff-panel, .acd-panel, .ccd-panel) {
    min-width: 0;
}

/* Projects/board migration contract: preserve existing workflow markup while
   adopting shared containment for dense cards, tables, media, and controls. */
.bz-project-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-project-surface img,
.bz-project-surface svg,
.bz-project-surface table {
    max-width: 100%;
}

/* Auth contract: additive containment and token spacing layered over the existing auth skin. */
.bz-auth-shell { min-height: 100vh; }
.bz-auth-card { min-width: 0; overflow-wrap: break-word; }
.bz-auth-form { min-width: 0; }
.bz-auth-form input, .bz-auth-form select { max-width: 100%; }

/* Shared interaction states: additive only, so existing submit hooks and labels stay intact. */
button, input, select, textarea { font: inherit; }
/* The focus ring is declared once, in bz-ux.css - the last stylesheet the
   page loads, so nothing can quietly cancel it again. */
summary:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[data-wizard-close]:focus-visible {
    outline: 3px solid var(--bz-focus-ring);
    outline-offset: 2px;
}
button:disabled, [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
}
[aria-invalid="true"],
.field-error input,
.field-error select,
.field-error textarea {
    border-color: var(--bz-danger);
    box-shadow: 0 0 0 3px var(--bz-danger-soft);
}
.field-error-message,
.form-error,
[data-field-error] {
    color: var(--bz-danger);
    font-size: var(--bz-text-supporting);
    font-weight: 700;
}

/* Shared shell navigation: preserve the desktop rail, add a reversible mobile drawer. */
.bz-mobile-menu-toggle {
    align-items: center;
    background: rgba(10, 13, 24, 0.92) !important;
    border: 1px solid rgba(168, 85, 247, 0.42) !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38) !important;
    color: var(--bz-text-primary);
    cursor: pointer;
    display: none;
    gap: 8px;
    height: 42px;
    justify-content: center;
    left: 16px;
    padding: 0 14px;
    position: fixed;
    top: 16px;
    width: auto;
    z-index: 150;
}
.bz-mobile-menu-toggle .bz-menu-word { display: none; font-size: 14px; font-weight: 850; }
.bz-mobile-menu-toggle::before {
    background:
        linear-gradient(currentColor 0 0) left top / 18px 2px no-repeat,
        linear-gradient(currentColor 0 0) left center / 18px 2px no-repeat,
        linear-gradient(currentColor 0 0) left bottom / 18px 2px no-repeat;
    content: "";
    display: block;
    height: 14px;
    width: 18px;
}
.bz-mobile-menu-toggle > span:not(.sr-only):not(.bz-menu-word) {
    display: none;
}
.bz-sidebar-backdrop {
    background: rgba(3, 3, 8, 0.62);
    inset: 0;
    position: fixed;
    z-index: 100;
}
.bz-sidebar-backdrop[hidden] { display: none; }

/* Angular step wizards: use straight chevrons, never curved arrows. */
body.bz-wizard-open { overflow: hidden; }
.bz-wizard-modal {
    align-items: center;
    backdrop-filter: blur(12px);
    background: rgba(3, 8, 18, 0.82);
    display: flex;
    inset: 0;
    height: 100vh;
    justify-content: center;
    padding: 24px;
    position: fixed;
    width: 100vw;
    z-index: 220;
}
.bz-wizard-modal[hidden] { display: none; }
.bz-wizard-dialog {
    background: #0b1528;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 48px);
    max-width: 980px;
    overflow: auto;
    padding: 24px;
    width: 100%;
}
.bz-wizard-head,
.bz-wizard-dialog .form-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 14px;
}
.bz-wizard-head { margin-bottom: 20px; }
.bz-wizard-head h2 { margin: 0; }
.bz-wizard-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--bz-text-secondary);
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 28px;
    height: 44px;
    justify-content: center;
    line-height: 1;
    /* 44px so a thumb can close the wizard. It was 38px in app.css and a 32px
       minimum here, and neither is big enough to press reliably. */
    min-height: 44px;
    padding: 0;
    width: 44px;
}
.bz-wizard-close:hover { background: transparent; color: var(--bz-text-primary); }
/* Absolute wizard rule:
 * CLAB is the geometry reference. Every Beetzee wizard step uses polygon
 * chevron/arrow cordon geometry; never rounded chips/buttons, never a wrapped
 * 3-column step grid, and never a mobile fallback that removes the arrows.
 */
.bz-wizard-steps {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
/* Colours for the steps live in bz-ux.css (dark theme); this rule owns the
   chevron geometry only. */
.bz-wizard-step {
    align-items: center;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    display: flex;
    flex: 1 0 142px;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    min-width: max-content;
    padding: 8px 26px 8px 28px;
    position: relative;
    text-align: center;
    white-space: nowrap;
}
.bz-wizard-step:first-child { padding-left: 28px; }
.bz-wizard-step i {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    height: 19px;
    justify-content: center;
    width: 19px;
}
.bz-wizard-step b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.bz-wizard-panel { display: none; }
.bz-wizard-panel.is-active { display: block; }
.bz-wizard-dialog .form-actions { justify-content: flex-end; margin-top: 8px; }
.bz-inline-wizard {
    display: grid;
    gap: 14px;
    min-width: 0;
    width: 100%;
}
.bz-inline-wizard .bz-wizard-steps {
    margin-bottom: 0;
}
.bz-inline-wizard .form-grid {
    margin: 0;
    width: 100%;
}
.bz-inline-wizard .form-panel {
    margin: 0;
}
.bz-inline-wizard .form-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}
.bz-inline-wizard .form-actions [hidden],
[data-wizard-container] [data-wizard] .form-actions [data-wizard-back][hidden],
[data-wizard-container] [data-wizard] .form-actions [data-wizard-next][hidden],
[data-wizard-container] [data-wizard] .form-actions [data-wizard-submit][hidden] {
    display: none !important;
}
/* .managed-user-access-form .primary-button and
   .managed-user-return-form .secondary-button used to be in this list. They
   are full-width buttons with a 44px minimum height set in app.css - a
   deliberate touch-target fix - and this rule, loading later, put them back to
   38px and auto width. They keep their own sizing now. */
.bz-inline-wizard .form-actions .primary-button,
.bz-inline-wizard .form-actions .secondary-button,
.bz-admin-surface .form-grid > .primary-button {
    border-radius: 8px;
    justify-self: start;
    min-height: 44px;
    min-width: 0;
    padding: 8px 12px;
    width: auto;
}
.bz-inline-wizard .form-actions .primary-button,
.bz-inline-wizard .form-actions .secondary-button {
    justify-self: auto;
}
/* The plain input[type="checkbox"] / input[type="radio"] selectors used to be
   in this list too. They set 16px, bz-ux.css sets 20px and loads later, so the
   only boxes that actually came out 16px were the ones a scoped selector here
   caught - a tick box changed size depending on which container it was in. */
.check-row input[type="checkbox"],
.check-row input[type="radio"],
.form-grid input[type="checkbox"],
.form-grid input[type="radio"],
.access-cluster-boards input[type="checkbox"],
.access-cluster-pages input[type="checkbox"],
.accounting-sequence-actions input[type="checkbox"],
.rental-equipment-checklist input[type="checkbox"],
.task-checklist input[type="checkbox"] {
    /* `appearance: auto` and `width: 16px` used to be here. Because these are
       class-scoped they outrank the single definition in bz-ux.css whatever
       the load order, so every tick box inside a form or a check row kept the
       browser's own drawing - a pale grey slab on a near-black page - while
       boxes outside those containers got the themed one. Two looks for the
       same control, decided by which box it sat in. Size and appearance now
       live in one place; what stays here is only the spacing this container
       needs. */
    box-shadow: none;
    flex: 0 0 auto;
    padding: 0;
    vertical-align: middle;
}
input[type="radio"],
.form-grid input[type="radio"] {
    border-radius: 50%;
}
.access-cluster-boards label,
.access-cluster-pages label,
.check-row {
    align-items: center;
}
.access-cluster-boards input[type="checkbox"],
.access-cluster-pages input[type="checkbox"] {
    margin: 0 8px 0 0;
}
.form-help { color: var(--bz-text-secondary); font-size: var(--bz-text-supporting); margin: 0; }
.form-help a { color: var(--bz-brand-hover); font-weight: 700; text-decoration: underline; }

.google-map-picker {
    background: rgba(8, 12, 22, 0.72);
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.google-map-picker__head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.google-map-picker__head span {
    display: grid;
    gap: 4px;
}

.google-map-picker__head strong {
    color: var(--bz-text-primary);
}

.google-map-picker__head small,
.google-map-picker__search {
    color: var(--bz-text-secondary);
    font-size: var(--bz-text-supporting);
    font-weight: 700;
}

.google-map-picker__head a {
    color: var(--bz-brand-hover);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.google-map-picker__search {
    display: grid;
    gap: 7px;
}

.google-map-picker__canvas {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(11, 10, 18, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--bz-text-secondary);
    display: flex;
    font-weight: 800;
    justify-content: center;
    min-height: 260px;
    overflow: hidden;
}
/* .mc-quick-actions .command-icon used to be here too. It is a 42px chip with
   10px of padding, so forcing it to 22px left a 2px glyph. */
.visual-card-icon .command-icon { height: 22px; width: 22px; }

@media (max-width: 700px) {
    .bz-wizard-modal { padding: 12px; }
    .bz-wizard-dialog { max-height: calc(100vh - 24px); padding: 16px; }
    .bz-wizard-steps { margin-left: -2px; margin-right: -2px; }
    .bz-wizard-step {
        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
        flex-basis: auto;
        gap: 5px;
        min-height: 34px;
        padding: 7px 18px 7px 20px;
    }
    .bz-wizard-step:first-child { padding-left: 20px; }
    .bz-wizard-step b { font-size: 12px; }
    .bz-wizard-step i { height: 19px; width: 19px; }
}

@media (max-width: 420px) {
    .bz-inline-wizard .bz-wizard-steps {
        gap: 4px;
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
    }

    .bz-inline-wizard .bz-wizard-step {
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 12px 7px 14px;
    }

    .bz-inline-wizard .bz-wizard-step:first-child {
        padding-left: 14px;
    }

    .bz-inline-wizard .bz-wizard-step b {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Operations surfaces: keep dense calendar, attendance, messaging, and worker
 * views inside the shared responsive shell without changing their workflows. */
.bz-calendar-surface,
.bz-attendance-surface,
.bz-communications-surface,
.bz-scheduler-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-client-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-finance-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-asset-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-admin-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-superadmin-surface {
    min-width: 0;
    overflow-wrap: break-word;
}
.bz-calendar-surface img,
.bz-calendar-surface svg,
.bz-calendar-surface table,
.bz-attendance-surface img,
.bz-attendance-surface svg,
.bz-attendance-surface table,
.bz-communications-surface img,
.bz-communications-surface svg,
.bz-communications-surface table,
.bz-scheduler-surface img,
.bz-scheduler-surface svg,
.bz-scheduler-surface table,
.bz-client-surface img,
.bz-client-surface svg,
.bz-client-surface table,
.bz-finance-surface img,
.bz-finance-surface svg,
.bz-finance-surface table,
.bz-asset-surface img,
.bz-asset-surface svg,
.bz-asset-surface table,
.bz-admin-surface img,
.bz-admin-surface svg,
.bz-admin-surface table,
.bz-superadmin-surface img,
.bz-superadmin-surface svg,
.bz-superadmin-surface table { max-width: 100%; }

@media (max-width: 980px) {
    body.bz-nav-open { overflow: hidden; }
    .bz-mobile-menu-toggle { display: inline-flex; flex-direction: row; }
    .bz-mobile-menu-toggle .bz-menu-word { display: inline; }
    body > .sidebar,
    .sidebar#app-sidebar {
        bottom: 0;
        left: 0;
        max-width: min(300px, 88vw);
        overflow-y: auto;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform 180ms ease;
        width: min(300px, 88vw);
        z-index: 110;
    }
    body > .sidebar.is-open,
    .sidebar#app-sidebar.is-open { transform: translateX(0); }
    .main { padding-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar#app-sidebar { transition: none; }
}

@media (max-width: 900px) {
    .bz-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .bz-page-header, .bz-section-header { align-items: stretch; flex-direction: column; }
    .bz-form-grid { grid-template-columns: 1fr; }
    .bz-kpi-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible,
    [role="tab"]:focus-visible,
    [role="menuitem"]:focus-visible,
    [role="option"]:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid Highlight;
    }
}

/* Account controls live in the top-right so the navigation stays focused on destinations. */
.main {
    min-width: 0;
    position: relative;
}

/* Only the positioning mode lives here. Where it sits and how high it stacks
   are set once, further down, on the body:not(.login-screen) rules - this rule
   used to state a different corner and a different z-index that never won. */
.topbar-account-floating {
    position: absolute;
}

/* Native mission-control dashboards already have their own action row. Keep
   the shared profile/logout controls in the top-right without letting them
   cover the branch and notification actions. */
@media (min-width: 761px) {
    .mission-control-dashboard .mc-hero-actions {
        min-width: 0;
        padding-right: 0;
    }
    .mission-control-dashboard .mc-search {
        min-width: min(360px, 30vw);
    }
}

/* Keep a long navigation usable without exposing browser scroll tracks. */
/* html carried overflow-x: hidden here too. */
.sidebar,
.sidebar nav,
.nav-group,
.nav-group-links{
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
.sidebar {
    overflow-x: hidden;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar { height: 0; width: 0; }
.sidebar nav {
    overflow-x: hidden;
}
/* .nav-section-label used to be in this rule too and then immediately
   overrode its own width on the next rule. It sets its own width below. */
.sidebar nav a {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.nav-section-label {
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    min-width: 0;
    width: auto;
}
.sidebar nav a > span,
/* These were clipped to "PROJECTS AND CAL..." and "SETTINGS AND SYST...".
   A menu heading that does not say what it is is not a heading. The label is
   44px tall for the thumb, which is enough for two lines of 12px type, so it
   wraps instead of being cut off. */
.nav-section-label > span {
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
}

@media (max-width: 760px) {
    body > .sidebar,
    .sidebar#app-sidebar {
        max-width: min(340px, 92vw);
        width: min(340px, 92vw);
    }
    .topbar {
        padding-top: 44px;
    }
    .topbar-actions {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .global-search {
        flex: 1 1 100%;
        min-width: 0;
        order: 2;
        width: 100%;
    }

    .topbar-account-floating {
        right: 16px;
        top: 12px;
    }
    .mission-control-dashboard .mc-hero-actions {
        padding-right: 0;
    }
    /* .main carried overflow-x: hidden - the same clip one level down. */
}

/* PPR-020 mobile responsive contract.
 * This file loads after page-specific CSS, so these rules are intentionally
 * broad containment and flow rules for the busiest screens instead of a visual
 * redesign of each module.
 */
.bz-mobile-responsive-contract,
body:not(.login-screen) .main,
body:not(.login-screen) .section,
body:not(.login-screen) .project-hero,
body:not(.login-screen) .bz-page,
body:not(.login-screen) .bz-section,
body:not(.login-screen) .bz-card,
body:not(.login-screen) .bz-dashboard-surface,
body:not(.login-screen) .bz-project-surface,
body:not(.login-screen) .bz-calendar-surface,
body:not(.login-screen) .bz-attendance-surface,
body:not(.login-screen) .bz-client-surface,
body:not(.login-screen) .bz-finance-surface,
body:not(.login-screen) .bz-asset-surface,
body:not(.login-screen) .bz-admin-surface,
body:not(.login-screen) .bz-superadmin-surface {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
}

body:not(.login-screen) :is(img, video, canvas, svg, iframe) {
    max-width: 100%;
}

body:not(.login-screen) :is(input, select, textarea, button, .primary-button, .secondary-button, .bz-btn) {
    max-width: 100%;
}

body:not(.login-screen) :is(.table-wrap, .bz-table-shell, .contract-table-wrap, .project-northstar-table-wrap) {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

body:not(.login-screen) :is(.table-wrap, .bz-table-shell, .contract-table-wrap, .project-northstar-table-wrap) table {
    max-width: none;
}

body:not(.login-screen) :is(.bz-wizard-steps, .project-stage-flow.bz-wizard-steps, .equipment-create-wizard .bz-wizard-steps, .rental-step-workspace .bz-wizard-steps, .cgd-create-page .bz-wizard-steps) {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

body:not(.login-screen) :is(.bz-wizard-step, .cpgee-step, .project-stage-flow .bz-wizard-step) {
    flex-shrink: 0;
    min-width: max-content;
}

@media (max-width: 760px) {
    body:not(.login-screen) .main {
        margin-left: 0;
        padding: 88px 16px 20px;
        width: 100%;
    }

    body:not(.login-screen) :is(.topbar, .section-heading, .project-hero, .bz-page-header, .bz-section-header) {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    body:not(.login-screen) :is(.topbar-actions, .bz-page-header__actions, .bz-toolbar, .bz-toolbar__group, .form-actions, .ecd-hero-actions, .mc-hero-actions, .project-readiness-actions) {
        align-items: stretch;
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
    }

    body:not(.login-screen) :is(.global-search, .cal-search, .mc-search, .ecd-search, .client-search) {
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    body:not(.login-screen) :is(.metric-grid, .settings-grid, .timeline-grid, .cards-grid, .stat-grid, .bz-kpi-grid, .bz-form-grid, .form-grid, .compact-form-grid, .rental-workspace-grid, .rental-pick-grid, .ecd-layout, .ecd-kpis, .cal-layout, .client-grid, .board-create-grid, .project-settings-grid) {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    body:not(.login-screen) :is(.form-grid, .compact-form-grid, .bz-form-grid) > *,
    body:not(.login-screen) :is(label, .form-field, .bz-field) {
        min-width: 0;
    }

    body:not(.login-screen) :is(.form-grid, .compact-form-grid, .bz-form-grid) :is(input, select, textarea),
    body:not(.login-screen) :is(.searchable-select, .global-search input) {
        width: 100%;
    }

    /* Position and width for this breakpoint are set once, in the
       max-width: 760px block further down. */
    body:not(.login-screen) .topbar-account-floating {
        z-index: 130;
    }

    body:not(.login-screen) .topbar-account-floating .account-menu-panel {
        max-width: calc(100vw - 24px);
        right: 0;
    }
}

@media (max-width: 640px) {
    body:not(.login-screen) .main {
        padding-left: 12px;
        padding-right: 12px;
    }

    body:not(.login-screen) :is(.section, .project-hero, .bz-card__header, .bz-card__body, .bz-card__footer) {
        padding: 14px;
    }

    body:not(.login-screen) :is(.primary-button, .secondary-button, .bz-btn, button[type="submit"]) {
        min-width: 0;
        white-space: normal;
    }

    body:not(.login-screen) .bz-inline-wizard .bz-wizard-steps {
        overflow-x: auto;
    }
}

/* A :root block used to sit here, under a comment about floating account
   controls, re-declaring --bz-border-subtle, --bz-border-default and
   --bz-border-strong about 20% fainter than tokens.css sets them. It loaded
   later, so it won, and every border in the product was quietly weaker than
   the design system said. The token file's values are the ones kept: they are
   the stated design values, and a fainter line is the wrong direction for a
   product whose test is whether an eight-year-old can read the screen.

   Final layout guardrails: floating account controls must never sit on top of
   page starts, Beetz chips, or flash/error messages. */

body:not(.login-screen) .main {
    isolation: isolate;
}

body:not(.login-screen) .main.main-has-floating-account,
body:not(.login-screen) .main:has(> .topbar-account-floating) {
    padding-top: max(104px, 6.5rem);
}

body:not(.login-screen) .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
}

body:not(.login-screen) .topbar-actions {
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

body:not(.login-screen) .topbar-account-menu,
body:not(.login-screen) .topbar-account-floating {
    z-index: 90;
}

body:not(.login-screen) .topbar-account-floating {
    max-width: min(390px, calc(100vw - 56px));
    right: 28px;
    top: 22px;
}

body:not(.login-screen) .topbar-account-floating .account-menu-trigger {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

@media (min-width: 761px) {
    body:not(.login-screen) .topbar-account-floating ~ :is(.mission-control-dashboard, .calendar-command-dashboard) {
        margin-top: 42px;
    }
}
body:not(.login-screen) .account-menu-trigger {
    border-color: rgba(255, 255, 255, 0.095);
}

body:not(.login-screen) .account-menu-panel,
body:not(.login-screen) .global-search-results {
    border-color: rgba(255, 255, 255, 0.10);
    z-index: 120;
}

body:not(.login-screen) .alert,
body:not(.login-screen) .bz-alert {
    background-color: rgba(15, 23, 42, 0.58);
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    box-shadow: none;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

/* The success banner's colour is decided in bz-ux.css (purple, not green -
   a confirmation is not a separate brand). This rule painted it green and
   never won. */

body:not(.login-screen) .alert.danger {
    background: rgba(251, 113, 133, 0.09);
    border-color: rgba(251, 113, 133, 0.18);
}

body:not(.login-screen) :is(.section, .project-hero, .form-panel, .bz-card, .bz-kpi-card, .mc-panel, .cal-panel, .ecd-panel, .ccd-panel, .contract-create-panel, .contract-template-editor-panel, .bz-dashboard-surface, .bz-project-surface, .bz-calendar-surface, .bz-attendance-surface, .bz-client-surface, .bz-finance-surface, .bz-asset-surface, .bz-admin-surface, .bz-superadmin-surface) {
    border-color: rgba(255, 255, 255, 0.085);
}

body:not(.login-screen) :is(.section, .project-hero, .form-panel, .bz-card, .bz-kpi-card, .mc-panel, .cal-panel, .ecd-panel, .ccd-panel) {
    border-radius: 8px;
}

@media (max-width: 760px) {
    body:not(.login-screen) .main.main-has-floating-account,
    body:not(.login-screen) .main:has(> .topbar-account-floating) {
        padding-top: 112px;
    }

    body:not(.login-screen) .main.main-has-floating-account > .client-gallery-dashboard:first-of-type {
        margin-top: 0;
    }

    body:not(.login-screen) .topbar-account-floating {
        max-width: min(280px, calc(100vw - 72px));
        right: 12px;
        top: 12px;
    }
}

@media (max-width: 520px) {
    body:not(.login-screen) .main.main-has-floating-account,
    body:not(.login-screen) .main:has(> .topbar-account-floating) {
        padding-top: 104px;
    }

    body:not(.login-screen) .topbar-account-floating {
        max-width: calc(100vw - 76px);
    }
}