/* BuildingHQ shared styles: fonts, sidebar, tables. */

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-wght-f6d31671339db80142ceaf6382570e79.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-feature-settings: "tnum";
    font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html[lang="fa"] {
    /* Keep Tabler components and their numeric content on the Farsi typeface too. */
    --bhq-fa-font: 'Vazirmatn', Tahoma, sans-serif;
    --tblr-font-sans-serif: var(--bhq-fa-font);
    --tblr-body-font-family: var(--bhq-fa-font);
}

html[lang="fa"],
html[lang="fa"] body {
    font-family: var(--bhq-fa-font);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1;
    font-variant-numeric: proportional-nums;
    letter-spacing: 0;
}

/*
 * Persian numerals, once, for everything.
 *
 * Tabler and Bootstrap set font-family and numeric features on individual components, which
 * overrides what body inherits. This used to be handled with a list of component selectors, and
 * every feature that introduced a component the list had not heard of brought the bug back:
 * digits rendered in the Latin face with tabular spacing, so amounts and dates looked stretched.
 *
 * So it is a universal rule now rather than an allowlist. New pages inherit the fix without
 * anyone remembering it exists. Three deliberate exclusions: icon fonts (which carry their own
 * !important and would otherwise turn into boxes) and genuinely monospaced text, where the
 * fixed-width alignment is the point.
 *
 * "pnum"/proportional-nums is what closes the gaps — the Latin default here is "tnum", which
 * pads every digit to a common width and reads as broken spacing in Persian. letter-spacing must
 * stay 0 because Persian is cursive: spacing letters apart breaks the joins between them.
 */
html[lang="fa"] *:not(code):not(pre):not(kbd):not(samp):not(.bi):not([class*="bi-"]) {
    font-family: var(--bhq-fa-font) !important;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1 !important;
    font-variant-numeric: proportional-nums !important;
    letter-spacing: 0 !important;
}

html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; }

/* Task-oriented Help articles stay compact until the reader asks for the detailed steps. */
.bhq-help-guide > summary {
    cursor: pointer;
    list-style: none;
}
.bhq-help-guide > summary::-webkit-details-marker { display: none; }
.bhq-help-guide > summary::after {
    content: "+";
    align-self: center;
    margin-inline-start: auto;
    color: var(--tblr-secondary);
    font-size: 1.25rem;
}
.bhq-help-guide[open] > summary::after { content: "−"; }
.bhq-help-guide-body {
    margin-block-start: .75rem;
    margin-inline-start: 3rem;
    padding-block-start: .75rem;
    border-block-start: 1px solid var(--tblr-border-color-translucent);
}
.bhq-help-guide-body ol { margin-block-end: .75rem; padding-inline-start: 1.25rem; }
.bhq-help-guide-body li + li { margin-block-start: .4rem; }
@media (max-width: 575.98px) {
    .bhq-help-guide-body { margin-inline-start: 0; }
}

.navbar-brand a { color: inherit; text-decoration: none; }

.bhq-dashboard-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(32, 107, 196, .10), rgba(45, 168, 130, .08)),
        var(--tblr-bg-surface);
    box-shadow: 0 12px 30px rgba(24, 36, 51, .06);
}

.bhq-band-actions,
.bhq-band-metrics {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.bhq-band-metric {
    min-width: 8.5rem;
    padding: .6rem .75rem;
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: 8px;
    background: rgba(255, 255, 255, .62);
}

[data-bs-theme="dark"] .bhq-band-metric { background: rgba(21, 32, 43, .72); }
.bhq-band-metric strong { display: block; font-size: 1.35rem; line-height: 1.1; }

.bhq-stat-card,
.bhq-panel-card,
.bhq-action-card {
    border: 0;
    box-shadow: 0 10px 28px rgba(24, 36, 51, .07);
}

.bhq-stat-card {
    position: relative;
    overflow: hidden;
}

.bhq-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--bhq-accent, var(--tblr-primary));
}

