html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-image: url('../images/axcces-logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 140px;
    height: 22px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: .75rem;
    line-height: 1.2;
    margin: 2px 4px 2px 0;
    color: #fff;
    white-space: nowrap;
}

.badge-mobility {
    background-color: #0ea5e9;
}
/* cyan */
.badge-visionhearing {
    background-color: #8b5cf6;
}
/* purple */
.badge-cb {
    background-color: #22c55e;
}
/* green */
.badge-general {
    background-color: #64748b;
}
/* slate */
.badge-other {
    background-color: #ef4444;
}
/* red */
/* Pastel chips that read well on XAF grids */
.badge.chip {
    padding: .20rem .55rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
}

/* Soft green */
.chip-green {
    background: #EAF7EE;
    color: #1F7A3D;
    border-color: #BFE6CA;
}
/* Soft amber (warning) */
.chip-amber {
    background: #FFF4E5;
    color: #915F00;
    border-color: #FFD59F;
}
/* Soft red */
.chip-red {
    background: #FDECEC;
    color: #A12622;
    border-color: #F5B5B2;
}
/* Soft blue (info) */
.chip-blue {
    background: #E9F2FF;
    color: #1D5BBF;
    border-color: #B7D0FF;
}
/* Soft gray (neutral) */
.chip-gray {
    background: #F2F3F5;
    color: #3F4B57;
    border-color: #E1E4E8;
}

.chip-purple {
    background: #F3E9FF;
    color: #6B2FB9;
    border-color: #D9C2FF;
}

.chip-pink {
    background: #FFEAF3;
    color: #B12C6A;
    border-color: #FFBDD6;
}

.chip-teal {
    background: #E6FAF8;
    color: #1E8A83;
    border-color: #B9EFEA;
}

.chip-indigo-list {
    background: #ECEEFF;
    color: #3949AB;
    border-color: #C4CBFF;
}

.chip-yellow {
    background: #FFFBE5;
    color: #8A7B00;
    border-color: #FFF2A8;
}

.chip-orange {
    background: #FFEDE5;
    color: #B64A00;
    border-color: #FFCCB3;
}

.chip-cyan-list {
    background: #E7FBFF;
    color: #057F9A;
    border-color: #B9EFF8;
}

.chip-lime {
    background: #F2FFE5;
    color: #628A10;
    border-color: #D9F7A8;
}

/* "Expecting" tag. Copied value-for-value from the tenant portal's own badge
   (axcces-hub, .phc-expecting in HouseholdProfile.css: #ec4899 on #ffe9f0, 999px,
   0.7rem/600 with a leading pram glyph) so a manager and a resident see the same thing.
   The glyph is inline SVG - this app ships no icon font. */
.chip-expecting {
    background: #FFE9F0;
    color: #EC4899;
    border-color: #FFC9DC;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge.chip.chip-expecting {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
}

.badge.chip.chip-expecting .chip-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

/* "Needs Review" tag on the Lease-Up applications grid's Next Step column: an additional-document
   request the applicant has answered and nobody has acted on yet. Amber because it is a call to
   action, not a status. Structure mirrors .chip-expecting above -- inline-flex plus a gap so the
   leading SVG bell sits on the text baseline. */
.chip-review {
    background: #FEF3C7;
    color: #B45309;
    border-color: #FDE68A;
    font-size: 0.7rem;
    font-weight: 600;
}

.badge.chip.chip-review {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
}

.badge.chip.chip-review .chip-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.chip-magenta {
    background: #FFE5FE;
    color: #A0228A;
    border-color: #F7B3EF;
}

/* XAF/DevExpress dialog, not popup */
.dxbs-dialog .modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 1vh auto !important; /* optional – reduce side margins */
}

.dxbs-dialog .modal-content {
    height: 92vh !important;
    width: 100% !important;
}

.dxbs-dialog .modal-body {
    padding: 0 !important; /* lets the viewer touch the edges */
    height: calc(92vh - 56px) !important; /* adjust if your header/footer differ */
}

/* keep the popup override too, if you use popups elsewhere */
.dxbs-popup .modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
}

