/* ==========================================================================
   ui-refresh.css — Global modern UI overlay
   Loaded AFTER style.css / app.css / bootstrap-custom.css so it wins ties.
   Scope:  affects every admin screen. Skips .login-page (own scoped styles).
   Rule of thumb: NO markup changes — visual overrides only.
   ========================================================================== */

:root {
    --u-bg:          #f4f6fb;
    --u-surface:     #ffffff;
    --u-border:      #eef0f5;
    --u-border-1:    #eef2f7;
    --u-border-2:    #e3e7f0;
    --u-text:        #0f1e3d;
    --u-text-2:      #3b465a;
    --u-muted:       #6b7588;
    --u-faint:       #9aa3b7;
    --u-brand:       #a71c20;
    --u-brand-2:     #d4282e;
    --u-brand-soft:  #fcebec;
    --u-brand-deep:  #821518;
    /* Gold — luxury real-estate accent. Used sparingly: page-title underline,
       active nav indicator, hover ring on primary CTAs, section-legend chips. */
    --u-gold:        #c9a14a;
    --u-gold-2:      #b8862e;
    --u-gold-soft:   #fbf2dc;
    --u-gold-deep:   #8a6420;
    --u-success:     #1c7c4a;
    --u-success-soft:#e6f5ec;
    --u-warning:     #b1761a;
    --u-warning-soft:#fbf2e1;
    --u-danger:      #d04848;
    --u-danger-soft: #fdecec;
    --u-info:        #2a4fa6;
    --u-info-soft:   #eaf0fb;
    --u-radius:      12px;
    --u-radius-sm:   8px;
    --u-radius-lg:   16px;
    --u-radius-pill: 999px;
    --u-shadow-1:    0 1px 2px rgba(15,30,61,0.04);
    --u-shadow-2:    0 1px 2px rgba(15,30,61,0.04), 0 8px 22px -12px rgba(15,30,61,0.18);
    --u-shadow-3:    0 1px 2px rgba(15,30,61,0.06), 0 18px 40px -16px rgba(15,30,61,0.28);
    --u-shadow-gold: 0 0 0 3px rgba(201,161,74,0.18);
    --u-shadow-brand:0 0 0 3px rgba(167,28,32,0.16);
    /* Spacing scale — 4px base × 1,2,3,4,6,8,12,16. Use for padding/margin/gap. */
    --u-space-1:     4px;
    --u-space-2:     8px;
    --u-space-3:     12px;
    --u-space-4:     16px;
    --u-space-5:     20px;
    --u-space-6:     24px;
    --u-space-8:     32px;
    --u-space-10:    40px;
    --u-space-12:    48px;
    /* Type scale — controlled hierarchy. xs caption, sm meta, base body, md card,
       lg section, xl card-title, 2xl page-title, 3xl hero. */
    --u-fs-xs:       11px;
    --u-fs-sm:       12px;
    --u-fs-base:     13px;
    --u-fs-md:       14px;
    --u-fs-lg:       15px;
    --u-fs-xl:       18px;
    --u-fs-2xl:      22px;
    --u-fs-3xl:      28px;
    --u-font:        'Noto Sans', 'Noto Sans Khmer', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --u-transition:  150ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Page base ---------- */
body:not(.login-page) {
    background: var(--u-bg);
    color: var(--u-text);
    font-family: var(--u-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body:not(.login-page) .content-page > .content {
    padding: 8px 28px 24px !important;
}

/* ---------- Typography ---------- */
body:not(.login-page) h1, body:not(.login-page) h2,
body:not(.login-page) h3, body:not(.login-page) h4,
body:not(.login-page) h5, body:not(.login-page) h6 {
    color: var(--u-text);
    font-weight: 700;
    letter-spacing: -0.1px;
}
body:not(.login-page) h1 { font-size: 24px; }
body:not(.login-page) h2 { font-size: 20px; }
body:not(.login-page) h3 { font-size: 18px; }
body:not(.login-page) h4 { font-size: 16px; }
body:not(.login-page) h5 { font-size: 14px; }
body:not(.login-page) .page-title { font-size: 18px; font-weight: 700; margin: 0; }
body:not(.login-page) .text-muted { color: var(--u-muted) !important; }

/* ---------- Cards ---------- */
body:not(.login-page) .card {
    background: var(--u-surface);
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-2);
    overflow: hidden;
}
body:not(.login-page) .card + .card { margin-top: 16px; }
body:not(.login-page) .card-header,
body:not(.login-page) .card > .card-header {
    position: relative;
    background: #ffffff !important;
    border-bottom: 0 !important;
    padding: 12px 18px 4px !important;
    font-weight: 700;
    font-size: 14px;
    color: var(--u-text);
    letter-spacing: -0.05px;
}
/* Even on .have-border, use a clean white header with a brand red leading accent
   instead of a heavy red gradient — modern admin look. */
body:not(.login-page) .card-header.have-border {
    background: #ffffff !important;
    color: var(--u-text) !important;
    border-bottom: 0 !important;
    padding: 16px 22px !important;
}
body:not(.login-page) .card-header.have-border::before {
    content: none !important;
    display: none !important;
}
/* The brand-red strip moves to a thin top edge on .have-border cards for identity. */
body:not(.login-page) .card-header.have-border ~ .card-body,
body:not(.login-page) .card:has(> .card-header.have-border) {
    position: relative;
}
body:not(.login-page) .card:has(> .card-header.have-border)::before {
    content: none !important;
    display: none !important;
}
body:not(.login-page) .card-body { padding: 10px 18px 14px !important; }
/* When a card-header is directly above the body, drop the body's top padding
   so the next element sits flush to the header. */
body:not(.login-page) .card > .card-header + .card-body,
body:not(.login-page) .card > .card-header ~ .card-body {
    padding-top: 2px !important;
}
body:not(.login-page) .card-title {
    font-size: 14px; font-weight: 700; color: var(--u-text);
    text-transform: none; letter-spacing: 0;
}

/* ---------- Buttons ---------- */
body:not(.login-page) .btn {
    border-radius: var(--u-radius-sm) !important;
    font-size: 13.5px !important;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 8px 16px !important;
    line-height: 1.4 !important;
    border-width: 1px !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.18s ease, transform 0.1s ease;
    box-shadow: var(--u-shadow-1);
}
body:not(.login-page) .btn:focus,
body:not(.login-page) .btn:active:focus { box-shadow: 0 0 0 3px rgba(42,79,166,0.18) !important; }
body:not(.login-page) .btn:hover { transform: translateY(-1px); }
body:not(.login-page) .btn:active { transform: translateY(0); }

body:not(.login-page) .btn-primary,
body:not(.login-page) .btn-primary:focus,
body:not(.login-page) .btn-primary:active,
body:not(.login-page) .btn-primary.dropdown-toggle:focus,
body:not(.login-page) .show > .btn-primary.dropdown-toggle {
    background: linear-gradient(135deg, var(--u-brand), var(--u-brand-2)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px -8px rgba(167,28,32,0.55) !important;
}
body:not(.login-page) .btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 10px 20px -10px rgba(167,28,32,0.65) !important;
}

body:not(.login-page) .btn-outline-primary {
    background: transparent !important;
    border-color: var(--u-brand) !important;
    color: var(--u-brand) !important;
}
body:not(.login-page) .btn-outline-primary:hover {
    background: var(--u-brand-soft) !important;
    border-color: var(--u-brand) !important;
    color: var(--u-brand) !important;
}

body:not(.login-page) .btn-secondary,
body:not(.login-page) .btn-default {
    background: #ffffff !important;
    border-color: var(--u-border-2) !important;
    color: var(--u-text-2) !important;
}
body:not(.login-page) .btn-secondary:hover,
body:not(.login-page) .btn-default:hover {
    background: #f4f6fb !important;
    border-color: #d9e0ee !important;
}

body:not(.login-page) .btn-success {
    background: var(--u-success) !important;
    border-color: var(--u-success) !important;
    color: #fff !important;
}
body:not(.login-page) .btn-danger {
    background: var(--u-danger) !important;
    border-color: var(--u-danger) !important;
    color: #fff !important;
}
body:not(.login-page) .btn-warning {
    background: var(--u-warning) !important;
    border-color: var(--u-warning) !important;
    color: #fff !important;
}
body:not(.login-page) .btn-info {
    background: var(--u-info) !important;
    border-color: var(--u-info) !important;
    color: #fff !important;
}
body:not(.login-page) .btn-light {
    background: #f7f9fc !important;
    border-color: var(--u-border) !important;
    color: var(--u-text-2) !important;
}
body:not(.login-page) .btn-link {
    color: var(--u-info) !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
}
body:not(.login-page) .btn-sm { padding: 5px 10px !important; font-size: 12px !important; border-radius: 6px !important; }
body:not(.login-page) .btn-lg { padding: 11px 22px !important; font-size: 15px !important; border-radius: 10px !important; }

/* Theme-specific colored buttons (existing in app.css) */
body:not(.login-page) .btn-add-new,
body:not(.login-page) .btn-add-new:focus,
body:not(.login-page) .btn-add-new:hover { background-color: var(--u-warning) !important; border-color: transparent !important; }
/* === STANDARD EXPORT BUTTONS (apply to every page) === */
body:not(.login-page) .btn-excel,
body:not(.login-page) .btn-excel:focus,
body:not(.login-page) .btn-excel:hover {
    background: var(--u-success) !important;
    background-color: var(--u-success) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
body:not(.login-page) .btn-pdf,
body:not(.login-page) .btn-pdf:focus,
body:not(.login-page) .btn-pdf:hover {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
/* Auto-prepend an icon to .btn-excel if the markup forgot the <i>.
   Doesn't add a second icon when one already exists (CSS-only — uses :first-child check via .fa/.mdi). */
body:not(.login-page) .btn-excel:not(:has(.fa)):not(:has(.mdi))::before {
    content: "\F021B"; /* mdi-file-excel */
    font-family: "Material Design Icons";
    font-size: 14px;
    margin-right: 6px;
    line-height: 1;
}
body:not(.login-page) .btn-pdf:not(:has(.fa)):not(:has(.mdi))::before {
    content: "\F222"; /* mdi-file-pdf-box */
    font-family: "Material Design Icons";
    font-size: 14px;
    margin-right: 6px;
    line-height: 1;
}
/* Ensure icon and text are tidy whenever the markup DOES include an <i> */
body:not(.login-page) .btn-excel > i,
body:not(.login-page) .btn-pdf > i {
    margin-right: 6px;
    font-size: 14px;
    line-height: 1;
    vertical-align: -1px;
}
body:not(.login-page) .btn-excel > i + span,
body:not(.login-page) .btn-pdf > i + span { vertical-align: middle; }
body:not(.login-page) .btn-search,
body:not(.login-page) .btn-search:focus,
body:not(.login-page) .btn-search:hover { background-color: #5d666d !important; border-color: transparent !important; }
body:not(.login-page) .btn-edit,
body:not(.login-page) .btn-edit:focus,
body:not(.login-page) .btn-edit:hover { background-color: var(--u-info) !important; border-color: transparent !important; }
body:not(.login-page) .btn-view,
body:not(.login-page) .btn-view:focus,
body:not(.login-page) .btn-view:hover { background-color: #1f1f1f !important; border-color: transparent !important; }

/* ---------- Forms ---------- */
body:not(.login-page) .form-control,
body:not(.login-page) .custom-select {
    height: 40px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--u-text);
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid var(--u-border-2) !important;
    border-radius: var(--u-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
body:not(.login-page) .form-control:focus,
body:not(.login-page) .custom-select:focus {
    border-color: var(--u-info) !important;
    box-shadow: 0 0 0 3px rgba(42,79,166,0.12) !important;
    background-color: #ffffff !important;
}
body:not(.login-page) textarea.form-control { height: auto; min-height: 80px; }
body:not(.login-page) .form-control[readonly],
body:not(.login-page) .form-control:disabled,
body:not(.login-page) input:read-only,
body:not(.login-page) input:disabled {
    background-color: #f4f6fb !important;
    color: var(--u-muted) !important;
    border-color: var(--u-border) !important;
}
body:not(.login-page) .form-group { margin-bottom: 14px; }
body:not(.login-page) .form-group > label,
body:not(.login-page) label.col-form-label {
    font-size: 12.5px; font-weight: 600;
    color: var(--u-text-2);
    margin-bottom: 6px;
    letter-spacing: 0.1px;
}
body:not(.login-page) .input-group-text {
    border: 1px solid var(--u-border-2);
    background: #f7f9fc;
    color: var(--u-muted);
    border-radius: var(--u-radius-sm);
}
body:not(.login-page) .has-error .form-control,
body:not(.login-page) .has-error .multiselect__tags,
body:not(.login-page) .has-error .select2-container .select2-selection--single {
    border-color: var(--u-danger) !important;
    box-shadow: 0 0 0 3px rgba(208,72,72,0.10) !important;
}
body:not(.login-page) .has-error .help-block { color: var(--u-danger) !important; font-size: 12px !important; }

/* "First-render quiet error state": several forms (e.g. /admin/general_setting)
   apply `.has-error` to every required field on mount, before the user has
   typed anything — vee-validate flags them all immediately, so the page
   loads as a wall of red. Override the red border + shadow for fields that
   are still showing their placeholder and haven't been focused yet. The
   semantics stay intact (submit still blocks until the field is filled);
   we only relax the visual until the user actually interacts. */
body:not(.login-page) .has-error .form-control:placeholder-shown:not(:focus) {
    border-color: var(--u-border-2) !important;
    box-shadow: none !important;
}
body:not(.login-page) .has-error:has(.form-control:placeholder-shown:not(:focus)) > .help-block,
body:not(.login-page) .has-error:has(> div > .form-control:placeholder-shown:not(:focus)) > .help-block {
    visibility: hidden;
}

/* Select2 — match Bootstrap form-control */
body:not(.login-page) .select2-container .select2-selection--single { height: 40px !important; border: 1px solid var(--u-border-2) !important; border-radius: var(--u-radius-sm) !important; }
body:not(.login-page) .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px !important; padding-left: 12px; color: var(--u-text); }
body:not(.login-page) .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
body:not(.login-page) .select2-container--default.select2-container--focus .select2-selection--single,
body:not(.login-page) .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--u-info) !important;
    box-shadow: 0 0 0 3px rgba(42,79,166,0.12) !important;
}
body:not(.login-page) .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--u-info) !important; }

/* Multiselect (vue) */
body:not(.login-page) .multiselect__tags {
    min-height: 40px !important;
    border: 1px solid var(--u-border-2) !important;
    border-radius: var(--u-radius-sm) !important;
    padding: 7px 40px 0 8px !important;
    background: #fff;
}

/* ---------- Tables — modern admin (Stripe/Linear feel) ---------- */
body:not(.login-page) .table {
    color: var(--u-text);
    background: var(--u-surface);
    border-collapse: separate;
    border-spacing: 0;
}
body:not(.login-page) .table thead th {
    background: #fafbfd !important;
    color: var(--u-muted) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--u-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 14px 16px !important;
    white-space: nowrap;
    vertical-align: middle;
    font-family: var(--u-font);
}
/* Force every child element inside a thead cell to match the standard.
   Targets <a> sort links, <span>, <strong>, etc. */
body:not(.login-page) .table thead th,
body:not(.login-page) .table thead th *,
body:not(.login-page) .table thead th a,
body:not(.login-page) .table thead th a:hover,
body:not(.login-page) .table thead th a:focus,
body:not(.login-page) .table thead th span,
body:not(.login-page) .table thead th strong {
    color: var(--u-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}
/* Sort icons stay subtle */
body:not(.login-page) .table thead th i,
body:not(.login-page) .table thead th .fa-sort,
body:not(.login-page) .table thead th .fa-sort-up,
body:not(.login-page) .table thead th .fa-sort-down {
    color: var(--u-faint) !important;
    font-size: 11px !important;
    margin-left: 4px;
    opacity: 0.7;
}
body:not(.login-page) .table tbody td {
    padding: 14px 16px !important;
    border-top: 1px solid #f3f4f8 !important;
    vertical-align: middle !important;
    font-size: 13.5px;
    color: var(--u-text-2);
    line-height: 1.5;
    text-align: left !important;   /* consistent left-align across the site */
}
/* Allow explicit right-align (used for currency/amount columns) */
body:not(.login-page) .table tbody td.text-right,
body:not(.login-page) .table tbody td.text-end {
    text-align: right !important;
}
/* Last column (actions): keep on one line but LEFT-aligned to match the rest of the table.
   Overrides any inline .text-center on the action header/cell. */
body:not(.login-page) .table tbody td:last-child,
body:not(.login-page) .table tbody td:last-child.text-center {
    text-align: left !important;
    white-space: nowrap;
}
/* Header cells follow the same rules */
body:not(.login-page) .table thead th { text-align: left !important; }
body:not(.login-page) .table thead th.text-right,
body:not(.login-page) .table thead th.text-end { text-align: right !important; }
body:not(.login-page) .table thead th:last-child,
body:not(.login-page) .table thead th:last-child.text-center { text-align: left !important; }
/* Make sure the action button group itself sits flush-left inside the cell */
body:not(.login-page) .table tbody td:last-child > .btn-group,
body:not(.login-page) .table tbody td:last-child > .d-flex,
body:not(.login-page) .table tbody td:last-child > .action-buttons {
    justify-content: flex-start !important;
}
body:not(.login-page) .table-bordered { border: 1px solid var(--u-border) !important; border-radius: 0 !important; }
body:not(.login-page) .table-bordered td,
body:not(.login-page) .table-bordered th { border: 1px solid #f3f4f8 !important; }
body:not(.login-page) .table-bordered thead th { border-bottom-width: 1px !important; border-color: var(--u-border) !important; }
body:not(.login-page) .table-striped tbody tr:nth-of-type(odd) { background-color: #fdfdff !important; }
body:not(.login-page) .table-hover tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body:not(.login-page) .table-hover tbody tr:hover {
    background-color: #fdf6f6 !important;
    box-shadow: inset 3px 0 0 var(--u-brand);
}
/* ===== Table action-column buttons — modern soft-tint chips =====
   Applies globally to any .btn-edit / .btn-view / .btn-danger / .btn-delete / .btn-icon
   inside any .table cell. Filled solid on hover. */
body:not(.login-page) .table tbody td .btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 2px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    transform: none !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    line-height: 1 !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
body:not(.login-page) .table tbody td .btn:hover { transform: translateY(-1px) !important; }
/* Edit / view / primary actions — brand-info tint, fills on hover */
body:not(.login-page) .table tbody td .btn-edit,
body:not(.login-page) .table tbody td .btn-primary,
body:not(.login-page) .table tbody td .btn-view {
    background: var(--u-info-soft) !important;
    color: var(--u-info) !important;
    border-color: rgba(42,79,166,0.18) !important;
}
body:not(.login-page) .table tbody td .btn-edit:hover,
body:not(.login-page) .table tbody td .btn-primary:hover,
body:not(.login-page) .table tbody td .btn-view:hover {
    background: var(--u-info) !important;
    color: #fff !important;
    border-color: var(--u-info) !important;
}
/* Delete / danger — brand-red tint, fills on hover */
body:not(.login-page) .table tbody td .btn-danger,
body:not(.login-page) .table tbody td .btn-delete {
    background: var(--u-brand-soft) !important;
    color: var(--u-brand) !important;
    border-color: rgba(167,28,32,0.18) !important;
}
body:not(.login-page) .table tbody td .btn-danger:hover,
body:not(.login-page) .table tbody td .btn-delete:hover {
    background: var(--u-brand) !important;
    color: #fff !important;
    border-color: var(--u-brand) !important;
}
/* Success / approve — green tint */
body:not(.login-page) .table tbody td .btn-success {
    background: var(--u-success-soft) !important;
    color: var(--u-success) !important;
    border-color: rgba(28,124,74,0.18) !important;
}
body:not(.login-page) .table tbody td .btn-success:hover {
    background: var(--u-success) !important;
    color: #fff !important;
    border-color: var(--u-success) !important;
}
/* Warning / pending — amber tint */
body:not(.login-page) .table tbody td .btn-warning {
    background: var(--u-warning-soft) !important;
    color: var(--u-warning) !important;
    border-color: rgba(177,118,26,0.18) !important;
}
body:not(.login-page) .table tbody td .btn-warning:hover {
    background: var(--u-warning) !important;
    color: #fff !important;
    border-color: var(--u-warning) !important;
}
/* Icon-only override: always 34x34 regardless of class */
body:not(.login-page) .table tbody td .btn-icon {
    width: 34px !important; height: 34px !important;
    padding: 0 !important;
}
/* Icons inside the buttons */
body:not(.login-page) .table tbody td .btn > i,
body:not(.login-page) .table tbody td .btn > .fa,
body:not(.login-page) .table tbody td .btn > .mdi {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* DataTables wrappers */
body:not(.login-page) .dataTables_wrapper {
    padding: 12px 14px;
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-2);
}
body:not(.login-page) .dataTables_length select,
body:not(.login-page) .dataTables_filter input {
    height: 36px;
    border: 1px solid var(--u-border-2) !important;
    border-radius: var(--u-radius-sm) !important;
    padding: 4px 10px;
    font-size: 13px;
}
body:not(.login-page) .dataTables_filter input:focus {
    border-color: var(--u-info) !important;
    box-shadow: 0 0 0 3px rgba(42,79,166,0.12) !important;
    outline: 0;
}
body:not(.login-page) .dataTables_info { color: var(--u-muted); font-size: 12.5px; }

/* ---------- Pagination ---------- */
body:not(.login-page) .pagination { gap: 4px; }
body:not(.login-page) .page-link,
body:not(.login-page) .dataTables_paginate .paginate_button {
    min-width: 34px; height: 34px;
    display: inline-flex !important; align-items: center; justify-content: center;
    border: 1px solid var(--u-border) !important;
    background: #ffffff !important;
    color: var(--u-text-2) !important;
    border-radius: var(--u-radius-sm) !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body:not(.login-page) .page-link:hover,
body:not(.login-page) .dataTables_paginate .paginate_button:hover {
    background: #f4f6fb !important;
    border-color: #d9e0ee !important;
    color: var(--u-text) !important;
}
body:not(.login-page) .page-item.active .page-link,
body:not(.login-page) .dataTables_paginate .paginate_button.current,
body:not(.login-page) .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--u-brand), var(--u-brand-2)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
body:not(.login-page) .page-item.disabled .page-link { color: var(--u-faint) !important; background: #f7f9fc !important; }

/* ---------- Modals ---------- */
body:not(.login-page) .modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--u-shadow-3);
    overflow: hidden;
}
body:not(.login-page) .modal-header {
    background: var(--u-surface) !important;
    color: var(--u-text);
    border-bottom: 1px solid var(--u-border) !important;
    padding: 16px 22px !important;
}
body:not(.login-page) .modal-header .modal-title { font-weight: 700; font-size: 16px; color: var(--u-text); }
body:not(.login-page) .modal-header .close { color: var(--u-muted); opacity: 1; font-weight: 400; font-size: 22px; }
body:not(.login-page) .modal-header .close:hover { color: var(--u-text); }
body:not(.login-page) .modal-body { padding: 22px !important; color: var(--u-text-2); }
body:not(.login-page) .modal-footer {
    border-top: 1px solid var(--u-border) !important;
    padding: 14px 22px !important;
    background: #fbfcfe;
}

/* ---------- Alerts ---------- */
body:not(.login-page) .alert {
    border: 0 !important;
    border-radius: var(--u-radius) !important;
    padding: 12px 16px !important;
    font-size: 13.5px;
    box-shadow: var(--u-shadow-1);
}
body:not(.login-page) .alert-success { background: var(--u-success-soft) !important; color: var(--u-success) !important; }
body:not(.login-page) .alert-danger  { background: var(--u-danger-soft)  !important; color: var(--u-danger)  !important; }
body:not(.login-page) .alert-warning { background: var(--u-warning-soft) !important; color: var(--u-warning) !important; }
body:not(.login-page) .alert-info    { background: var(--u-info-soft)    !important; color: var(--u-info)    !important; }

/* ---------- Badges ---------- */
body:not(.login-page) .badge {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    line-height: 1.4;
}
/* NOTE: explicitly skip .noti-icon-badge so the topbar's own bell-badge styles
   (deep red bg + crisp white text) own that element without color/bg conflict. */
body:not(.login-page) .badge-primary:not(.noti-icon-badge) { background: var(--u-info-soft) !important; color: var(--u-info) !important; }
body:not(.login-page) .badge-success:not(.noti-icon-badge),
body:not(.login-page) .badge-approve:not(.noti-icon-badge),
body:not(.login-page) .badge-unlock:not(.noti-icon-badge)   { background: var(--u-success-soft) !important; color: var(--u-success) !important; }
body:not(.login-page) .badge-warning:not(.noti-icon-badge),
body:not(.login-page) .badge-pending:not(.noti-icon-badge)  { background: var(--u-warning-soft) !important; color: var(--u-warning) !important; }
body:not(.login-page) .badge-danger:not(.noti-icon-badge),
body:not(.login-page) .badge-reject:not(.noti-icon-badge),
body:not(.login-page) .badge-lock:not(.noti-icon-badge)     { background: var(--u-danger-soft) !important; color: var(--u-danger) !important; }
body:not(.login-page) .badge-registered  { background: var(--u-info-soft) !important; color: var(--u-info) !important; }
body:not(.login-page) .badge-participated{ background: var(--u-success-soft) !important; color: var(--u-success) !important; }

/* ---------- Nav-tabs / nav-pills ---------- */
body:not(.login-page) .nav-tabs {
    border-bottom: 1px solid var(--u-border) !important;
    gap: 6px;
}
body:not(.login-page) .nav-tabs .nav-link {
    border: 0 !important;
    color: var(--u-muted) !important;
    background: transparent !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
body:not(.login-page) .nav-tabs .nav-link:hover { color: var(--u-text); }
body:not(.login-page) .nav-tabs .nav-link.active,
body:not(.login-page) .nav-tabs .nav-link.active:hover,
body:not(.login-page) .nav-tabs .nav-link.active:focus {
    color: var(--u-brand) !important;
    background: transparent !important;
    border-bottom-color: var(--u-brand) !important;
}
body:not(.login-page) .nav-pills .nav-link {
    border-radius: var(--u-radius-sm) !important;
    padding: 8px 14px !important;
    color: var(--u-muted) !important;
    font-weight: 600;
}
body:not(.login-page) .nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--u-brand), var(--u-brand-2)) !important;
    color: #fff !important;
}

/* ---------- Breadcrumbs ---------- */
body:not(.login-page) .breadcrumb {
    background: transparent !important;
    padding: 0 0 8px !important;
    margin: 0 0 4px !important;
    border-bottom: 0 !important;
    font-size: 12.5px;
}
body:not(.login-page) .breadcrumb-item a { color: var(--u-info); }
body:not(.login-page) .breadcrumb-item.active { color: var(--u-muted); }

/* ---------- Dropdown menus ---------- */
body:not(.login-page) .dropdown-menu {
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius) !important;
    padding: 6px !important;
    box-shadow: var(--u-shadow-3) !important;
    margin-top: 6px;
}
body:not(.login-page) .dropdown-item {
    border-radius: var(--u-radius-sm);
    padding: 8px 10px !important;
    font-size: 13.5px;
    color: var(--u-text-2);
}
body:not(.login-page) .dropdown-item:hover,
body:not(.login-page) .dropdown-item:focus {
    background: #f4f6fb !important;
    color: var(--u-text) !important;
}
body:not(.login-page) .dropdown-divider { border-color: var(--u-border) !important; margin: 4px 4px !important; }

/* ---------- Checkbox / Radio (basic polish) ---------- */
body:not(.login-page) .custom-control-label::before {
    border: 1px solid var(--u-border-2) !important;
    background: #fff !important;
    border-radius: 4px;
}
body:not(.login-page) .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, var(--u-brand), var(--u-brand-2)) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 6px -2px rgba(167,28,32,0.45);
}
body:not(.login-page) .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(167,28,32,0.18) !important;
}