.bhq-stat-card .avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); }
.bhq-accent-blue { --bhq-accent: #206bc4; }
.bhq-accent-azure { --bhq-accent: #4299e1; }
.bhq-accent-teal { --bhq-accent: #12a594; }
.bhq-accent-green { --bhq-accent: #2fb344; }
.bhq-accent-cyan { --bhq-accent: #17a2b8; }
.bhq-accent-violet { --bhq-accent: #7952b3; }
.bhq-accent-red { --bhq-accent: #d63939; }
.bhq-accent-orange { --bhq-accent: #f76707; }

.bhq-action-card {
    height: 100%;
    transition: transform .14s ease, box-shadow .14s ease;
}

.bhq-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(24, 36, 51, .10);
}

.bhq-inline-panel {
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    padding: 1rem;
    background: var(--tblr-bg-surface-secondary, var(--tblr-bg-surface));
}

/* AI Assistance preview keeps the future conversation area stable in LTR and RTL. */
.bhq-ai-chat {
    min-height: 34rem;
}
.bhq-ai-chat .card-header {
    min-height: 4rem;
}
.bhq-ai-empty {
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.bhq-ai-empty p {
    max-width: 36rem;
}
.bhq-ai-chat textarea:disabled,
.bhq-ai-chat button:disabled {
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .bhq-ai-chat {
        min-height: auto;
    }
    .bhq-ai-empty {
        min-height: 16rem;
        padding: 1.25rem;
    }
    .bhq-ai-chat .input-group {
        align-items: stretch;
        flex-direction: column;
        gap: .5rem;
    }
    .bhq-ai-chat .input-group > .form-control,
    .bhq-ai-chat .input-group > .btn {
        width: 100%;
        border-radius: var(--bhq-radius-control) !important;
    }
}

.bhq-preline { white-space: pre-line; }
.maintenance-title-cell { min-width: 16rem; max-width: 30rem; }
.maintenance-status-select { min-width: 9.5rem; }

.maintenance-priority-low { background: var(--tblr-secondary-lt); color: var(--tblr-secondary); }
.maintenance-priority-normal { background: var(--tblr-blue-lt); color: var(--tblr-blue); }
.maintenance-priority-urgent { background: var(--tblr-orange-lt); color: var(--tblr-orange); }
.maintenance-priority-emergency { background: var(--tblr-red-lt); color: var(--tblr-red); }
.maintenance-status-open { background: var(--tblr-yellow-lt); color: var(--tblr-yellow); }
.maintenance-status-in_progress { background: var(--tblr-blue-lt); color: var(--tblr-blue); }
.maintenance-status-waiting { background: var(--tblr-purple-lt); color: var(--tblr-purple); }
.maintenance-status-resolved { background: var(--tblr-green-lt); color: var(--tblr-green); }
.maintenance-status-closed { background: var(--tblr-secondary-lt); color: var(--tblr-secondary); }

.maintenance-thread {
    display: grid;
    gap: .5rem;
}

.maintenance-thread-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    align-items: start;
    padding: .65rem .75rem;
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: 8px;
}

/* Sidebar niceties */
.navbar-vertical .nav-link-icon .bi { font-size: 1.05rem; }
.navbar-vertical .sidebar-section {
    font-size: .68rem; letter-spacing: 0; text-transform: uppercase;
    opacity: .55; padding: .9rem 1rem .25rem;
}
.sidebar-footer {
    padding: .65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .52);
    font-size: .72rem;
}
.sidebar-footer code {
    color: rgba(255, 255, 255, .78);
    font-size: .7rem;
    letter-spacing: 0;
}

/* Sortable tables */
table.table-sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.table-sortable thead th.sorted-asc::after  { content: " ▲"; font-size: .7em; opacity: .6; }
table.table-sortable thead th.sorted-desc::after { content: " ▼"; font-size: .7em; opacity: .6; }

.bhq-pagination { display: flex; gap: .25rem; justify-content: center; padding: .6rem; flex-wrap: wrap; }
.bhq-pagination button {
    border: 1px solid var(--tblr-border-color, #dadfe5); background: transparent;
    color: inherit; border-radius: 4px; min-width: 2rem; padding: .15rem .5rem; cursor: pointer;
}
.bhq-pagination button.active { background: var(--tblr-primary, #206bc4); color: #fff; border-color: transparent; }

@media print {
    .navbar, .bhq-pagination, .btn, form { display: none !important; }
    .page-wrapper { margin: 0 !important; }
    .bhq-report-header {
        box-shadow: none;
        break-inside: avoid;
    }
}

.matrix-cell { min-width: 2.2rem; display: inline-block; }

@media (max-width: 767.98px) {
    .bhq-dashboard-band {
        align-items: stretch;
        flex-direction: column;
    }
    .bhq-band-actions,
    .bhq-band-metrics {
        justify-content: stretch;
    }
    .bhq-band-actions .btn,
    .bhq-band-metric {
        flex: 1 1 auto;
    }
    .maintenance-thread-item {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   BuildingHQ design system: a crisp property-operations layer over Tabler.
   Balanced blue/teal accents, compact rhythm, predictable workflow surfaces.
   Works in LTR + RTL (logical properties) and light + dark themes.
   ========================================================================== */

:root {
    --bhq-primary: #2563eb;
    --bhq-primary-dark: #1d4ed8;
    --bhq-secondary: #0f766e;
    --bhq-ink: #111827;
    --bhq-shell: #f5f7fb;
    --bhq-gradient: linear-gradient(135deg, #2563eb 0%, #0f766e 100%);
    --bhq-radius-card: 8px;
    --bhq-radius-control: 7px;
    --bhq-page-gap: .875rem;
    --bhq-shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 22px rgba(15, 23, 42, .06);
    --bhq-shadow-card-hover: 0 4px 8px rgba(15, 23, 42, .07), 0 12px 32px rgba(15, 23, 42, .10);

    --tblr-primary: #2563eb;
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-link-color: #1d4ed8;
    --tblr-link-hover-color: #1e40af;
    --tblr-border-radius: var(--bhq-radius-control);
}

body { background: var(--bhq-shell); }
[data-bs-theme="dark"] body { background: #10131d; }

/* Keyboard users must be able to see the same location and control boundaries as pointer users. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(var(--tblr-primary-rgb), .42);
    outline-offset: 2px;
}

/* ---- Page rhythm ------------------------------------------------------- */
.page-wrapper,
.page-header,
.page-body,
.page-header .container-xl,
.page-body .container-xl { min-width: 0; }
.page-wrapper > .page-header {
    margin: 0;
    padding: .75rem 0 0;
}
.page-wrapper > .page-body {
    margin: 0;
    padding: .75rem 0 1.25rem;
}
.page-header .container-xl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.page-header .container-xl > .page-title { margin-bottom: 0; }
.page-header .container-xl > .bhq-dashboard-band {
    flex: 1 1 100%;
    min-width: 0;
}
.page-body .container-xl > :where(.alert, .card, .row, .empty, .bhq-cal, .bhq-section-nav, h3) {
    margin-block-end: 0 !important;
}
.page-body .container-xl > :where(.alert, .card, .row, .empty, .bhq-cal, .bhq-section-nav, h3)
    + :where(.alert, .card, .row, .empty, .bhq-cal, .bhq-section-nav, h3) {
    margin-block-start: var(--bhq-page-gap);
}
.page-body .row-cards {
    --tblr-gutter-x: .75rem;
    --tblr-gutter-y: .75rem;
}
.page-body .container-xl > * { min-width: 0; }
.page-body .row-deck > [class*="col"] { display: flex; }
.page-body .row-deck > [class*="col"] > .card { width: 100%; }
.bhq-stat-grid > [class*="col"] { min-width: 0; }

/* ---- Dashboard bands --------------------------------------------------- */
.bhq-dashboard-band {
    align-items: center;
    gap: .8rem;
    padding: .85rem .95rem;
    border-color: rgba(15, 23, 42, .08);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(15, 118, 110, .07)),
        var(--tblr-bg-surface);
    box-shadow: var(--bhq-shadow-card);
}
.bhq-dashboard-band > div:first-child { min-width: 12rem; }
.bhq-band-actions,
.bhq-band-metrics {
    gap: .5rem;
    min-width: 0;
}
.bhq-band-metric {
    min-width: 7.75rem;
    padding: .48rem .65rem;
    background: rgba(255, 255, 255, .78);
}
.bhq-band-metric strong {
    font-size: 1.18rem;
    line-height: 1.15;
}
[data-bs-theme="dark"] .bhq-dashboard-band {
    border-color: rgba(255, 255, 255, .08);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(20, 184, 166, .08)),
        var(--tblr-bg-surface);
}

/* ---- Cards ------------------------------------------------------------- */
.page-wrapper .card {
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: var(--bhq-radius-card);
    box-shadow: var(--bhq-shadow-card);
}
[data-bs-theme="dark"] .page-wrapper .card {
    background: #171a2e;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .3);
}
.page-wrapper .card .card-header {
    min-height: 0;
    padding: .7rem .9rem;
    background: transparent;
    border-bottom: 1px solid var(--tblr-border-color-translucent);
}
.page-wrapper .card .card-body { padding: .9rem; }
.page-wrapper .card .card-footer { padding: .65rem .9rem; }
.card-header.d-flex,
.card-body.d-flex,
.list-group-item.d-flex {
    gap: .65rem;
    flex-wrap: wrap;
}
.card .card-title {
    min-width: 0;
    margin-bottom: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---- Page headers ------------------------------------------------------ */
.page-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.page-title > .bi {
    flex: 0 0 auto;
    margin-inline-end: 0;
}
.page-title > span { min-width: 0; }
.page-header .container-xl > :not(.bhq-dashboard-band) {
    max-width: 100%;
}

/* ---- Sidebar ----------------------------------------------------------- */
aside.navbar-vertical {
    z-index: 1040;
    background: #111827 !important;
    border-inline-end: 0;
    box-shadow: 4px 0 22px rgba(10, 18, 30, .22);
}
aside.navbar-vertical .navbar-brand {
    font-weight: 700;
    letter-spacing: 0;
    padding-block: .85rem;
}
.bhq-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    /* White tile so the brand mark (designed for light backgrounds) reads on the dark sidebar. */
    background: #fff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .32);
    margin-inline-end: .4rem;
}
.bhq-logo img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
}
.bhq-wordmark {
    max-width: 100%;
    height: 3.5rem;
    object-fit: contain;
}
/* The full wordmark has dark lettering; give it a light tile so it stays legible in dark mode. */
[data-bs-theme="dark"] .bhq-wordmark {
    background: #fff;
    border-radius: 10px;
    padding: .4rem .7rem;
}
aside.navbar-vertical .nav-link {
    border-radius: 8px;
    margin: .08rem .6rem;
    padding: .42rem .7rem;
    color: rgba(255, 255, 255, .72);
    transition: background .12s ease, color .12s ease;
}
aside.navbar-vertical .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
aside.navbar-vertical .nav-link.active {
    background: rgba(37, 99, 235, .95);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .32);
}
aside.navbar-vertical .sidebar-section {
    padding-block-start: .7rem;
    color: rgba(255, 255, 255, .45);
    opacity: 1;
    font-weight: 600;
}
aside.navbar-vertical .sidebar-footer { border-color: rgba(255, 255, 255, .08) !important; }

/* Collapsible nav groups: the parent row carries a caret that flips when open, and its children
   are indented on the inline-start edge so RTL mirrors without extra rules. */
aside.navbar-vertical .bhq-nav-group { cursor: pointer; }
aside.navbar-vertical .bhq-nav-caret {
    margin-inline-start: auto;
    font-size: .7rem;
    opacity: .6;
    transition: transform .18s ease;
}
aside.navbar-vertical .bhq-nav-group[aria-expanded="true"] .bhq-nav-caret { transform: rotate(180deg); }
aside.navbar-vertical .bhq-nav-sub {
    margin-inline-start: 1.6rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .12);
    padding-inline-start: .35rem;
}
aside.navbar-vertical .bhq-nav-sub .nav-link {
    padding-block: .3rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .72);
}
aside.navbar-vertical .bhq-nav-sub .nav-link:hover { color: #fff; }
/* A child page already highlights its own row; a filled parent as well would read as two
   selections, so the open group is only tinted. */
aside.navbar-vertical .bhq-nav-group.active {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    box-shadow: none;
}

/* ---- Top bars ---------------------------------------------------------- */
.bhq-topbar,
.bhq-renter-topbar {
    position: relative;
    z-index: 1040;
    min-height: 3.15rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(1.1) blur(10px);
}
.bhq-topbar .dropdown-menu,
.bhq-renter-topbar .dropdown-menu,
.bhq-language-menu .dropdown-menu,
.dropdown-menu.show {
    z-index: 1080;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}
/* Menus follow their longest label instead of the trigger width. The viewport cap is the only
   reason an item wraps, so translated actions remain readable without widening the document. */
.dropdown-menu {
    inline-size: max-content;
    max-inline-size: calc(100vw - 1rem);
}
.dropdown-menu :where(.dropdown-item, .dropdown-header) {
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
[data-bs-theme="dark"] .bhq-topbar,
[data-bs-theme="dark"] .bhq-renter-topbar {
    border-bottom-color: rgba(255, 255, 255, .08);
    background: rgba(16, 19, 29, .9);
}
.bhq-renter-topbar .navbar-brand {
    min-width: 0;
    font-weight: 700;
}
.bhq-renter-topbar .navbar-nav {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bhq-topbar .container-xl,
.bhq-renter-topbar .container-xl {
    gap: .75rem;
}
.bhq-topbar-context {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    color: var(--tblr-body-color);
}
.bhq-topbar-context > div {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}
.bhq-topbar-context strong {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bhq-topbar-context span span,
.bhq-topbar-context > div > span {
    color: var(--tblr-secondary);
    font-size: .75rem;
}

/* ---- Buttons & inputs -------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: var(--bhq-radius-control);
    font-weight: 500;
    white-space: nowrap;
}
.btn-primary {
    background: var(--bhq-gradient);
    border: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .25);
}
.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(37, 99, 235, .32);
}
.form-control, .form-select {
    min-width: 0;
    max-width: 100%;
    border-radius: var(--bhq-radius-control);
}
/* A native select's max-content size is based on its longest option. Keep that intrinsic width
   for every select, while allowing narrow cards and phones to cap it without page overflow. */
select.form-select:not([multiple]):not([size]) {
    inline-size: max-content;
    min-inline-size: 8rem;
    max-inline-size: 100%;
}
.input-group > select.form-select:not([multiple]):not([size]) {
    flex: 0 1 max-content;
    inline-size: max-content;
}
/*
 * The intrinsic sizing above is for standalone filter dropdowns in toolbars. Inside a dialog or
 * a form grid it is wrong: a select that hugs its longest option sits ragged next to full-width
 * inputs, and every modal with a select looked mis-laid-out. In those contexts a select fills
 * its column like any other control. Input-groups keep their own flex sizing, re-asserted after
 * this rule so it wins inside modals too; explicit w-auto always stays auto.
 */
form .row [class*="col"] > select.form-select:not([multiple]):not([size]):not(.w-auto),
.modal select.form-select:not([multiple]):not([size]):not(.w-auto) {
    inline-size: 100%;
}
.modal .input-group > select.form-select:not([multiple]):not([size]) {
    flex: 0 1 max-content;
    inline-size: max-content;
}
input[type="file"] { max-width: 100%; }
.form-control:focus, .form-select:focus {
    border-color: var(--bhq-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* Shared in-field password visibility control. Logical properties keep it correct in RTL. */
.bhq-password-field { position: relative; }
.bhq-password-field > .form-control {
    min-width: 0;
    padding-inline-end: 2.5rem;
    border-start-end-radius: var(--bhq-radius-control) !important;
    border-end-end-radius: var(--bhq-radius-control) !important;
}
.bhq-password-toggle {
    position: absolute;
    z-index: 5;
    /* Centered for whatever height the field has (flat groups, focus rings, zoom levels), and
       inset far enough that the hover pill stays clearly inside the input's rounded corner —
       at 2px of clearance it visually poked past the curve. */
    inset-block-start: 50%;
    transform: translateY(-50%);
    inset-inline-end: .3rem;
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--tblr-secondary);
    background: transparent;
    cursor: pointer;
}
.bhq-password-toggle:hover {
    color: var(--bhq-primary);
    background: rgba(37, 99, 235, .08);
}
.bhq-password-toggle:focus-visible {
    outline: 2px solid var(--bhq-primary);
    outline-offset: 1px;
}
.bhq-password-toggle svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
}
.form-label {
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: 600;
}

/* ---- Ordered modal forms ---------------------------------------------
   Keep every input dialog on the same visual grid; the full-screen file viewer is intentionally
   excluded because its body is an edge-to-edge preview surface. */
.modal:not(#bhq-file-viewer) .modal-content {
    overflow: hidden;
    border: 0;
    box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .2);
}
.modal:not(#bhq-file-viewer) .modal-header,
.modal:not(#bhq-file-viewer) .modal-footer {
    padding-inline: 1.25rem;
}
.modal:not(#bhq-file-viewer) .modal-body {
    padding: 1.25rem;
    background: color-mix(in srgb, var(--tblr-bg-surface) 96%, var(--tblr-primary) 4%);
}
/* A grid column will not shrink below its content's intrinsic width unless told to, so one long
   value — an email address, a long select option — pushes the dialog wider than the viewport and
   the whole form scrolls sideways. This is the fix for that, and it is deliberately written for
   every modal rather than for a class each new dialog has to remember: the same rule the Farsi
   numerals learned, that an opt-in styling fix is one somebody will forget. */
.modal .row > [class*="col-"],
.bhq-modal-form-grid > [class*="col-"] {
    min-width: 0;
}
.bhq-payment-request-modal {
    max-width: 42rem;
}
.bhq-modal-option {
    min-height: 2.5rem;
    margin: 0;
    padding-block: .65rem;
    padding-inline: 2.25rem .8rem;
    align-items: center;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--bhq-radius-control);
    background: var(--tblr-bg-surface);
}
.page-body form.row {
    --tblr-gutter-x: .65rem;
    --tblr-gutter-y: .65rem;
}
.page-header form.d-flex {
    flex: 0 1 22rem;
    justify-content: flex-end;
}
.page-header form.d-flex,
.card-header form.d-flex,
.card-header form.d-inline-flex,
.table .d-flex,
.table .d-inline-flex {
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
}
.page-header form.d-flex > :where(.form-control, .form-select),
.card-header form.d-flex > :where(.form-control, .form-select) {
    width: auto;
    min-width: 10rem;
    flex: 0 1 15rem;
}
.page-header form.d-flex > .btn {
    flex: 0 0 auto;
}
.btn-list { gap: .45rem; }
.bhq-search-form {
    min-width: min(100%, 18rem);
}
.bhq-search-form input[type="search"] {
    min-width: 12rem;
}

/* ---- Compact renter directory ---------------------------------------- */
.bhq-parties-page .page-header .container-xl {
    flex-wrap: nowrap;
}
.bhq-parties-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.bhq-parties-toolbar .bhq-search-form {
    flex: 1 1 34rem;
    max-width: 42rem;
}
.bhq-parties-toolbar .bhq-search-form input[type="search"] {
    flex: 1 1 auto;
    width: auto;
}
.bhq-parties-page .table > :not(caption) > * > * {
    padding-block: .42rem;
}
.bhq-parties-page .table td:last-child {
    width: 8rem;
    white-space: nowrap;
}
.bhq-parties-page .table .bhq-row-actions {
    min-width: 7rem;
    flex-wrap: nowrap;
}
.bhq-parties-page .table .bhq-row-actions > * {
    flex: 0 0 auto;
}
.bhq-parties-page .bhq-mobile-score .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.15;
    text-align: start;
}
.bhq-parties-page .table .btn-icon {
    width: 2.25rem;
    height: 2.25rem;
}

/* ---- Tables ------------------------------------------------------------ */
.card .table thead th {
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: 0;
    color: var(--tblr-secondary);
    background: transparent;
    border-bottom-width: 1px;
}
.card .table tbody tr { transition: background .1s ease; }
.card .table tbody tr:hover { background: rgba(37, 99, 235, .04); }
[data-bs-theme="dark"] .card .table tbody tr:hover { background: rgba(37, 99, 235, .09); }
.badge { border-radius: 999px; font-weight: 600; }
.table-responsive { border-radius: 0 0 var(--bhq-radius-card) var(--bhq-radius-card); }
.table td,
.table th { vertical-align: middle; }
.table td.text-end,
.table th.text-end,
.table th:empty {
    width: 1%;
    white-space: nowrap;
}

/* ---- Stat cards -------------------------------------------------------- */
.card .avatar { border-radius: 8px; }
.subheader { letter-spacing: 0; }
.bhq-stat-card .card-body { min-height: 5.1rem; }
.bhq-stat-card .d-flex { min-width: 0; }
.bhq-stat-card .h1,
.bhq-stat-card .h2,
.bhq-stat-card .h3 {
    margin-bottom: 0;
    font-size: 1.25rem;
    line-height: 1.15;
}
.bhq-stat-card .subheader { white-space: normal; }
.bhq-action-card .card-body {
    display: flex;
    flex-direction: column;
}
.bhq-action-card .h1 {
    font-size: 1.65rem;
    line-height: 1.1;
}
.bhq-action-card p { margin-bottom: .75rem; }
.bhq-action-card .card-body > .btn,
.bhq-action-card .card-body > .btn-list,
.bhq-action-card .card-body > .d-flex:last-child,
.bhq-action-card .card-body > ul { margin-top: auto; }

/* ---- Alerts / banners -------------------------------------------------- */
.alert {
    border: 0;
    border-radius: var(--bhq-radius-card);
    box-shadow: var(--bhq-shadow-card);
}
.bhq-banner-stack {
    display: grid;
    gap: .5rem;
    margin-top: .65rem;
}
.bhq-banner-stack .alert { margin-bottom: 0; }

/* ---- Pagination pills -------------------------------------------------- */
.bhq-pagination button {
    border-radius: 999px;
    border-color: transparent;
    background: rgba(37, 99, 235, .07);
}
.bhq-pagination button.active { background: var(--bhq-gradient); }

/* ---- Login hero -------------------------------------------------------- */
.bhq-hero {
    background:
        linear-gradient(150deg, rgba(15, 23, 42, .94), rgba(15, 118, 110, .92)),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: auto, 3rem 3rem, 3rem 3rem;
}
.bhq-glass {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--bhq-radius-card);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .2);
}
[data-bs-theme="dark"] .bhq-glass {
    background: rgba(23, 26, 46, .9);
    border-color: rgba(255, 255, 255, .08);
}
.bhq-captcha-image {
    width: 100%;
    height: 2.5rem;
    object-fit: cover;
    border: 1px solid var(--tblr-border-color);
    border-radius: 7px;
}
.bhq-language-menu {
    position: relative;
    z-index: 1040;
}
.bhq-language-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2rem;
    max-width: 100%;
}
.bhq-language-menu .dropdown-menu {
    min-width: 12rem;
    text-align: start;
}
.bhq-auth-language-row {
    display: flex;
    justify-content: center;
}

/* ---- Compact public signup ------------------------------------------- */
.bhq-signup-shell {
    width: min(100%, 44rem);
}
.bhq-signup-brand {
    display: grid;
    justify-items: center;
    gap: .35rem;
}
.bhq-signup-brand .navbar-brand {
    min-height: 2.25rem;
    padding: 0;
}
.bhq-signup-personas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.bhq-signup-personas .form-check {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    min-width: 0;
    margin: 0;
    padding: .5rem .6rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 7px;
    background: var(--tblr-bg-surface-secondary, rgba(37, 99, 235, .04));
}
.bhq-signup-personas .form-check-input {
    flex: 0 0 auto;
    margin-inline-start: 0;
}
.bhq-signup-personas .form-check-description {
    display: block;
    margin: .1rem 0 0;
    line-height: 1.35;
}

/* ---- Reports ----------------------------------------------------------- */
.bhq-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .9rem 1rem;
    margin-bottom: var(--bhq-page-gap);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--bhq-radius-card);
    background: var(--tblr-bg-surface);
    box-shadow: var(--bhq-shadow-card);
}
.bhq-report-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 13rem;
}
.bhq-report-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    background: var(--bhq-gradient);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}
.bhq-report-app {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
}
.bhq-report-meta {
    display: grid;
    gap: .1rem;
    min-width: 8.5rem;
}
.bhq-report-meta span {
    color: var(--tblr-secondary);
    font-size: .75rem;
}
.bhq-report-meta strong {
    font-size: .95rem;
}

/* ---- Detail helpers ---------------------------------------------------- */
.bhq-kv-row {
    min-height: 4.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .65rem .75rem;
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: 8px;
    background: var(--tblr-bg-surface-secondary, rgba(37, 99, 235, .03));
}
.bhq-kv-row > div {
    min-width: 0;
}
.bhq-kv-row strong {
    display: block;
    overflow-wrap: anywhere;
}
.bhq-score-card {
    padding: .65rem .75rem;
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: 8px;
    background: rgba(37, 99, 235, .05);
}
.bhq-score-badge {
    min-width: 3.7rem;
    justify-content: center;
}
.bhq-score-excellent { background: var(--tblr-green-lt); color: var(--tblr-green); }
.bhq-score-good { background: var(--tblr-blue-lt); color: var(--tblr-blue); }
.bhq-score-watch { background: var(--tblr-yellow-lt); color: var(--tblr-yellow); }
.bhq-score-risk { background: var(--tblr-red-lt); color: var(--tblr-red); }

/* ---- Compact disclosures and lease lifecycle actions ------------------ */
.bhq-disclosure {
    padding: 0;
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: var(--bhq-radius-control);
    background: var(--tblr-bg-surface-secondary, rgba(37, 99, 235, .03));
}
.bhq-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .6rem .75rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.bhq-disclosure > summary::-webkit-details-marker,
.bhq-row-disclosure > summary::-webkit-details-marker { display: none; }
.bhq-disclosure > summary::after {
    content: "";
    width: .45rem;
    height: .45rem;
    margin-inline-start: auto;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .12s ease;
}
.bhq-disclosure[open] > summary::after { transform: rotate(225deg); }
.bhq-disclosure-body {
    padding: .75rem;
    border-top: 1px solid var(--tblr-border-color-translucent);
}
.bhq-disclosure-body > :last-child { margin-bottom: 0; }
.bhq-row-disclosure { display: inline-block; text-align: start; }
.bhq-row-disclosure > summary { list-style: none; }
.bhq-row-disclosure[open] > summary { background: var(--tblr-red-lt); color: var(--tblr-red); }
.bhq-row-disclosure > form {
    width: min(16rem, 70vw);
    margin-block-start: .35rem;
    padding: .6rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--bhq-radius-control);
    background: var(--tblr-bg-surface);
    box-shadow: var(--bhq-shadow-card);
}

/* ---- Focused renter creation and lease picker ------------------------- */
.bhq-renter-picker {
    display: grid;
    /*
     * The select sizes to its longest renter name rather than to whatever is left over.
     * minmax(0, 1fr) let it shrink below its content, so "Mohammadreza Hosseini-Nejad" was
     * truncated to a few characters while the Add-renter button kept its full width. max-content
     * is the widest option; the floor stops a short list collapsing to a stub, and min(100%, …)
     * keeps that floor from overflowing a narrow column.
     */
    grid-template-columns: minmax(min(100%, 14rem), max-content) auto;
    gap: .5rem;
    align-items: stretch;
}
/* A very long name still must not push the row wider than its column. */
.bhq-renter-picker .form-select {
    max-width: 100%;
    text-overflow: ellipsis;
}
.bhq-renter-picker .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.bhq-party-form {
    width: min(100%, 68rem);
    margin-inline: auto;
}
.bhq-party-form .card-body { padding: 1rem; }
.bhq-party-form .card-footer { padding: .75rem 1rem; }
.bhq-party-photo-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.bhq-party-photo-preview {
    display: grid;
    place-items: center;
    width: min(100%, 11rem);
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    overflow: hidden;
    border: 1px dashed var(--tblr-border-color);
    border-radius: 8px;
    background: var(--tblr-bg-surface-secondary, rgba(37, 99, 235, .04));
    color: var(--tblr-secondary-color);
}
.bhq-party-photo-preview .bi { font-size: 3rem; }
.bhq-party-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bhq-party-photo-preview.is-loaded .bi { display: none; }

/* Generated helpers are overlays: long localized wording must never resize aligned form rows. */
.bhq-amount-field-wrap { position: relative; }
.bhq-amount-field-wrap:focus-within { z-index: 25; }
.amount-words {
    position: absolute;
    z-index: 30;
    inset-inline-end: 0;
    top: calc(100% + .3rem);
    width: max-content;
    max-width: min(28rem, 78vw);
    margin: 0;
    padding: .35rem .5rem;
    border: 1px solid rgba(47, 179, 68, .24);
    border-radius: 6px;
    background: var(--tblr-bg-surface);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: start;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.2rem);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.amount-words:empty { display: none; }
.bhq-amount-field-wrap:focus-within .amount-words:not(:empty) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.bhq-period-picker > :first-child {
    flex: 0 0 5.6rem;
}
.bhq-period-picker > :last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Compact unit workspace ------------------------------------------ */
.bhq-unit-detail-page .page-body { padding-top: .75rem; }
.bhq-unit-summary {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}
.bhq-summary-card { min-width: 0; }
.bhq-summary-card .card-body { padding: .7rem .8rem; }
.bhq-summary-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .25rem;
    color: var(--tblr-secondary-color);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.bhq-summary-label .bi {
    color: var(--tblr-primary);
    font-size: .9rem;
}
.bhq-summary-value {
    display: block;
    min-width: 0;
    color: var(--tblr-body-color);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.bhq-unit-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(17rem, .85fr);
    grid-template-areas: "ledger details";
    gap: .75rem;
    align-items: start;
    margin-bottom: .75rem;
}
.bhq-unit-details-card { grid-area: details; min-width: 0; }
.bhq-unit-ledger-card { grid-area: ledger; min-width: 0; }
.bhq-unit-detail-page .card-header { min-height: 2.75rem; padding: .6rem .75rem; }
.bhq-unit-detail-page .card-body { padding: .75rem; }
.bhq-unit-detail-page .card-table > :not(caption) > * > * { padding: .45rem .6rem; }
.bhq-unit-details-card .bhq-kv-row { padding: .45rem .55rem; }
.bhq-unit-edit-disclosure { margin-top: .65rem; }
.bhq-unit-admin-grid { --tblr-gutter-y: .75rem; margin-bottom: 0; }
.bhq-unit-admin-grid > [class*="col-"] { min-width: 0; }
.bhq-unit-detail-page .table-responsive { min-width: 0; }

@media (max-width: 1199.98px) {
    .bhq-unit-main-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "details" "ledger";
    }
}

