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

.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 rgba(247, 103, 7, 0.35);
    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;
}


/* ============================================================
   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: #1F2933;
}

.stacked-cell .stacked-secondary {
    color: #677787;
    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 #D0D5DD !important;
    color: #475467 !important;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.stacked-cell .stacked-badges .badge:hover {
    background: #F2F4F7 !important;
    color: #1F2933 !important;
}

/* ------------------------------------------------------------
   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: #475467;
    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: #F2F4F7;
    border-color: #E4E7EC;
    color: #1F2933;
}

.stacked-cell .detail-chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: #98A2B3;
    transition: color 0.12s ease;
}

.stacked-cell .detail-chip:hover svg {
    color: #667085;
}

.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-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: #475467;
}

.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-acct:hover,
.stacked-cell .detail-chip.chip-home:hover,
.stacked-cell .detail-chip.chip-pin:hover,
.stacked-cell .detail-chip.chip-default:hover {
    background: #F2F4F7;
    border-color: #E4E7EC;
    color: #1F2933;
}


/* ============================================================
   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 #d8dee9 !important;
    background: #f5f7fb !important;
    color: #475569 !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: #c2cad8 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.ax-ai-toggle.ax-ai-toggle:focus-visible {
    outline: 2px solid rgba(247, 103, 7, 0.35);
    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: linear-gradient(135deg, #fff4ec 0%, #ffd9bc 100%) !important;
    border-color: #f7b27a !important;
    color: #b64a00 !important;
    box-shadow: 0 1px 4px rgba(247, 103, 7, 0.18);
}

.ax-ai-toggle.ax-ai-toggle--on:hover {
    border-color: #f7965a !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: #f76707 !important;
    fill: #f76707 !important;
}

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