/* ============================================================================
   Powersoft Cloud Accounting — Common UI
   common.css
   ----------------------------------------------------------------------------
   A single, shared, mobile-first style sheet for all web forms.
   "Warm professional": friendly warm neutrals, a calm teal accent, generously
   rounded controls, soft contrast and gentle depth. Sits on top of the
   DevExpress v19.2 controls — link this AFTER the DevExpress stylesheets so its
   refinements win.

   USAGE
     - Wrap a page's content once in  <div class="ps-page"> … </div>
     - Group fields in            .ps-card
     - Compose with               .ps-grid / .ps-field / .ps-row / .ps-toolbar
     - Button variants (CssClass) .ps-btn-secondary  .ps-btn-cancel  .ps-icon-btn
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
    /* Accent — calm blue */
    --ps-accent: #2563eb;
    --ps-accent-hover: #1d4ed8;
    --ps-accent-active: #1e40af;
    --ps-accent-soft: #eff6ff;
    --ps-accent-ring: rgba(37, 99, 235, .22);
    /* Semantic */
    --ps-danger: #c2410c;
    --ps-danger-soft: #fdf1ea;
    --ps-success: #15803d;
    --ps-warning: #b45309;
    /* Warm neutrals */
    /*--ps-canvas:        #f6f4f1;*/
    --ps-canvas: #ffffff;
    --ps-surface: #ffffff;
    --ps-surface-alt: #faf8f4;
    --ps-border: #ece6dd;
    --ps-border-strong: #ddd4c7;
    /* Text (warm) */
    --ps-text: #322e29;
    --ps-text-soft: #5b534a;
    --ps-text-muted: #8c8278;
    /* Type */
    --ps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ps-fs-xs: 12px;
    --ps-fs-sm: 13px;
    --ps-fs-base: 14px;
    --ps-fs-lg: 16px;
    --ps-fs-xl: 22px;
    /* Shape & rhythm */
    --ps-radius: 18px; /* cards */
    --ps-radius-sm: 11px; /* inputs */
    --ps-radius-pill: 999px; /* buttons */
    --ps-gap: 16px;
    --ps-gap-sm: 9px;
    --ps-shadow: 0 1px 2px rgba(76, 62, 43, .05), 0 8px 24px rgba(76, 62, 43, .07);
    --ps-shadow-sm: 0 1px 2px rgba(76, 62, 43, .10);
    --ps-shadow-btn: 0 2px 6px rgba(37, 99, 235, .28);
    --ps-control-h: 42px;
}

/* ----------------------------------------------------------------------------
   2 · BASE  (scoped to .ps-page so it never bleeds into the master shell)
   ---------------------------------------------------------------------------- */
.ps-page,
.ps-page * { box-sizing: border-box; }

.ps-page {
    font-family: var(--ps-font);
    font-size: var(--ps-fs-base);
    line-height: 1.5;
    color: var(--ps-text);
    background: var(--ps-canvas);
    padding: var(--ps-gap);
    -webkit-text-size-adjust: 100%;
}
.ps-page img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------------------
   3 · LAYOUT PRIMITIVES
   ---------------------------------------------------------------------------- */

/* Page header */
.ps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ps-gap-sm);
    margin-bottom: var(--ps-gap);
}
.ps-title {
    margin: 0;
    font-size: var(--ps-fs-xl);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ps-text);
}
.ps-subtitle {
    margin: 4px 0 0;
    font-size: var(--ps-fs-sm);
    color: var(--ps-text-muted);
}

/* Card / surface */
.ps-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 22px 24px;
    margin-bottom: var(--ps-gap);
}

/* Section heading with accent tick */
.ps-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: var(--ps-fs-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ps-text-muted);
}
.ps-section-title::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 15px;
    border-radius: var(--ps-radius-pill);
    background: var(--ps-accent);
}