/* ---- Rental portals --------------------------------------------------- */
.bhq-rental-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .75rem;
}
.bhq-rental-summary-item {
    min-width: 0;
    padding: .5rem .6rem;
    border-inline-start: 3px solid rgba(37, 99, 235, .35);
    background: var(--tblr-bg-surface-secondary, rgba(37, 99, 235, .03));
}
.bhq-rental-summary-item > :last-child {
    margin-bottom: 0;
    overflow-wrap: anywhere;
}
.bhq-renter-portal .page-wrapper .card .card-body,
.bhq-tenant-portal .page-wrapper .card .card-body { padding: .75rem; }
.bhq-renter-portal .page-wrapper > .page-body,
.bhq-tenant-portal .page-wrapper > .page-body { padding-top: .6rem; }
.bhq-renter-portal .alert { padding: .65rem .8rem; }
.bhq-workflow-disclosure { background: transparent; }
.bhq-workflow-disclosure > summary { min-height: 2.5rem; }
.bhq-renter-portal .table-sm > :not(caption) > * > *,
.bhq-tenant-portal .table-sm > :not(caption) > * > * { padding: .38rem .5rem; }

/* ---- File / receipt viewer -------------------------------------------- */
.bhq-file-viewer-body {
    min-height: min(72vh, 44rem);
    background: #0f172a;
    display: grid;
    place-items: center;
}
.bhq-file-viewer-body > img,
.bhq-file-viewer-body > iframe {
    display: none;
    width: 100%;
    min-height: min(72vh, 44rem);
    border: 0;
}
.bhq-file-viewer-body > img {
    width: auto;
    max-width: 100%;
    max-height: 72vh;
    min-height: 0;
}
.bhq-file-viewer-body.is-image > img,
.bhq-file-viewer-body.is-document > iframe {
    display: block;
}
.bhq-file-actions .btn-icon {
    width: 2rem;
    min-height: 2rem;
}