/* ---------- Date picker (mx-datepicker) ---------- */
body:not(.login-page) .mx-input {
    height: 40px !important;
    border-radius: var(--u-radius-sm) !important;
    border: 1px solid var(--u-border-2) !important;
    padding: 6px 30px 6px 12px !important;
    font-size: 13.5px !important;
    color: var(--u-text) !important;
    box-shadow: none !important;
}
body:not(.login-page) .mx-input:focus,
body:not(.login-page) .mx-input:hover {
    border-color: var(--u-info) !important;
    box-shadow: 0 0 0 3px rgba(42,79,166,0.12) !important;
}

/* ---------- Tooltip ---------- */
body:not(.login-page) .tooltip .tooltip-inner {
    background: #0f1e3d !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
}

/* ---------- Misc text colors used widely ---------- */
body:not(.login-page) .text-primary { color: var(--u-text) !important; }
body:not(.login-page) .text-danger,
body:not(.login-page) .reject       { color: var(--u-danger) !important; }
body:not(.login-page) .text-success,
body:not(.login-page) .approve      { color: var(--u-success) !important; }
body:not(.login-page) .text-warning,
body:not(.login-page) .pending      { color: var(--u-warning) !important; }

/* ---------- Page wrapper / container spacing ---------- */
body:not(.login-page) .page-content-wrapper { padding-top: 72px !important; }
body:not(.login-page) .container-fluid { padding: 0 18px; }

/* ---------- Module-wide refinements (added) ---------- */

/* Horizontal form labels (.control-label is used ~1100x) */
body:not(.login-page) label.control-label,
body:not(.login-page) .control-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--u-text-2) !important;
    letter-spacing: 0.1px !important;
    padding-top: 10px;
    margin-bottom: 6px;
}

/* Section / page section titles (.header-title — used ~256x) */
body:not(.login-page) .header-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--u-text) !important;
    letter-spacing: 0.2px;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0;
    border-bottom: 0 !important;
}

/* Save / Cancel button row (.btn-save-cancel) */
body:not(.login-page) .btn-save-cancel {
    width: auto !important;
    min-width: 100px;
    padding: 8px 18px !important;
}
/* Add breathing room around the Save / Cancel row so the buttons don't
   touch the card bottom edge or sit flush against each other. */
body:not(.login-page) .form-actions {
    margin-top: 24px;
    padding-top: 16px;
    padding-bottom: 8px;
    border-top: 1px solid var(--u-border-1, #eef2f7);
}
body:not(.login-page) .form-actions .btn-save-cancel + .btn-save-cancel,
body:not(.login-page) .form-actions .btn + .btn { margin-left: 10px; }

/* Search / Reset button width helper */
body:not(.login-page) .btn-search-reset { min-width: 140px; }

/* Help-block (validation message under inputs) */
body:not(.login-page) .help-block {
    font-size: 12px !important;
    color: var(--u-danger) !important;
    margin-top: 4px !important;
    line-height: 1.3 !important;
}

/* Badge — default + extra status aliases */
body:not(.login-page) .badge-default {
    background: #f1f4fb !important;
    color: var(--u-muted) !important;
}
body:not(.login-page) .badge-pill {
    border-radius: 999px !important;
    padding: 4px 10px !important;
}

/* font-weight-lighter — convert "light" to a usable medium weight in modern stack */
body:not(.login-page) .font-weight-lighter { font-weight: 500 !important; }

/* ===== Required field marker: convert the "Required" pill into a red asterisk =====
   The project's required pattern is:
     <label> <strong> Label text
         <span class="badge badge-default badge-pill border-radius font-weight-lighter">
             @lang('general.mandatory')
         </span>
     </strong> </label>
   We hide the pill text and replace it with a red *  via ::before. */
body:not(.login-page) label .badge.badge-default.font-weight-lighter,
body:not(.login-page) label .badge.badge-default.badge-pill,
body:not(.login-page) .control-label .badge.badge-default,
body:not(.login-page) strong .badge.badge-default {
    display: inline-block !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 0 2px !important;
    font-size: 0 !important;           /* hide the original "Required" text */
    line-height: 1 !important;
    color: transparent !important;
    width: auto;
    height: auto;
    position: relative;
    vertical-align: baseline;
}
body:not(.login-page) label .badge.badge-default.font-weight-lighter::before,
body:not(.login-page) label .badge.badge-default.badge-pill::before,
body:not(.login-page) .control-label .badge.badge-default::before,
body:not(.login-page) strong .badge.badge-default::before {
    content: "*";
    color: var(--u-brand);
    font-size: 16px;
    font-weight: 900;
    line-height: 0;
    vertical-align: middle;
    margin-left: 2px;
}

/* ---------- Section group / fieldset legends ----------
   Matches production rendering of `<fieldset><legend><h5>CUSTOMER</h5></legend>`:
   the inner h5 picks up the dark heading color and Bootstrap's heading size.
   Apply the same look directly to `.form-section-title` so rental cluster forms
   (which use a flat `<h5 class="form-section-title">`) read identical. */
body:not(.login-page) fieldset > legend,
body:not(.login-page) fieldset > legend.border-bottom,
body:not(.login-page) .form-section-title {
    position: relative;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--u-text) !important;
    margin: 14px 0 10px !important;
    padding: 2px 0 !important;
    /* Override Bootstrap's `.border-bottom` utility (which uses !important) — section
       headers in form cards should have no underline. */
    border-bottom: 0 !important;
    line-height: 1.4;
}
/* Inner h5 inside legend should not get a second size from Bootstrap defaults */
body:not(.login-page) fieldset > legend > h5 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--u-text) !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
/* Section-title leading accent bar removed per user request. */
body:not(.login-page) fieldset > legend::before,
body:not(.login-page) .form-section-title::before {
    content: none !important;
    display: none !important;
}
/* When section title is the FIRST element of a card-body, less top margin */
body:not(.login-page) .card-body > .form-section-title:first-child,
body:not(.login-page) .card-body > form > .form-section-title:first-child,
body:not(.login-page) .card-body > form-submit-confirmation:first-child > .form-section-title:first-child {
    margin-top: 0 !important;
}