.dxbs-popup .modal-content {
    height: 92vh !important;
}

.dxbs-popup .modal-body {
    padding: 0 !important;
}
/* Limit Documents grid height so it scrolls internally */
.all-docs-grid-height {
    max-height: 420px; /* tweak until it fits nicely under the tab header */
}

/* ────────────────────────────────────────────────────────────────────────────
   Grid-row list-view tab-strip filter (LeaseUp + ReRental)
   ----------------------------------------------------------------------------
   Each list view's XAF controller exposes one SimpleAction per tab whose Execute
   event applies the matching filter. site.js (createTabController) HIDES those
   actions from the toolbar and renders a real tab strip above the grid; clicks
   on the strip invoke the hidden actions via .click().

   Each strip element carries a unique identity class (.leaseup-tabs-strip /
   .rerental-tabs-strip) used only for find/remove, plus the generic .axtab-strip
   class that all the styling below targets — so one rule set covers every grid.
   ──────────────────────────────────────────────────────────────────────────── */

/* The injected tab strip sits above the toolbar. */
.axtab-strip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 4px;
    margin: 4px 0 0 0;
    border-bottom: 1px solid #e3e9f4;
    background: transparent;
}

.axtab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #556887;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    line-height: 1.2;
    margin-bottom: -1px; /* overlap container border so the active underline aligns */
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.axtab:hover {
    color: #27324a;
    background: #fff4ec;
}

.axtab.is-active {
    color: #f76707;
    border-bottom-color: #f76707;
}

.axtab:focus-visible {
    outline: 2px solid var(--app-warning-border);
    outline-offset: -2px;
    border-radius: 4px;
}

.pac-container {
    z-index: 2147483647 !important;
}

.rerental-left-topgap {
    margin-top: 16px !important;
}

/* Make the grid header sticky inside that scroll area (extra safety) */
.all-docs-grid-height .dxbl-grid-table-header thead tr {
    position: sticky;
    top: 0;
    z-index: 5;
}

.rent-popup {
    padding: 14px 16px;
}

.rent-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rent-popup__title {
    font-size: 20px;
    font-weight: 700;
}

.rent-popup__subtitle {
    font-size: 12px;
    opacity: .7;
    margin-top: 2px;
}

.rent-popup__pill {
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.03);
    font-size: 12px;
}

.rent-popup__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rent-card {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 12px;
    background: white;
}

.rent-card__label {
    font-size: 12px;
    opacity: .7;
    margin-bottom: 6px;
}

.rent-card__value {
    font-size: 18px;
    font-weight: 700;
}

.rent-popup__rentbox {
    display: flex;
    gap: 12px;
    align-items: stretch;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    padding: 12px;
    background: rgba(0,0,0,.02);
}

.rent-popup__rentbox-left {
    flex: 1;
}

.rent-popup__hint {
    font-size: 12px;
    opacity: .7;
    margin-bottom: 8px;
}

.rent-popup__spin {
    width: 100%;
}

.rent-popup__rentbox-right {
    width: 180px;
    border-left: 1px dashed rgba(0,0,0,.15);
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.rent-popup__big {
    font-size: 28px;
    font-weight: 800;
}

.rent-popup__small {
    font-size: 12px;
    opacity: .7;
}

.rent-popup__footer-note {
    font-size: 12px;
    opacity: .65;
}
/* ===== Card ===== */
.ref-card {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    width: 100%;
    box-sizing: border-box;
}

/* ===== Header ===== */
.ref-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.00));
    border: 1px solid rgba(0,0,0,.06);
    margin-bottom: 14px;
}

.ref-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ref-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    font-size: 18px;
}

.ref-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(0,0,0,.90);
}

.ref-subtitle {
    font-size: 12px;
    color: rgba(0,0,0,.55);
    margin-top: 2px;
}

/* ===== Chip ===== */
.ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
}

.ref-chip-label {
    font-size: 12px;
    color: rgba(0,0,0,.60);
}

.ref-chip-value {
    font-size: 13px;
    font-weight: 800;
    color: rgba(0,0,0,.90);
}