/* ---- Files and notes workspaces --------------------------------------- */
.bhq-files-page .page-header .container-xl,
.bhq-notes-page .page-header .container-xl {
    align-items: center;
}
.bhq-library-toolbar,
.bhq-notes-toolbar {
    padding-block: .65rem !important;
    background: var(--tblr-bg-surface-secondary, rgba(15, 23, 42, .02));
}
.bhq-library-toolbar .form-label,
.bhq-notes-toolbar .form-label {
    margin-block-end: .25rem;
    font-size: .72rem;
}
.bhq-toolbar-actions { flex-wrap: nowrap; }
.bhq-file-name-cell {
    min-width: 15rem;
    max-width: 34rem;
}
.bhq-note-row {
    padding: .8rem .9rem;
    border-inline-start: 3px solid transparent;
}
.bhq-note-row.is-pinned {
    border-inline-start-color: var(--tblr-yellow);
    background: rgba(245, 159, 0, .035);
}
.bhq-note-row > .d-flex,
.bhq-note-row .flex-grow-1,
.bhq-note-heading > div:first-child {
    min-width: 0;
}
.bhq-note-row h4 {
    font-size: .95rem;
    line-height: 1.3;
}
.bhq-note-actions { margin-inline-start: auto; }
.bhq-note-actions .btn-icon {
    width: 2rem;
    min-height: 2rem;
}
.bhq-note-row .collapse form { background: transparent; }

