/* 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); border-color: var(--bz-brand); color: #fff; }
.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)); }
.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%; }
.bz-empty { align-items: center; color: var(--bz-text-secondary); display: grid; gap: var(--bz-space-2); justify-items: center; padding: var(--bz-space-12) var(--bz-space-6); text-align: center; }
.empty-state { color: var(--bz-text-secondary); min-width: 0; overflow-wrap: anywhere; }
.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: anywhere; }
.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: anywhere;
}
.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: anywhere;
}
.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: anywhere; }
.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; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--bz-focus-ring);
    outline-offset: 2px;
}
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: transparent;
    border: 0;
    border-radius: 0;
    color: var(--bz-text-primary);
    cursor: pointer;
    display: none;
    height: auto;
    justify-content: center;
    left: 16px;
    padding: 6px 0;
    position: fixed;
    top: 16px;
    width: auto;
    z-index: 120;
}
.bz-mobile-menu-toggle .bz-menu-word { display: none; font-size: 14px; font-weight: 700; }
.bz-mobile-menu-toggle > span:not(.sr-only):not(.bz-menu-word) {
    background: #f8f7ff;
    border-radius: 2px;
    display: block;
    height: 2px;
    margin: 2px 0;
    width: 18px;
}
.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;
    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);
    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 {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--bz-text-secondary);
    font-size: 28px;
    line-height: 1;
    min-height: 32px;
    padding: 2px 8px;
}
.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;
}
.bz-wizard-step {
    align-items: center;
    background: rgba(226, 232, 240, 0.9);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
    color: rgba(71, 85, 105, 0.82);
    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.is-current {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(124, 58, 237, 0.98));
    color: #fff;
}
.bz-wizard-step.is-complete {
    background: rgba(71, 85, 105, 0.86);
    color: rgba(241, 245, 249, 0.92);
}
.bz-wizard-step i {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-size: 11px;
    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;
}
.bz-inline-wizard .form-actions .primary-button,
.bz-inline-wizard .form-actions .secondary-button,
.bz-admin-surface .form-grid > .primary-button,
.managed-user-access-form .primary-button,
.managed-user-return-form .secondary-button {
    border-radius: 8px;
    justify-self: start;
    min-height: 38px;
    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;
}
.managed-user-access-form .primary-button {
    grid-column: auto;
}
input[type="checkbox"],
input[type="radio"],
.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"] {
    accent-color: var(--bz-brand-primary, #8b5cf6);
    appearance: auto;
    box-shadow: none;
    display: inline-block;
    flex: 0 0 auto;
    height: 16px;
    min-height: 16px;
    min-width: 16px;
    padding: 0;
    vertical-align: middle;
    width: 16px;
}
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; }
.nav-icon { height: 22px; stroke-width: 1.8; width: 22px; }
.command-icon { height: 20px; stroke-width: 1.8; width: 20px; }
.visual-card-icon .command-icon,
.mc-quick-actions .command-icon { height: 22px; width: 22px; }
.bz-wizard-dialog [data-wizard-submit][hidden],
.bz-wizard-dialog [data-wizard-next][hidden] { display: none; }

@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: 10px; }
    .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: anywhere;
}
.bz-client-surface {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bz-finance-surface {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bz-asset-surface {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bz-admin-surface {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bz-superadmin-surface {
    min-width: 0;
    overflow-wrap: anywhere;
}
.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;
}
.topbar-account {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 0;
}
.topbar-profile {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 9px;
    min-width: 0;
    text-decoration: none;
}
.topbar-profile > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.topbar-profile strong,
.topbar-profile small {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-profile strong { color: #fff; }
.topbar-profile small { color: var(--muted); }
.topbar-logout { margin: 0; }
.topbar-logout button {
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #d8d5df;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
}
.topbar-logout button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.topbar-account-floating {
    position: absolute;
    right: 46px;
    top: 32px;
    z-index: 5;
}

/* 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: 981px) {
    .mission-control-dashboard .mc-hero-actions {
        min-width: 0;
        padding-right: 220px;
    }
    .mission-control-dashboard .mc-search {
        min-width: min(360px, 30vw);
    }
}

/* Keep a long navigation usable without exposing browser scroll tracks. */
html { overflow-x: hidden; }
.sidebar,
.sidebar nav,
.nav-group,
.nav-group-links,
.sidebar-account {
    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;
    scrollbar-width: none;
}
.sidebar nav a,
.nav-section-label {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.nav-section-label {
    max-width: calc(100% - 20px);
    width: auto;
}
.sidebar nav a > span,
.nav-section-label > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 980px) {
    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;
    }
    .topbar-account {
        margin-left: auto;
        order: 1;
    }
    .global-search {
        flex: 1 1 100%;
        min-width: 0;
        order: 2;
        width: 100%;
    }
    .topbar-profile strong,
    .topbar-profile small { max-width: 108px; }
    .topbar-logout button {
        min-width: 38px;
        padding: 0;
    }
    .topbar-logout button span { display: none; }
    .topbar-account-floating {
        right: 16px;
        top: 12px;
    }
    .mission-control-dashboard .mc-hero-actions {
        padding-right: 0;
    }
    .main { overflow-x: hidden; }
}

/* 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: anywhere;
}

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: 980px) {
    body:not(.login-screen) .main {
        margin-left: 0;
        padding: 76px 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%;
    }

    body:not(.login-screen) .topbar-account-floating {
        max-width: min(260px, calc(100vw - 80px));
        right: 12px;
        top: 12px;
        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;
    }
}

/* Final layout guardrails: floating account controls must never sit on top of
   page starts, Beetz chips, or flash/error messages. */
:root {
    --bz-border-subtle: rgba(255, 255, 255, 0.055);
    --bz-border-default: rgba(255, 255, 255, 0.085);
    --bz-border-strong: rgba(255, 255, 255, 0.14);
}

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: 981px) {
    body:not(.login-screen) .topbar-account-floating ~ :is(.mission-control-dashboard, .calendar-command-dashboard) {
        margin-top: 42px;
    }
}

body:not(.login-screen) .account-beetz-chip,
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;
}

body:not(.login-screen) .alert.success {
    background: rgba(52, 211, 153, 0.09);
    border-color: rgba(52, 211, 153, 0.18);
}

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: 980px) {
    body:not(.login-screen) .main.main-has-floating-account,
    body:not(.login-screen) .main:has(> .topbar-account-floating) {
        padding-top: 94px;
    }

    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);
    }
}