/*
 * chmis-theme.css - system-wide CHMIS theme
 * ===========================================================================
 * Brings every screen in line with the login page and the CHMIS hero artwork:
 * navy headers, teal accents, white surfaces, soft blue canvas.
 *
 * WHY THIS IS AN OVERRIDE LAYER, NOT A REBUILT SASS THEME
 * The compiled Sencha theme ("ihmis", a Themer package extending theme-triton)
 * paints a charcoal-grey chrome: rgb(90,90,90) panel headers and near-black
 * gradient buttons. Restyling it at source means editing the theme package's
 * SCSS and running a full theme build. This layer instead re-skins the
 * rendered markup, so it applies in the dev tree and in the compiled build
 * alike with no theme recompilation.
 *
 * LOAD ORDER / !important
 * bootstrap.js injects the theme stylesheet at runtime, i.e. AFTER the <link>
 * tags in index.html. So this file always loses same-specificity ties and has
 * to either raise specificity or use !important.
 *
 * WHAT IS DELIBERATELY LEFT ALONE
 *  - Panel and container BACKGROUNDS are never forced. Several dashboards are
 *    intentionally dark and set their surfaces via inline `style:` configs;
 *    forcing a white body would leave their light text unreadable.
 *  - Value/data colours are never forced. `fieldStyle: 'color:red'` (125+
 *    occurrences) and ~810 grid renderers carry meaning - overdue balances,
 *    abnormal results, negative totals. Only decorative colours are retargeted
 *    (see "Decorative inline colours" at the end).
 */

:root {
    --chmis-navy: #12325F;
    --chmis-navy-2: #1B4B8F;
    --chmis-blue: #1E63B8;
    --chmis-blue-soft: #E8F1FC;
    --chmis-teal: #12A5A8;
    --chmis-ink: #1F2937;
    /* Deliberately dark: an earlier pass used #64748B here and the UI read as
     * washed out. Secondary text must still be legible on white, not a hint. */
    --chmis-muted: #475569;
    /* Component borders are visible on purpose - #E2E8F0 disappeared against
     * white surfaces and made buttons and inputs look like flat text. */
    --chmis-line: #C3D5EA;
    --chmis-line-soft: #E2E8F0;
    --chmis-surface: #FFFFFF;
    --chmis-canvas: #EEF3FA;
    --chmis-alt-row: #F5F8FC;
}

/* ======================================================== app canvas ===== */

.x-body {
    background-color: var(--chmis-canvas) !important;
    color: var(--chmis-ink);
}

/* ==================================================== panel headers ====== */
/*
 * Navy gradient with a teal hairline underneath - the same ramp as the login
 * SIGN IN button and the brand edge bar.
 */
.x-panel-header.x-panel-header-default,
.x-panel-header.x-panel-header-default-horizontal,
.x-panel-header.x-panel-header-default-vertical {
    background-color: var(--chmis-navy) !important;
    background-image: linear-gradient(135deg, var(--chmis-navy) 0%, var(--chmis-navy-2) 100%) !important;
    border-color: var(--chmis-navy) !important;
}

.x-panel-header.x-panel-header-default-top {
    border-bottom: 2px solid var(--chmis-teal) !important;
}