/* ---------- CKEditor (.ck.ck-editor) ---------- */
body:not(.login-page) .ck.ck-editor__main > .ck-editor__editable,
body:not(.login-page) .ck-editor__editable_inline {
    border-radius: 0 0 var(--u-radius-sm) var(--u-radius-sm) !important;
    border-color: var(--u-border-2) !important;
    padding: 12px 14px !important;
    min-height: 220px;
}
body:not(.login-page) .ck.ck-toolbar {
    border-radius: var(--u-radius-sm) var(--u-radius-sm) 0 0 !important;
    border-color: var(--u-border-2) !important;
    background: #f7f9fc !important;
}
body:not(.login-page) .ck.ck-button { color: var(--u-text-2) !important; border-radius: 6px !important; }
body:not(.login-page) .ck.ck-button.ck-on { background: var(--u-info-soft) !important; color: var(--u-info) !important; }

/* ---------- Multiselect (vue-multiselect) ---------- */
body:not(.login-page) .multiselect__option--highlight,
body:not(.login-page) .multiselect__option--highlight:after {
    background: var(--u-info) !important;
    color: #fff !important;
}
body:not(.login-page) .multiselect__option--selected.multiselect__option--highlight {
    background: var(--u-danger) !important;
}
body:not(.login-page) .multiselect__placeholder { color: var(--u-faint) !important; padding-top: 0 !important; margin-bottom: 0; }
body:not(.login-page) .multiselect__tag {
    background: var(--u-info-soft) !important;
    color: var(--u-info) !important;
    border-radius: 6px !important;
    padding: 4px 22px 4px 8px !important;
    font-size: 12.5px;
}

/* ---------- Daterange picker / vue2-daterange ---------- */
body:not(.login-page) .daterangepicker {
    border: 0 !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-3) !important;
    padding: 8px;
}
body:not(.login-page) .daterangepicker td.active,
body:not(.login-page) .daterangepicker td.active:hover {
    background: var(--u-brand) !important;
    color: #fff !important;
    border-radius: 6px;
}
body:not(.login-page) .daterangepicker td.in-range { background: var(--u-brand-soft) !important; color: var(--u-brand) !important; }

/* ---------- File / image uploader (vue-file-agent + multi-image-uploader) ---------- */
body:not(.login-page) .vue-file-agent.file-input-wrapper {
    border: 1px dashed var(--u-border-2) !important;
    border-radius: var(--u-radius) !important;
    background: #f7f9fc !important;
    padding: 12px;
}
body:not(.login-page) .multi-image-uploader,
body:not(.login-page) .image-uploader,
body:not(.login-page) .border-dash-default {
    border: 1px dashed var(--u-border-2) !important;
    border-radius: var(--u-radius) !important;
    background: #f7f9fc;
}

/* ---------- Md-stepper-horizontal ---------- */
body:not(.login-page) .md-stepper-horizontal {
    background: var(--u-surface) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-1) !important;
    overflow: hidden;
}
body:not(.login-page) .md-stepper-horizontal .md-step .md-step-circle {
    background: #e3e7f0 !important;
    color: var(--u-muted) !important;
    font-weight: 700;
    box-shadow: 0 2px 6px -2px rgba(15,30,61,0.18);
}
body:not(.login-page) .md-stepper-horizontal .md-step.active .md-step-circle {
    background: var(--u-info) !important;
    color: #fff !important;
}
body:not(.login-page) .md-stepper-horizontal .md-step.done .md-step-circle {
    background: var(--u-success) !important;
    color: #fff !important;
}
body:not(.login-page) .md-stepper-horizontal .md-step .md-step-bar-left,
body:not(.login-page) .md-stepper-horizontal .md-step .md-step-bar-right {
    border-top: 1px dashed var(--u-border-2) !important;
}

/* ---------- Toast (jquery-toast) ---------- */
body:not(.login-page) .jq-toast-single {
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-3) !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    border: 0 !important;
}

/* ---------- jquery-confirm ---------- */
body:not(.login-page) .jconfirm .jconfirm-box {
    border-radius: 14px !important;
    box-shadow: var(--u-shadow-3) !important;
    border: 0 !important;
    padding: 20px !important;
}
body:not(.login-page) .jconfirm .jconfirm-buttons .btn { border-radius: var(--u-radius-sm) !important; padding: 7px 16px !important; }

/* ---------- SweetAlert2 ---------- */
body:not(.login-page) .swal2-popup {
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: var(--u-shadow-3) !important;
}
body:not(.login-page) .swal2-title { font-size: 18px !important; font-weight: 700 !important; color: var(--u-text) !important; }
body:not(.login-page) .swal2-html-container { font-size: 14px !important; color: var(--u-text-2) !important; }
body:not(.login-page) .swal2-actions .swal2-confirm,
body:not(.login-page) .swal2-actions .swal2-cancel {
    border-radius: var(--u-radius-sm) !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: var(--u-shadow-1) !important;
}

/* ---------- Loading overlay ---------- */
body:not(.login-page) .loading-overlay { backdrop-filter: blur(2px); background: rgba(15,30,61,0.18) !important; }

/* ---------- Print-friendly classes — keep them out of the refresh ---------- */
@media print {
    body:not(.login-page) .card,
    body:not(.login-page) .table,
    body:not(.login-page) .modal-content { box-shadow: none !important; border-color: #000 !important; }
}

/* ---------- Action chips inside tables (small icon buttons commonly used) ---------- */
body:not(.login-page) td .btn-sm,
body:not(.login-page) td .btn-icon {
    margin: 0 2px;
}
body:not(.login-page) td .btn-icon {
    width: 32px; height: 32px;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px !important;
}

/* ---------- Header / page-title-box (when used) ---------- */
body:not(.login-page) .page-title-box {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--u-border);
    margin-bottom: 16px;
}
body:not(.login-page) .page-title-box .page-title {
    font-size: 18px; font-weight: 700; color: var(--u-text);
}

/* ---------- Subtle empty-state cue for tables with "no data" ---------- */
body:not(.login-page) .dataTables_empty,
body:not(.login-page) .table td.text-center:has(> em),
body:not(.login-page) .table td.text-center.empty {
    color: var(--u-faint);
    font-style: italic;
    padding: 28px 14px !important;
}

/* ---------- Search collapse (custom x-search-collapse component) ---------- */
/* Compact pill-chip Filter trigger — inline width, brand-red filled when collapsed.
   Markup is unchanged: <div class="panel-title bg-primary"><a class="btn">…</a></div> */
body:not(.login-page) .panel-title.bg-primary {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    position: relative;
    overflow: visible;
    display: inline-block !important;
    width: auto !important;
}
body:not(.login-page) .panel-title.bg-primary::before { display: none !important; }

body:not(.login-page) .panel-title.bg-primary > a.btn,
body:not(.login-page) .panel-title.bg-primary > a.btn.btn-primary,
body:not(.login-page) .panel-title.bg-primary > a.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: var(--u-brand) !important;
    background-image: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px -4px rgba(167,28,32,0.45), inset 0 0 0 1px rgba(255,255,255,0.10) !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    width: auto !important;
    min-width: 110px !important;
    transform: none !important;
    position: relative;
    transition: box-shadow 0.18s ease, transform 0.05s ease, filter 0.18s ease;
}
body:not(.login-page) .panel-title.bg-primary > a.btn::before {
    /* Filter funnel icon rendered via mask-image so we don't depend on FA */
    content: "";
    width: 14px; height: 14px;
    flex-shrink: 0;
    background-color: #ffffff;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M3 5h18l-7 9v6l-4-2v-4z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M3 5h18l-7 9v6l-4-2v-4z'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
body:not(.login-page) .panel-title.bg-primary > a.btn:hover {
    color: #ffffff !important;
    filter: brightness(1.04);
    box-shadow: 0 6px 16px -4px rgba(167,28,32,0.55), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
body:not(.login-page) .panel-title.bg-primary > a.btn[aria-expanded="true"] {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--u-brand) !important;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.10), inset 0 0 0 1px var(--u-brand) !important;
}
body:not(.login-page) .panel-title.bg-primary > a.btn[aria-expanded="true"]::before {
    background-color: var(--u-brand);
}
/* Hide the chevron and any inline FA icons inside the trigger */
body:not(.login-page) .panel-title.bg-primary > a.btn > .fa-chevron-down,
body:not(.login-page) .panel-title.bg-primary > a.btn > .fa-sort,
body:not(.login-page) .panel-title.bg-primary > a.btn > i {
    display: none !important;
}
body:not(.login-page) .panel-title.bg-primary > a.btn > span {
    line-height: 1;
}
/* The expanded collapsed area: card-body sitting under the panel-title */
body:not(.login-page) #collapseOne > .card.card-body,
body:not(.login-page) .collapse > .card.card-body {
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-1);
    padding: 14px 18px !important;
    margin-bottom: 12px;
}
/* Compact panel-body inside collapse */
body:not(.login-page) #collapseOne .panel-body,
body:not(.login-page) .collapse .panel-body {
    padding: 0 !important;
}
/* Trim the form margins inside the search panel */
body:not(.login-page) #collapseOne form.m-b-20,
body:not(.login-page) .collapse form.m-b-20 {
    margin-bottom: 0 !important;
}
body:not(.login-page) #collapseOne .form-group,
body:not(.login-page) .collapse .form-group {
    margin-bottom: 10px !important;
}
body:not(.login-page) #collapseOne .input-group-btn,
body:not(.login-page) .collapse .input-group-btn {
    margin-top: 6px !important;
}
body:not(.login-page) #collapseOne .row.justify-content-end,
body:not(.login-page) .collapse .row.justify-content-end {
    margin-top: 4px !important;
}

/* Legacy class hook kept for older usages */
body:not(.login-page) .collapse-search,
body:not(.login-page) .collapse-search:hover {
    background: #ffffff !important;
    color: var(--u-text) !important;
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius-sm) !important;
    padding: 12px 18px 12px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    box-shadow: var(--u-shadow-1);
    position: relative;
}
body:not(.login-page) .collapse-search::before {
    content: "";
    position: absolute;
    left: 14px; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--u-brand), var(--u-brand-2));
}

/* ---------- Tooltip extra ---------- */
body:not(.login-page) .tooltip[x-placement^=top]  .tooltip-arrow,
body:not(.login-page) .tooltip[x-placement^=bottom] .tooltip-arrow {
    border-color: transparent !important;
}

/* ---------- Forget / Reset / Recover (old .wrapper-page layout) ----------
   The main /login uses .login-shell (own scoped block); these older auth pages
   still use the legacy markup. Style them here to match the new login.
   ---------------------------------------------------------------------- */
.login-page .accountbg {
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 18% 22%, rgba(86,134,255,0.22), transparent 55%),
        radial-gradient(ellipse at 82% 78%, rgba(212,167,84,0.18), transparent 55%),
        linear-gradient(135deg, #0a1733 0%, #122548 45%, #1a2f5c 100%);
    z-index: 0;
    opacity: 1;
}
.login-page .wrapper-page {
    max-width: 440px;
    margin: 80px auto 40px;
    position: relative;
    z-index: 1;
}
.login-page .wrapper-page > .card {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(255,255,255,0.6) !important;
    border-radius: 18px !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 30px 80px -20px rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    overflow: hidden;
}
.login-page .wrapper-page > .card > .card-body { padding: 44px 36px !important; }
.login-page .wrapper-page .logo-admin { display: inline-block; }
.login-page .wrapper-page .logo img { max-height: 56px; margin-bottom: 8px; }
.login-page .wrapper-page h4 {
    font-size: 22px !important; font-weight: 700 !important;
    color: #0f1e3d !important;
    margin: 14px 0 6px !important;
    text-transform: none !important;
}
.login-page .wrapper-page p {
    font-size: 13.5px !important; color: #6b7588 !important;
    margin: 0 0 22px !important;
}
.login-page .wrapper-page .form-horizontal { margin-top: 4px !important; }
.login-page .wrapper-page .form-group { margin-bottom: 16px; }
.login-page .wrapper-page .form-group > label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    color: #3b465a;
    margin-bottom: 6px; letter-spacing: 0.1px;
}
.login-page .wrapper-page .form-control {
    height: 46px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    color: #0f1e3d !important;
    background: #f7f9fc !important;
    border: 1px solid #e3e7f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.login-page .wrapper-page .form-control:focus {
    background: #ffffff !important;
    border-color: #2a4fa6 !important;
    box-shadow: 0 0 0 4px rgba(42,79,166,0.12) !important;
}
.login-page .wrapper-page .has-error .form-control {
    border-color: #e35d5d !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 4px rgba(227,93,93,0.10) !important;
}
.login-page .wrapper-page .help-block {
    display: block; margin-top: 6px;
    font-size: 12.5px; color: #d04848;
}
.login-page .wrapper-page .btn-primary,
.login-page .wrapper-page .btn.btn-primary {
    width: 100%;
    height: 46px;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1a2f5c, #2a4fa6) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    box-shadow: 0 10px 24px -10px rgba(26,47,92,0.55) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.login-page .wrapper-page .btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.login-page .wrapper-page a.text-muted {
    color: #2a4fa6 !important; font-size: 13px;
    text-decoration: none;
}
.login-page .wrapper-page a.text-muted:hover { color: #0f1e3d !important; text-decoration: underline; }
.login-page .wrapper-page .alert {
    border-radius: 10px !important;
    border: 0 !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    margin-bottom: 16px;
}
.login-page .wrapper-page .alert-danger { background: #fdecec; color: #b42a2a; }
.login-page .wrapper-page .alert-success { background: #e6f7ee; color: #1c7c4a; }
.login-page .footer-copyright { display: none !important; }

/* ---------- Bootstrap 3 panels (some old views still use .panel) ---------- */
body:not(.login-page) .panel {
    background: var(--u-surface);
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-2);
    margin-bottom: 16px;
    overflow: hidden;
}
body:not(.login-page) .panel-heading,
body:not(.login-page) .panel > .panel-heading {
    background: #fbfcfe !important;
    border-bottom: 1px solid var(--u-border) !important;
    padding: 14px 18px !important;
    font-weight: 600;
    color: var(--u-text);
}
body:not(.login-page) .panel-title { font-size: 14px !important; font-weight: 700 !important; color: var(--u-text) !important; margin: 0; }
body:not(.login-page) .panel-body { padding: 18px !important; color: var(--u-text-2); }
body:not(.login-page) .panel-footer {
    background: #fbfcfe !important;
    border-top: 1px solid var(--u-border) !important;
    padding: 12px 18px !important;
}

/* ---------- Quick date-range chip filter (x-quick-date-range) ---------- */
body:not(.login-page) .qdr {
    display: block;
    margin: 0 0 14px;
}
body:not(.login-page) .qdr--center { text-align: center; }
body:not(.login-page) .qdr--right  { text-align: right; }

body:not(.login-page) .qdr-track {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 0 rgba(15,23,42,0.02);
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body:not(.login-page) .qdr-track::-webkit-scrollbar { display: none; }

body:not(.login-page) .qdr-chip {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
body:not(.login-page) .qdr-chip:hover {
    background: #f1f5f9;
    color: #0f172a;
}
body:not(.login-page) .qdr-chip:focus { outline: none; }
body:not(.login-page) .qdr-chip:focus-visible {
    box-shadow: 0 0 0 3px rgba(167,28,32,0.18);
}
body:not(.login-page) .qdr-chip.is-active {
    background: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%);
    color: #ffffff;
    box-shadow: 0 4px 10px -4px rgba(167,28,32,0.45),
                inset 0 0 0 1px rgba(255,255,255,0.10);
}
body:not(.login-page) .qdr-chip.is-active:hover {
    background: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%);
    color: #ffffff;
    filter: brightness(1.04);
}

@media (max-width: 768px) {
    body:not(.login-page) .qdr-track { width: 100%; }
    body:not(.login-page) .qdr-chip { padding: 8px 14px; font-size: 12.5px; }
}

/* ---------- List toolbar (x-list-toolbar): Filter + Exports on one row ---------- */
body:not(.login-page) .list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}
body:not(.login-page) .list-toolbar__left,
body:not(.login-page) .list-toolbar__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
body:not(.login-page) .list-toolbar__right { margin-left: auto; }

/* Filter button — brand red→burgundy pill, same family as the search-collapse pill */
body:not(.login-page) .list-toolbar__filter,
body:not(.login-page) .list-toolbar .list-toolbar__filter.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--u-brand) !important;
    background-image: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px -4px rgba(167,28,32,0.45), inset 0 0 0 1px rgba(255,255,255,0.10) !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    min-width: 110px !important;
    line-height: 1 !important;
    transition: box-shadow 0.18s ease, filter 0.18s ease;
}
body:not(.login-page) .list-toolbar__filter:hover {
    color: #ffffff !important;
    filter: brightness(1.04);
    box-shadow: 0 6px 16px -4px rgba(167,28,32,0.55), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}