/* ===== Applicant tiles ===== */
.ref-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .ref-grid2 {
        grid-template-columns: 1fr;
    }

    .ref-tile-span {
        grid-column: auto;
    }
}

.ref-tile {
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.015);
    border-radius: 14px;
    padding: 12px 12px;
}

.ref-tile-span {
    grid-column: span 2;
}

.ref-k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
    color: rgba(0,0,0,.55);
    margin-bottom: 6px;
}

.ref-v {
    font-size: 14px;
    font-weight: 700;
    color: rgba(0,0,0,.90);
    line-height: 1.25;
}

/* ===== Links ===== */
.ref-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 800;
}

    .ref-link:hover {
        text-decoration: underline;
    }

.ref-link-ic {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    font-size: 12px;
}

/* ===== Sections ===== */
.ref-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,.06);
}

.ref-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ref-section-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .25px;
    color: rgba(0,0,0,.88);
}

.ref-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.08);
    color: rgba(0,0,0,.78);
}

/* ===== Empty states ===== */
.ref-empty {
    padding: 18px 8px;
    text-align: center;
}

.ref-empty-title {
    font-weight: 900;
    margin-bottom: 4px;
    color: rgba(0,0,0,.85);
}

.ref-empty-text,
.ref-empty-inline {
    color: rgba(0,0,0,.60);
    font-size: 13px;
}

.ref-empty-inline {
    padding: 8px 2px;
}