/* Responsive auto grid — minmax(0,1fr) lets columns shrink below content width
   (plain 1fr keeps a min-content floor and causes horizontal overflow) */
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-gap); }
@media (min-width: 600px)  { .ps-grid.ps-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px)  { .ps-grid.ps-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ps-grid.ps-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Field: label stacked above control */
.ps-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ps-field > label,
.ps-label { font-size: var(--ps-fs-sm); font-weight: 600; color: var(--ps-text-soft); }

/* Inline wrapping row */
.ps-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-gap-sm); }

/* Toolbar */
.ps-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-gap-sm); }
.ps-toolbar--end { justify-content: flex-end; }
.ps-spacer { flex: 1 1 auto; }

/* Checkbox grid */
.ps-check-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px var(--ps-gap); }
@media (min-width: 480px) { .ps-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .ps-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ps-check-grid > * { justify-self: start; min-width: 0; }

/* Aging buckets */
.ps-aging { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--ps-control-h); }
.ps-aging-box { width: auto; }
.ps-unit { font-size: var(--ps-fs-sm); font-weight: 600; color: var(--ps-text-muted); white-space: nowrap; margin-left: 2px; }

/* Utilities */
.ps-mt { margin-top: var(--ps-gap); }
.ps-mb { margin-bottom: var(--ps-gap); }
.ps-hide { display: none !important; }
.ps-full { width: 100%; }
.ps-text-right { text-align: right; }

/* ----------------------------------------------------------------------------
   4 · FEEDBACK / STATE
   ---------------------------------------------------------------------------- */
.ps-error,
.ps-warn-font {
    color: var(--ps-danger);
    font-size: var(--ps-fs-sm);
}
.ps-error {
    background: var(--ps-danger-soft);
    border: 1px solid var(--ps-danger);
    border-radius: var(--ps-radius-sm);
    padding: 9px 13px;
    margin-top: 4px;
}