body:not(.login-page) .list-toolbar__filter[aria-expanded="true"] {
    background: #ffffff !important;
    background-image: none !important;
    color: var(--u-brand) !important;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.10), inset 0 0 0 1px var(--u-brand) !important;
}
body:not(.login-page) .list-toolbar__filter-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M3 5h18l-7 9v6l-4-2v-4z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M3 5h18l-7 9v6l-4-2v-4z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}

/* When the toolbar is present, hide the duplicate trigger that lives inside
   <x-search-collapse> so we don't end up with two Filter buttons on the page. */
body:not(.login-page) .card-body:has(.list-toolbar) .panel-title.bg-primary { display: none !important; }

/* ---------- Unified font (single family for Khmer + Latin) ---------- */
/* `font-family` inherits, so setting it on body covers the whole document.
   The earlier `body *:not(.mdi):not(.fa)...:not([class*=fa-])` rule matched
   every element on every render — a real CPU cost on big pages (the role
   permission matrix has hundreds of nodes). Removed in favor of inheritance. */
body, body.login-page {
    font-family: 'Noto Sans', 'Noto Sans Khmer', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Form controls don't inherit font-family by default — set explicitly. */
input, textarea, select, button, optgroup {
    font-family: inherit !important;
}
/* Icon fonts keep their own family. */
.mdi, [class^="mdi-"], [class*=" mdi-"] {
    font-family: 'Material Design Icons' !important;
}
.fa, .fab, .fas, .far, .fal, [class^="fa-"], [class*=" fa-"] {
    font-family: 'FontAwesome', 'Font Awesome 5 Free', sans-serif !important;
}

/* ---------- Quick date-range v2: separators + Custom Range popover ---------- */
body:not(.login-page) .qdr { position: relative; }

/* Thin separator between logical groups in the track */
body:not(.login-page) .qdr-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(15,23,42,0.10);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Custom Range chip — outline-style so it reads as "different" */
body:not(.login-page) .qdr-chip--custom {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--u-brand) !important;
    background: rgba(167,28,32,0.06) !important;
    padding-left: 14px !important;
    padding-right: 16px !important;
}
body:not(.login-page) .qdr-chip--custom:hover {
    background: rgba(167,28,32,0.10) !important;
    color: var(--u-brand) !important;
}
body:not(.login-page) .qdr-chip--custom.is-active {
    background: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%) !important;
    color: #ffffff !important;
}
body:not(.login-page) .qdr-chip__icon {
    width: 13px; height: 13px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* Custom Range popover */
body:not(.login-page) .qdr-custom {
    display: none;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: 0 6px 18px -8px rgba(15,23,42,0.18);
    align-items: end;
    flex-wrap: wrap;
    gap: 10px 14px;
    max-width: 580px;
}
body:not(.login-page) .qdr-custom.is-open { display: flex; }
body:not(.login-page) .qdr-custom__label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; font-weight: 600; color: var(--u-muted);
    text-transform: uppercase; letter-spacing: 0.6px;
    margin: 0;
}
body:not(.login-page) .qdr-custom__input {
    border: 1px solid var(--u-border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--u-text);
    background: #ffffff;
    font-family: inherit;
    min-width: 150px;
}
body:not(.login-page) .qdr-custom__input:focus {
    outline: none;
    border-color: var(--u-brand);
    box-shadow: 0 0 0 3px rgba(167,28,32,0.15);
}
body:not(.login-page) .qdr-custom__apply,
body:not(.login-page) .qdr-custom__cancel {
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
body:not(.login-page) .qdr-custom__apply {
    background: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%);
    color: #ffffff;
    box-shadow: 0 4px 10px -4px rgba(167,28,32,0.45);
}
body:not(.login-page) .qdr-custom__apply:hover { filter: brightness(1.05); }
body:not(.login-page) .qdr-custom__cancel {
    background: #f1f5f9;
    color: #475569;
}
body:not(.login-page) .qdr-custom__cancel:hover { background: #e2e8f0; }

/* ---------- Role permissions matrix: rental section break ----------
   (Removed the hardcoded 9001..9005 ::before "RENTAL MANAGEMENT" label + tint.
   The role page's footer script (ensureSections) now inserts a localized
   section header above the rental rows for ALL 13 rental permissions, so the
   hardcoded English label/partial tint were redundant and only covered 5 rows.) */

/* ---------- Role permissions matrix: first-column spacing + checkbox gap ---------- */
/* Long permission keys like `property_installment_principal_payment` were
   crashing into the next column's VIEW checkbox. Give the label column real
   width + breathing room, and put proper spacing between the checkbox and
   its label so they don't touch. */
body:not(.login-page) .permission-matrix-scroll-fallback table th:first-child,
body:not(.login-page) .permission-matrix-scroll-fallback table td:first-child {
    min-width: 320px !important;
    max-width: 360px;
    width: 360px;
    padding-right: 24px !important;
    vertical-align: middle !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback table td:first-child .form-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    min-width: 0;
}
body:not(.login-page) .permission-matrix-scroll-fallback table td:first-child .form-group > input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
}
body:not(.login-page) .permission-matrix-scroll-fallback table td:first-child .form-group > label {
    margin: 0 !important;
    padding-left: 0 !important;
    min-width: 0;
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    /* Two-line clamp — long labels wrap to a second line cleanly.
       overflow-wrap:break-word breaks at natural opportunities (underscores
       count) instead of mid-character — fixes the "property_installment_" /
       "contract" awkward break. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}
/* Action columns: stay compact + centered */
body:not(.login-page) .permission-matrix-scroll-fallback table th:not(:first-child),
body:not(.login-page) .permission-matrix-scroll-fallback table td:not(:first-child) {
    text-align: center !important;
    min-width: 70px;
}
/* Make sure the rental-section header still fits after the column widens */
body:not(.login-page) .permission-matrix-scroll-fallback table tbody tr:has(label[for="9001"]) td:first-child {
    padding-right: 24px !important;
}

/* ---------- Role permissions matrix v3: column spacing + checkbox alignment ---------- */
/* Override role-permission-matrix.css `table-layout: fixed` so each column
   has a real min-width and breathing room. Otherwise headers like "VIEW
   REQUEST" / "NOTIFY" sit right next to each other and checkboxes drift. */
body:not(.login-page) .permission-matrix-scroll-fallback table,
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback table {
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
}
body:not(.login-page) .permission-matrix-scroll-fallback thead th,
body:not(.login-page) .permission-matrix-scroll-fallback tbody td {
    padding: 12px 14px !important;
}
/* Each action column gets a real width + center alignment so the
   checkboxes line up vertically across rows. */
body:not(.login-page) .permission-matrix-scroll-fallback thead th:nth-child(n+2),
body:not(.login-page) .permission-matrix-scroll-fallback tbody td:nth-child(n+2) {
    width: 90px !important;
    min-width: 90px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
/* Header text — keep on one line, decent letter-spacing, no overlap.
   STICKY: the action titles (VIEW / ADD / EDIT / DELETE / …) stay pinned to the
   top of the scroll box so the client always sees what each checkbox does while
   scrolling the long module list. */
body:not(.login-page) .permission-matrix-scroll-fallback thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--u-text-2, #374151) !important;
    white-space: nowrap !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #F1F5F9 !important;
    border-bottom: 2px solid #E2E8F0 !important;
}
/* Pin the module-name column (first cell) too, and keep its header above all. */
body:not(.login-page) .permission-matrix-scroll-fallback thead th:first-child {
    left: 0 !important;
    z-index: 4 !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback tbody td:first-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
    background: #ffffff !important;
    box-shadow: 1px 0 0 #EEF1F5;
}
/* Checkbox itself: center in its cell, uniform size */
body:not(.login-page) .permission-matrix-scroll-fallback tbody td:nth-child(n+2) .form-group {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
}
body:not(.login-page) .permission-matrix-scroll-fallback tbody td input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--u-brand);
}
/* Disable the table-fixed thead width hack from role-permission-matrix.css
   so the rightmost columns (VIEW REQUEST, NOTIFY) actually have room. */
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback thead {
    width: 100% !important;
}
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback thead,
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback tbody tr {
    display: table-row-group;
}
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback tbody {
    display: table-row-group;
    max-height: none;
    overflow: visible;
}
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback {
    overflow-x: auto;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* Tooltip help icons inside action cells: space them away from the checkbox. */
body:not(.login-page) .permission-matrix-scroll-fallback tbody td:nth-child(n+2) .form-group {
    gap: 8px !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback tbody td .form-group > i.fa,
body:not(.login-page) .permission-matrix-scroll-fallback tbody td .form-group > i.fa-question-circle-o {
    margin-left: 6px;
    font-size: 14px;
    color: #94a3b8;
    cursor: help;
}

/* ---------- Permission matrix: native checkbox + section headers ---------- */
/* Reset any inherited ::before/::after decorations and force native checkbox
   rendering so the checkmark sits in the middle of the box. */
body:not(.login-page) .permission-matrix-scroll-fallback input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    opacity: 1 !important;
    accent-color: var(--u-brand) !important;
    cursor: pointer;
    vertical-align: middle;
}
body:not(.login-page) .permission-matrix-scroll-fallback input[type="checkbox"] + label::before,
body:not(.login-page) .permission-matrix-scroll-fallback input[type="checkbox"] + label::after,
body:not(.login-page) .permission-matrix-scroll-fallback label::before,
body:not(.login-page) .permission-matrix-scroll-fallback label::after {
    display: none !important;
    content: none !important;
}

/* Section header rows (inserted by JS into the matrix) */
body:not(.login-page) .permission-matrix-scroll-fallback tr.qa-section-header {
    background: linear-gradient(to right, var(--u-brand-soft), transparent 80%) !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback tr.qa-section-header td {
    padding: 14px 16px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--u-brand) !important;
    border-top: 2px solid rgba(167,28,32,0.20) !important;
    border-bottom: 1px solid rgba(167,28,32,0.10) !important;
    background: transparent !important;
    text-align: left !important;
}
/* First section header doesn't need the top divider (it's first row) */
body:not(.login-page) .permission-matrix-scroll-fallback tbody tr.qa-section-header:first-child td {
    border-top: 0 !important;
}
/* The hardcoded "RENTAL MANAGEMENT" ::before banner is now redundant — the JS
   inserts a real header row. Hide the old ::before so it doesn't double up. */
body:not(.login-page) .permission-matrix-scroll-fallback table tbody tr:has(label[for="9001"]) td:first-child::before {
    display: none !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback table tbody tr:has(label[for="9001"]) td:first-child {
    padding-top: 12px !important;
}

/* ---------- Role form: General Information grid + Assigned Users panel ---------- */
body:not(.login-page) .role-form-grid .form-group {
    max-width: 100%;
}

/* Pill counter next to "Assigned Users" section title */
body:not(.login-page) .form-section-title .role-members__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    margin-left: 10px;
    border-radius: 999px;
    background: var(--u-brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* Container card */
body:not(.login-page) .role-members.card {
    border: 1px solid var(--u-border) !important;
    border-radius: var(--u-radius) !important;
    box-shadow: var(--u-shadow-1);
    overflow: hidden;
    margin: 0 0 14px;
    background: #ffffff;
}

/* Header strip: count summary on the left, "View all" link on the right */
body:not(.login-page) .role-members__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--u-border);
    background: linear-gradient(to right, rgba(167,28,32,0.04), transparent 60%);
}
body:not(.login-page) .role-members__summary {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
body:not(.login-page) .role-members__count {
    font-size: 22px;
    font-weight: 700;
    color: var(--u-brand);
    line-height: 1;
}
body:not(.login-page) .role-members__caption {
    font-size: 13px;
    color: var(--u-muted);
}
body:not(.login-page) .role-members__action {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--u-brand);
    text-decoration: none;
}
body:not(.login-page) .role-members__action:hover {
    color: var(--u-brand-2);
    text-decoration: underline;
}

/* User list: responsive 2-up grid (desktop), single column on mobile */
body:not(.login-page) .role-members__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
@media (max-width: 768px) {
    body:not(.login-page) .role-members__list { grid-template-columns: 1fr; }
}

body:not(.login-page) .role-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--u-border);
    transition: background 0.12s ease;
}
body:not(.login-page) .role-member:hover { background: #fbfcfe; }
/* Vertical divider between the two columns */
body:not(.login-page) .role-members__list .role-member:nth-child(2n+1) {
    border-right: 1px solid var(--u-border);
}
@media (max-width: 768px) {
    body:not(.login-page) .role-members__list .role-member:nth-child(n) { border-right: 0; }
}
/* Last row(s) — drop the bottom border so the card edge looks clean */
body:not(.login-page) .role-members__list .role-member:last-child,
body:not(.login-page) .role-members__list .role-member:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
}

body:not(.login-page) .role-member__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.20);
}
body:not(.login-page) .role-member__body {
    flex: 1;
    min-width: 0;
}
body:not(.login-page) .role-member__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--u-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body:not(.login-page) .role-member__email {
    font-size: 11.5px;
    color: var(--u-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
body:not(.login-page) .role-member__meta {
    flex-shrink: 0;
    text-align: right;
}
body:not(.login-page) .role-member__active {
    font-size: 11px;
    color: var(--u-faint);
    text-transform: lowercase;
    letter-spacing: 0.2px;
}
body:not(.login-page) .role-members__empty {
    padding: 20px;
    text-align: center;
    color: var(--u-muted);
    font-size: 13px;
}

/* ---------- Quick date-range dropdown (qdr-dd) ---------- */
body:not(.login-page) .qdr-dd {
    position: relative;
    display: inline-block;
    margin: 0 0 14px;
}
body:not(.login-page) .qdr-dd--center { display: block; text-align: center; }
body:not(.login-page) .qdr-dd--right  { display: block; text-align: right; }

/* Trigger pill: white surface with brand-red icon, current range as label */
body:not(.login-page) .qdr-dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: 999px;
    padding: 8px 14px 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--u-text);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 36px;
}
body:not(.login-page) .qdr-dd__trigger:hover {
    border-color: rgba(167,28,32,0.30);
    box-shadow: 0 4px 10px -4px rgba(167,28,32,0.20);
}
body:not(.login-page) .qdr-dd__trigger[aria-expanded="true"] {
    border-color: var(--u-brand);
    box-shadow: 0 0 0 3px rgba(167,28,32,0.10);
}
body:not(.login-page) .qdr-dd__icon {
    width: 16px; height: 16px;
    background-color: var(--u-brand);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
    flex-shrink: 0;
}
body:not(.login-page) .qdr-dd__label { white-space: nowrap; }
body:not(.login-page) .qdr-dd__chevron {
    width: 12px; height: 12px;
    background-color: var(--u-muted);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 10l5 5 5-5z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 10l5 5 5-5z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
    margin-left: 2px;
    transition: transform 0.18s ease;
}
body:not(.login-page) .qdr-dd__trigger[aria-expanded="true"] .qdr-dd__chevron {
    transform: rotate(180deg);
}

/* Dropdown menu */
body:not(.login-page) .qdr-dd__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: 14px;
    box-shadow: 0 12px 36px -12px rgba(15,23,42,0.25);
    padding: 6px;
    z-index: 1000;
}
body:not(.login-page) .qdr-dd--right .qdr-dd__menu { left: auto; right: 0; }