.x-panel-header-default .x-title-text,
.x-panel-header-default .x-title-text-default {
    color: #FFFFFF !important;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Collapse/expand/close tools sit on navy now, so they must be light. */
.x-panel-header-default .x-tool-img,
.x-panel-header-default .x-tool-tool-el {
    color: rgba(255, 255, 255, 0.85) !important;
}

.x-panel-header-default .x-tool-over .x-tool-img,
.x-panel-header-default .x-tool-over .x-tool-tool-el {
    color: #FFFFFF !important;
}

/* Header-docked text and fields (some panels dock a toolbar in the header). */
.x-panel-header-default .x-form-item-label,
.x-panel-header-default .x-form-display-field {
    color: rgba(255, 255, 255, 0.92);
}

/*
 * Framed/plain panels keep a soft border rather than the grey theme border.
 *
 * Two classes and NO !important, deliberately. With !important this rule
 * repainted every dashboard KPI card's coloured accent bar - the cards set
 * `border-top: 3px solid <accent>` / `border-left: 4px solid <accent>` inline,
 * and an !important border-colour here overrode all of them, which is what made
 * the home dashboard look washed out. Inline styles outrank a non-important
 * rule at any specificity, so the accents now survive while the theme border
 * still applies to panels that do not set one.
 */
.x-panel.x-panel-default {
    border-color: var(--chmis-line);
}

/* ==================================================== window chrome ===== */

.x-window-header.x-window-header-default {
    background-color: var(--chmis-navy) !important;
    background-image: linear-gradient(135deg, var(--chmis-navy) 0%, var(--chmis-navy-2) 100%) !important;
    border-color: var(--chmis-navy) !important;
}

.x-window-header-default .x-title-text {
    color: #FFFFFF !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.x-window-header-default .x-tool-img,
.x-window-header-default .x-tool-tool-el {
    color: rgba(255, 255, 255, 0.85) !important;
}

.x-window-default {
    border-radius: 10px;
    box-shadow: 0 22px 60px rgba(18, 50, 95, 0.28);
}

.x-window-default .x-window-header-default-top {
    border-radius: 10px 10px 0 0;
}

/* Message boxes read as part of the same family. */
.x-message-box .x-window-header-default {
    background-image: linear-gradient(135deg, var(--chmis-navy) 0%, var(--chmis-blue) 100%) !important;
}

/* ======================================================== fieldsets ===== */

.x-fieldset-default {
    border: 1px solid var(--chmis-line) !important;
    border-radius: 10px;
    padding: 10px 12px 12px;
}

.x-fieldset-header-default,
.x-fieldset .x-fieldset-header-text,
.x-fieldset .x-fieldset-header-text-default {
    color: var(--chmis-navy) !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.x-fieldset-header-default .x-tool-img {
    color: var(--chmis-blue) !important;
}

/* ============================================================= tabs ===== */

.x-tab-bar-default {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: 1px solid var(--chmis-line) !important;
}

.x-tab-bar-strip-default {
    background-color: transparent !important;
    border-color: var(--chmis-line) !important;
}

.x-tab.x-tab-default {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: 8px 8px 0 0;
}

/* Inactive tabs are readable, not a hint - #64748B was too light to scan. */
.x-tab-default .x-tab-inner,
.x-tab-default .x-tab-inner-default {
    color: #334155 !important;
    font-size: 12.5px;
    font-weight: 700;
}

.x-tab.x-tab-over.x-tab-default {
    background-color: var(--chmis-blue-soft) !important;
}

.x-tab.x-tab-active.x-tab-default {
    background-color: var(--chmis-surface) !important;
    border-color: var(--chmis-line) !important;
    border-bottom: 3px solid var(--chmis-teal) !important;
}

.x-tab-active.x-tab-default .x-tab-inner,
.x-tab-active.x-tab-default .x-tab-inner-default {
    color: var(--chmis-navy) !important;
    font-weight: 800;
}

.x-tab-default .x-tab-icon-el {
    color: var(--chmis-blue) !important;
}

/* ============================================================ grids ===== */
/*
 * Column header COLOURS (navy surface, white captions) live in portal.css,
 * which owns .x-column-header with !important. Selectors here are MORE specific
 * (.x-column-header.x-column-header-default beats .x-column-header), so setting
 * a background here would silently override it - that is how the header band
 * ended up washed out. Only typography is set here.
 */
.x-column-header-default .x-column-header-text,
.x-column-header-default .x-column-header-text-container {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Rows: white / very light stripe, blue hover, teal-tinted selection. */
.x-grid-item {
    color: var(--chmis-ink);
}

.x-grid-item-alt .x-grid-td {
    background-color: var(--chmis-alt-row);
}

.x-grid-item-over .x-grid-td,
.x-grid-item-over.x-grid-item-alt .x-grid-td {
    background-color: var(--chmis-blue-soft) !important;
}

.x-grid-item-selected .x-grid-td,
.x-grid-item-selected.x-grid-item-alt .x-grid-td,
.x-grid-row-selected .x-grid-td {
    background-color: #DFF1F1 !important;
    color: var(--chmis-navy) !important;
}

.x-grid-cell-selected {
    background-color: #CFEAEA !important;
}

.x-grid-cell,
.x-grid-td {
    border-color: var(--chmis-line-soft) !important;
}

.x-grid-with-row-lines .x-grid-item {
    border-color: var(--chmis-line-soft) !important;
}

/* Editable-grid focus outline in brand blue instead of the theme's grey. */
.x-grid-item-focused .x-grid-cell-inner:before,
.x-grid-cell-focus .x-grid-cell-inner:before {
    border-color: var(--chmis-blue) !important;
}

/* Grouping headers inside grids. */
.x-grid-group-hd {
    background-color: var(--chmis-blue-soft) !important;
    border-bottom: 1px solid var(--chmis-line) !important;
}

.x-grid-group-title {
    color: var(--chmis-navy) !important;
    font-weight: 800;
}

/* Empty-state text. */
.x-grid-empty {
    color: var(--chmis-muted) !important;
    font-style: normal;
    padding: 14px;
}

/* ========================================================= toolbars ===== */

.x-toolbar-default {
    background-color: var(--chmis-surface) !important;
    background-image: none !important;
    border-color: var(--chmis-line) !important;
}

.x-toolbar-default .x-toolbar-text {
    color: var(--chmis-navy) !important;
    font-weight: 700;
}

.x-toolbar-default .x-toolbar-separator {
    border-color: var(--chmis-line) !important;
}

/* Paging toolbar sits under grids - keep it on the soft blue. */
.x-toolbar-default.x-docked-bottom {
    background-color: var(--chmis-blue-soft) !important;
}

.x-tbar-page-number {
    border-radius: 6px;
}

/* ========================================================== buttons ===== */
/*
 * Buttons are FILLED, not outlined. An earlier pass made them white with a pale
 * border, which read as plain text on white toolbars - they only became
 * discoverable on hover. The brand ramp keeps the solid affordance the old
 * charcoal theme had, in CHMIS colours.
 */
/*
 * Kept at exactly TWO classes on purpose. Every :not() guard adds specificity
 * (a :not(.foo) counts as a class), and an earlier attempt to exclude the nav
 * sidebar this way pushed the selector to eight classes - which then silently
 * outranked .x-btn.chmis-btn-primary AND the login CTA, repainting both plain
 * navy. The cascade is arranged by order instead:
 *   - variants (.chmis-btn-*) are declared LATER in this file, so they win
 *   - .hmis-login-vp .x-btn.hmis-login-btn is three classes, so it wins
 *   - the nav sidebar's rules are injected into <head> at runtime by
 *     Main.js#buildMenus, i.e. after every stylesheet, so they win on order
 *     (which is why they are written as .x-btn.nav-module-btn there).
 */
.x-btn.x-btn-default-small,
.x-btn.x-btn-default-medium,
.x-btn.x-btn-default-large,
.x-btn.x-btn-default-toolbar-small,
.x-btn.x-btn-default-toolbar-medium,
.x-btn.x-btn-default-toolbar-large {
    background-color: var(--chmis-navy-2) !important;
    background-image: linear-gradient(135deg, var(--chmis-navy) 0%, var(--chmis-navy-2) 100%) !important;
    border: 1px solid var(--chmis-navy) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(18, 50, 95, 0.22);
}

.x-btn-default-small .x-btn-inner,
.x-btn-default-medium .x-btn-inner,
.x-btn-default-large .x-btn-inner,
.x-btn-default-toolbar-small .x-btn-inner,
.x-btn-default-toolbar-medium .x-btn-inner,
.x-btn-default-toolbar-large .x-btn-inner {
    color: #FFFFFF !important;
    font-weight: 700;
}

/*
 * This one DOES need :not() guards, and they are load-bearing rather than
 * cosmetic. Main.js#buildMenus colours each module's icon individually via
 * iconEl.setStyle('color', ...) - an inline style. An !important rule here
 * would beat that inline value and flatten every module icon to one colour, and
 * no ordering trick avoids it: only not matching the element does.
 * The variant classes are excluded too, since they set their own icon colour at
 * a lower specificity than this selector.
 */
.x-btn-default-small:not(.nav-module-btn):not(.nav-item-btn):not(.chmis-btn-primary):not(.chmis-btn-danger):not(.chmis-btn-quiet) .x-btn-icon-el,
.x-btn-default-medium:not(.nav-module-btn):not(.nav-item-btn):not(.chmis-btn-primary):not(.chmis-btn-danger):not(.chmis-btn-quiet) .x-btn-icon-el,
.x-btn-default-large:not(.nav-module-btn):not(.nav-item-btn):not(.chmis-btn-primary):not(.chmis-btn-danger):not(.chmis-btn-quiet) .x-btn-icon-el,
.x-btn-default-toolbar-small:not(.nav-module-btn):not(.chmis-btn-primary):not(.chmis-btn-danger):not(.chmis-btn-quiet):not(.sha-elig-btn) .x-btn-icon-el,
.x-btn-default-toolbar-medium:not(.nav-module-btn):not(.chmis-btn-primary):not(.chmis-btn-danger):not(.chmis-btn-quiet):not(.sha-elig-btn) .x-btn-icon-el,
.x-btn-default-toolbar-large:not(.nav-module-btn):not(.chmis-btn-primary):not(.chmis-btn-danger):not(.chmis-btn-quiet):not(.sha-elig-btn) .x-btn-icon-el {
    /* .sha-elig-btn is excluded for the same reason as the nav buttons: it
     * carries its own solid teal background (see ShaEligibility#injectStyles)
     * and this pale teal glyph would sit on it at almost no contrast. */
    color: #7FD9DB !important;
}

/* Arrow glyph on split/menu buttons. */
.x-btn-default-small .x-btn-arrow-el:after,
.x-btn-default-medium .x-btn-arrow-el:after,
.x-btn-default-toolbar-small .x-btn-arrow-el:after,
.x-btn-default-toolbar-medium .x-btn-arrow-el:after {
    color: #FFFFFF !important;
}

/* Two classes, same reasoning as the base rule above. The variants declare
 * their own hover further down and win on order. */
.x-btn.x-btn-over {
    background-image: linear-gradient(135deg, var(--chmis-navy-2) 0%, var(--chmis-blue) 100%) !important;
    border-color: var(--chmis-blue) !important;
    box-shadow: 0 4px 10px rgba(18, 50, 95, 0.28);
}

.x-btn.x-btn-pressed,
.x-btn.x-btn-menu-active {
    background-image: linear-gradient(135deg, #0D2547 0%, var(--chmis-navy) 100%) !important;
    border-color: #0D2547 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.x-btn.x-btn-focus {
    border-color: var(--chmis-teal) !important;
    box-shadow: 0 0 0 3px rgba(18, 165, 168, 0.35);
}

.x-btn.x-btn-disabled {
    opacity: 0.5;
}

/*
 * Quiet variant, for the rare toolbar that needs a de-emphasised control.
 * Opt in with cls: 'chmis-btn-quiet'.
 */
.x-btn.chmis-btn-quiet {
    background-color: var(--chmis-surface) !important;
    background-image: none !important;
    border: 1px solid var(--chmis-line) !important;
    box-shadow: none;
}

.x-btn.chmis-btn-quiet .x-btn-inner {
    color: var(--chmis-navy) !important;
}

.x-btn.chmis-btn-quiet .x-btn-icon-el {
    color: var(--chmis-blue) !important;
}

/*
 * Each variant re-asserts its own background on hover/press. Without this the
 * generic .x-btn.x-btn-over rule above still supplies background-image (the
 * variant rules never declare it for that state) and the button flips to the
 * navy default gradient mid-hover.
 */
.x-btn.chmis-btn-quiet.x-btn-over {
    background-color: var(--chmis-blue-soft) !important;
    background-image: none !important;
    border-color: var(--chmis-blue) !important;
    box-shadow: none !important;
}

.x-btn.chmis-btn-quiet.x-btn-pressed {
    background-color: #D8E6F8 !important;
    background-image: none !important;
}

/*
 * Primary action. Opt in with cls: 'chmis-btn-primary' on any button that
 * commits something (Save, Post, Submit) to get the login gradient.
 */
/* Brighter blue-to-teal so it still reads as "the" action next to the navy
 * default buttons. */
.x-btn.chmis-btn-primary {
    background-color: var(--chmis-blue) !important;
    background-image: linear-gradient(135deg, var(--chmis-blue) 0%, var(--chmis-teal) 100%) !important;
    border: 1px solid var(--chmis-blue) !important;
    box-shadow: 0 4px 12px rgba(18, 165, 168, 0.32);
}

.x-btn.chmis-btn-primary .x-btn-inner,
.x-btn.chmis-btn-primary .x-btn-icon-el {
    color: #FFFFFF !important;
}

.x-btn.chmis-btn-primary.x-btn-over,
.x-btn.chmis-btn-primary.x-btn-pressed {
    background-image: linear-gradient(135deg, var(--chmis-blue) 0%, var(--chmis-teal) 100%) !important;
    border-color: var(--chmis-teal) !important;
    filter: brightness(1.08);
}

.x-btn.chmis-btn-primary.x-btn-pressed {
    filter: brightness(0.92);
}

/* Danger action, for deletes/voids. */
.x-btn.chmis-btn-danger {
    background-color: #C81E1E !important;
    background-image: linear-gradient(135deg, #C81E1E 0%, #E03131 100%) !important;
    border: 1px solid #A81616 !important;
}

.x-btn.chmis-btn-danger .x-btn-inner,
.x-btn.chmis-btn-danger .x-btn-icon-el {
    color: #FFFFFF !important;
}

.x-btn.chmis-btn-danger.x-btn-over,
.x-btn.chmis-btn-danger.x-btn-pressed {
    background-image: linear-gradient(135deg, #A81616 0%, #C81E1E 100%) !important;
    border-color: #8F1212 !important;
}

/* ============================================================ menus ===== */

/*
 * Menu COLOURS live in portal.css (navy surface, white text) - that file owns
 * them with !important and loads after this one, so it would win any tie here.
 * This block only sets shape and the surface the theme paints on
 * .x-menu-body-default, which portal.css does not touch.
 */
.x-menu-default {
    border: 1px solid #0D2547 !important;
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(13, 37, 71, 0.34);
}

.x-menu .x-menu-body-default,
.x-menu .x-menu-bodyWrap {
    background-color: #12325F !important;
    background-image: none !important;
}

.x-menu-item-link {
    border-radius: 6px;
}

/* Keep the icon glyph legible on navy; the text colour comes from portal.css. */
.x-menu .x-menu-item-icon-default {
    color: #7FD9DB !important;
}

.x-menu-item-separator {
    background-color: var(--chmis-line) !important;
    border: 0 !important;
}

/* ====================================================== form fields ===== */
/*
 * Same input treatment as the login form, tightened for dense data-entry
 * screens. The visible box lives on .x-form-trigger-wrap; the input inside
 * must stay transparent or it double-draws.
 */
.x-form-trigger-wrap-default {
    background-color: var(--chmis-surface) !important;
    border: 1px solid var(--chmis-line) !important;
    border-radius: 8px !important;
}

.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
    border-color: var(--chmis-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 99, 184, 0.13);
}

.x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
    border-color: #DC2626 !important;
}

.x-form-text-default {
    background-color: transparent !important;
    border: 0 !important;
}

.x-form-trigger-default {
    background-color: transparent !important;
    border-left: 0 !important;
    color: var(--chmis-blue) !important;
}

.x-form-textarea-default {
    border-radius: 8px !important;
}

/*
 * Labels. Set on .x-form-item-label ONLY - the inner text span inherits, so
 * per-field `labelStyle` colours keep working (light-on-dark labels in the
 * dark dashboards must not be flattened to navy). Decorative greens/maroons
 * are retargeted separately at the end of this file.
 */
/*
 * Two classes so this beats the theme's own `.x-form-item-label-default` rule
 * (which loads later). Deliberately NOT !important: an inline `labelStyle`
 * colour outranks any non-important rule whatever its specificity, so per-field
 * colours - including the light labels on the dark dashboards - still apply.
 */
.x-form-item .x-form-item-label-default,
.x-field .x-form-item-label-default {
    color: var(--chmis-navy);
    font-weight: 700;
}

.x-form-item-label-default .x-form-item-label-text {
    font-size: 12.5px;
}

/* Checkbox / radio boxLabels. Two classes, for the same reason as the labels
 * above: beat the theme without outranking per-field inline styles. */
.x-form-item .x-form-cb-label-default,
.x-field .x-form-cb-label-default {
    color: var(--chmis-ink);
    font-weight: 600;
}

.x-form-checkbox-default.x-form-cb-checked,
.x-form-radio-default.x-form-cb-checked {
    color: var(--chmis-blue) !important;
}

/* Validation text. */
.x-form-error-msg-default {
    color: #DC2626 !important;
    font-weight: 600;
}

/* ===================================================== misc chrome ====== */

/* Progress bars pick up the brand ramp. */
.x-progress-default .x-progress-bar {
    background-color: var(--chmis-blue) !important;
    background-image: linear-gradient(135deg, var(--chmis-blue) 0%, var(--chmis-teal) 100%) !important;
}

/* Date picker. */
.x-datepicker-header {
    background-color: var(--chmis-navy) !important;
    background-image: linear-gradient(135deg, var(--chmis-navy) 0%, var(--chmis-navy-2) 100%) !important;
}

.x-datepicker-selected .x-datepicker-date {
    background-color: var(--chmis-blue-soft) !important;
    border-color: var(--chmis-blue) !important;
    color: var(--chmis-navy) !important;
}

.x-datepicker-today .x-datepicker-date {
    border-color: var(--chmis-teal) !important;
}

/* Boundlist (combo dropdowns). */
.x-boundlist-default {
    border: 1px solid var(--chmis-line) !important;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(18, 50, 95, 0.16);
}

/*
 * Dropdown highlight is a SOLID blue bar with white text.
 *
 * The previous pale tints (#E8F1FC hover / #DFF1F1 selected) kept the item's
 * dark text, so the highlighted row barely separated from the rest of the list
 * and was hard to read while arrowing through it. The text colour has to be set
 * on the item too - the theme colours .x-boundlist-item independently, so
 * recolouring only the background left dark-on-blue.
 */
.x-boundlist-item {
    border-radius: 4px;
}

.x-boundlist-item-over,
.x-boundlist-item.x-boundlist-item-over {
    background-color: var(--chmis-blue) !important;
    border-color: var(--chmis-blue) !important;
    color: #FFFFFF !important;
}

.x-boundlist-selected,
.x-boundlist-item.x-boundlist-selected {
    background-color: var(--chmis-navy) !important;
    border-color: var(--chmis-navy) !important;
    color: #FFFFFF !important;
    font-weight: 700;
}

/* Selected AND hovered: keep the brighter blue so the cursor stays visible. */
.x-boundlist-item.x-boundlist-selected.x-boundlist-item-over {
    background-color: var(--chmis-blue) !important;
    border-color: var(--chmis-blue) !important;
    color: #FFFFFF !important;
}

/* Type-ahead match highlighting inside a highlighted row. */
.x-boundlist-item-over em,
.x-boundlist-selected em,
.x-boundlist-item-over b,
.x-boundlist-selected b {
    color: #FFFFFF !important;
}

/* Tooltips. */
.x-tip-default {
    background-color: var(--chmis-navy) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px;
}

.x-tip-default .x-tip-body,
.x-tip-default .x-tip-header-text {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Splitters between border-layout regions. */
.x-splitter-default {
    background-color: var(--chmis-canvas) !important;
}

.x-splitter-active {
    background-color: var(--chmis-teal) !important;
}

/* Load masks. */
.x-mask-msg-default {
    background-color: var(--chmis-surface) !important;
    border: 1px solid var(--chmis-line) !important;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(18, 50, 95, 0.18);
}

.x-mask-msg-default .x-mask-msg-text {
    color: var(--chmis-navy) !important;
    font-weight: 700;
}

/* Slim, quiet scrollbars everywhere. */
.x-body ::-webkit-scrollbar {
    height: 9px;
    width: 9px;
}

.x-body ::-webkit-scrollbar-track {
    background: transparent;
}

.x-body ::-webkit-scrollbar-thumb {
    background: #C3D3E6;
    border-radius: 5px;
}

.x-body ::-webkit-scrollbar-thumb:hover {
    background: #9FB8D6;
}

/* ============================================== portal / dashboards ===== */

.x-portlet .x-panel-header-default {
    border-radius: 10px 10px 0 0;
}

.x-portlet {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(18, 50, 95, 0.08);
    overflow: hidden;
}

/* ================================= stray global table header ============= */
/*
 * reports/reportsCss2.css - the FIRST stylesheet in index.html - carries a bare
 * `th { background-color:#4caf50; color:white; }`. An unscoped element selector
 * like that hits EVERY <th> in the application, which is why the Ward Occupancy
 * table on the home dashboard rendered with a bright green header band.
 *
 * The rule cannot simply be scoped in that file: 8 of the 9 report templates
 * containing <th> have no .page/.subpage wrapper and genuinely depend on it.
 * Report templates are standalone documents though - they never contain an
 * Ext .x-body - so neutralising it inside the running app is enough, and needs
 * no !important (one class + one element already outranks a bare element, and
 * this file loads after reportsCss2.css anyway).
 *
 * .report-table / .page / .subpage are exempted so a report previewed inside an
 * Ext panel still looks like a report.
 */
.x-body th {
    background-color: var(--chmis-blue-soft);
    border-color: var(--chmis-line);
    color: var(--chmis-navy);
}

.x-body .report-table th,
.x-body .page th,
.x-body .subpage th {
    background-color: #4caf50;
    color: #FFFFFF;
}

/* ===================================== home dashboard switcher ========== */
/*
 * Matches the .theme-btn control on the Outpatient / Laboratory / Pharmacy
 * dashboards. Those dashboards style their own buttons inside their per-view
 * <style> blocks; the home dashboard has no such block, so its buttons are
 * styled here.
 */
.home-theme-switcher .theme-btn {
    background: var(--chmis-surface);
    border: 1px solid var(--chmis-line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 1;
    padding: 0;
    transition: background .15s, border-color .15s;
    width: 36px;
}

.home-theme-switcher .theme-btn:hover {
    background: var(--chmis-blue-soft);
    border-color: var(--chmis-blue);
}

.home-theme-switcher .theme-btn.active {
    background: var(--chmis-blue-soft);
    border-color: var(--chmis-blue);
    box-shadow: 0 0 0 2px rgba(30, 99, 184, 0.18);
}

.chmis-home-dark .home-theme-switcher .theme-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: #2d3561;
    color: #f0f4ff;
}

.chmis-home-dark .home-theme-switcher .theme-btn.active {
    background: rgba(18, 165, 168, 0.18);
    border-color: var(--chmis-teal);
    box-shadow: none;
}

/* ---------------------- home dashboard, dark modes ---------------------- */
/*
 * The cards' contents are inline-styled HTML strings written for the light
 * palette (navy #12325F headings, #334155 labels, #475569 captions, #F1F5F9
 * inner tiles). applyTheme() cannot reach inside those strings, so the dark
 * modes retarget them by matching the inline colour value. Light mode leaves
 * them exactly as authored.
 */
.chmis-home-dark [style*="color: #12325F"],
.chmis-home-dark [style*="color:#12325F"] {
    color: #E6ECFF !important;
}

.chmis-home-dark [style*="color: #334155"],
.chmis-home-dark [style*="color:#334155"] {
    color: #A8B6D9 !important;
}

.chmis-home-dark [style*="color: #475569"],
.chmis-home-dark [style*="color:#475569"],
.chmis-home-dark [style*="color: #64748B"],
.chmis-home-dark [style*="color:#64748B"] {
    color: #8892b0 !important;
}

/* Inner tiles / progress tracks / chips authored on light greys. */
.chmis-home-dark [style*="background: #F1F5F9"],
.chmis-home-dark [style*="background:#F1F5F9"],
.chmis-home-dark [style*="background: #F8FAFC"],
.chmis-home-dark [style*="background:#F8FAFC"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: #2d3561 !important;
}

.chmis-home-dark [style*="border: 1px solid #E2E8F0"],
.chmis-home-dark [style*="border:1px solid #E2E8F0"] {
    border-color: #2d3561 !important;
}

/* Table headings inside the dark dashboard. */
.chmis-home-dark th {
    background-color: transparent !important;
    color: #8892b0 !important;
}

/*
 * Table cells carry NO explicit colour, so they inherit the compiled theme's
 * #404040 and drop to ~1.8:1 on a dark card (ward names in Ward Occupancy).
 */
.chmis-home-dark td {
    color: #A0AEC0 !important;
}

/*
 * The chip labels ("Live", "Today", "Last 6 months") and the brand flash use a
 * DEEPENED teal chosen for contrast against white - which is far too dark on a
 * dark card. Swap to the light teal used elsewhere on dark surfaces.
 */
.chmis-home-dark [style*="color: #0B6E70"],
.chmis-home-dark [style*="color:#0B6E70"],
.chmis-home-dark [style*="color: #0E8285"],
.chmis-home-dark [style*="color:#0E8285"],
.chmis-home-dark [style*="color: #12A5A8"],
.chmis-home-dark [style*="color:#12A5A8"] {
    color: #7FD9DB !important;
}

/*
 * Accent-coloured text (avatar initials, trend deltas) is tuned for white and
 * bottoms out around 2:1 on dark. Lift each hue to its dark-surface variant.
 */
.chmis-home-dark [style*="color: #1E63B8"],
.chmis-home-dark [style*="color:#1E63B8"],
.chmis-home-dark [style*="color: #154C8C"],
.chmis-home-dark [style*="color:#154C8C"] { color: #7FB0F0 !important; }

.chmis-home-dark [style*="color: #E11D48"],
.chmis-home-dark [style*="color:#E11D48"],
.chmis-home-dark [style*="color: #B01739"],
.chmis-home-dark [style*="color:#B01739"] { color: #FF8FA8 !important; }

.chmis-home-dark [style*="color: #7C3AED"],
.chmis-home-dark [style*="color:#7C3AED"],
.chmis-home-dark [style*="color: #5B21B6"],
.chmis-home-dark [style*="color:#5B21B6"] { color: #C4A6FF !important; }

.chmis-home-dark [style*="color: #16A34A"],
.chmis-home-dark [style*="color:#16A34A"],
.chmis-home-dark [style*="color: #107A38"],
.chmis-home-dark [style*="color:#107A38"] { color: #6EE7A0 !important; }

.chmis-home-dark [style*="color: #D97706"],
.chmis-home-dark [style*="color:#D97706"] { color: #FCD34D !important; }

/* ============================== home dashboard, light theme ============= */
/*
 * CarePortal.view.HomeDashboard builds its cards from inline-styled HTML
 * strings written for a dark background, and its applyTheme() only restyles
 * panel containers - it cannot reach inside those strings. It tags the root
 * with .chmis-dash-light / .chmis-dash-dark (see applyTheme) so the pale text
 * and dark inner tiles can be retargeted here when the light theme is active.
 *
 * Matching on the inline colour value keeps the dark themes untouched: the
 * same markup under .chmis-dash-dark is left exactly as it was.
 */
.chmis-dash-light [style*="color: #f0f4ff"],
.chmis-dash-light [style*="color:#f0f4ff"] {
    color: var(--chmis-navy) !important;
}

.chmis-dash-light [style*="color: #6b7a99"],
.chmis-dash-light [style*="color:#6b7a99"],
.chmis-dash-light [style*="color: #8892b0"],
.chmis-dash-light [style*="color:#8892b0"] {
    color: var(--chmis-muted) !important;
}

/* Inner tiles/chips that hardcode a dark surface. */
.chmis-dash-light [style*="background: #1a2235"],
.chmis-dash-light [style*="background:#1a2235"],
.chmis-dash-light [style*="background: #1a1f3a"],
.chmis-dash-light [style*="background:#1a1f3a"],
.chmis-dash-light [style*="background: #111827"],
.chmis-dash-light [style*="background:#111827"] {
    background: var(--chmis-alt-row) !important;
    border-color: var(--chmis-line) !important;
}

/* Hairline borders authored as translucent white read as nothing on white. */
.chmis-dash-light [style*="rgba(255,255,255,0.07)"],
.chmis-dash-light [style*="rgba(255, 255, 255, 0.07)"] {
    border-color: var(--chmis-line) !important;
}

/* The teal/cyan brand flash in the dark heading becomes the CHMIS teal. */
.chmis-dash-light [style*="color: #2dd4bf"],
.chmis-dash-light [style*="color:#2dd4bf"],
.chmis-dash-light [style*="color: #00d4ff"],
.chmis-dash-light [style*="color:#00d4ff"] {
    color: var(--chmis-teal) !important;
}

/* ======================================= decorative inline colours ====== */
/*
 * ~690 fields carry `labelStyle: 'color:green; font-weight:bold;'` and ~50
 * carry maroon. Those are decorative - a generic "this is a label" look, not a
 * status signal - and they clash badly with the navy chrome. Attribute
 * selectors retarget exactly those inline declarations and nothing else, so
 * light-on-dark labels (#f4f6fc, white) and semantic value colours survive
 * untouched.
 */
.x-form-item-label[style*="color:green"],
.x-form-item-label[style*="color: green"],
.x-form-item-label[style*="color:Green"],
.x-form-item-label[style*="color:maroon"],
.x-form-item-label[style*="color: maroon"],
.x-form-item-label[style*="color:#630921"],
.x-form-item-label[style*="color:#1b5f87"] {
    color: var(--chmis-navy) !important;
}

/* Panel headers that hardcode the old maroon/green brand colours. */
.x-panel-header[style*="maroon"],
.x-panel-header[style*="background-color:green"] {
    background-color: var(--chmis-navy) !important;
    background-image: linear-gradient(135deg, var(--chmis-navy) 0%, var(--chmis-navy-2) 100%) !important;
}