/* ---- Payment matrix --------------------------------------------------- */
.bhq-matrix-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: 8px;
    background: var(--tblr-border-color-translucent);
    box-shadow: var(--bhq-shadow-card);
}
.bhq-matrix-summary-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .72rem .8rem;
    background: var(--tblr-bg-surface);
}
.bhq-matrix-summary-item > span:last-child { min-width: 0; }
.bhq-matrix-summary-item small,
.bhq-matrix-summary-item strong { display: block; }
.bhq-matrix-summary-item small {
    color: var(--tblr-secondary-color);
    font-size: .72rem;
}
.bhq-matrix-summary-item strong {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bhq-matrix-summary-icon {
    display: inline-grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 7px;
}
.bhq-matrix-card-header { justify-content: flex-start; }
.bhq-matrix-card,
.bhq-payment-history-card { overflow: hidden; }
.bhq-matrix-card > .table-responsive,
.bhq-payment-history-card > .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.bhq-matrix-legend {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    color: var(--tblr-secondary-color);
    font-size: .75rem;
}
.bhq-matrix-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.bhq-matrix-legend strong { color: var(--tblr-body-color); }
.bhq-status-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--tblr-secondary-color);
}
.bhq-status-dot.bhq-state-paid { background: var(--tblr-green); }
.bhq-status-dot.bhq-state-partial { background: var(--tblr-yellow); }
.bhq-status-dot.bhq-state-due { background: var(--tblr-red); }
.bhq-status-dot.bhq-state-future { background: var(--tblr-blue); opacity: .55; }
.bhq-status-dot.bhq-state-no_lease { background: var(--tblr-secondary-color); opacity: .35; }
.bhq-payment-matrix {
    width: 100%;
    min-width: 52rem;
    margin-bottom: 0;
    table-layout: fixed;
}
.bhq-payment-matrix > :not(caption) > * > * {
    padding: .38rem .3rem;
    border-inline-end: 1px solid var(--tblr-border-color-translucent);
}
.bhq-payment-matrix thead th {
    height: 2.75rem;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    color: var(--tblr-secondary-color);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.bhq-payment-matrix .bhq-matrix-unit {
    position: sticky;
    z-index: 3;
    inset-inline-start: 0;
    width: 4.5rem;
    min-width: 4.5rem;
    background: var(--tblr-bg-surface);
}
.bhq-payment-matrix .bhq-matrix-renter {
    position: sticky;
    z-index: 3;
    inset-inline-start: 4.5rem;
    width: 8rem;
    min-width: 8rem;
    overflow: hidden;
    background: var(--tblr-bg-surface);
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 7px 0 10px -10px rgba(15, 23, 42, .55);
}
[dir="rtl"] .bhq-payment-matrix .bhq-matrix-renter {
    box-shadow: -7px 0 10px -10px rgba(15, 23, 42, .55);
}
.bhq-payment-matrix thead .bhq-matrix-unit,
.bhq-payment-matrix thead .bhq-matrix-renter {
    z-index: 5;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
}
.bhq-payment-matrix .bhq-matrix-month,
.bhq-payment-matrix .bhq-matrix-cell-wrap {
    width: 2.75rem;
    min-width: 2.75rem;
}
.bhq-payment-matrix .bhq-matrix-total {
    width: 5.5rem;
    min-width: 5.5rem;
}
.bhq-renter-matrix {
    min-width: 0;
    padding-block-start: .9rem;
    border-block-start: 1px solid var(--tblr-border-color-translucent);
}
.bhq-payment-matrix-renter {
    min-width: 34rem;
}
.bhq-payment-matrix-renter .bhq-matrix-month,
.bhq-payment-matrix-renter .bhq-matrix-cell-wrap {
    width: calc(100% / 12);
}
.bhq-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-height: 2rem;
    margin-inline: auto;
    padding: .25rem .2rem;
    border: 1px solid transparent;
    border-radius: 7px;
    color: inherit;
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.bhq-matrix-cell:hover,
.bhq-matrix-cell:focus-visible {
    border-color: currentColor;
    color: inherit;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
    transform: translateY(-1px);
}
.bhq-matrix-cell.bhq-state-paid,
.bhq-matrix-cell.bhq-state-settled { color: var(--tblr-green); background: var(--tblr-green-lt); }
.bhq-matrix-cell.bhq-state-partial { color: #8a6500; background: var(--tblr-yellow-lt); }
.bhq-matrix-cell.bhq-state-due { color: var(--tblr-red); background: var(--tblr-red-lt); }
.bhq-matrix-cell.bhq-state-future { color: var(--tblr-blue); background: var(--tblr-blue-lt); opacity: .68; }
.bhq-matrix-cell.bhq-state-no_lease { color: var(--tblr-secondary-color); background: transparent; opacity: .45; }
.bhq-matrix-total strong { font-size: .75rem; white-space: nowrap; }

/* ---- Icon to label breathing room --------------------------------------
   The standing rule: an icon followed by its text label always gets visible space, in every
   context (titles, buttons, list items, table cells). :last-child handles icon-only buttons and
   trailing chevrons, which must NOT pick up a stray margin. Logical property = RTL-safe. */
i.bi:not(:last-child) { margin-inline-end: .45rem; }
.card-title .bi, .alert-title .bi,
h1 .bi, h2 .bi, h3 .bi, h4 .bi, .modal-title .bi { margin-inline-end: .6rem; }
.btn-icon .bi, .bhq-pagination .bi { margin-inline-end: 0; }
.dropdown-item .lang-flag { margin-inline-end: .5rem; }

/* ---- Shared section tab rail ------------------------------------------- */
.bhq-section-nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--bhq-radius-card);
    background: var(--tblr-bg-surface);
    box-shadow: var(--bhq-shadow-card);
    scrollbar-width: thin;
}
.bhq-account-tabs {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding: .3rem;
    gap: .2rem;
}
.bhq-account-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.35rem;
    padding: .45rem .75rem;
    border: 0;
    border-radius: 6px;
    color: var(--tblr-secondary-color);
    white-space: nowrap;
}
.bhq-account-tabs .nav-link .bi { margin-inline-end: 0; }
.bhq-account-tabs .nav-link:hover {
    color: var(--tblr-body-color);
    background: rgba(var(--tblr-primary-rgb), .07);
}
.bhq-account-tabs .nav-link.active {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--tblr-primary-rgb), .12);
}
[data-bs-theme="dark"] .bhq-section-nav {
    background: #171a2e;
    border-color: rgba(255, 255, 255, .08);
}