body:not(.login-page) .qdr-dd__group-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--u-faint);
    padding: 8px 12px 4px;
}
body:not(.login-page) .qdr-dd__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    color: var(--u-text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
}
body:not(.login-page) .qdr-dd__item:hover { background: #f6f7fb; }
body:not(.login-page) .qdr-dd__item.is-active { background: rgba(167,28,32,0.08); color: var(--u-brand); font-weight: 700; }
body:not(.login-page) .qdr-dd__check {
    width: 14px; height: 14px;
    background-color: transparent;
    flex-shrink: 0;
}
body:not(.login-page) .qdr-dd__item.is-active .qdr-dd__check {
    background-color: var(--u-brand);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
body:not(.login-page) .qdr-dd__hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--u-faint);
    text-transform: lowercase;
}
body:not(.login-page) .qdr-dd__divider {
    height: 1px; background: var(--u-border);
    margin: 6px 4px;
}
body:not(.login-page) .qdr-dd__custom {
    padding: 8px 12px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
body:not(.login-page) .qdr-dd__field {
    display: flex; flex-direction: column; gap: 4px;
    margin: 0;
}
body:not(.login-page) .qdr-dd__field > span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--u-muted);
}
body:not(.login-page) .qdr-dd__field > input[type="date"] {
    border: 1px solid var(--u-border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
}
body:not(.login-page) .qdr-dd__field > input[type="date"]:focus {
    outline: none;
    border-color: var(--u-brand);
    box-shadow: 0 0 0 2px rgba(167,28,32,0.12);
}
body:not(.login-page) .qdr-dd__custom-actions {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px;
}
body:not(.login-page) .qdr-dd__btn {
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
body:not(.login-page) .qdr-dd__btn--primary {
    background: linear-gradient(135deg, var(--u-brand), var(--u-brand-2));
    color: #ffffff;
}
body:not(.login-page) .qdr-dd__btn--ghost {
    background: #f1f5f9; color: #475569;
}

/* Hide the older horizontal chip row styles so legacy markup doesn't show */
body:not(.login-page) .qdr { display: none; }

/* ---------- Permission matrix section header: full-width row ---------- */
/* The legacy `role-permission-matrix.css` sets `display: table` on each tbody
   tr (header-sync hack). Our JS-inserted section header rows need to behave
   the same way so they actually appear. */
body:not(.login-page) .permission-matrix-scroll-fallback tbody tr.qa-section-header {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback tbody tr.qa-section-header > td {
    display: table-cell !important;
    width: 100% !important;
    padding: 14px 18px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--u-brand) !important;
    background: linear-gradient(to right, var(--u-brand-soft), transparent 80%) !important;
    border-top: 2px solid rgba(167,28,32,0.20) !important;
    border-bottom: 1px solid rgba(167,28,32,0.10) !important;
    text-align: left !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback tbody tr.qa-section-header:first-child > td {
    border-top: 0 !important;
}

/* ---------- Assigned Users dedicated screen (admin/role/{id}/assigned-users) ---------- */
body:not(.login-page) .au-hero {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #fcf3f3 100%);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-1);
    padding: 22px 26px;
    margin-bottom: 18px;
    position: relative; overflow: hidden;
}
body:not(.login-page) .au-hero::before {
    content: none !important;
    display: none !important;
}
body:not(.login-page) .au-hero__left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body:not(.login-page) .au-hero__role-chip {
    display: inline-flex; align-items: center; padding: 4px 12px;
    background: var(--u-brand); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    border-radius: 999px;
    align-self: flex-start;
}
body:not(.login-page) .au-hero__title { margin: 6px 0 2px; font-size: 22px; font-weight: 700; color: var(--u-text); }
body:not(.login-page) .au-hero__sub { color: var(--u-muted); margin: 0; font-size: 13.5px; }

body:not(.login-page) .au-hero__stats { display: flex; gap: 10px; flex-wrap: wrap; }
body:not(.login-page) .au-stat {
    background: #ffffff; border: 1px solid var(--u-border); border-radius: 12px;
    padding: 12px 18px; text-align: left; min-width: 100px;
    display: flex; flex-direction: column; gap: 2px;
}
body:not(.login-page) .au-stat__label { font-size: 10.5px; color: var(--u-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
body:not(.login-page) .au-stat__value { font-size: 22px; font-weight: 700; color: var(--u-text); line-height: 1; }
body:not(.login-page) .au-stat--ok .au-stat__value { color: #15803d; }
body:not(.login-page) .au-stat--muted .au-stat__value { color: var(--u-muted); }

/* Toolbar */
body:not(.login-page) .au-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
body:not(.login-page) .au-search {
    flex: 1; min-width: 240px; max-width: 480px;
    border: 1px solid var(--u-border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px; font-family: inherit;
    background: #ffffff;
}
body:not(.login-page) .au-search:focus {
    outline: none;
    border-color: var(--u-brand);
    box-shadow: 0 0 0 3px rgba(167,28,32,0.10);
}
body:not(.login-page) .au-toolbar__right { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Card grid */
body:not(.login-page) .au-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
body:not(.login-page) .au-card {
    background: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-1);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
body:not(.login-page) .au-card:hover {
    border-color: rgba(167,28,32,0.30);
    box-shadow: 0 8px 24px -10px rgba(167,28,32,0.20);
    transform: translateY(-1px);
}

body:not(.login-page) .au-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px;
}
body:not(.login-page) .au-card__avatar {
    flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 50%;
    color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.4px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.20);
}
body:not(.login-page) .au-card__id { flex: 1; min-width: 0; }
body:not(.login-page) .au-card__name {
    font-size: 14.5px; font-weight: 700; color: var(--u-text); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:not(.login-page) .au-card__email {
    font-size: 12px; color: var(--u-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:not(.login-page) .au-card__pill {
    flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
body:not(.login-page) .au-card__pill--ok { background: #e6f7ee; color: #166534; }
body:not(.login-page) .au-card__pill--muted { background: #f1f5f9; color: #475569; }

body:not(.login-page) .au-card__body {
    padding: 0 16px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
body:not(.login-page) .au-card__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.6; }
body:not(.login-page) .au-card__row-label { color: var(--u-muted); }
body:not(.login-page) .au-card__row-value { color: var(--u-text); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body:not(.login-page) .au-card__actions {
    display: flex; border-top: 1px solid var(--u-border);
}
body:not(.login-page) .au-card__action {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px; background: transparent; border: 0;
    font-size: 12px; font-weight: 600; color: var(--u-text-2);
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
body:not(.login-page) .au-card__action + .au-card__action { border-left: 1px solid var(--u-border); }
body:not(.login-page) .au-card__action:hover { background: #f4f6fb; color: var(--u-brand); text-decoration: none; }
body:not(.login-page) .au-card__action--danger:hover { background: var(--u-brand-soft); color: var(--u-brand); }
body:not(.login-page) .au-card__action i { font-size: 14px; }

body:not(.login-page) .au-empty {
    grid-column: 1 / -1;
    background: #ffffff; border: 1px dashed var(--u-border); border-radius: var(--u-radius);
    padding: 40px 16px; text-align: center; color: var(--u-muted);
}
body:not(.login-page) .au-empty i { font-size: 40px; opacity: 0.5; }

/* ---------- Money / KPI cards: prevent amount wrapping ---------- */
/* When a row of payment-method cards is rendered (Cash / Wing / ABA / ACLEDA /
   Other), the cards get squeezed and large amounts like "$1,700.00" wrap
   across 3 lines. Give amounts breathing room: nowrap + adequate min-width. */
body:not(.login-page) .card-stat,
body:not(.login-page) .stat-card,
body:not(.login-page) .method-card,
body:not(.login-page) .payment-method-card {
    min-width: 220px;
}
body:not(.login-page) .card-stat .stat-value,
body:not(.login-page) .card-stat .stat-amount,
body:not(.login-page) .stat-card .stat-value,
body:not(.login-page) .method-card .method-amount,
body:not(.login-page) .payment-method-card .amount,
body:not(.login-page) [class*="amount"][class*="big"],
body:not(.login-page) [class*="total-amount"] {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.2px;
}
/* Generic safety: any element with a "$" amount inside a tight row card */
body:not(.login-page) .row > [class*="col-"] .card .currency,
body:not(.login-page) .row > [class*="col-"] .card .money,
body:not(.login-page) .row > [class*="col-"] .card-body h3,
body:not(.login-page) .row > [class*="col-"] .card-body h4 {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------- Dashboard period filter: compact dropdown ---------- */
body:not(.login-page) .dash-period {
    position: relative;
    display: inline-block;
    margin: 0 0 14px;
}
body:not(.login-page) .dash-period__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: 999px;
    padding: 8px 14px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: var(--u-text);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:not(.login-page) .dash-period__trigger:hover {
    border-color: rgba(167,28,32,0.30);
    box-shadow: 0 4px 10px -4px rgba(167,28,32,0.20);
}
body:not(.login-page) .dash-period__trigger[aria-expanded="true"] {
    border-color: var(--u-brand);
    box-shadow: 0 0 0 3px rgba(167,28,32,0.10);
}
body:not(.login-page) .dash-period__icon {
    width: 16px; height: 16px; flex-shrink: 0;
    background-color: var(--u-brand);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
body:not(.login-page) .dash-period__label { white-space: nowrap; }
body:not(.login-page) .dash-period__chevron {
    width: 12px; height: 12px; margin-left: 2px;
    background-color: var(--u-muted);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 10l5 5 5-5z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 10l5 5 5-5z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: transform 0.18s ease;
}
body:not(.login-page) .dash-period__trigger[aria-expanded="true"] .dash-period__chevron {
    transform: rotate(180deg);
}

body:not(.login-page) .dash-period__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid var(--u-border);
    border-radius: 14px;
    box-shadow: 0 12px 36px -12px rgba(15,23,42,0.25);
    padding: 6px;
    z-index: 1000;
}
body:not(.login-page) .dash-period__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--u-text);
    cursor: pointer;
    margin: 0;
    line-height: 1.3;
}
body:not(.login-page) .dash-period__item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body:not(.login-page) .dash-period__item:hover { background: #f6f7fb; }
body:not(.login-page) .dash-period__item.is-active {
    background: rgba(167,28,32,0.08);
    color: var(--u-brand);
    font-weight: 700;
}
body:not(.login-page) .dash-period__check {
    width: 14px; height: 14px; flex-shrink: 0;
    background-color: transparent;
}
body:not(.login-page) .dash-period__item.is-active .dash-period__check {
    background-color: var(--u-brand);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* ---------- Dashboard PAYMENT METHODS cards (rewrite v3) ----------
   Markup gives us 1 floating icon + 2 stacked .mini-stat-info blocks (total
   + included-cash). Old rules let those flow side-by-side at narrow widths,
   chopping "$1,700.00" to "$1...". Fix: force a 2-row CSS grid, pin the
   icon to its own corner cell, and let each row span the full content
   width so amounts can never truncate.  */
body:not(.login-page) .mini-stat.mini-stat--channel {
    display: grid !important;
    grid-template-columns: 1fr 36px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "total icon"
        "sub   sub";
    column-gap: 12px;
    row-gap: 10px;
    padding: 16px 18px !important;
    min-height: 118px;
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-1);
    background: #fff;
    position: relative;
    overflow: hidden;
}
body:not(.login-page) .mini-stat.mini-stat--channel::before {
    content: none !important;
    display: none !important;
}

/* Icon → corner cell, small + flat (NOT the giant filled circle) */
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-icon {
    grid-area: icon;
    float: none !important;
    position: static !important;
    align-self: start;
    justify-self: end;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: rgba(167,28,32,0.10) !important;
    color: var(--u-brand) !important;
    font-size: 14px !important;
}
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-icon i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--u-brand) !important;
}

/* Reset BOTH info blocks first to kill any inherited float/inline-block from
   legacy widget CSS. Each block owns its grid row at full width. */
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-info {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;          /* allow grid item to shrink, prevents row overflow */
    line-height: 1.25;
}

/* Row 1: total amount + channel name (Cash / Wing / ABA / ...) */
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-info:first-of-type {
    grid-area: total;
    font-size: 12.5px;
    color: var(--u-muted);
    text-transform: capitalize;
}
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-info:first-of-type .counter {
    display: block !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--u-text) !important;
    white-space: nowrap !important;
    overflow: visible !important;       /* never clip the amount */
    text-overflow: clip !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    margin: 0 0 2px 0 !important;
}

/* Row 2: included-cash sub-line — inline pair on a dashed-top row */
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-info + .mini-stat-info {
    grid-area: sub;
    padding-top: 10px !important;
    border-top: 1px dashed var(--u-border);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--u-faint);
}
body:not(.login-page) .mini-stat.mini-stat--channel .mini-stat-info + .mini-stat-info .counter {
    display: inline !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--u-muted) !important;
    margin-right: 6px;
    white-space: nowrap !important;
}

/* Card column sizing: 5 channels share a row at xl, two-up below */
body:not(.login-page) .dash-section--panel .row > [class*="col-xl"] {
    flex: 1 1 0;
    min-width: 220px;
}

/* ---------- Dashboard period dropdown: presets + custom range ----------
   Previous version only listed presets. User wanted from/to date pickers so
   they can choose an arbitrary window. Now the menu groups: (1) preset list
   (radio rows) and (2) a "Custom Range" row that expands to reveal date
   inputs + Apply. The trigger displays the active range as "YYYY-MM-DD →
   YYYY-MM-DD" when custom is in effect. */
/* Consolidates earlier .dash-period__menu rule (line ~2377) — kept here so
   all custom-range additions live together; later declarations win on conflict. */
body:not(.login-page) .dash-period__menu {
    min-width: 280px;
    padding: 8px 0 10px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
body:not(.login-page) .dash-period__group-label {
    padding: 6px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--u-faint);
}
body:not(.login-page) .dash-period__presets {
    padding: 2px 0;
}
body:not(.login-page) .dash-period__item-label {
    flex: 1;
    text-align: left;
}
body:not(.login-page) .dash-period__divider {
    height: 1px;
    background: var(--u-border);
    margin: 6px 10px;
}
body:not(.login-page) .dash-period__item--custom {
    position: relative;
}
body:not(.login-page) .dash-period__custom-chev {
    width: 0; height: 0;
    margin-left: auto;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--u-muted);
    transition: transform 0.15s ease;
}
/* Chevron rotates when the panel is OPEN — toggled via .is-expanded set by JS
   on the row itself (the row is a SIBLING-BEFORE the panel, so a ~ selector
   from the panel can't reach back to it; the JS class is authoritative). */
body:not(.login-page) .dash-period__item--custom.is-expanded .dash-period__custom-chev {
    transform: rotate(180deg);
}

/* Custom panel: hidden by default, slides open under the row */
body:not(.login-page) .dash-period__custom {
    display: none;
    padding: 10px 14px 12px;
    background: #fbfbfc;
    border-top: 1px solid var(--u-border);
    margin-top: 4px;
}
body:not(.login-page) .dash-period__custom.is-open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "from  to"
        "hint  hint"
        "apply apply";
    gap: 10px;
}
body:not(.login-page) .dash-period__hint {
    grid-area: hint;
    margin: 0;
    padding: 6px 10px;
    background: #fdecec;
    border: 1px solid rgba(167,28,32,0.25);
    border-radius: 6px;
    color: var(--u-brand);
    font-size: 12px;
    font-weight: 500;
}
body:not(.login-page) .dash-period__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body:not(.login-page) .dash-period__field:nth-child(1) { grid-area: from; }
body:not(.login-page) .dash-period__field:nth-child(2) { grid-area: to;   }
body:not(.login-page) .dash-period__field-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--u-faint);
    margin: 0;
}
body:not(.login-page) .dash-period__date {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--u-border);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: var(--u-text);
    width: 100%;
    box-sizing: border-box;
}
body:not(.login-page) .dash-period__date:focus {
    outline: none;
    border-color: var(--u-brand);
    box-shadow: 0 0 0 3px rgba(167,28,32,0.12);
}
body:not(.login-page) .dash-period__apply {
    grid-area: apply;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: var(--u-brand);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
}
body:not(.login-page) .dash-period__apply:hover {
    background: #8b1418;
}


/* Customer form: gender radio group — stack below label, capitalize values. */
body:not(.login-page) .gender-options {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 6px;
}
body:not(.login-page) .gender-options .gender-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
body:not(.login-page) .gender-options .gender-option > span {
    text-transform: capitalize;
}
body:not(.login-page) .gender-options input[type="radio"] {
    margin: 0;
}

/* Sidebar — bump font size for better readability per user request. */
body:not(.login-page) #sidebar-menu > ul > li > a {
    font-size: 15px;
    line-height: 1.35;
    padding: 14px 20px;
}
body:not(.login-page) #sidebar-menu > ul > li > a > i {
    font-size: 20px;
    width: 22px;
}
body:not(.login-page) #sidebar-menu ul ul a {
    font-size: 14.5px;
    padding: 11px 20px 11px 55px;
}
body:not(.login-page) #sidebar-menu .menu-title {
    font-size: 12px;
    letter-spacing: 1.6px;
}

/* Rental cluster — drag-drop image uploader (matches production Block form look). */
body:not(.login-page) .rental-image-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 200px;
    padding: 18px;
    border: 1.5px dashed #cdd3dd;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    text-align: center;
    margin: 0;
    overflow: hidden;
}
body:not(.login-page) .rental-image-uploader:hover {
    border-color: var(--u-brand, #a71c20);
    background: #fff;
}
body:not(.login-page) .rental-image-uploader__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #ffffff;
    color: #9aa3b2;
    font-size: 28px;
    border: 1px solid #e5e7eb;
}
body:not(.login-page) .rental-image-uploader__hint {
    font-size: 13px;
    color: #6b7280;
}
body:not(.login-page) .rental-image-uploader__preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    object-fit: cover;
}
body:not(.login-page) .rental-image-uploader__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ====================================================================
   Inline file-input upload button (customer / agent / etc.)
   --------------------------------------------------------------------
   Production markup is:
     <span class="btn btn-primary btn-block">
         <i class="fa fa-plus"></i>
         <span>Add Document</span>
         <input type="file" name="document" @change="uploadDocument">
     </span>
   The native file input renders the browser's "Choose file / No file chosen"
   widget INSIDE the button — so the button label and the native UI sit
   side-by-side and look broken (esp. with btn-block taking full row).

   Fix: hide the native input but keep it functional (covers the whole
   button as the click target), and restyle the host span as a clean
   dashed drop-zone using brand-soft pink + red dashed border.
   ==================================================================== */