/* ===== DxGrid polish ===== */
.ref-dxgrid {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

    /* Header row */
    .ref-dxgrid .dxbs-grid-header-row,
    .ref-dxgrid .dxbs-grid-header {
        background: rgba(0,0,0,.03);
    }

    /* Header cell */
    .ref-dxgrid .dxbs-grid-header-cell {
        font-weight: 900;
        font-size: 12px;
        color: rgba(0,0,0,.75);
    }

    /* Zebra rows */
    .ref-dxgrid .dxbs-grid-table > tbody > tr:nth-child(even) {
        background: rgba(0,0,0,.015);
    }

    /* Row hover */
    .ref-dxgrid .dxbs-grid-table > tbody > tr:hover {
        background: rgba(0,0,0,.035);
    }
/* ============================================================
   GLOBAL XAF BLAZOR UI CUSTOMIZATIONS
   ------------------------------------------------------------
   Purpose:
   This stylesheet standardizes the appearance and behavior of
   DevExpress XAF Blazor UI components across the application.

   It works together with the following controllers:

   - GlobalCardLayoutController
   - ListViewGridLayoutController
   - FreezeNestedGridColumnsController

   The CSS classes applied by those controllers are styled here
   to provide a consistent modern UI.

   Major responsibilities of this stylesheet:
   - Standardize field layout behavior
   - Improve checkbox alignment
   - Improve grid readability
   - Fix DevExpress layout quirks
   - Prevent nested grid overflow
   - Disable lookup navigation
   ============================================================ */


/* ============================================================
   FIELD LAYOUTS: LABELS ABOVE INPUT
   ------------------------------------------------------------
   Fields tagged with `.custom-field-item` (via controller)
   are displayed in a vertical layout:

   Label
   Input

   This replaces the default DevExpress horizontal layout.
   ============================================================ */

.custom-field-item:has(.dxbl-fl-ctrl):not(:has(.dxbl-checkbox)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

    .custom-field-item:has(.dxbl-fl-ctrl):not(:has(.dxbl-checkbox)) > .dxbl-fl-cpt {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin-bottom: 6px !important;
        padding-bottom: 0 !important;
    }

    .custom-field-item:has(.dxbl-fl-ctrl):not(:has(.dxbl-checkbox)) > .dxbl-fl-ctrl {
        width: 100% !important;
        max-width: 100% !important;
    }


/* ============================================================
   CHECKBOX FIELD LAYOUT
   ------------------------------------------------------------
   Boolean fields tagged with `.custom-checkbox-item`
   display as:

   Label                    Checkbox

   instead of stacking vertically.
   ============================================================ */

.custom-checkbox-item {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 42px;
    border-bottom: 1px solid rgba(0,0,0,.04);
}

    .custom-checkbox-item > .dxbl-fl-cpt {
        width: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .custom-checkbox-item > .dxbl-fl-ctrl {
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .custom-checkbox-item .dxbl-checkbox-check-element {
        transform: scale(1.1);
        margin-right: 4px;
    }


/* ============================================================
   REQUIRED FIELD LABEL EMPHASIS
   ------------------------------------------------------------
   Fields marked as required receive a stronger label weight.
   ============================================================ */

.custom-required-item > .dxbl-fl-cpt {
    font-weight: 700 !important;
}


/* ============================================================
   ESCAPE HATCH: IGNORE GLOBAL FIELD LAYOUT
   ------------------------------------------------------------
   Layout items tagged with `ignore` in the Model Editor
   bypass the custom field layout rules.
   ============================================================ */

.dxbl-fl .dxbl-fl-item.ignore {
    display: block !important;
    flex-flow: unset !important;
    align-items: initial !important;
}


/* ============================================================
   BADGE / CHIP TEXT WRAPPING
   ------------------------------------------------------------
   Allows long badge text (e.g. utility types) to wrap
   instead of truncating.
   ============================================================ */

.dxbl-grid-table td .badge.chip {
    white-space: normal !important;
    height: auto !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    padding: 4px 8px !important;
    text-align: center;
}

.dxbl-grid-table td .badge.chip.chip-expecting {
    display: inline-flex !important;
    padding: 2px 9px !important;
}

/* Not optional: the generic rule above forces display:inline-block !important on every chip in a
   grid cell, which collapses the icon/text alignment. .chip-expecting needs this override for the
   same reason. */
.dxbl-grid-table td .badge.chip.chip-review {
    display: inline-flex !important;
    padding: 2px 9px !important;
}


/* ============================================================
   GRID CELL ALIGNMENT
   ------------------------------------------------------------
   Standardizes alignment of grid values and headers.
   ============================================================ */

.dxbl-grid .dxbl-grid-table td:not(.dxbl-grid-selection-cell) {
    text-align: center !important;
}

.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-content {
    justify-content: center !important;
    text-align: center !important;
}

/* Allow long grid header captions to wrap onto multiple lines instead of
   forcing the column (and grid) wider. Pairs with ListViewGridLayoutController,
   which no longer expands columns to fit the caption on a single line. */
.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-caption {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}


/* ============================================================
   GRID LOOKUP / COMBOBOX CELL ALIGNMENT
   ------------------------------------------------------------
   Ensures lookup editors inside grid cells align properly.
   ============================================================ */

.dxbl-grid .dxbl-grid-table td .xaf-combobox-item {
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
}

    .dxbl-grid .dxbl-grid-table td .xaf-combobox-item .xaf-wrap-ellipsis {
        text-align: center !important;
        display: block;
    }


/* ============================================================
   GROUP ROW ALIGNMENT
   ------------------------------------------------------------
   Group rows should remain left-aligned to preserve hierarchy.
   ============================================================ */

.dxbl-grid .dxbl-grid-table tr.dxbl-grid-group-row td {
    text-align: left !important;
}


/* ============================================================
   NESTED GRID HEIGHT MANAGEMENT
   ------------------------------------------------------------
   Nested grids inside DetailViews can grow excessively tall.

   This rule:
   - Allows small datasets to shrink naturally
   - Caps large datasets to 65% of viewport height
   ============================================================ */

.nested-content dxbl-grid {
    height: auto !important;
    max-height: 65vh !important;
    display: flex !important;
    flex-direction: column !important;
}

    .nested-content dxbl-grid .dxbl-scroll-viewer {
        height: auto !important;
        max-height: 100% !important;
        flex-grow: 1 !important;
        min-height: 0 !important;
    }


/* ============================================================
   DEVEXPRESS GRID FILLER COLUMN FIX
   ------------------------------------------------------------
   DevExpress sometimes inserts a "filler column"
   (dxbl-grid-empty-cell) when the grid container is wider
   than the columns.

   This rule prevents the column from becoming visible
   when zooming or resizing the browser.
   ============================================================ */

.dxbl-grid-table th.dxbl-grid-empty-cell,
.dxbl-grid-table td.dxbl-grid-empty-cell {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.dxbl-grid-empty-cell {
    background: transparent !important;
}


/* ============================================================
   STACKED DETAIL CELLS
   ------------------------------------------------------------
   Multi-line grid cells used by StackedDetailsPropertyEditor
   (Recertification > Tenants grid: Tenant Details, Address,
   Household Details). Lines stack vertically and are
   left-aligned, overriding the grid's default centered cells.
   ============================================================ */

.dxbl-grid .dxbl-grid-table td .stacked-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left !important;
    white-space: normal;
    line-height: 1.35;
}

.stacked-cell .stacked-line {
    white-space: normal;
    word-break: break-word;
}

.stacked-cell .stacked-primary {
    font-weight: 600;
    color: var(--app-fg);
}

.stacked-cell .stacked-secondary {
    color: var(--app-muted);
    font-size: 0.85em;
}

.stacked-cell .stacked-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

/* Color-free override for in-cell accessibility badges (e.g. Mobility,
   Vision/Hearing). Scoped to .stacked-cell so the Recert Details column's
   colored badges are unaffected. */
.stacked-cell .stacked-badges .badge {
    background: transparent !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-muted) !important;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.stacked-cell .stacked-badges .badge:hover {
    background: var(--app-surface-hover) !important;
    color: var(--app-fg) !important;
}

/* Exception to the colour-free rule above: the "Expecting" tag keeps the tenant portal's
   pink pill. Mobility / Vision-Hearing stay colour-free by design. */
.stacked-cell .stacked-badges .badge.chip-expecting,
.stacked-cell .stacked-badges .badge.chip-expecting:hover {
    background: #FFE9F0 !important;
    border-color: #FFC9DC !important;
    color: #EC4899 !important;
    border-radius: 999px;
    font-weight: 600;
}

/* ------------------------------------------------------------
   DETAIL ROWS (monochrome)
   Clean, color-free icon + text items used for the secondary
   detail lines inside a stacked cell — Age, phone, email,
   HH Size, HH Income, street, city/zip, account #.
   The leading icon is the differentiator (no color coding);
   each item gets an interactive hover affordance.
   ------------------------------------------------------------ */
.stacked-cell .detail-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 2px;
}

.stacked-cell .detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.5;
    background: transparent;
    color: var(--app-muted);
    border: 1px solid transparent;
    white-space: normal;
    word-break: break-word;
    cursor: default;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.stacked-cell .detail-chip:hover {
    background: var(--app-surface-hover);
    border-color: var(--app-border);
    color: var(--app-fg);
}

.stacked-cell .detail-chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: var(--app-muted);
    transition: color 0.12s ease;
}

.stacked-cell .detail-chip:hover svg {
    color: var(--app-fg);
}

.stacked-cell .detail-chip .detail-chip-text {
    white-space: normal;
    word-break: break-word;
}

/* Per-type rules kept as neutral no-ops so the data-driven class
   names (chip-age, chip-phone, …) stay color-free. */
.stacked-cell .detail-chip.chip-age,
.stacked-cell .detail-chip.chip-phone,
.stacked-cell .detail-chip.chip-mail,
.stacked-cell .detail-chip.chip-size,
.stacked-cell .detail-chip.chip-income,
.stacked-cell .detail-chip.chip-preg,
.stacked-cell .detail-chip.chip-acct,
.stacked-cell .detail-chip.chip-home,
.stacked-cell .detail-chip.chip-pin,
.stacked-cell .detail-chip.chip-default {
    background: transparent;
    border-color: transparent;
    color: var(--app-muted);
}

.stacked-cell .detail-chip.chip-age:hover,
.stacked-cell .detail-chip.chip-phone:hover,
.stacked-cell .detail-chip.chip-mail:hover,
.stacked-cell .detail-chip.chip-size:hover,
.stacked-cell .detail-chip.chip-income:hover,
.stacked-cell .detail-chip.chip-preg:hover,
.stacked-cell .detail-chip.chip-acct:hover,
.stacked-cell .detail-chip.chip-home:hover,
.stacked-cell .detail-chip.chip-pin:hover,
.stacked-cell .detail-chip.chip-default:hover {
    background: var(--app-surface-hover);
    border-color: var(--app-border);
    color: var(--app-fg);
}


/* ============================================================
   DISABLE LOOKUP NAVIGATION
   ------------------------------------------------------------
   XAF reference properties render hyperlinks that navigate
   to the referenced object's DetailView.

   In this application navigation via lookup links is disabled
   to prevent accidental context switching.
   ============================================================ */

a.grid-cell-object-link {
    pointer-events: none !important;
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
}

.xaf-combobox-item.xaf-action {
    pointer-events: none !important;
    cursor: default !important;
}

.combo-box-object-link {
    text-decoration: none !important;
    color: inherit !important;
}


/* ============================================================
   AI MODE TOGGLE
   ------------------------------------------------------------
   The "AI Mode" SimpleAction (see ToggleAiModeController) is
   decorated by site.js → decorateAiModeToggle(), which inspects
   the caption ("AI Mode: On" / "AI Mode: Off") and applies
   .ax-ai-toggle plus the matching --on / --off modifier.

   These rules turn the standard DevExpress button into a
   rounded pill with a switch track + knob rendered via
   ::before / ::after — no DOM rewriting, so Blazor's renderer
   stays happy.
   ============================================================ */

.ax-ai-toggle.ax-ai-toggle {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface-soft) !important;
    color: var(--app-fg) !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    min-height: 28px;
    overflow: visible !important;
}

.ax-ai-toggle.ax-ai-toggle:hover {
    border-color: var(--app-warning-border) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.ax-ai-toggle.ax-ai-toggle:focus-visible {
    outline: 2px solid var(--app-warning-border);
    outline-offset: 2px;
}

/* ON state — the pill itself is the toggle: a warm orange wash + bold label
   communicates state without a redundant inline switch. */
.ax-ai-toggle.ax-ai-toggle--on {
    background: var(--app-warning-soft) !important;
    border-color: var(--app-warning-border) !important;
    color: var(--app-warning) !important;
    box-shadow: 0 1px 4px rgba(247, 103, 7, 0.18);
}

.ax-ai-toggle.ax-ai-toggle--on:hover {
    border-color: var(--app-warning) !important;
    box-shadow: 0 2px 8px rgba(247, 103, 7, 0.28);
}

/* Icon sizing for the microphone glyph */
.ax-ai-toggle.ax-ai-toggle .dxbl-image,
.ax-ai-toggle.ax-ai-toggle .dxbl-btn-image,
.ax-ai-toggle.ax-ai-toggle img {
    width: 14px !important;
    height: 14px !important;
}

/* Tint the microphone icon to match the active state */
.ax-ai-toggle.ax-ai-toggle--on .dxbl-image {
    color: var(--app-warning) !important;
    fill: var(--app-warning) !important;
}

.xaf-nav-link,
.xaf-nav-link * {
    text-decoration: none !important;
}

/* ============================================================
   AI MODE — COLLAPSED NAVIGATION
   ------------------------------------------------------------
   site.js stamps .ax-ai-mode-on onto <body> from the AI Mode
   toggle's caption. AI Mode is a focused, conversational
   surface, so the navigation drawer is removed entirely rather
   than just narrowed — the assistant drives navigation instead.

   The drawer panel is collapsed to zero and taken out of the
   layout, and the hamburger is hidden so the panel cannot be
   reopened into a zero-width shell. Turning AI Mode off drops
   the body class and every rule here stops applying, so the
   navigation returns exactly as it was.
   ============================================================ */

/* XAF lays the shell out as .sidebar (270px) + .main. Both the base rule and the
   .collapse-toggle override use display, so the override here has to win on both —
   hence the doubled class for specificity plus !important. Width is zeroed as well so
   nothing can reserve the gutter. */
body.ax-ai-mode-on.ax-ai-mode-on .sidebar,
body.ax-ai-mode-on.ax-ai-mode-on .collapse-toggle .sidebar,
body.ax-ai-mode-on.ax-ai-mode-on .sidebar-sm-shadow {
    display: none !important;
    min-width: 0 !important;
    width: 0 !important;
}

body.ax-ai-mode-on .xaf-navmenu {
    display: none !important;
}

/* Reclaim the gutter the sidebar occupied. */
body.ax-ai-mode-on .app .main,
body.ax-ai-mode-on .app .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Without this the hamburger reopens an empty shell. */
body.ax-ai-mode-on .xaf-ribbon-hamburger-tab,
body.ax-ai-mode-on .xaf-ribbon-hamburger-icon,
body.ax-ai-mode-on .header-left-side .dxbl-btn:first-child {
    display: none !important;
}

/* ------------------------------------------------------------
   Assistants launcher (AiModeAssistantLauncherController)
   The way back to the assistants once the drawer is gone, so it
   is styled as a peer of the AI Mode pill rather than a stray
   toolbar button — same height, same radius, deliberately the
   filled one of the pair since it is the actionable control.
   ------------------------------------------------------------ */
.ax-ai-assistants.ax-ai-assistants {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--app-warning-border) !important;
    background: var(--app-warning-soft) !important;
    color: var(--app-warning) !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.1;
    min-height: 28px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ax-ai-assistants.ax-ai-assistants:hover {
    border-color: var(--app-warning) !important;
    box-shadow: 0 2px 8px rgba(247, 103, 7, 0.24);
}

.ax-ai-assistants.ax-ai-assistants:focus-visible {
    outline: 2px solid var(--app-warning-border);
    outline-offset: 2px;
}

.ax-ai-assistants.ax-ai-assistants .dxbl-image {
    color: var(--app-warning) !important;
    fill: var(--app-warning) !important;
}


img.xaf-toolbar-item-icon[src*="IImageService/Bell?"],
img.dxbl-image[src*="IImageService/Bell?"] {
    /* Replaced content is clipped to the content box, so this hides the served bitmap while
       leaving the element itself (and therefore the mask) exactly where it was. */
    object-fit: none;
    object-position: -1000px -1000px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M27 23l-2.4-2.4V14c0-4.1-2.9-7.5-6.8-8.4V4.5C17.8 3.1 16.7 2 15.3 2S12.8 3.1 12.8 4.5v1.1C8.9 6.5 6 9.9 6 14v6.6L3.6 23c-.3.3-.4.7-.2 1.1s.5.6.9.6h7.2c.3 1.9 1.9 3.3 3.8 3.3s3.5-1.4 3.8-3.3h7.2c.4 0 .8-.2.9-.6s0-.8-.2-1.1zM15.3 26c-.8 0-1.5-.5-1.8-1.3h3.5c-.2.8-.9 1.3-1.7 1.3z'/%3e%3c/svg%3e") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M27 23l-2.4-2.4V14c0-4.1-2.9-7.5-6.8-8.4V4.5C17.8 3.1 16.7 2 15.3 2S12.8 3.1 12.8 4.5v1.1C8.9 6.5 6 9.9 6 14v6.6L3.6 23c-.3.3-.4.7-.2 1.1s.5.6.9.6h7.2c.3 1.9 1.9 3.3 3.8 3.3s3.5-1.4 3.8-3.3h7.2c.4 0 .8-.2.9-.6s0-.8-.2-1.1zM15.3 26c-.8 0-1.5-.5-1.8-1.3h3.5c-.2.8-.9 1.3-1.7 1.3z'/%3e%3c/svg%3e") center / contain no-repeat;
}
/* Deposit clarification pill in the documents grids (ClarificationStatusCell). */
.axc-clar-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.axc-clar-badge--submitted {
    color: #065f46;
    background: #d1fae5;
    border-color: #a7f3d0;
}

.axc-clar-badge--pending {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.axc-clar-badge--muted {
    color: #6b7280;
    background: #f9fafb;
    border-color: #e5e7eb;
}

.axc-clar-empty {
    color: #9ca3af;
}

/* Report-wizard filename token drag-and-drop (2026-09-16) — see site.js. Highlights whatever
   text input a {Token} chip is currently being dragged over. */
.axcces-token-drop-target {
    outline: 2px dashed var(--bs-primary, #0d6efd) !important;
    outline-offset: 1px;
}