.ps-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 52px 16px;
    font-size: var(--ps-fs-lg);
    color: var(--ps-text-muted);
}
.ps-loading::before {
    content: "";
    width: 38px; height: 38px;
    border: 3px solid var(--ps-border);
    border-top-color: var(--ps-accent);
    border-radius: 50%;
    animation: ps-spin .8s linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------
   5 · DEVEXPRESS CONTROL REFINEMENTS (v19.2)
   Only text/date/memo editors are bordered & sized. Checkbox, radio and the
   dropdown button glyphs are left to the theme so they keep rendering.
   ---------------------------------------------------------------------------- */

/* Buttons — rounded teal pill with gentle depth */
.ps-page .dxbButton,
.ps-page .dxbButtonSys {
    min-height: var(--ps-control-h);
    padding: 0 20px;
    border: 1px solid var(--ps-accent) !important;
    border-radius: var(--ps-radius-pill) !important;
    background: linear-gradient(180deg, #3b82f6 0%, var(--ps-accent) 100%) !important;
    color: #fff !important;
    font-family: var(--ps-font) !important;
    font-size: var(--ps-fs-base) !important;
    font-weight: 600 !important;
    box-shadow: var(--ps-shadow-btn);
    text-shadow: none;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.ps-page .dxbButton:hover  { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,.34); }
.ps-page .dxbButton:active { transform: translateY(0); filter: brightness(.96); box-shadow: var(--ps-shadow-sm); }
.ps-page .dxbButton .dxb   { color: #fff !important; }
.ps-btn-block .dxbButton, .ps-btn-block.dxbButton { width: 100% !important; }

/* Secondary — soft warm surface */
.ps-page .ps-btn-secondary.dxbButton,
.ps-page .ps-btn-secondary .dxbButton {
    background: var(--ps-surface) !important;
    color: var(--ps-text-soft) !important;
    border-color: var(--ps-border-strong) !important;
    box-shadow: var(--ps-shadow-sm);
}
.ps-page .ps-btn-secondary.dxbButton:hover,
.ps-page .ps-btn-secondary .dxbButton:hover {
    background: var(--ps-accent-soft) !important;
    border-color: var(--ps-accent) !important;
    color: var(--ps-accent-active) !important;
}
.ps-page .ps-btn-secondary .dxb { color: inherit !important; }

/* Cancel / danger */
.ps-page .ps-btn-cancel.dxbButton,
.ps-page .ps-btn-cancel .dxbButton {
    background: var(--ps-surface) !important;
    color: var(--ps-danger) !important;
    border-color: var(--ps-border-strong) !important;
    box-shadow: var(--ps-shadow-sm);
}
.ps-page .ps-btn-cancel.dxbButton:hover,
.ps-page .ps-btn-cancel .dxbButton:hover {
    background: var(--ps-danger-soft) !important;
    border-color: var(--ps-danger) !important;
}
.ps-page .ps-btn-cancel .dxb { color: var(--ps-danger) !important; }

/* Icon-only button — round, soft, with a clearly visible icon */
.ps-page .ps-icon-btn .dxbButton {
    width: var(--ps-control-h) !important;
    height: var(--ps-control-h) !important;
    min-width: var(--ps-control-h) !important;
    min-height: var(--ps-control-h) !important;
    padding: 0 !important;
    border-radius: var(--ps-radius-pill) !important;
    background: var(--ps-surface) !important;
    border: 1px solid var(--ps-border-strong) !important;
    box-shadow: var(--ps-shadow-sm);
}
.ps-page .ps-icon-btn .dxbButton:hover { background: var(--ps-accent-soft) !important; border-color: var(--ps-accent) !important; transform: none; filter: none; }
/* Force the embedded icon image to a visible size (overrides the global img rule) */
.ps-page .ps-icon-btn .dxbButton img,
.ps-page .ps-icon-btn img {
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    display: inline-block;
    vertical-align: middle;
}

/* Text / number / date / memo editors — soft warm fill, white on focus */
.ps-page .dxeTextBox,
.ps-page .dxeButtonEdit,
.ps-page .dxeMemo {
    border: 1px solid var(--ps-border-strong) !important;
    border-radius: var(--ps-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* White fill ONLY when enabled; disabled / read-only editors keep DevExpress's
   own colours (so server-set ReadOnlyStyle / disabled styling shows through). */
.ps-page .dxeTextBox:not(.dxeDisabled):not(:has(input[readonly])),
.ps-page .dxeButtonEdit:not(.dxeDisabled):not(:has(input[readonly])),
.ps-page .dxeMemo:not(.dxeDisabled):not(:has(textarea[readonly])) {
    background-color: #ffffff !important;
}
.ps-page .dxeTextBox.dxeFocused,
.ps-page .dxeButtonEdit.dxeFocused,
.ps-page .dxeMemo.dxeFocused {
    background: var(--ps-surface) !important;
    border-color: var(--ps-accent) !important;
    box-shadow: 0 0 0 3px var(--ps-accent-ring) !important;
}
.ps-page .dxeEditArea,
.ps-page input.dxeEditArea {
    font-family: var(--ps-font) !important;
    font-size: var(--ps-fs-base) !important;
    color: var(--ps-text) !important;
    background: transparent !important;
}
/* Comboboxes (.dxeComboBox): white when ENABLED; disabled/read-only keep
   DevExpress's own colours. */
.ps-page .dxeComboBox:not(.dxeDisabled):not(:has(input[readonly])) { background-color: #ffffff !important; }
/* Don't let the global image rule shrink the calendar dropdown arrow */
.ps-page .dxeButtonEditButton img,
.ps-page .dxeCalendarButton img,
.ps-page table[class*="dxeCalendar"] img {
    max-width: none !important;
    height: auto !important;
}

/* Date editors: square corners (per request), full width on mobile, capped on
   desktop. Inner area left alone so the calendar dropdown arrow keeps showing. */
.ps-field .dxeButtonEdit,
.ps-field .dxeButtonEdit .dxeEditArea { border-radius: 0 !important; }
.ps-field .dxeButtonEdit { width: 100% !important; }
@media (min-width: 600px) { .ps-field .dxeButtonEdit { width: 210px !important; } }

/* Aging inputs: small, fixed, right-aligned */
.ps-aging .dxeTextBox { width: 50px !important; }
.ps-aging .dxeTextBox .dxeEditArea,
.ps-aging .dxeTextBox input.dxeEditArea { width: 100% !important; text-align: right !important; }

/* Memo fills its card */
.ps-page .dxeMemo { width: 100% !important; }
.ps-page .dxeMemo .dxeMemoEditArea,
.ps-page .dxeMemo textarea { width: 100% !important; }

/* Calendar popup readability.
   Substring class matching ([class*=...]) is used because the DevExpress theme
   suffixes these classes (e.g. dxeCalendarToday_<theme>), which an exact-match
   selector would miss — that is why "today" was rendering white-on-white.
   Inner <a>/<span> are targeted too, since the day number can live in them. */
/* Regular days — normal text colour */
.ps-page [class*="dxeCalendarDay"]:not([class*="dxeCalendarWeekend"]):not([class*="dxeCalendarHoliday"]) {
    color: var(--ps-text) !important;
}
/* Saturdays, Sundays and holidays — keep red */
.ps-page [class*="dxeCalendarWeekend"],
.ps-page [class*="dxeCalendarHoliday"] {
    color: #cc0000 !important;
}
/* Week numbers — gray */
.ps-page [class*="dxeCalendarWeekNumber"] {
    color: #999 !important;
}
/* Days outside the current month — lighter gray */
.ps-page [class*="dxeCalendarOtherMonthDay"] {
    color: #bbb !important;
}

/* Selected day (user's chosen date) — solid blue fill, white text */
.ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarSelected"] {
    background: var(--ps-accent) !important;
    background-image: none !important;
    font-weight: 700;
}

    .ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarSelected"],
    .ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarSelected"] * {
        color: #ffffff !important;
    }

        .ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarSelected"] * {
            background-color: transparent !important;
            background-image: none !important;
        }

/* Today (when NOT the selected date) — blue ring, blue text, no fill */
.ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarToday"]:not([class*="dxeCalendarSelected"]) {
    background: transparent !important;
    background-image: none !important;
    outline: 2px solid var(--ps-accent) !important;
    outline-offset: -2px !important;
    font-weight: 700;
}

    .ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarToday"]:not([class*="dxeCalendarSelected"]),
    .ps-page table[class*="dxeCalendar"] td[class*="dxeCalendarToday"]:not([class*="dxeCalendarSelected"]) * {
        color: var(--ps-accent) !important;
        background-color: transparent !important;
        background-image: none !important;
    }

/* Section-title ASPxLabel inherits heading style */
.ps-section-title .dxeLabel,
.ps-section-title span { font: inherit !important; color: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; }

/* Checkboxes / radios — typography only (keep theme glyphs) */
.ps-page .dxICheckBox,
.ps-page .dxichSys { font-family: var(--ps-font) !important; font-size: var(--ps-fs-sm) !important; color: var(--ps-text) !important; }
.ps-page .dxICheckBox td { white-space: normal; text-align: left; }
.ps-page .dxeRadioButtonList td { color: var(--ps-text) !important; font-size: var(--ps-fs-sm) !important; }

/* Round panel — transparent container */
.ps-page .dxrpControl,
.ps-page .dxrpControl_Office2010Blue { border: none !important; background: transparent !important; box-shadow: none !important; width: 100% !important; }
.ps-page .dxrpControl .dxrp,
.ps-page .dxrpControl td { background: transparent !important; }

/* Labels */
.ps-page .dxeLabel,
.ps-page .defaultLabel {
    font-family: var(--ps-font) !important;
    font-size: var(--ps-fs-sm) !important;
    font-weight: 600 !important;
    color: var(--ps-text-soft) !important;
}

/* Callback panel never imposes a fixed width */
.ps-page .dxcpLoadingPanel,
.ps-page .dxcpContentPanel { width: 100% !important; }

/* ----------------------------------------------------------------------------
   5b · RECTANGULAR VARIANT  (add class "ps-rect" on the page wrapper)
   Square corners + buttons sized to fit their icon + caption. Used by dialogs
   like PaymentDialog where pill buttons clipped the content.
   ---------------------------------------------------------------------------- */
.ps-rect .ps-card,
.ps-rect .dxbButton,
.ps-rect .dxbButtonSys,
/* Rectangular dialogs sit on a clean white page (no grey canvas behind the card) */
.ps-page.ps-rect { background: #ffffff; }
.ps-rect .dxeTextBox,
.ps-rect .dxeButtonEdit,
.ps-rect .dxeMemo,
.ps-rect .dxeButtonEditButton { border-radius: 0 !important; }
/* Buttons: never clip the icon + label */
.ps-rect .dxbButton,
.ps-rect .dxbButtonSys { white-space: nowrap !important; padding: 0 14px !important; }
.ps-rect .dxbButton .dxb { overflow: visible !important; }

/* ----------------------------------------------------------------------------
   5c · RESPONSIVE FORM CELLS  (flex fields that wrap) — used by PaymentDialog
   ---------------------------------------------------------------------------- */
.ps-row.ps-row--top { align-items: flex-start; }
.ps-cell        { flex: 1 1 200px; min-width: 0; }
.ps-cell--sm    { flex: 1 1 150px; min-width: 0; max-width: 220px; }
.ps-cell--lg    { flex: 2 1 260px; min-width: 0; }
.ps-cell--full  { flex: 1 1 100%;  min-width: 0; }

/* Inside the payment form, editors fill their cell (so everything fits the
   dialog and reflows). Only the OUTER control is stretched — never the inner
   edit area of a button-edit, so calendar/combo dropdown arrows stay visible. */
.ps-page .ps-pay .ps-field .dxeTextBox,
.ps-page .ps-pay .ps-field .dxeButtonEdit,
.ps-page .ps-pay .ps-field .dxeMemo,
.ps-page .ps-pay .ps-field .dxeComboBox,
.ps-page .ps-pay .ps-field table.dxeTextBox { width: 100% !important; }
.ps-page .ps-pay .ps-field .dxeTextBox .dxeEditArea { width: 100% !important; }

/* Dark-blue labels */
.ps-page .ps-pay .ps-label,
.ps-page .ps-pay .pLabelFormLeft { color: #1e3a8a !important; }

/* Tighter vertical rhythm so the form fits the dialog without a scrollbar */
.ps-pay.ps-card { padding: 12px 18px; }
.ps-pay hr { margin: 8px 0; }
.ps-pay .ps-row { row-gap: 8px; }
.ps-pay .ps-row.ps-mt { margin-top: 8px; }
.ps-pay .ps-field { gap: 3px; }

/* Centered groups (Method of Payment / cheque rows): center the cells and stop
   them from stretching full-width */
.ps-pay-center { justify-content: center; }
.ps-pay-center > * { flex-grow: 0 !important; }

/* ----------------------------------------------------------------------------
   6 · LEGACY CLASS BRIDGES (so un-migrated pages stay consistent)
   ---------------------------------------------------------------------------- */
.pWidthAll     { width: 100%; }
.pPageTitle2   { font-size: var(--ps-fs-xl); font-weight: 700; color: var(--ps-text); }
.pDialogMenu   { margin-bottom: var(--ps-gap); }
.pWarnFont     { color: var(--ps-warning); font-size: var(--ps-fs-sm); }
.loadingReport { font-size: var(--ps-fs-lg); color: var(--ps-text-muted); }

/* Form labels used across login / payment pages */
.ps-page .pLabel,
.ps-page .pLabelFormLeft,
.pLabel, .pLabelFormLeft {
    font-size: var(--ps-fs-sm);
    font-weight: 600;
    color: var(--ps-text-soft);
}
.ps-page .pErrorFont, .pErrorFont,
.ps-page .pLabelFormLeftDarkRed, .pLabelFormLeftDarkRed {
    color: var(--ps-danger);
    font-size: var(--ps-fs-sm);
    font-weight: 600;
}

/* Cancel button bridge (legacy CssClass="pButtonCancel") -> outline danger */
.ps-page .pButtonCancel.dxbButton,
.ps-page .pButtonCancel .dxbButton {
    background: var(--ps-surface) !important;
    color: var(--ps-danger) !important;
    border-color: var(--ps-border-strong) !important;
}
.ps-page .pButtonCancel.dxbButton:hover,
.ps-page .pButtonCancel .dxbButton:hover {
    background: var(--ps-danger-soft) !important;
    border-color: var(--ps-danger) !important;
    filter: none;
}
.ps-page .pButtonCancel .dxb { color: var(--ps-danger) !important; }

/* Subtle section divider (replaces the plain <hr>) */
.ps-page hr {
    border: 0;
    border-top: 1px solid var(--ps-border);
    margin: 16px 0;
}

/* Read-only / disabled editors */
.ps-page .pCtrlDisabled .dxeEditArea,
.ps-page .pCtrlDisabled input.dxeEditArea { background: var(--ps-surface-alt) !important; color: var(--ps-text-muted) !important; }

/* Captcha box (legacy panel3 header/body) */
.ps-page .pPanel3HeaderCYTA {
    background: var(--ps-accent-soft);
    border: 1px solid var(--ps-border);
    border-bottom: 0;
    border-radius: var(--ps-radius-sm) var(--ps-radius-sm) 0 0;
    padding: 8px 10px;
}
.ps-page .pPanel3BodyCYTA {
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: 0 0 var(--ps-radius-sm) var(--ps-radius-sm);
    padding: 10px;
}

/* ---------------------------------------------------------------------------
   Auth pages (Login / LogOut) — centered card
   --------------------------------------------------------------------------- */
.ps-auth {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
}
.ps-auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;            /* always centered, even outside a flex parent */
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 28px 28px 22px;
}
.ps-auth-card.ps-auth-wide { max-width: 680px; }
.ps-auth-title {
    margin: 0 0 18px;
    font-size: var(--ps-fs-xl);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ps-text);
    text-align: center;
}
.ps-auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ps-border);
    font-size: var(--ps-fs-sm);
}
.ps-auth-links a { color: var(--ps-accent); text-decoration: none; }
.ps-auth-links a:hover { text-decoration: underline; }