body:not(.login-page) span.btn,
body:not(.login-page) label.btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
body:not(.login-page) .btn > input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;   /* hide native "No file chosen" text in some browsers */
}
/* Drop-zone restyle for the "Add Document" full-width primary button */
body:not(.login-page) span.btn.btn-primary.btn-block,
body:not(.login-page) label.btn.btn-primary.btn-block {
    background: var(--u-brand-soft) !important;
    color: var(--u-brand) !important;
    border: 1.5px dashed var(--u-brand) !important;
    border-radius: var(--u-radius-sm) !important;
    padding: 22px 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body:not(.login-page) span.btn.btn-primary.btn-block:hover,
body:not(.login-page) label.btn.btn-primary.btn-block:hover {
    background: var(--u-brand) !important;
    color: #fff !important;
    border-color: var(--u-brand) !important;
}
body:not(.login-page) span.btn.btn-primary.btn-block i.fa-plus,
body:not(.login-page) label.btn.btn-primary.btn-block i.fa-plus {
    margin-right: 8px;
    font-size: 14px;
}

/* ---------- Rental forms: exact Customer-parity layout ----------
   All rental module create/edit forms render as one Bootstrap card → card-header →
   card-body → form → ONE fieldset+legend, with fields flat in a single row.
   Mirrors admin/customer/form.blade.php structure exactly. */
/* Collapse <legend> default block: it has font-size 1.5rem and line-height 1.5,
   which creates a tall empty band above the small h5 inside. Force it to match
   the h5 metrics so the spacing is identical to production Customer form. */
body:not(.login-page) .rental-customer-card fieldset > legend {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
body:not(.login-page) .rental-customer-card fieldset > legend::before {
    display: none !important;
}
body:not(.login-page) .rental-customer-card fieldset > legend > h5 {
    position: relative;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 0 0 12px !important;
    padding: 2px 0 !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--u-text) !important;
    line-height: 1.4 !important;
}
body:not(.login-page) .rental-customer-card fieldset > legend > h5::before {
    content: "";
    position: absolute;
    left: -12px; top: 2px; bottom: 2px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--u-brand), var(--u-brand-2));
}
/* Native <select> on macOS Chrome rendered text in system serif font, which
   read inconsistent with the rest of the site (Inter / sans-serif). Force
   selects + their option list to inherit the body font. */
body:not(.login-page) select,
body:not(.login-page) select.form-control,
body:not(.login-page) select option,
body:not(.login-page) select.form-control option,
body:not(.login-page) select optgroup,
body:not(.login-page) select.form-control optgroup {
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--u-text) !important;
}
/* Native chevron sits flush against the right edge — give it breathing room.
   Applied globally to EVERY native <select> on the site (lists, filters, forms,
   modals — any component) so the dropdown arrow always has padding on its right. */
body:not(.login-page) select,
body:not(.login-page) select.form-control,
body:not(.login-page) select.custom-select {
    padding-right: 36px !important;
    background-position: right 12px center !important;
}

/* ────────────────────────────────────────────────────────────────
   Lease Contract preview-first UX.
   The form is hidden by default behind a "Show all fields" toggle so
   the preview becomes the workspace. Tokens are clickable and open the
   appropriate widget (modal / date picker / dropdown / radio / checklist).
   ──────────────────────────────────────────────────────────────── */
/* Fixed BOTTOM action bar — anchors Save / Show all fields / PDF / Excel /
   Print to the bottom of the viewport so they're always reachable while
   editing the long contract document without overlaying content. */
body:not(.login-page) .lease-actionbar {
    position: fixed;
    bottom: 0;
    left: 250px;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
    background: #ffffff;
    border-top: 1px solid var(--u-border-2);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06);
}
/* Page body pads up so the bottom bar doesn't cover the last lines of content. */
body:not(.login-page) .page-content-wrapper:has(.lease-actionbar) { padding-bottom: 80px; }
/* Mobile / sidebar collapsed. */
@media (max-width: 991.98px) {
    body:not(.login-page) .lease-actionbar { left: 0; padding: 10px 14px; }
}
@media print {
    body:not(.login-page) .lease-actionbar { display: none !important; }
}
body:not(.login-page) .lease-actionbar__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--u-text);
}
body:not(.login-page) .lease-actionbar__title .mdi { color: var(--u-brand); font-size: 20px; }
body:not(.login-page) .lease-actionbar__actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* When the lease form column is hidden, the preview takes the page. */
body:not(.login-page) .lease-form-col.is-hidden { display: none; }

/* Click-token popover (date / select / radio / multi-checkbox).
   Explicit display:none for [hidden] — overrides the UA stylesheet that loses
   the specificity battle against the positioning rule below. */
body:not(.login-page) .token-popover[hidden] { display: none !important; }
body:not(.login-page) .token-popover {
    position: absolute;
    z-index: 9999;
    min-width: 200px;
    max-width: 320px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--u-border-2);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
body:not(.login-page) .token-popover__date,
body:not(.login-page) .token-popover__select,
body:not(.login-page) .token-popover__text {
    width: 100%;
    min-width: 220px;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid var(--u-border-2);
    border-radius: 6px;
    background: #ffffff;
}
body:not(.login-page) .token-popover__text:focus,
body:not(.login-page) .token-popover__date:focus {
    outline: 0;
    border-color: var(--u-brand);
    box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12);
}

/* Single-select choice list (Contract Type, Currency, Document Type, etc.).
   Vertical list of clickable rows — polished, not raw buttons. */