/* ---- Expense register -------------------------------------------------- */
.bhq-expense-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem;
}
.bhq-compact-filters {
    display: grid;
    grid-template-columns: minmax(10rem, 1.6fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto auto auto;
    gap: .4rem;
    align-items: center;
    flex: 1 1 42rem;
    max-width: 58rem;
}
.bhq-expense-details { max-width: 22rem; }
.bhq-expense-details .small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Google-style month calendar --------------------------------------- */
.bhq-cal {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--bhq-radius-card);
    overflow: hidden;
    background: var(--tblr-bg-surface);
    box-shadow: var(--bhq-shadow-card);
}
.bhq-cal-head, .bhq-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.bhq-cal-head > div {
    padding: .5rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--tblr-secondary);
    border-bottom: 1px solid var(--tblr-border-color);
    text-align: start;
}
.bhq-cal-cell {
    min-height: 6.25rem;
    padding: .4rem .45rem;
    border-inline-end: 1px solid var(--tblr-border-color);
    border-bottom: 1px solid var(--tblr-border-color);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background .1s ease;
}
.bhq-cal-grid > *:nth-child(7n) { border-inline-end: 0; }
a.bhq-cal-cell:hover { background: rgba(37, 99, 235, .05); }
.bhq-cal-cell.bhq-cal-blank { background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.02)); }
.bhq-cal-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.bhq-cal-cell.bhq-cal-selected { background: rgba(37, 99, 235, .08); }
.bhq-cal-today .bhq-cal-day {
    background: var(--bhq-gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.bhq-cal-event {
    display: block;
    font-size: .72rem;
    line-height: 1.25;
    padding: .1rem .4rem;
    margin-bottom: .15rem;
    border-radius: 6px;
    background: rgba(37, 99, 235, .12);
    color: var(--tblr-body-color);
    border-inline-start: 3px solid var(--bhq-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bhq-cal-event.done {
    opacity: .55;
    text-decoration: line-through;
    border-inline-start-color: var(--tblr-secondary);
}
[data-bs-theme="dark"] .bhq-cal-event { background: rgba(37, 99, 235, .18); }

/* ---- Compact nested work panels --------------------------------------- */
.bhq-inline-panel {
    border-color: rgba(15, 23, 42, .08);
    padding: .85rem;
}
[data-bs-theme="dark"] .bhq-inline-panel {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
}
.bhq-inline-panel > :last-child { margin-bottom: 0; }
.bhq-inline-panel > h4 {
    margin-bottom: .35rem;
    font-size: .95rem;
    font-weight: 700;
}
.bhq-inline-panel > p { margin-bottom: .65rem; }
.maintenance-thread { gap: .45rem; }
.maintenance-thread-item {
    grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto;
    gap: .55rem;
    padding: .55rem .65rem;
}

/* ---- Empty states ------------------------------------------------------ */
.page-wrapper .empty {
    min-height: 0;
    padding: 1.5rem 1rem;
}
.page-wrapper .empty-title { margin-bottom: 0; }

/* ---- Dashboard clock ---------------------------------------------------- */
.bhq-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
html[lang="fa"] .bhq-clock {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1;
    font-variant-numeric: proportional-nums;
}

@media (max-width: 767.98px) {
    .bhq-account-tabs { padding: .25rem; }
    .bhq-account-tabs .nav-link { padding-inline: .65rem; }
    .bhq-matrix-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bhq-matrix-summary-item { padding: .58rem .6rem; }
    .bhq-matrix-summary-icon { flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; }
    .bhq-matrix-legend { gap: .55rem; }
    .bhq-payment-matrix .bhq-matrix-unit {
        width: 4.25rem;
        min-width: 4.25rem;
    }
    .bhq-payment-matrix .bhq-matrix-renter {
        inset-inline-start: 4.25rem;
        width: 7.5rem;
        min-width: 7.5rem;
    }
    .bhq-party-form { --tblr-gutter-y: .65rem; }
    .bhq-party-photo-panel {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: .65rem;
        align-items: center;
        text-align: start;
    }
    .bhq-party-photo-preview {
        grid-row: 1 / span 3;
        width: 5rem;
        margin: 0;
    }
    .bhq-party-photo-panel .form-label { margin-bottom: -.25rem; }
    .bhq-compact-filters {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: none;
    }
    .bhq-compact-filters > :first-child { grid-column: 1 / -1; }
    .bhq-expense-details { min-width: 12rem; }
    .bhq-expense-description { order: 1; }
    .bhq-expense-submit { order: 2; }
    .page-wrapper > .page-header { padding-top: .65rem; }
    .page-wrapper > .page-body { padding-top: .65rem; }
    .page-header .container-xl,
    .card-header.d-flex {
        align-items: stretch;
    }
    .page-header form,
    .card-header form,
    .btn-list,
    .bhq-band-actions {
        width: 100%;
    }
    .page-header form > *,
    .card-header form > *,
    .btn-list > * {
        flex: 1 1 auto;
    }
    .page-header form.d-flex > :where(.form-control, .form-select, .btn) {
        width: 100%;
        flex: 1 1 100%;
    }
    .bhq-band-metric { min-width: 0; }
    .card-body { min-width: 0; }
    .bhq-renter-topbar .navbar-brand,
    .bhq-renter-topbar .navbar-nav {
        flex: 1 1 100%;
    }
    .bhq-renter-topbar .navbar-nav {
        justify-content: flex-start;
    }
    .bhq-topbar-context {
        flex: 1 1 100%;
        order: 2;
    }
    .bhq-topbar-context strong {
        max-width: 14rem;
    }
    .bhq-cal { overflow: hidden; }
    .bhq-cal-head,
    .bhq-cal-grid {
        min-width: 0;
        width: 100%;
    }
    .bhq-cal-head > div {
        min-width: 0;
        padding: .35rem .1rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bhq-cal-cell {
        min-width: 0;
        min-height: 4rem;
        padding: .2rem;
    }
    .bhq-cal-day {
        width: 1.45rem;
        height: 1.45rem;
        margin-bottom: .15rem;
        font-size: .72rem;
    }
    .bhq-cal-event {
        display: inline-block;
        width: .42rem;
        height: .42rem;
        margin: .1rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        font-size: 0;
        background: var(--bhq-primary);
    }
    .maintenance-status-select { min-width: 8.5rem; }
    .bhq-rental-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bhq-rental-summary-item { padding: .45rem .5rem; }
    .bhq-rental-summary-item .h3 { font-size: 1rem; }
    .bhq-renter-topbar .container-xl {
        flex-wrap: nowrap;
        gap: .35rem;
    }
    .bhq-renter-topbar .navbar-brand {
        width: auto;
        flex: 1 1 auto;
        padding-inline-end: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    .bhq-renter-topbar .navbar-nav {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: .15rem !important;
    }
    .bhq-renter-account-name { display: none; }
    .bhq-renter-topbar .btn-icon,
    .bhq-renter-topbar .nav-link { min-width: 2rem; }
    .bhq-workflow-disclosure .row > [class*="col-"] { min-width: 0; }
    .bhq-workflow-disclosure input[type="file"] { max-width: 100%; }
    .bhq-workflow-disclosure button[type="submit"] { width: 100%; }
    .table-responsive { max-width: 100%; }
    .bhq-row-disclosure > form { width: min(14rem, 72vw); }
    .bhq-unit-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }
    .bhq-unit-summary > :first-child { grid-column: 1 / -1; }
    .bhq-summary-card .card-body { padding: .6rem .65rem; }
    .bhq-summary-value { font-size: 1rem; }
    .bhq-unit-main-grid { gap: .5rem; }
    .bhq-unit-detail-page .card-header { padding: .55rem .65rem; }
    .bhq-unit-detail-page .card-body { padding: .65rem; }
    .bhq-unit-detail-page .card-table > :not(caption) > * > * { padding: .4rem .5rem; }
    .bhq-unit-ledger-card input[type="file"] { max-width: 8rem !important; }
    .bhq-party-form .card-body { padding: .75rem; }
    .bhq-party-form .card-footer { padding: .65rem .75rem; }
}

@media (max-width: 575.98px) {
    .bhq-matrix-summary-item strong { font-size: .88rem; }
    .bhq-matrix-summary-item small { font-size: .66rem; }
    .amount-words { max-width: min(22rem, 86vw); }
    .bhq-renter-picker { grid-template-columns: minmax(0, 1fr); }
    .bhq-renter-picker .btn { justify-content: center; }
    .bhq-signup-personas { grid-template-columns: minmax(0, 1fr); }
    .bhq-signup-shell { padding-inline: .75rem; }
    .bhq-parties-page .page-header .container-xl { align-items: center; }
    .bhq-parties-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .bhq-parties-toolbar .bhq-search-form {
        flex: 0 0 auto;
        flex-direction: row;
    }
    .bhq-parties-toolbar .bhq-search-form {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .bhq-parties-toolbar .bhq-search-form input[type="search"] {
        width: auto;
        max-width: none;
        min-width: 0;
        flex: 1 1 0;
    }
    .bhq-parties-toolbar .bhq-search-form .btn {
        flex: 0 0 auto;
    }
    .bhq-library-toolbar .bhq-toolbar-actions,
    .bhq-library-toolbar .bhq-toolbar-actions .btn {
        width: 100%;
    }
    .bhq-library-toolbar .bhq-toolbar-actions .btn { flex: 1 1 0; }
    .bhq-notes-toolbar form { flex-wrap: wrap; }
    .bhq-notes-toolbar form > div { flex-basis: 100%; }
    .bhq-notes-toolbar form > .btn { flex: 1 1 0; }
    .bhq-note-row { padding: .7rem .75rem; }
    .bhq-note-row > .d-flex { gap: .65rem !important; }
    .bhq-note-heading { flex-wrap: wrap; }
    .bhq-note-actions {
        flex-basis: 100%;
        margin-inline-start: 0;
        justify-content: flex-start;
    }
    .bhq-file-name-cell { min-width: 12rem; }
}

@page { margin: 10mm; }

@media print {
    body {
        background: #fff !important;
        color: #111 !important;
        font-size: 9pt;
    }
    .navbar,
    .bhq-topbar,
    .bhq-renter-topbar,
    .bhq-pagination,
    .btn,
    form,
    .d-print-none {
        display: none !important;
    }
    .page-wrapper,
    .page-body,
    .container-xl {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    .page-body .container-xl > * + * {
        margin-block-start: .35rem !important;
    }
    .page-wrapper .card {
        box-shadow: none !important;
        border: 1px solid #cfd6df !important;
        break-inside: avoid;
    }
    .page-wrapper .card .card-header,
    .page-wrapper .card .card-body,
    .page-wrapper .card .card-footer {
        padding: .35rem .45rem !important;
    }
    .bhq-report-header {
        padding: .45rem .55rem !important;
        margin-bottom: .4rem !important;
        box-shadow: none !important;
        border-color: #cfd6df !important;
        break-inside: avoid;
    }
    .bhq-report-logo {
        width: 1.8rem;
        height: 1.8rem;
        box-shadow: none !important;
    }
    .bhq-report-app {
        font-size: .95rem;
    }
    .table {
        margin-bottom: 0 !important;
    }
    .table th,
    .table td {
        padding: .18rem .28rem !important;
        font-size: 8.2pt;
        line-height: 1.2;
    }
    .table thead th {
        color: #333 !important;
        border-bottom: 1px solid #aeb8c4 !important;
    }
    .badge {
        border: 1px solid #b8c2cc !important;
        color: #111 !important;
        background: transparent !important;
    }
    a {
        color: inherit !important;
        text-decoration: none !important;
    }
}


/* Collections dashboard: a dependency-free CSS bar chart of monthly collection rate. */
.bhq-collect-chart { display: flex; gap: .6rem; align-items: flex-end; min-height: 170px; }
.bhq-collect-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.bhq-collect-bar-track { width: 100%; height: 130px; display: flex; align-items: flex-end;
    background: var(--tblr-bg-surface-secondary, #f1f5f9); border-radius: 6px; overflow: hidden; }
.bhq-collect-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height .3s ease; min-height: 2px; }
.bhq-collect-bar.is-good { background: #2fb344; }
.bhq-collect-bar.is-mid  { background: #f59f00; }
.bhq-collect-bar.is-bad  { background: #d63939; }
.bhq-collect-pct { font-weight: 600; font-size: .8rem; }
.bhq-collect-label { color: var(--tblr-secondary); font-size: .7rem; }

/* Shared, dependency-free financial bars. Exact values stay in server-rendered screen-reader text. */
.bhq-financial-card { overflow: hidden; }
.bhq-chart-legend { display: flex; align-items: center; gap: 1rem; color: var(--tblr-secondary); font-size: .8rem; }
.bhq-chart-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.bhq-chart-toggle .bi { display: inline-block; transition: transform var(--bhq-motion-base, 220ms) var(--bhq-motion-ease, ease); }
.bhq-chart-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.bhq-legend-swatch { inline-size: .65rem; block-size: .65rem; border-radius: 2px; background: var(--tblr-primary); }
.bhq-legend-swatch.is-income { background: #2fb344; }
.bhq-legend-swatch.is-expense { background: #d63939; }
.bhq-legend-swatch.is-collected { background: #206bc4; }
.bhq-legend-swatch.is-expected { background: #94a3b8; }
.bhq-financial-chart-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.bhq-financial-chart { min-inline-size: 42rem; block-size: 11rem; display: grid; grid-template-columns: repeat(12, minmax(2.5rem, 1fr)); gap: .5rem; align-items: end; border-block-end: 1px solid var(--tblr-border-color); }
.bhq-financial-month { block-size: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; }
.bhq-financial-bars { inline-size: 100%; block-size: 8rem; flex: none; display: flex; align-items: flex-end; justify-content: center; gap: .18rem; }
.bhq-financial-bar { inline-size: min(42%, 1.15rem); block-size: 100%; overflow: visible; transform: scaleY(-1); }
.bhq-financial-bar rect { rx: 2px; transition: height .25s ease; }
.bhq-financial-bar.is-income rect { fill: #2fb344; }
.bhq-financial-bar.is-expense rect { fill: #d63939; }
.bhq-financial-bar.is-collected rect { fill: #206bc4; }
.bhq-financial-bar.is-expected rect { fill: #94a3b8; }
.bhq-financial-label { max-inline-size: 4.25rem; min-block-size: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tblr-secondary); font-size: .7rem; }
.bhq-dataexchange-actions > div { padding: .75rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.bhq-file-drop { padding: .7rem; border: 1px dashed var(--tblr-primary); border-radius: var(--tblr-border-radius); background: color-mix(in srgb, var(--tblr-bg-surface) 95%, var(--tblr-primary) 5%); }

@media (max-width: 575.98px) {
    .bhq-chart-legend { inline-size: 100%; justify-content: flex-start; }
    .bhq-financial-chart-scroll { padding-inline: .75rem; }
}


/* Conversation threads. The internal/participant split is the thing a reader must never have to
   squint at, so it is carried by the border colour and a shifted background, not by the badge
   alone — logical properties so the accent lands on the reading edge in RTL too. */
.bhq-thread { display: flex; flex-direction: column; gap: .75rem; }
.bhq-thread-message {
    border-inline-start: 3px solid var(--tblr-border-color, #dbe0e5);
    padding: .5rem .75rem;
    border-radius: 0 6px 6px 0;
    background: var(--tblr-bg-surface-secondary, #f8fafc);
}
.bhq-thread-message.bhq-thread-internal {
    border-inline-start-color: #94a3b8;
    background: transparent;
    border-block: 1px dashed var(--tblr-border-color, #dbe0e5);
    border-inline-end: 1px dashed var(--tblr-border-color, #dbe0e5);
}
.bhq-thread-message.bhq-thread-inbound { border-inline-start-color: #206bc4; }
.bhq-thread-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .8rem; color: var(--tblr-secondary);
    margin-bottom: .25rem;
}
.bhq-thread-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Phone-first inspection capture: a stable signing surface and compact evidence thumbnails. */
.inspection-signature { display: block; height: 7.5rem; touch-action: none; background: var(--tblr-bg-forms, #fff); }
.inspection-thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: .375rem; }
@media (max-width: 575.98px) {
    .inspection-signature { height: 10rem; }
    .inspection-thumb { width: 4rem; height: 4rem; }
}

/* Shared product motion: fast feedback and orientation without moving operational geometry. */
:root {
    --bhq-motion-fast: 140ms;
    --bhq-motion-base: 220ms;
    --bhq-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

.bhq-motion-ready .page-header .container-xl {
    animation: bhq-page-in var(--bhq-motion-base) var(--bhq-motion-ease) both;
}
/* Do not animate .page-body containers: they contain fixed modals, and either an opacity or
   transform animation creates a stacking context that can trap the modal below its body backdrop. */
.bhq-motion-ready .bhq-stat-grid > [class*="col-"] {
    animation: bhq-card-in 340ms var(--bhq-motion-ease) both;
}
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(2) { animation-delay: 35ms; }
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(3) { animation-delay: 70ms; }
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(4) { animation-delay: 105ms; }
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(5) { animation-delay: 140ms; }
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(6) { animation-delay: 175ms; }
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(7) { animation-delay: 210ms; }
.bhq-motion-ready .bhq-stat-grid > [class*="col-"]:nth-child(8) { animation-delay: 245ms; }
.bhq-motion-ready .alert {
    animation: bhq-alert-in 260ms var(--bhq-motion-ease) both;
}
.dropdown-menu.show {
    transform-origin: top center;
    animation: bhq-pop-in var(--bhq-motion-fast) var(--bhq-motion-ease) both;
}
[dir="rtl"] .dropdown-menu.show { transform-origin: top right; }

.btn,
.form-control,
.form-select,
.form-check-input,
.nav-link,
.badge {
    transition-duration: var(--bhq-motion-fast);
    transition-timing-function: ease;
}
.btn { transition-property: transform, box-shadow, color, background-color, border-color; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0) scale(.98); }
.btn.bhq-submitting { animation: bhq-submit-pulse .7s ease-in-out infinite alternate; }
.navbar-vertical .nav-link-icon { transition: transform var(--bhq-motion-base) var(--bhq-motion-ease); }
.navbar-vertical .nav-link:hover .nav-link-icon { transform: translateY(-1px) scale(1.08); }
.navbar-vertical .nav-link.active .nav-link-icon { transform: scale(1.06); }
.bhq-stat-card {
    transition: transform var(--bhq-motion-base) var(--bhq-motion-ease),
                box-shadow var(--bhq-motion-base) ease;
}
.bhq-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 34px rgba(24, 36, 51, .10);
}
.bhq-stat-card .avatar .bi,
.bhq-action-card .avatar .bi {
    display: inline-block;
    transition: transform var(--bhq-motion-base) var(--bhq-motion-ease);
}
.bhq-stat-card:hover .avatar .bi,
.bhq-action-card:hover .avatar .bi { transform: scale(1.12) rotate(-3deg); }
.list-group-item-action { transition: background-color var(--bhq-motion-fast) ease, color var(--bhq-motion-fast) ease; }
.form-control,
.form-select { transition-property: border-color, box-shadow, background-color; }
a.bhq-action-card:focus-visible,
a.card:focus-visible { transform: translateY(-2px); }
.collapse { transition-timing-function: var(--bhq-motion-ease); }

@keyframes bhq-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes bhq-card-in {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bhq-alert-in {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bhq-pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bhq-submit-pulse {
    from { filter: brightness(1); }
    to { filter: brightness(1.12); }
}

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

@media print {
    .page-header .container-xl,
    .alert { animation: none !important; }
}
/* Install affordance stays reachable above mobile browser chrome without affecting page geometry. */
.bhq-pwa-install { position: fixed; inset-inline-end: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1080; box-shadow: 0 .5rem 1.5rem rgba(24,36,51,.22); }
.bhq-user-identity { max-width: 16rem; }
.bhq-user-identity > span,
.bhq-user-identity > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Account onboarding: compact enough to scan in one viewport, while the step rail becomes a
   normal vertical block on phones. Logical properties keep the same composition in RTL. */
.bhq-onboarding-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    grid-template-areas: "progress step" "activation step";
    gap: 1rem;
    align-items: start;
}
.bhq-onboarding-progress { grid-area: progress; position: sticky; top: 4.5rem; overflow: hidden; }
.bhq-onboarding-step { grid-area: step; min-width: 0; }
.bhq-activation-card { grid-area: activation; }
.bhq-onboarding-progress .list-group-item { min-height: 3.25rem; }
.bhq-onboarding-progress .list-group-item.active .text-secondary { color: inherit !important; }
.bhq-onboarding-step .card-body { min-height: 22rem; }
.bhq-onboarding-instructions > div > div { background: color-mix(in srgb, var(--tblr-bg-surface) 96%, var(--tblr-primary) 4%); }
.bhq-onboarding-instructions .subheader { letter-spacing: .035em; }
[dir="rtl"] .bhq-direction-arrow { transform: scaleX(-1); }
.bhq-choice-card { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.bhq-choice-card:has(input:checked) { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary); }
.bhq-onboarding-paused p { max-width: 38rem; }
.bhq-adoption-card { border-inline-start: .2rem solid var(--tblr-primary); }
.bhq-adoption-card .progress { width: 8rem; }
.bhq-adoption-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bhq-adoption-item { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .55rem .65rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.bhq-adoption-item.is-next { border-color: color-mix(in srgb, var(--tblr-primary) 55%, var(--tblr-border-color)); background: color-mix(in srgb, var(--tblr-bg-surface) 92%, var(--tblr-primary) 8%); }
.bhq-adoption-item.is-complete strong { color: var(--tblr-secondary); }
.bhq-adoption-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.bhq-activation-card .list-group-item { min-height: 3.5rem; }
@media (max-width: 991.98px) {
    .bhq-onboarding-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "progress" "step" "activation";
    }
    .bhq-onboarding-progress { position: static; }
    .bhq-onboarding-progress .list-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bhq-onboarding-step .card-body { min-height: 0; }
}
@media (max-width: 575.98px) {
    .bhq-onboarding-step-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
    }
    .bhq-onboarding-step-header > .avatar { grid-row: 1 / span 2; }
    .bhq-onboarding-step-header > .badge { grid-column: 2; justify-self: start; }
    .bhq-adoption-list { grid-template-columns: 1fr; }
    .bhq-adoption-card .progress { width: 6rem; }
    .bhq-adoption-item { align-items: flex-start; }
    .bhq-onboarding-progress .list-group {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .bhq-onboarding-progress .list-group-item {
        flex: 0 0 3.5rem;
        min-height: 3.25rem;
        justify-content: center;
        padding-inline: .5rem;
    }
    .bhq-onboarding-progress .list-group-item .flex-fill { display: none; }
}

/* ---- Interface tour (tour.js): spotlight ring + coach-mark popover ---- */
.bhq-tour-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: transparent;
}
.bhq-tour-ring {
    position: fixed; z-index: 1201; pointer-events: none;
    border: 2px solid var(--bhq-primary, #2563eb);
    border-radius: 10px;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, .25), 0 0 0 9999px rgba(15, 23, 42, .55);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.bhq-tour-pop {
    position: fixed; z-index: 1202;
    padding: 1rem 1.1rem .9rem;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    border-radius: 12px;
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #182433);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    transition: top .25s ease, left .25s ease;
}
.bhq-tour-pop:focus-visible { outline: 3px solid color-mix(in srgb, var(--tblr-primary) 70%, transparent); outline-offset: 2px; }
.bhq-tour-title { font-weight: 700; margin-bottom: .25rem; }
.bhq-tour-body { color: var(--tblr-secondary, #667382); line-height: 1.5; }
.bhq-tour-count { margin-top: .6rem; font-size: .75rem; color: var(--tblr-secondary, #667382); }
.bhq-tour-buttons { display: flex; gap: .5rem; margin-top: .6rem; }
.bhq-tour-buttons .bhq-tour-skip { margin-inline-end: auto; }
.bhq-tour-buttons .bhq-tour-next { color: #fff; background: var(--bhq-primary, #2563eb); }
@media (prefers-reduced-motion: reduce) {
    .bhq-tour-ring, .bhq-tour-pop { transition: none; }
}

/* Second-level tab strips (the Security sub-tabs). The strip carries its own tinted, bordered
   background so the child tabs read as a group and every tab is visible even when inactive —
   plain nav-pills left the unselected ones looking like loose text. */
.bhq-subnav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .3rem;
    background: var(--tblr-bg-surface-secondary, #f1f4f8);
    border: 1px solid var(--tblr-border-color);
    border-radius: .625rem;
}
.bhq-subnav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    color: var(--tblr-body-color);
    font-weight: 500;
    border-radius: .45rem;
}
.bhq-subnav .nav-link:hover:not(.active) { background: var(--tblr-bg-surface); }
.bhq-subnav .nav-link.active {
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-primary);
    box-shadow: 0 1px 2px rgba(24, 36, 51, .12);
}

/* Payment-matrix header controls: a one-column grid so search, years, and the Rent/Charge
   toggle always begin on the same column, regardless of wrapping or writing direction. */
.bhq-matrix-controls {
    display: grid;
    gap: .5rem;
    justify-items: start;
}
/* The generic header-form rules let search forms wrap; here the input and button must stay
   one row so the three control rows read as a tidy left-aligned column. */
.bhq-matrix-controls form.bhq-search-form {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: 0;
    flex-basis: auto;
}
.bhq-matrix-controls form.bhq-search-form input[type="search"] {
    flex: 0 1 14rem;
    min-width: 8rem;
}

/* Keep the unread count beside the bell, with room for localized multi-digit numbers. */
.bhq-notification-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-block-size: 2.5rem;
    padding-inline: .5rem;
    flex-shrink: 0;
    border-radius: .75rem;
}
.bhq-notification-bell > .bi { font-size: 1.125rem; }
.bhq-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5rem;
    min-block-size: 1.5rem;
    padding: .125rem .375rem;
    border-radius: 999px;
    background: #b42336;
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}
.bhq-notification-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.bhq-notification-content { min-inline-size: 0; overflow-wrap: anywhere; }
.bhq-notification-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}
.bhq-notification-actions .btn { min-block-size: 2.25rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    .bhq-notification-row { flex-direction: column; gap: .75rem; }
    .bhq-notification-actions {
        inline-size: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}