/* Login emphasis: larger, DARK blue title / labels / links / checkbox text */
.ps-login .ps-auth-title { font-size: 26px; color: #1e3a8a; }
.ps-page .ps-login .ps-label { font-size: var(--ps-fs-lg); color: #1e3a8a; }
.ps-page .ps-login .dxICheckBox,
.ps-page .ps-login .dxICheckBox td,
.ps-page .ps-login .dxichSys { font-size: var(--ps-fs-lg) !important; color: #1e3a8a !important; }
/* Footer links (Forgot password / Register / Request a demo login) -> dark blue */
.ps-login .ps-auth-links a,
.ps-login .ps-auth-links a:visited { color: #1e3a8a; font-weight: 600; }
/* Remember Me — a touch larger than body, smaller than before */
.ps-page .ps-login .ps-remember,
.ps-page .ps-login .ps-remember td,
.ps-page .ps-login .ps-remember span { font-size: 15px !important; color: #1e3a8a !important; }
/* Password is an ASPxButtonEdit (.dxeButtonEdit) — override the date-edit width
   cap so it matches the full-width username textbox */
.ps-page .ps-login .dxeButtonEdit { width: 100% !important; }

/* Small screens: tighten the auth card */
@media (max-width: 599px) {
    .ps-auth { min-height: 60vh; padding: 16px 10px; }
    .ps-auth-card { padding: 20px 18px; }
    .ps-login .ps-auth-title { font-size: 22px; }
}

/* ----------------------------------------------------------------------------
   7 · RESPONSIVE SHELL NORMALISATION
   The shared dialog master (MasterDialog.Master) also loads older stylesheets
   (Layout.css / responsivePage.css / style.css) that can pin a fixed width or
   min-width on the shell, which stops pages from ever shrinking to mobile.
   common.css is linked LAST, so these resets win and let the shell flow down.
   ---------------------------------------------------------------------------- */
html, body { min-width: 0 !important; }
/* overflow-x: hidden caps documentElement.scrollWidth to the iframe width, so
   the dialog's CalculateSize() can no longer auto-grow the popup to the content's
   natural width. The popup then stays at the window size and the fluid layout
   below reflows to fit (wide content like the report viewer scrolls inside its
   own .ps-report card instead of stretching the page). */
html, body { overflow-x: hidden !important; }
body .form { min-width: 0 !important; max-width: 100%; overflow-x: hidden; }
.content-wrapper {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
}
/* The page and its cards may not exceed the viewport width. (The report viewer
   is left free to be wide — it scrolls inside its own .ps-report card.) */
.ps-page,
.ps-page .ps-card { max-width: 100% !important; }
/* DevExpress wrappers used on this page must not force a min width */
.ps-page .dxrpControl,
.ps-page .dxcpContentPanel,
.ps-page .dxccControl { min-width: 0 !important; max-width: 100% !important; }
/* The report output can be wide — let it scroll inside its card instead of
   stretching the whole page on small screens */
.ps-page .ps-report { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ----------------------------------------------------------------------------
   8 · SMALL SCREENS
   ---------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .ps-page { padding: 12px; }
    .ps-card { padding: 18px; }
    .ps-toolbar:not(.ps-toolbar--keep) { flex-direction: column; align-items: stretch; }
    .ps-toolbar .dxbButton:not(.ps-keep-inline) { width: 100% !important; }
    .ps-icon-btn .dxbButton { width: var(--ps-control-h) !important; }
    .ps-title { font-size: var(--ps-fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-loading::before { animation: none; }
    .ps-page * { transition: none !important; transform: none !important; }
}

/* ----------------------------------------------------------------------------
   9 · MASTEROUT LAYOUT — header language selector + responsive shell
   These elements live OUTSIDE .ps-page (master chrome), so rules are un-scoped.
   ---------------------------------------------------------------------------- */
/* Language combo: taller, text vertically centred (no clipping).
   The container often pins a small fixed height / overflow:hidden in style.css,
   which clips the combo — so force it open here. */
#language { height: auto !important; overflow: visible !important; line-height: normal !important; }
#language td { vertical-align: middle !important; }
#language .dxeButtonEdit,
#language .dxeButtonEditSys,
#language table.dxeButtonEdit { height: auto !important; }
#language .dxeEditArea,
#language input.dxeEditArea {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 6px !important;
    font-size: var(--ps-fs-base) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
#language .dxeButtonEditButton { height: 36px !important; vertical-align: middle !important; }

/* Make the MasterOut shell fluid so login/logout pages fit any viewport
   (style.css pins #wrapper/#container to a fixed width, which overflowed small
   screens and pushed the login card off to the side). */
#wrapper {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
/* Only on auth pages (which contain .ps-auth) widen the content column so the
   login/logout card centers across the whole page. Other MasterOut pages keep
   style.css's original column layout untouched. */
#container:has(.ps-auth) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    box-sizing: border-box;
}
html, body { overflow-x: hidden; }

/* ---- MasterOut footer: more visible text, dark-blue hover ---- */
#footnav a,
#footnav a:visited,
#Div1 #footnav a {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
}
#footnav a:hover,
#Div1 #footnav a:hover { color: #1e3a8a !important; text-decoration: underline !important; }
#copyright,
#copyright a {
    color: #475569 !important;
    font-size: 12px !important;
}
#copyright a:hover { color: #1e3a8a !important; }

/* Keep the header (and the language selector) visible/usable on small screens */
@media (max-width: 820px) {
    #header { height: auto !important; overflow: visible !important; }
    #header-right { position: static !important; float: none !important; width: auto !important; }
    #toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 8px; }
    #language { position: static !important; float: none !important; display: block !important; margin: 6px 0; }
    #language .dxeButtonEdit { width: 200px !important; max-width: 100%; }
}