body:not(.login-page) .token-popover__choice-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
}
body:not(.login-page) .token-popover__choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 0;
    border-radius: 6px;
    color: var(--u-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
body:not(.login-page) .token-popover__choice:hover {
    background: #fdf2f4;
    color: var(--u-brand);
}
body:not(.login-page) .token-popover__choice.is-active {
    background: var(--u-brand);
    color: #ffffff;
    font-weight: 600;
}
body:not(.login-page) .token-popover__choice.is-active::before {
    content: "✓ ";
    font-weight: 700;
}

/* Radio pill group (Male / Female). */
body:not(.login-page) .token-popover__radios {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
body:not(.login-page) .token-popover__radio-btn {
    padding: 8px 16px;
    border: 1px solid var(--u-border-2);
    background: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
body:not(.login-page) .token-popover__radio-btn:hover,
body:not(.login-page) .token-popover__radio-btn.is-active {
    background: var(--u-brand);
    border-color: var(--u-brand);
    color: #ffffff;
}

/* Multi-checkbox list (Notice Channels, Prohibited Uses, etc.). */
body:not(.login-page) .token-popover__checklist {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
}
body:not(.login-page) .token-popover__check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin: 0;
    color: var(--u-text);
}
body:not(.login-page) .token-popover__check-row:hover { background: #f8fafc; }
body:not(.login-page) .token-popover__check-row input[type="checkbox"] {
    accent-color: var(--u-brand);
    margin: 0;
}

/* Smart-search autocomplete (used by Signing Place and other free-text tokens
   that have a SUGGESTIONS list in form.blade.php). Input on top, scrollable
   list of suggestion rows below it. */
body:not(.login-page) .token-popover__autocomplete {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}
body:not(.login-page) .token-popover__suggest-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    border-top: 1px solid var(--u-border-1);
    padding-top: 6px;
}
body:not(.login-page) .token-popover__suggest {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #ffffff;
    border: 0;
    border-radius: 6px;
    color: var(--u-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
body:not(.login-page) .token-popover__suggest:hover {
    background: #fdf2f4;
    color: var(--u-brand);
}
body:not(.login-page) .token-popover__suggest-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--u-faint, #9aa3b7);
    font-style: italic;
}

/* Pointer cue on tokens that map to a picker modal or popover widget. */
body:not(.login-page) .contract-doc-wrap .tk { cursor: pointer; }

/* Contract metadata strip above the document preview — Code / Type / Signing Date / Place. */
body:not(.login-page) .contract-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid var(--u-border-2);
    border-radius: 8px;
}
body:not(.login-page) .contract-meta__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
body:not(.login-page) .contract-meta__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--u-muted);
}
body:not(.login-page) .contract-meta__value {
    display: inline-block;
    padding: 6px 10px;
    background: #fef9c3;
    border-radius: 4px;
    color: #422006;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    min-height: 28px;
}
body:not(.login-page) .contract-meta__value.is-empty {
    background: #ffffff;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
    font-weight: 400;
    font-style: italic;
}
body:not(.login-page) .contract-meta__value--readonly {
    background: #eef2f7;
    color: var(--u-text);
    cursor: default;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Print: hide the action bar so only the preview prints. */
@media print {
    body:not(.login-page) .lease-actionbar { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   Live Contract Preview (Lease Contract create / edit).
   Stacked layout: rendered as a full-width panel BELOW the form so the
   form keeps full width above and the preview is always visible below.
   ──────────────────────────────────────────────────────────────── */
body:not(.login-page) .rental-preview-col { margin-top: 14px; }
body:not(.login-page) .rental-preview-panel {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    background: #ffffff;
    border: 1px solid var(--u-border-2);
    border-radius: var(--u-radius, 8px);
    box-shadow: var(--u-shadow-2, 0 6px 24px rgba(15,23,42,.06));
    overflow: hidden;
}
body:not(.login-page) .rental-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fdf2f4 0%, #fff5f5 100%);
    border-bottom: 1px solid var(--u-border-2);
    font-size: 13px;
    color: var(--u-text);
}
body:not(.login-page) .rental-preview-toolbar strong { display: inline-flex; align-items: center; gap: 6px; }
body:not(.login-page) .rental-preview-toolbar .mdi { color: var(--u-brand); font-size: 16px; }
body:not(.login-page) .rental-preview-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body:not(.login-page) .rental-preview-toolbar__toggle,
body:not(.login-page) .rental-preview-toolbar__btn {
    background: transparent;
    border: 1px solid var(--u-border-2);
    border-radius: 4px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--u-muted);
    transition: background-color .12s ease, color .12s ease;
}
body:not(.login-page) .rental-preview-toolbar__toggle:hover,
body:not(.login-page) .rental-preview-toolbar__btn:hover {
    background: var(--u-brand);
    border-color: var(--u-brand);
    color: #ffffff;
}

/* Labeled "Reset to template" button — outlined secondary style, not red.
   Red would imply a destructive permanent action; this is a recoverable
   per-contract revert. */
body:not(.login-page) .rental-preview-toolbar__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    height: 30px;
    background: #ffffff;
    border: 1px solid var(--u-border-2);
    border-radius: 6px;
    color: var(--u-text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body:not(.login-page) .rental-preview-toolbar__reset:hover {
    background: #f1f5f9;
    border-color: var(--u-text-2);
    color: var(--u-text);
}
body:not(.login-page) .rental-preview-toolbar__reset .mdi {
    font-size: 16px;
    color: var(--u-muted);
}
body:not(.login-page) .rental-preview-toolbar__reset:hover .mdi {
    color: var(--u-text);
}
/* Auto-save status text — "Saving…" / "✓ Saved 14:32" */
body:not(.login-page) .rental-preview-status {
    flex: 1 1 auto;
    text-align: right;
    margin: 0 8px;
    font-size: 11px;
    color: var(--u-muted);
    min-height: 14px;
    transition: opacity .2s ease;
}
body:not(.login-page) .rental-preview-status.is-saving { color: #b45309; }
body:not(.login-page) .rental-preview-status.is-saved  { color: #047857; }

/* One-time hint banner inside the preview body. */
body:not(.login-page) .rental-preview-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 12px;
    color: #1e3a8a;
}
body:not(.login-page) .rental-preview-hint .mdi { color: #2563eb; }

/* Contenteditable cues: outline on focus, text cursor on hover. */
body:not(.login-page) .contract-doc-wrap[contenteditable="true"] {
    outline: none;
    cursor: text;
}
body:not(.login-page) .contract-doc-wrap[contenteditable="true"]:focus {
    box-shadow: 0 0 0 2px rgba(211,17,69,.18);
    border-radius: 4px;
}
body:not(.login-page) .contract-doc-wrap[contenteditable="true"] .tk:hover {
    background: #fde68a;
    cursor: text;
}
body:not(.login-page) .rental-preview-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px;
    background: #fafbfc;
}
/* Wrap for the .docx-rendered HTML preview. PhpWord emits inline styles on
   each <p>/<span> so we don't need to restyle the content itself — just frame
   it as a "paper" with margins. */
body:not(.login-page) .contract-doc-wrap {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 4px;
    padding: 28px 32px;
    font-size: 12px;
    line-height: 1.55;
    color: #1f2937;
    font-family: "Khmer OS", "Noto Sans Khmer", "Noto Sans SC", "Times New Roman", serif;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
body:not(.login-page) .contract-doc-wrap p { margin: 0 0 6px; }
body:not(.login-page) .contract-doc-wrap table {
    border-collapse: collapse;
    margin: 6px 0;
    width: 100%;
}
body:not(.login-page) .contract-doc-wrap img { max-width: 100%; height: auto; }

/* View-mode (read-only) variant — same paper, no edit affordance. */
body:not(.login-page) .contract-doc-wrap--readonly {
    cursor: default;
}

/* Print stylesheet: hide everything except the contract content.
   SCOPED to pages that actually have a .contract-doc-wrap — otherwise this
   would blank out every other print view (invoices, receipts, etc.). */
@media print {
    body:has(.contract-doc-wrap) * { visibility: hidden; }
    body:has(.contract-doc-wrap) .contract-doc-wrap,
    body:has(.contract-doc-wrap) .contract-doc-wrap * { visibility: visible; }
    body:has(.contract-doc-wrap) .contract-doc-wrap {
        position: absolute;
        inset: 0;
        padding: 14mm 16mm;
        border: 0;
        box-shadow: none;
        background: #ffffff;
    }
    /* Hide every action / nav / sidebar / banner / toolbar — only on contract pages. */
    body:has(.contract-doc-wrap) .topbar,
    body:has(.contract-doc-wrap) .left-sidenav,
    body:has(.contract-doc-wrap) .sidebar,
    body:has(.contract-doc-wrap) .footer,
    body:has(.contract-doc-wrap) .breadcrumb,
    body:has(.contract-doc-wrap) .card-header,
    body:has(.contract-doc-wrap) .rental-success-banner,
    body:has(.contract-doc-wrap) .rental-preview-toolbar,
    body:has(.contract-doc-wrap) .btn,
    body:has(.contract-doc-wrap) .button-menu-mobile { display: none !important; }
}
body:not(.login-page) .contract-doc-wrap .contract-filled {
    padding: 0 2px;
    background: #fef9c3;
    border-radius: 2px;
    font-weight: 600;
    color: #422006;
}
body:not(.login-page) .contract-doc-wrap .contract-blank {
    padding: 0 6px;
    color: #94a3b8;
    border-bottom: 1px dashed #cbd5e1;
    font-style: italic;
}

/* Live token — highlighted yellow on the live preview so the user spots which
   parts get replaced vs. boilerplate. Empty fields get a dashed grey underline. */
body:not(.login-page) .contract-doc-wrap .tk {
    padding: 0 2px;
    background: #fef9c3;
    border-radius: 2px;
    font-weight: 600;
    color: #422006;
    transition: background-color 0.2s ease;
}
body:not(.login-page) .contract-doc-wrap .tk.is-empty {
    background: transparent;
    color: #94a3b8;
    border-bottom: 1px dashed #cbd5e1;
    font-weight: 400;
    font-style: italic;
}

/* Mobile: stack the preview below the form, no sticky. */
@media (max-width: 1199.98px) {
    body:not(.login-page) .rental-preview-panel {
        position: static;
        max-height: none;
        margin-top: 16px;
    }
    body:not(.login-page) .rental-preview-body {
        max-height: 60vh;
    }
}

/* Inline per-field error message under the input. */
body:not(.login-page) .rental-field-error {
    display: block;
    margin-top: 4px;
    color: var(--u-brand);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
}

/* Success banner shown on the View / Details page right after a save. */
body:not(.login-page) .rental-success-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    border-radius: 6px;
    color: #064e3b;
    font-size: 13px;
    font-weight: 600;
    animation: rentalSuccessFadeIn 0.25s ease;
}
body:not(.login-page) .rental-success-banner .mdi {
    color: #10b981;
    font-size: 22px;
    line-height: 1;
}
body:not(.login-page) .rental-success-banner__close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #064e3b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
body:not(.login-page) .rental-success-banner__close:hover { opacity: 1; }
@keyframes rentalSuccessFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Inline validation UX — invalid input gets a red ring + soft flash. */
body:not(.login-page) .form-control.is-invalid,
body:not(.login-page) input.is-invalid,
body:not(.login-page) select.is-invalid,
body:not(.login-page) textarea.is-invalid {
    border-color: var(--u-brand) !important;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.12) !important;
}
body:not(.login-page) .rental-field-flash {
    animation: rentalFieldFlash 1.4s ease;
}
@keyframes rentalFieldFlash {
    0%   { box-shadow: 0 0 0 3px rgba(211, 17, 69, 0.55); background-color: #fdf2f4; }
    100% { box-shadow: 0 0 0 0   rgba(211, 17, 69, 0);    background-color: transparent; }
}

/* Top-of-form summary banner listing all invalid fields as clickable chips. */
body:not(.login-page) .rental-error-banner {
    margin-bottom: 14px;
    padding: 12px 16px;
    background: #fff5f5;
    border: 1px solid #f8c4cc;
    border-left: 4px solid var(--u-brand);
    border-radius: 6px;
    color: #66131f;
    font-size: 13px;
}
body:not(.login-page) .rental-error-banner__title {
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body:not(.login-page) .rental-error-banner__title .mdi {
    color: var(--u-brand);
    font-size: 18px;
}
body:not(.login-page) .rental-error-banner__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body:not(.login-page) .rental-error-banner__chip {
    display: inline-block;
    padding: 4px 10px;
    background: #ffffff;
    color: var(--u-brand);
    border: 1px solid #f8c4cc;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
body:not(.login-page) .rental-error-banner__chip:hover {
    background: var(--u-brand);
    color: #ffffff;
    text-decoration: none;
}

/* Customer-parity drag-drop area for Tenant Photo (the production Customer form uses
   a Vue <drag-drop-image-uploader>; for the rental tenant form we render the same
   visual affordance with a plain <label>+<input type=file>, styled here). */
body:not(.login-page) .rental-photo-drop {
    position: relative; /* positioning context for the full-cover file input overlay */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 90px;
    width: 100%;
    border: 1.5px dashed var(--u-border-2);
    border-radius: var(--u-radius-sm, 4px);
    background: #f8fafc;
    color: var(--u-muted);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    padding: 14px 18px;
    margin: 0;
}
body:not(.login-page) .rental-photo-drop:hover {
    border-color: var(--u-brand);
    background: #fdf2f4;
    color: var(--u-text-2);
}
body:not(.login-page) .rental-photo-drop__icon {
    font-size: 30px;
    color: #94a3b8;
    margin: 0;
    line-height: 1;
    pointer-events: none; /* let clicks fall through to the file input overlay */
}
body:not(.login-page) .rental-photo-drop__hint {
    font-size: 14px;
    color: var(--u-muted);
    pointer-events: none; /* let clicks fall through to the file input overlay */
}
/* The file input OVERLAYS the whole drop zone so a real mouse click lands ON the input.
   The old 1x1 + pointer-events:none input relied on <label for> forwarding, which Chrome
   silently drops on real mouse clicks (file dialog never opens). */
body:not(.login-page) .rental-photo-drop__input {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* "Add Document" styling variant — brand red plus icon + label (Customer form parity). */
body:not(.login-page) .rental-photo-drop--add {
    border-color: var(--u-brand) !important;
    background: #fdf2f4 !important;
    color: var(--u-brand) !important;
}
body:not(.login-page) .rental-photo-drop--add .rental-photo-drop__icon,
body:not(.login-page) .rental-photo-drop--add .rental-photo-drop__hint {
    color: var(--u-brand) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Rental Booking — production-style 2-column section titles + divider. */
body:not(.login-page) .rental-booking-col-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--u-brand);
    border-left: 3px solid var(--u-brand);
    padding-left: 10px;
    margin: 0 0 16px;
}
body:not(.login-page) .rental-booking-divider {
    border: 0;
    border-top: 1px solid var(--u-border-2);
    margin: 4px 0 16px;
}
/* Existing-document chips that render under a multi-file upload area. */
body:not(.login-page) .rental-doc-chips {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body:not(.login-page) .rental-doc-chips__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 12px;
}
body:not(.login-page) .rental-doc-chips__item a {
    color: var(--u-text-2);
    text-decoration: none;
}
body:not(.login-page) .rental-doc-chips__item a:hover { text-decoration: underline; }

/* Restyle the legacy <choose-select> Vue component's modal (vue-js-modal, class
   .v--modal) so its picker dialog matches the rental-picker table design — sticky
   header, brand red gradient title bar, rounded select buttons. Applied to every
   page that uses choose-select (Property Public Service, Sale Contract, Booking,
   Stage Payment, etc.). */
body .v--modal-overlay .v--modal {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22) !important;
    border: 0 !important;
}
body .v--modal-overlay .v--modal .modal-header {
    background: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%) !important;
    color: #ffffff !important;
    padding: 16px 22px !important;
    border-bottom: 0 !important;
}
body .v--modal-overlay .v--modal .modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}
body .v--modal-overlay .v--modal .modal-body {
    padding: 14px 22px 22px;
    background: #ffffff;
}
/* Search bar input + buttons inside choose-select modal — clean modern row:
   one cohesive 42px pill (search icon · input · red Search · ghost Clear). */
body .v--modal-overlay .v--modal .input-group {
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    overflow: hidden;
}
body .v--modal-overlay .v--modal .input-group .form-control {
    height: 42px;
    border-radius: 0 !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #ffffff;
    font-size: 14px;
}
body .v--modal-overlay .v--modal .input-group .form-control:focus {
    box-shadow: none !important;
    border-color: #E2E8F0 !important;
}
body .v--modal-overlay .v--modal .input-group-text {
    background: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-right: 0 !important;
    color: #94A3B8 !important;
    border-radius: 9px 0 0 9px !important;
    padding: 0 14px !important;
}
body .v--modal-overlay .v--modal .input-group-text::after { content: none !important; }
body .v--modal-overlay .v--modal .input-group-text .fa {
    color: #94A3B8 !important;
}
body .v--modal-overlay .v--modal .input-group .btn {
    height: 42px;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 13px;
    padding: 0 20px !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
}
body .v--modal-overlay .v--modal .input-group .btn-primary {
    background: #a71c20 !important;
    color: #ffffff !important;
}
body .v--modal-overlay .v--modal .input-group .btn-primary:hover {
    background: #8c171b !important;
}
/* Clear → light "ghost" button (was a heavy slate block that clashed with the red) */
body .v--modal-overlay .v--modal .input-group .btn-danger {
    background: #ffffff !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 0 !important;
    border-radius: 0 9px 9px 0 !important;
}
body .v--modal-overlay .v--modal .input-group .btn-danger:hover {
    background: #F1F5F9 !important;
    color: #334155 !important;
}
/* Table inside the choose-select modal */
body .v--modal-overlay .v--modal .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F8FAFC !important;
    color: #475569 !important;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 14px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top: 0 !important;
}
body .v--modal-overlay .v--modal .table tbody td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    color: #0F172A !important;
    font-size: 13px;
    vertical-align: middle;
}
body .v--modal-overlay .v--modal .table tbody tr {
    transition: background-color .12s ease;
    cursor: pointer;
}
body .v--modal-overlay .v--modal .table tbody tr:hover {
    background: #FDF2F4 !important;
}
/* Row "Choose" button → rental-picker__select-btn look */
body .v--modal-overlay .v--modal .table tbody .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px !important;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff !important;
    background-color: #a71c20 !important;
    border: 1px solid #a71c20 !important;
    border-radius: 6px !important;
}
body .v--modal-overlay .v--modal .table tbody .btn-primary:hover {
    background-color: #8c171b !important;
    border-color: #8c171b !important;
}

/* Restyle the legacy <choose-select> Vue component (Property Public Service,
   Sale Contract, etc.) so its input-group reads as the brand red "Pick" trigger
   without changing the underlying Vue logic. */
body:not(.login-page) .custom-multi-select .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
body:not(.login-page) .custom-multi-select .input-group .form-control {
    flex: 1 1 auto;
    height: 38px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    background-color: #F8FAFC;
    cursor: pointer;
}
body:not(.login-page) .custom-multi-select .input-group-text {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 38px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff !important;
    background-color: #a71c20 !important;
    border: 1px solid #a71c20 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
body:not(.login-page) .custom-multi-select .input-group-text:hover {
    background-color: #8c171b !important;
    border-color: #8c171b !important;
}
body:not(.login-page) .custom-multi-select .input-group-text .fa,
body:not(.login-page) .custom-multi-select .input-group-text .fas {
    color: #ffffff !important;
    font-size: 14px;
    margin: 0;
}
/* Append the action word after the icon so the affordance reads like the rental
   form Pick button. Khmer ("ជ្រើសរើស" = choose/select) since the site is Khmer-only.
   Uses CSS-generated content (no markup change needed). */
body:not(.login-page) .custom-multi-select .input-group-text::after {
    content: "ជ្រើសរើស";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ──────────────────────────────────────────────────────────────
   Rental Picker Modal — table-style picker dialog. Hoisted out of
   form.blade.php's inline <style> block so legacy pages (Public
   Service / Sale Contract) can reuse the same class names without
   needing the rental form's local stylesheet.
   ────────────────────────────────────────────────────────────── */
/* When a Bootstrap modal opens it removes the body scrollbar and adds a
   compensating padding-right to <body>; on a classic-scrollbar browser that
   shows as a blank white strip on the right. Zero only that padding so no
   gutter appears — keep Bootstrap's scroll-lock (do NOT re-enable body
   scrolling, which would let the page scroll behind the modal). */
body:not(.login-page).modal-open { padding-right: 0 !important; }
body:not(.login-page) .rental-picker-modal .modal-dialog { max-width: 1100px; }
body:not(.login-page) .rental-picker {
    border-radius: 12px;
    overflow: hidden;
    border: 0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
body:not(.login-page) .rental-picker__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 16px;
    background: linear-gradient(135deg, var(--u-brand) 0%, var(--u-brand-2) 100%);
    color: #ffffff;
}
body:not(.login-page) .rental-picker__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
}
body:not(.login-page) .rental-picker__title .mdi { font-size: 22px; }
body:not(.login-page) .rental-picker__close {
    background: rgba(255,255,255,.15);
    color: #ffffff;
    border: 0;
    width: 32px; height: 32px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
body:not(.login-page) .rental-picker__close:hover { background: rgba(255,255,255,.28); }
body:not(.login-page) .rental-picker__searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #FFFFFF;
    border-bottom: 1px solid #EEF1F4;
}
body:not(.login-page) .rental-picker__search {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
body:not(.login-page) .rental-picker__search-icon {
    position: absolute;
    left: 14px;
    font-size: 18px;
    color: #94A3B8;
    pointer-events: none;
}
body:not(.login-page) .rental-picker__search-input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 40px;
    font-size: 14px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background-color: #F8FAFC;
}
body:not(.login-page) .rental-picker__search-input:focus {
    outline: 0;
    border-color: #a71c20;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(211,17,69,.12);
}
body:not(.login-page) .rental-picker__search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background-color: #a71c20;
    border: 1px solid #a71c20;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
body:not(.login-page) .rental-picker__search-btn:hover { background-color: #8c171b; border-color: #8c171b; }
body:not(.login-page) .rental-picker__count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #E2E8F0;
    padding: 4px 10px;
    border-radius: 999px;
    min-width: 32px;
    text-align: center;
}
body:not(.login-page) .rental-picker__body { max-height: 56vh; overflow-y: auto; background: #FFFFFF; }
body:not(.login-page) .rental-picker__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}
body:not(.login-page) .rental-picker__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F8FAFC;
    color: #475569;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 14px;
    border-bottom: 1px solid #E2E8F0;
    text-align: left;
}
body:not(.login-page) .rental-picker__table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    color: #0F172A;
    vertical-align: middle;
}
body:not(.login-page) .rental-picker__row { transition: background-color .12s ease; cursor: pointer; }
body:not(.login-page) .rental-picker__row:hover,
body:not(.login-page) .rental-picker__row.is-active { background: #FDF2F4; outline: none; }
body:not(.login-page) .rental-picker__cell-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #a71c20;
}
body:not(.login-page) .rental-picker__action-col { width: 1%; white-space: nowrap; text-align: center; }
body:not(.login-page) .rental-picker__select-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: #a71c20;
    border: 1px solid #a71c20;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
body:not(.login-page) .rental-picker__select-btn:hover { background-color: #8c171b; border-color: #8c171b; }
body:not(.login-page) .rental-picker__select-btn .mdi { font-size: 14px; }
body:not(.login-page) .rental-picker__empty {
    text-align: center;
    padding: 48px 22px;
    color: #94A3B8;
}
body:not(.login-page) .rental-picker__empty .mdi { font-size: 36px; display: block; margin-bottom: 8px; }
body:not(.login-page) .rental-picker__empty p { margin: 0; font-size: 13px; }

/* Property/Customer picker — search input + red Pick button (used on rental forms
   and the legacy Public Service / Sale Contract forms). Pulled out of the rental
   form.blade.php inline <style> block so non-rental pages get it too. */
body:not(.login-page) .rental-pick-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}
body:not(.login-page) .rental-pick-group .form-control {
    flex: 1 1 auto;
    height: 38px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    background-color: #F8FAFC;
    cursor: pointer;
}
body:not(.login-page) .rental-pick-group .form-control[disabled] {
    background-color: #F1F3F5;
    cursor: not-allowed;
}
body:not(.login-page) .rental-pick-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 38px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff !important;
    background-color: #a71c20 !important;
    border: 1px solid #a71c20 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
body:not(.login-page) .rental-pick-btn:hover {
    background-color: #8c171b !important;
    border-color: #8c171b !important;
}
body:not(.login-page) .rental-pick-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(211,17,69,.18);
}
body:not(.login-page) .rental-pick-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
body:not(.login-page) .rental-pick-btn .mdi {
    font-size: 16px;
    line-height: 1;
}

/* Multi-checkbox group (lease contract: languages, utilities, prohibited uses,
   force majeure events, notice channels). Wrap in 2-column grid for compactness. */
body:not(.login-page) .rental-multi-checkbox {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 14px;
    padding: 8px 12px;
    border: 1px solid var(--u-border-2);
    border-radius: var(--u-radius-sm, 4px);
    background: #f8fafc;
}
body:not(.login-page) .rental-multi-checkbox__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--u-text-2);
    margin: 0;
    cursor: pointer;
}
body:not(.login-page) .rental-multi-checkbox__item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--u-brand);
}

/* Compact the <drag-drop-image-uploader> Vue component used on Customer create/edit,
   so the empty-state Customer Photo drop area matches the Add New Tenants compact bar
   instead of being 150px tall. When an image is selected, the .img-fluid preview
   still scales to its natural size inside. */
body:not(.login-page) .image-uploader {
    min-height: 90px !important;
    padding: 14px 18px !important;
    border-radius: 4px !important;
    border-width: 1.5px !important;
    border-color: var(--u-border-2) !important;
    background: #f8fafc !important;
}
body:not(.login-page) .image-uploader > div:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
}
/* Inline the picture icon + placeholder hint (was stacked via <br>). */
body:not(.login-page) .image-uploader .fa-picture-o {
    font-size: 30px !important;
    margin: 0 !important;
}
body:not(.login-page) .image-uploader br { display: none; }
body:not(.login-page) .image-uploader span {
    font-size: 14px;
    color: var(--u-faint);
    font-weight: 400;
}
/* Standardize <input>/<textarea>/<select> placeholder color across the admin —
   ensures the Customer Photo / Tenant Photo hint reads the same grey as
   placeholders in adjacent text fields. */
body:not(.login-page) .form-control::placeholder,
body:not(.login-page) .form-control::-webkit-input-placeholder,
body:not(.login-page) input::placeholder,
body:not(.login-page) textarea::placeholder,
body:not(.login-page) select.form-control:invalid {
    color: var(--u-faint) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}
body:not(.login-page) .rental-photo-drop__hint {
    color: var(--u-faint) !important;
    font-weight: 400;
}

/* Customer / rental form: sub-section h5 inside a fieldset (e.g. "Address" above
   the single-address widget). Render identically across Tenant and Customer so the
   "Address" heading reads the same on both pages — same size, weight, brand bar. */
body:not(.login-page) .card-body fieldset .col-md-12 > h5,
body:not(.login-page) .card-body .col-md-12 > h5 {
    position: relative;
    margin: 18px 0 12px !important;
    padding: 2px 0 2px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--u-text) !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
body:not(.login-page) .card-body fieldset .col-md-12 > h5::before,
body:not(.login-page) .card-body .col-md-12 > h5::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--u-brand), var(--u-brand-2));
}

/* `.header-title` in `.card-header` was inheriting Bootstrap's h4 size (1.5rem).
   The base `.header-title` rule above sets 14px — strengthen the cascade so
   `card-header h4.header-title` always wins, especially on legacy sale-contract /
   commission / property pages that don't go through the rental-customer-card path. */
body:not(.login-page) .card > .card-header h4.header-title,
body:not(.login-page) .card-header h4.header-title,
body:not(.login-page) .card-header.have-border h4.header-title,
body:not(.login-page) .portlet > .card-header h4.header-title,
body:not(.login-page) h4.header-title,
body:not(.login-page) .portlet-title,
body:not(.login-page) .portlet-title h4,
body:not(.login-page) .portlet-title .caption {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    color: var(--u-text) !important;
}
/* Page title (top of card / breadcrumb area) — 18px. */
body:not(.login-page) .page-title,
body:not(.login-page) h3.page-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.1px;
    color: var(--u-text) !important;
}
/* Any stray <h3> directly inside a card-body shouldn't be larger than a page title. */
body:not(.login-page) .card-body > h3,
body:not(.login-page) .card-body > h4 {
    font-size: 14px !important;
    font-weight: 700;
    margin: 0 0 10px !important;
}

/* ---------- Tighten page-title → first section-header gap ----------
   Production renders this gap at ~10px; UAT was showing 40-60px because the
   `:first-child` override didn't match through Vue's `<form-submit-confirmation>`
   wrapper which renders as `<form>` with possible interpolated nodes.
   Catch every first-section-header path with one robust block. */
body:not(.login-page) .card > .card-header { padding-bottom: 0 !important; }
body:not(.login-page) .card > .card-header + .card-body,
body:not(.login-page) .card > .card-header ~ .card-body { padding-top: 6px !important; }

body:not(.login-page) .card-body .form-section-title:first-child,
body:not(.login-page) .card-body > form .form-section-title:first-of-type,
body:not(.login-page) .card-body > form-submit-confirmation .form-section-title:first-of-type,
body:not(.login-page) .card-body fieldset:first-of-type > legend,
body:not(.login-page) .card-body > form fieldset:first-of-type > legend,
body:not(.login-page) .card-body > form-submit-confirmation fieldset:first-of-type > legend {
    margin-top: 0 !important;
}

/* Subsequent section titles in the same form: tighten from 14px → 10px */
body:not(.login-page) .form-section-title { margin-top: 10px !important; }
body:not(.login-page) fieldset > legend { margin-top: 10px !important; }

/* ==========================================================================
   Brand polish pass — luxury real-estate (red + gold).
   CSS-only. Strategic gold accents (used sparingly), tightened typography
   hierarchy, smoother component interactions.
   ========================================================================== */

/* ---------- Typography hierarchy (3-tier, enforced) ---------- */
/* Page title — page-level h1 equivalent. 22px, brand-red bottom accent. */
body:not(.login-page) h3.page-title,
body:not(.login-page) .page-content-wrapper > h3:first-child {
    font-size: var(--u-fs-2xl) !important;
    font-weight: 700;
    color: var(--u-text);
    letter-spacing: -0.2px;
    margin: 0 0 var(--u-space-4) 0;
    padding-bottom: var(--u-space-3);
    border-bottom: 1px solid var(--u-border);
    position: relative;
}
body:not(.login-page) h3.page-title::after,
body:not(.login-page) .page-content-wrapper > h3:first-child::after {
    content: none !important;
    display: none !important;
}

/* Section heading — uppercase tracked, 13px. The "PERMISSIONS" / "GENERAL INFORMATION" pattern. */
body:not(.login-page) .form-section-title,
body:not(.login-page) fieldset > legend {
    font-size: var(--u-fs-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--u-text-2);
    padding-left: var(--u-space-3);
    border-left: 0 !important;
    line-height: 1.4;
}

/* Card title — sentence case, 14-15px. */
body:not(.login-page) .card-header h4.header-title,
body:not(.login-page) .have-border h4.header-title,
body:not(.login-page) .card-header .header-title {
    font-size: var(--u-fs-md) !important;
    font-weight: 600;
    color: var(--u-text);
    letter-spacing: 0;
}

/* Body / Caption text consistency. */
body:not(.login-page) .text-muted { font-size: var(--u-fs-sm); }
body:not(.login-page) small,
body:not(.login-page) .small { font-size: var(--u-fs-sm); }

/* ---------- Strategic gold accents ---------- */

/* Active sidebar gold left rail removed per user request. */
body:not(.login-page) .left-sidenav .side-menu li.active > a,
body:not(.login-page) .left-sidenav .menu-item.active > a,
body:not(.login-page) #sidebar-menu li.active > a {
    box-shadow: none !important;
}

/* Primary save button — brand-red soft ring on hover (gold removed per user request). */
body:not(.login-page) .btn-success:hover,
body:not(.login-page) .btn-primary:hover,
body:not(.login-page) .btn-save-cancel.btn-success:hover {
    box-shadow: 0 0 0 3px rgba(167,28,32,0.18);
    transform: translateY(-1px);
    transition: transform var(--u-transition), box-shadow var(--u-transition);
}

/* "Add New" CTA — deepened red on hover (gold tone removed per user request). */
body:not(.login-page) .btn-add-new:hover,
body:not(.login-page) a.btn-add-new:hover {
    background: var(--u-brand-deep) !important;
    border-color: var(--u-brand-deep) !important;
    transform: translateY(-1px);
}

/* Badge "mandatory" — brand-red soft pill (gold removed per user request). */
body:not(.login-page) .badge.badge-default.border-radius {
    background: var(--u-brand-soft) !important;
    color: var(--u-brand) !important;
    font-weight: 600;
}

/* ---------- Component polish ---------- */

/* Cards — gentle hover lift. Only for list/table cards (not form cards). */
body:not(.login-page) .card.m-b-20:not(:has(form)):hover {
    box-shadow: var(--u-shadow-2);
    transition: box-shadow var(--u-transition);
}

/* Table row hover — brand-soft pink, not stark grey. */
body:not(.login-page) .table-hover tbody tr:hover,
body:not(.login-page) .rental-table tbody tr:hover {
    background-color: var(--u-brand-soft) !important;
    transition: background-color var(--u-transition);
}

/* Form inputs — consistent focus ring (brand red, subtle). */
body:not(.login-page) .form-control:focus,
body:not(.login-page) select:focus,
body:not(.login-page) textarea:focus {
    border-color: var(--u-brand) !important;
    box-shadow: var(--u-shadow-brand) !important;
    outline: 0;
    transition: border-color var(--u-transition), box-shadow var(--u-transition);
}

/* Buttons — global smoother transition + active-state press. */
body:not(.login-page) .btn {
    transition: background-color var(--u-transition),
                border-color var(--u-transition),
                color var(--u-transition),
                transform 80ms ease,
                box-shadow var(--u-transition);
}
body:not(.login-page) .btn:active { transform: translateY(0); }

/* Modal backdrop — slight blur for premium feel. */
body:not(.login-page) .modal-backdrop.show {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0.55 !important;
}

/* Modal content — bigger radius matches our token scale. */
body:not(.login-page) .modal-content {
    border-radius: var(--u-radius-lg);
    border: 1px solid var(--u-border-2);
    box-shadow: var(--u-shadow-3);
}

/* Breadcrumb — lighter, smaller, gold separator dot for brand consistency. */
body:not(.login-page) .breadcrumb {
    background: transparent;
    padding: 0 0 var(--u-space-3) 0;
    font-size: var(--u-fs-sm);
}
body:not(.login-page) .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--u-text-3, #6b7280);
    font-weight: 600;
    padding: 0 var(--u-space-2);
}

/* Pagination + filter chips — solid brand red active state (gold ring removed). */
body:not(.login-page) .page-item.active .page-link {
    background: var(--u-brand) !important;
    border-color: var(--u-brand) !important;
    box-shadow: none !important;
}

/* ============================================================================
   Permission matrix — FINAL coherent override (supersedes the earlier
   role-permission-matrix.css `display:table`/scrolling-tbody hack AND the
   ui-refresh `table-row-group`/`width:calc()` counter-hacks that left the
   header columns 1989px-wide and misaligned, pushing the action labels
   (View/Add/Edit/…) off-screen to the right). Render it as ONE normal table
   in a single scroll box, with a sticky header + sticky first column.
   ========================================================================= */
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback {
    display: block !important;
    overflow: auto !important;
    max-height: calc(100vh - 260px) !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback table,
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback table {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}
/* Reset rows/groups to NORMAL table semantics so header & body share columns */
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback thead {
    display: table-header-group !important;
    width: auto !important;
}
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback tbody {
    display: table-row-group !important;
    width: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback thead tr,
body:not(.login-page) .fixed-solution.permission-matrix-scroll-fallback tbody tr {
    display: table-row !important;
    width: auto !important;
}
/* Sticky action-column header — now correctly aligned with the body columns */
body:not(.login-page) .permission-matrix-scroll-fallback thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #F1F5F9 !important;
    color: #1F2937 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    text-transform: none !important;   /* Khmer has no case; uppercase only cramped it */
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-bottom: 2px solid #CBD5E1 !important;
}
/* Sticky module-name column (header + body) */
body:not(.login-page) .permission-matrix-scroll-fallback thead th:first-child,
body:not(.login-page) .permission-matrix-scroll-fallback tbody td:first-child {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0 !important;
    background: #ffffff !important;
    z-index: 2 !important;
    text-align: left !important;
}
body:not(.login-page) .permission-matrix-scroll-fallback thead th:first-child {
    background: #F1F5F9 !important;
    z-index: 4 !important;
}

/* ============================================================================
   Picker modal (vue-js-modal / <choose-select>) — scroll containment
   Fix: when a Pick modal (Property Code, Customer, etc.) is open, scrolling
   moved the PAGE behind the modal instead of the modal's list. Lock the
   background and scroll INSIDE the modal. The modal sizes to its content,
   caps at the viewport, and scrolls internally; its header stays pinned so
   the close (×) button is always reachable. Applies to every vue-js-modal
   picker app-wide. UI-only (no markup/JS change).
   ========================================================================= */
body:has(.v--modal-overlay) { overflow: hidden !important; }
/* vue-js-modal forces overflow:hidden on .v--modal-box, so scroll the .modal-body
   instead: lay the box out as header (fixed) + body (scrolls). The list scrolls
   while the red header with the close (×) stays put. */
.v--modal-overlay .v--modal-box {
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.v--modal-overlay .v--modal-box .modal-header {
    flex: 0 0 auto !important;
}
.v--modal-overlay .v--modal-box .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   Phase 1 — Remove English: the app is Khmer-only (config app.locale = 'km').
   Hide the EN language switch in the topbar so no one can switch into the
   (incomplete/broken) English locale. UI-only — default locale is already km,
   so nothing forces English; this just removes the toggle.
   ========================================================================= */
body .topbar-lang a[href$="/locale/en"] { display: none !important; }

/* ============================================================================
   Picker modal — search row + Choose button layout fixes.
   The <choose-select> markup uses Bootstrap-3 `col-md-offset-6` (BS4 ignores it),
   so the search bar sat half-width and floating; and the Choose button text
   wrapped down to ~34px. Make the search full-width and the Choose button a
   clean, centered, no-wrap pill. Applies to every Pick modal app-wide.
   ========================================================================= */
/* Full-width search row */
body .v--modal-overlay .v--modal .modal-body > .row:first-child > [class*="col-md"],
body .v--modal-overlay .v--modal .modal-body .col-md-offset-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}
/* Choose column: centered, never wrapping */
body .v--modal-overlay .v--modal .table thead th:last-child,
body .v--modal-overlay .v--modal .table tbody td:last-child {
    text-align: center !important;
    white-space: nowrap !important;
    width: 132px !important;          /* fixed, roomy column so the button sits centered under its header */
}
body .v--modal-overlay .v--modal .table tbody td:last-child .btn-primary {
    white-space: nowrap !important;
    width: auto !important;
    min-width: 92px !important;
    justify-content: center !important;
    margin: 0 auto !important;        /* center the button within the column */
}

/* ============================================================================
   Picker modal — search bar FINAL restyle (supersedes earlier search rules).
   Was: a heavy solid-red magnifier block on the left + a full-width stretched
   bar with buttons stranded far right. Now: a clean, compact ~460px rounded
   search pill — subtle in-field magnifier, seamless borderless input,
   brand-red Search, light ghost Clear. Applies to every Pick modal.
   ========================================================================= */
body .v--modal-overlay .v--modal .modal-body .input-group {
    max-width: 460px !important;
    margin: 2px 0 18px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 11px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    flex-wrap: nowrap !important;
}
/* in-field magnifier (kill the red block) */
body .v--modal-overlay .v--modal .modal-body .input-group .input-group-text {
    background: #ffffff !important;
    border: 0 !important;
    color: #9aa3b2 !important;
    border-radius: 0 !important;
    padding: 0 8px 0 14px !important;
}
body .v--modal-overlay .v--modal .modal-body .input-group .input-group-text .fa { color: #9aa3b2 !important; }
/* seamless borderless input */
body .v--modal-overlay .v--modal .modal-body .input-group .form-control {
    border: 0 !important;
    height: 44px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 14px !important;
    border-radius: 0 !important;
}
/* attached buttons */
body .v--modal-overlay .v--modal .modal-body .input-group .btn {
    height: 44px !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 18px !important;
    box-shadow: none !important;
}
body .v--modal-overlay .v--modal .modal-body .input-group .btn-primary { background: #a71c20 !important; color: #fff !important; }
body .v--modal-overlay .v--modal .modal-body .input-group .btn-primary:hover { background: #8c171b !important; }
body .v--modal-overlay .v--modal .modal-body .input-group .btn-danger {
    background: #ffffff !important;
    color: #6b7280 !important;
    border-left: 1px solid #EEF1F5 !important;
}
body .v--modal-overlay .v--modal .modal-body .input-group .btn-danger:hover { background: #f6f7f9 !important; color: #374151 !important; }

/* ============================================================================
   Picker modal — align the search row's left edge with the table below it.
   The <choose-select> table column has an inline `padding: 20px`, while the
   search column uses Bootstrap's default 15px, so the search pill sat a few px
   left of the table. Match the search column's horizontal padding to 20px so
   the search pill and the table line up. (Search input-group has margin-left:0.)
   ========================================================================= */
body .v--modal-overlay .v--modal .modal-body > .row:first-child > [class*="col-md"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
}