/*
 * remitza v4 theme: forms in both apps (Part 2 spec section 7, "form A": label on the left and right-aligned, CSS only).
 * Field rows are div.form-group.row.form-field (Form/Field.php:221), so control rules stay inside .form-field and grid
 * filters, Show panels and login pages keep their own. Never `display` on .form-group, .form-field, .row or .card (5.1).
 */

/* ---------- 7.1 Layout: one label column (180px) and one field column (720px at most) for every form ---------- */
body.rz-theme form .form-group.row:not(.show-field) > .control-label:not(.hidden):not(.col-md-0) {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}
body.rz-theme .form-field > .control-label { color: var(--foreground); } /* a default, kept at (0,3,1) so 7.9's invalid label (0,4,1) wins in light mode; never put colour on the (0,7,2) rule above */
body.rz-theme .form-field > .control-label.asterisk::before { content: none; } /* Dcat prints the mark in front (dcat-app-primary.css:1319-1323) */
body.rz-theme .form-field > .control-label.asterisk::after { content: "*"; margin-left: 2px; color: var(--err-mark); font-weight: 600; }
body.rz-theme .form-field { margin-bottom: 16px; } /* Vuexy's .form-group margin; .mb-0 still wins */
body.rz-theme table.table.table-has-many > tbody > tr > td > .form-field { margin-bottom: 0; }

/* ---------- 7.2 Form card: head, body and foot (the card itself is Part 1's .card / .box rule) ---------- */
body.rz-theme form .box-header.with-border {
    align-items: center;
    margin-bottom: 0 !important; /* .mb-1 is !important; BlockForm also writes an inline margin-bottom */
    padding: 14px 20px !important; /* form/container.blade.php:2 writes an inline padding */
    border-bottom: 1px solid var(--border);
}
body.rz-theme form .box-header .box-title {
    font-size: 17px;
    line-height: 32px !important; /* form/container.blade.php:3 writes an inline line-height */
}
body.rz-theme form .card > .box-body { padding: 20px; }
body.rz-theme form .box > .box-body.fields-group {
    padding: 16px 20px 4px !important; /* widgets/form.blade.php:2 writes an inline padding; .pl-0, .pr-0 and .pt-1 are !important */
}
body.rz-theme form :is(.card, .box) > .box-footer { padding: 14px 20px; border-top: 1px solid var(--border); background: transparent; }
body.rz-theme form :is(.card, .box) > .box-footer.row { margin: 0; }
body.rz-theme form :is(.box-header, .box-footer) .btn-group { box-shadow: none; }
body.rz-theme form .box-footer .text-80.text-bold {
    color: var(--text-2) !important; /* the "continue editing" text; .text-80 is !important (dcat-app-primary.css:300-302) */
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 768px) {
    body.rz-theme form .form-group.row:not(.show-field) > .control-label:not(.hidden):not(.col-md-0) {
        flex: 0 0 min(var(--rz-form-label-w), 30%);
        max-width: min(var(--rz-form-label-w), 30%);
        padding: 8px 20px 0 0;
        text-align: right;
    }
    body.rz-theme form .form-group.row:not(.show-field) > .control-label:not(.hidden):not(.col-md-0) + div {
        flex: 1 1 0%;
        min-width: 0;
        max-width: var(--rz-form-field-max);
        padding: 0;
    }
    body.rz-theme form .form-group.row > .control-label.pt-0 {
        padding-top: 8px !important; /* form/checkbox.blade.php:3 puts .pt-0 (!important) on the label */
    }
    body.rz-theme form .box-footer > [class*="col-md-"]:first-child { flex: 0 0 min(var(--rz-form-label-w), 30%); max-width: min(var(--rz-form-label-w), 30%); padding: 0; }
    body.rz-theme form .box-footer > [class*="col-md-"]:first-child + [class*="col-md-"] { flex: 1 1 0%; max-width: var(--rz-form-field-max); padding: 0; }
}

@media (max-width: 767.98px) {
    body.rz-theme form .form-group.row:not(.show-field) > .control-label:not(.hidden):not(.col-md-0) { padding: 0 0 6px; text-align: left; }
    body.rz-theme form .form-group.row:not(.show-field) > .control-label:not(.hidden):not(.col-md-0) + div { padding: 0; }
    body.rz-theme form .card > .box-body { padding: 16px; }
    /* the widget forms' spacer column holds an  ; page forms hide theirs with an inline display: none */
    body.rz-theme form .box-footer > [class*="col-md-"]:first-child { flex: 0 0 0; max-width: 0; padding: 0; overflow: hidden; }
}

/* Shared main/outline button shape (spec 7.2; prototype .btn :118-119): 39px, radius 10px, 13px / 600, 16px icons. Spec 7.2 names
   elements.css; it lives here, in phase 2, scoped to form footers (page, BlockForm and dialog forms), the exchange wizard toolbar and
   Read Terms, so phase 1's row, toolbar and filter buttons and Part 1's login buttons keep their sizes. frontend-components.css refines
   the last two. No display !important: the exchange form hides these with .d-none and jQuery .hide(), which must keep winning. */
body.rz-theme form .box-footer .btn:not(.btn-sm), body.rz-theme.rz-app-frontend .sw-toolbar .btn, body.rz-theme.rz-app-frontend .btn.reload-terms {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 39px; border-radius: 10px;
    padding: 0 16px !important; /* Dcat's .btn padding is !important (dcat-app-primary.css:647-654) */
    box-shadow: none; font: 600 13px/1 var(--font-sans);
}
body.rz-theme form .box-footer .btn:not(.btn-sm) > i, body.rz-theme.rz-app-frontend .sw-toolbar .btn > i, body.rz-theme.rz-app-frontend .btn.reload-terms > i { font-size: 16px; }

/* Buttons: orange only for Submit (spec 2 item 14); Reset is the neutral outline */
body.rz-theme form .box-footer .btn.btn-white { border: 1px solid var(--border); background-color: var(--card); color: var(--text-2); }
body.rz-theme form .box-footer .btn.btn-white:hover {
    background-color: var(--hover);
    box-shadow: none !important; /* .btn-white:hover adds a shadow !important (dcat-app-primary.css:915-919) */
    color: var(--foreground) !important; /* dark.css .btn.btn-white:hover colour is !important (0,5,1) */
}

/* Small buttons: head tools (List, View, Edit, Delete), has-many New / Remove and the buttons in help text */
body.rz-theme form .box-header .btn.btn-sm,
body.rz-theme .box-header .btn-group.btn-mini > .btn.btn-sm,
body.rz-theme form [class*="has-many-"] .btn.btn-sm,
body.rz-theme .form-field .help-block .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px !important; /* Dcat's .btn and .btn-sm padding is !important (dcat-app-primary.css:647-654, 687-690) */
    border: 1px solid var(--border);
    border-radius: 9px;
    background-color: var(--card);
    box-shadow: none;
    color: var(--text-2);
    font: 600 12.5px/1 var(--font-sans);
}
body.rz-theme .form-field .help-block .btn {
    color: var(--text-2) !important; /* frontend.css:233-239 colours dark outline-success / outline-danger buttons !important */
}
body.rz-theme form .box-header .btn.btn-sm > i,
body.rz-theme .box-header .btn-group.btn-mini > .btn.btn-sm > i,
body.rz-theme form [class*="has-many-"] .btn.btn-sm > i,
body.rz-theme .form-field .help-block .btn > i { font-size: 14px; }
body.rz-theme form .box-header .btn.btn-sm:hover,
body.rz-theme .box-header .btn-group.btn-mini > .btn.btn-sm:hover,
body.rz-theme form [class*="has-many-"] .btn.btn-sm:hover,
body.rz-theme .form-field .help-block .btn:hover {
    background-color: var(--hover);
    box-shadow: none !important; /* .btn-white:hover adds a shadow !important (dcat-app-primary.css:915-919) */
    color: var(--foreground) !important; /* dark.css .btn.btn-white:hover and frontend.css's dark outline colours are !important */
}
body.rz-theme form .box-header .btn.btn-sm[data-action="delete"]:hover,
body.rz-theme .box-header .btn-group.btn-mini > .btn.btn-sm[data-action="delete"]:hover,
body.rz-theme form [class*="has-many-"] .btn.btn-sm[class*="remove"]:hover {
    background-color: var(--err-bg);
    color: var(--err) !important; /* the small-button hover colour above is !important */
}
body.rz-theme form .box-header .btn-group.pull-right,
body.rz-theme .box-header .btn-group.btn-mini {
    margin: 0 0 0 8px !important; /* Form/Tools.php and Show/Tools.php write an inline margin-right */
}

/* Field buttons (spec 7.2): Send OTP in an input-group suffix, and the upload buttons */
body.rz-theme .form-field .input-group > .input-group-append > .btn,
body.rz-theme .web-uploader .upload-btn.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--rz-field-h);
    padding: 0 14px !important; /* Dcat's .btn padding is !important (dcat-app-primary.css:647-654) */
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--card);
    box-shadow: var(--shadow-xs);
    color: var(--foreground);
    font: 600 13px/1 var(--font-sans);
    white-space: nowrap;
}
body.rz-theme .form-field .input-group > .input-group-append > .btn:hover,
body.rz-theme .form-field .input-group > .input-group-append > .btn:not(:disabled):not(.disabled):active,
body.rz-theme .web-uploader .upload-btn.btn:hover,
body.rz-theme .web-uploader .upload-btn.btn:not(:disabled):not(.disabled):active {
    border-color: var(--brand);
    background-color: var(--brand-soft);
    color: var(--foreground);
}
body.rz-theme .form-field .input-group > .input-group-append > .btn:disabled { opacity: .5; }

/* ---------- 7.3 Text inputs and textarea (v4 Input: 36px, 12px radius, 14px text, shadow-xs) ---------- */
body.rz-theme .form-field .form-control {
    height: var(--rz-field-h);
    min-height: var(--rz-field-h);
    padding: 7px 12px;
    border: 1px solid var(--input);
    border-color: var(--input) !important; /* Dcat's own dark .form-control border (dcat-app-primary.css:3604-3610) is !important */
    border-radius: 12px;
    background-color: var(--card);
    box-shadow: var(--shadow-xs);
    color: var(--foreground) !important; /* the same Dcat dark rule sets the colour !important */
    font: 400 14px/20px var(--font-sans);
    transition: color 150ms, border-color 150ms, box-shadow 150ms;
}
body.rz-theme .form-field .form-control::placeholder { color: var(--text-3); } /* dark.css keeps dark input placeholders --text-2 */
body.rz-theme .form-field .form-control:focus {
    border-color: var(--brand-text) !important; /* the rule above is !important */
    outline: 2px solid transparent; /* invisible normally; forced-colours mode drops the box-shadow ring and draws this */
    box-shadow: 0 0 0 3px var(--ring-halo), var(--shadow-xs);
}
body.rz-theme .form-field .form-control[readonly],
body.rz-theme .form-field .form-control:disabled {
    background-color: var(--secondary) !important; /* dcat-app-primary.css:1298-1304 and its dark twin (:3651-3656) are !important */
}
body.rz-theme .form-field .form-control:disabled { opacity: .5; }
body.rz-theme .form-field textarea.form-control { height: auto; min-height: 78px; padding: 8px 12px; resize: vertical; }
body.rz-theme .form-field input[type="number"].form-control { appearance: textfield; } /* profile phone and OTP: arrow keys still step */
body.rz-theme .form-field input[type="number"].form-control::-webkit-inner-spin-button,
body.rz-theme .form-field input[type="number"].form-control::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* ---------- 7.4 Input groups: the prefix sits inside the input, so every input state frames it ---------- */
body.rz-theme .form-field .input-group { flex-wrap: nowrap; }
body.rz-theme .form-field .input-group > .input-group-prepend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4; /* above the focused input, which Bootstrap lifts to 3 */
    margin: 0;
    background-color: transparent; /* Dcat's own dark .input-group-prepend background (dcat-app-primary.css:3552-3559) */
    pointer-events: none;
}
body.rz-theme .form-field .input-group > .input-group-prepend > .input-group-text {
    height: 100%;
    max-height: none; /* dcat-app-primary.css:1329-1332 caps it at 34px */
    margin: 0;
    padding: 0 0 0 12px;
    border: 0;
    border-radius: 0;
    background-color: transparent !important; /* .bg-white and dark.css .bg-white (0,3,1) are !important */
    color: var(--text-2) !important; /* .bg-white's colour and Dcat's own dark .input-group-text colour are !important */
    font: 500 12px/1 var(--font-mono);
    font-feature-settings: "tnum" 1;
}
body.rz-theme .form-field .input-group > .input-group-prepend > .input-group-text > i { color: var(--text-3); font-size: 16px; }
body.rz-theme .form-field .input-group > .input-group-prepend + .form-control { padding-left: 44px; border-radius: 12px; }
body.rz-theme .form-field .input-group > .form-control:not(:last-child) { border-radius: 12px; }
body.rz-theme .form-field .input-group > .input-group-append { margin-left: 8px; background-color: transparent; }
body.rz-theme .form-field .input-group > .form-control[style*="width: 200px"] {
    flex: 1 1 auto;
    width: auto !important; /* Form/Field/Currency.php:58-66 writes an inline width */
}
/* Amounts and rates in tabular Geist Mono; inputmask is added by JS, so the hooks are the field classes frozen in Part 1 spec 10 */
body.rz-theme .form-field :is(.field_fc_amount, .field_sale_currency_rate, .field_bc_service_fee, .field_bc_total_amount,
    .field_bc_sale_amount, .field_currency_rate, [class*="field_field_bc_cost_amount_"], input[name$="[unit_price]"],
    input[name$="[total_price]"]),
body.rz-theme .form-field .number-group .form-control { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ---------- 7.5 Number stepper: one 36px segmented control with two neutral buttons ---------- */
body.rz-theme .form-field .number-group .input-group { flex-wrap: nowrap; width: auto; }
body.rz-theme .form-field .number-group .input-group-btn > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rz-field-h);
    height: var(--rz-field-h);
    padding: 0 !important; /* Dcat's .btn padding is !important (dcat-app-primary.css:647-654) */
    border: 1px solid var(--input) !important; /* .btn-light (dcat-app-primary.css:921-926) and dark.css .btn.btn-light borders are !important */
    background-color: var(--card) !important; /* .btn-light and dark.css .bg-light, .btn.btn-light backgrounds are !important */
    box-shadow: var(--shadow-xs) !important; /* .shadow-0 is !important */
    color: var(--text-2) !important; /* dark.css .bg-light, .btn.btn-light colour is !important */
    font-size: 0;
}
body.rz-theme .form-field .number-group .input-group-btn:first-child > .btn {
    border-right: 0 !important; /* the border above is !important */
    border-radius: 12px 0 0 12px;
}
body.rz-theme .form-field .number-group .input-group-btn:last-child > .btn {
    border-left: 0 !important; /* the border above is !important */
    border-radius: 0 12px 12px 0;
}
body.rz-theme .form-field .number-group .input-group-btn:first-child > .btn::before { content: "\e897"; font: 16px/1 feather; } /* minus; the "-" text stays for screen readers */
body.rz-theme .form-field .number-group .input-group-btn:last-child > .btn::before { content: "\e8b1"; font: 16px/1 feather; }
body.rz-theme .form-field .number-group .input-group-btn > .btn:hover {
    background-color: var(--hover) !important; /* the button rule above is !important */
    color: var(--foreground) !important; /* the button rule above is !important */
}
body.rz-theme .form-field .number-group .input-group-btn > .btn:disabled { opacity: .5; }
body.rz-theme .form-field .number-group .input-group > .form-control { border-radius: 0; }

/* ---------- 7.10 Read-only values (form/display.blade.php): a grey box shaped like an input ---------- */
body.rz-theme .form-field .box.box-solid.box-default {
    min-height: var(--rz-field-h);
    border: 1px solid var(--input);
    border-color: var(--input) !important; /* dark.css .box.box-solid.box-default border colour (0,5,1) is !important */
    border-radius: 12px;
    background-color: var(--secondary);
    box-shadow: none;
}
body.rz-theme .form-field .box.box-solid.box-default > .box-body { padding: 7px 12px; color: var(--foreground); font-size: 14px; line-height: 20px; word-break: break-word; }

/* ---------- 7.9 Help and errors: control, then error, then help. The field column becomes a flex column; the row keeps its display. ---------- */
body.rz-theme .form-field > .control-label + div { display: flex; flex-direction: column; min-width: 0; }
body.rz-theme .form-field > .control-label + div > .with-errors {
    order: 1;
    margin: 0;
    color: var(--err) !important; /* dark.css .help-block (0,3,1) colour is !important */
    font-size: 12px;
    line-height: 16px;
}
body.rz-theme .form-field > .control-label + div > .with-errors:not(:empty) { padding-top: 4px; }
body.rz-theme .form-field > .control-label + div > .help-block:not(.with-errors) {
    order: 2;
    margin: 0;
    padding-top: 4px;
    color: var(--text-2) !important; /* dark.css .has-error .help-block (0,4,1) sets --err !important, which turned an invalid field's help line red in dark mode only */
    font-size: 12px;
    line-height: 16px;
}
body.rz-theme .form-field .with-errors > label.control-label {
    display: block; /* server (422) messages: Form.js prints label.control-label + br; bootstrap-validator prints a ul */
    margin: 0;
    padding: 0;
    color: var(--err);
    font: 400 12px/16px var(--font-sans);
    text-align: left;
    text-transform: none;
}
body.rz-theme .form-field .with-errors > label > i { margin-right: 4px; font-size: 12px; }
body.rz-theme .form-field .with-errors > br { display: none; }
body.rz-theme .form-field .with-errors > ul { margin: 0; padding: 0; list-style: none; }
body.rz-theme .form-field .help-block > i { margin-right: 2px; font-size: 12px; }
body.rz-theme .form-field .help-block :is([style*="color: red"], .text-danger) {
    color: var(--err) !important; /* the inline red is 4.0:1 on white; .text-danger is !important */
}

/* ---------- 7.6 select2: the trigger inside form rows (v4 Select); the dropdown and the tags everywhere ---------- */
body.rz-theme .form-field .select2-container--default .select2-selection--single,
body.rz-theme .form-field .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--input);
    border-color: var(--input) !important; /* dcat-app-primary.css:1355-1360 and Dcat's own dark trigger rule (:3604-3610) are !important */
    border-radius: 12px !important; /* dcat-app-primary.css:1355-1360 radius is !important */
    background-color: var(--card);
    box-shadow: var(--shadow-xs);
    color: var(--foreground) !important; /* Dcat's own dark trigger colour is !important */
}
body.rz-theme .form-field .select2-container--default .select2-selection--single { height: var(--rz-field-h); min-height: var(--rz-field-h); padding: 0 36px 0 12px; }
body.rz-theme .form-field .select2-container--default .select2-selection--multiple {
    min-height: var(--rz-field-h) !important; /* dcat-app-primary.css:1381-1383 min-height is !important */
    padding: 3px 32px 3px 6px;
}
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: var(--foreground) !important; /* Dcat's own dark rendered-text colour (0,4,1) is !important */
    font-size: 14px;
    line-height: 34px !important; /* dcat-app-primary.css:1440-1442 line-height is !important */
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-3); }
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0;
    width: 36px;
    height: 34px !important; /* dcat-app-primary.css:1392-1394 height is !important */
}
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__arrow::before {
    content: "\e842"; /* feather chevron-down */
    position: absolute;
    top: 0;
    right: 12px;
    color: var(--text-2);
    font: 16px/34px feather;
    transition: transform 200ms var(--ease-spay);
}
body.rz-theme .form-field .select2-container--default.select2-container--open .select2-selection__arrow::before { transform: rotate(180deg); }
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 34px;
    margin: 0 2px 0 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 16px;
    line-height: 34px;
}
body.rz-theme .form-field .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--foreground); }
body.rz-theme .form-field .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important; /* dcat-app-primary.css:1431-1433 padding is !important */
}
body.rz-theme .form-field .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 20px;
    margin: 4px 0 0 6px; /* (0,6,1) beats AdminLTE's (0,6,0) margin-top and Dcat's (0,4,1) */
    color: var(--foreground) !important; /* Dcat's own dark inline-search colour (0,4,1) is !important */
    font: 14px/20px var(--font-sans);
}
body.rz-theme .form-field .select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--brand-text) !important; /* the trigger rule above is !important */
    outline: 2px solid transparent; /* forced-colours mode draws this when it drops the shadow ring */
    box-shadow: 0 0 0 3px var(--ring-halo), var(--shadow-xs);
}
body.rz-theme .form-field .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--brand-text) !important; /* the trigger rule above is !important; no halo while open (v4 Select) */
}
body.rz-theme .form-field .select2-container--default.select2-container--disabled .select2-selection {
    background-color: var(--secondary) !important; /* dcat-app-primary.css:1298-1304 and its dark twin (:3651-3656) are !important */
    opacity: .5;
}
body.rz-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 4px 4px 0 0; /* tags everywhere, filters included; today orange with white text (1.95:1) */
    padding: 2px 6px !important; /* dcat-app-primary.css:1414-1419 padding is !important */
    border: 0 !important; /* the same Dcat rule sets border: 0 !important */
    border-radius: 10px;
    background-color: var(--secondary) !important; /* the same Dcat rule paints it orange !important */
    color: var(--foreground);
    font: 500 12px/16px var(--font-sans);
}
body.rz-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin: 0 0 0 4px;
    padding: 0;
    border: 0 !important; /* dcat-app-primary.css:1421-1424 border-right is !important */
    color: var(--text-2) !important; /* the same Dcat rule colours it white !important */
    font-size: 14px;
    line-height: 16px;
}
body.rz-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
body.rz-theme .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: transparent !important; /* dcat-app-primary.css:1426-1429 paints the hover orange !important */
    color: var(--foreground) !important; /* the rule above is !important */
}
body.rz-theme .select2-container--open .select2-dropdown {
    overflow: hidden; /* appended to <body>; select2's z-index 1051 stays above Bootstrap dialogs */
    padding: 6px;
    border: 1px solid var(--border) !important; /* dcat-app-primary.css:1396-1399 border is !important */
    border-radius: 16px;
    background-color: var(--popover) !important; /* Dcat's own dark dropdown background (:3627-3630) is !important */
    box-shadow: var(--shadow-xl);
}
body.rz-theme .select2-container--open .select2-dropdown.select2-dropdown--below { margin-top: 8px; }
body.rz-theme .select2-container--open .select2-dropdown.select2-dropdown--above { margin-top: -8px; }
body.rz-theme .select2-container--default .select2-results > .select2-results__options {
    max-height: 288px;
    background: transparent !important; /* Dcat's own dark list background (:3627-3630) is !important */
    scrollbar-color: var(--text-3) transparent;
    scrollbar-width: thin;
}
/* the shell.css scrollbar, for the select2 list and for the Reload Rate has-many rows (7.12) */
body.rz-theme .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track,
body.rz-theme.rz-app-admin .row.form-group:not(.form-field)::-webkit-scrollbar-track { background-color: transparent; }
body.rz-theme .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb,
body.rz-theme.rz-app-admin .row.form-group:not(.form-field)::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9999px;
    background-color: var(--text-3);
    background-clip: padding-box;
}
body.rz-theme .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover,
body.rz-theme.rz-app-admin .row.form-group:not(.form-field)::-webkit-scrollbar-thumb:hover { background-color: var(--text-2); }
body.rz-theme .select2-container--default .select2-results__option {
    padding: 8px 12px !important; /* dcat-app-primary.css:1410-1412 padding is !important */
    border-radius: 12px;
    color: var(--foreground);
    font: 400 14px/20px var(--font-sans);
}
body.rz-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--hover) !important; /* dcat-app-primary.css:1405-1408 and its dark twin (:3632-3636) are !important */
    color: var(--foreground) !important; /* the same rules set the colour !important */
}
body.rz-theme .select2-container--default .select2-results__option[aria-selected="true"],
body.rz-theme .select2-container--default .select2-results__option.select2-results__option--selected {
    background-color: var(--brand-soft) !important; /* dcat-app-primary.css:1401-1403 and its dark twin (:3632-3636) are !important */
    color: var(--foreground) !important; /* the dark twin sets the colour !important */
}
body.rz-theme .select2-container--default .select2-results__option[aria-selected="true"]::after,
body.rz-theme .select2-container--default .select2-results__option.select2-results__option--selected::after {
    content: "\e83f"; /* feather check, 16px at the end as in v4 Select; --brand-text reaches 3:1 */
    float: right;
    margin-left: 8px;
    color: var(--brand-text);
    font: 16px/20px feather;
}
body.rz-theme .select2-container--default .select2-results__option[aria-disabled="true"],
body.rz-theme .select2-container--default .select2-results__option.select2-results__option--disabled { opacity: .4; }
body.rz-theme .select2-results__group {
    padding: 4px 12px;
    color: var(--text-2);
    font: 600 var(--rz-fs-label)/16px var(--font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.rz-theme .select2-results__message { padding: 8px 12px; color: var(--text-2); font-size: 14px; }
body.rz-theme .select2-search--dropdown { padding: 0 0 6px; }
body.rz-theme .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--input);
    border-color: var(--input) !important; /* dcat-app-primary.css:1355-1360 and its dark twin (:3617-3625) are !important */
    border-radius: 10px !important; /* dcat-app-primary.css:1355-1360 radius is !important */
    background-color: var(--card) !important; /* Dcat's own dark search background (:3617-3625) is !important */
    color: var(--foreground) !important; /* the same dark rule sets the colour !important */
    font: 13px/20px var(--font-sans);
}
body.rz-theme .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-text) !important; /* dcat-app-primary.css:1366-1369 orange focus border is !important */
    outline: 2px solid transparent; /* invisible normally; forced-colours mode drops the box-shadow ring and draws this */
    box-shadow: 0 0 0 3px var(--ring-halo);
}

/* ---------- 7.7 Check boxes, radios and switches (everywhere: filters, row selection and the portal login too) ---------- */
body.rz-theme .vs-checkbox-con .vs-checkbox {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1.5px solid var(--text-2); /* --input is only 1.2:1; a control edge needs 3:1 */
    border-radius: 4px;
    background-color: var(--card);
    transform: none;
    transition: border-color 150ms, box-shadow 150ms var(--ease-spay);
}
body.rz-theme .vs-checkbox-con input:checked ~ .vs-checkbox { border-color: var(--brand); background-color: var(--brand); }
body.rz-theme .vs-checkbox-con input:checked ~ .vs-checkbox .vs-checkbox--check { background-color: var(--brand); }
body.rz-theme .vs-checkbox-con input:checked ~ .vs-checkbox .vs-checkbox--check .vs-icon { margin-top: 0; font-size: 12px; line-height: 13px; }
body.rz-theme .vs-checkbox-con input:focus-visible ~ .vs-checkbox { outline: 2px solid var(--brand-text); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ring-halo); }
body.rz-theme .vs-checkbox-con > .vs-checkbox + span { color: var(--foreground); font-size: 14px; line-height: 20px; }
body.rz-theme .vs-radio-con .vs-radio { width: 16px; height: 16px; margin-right: 8px; }
body.rz-theme .vs-radio-con .vs-radio .vs-radio--border { border: 1.5px solid var(--text-2); background-color: var(--card); }
body.rz-theme .vs-radio-con input:checked ~ .vs-radio .vs-radio--border { border-color: var(--brand); background-color: var(--brand); opacity: 1; transform: none; }
body.rz-theme .vs-radio-con input:checked ~ .vs-radio .vs-radio--circle { background: var(--brand-ink); box-shadow: none; opacity: 1; transform: scale(.375); } /* a 6px dark dot */
body.rz-theme .vs-radio-con input:focus-visible ~ .vs-radio .vs-radio--border { outline: 2px solid var(--brand-text); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ring-halo); }
body.rz-theme .form-field :is(.vs-checkbox-con, .vs-radio-con) { min-height: var(--rz-field-h); margin: 0; }
/* Switchery writes colours, the knob position and transitions inline, hence !important; the knob moves with transform because
   Switchery measures left wrongly when a switch is created hidden (layer dialogs, hidden steps) */
body.rz-theme .switchery {
    width: 42px;
    height: 22px;
    border: 1px solid var(--text-2) !important; /* inline border colour; Dcat's own dark .switchery (dcat-app-primary.css:3867-3875) is !important; --text-2 because a control edge needs 3:1 */
    background-color: var(--input) !important; /* inline background-color and the same Dcat dark rule */
    box-shadow: none !important; /* inline box-shadow */
    transition: background-color 200ms var(--ease-spay), border-color 200ms var(--ease-spay) !important; /* inline transition */
}
body.rz-theme input:checked + .switchery {
    background-color: var(--brand) !important; /* the rule above is !important */
    border-color: var(--brand) !important; /* the border above is !important; the on edge matches the orange fill */
}
body.rz-theme .switchery > small {
    top: 2px;
    left: 0 !important; /* inline left */
    width: 18px;
    height: 18px;
    background-color: var(--card) !important; /* inline background-color; Dcat's own dark knob colour is !important */
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
    transition: transform 200ms var(--ease-spay) !important; /* inline transition */
}
body.rz-theme input:checked + .switchery > small { transform: translateX(22px); }
body.rz-theme .form-field .switchery { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
    body.rz-theme .switchery, body.rz-theme .switchery > small { transition-duration: .01ms !important; } /* the switch transitions above are !important and outrank base.css's reset (0,1,1) */
}

/* ---------- 7.8 File upload (form/file.blade.php and WebUploader's templates; v4 FileUploadZone). Field buttons: 7.2. ---------- */
body.rz-theme .web-uploader { margin-top: 0; color: var(--text-2); font-size: 13px; }
body.rz-theme .web-uploader .queueList {
    border-color: var(--border) !important; /* upload.css sets it !important; Status.js writes an inline border once files are added */
    border-radius: 16px;
}
body.rz-theme .web-uploader .placeholder {
    padding: 24px;
    border: 2px dashed var(--border);
    border-radius: 16px;
    background-color: var(--paper-2);
    color: var(--foreground);
    font-size: 13px;
    line-height: 20px;
    transition: background-color 150ms, border-color 150ms;
}
body.rz-theme .web-uploader .placeholder:hover { background-color: var(--hover); }
body.rz-theme .web-uploader .placeholder::before {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background-color: var(--secondary);
    color: var(--text-2);
    font-size: 20px;
    line-height: 44px;
}
body.rz-theme .web-uploader .placeholder p { margin: 8px 0 0; color: var(--foreground); font-size: 13px; }
body.rz-theme .web-uploader .webuploader-pick {
    height: var(--rz-field-h);
    margin: 0 auto;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--card);
    box-shadow: var(--shadow-xs);
    color: var(--foreground);
    font: 600 13px var(--font-sans);
    line-height: 34px;
}
body.rz-theme .web-uploader .webuploader-pick.webuploader-pick-hover { border-color: var(--brand); background-color: var(--brand-soft); opacity: 1; }
body.rz-theme .web-uploader .dnd-area.webuploader-dnd-over {
    border: 2px dashed var(--brand) !important; /* form/file.blade.php:15-17 sets the drag-over border !important */
    border-radius: 16px;
    background-color: var(--brand-soft);
}
body.rz-theme .web-uploader .dnd-area.webuploader-dnd-over.webuploader-dnd-denied {
    border-color: var(--err-mark) !important; /* the rule above is !important */
}
body.rz-theme .web-uploader.file .filelist li,
body.rz-theme .web-uploader.image .filelist li {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper-2) !important; /* dark.css .web-uploader .filelist li (0,4,2) is !important */
}
body.rz-theme .web-uploader.file .filelist li {
    height: 40px;
    margin: 0 0 6px !important; /* AddFile.js:60 writes an inline margin */
    padding: 0 12px;
    box-shadow: none;
}
body.rz-theme .web-uploader.file .filelist li p.title { padding-left: 0; color: var(--foreground); font: 500 13px var(--font-sans); height: 38px; line-height: 38px; }
body.rz-theme .web-uploader.file .filelist li .file-action { margin-top: 11px; color: var(--text-2); font-size: 16px; }
body.rz-theme .web-uploader.file .filelist li .file-action:hover { color: var(--err); }
body.rz-theme .web-uploader.file .filelist li p.error {
    top: 7px;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--err-bg);
    color: var(--err);
    font: 500 12px var(--font-sans);
    line-height: 24px;
}
body.rz-theme .web-uploader .statusBar .upload-progress span.percentage,
body.rz-theme .web-uploader .filelist li p.upload-progress span,
body.rz-theme .web-uploader .statusBar .upload-progress .progress-bar { background-color: var(--brand); color: var(--brand-ink); }
body.rz-theme .form-field .web-uploader .statusBar .info {
    color: var(--text-2) !important; /* upload.css and dark.css (0,5,1) colour it !important */
    font-size: 12px;
}
body.rz-theme .web-uploader .filelist li .success em { border-bottom-color: var(--ok-mark); }
body.rz-theme .form-field.has-error .web-uploader .placeholder {
    border-color: var(--err-mark) !important; /* dark.css .web-uploader .placeholder border colour (0,4,1) is !important */
}

/* ---------- 7.11 Date picker pop-up (portal filters; v4 Calendar). The trigger is a filter field in lists.css. ---------- */
body.rz-theme .bootstrap-datetimepicker-widget.dropdown-menu {
    width: 284px;
    margin: 8px 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--popover);
    box-shadow: var(--shadow-xl);
    color: var(--foreground);
    font-family: var(--font-sans);
}
body.rz-theme .bootstrap-datetimepicker-widget.dropdown-menu::before,
body.rz-theme .bootstrap-datetimepicker-widget.dropdown-menu::after { content: none; }
body.rz-theme .bootstrap-datetimepicker-widget table { width: auto; margin: 0 auto; border-collapse: separate; border-spacing: 2px; }
body.rz-theme .bootstrap-datetimepicker-widget table th:is(.prev, .next) {
    width: 30px;
    height: 30px;
    padding: 0 !important; /* dcat-app-primary.css:3068-3071 pads th and td !important */
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text-2);
    line-height: 28px;
}
body.rz-theme .bootstrap-datetimepicker-widget table th:is(.prev, .next):not(.disabled):hover { border-color: var(--input); background: var(--hover); color: var(--foreground); }
body.rz-theme .bootstrap-datetimepicker-widget table th:is(.prev, .next).disabled { background: var(--card); color: var(--text-2); cursor: not-allowed; opacity: .4; } /* (0,4,3) beats the base rule (0,3,3), the vendor's th.disabled and its thead tr:first-child th:hover fill (0,3,4) */
body.rz-theme .bootstrap-datetimepicker-widget table th.picker-switch { border-radius: 10px; font: 600 15px/30px var(--font-heading); letter-spacing: -.01em; }
body.rz-theme .bootstrap-datetimepicker-widget table th.picker-switch:hover { background: var(--hover); }
body.rz-theme .bootstrap-datetimepicker-widget table th.dow {
    height: 24px;
    padding: 4px 0 !important; /* dcat-app-primary.css:3068-3071 pads th and td !important */
    color: var(--text-2);
    font-size: var(--rz-fs-label);
    font-weight: 600;
    letter-spacing: .04em;
}
body.rz-theme .bootstrap-datetimepicker-widget table td.day {
    width: 32px !important; /* dcat-app-primary.css:3060-3062 sets td width 0 !important */
    height: 32px;
    padding: 0 !important; /* dcat-app-primary.css:3068-3071 pads th and td !important */
    border-radius: 50%;
    font: 500 12.5px/32px var(--font-mono);
    font-feature-settings: "tnum" 1;
}
body.rz-theme .bootstrap-datetimepicker-widget table td.day:not(.disabled):hover { background: var(--hover); }
body.rz-theme .bootstrap-datetimepicker-widget table td.today { box-shadow: inset 0 0 0 1.5px var(--text-2); }
body.rz-theme .bootstrap-datetimepicker-widget table td.today.active { box-shadow: inset 0 0 0 1.5px var(--brand-ink); } /* the --text-2 ring is 1.33:1 on the orange fill in dark mode */
body.rz-theme .bootstrap-datetimepicker-widget table td.today::before { content: none; }
body.rz-theme .bootstrap-datetimepicker-widget table td:is(.old, .new) { color: var(--text-3); opacity: .55; }
body.rz-theme .bootstrap-datetimepicker-widget table td.disabled, body.rz-theme .bootstrap-datetimepicker-widget table td span.disabled { background: none; color: var(--text-2); cursor: not-allowed; opacity: .4; }
body.rz-theme .bootstrap-datetimepicker-widget table td.active,
body.rz-theme .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--brand) !important; /* dcat-app-primary.css:3053-3058 colours td.active !important */
    color: var(--brand-ink) !important; /* the same Dcat rule */
    font-weight: 600;
    text-shadow: none;
}
body.rz-theme .bootstrap-datetimepicker-widget table td span:is(.month, .year, .decade) {
    width: calc(33.333% - 6px);
    height: 40px !important; /* dcat-app-primary.css:3047-3051 collapses td span to height 0 !important */
    margin: 3px;
    border-radius: 10px;
    font: 500 13px var(--font-sans);
    line-height: 40px !important; /* the same Dcat rule sets line-height 0 !important */
}
body.rz-theme .bootstrap-datetimepicker-widget table td span:is(.month, .year, .decade).active { background-color: var(--brand); color: var(--brand-ink); text-shadow: none; }
body.rz-theme .bootstrap-datetimepicker-widget table td span:is(.timepicker-hour, .timepicker-minute, .timepicker-second) {
    height: 32px !important; /* the time panel (operation log); dcat-app-primary.css:3047-3051 collapses td span to 0 !important */
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    font-size: 14px;
    line-height: 32px !important; /* the same Dcat rule sets line-height 0 !important */
}
body.rz-theme .bootstrap-datetimepicker-widget .timepicker-picker a.btn[data-action] {
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--card);
    color: var(--text-2);
}
body.rz-theme .bootstrap-datetimepicker-widget .timepicker-picker a.btn[data-action]:hover { background-color: var(--hover); color: var(--foreground); }
body.rz-theme .bootstrap-datetimepicker-widget li.picker-switch td { border-radius: 10px; }
body.rz-theme .bootstrap-datetimepicker-widget li.picker-switch td:hover { background-color: var(--hover); }

/* ---------- 7.12 Reload Rate (portal). ReloadRateController.php:27-40 injects unscoped CSS after the theme. ---------- */
body.rz-theme .row.form-group.form-field {
    overflow: visible !important; /* the injected .row.form-group { overflow-x: auto !important } clips the focus ring at the row edge */
}
body.rz-theme.rz-app-admin .row.form-group:not(.form-field) { scrollbar-color: var(--text-3) transparent; scrollbar-width: thin; } /* has-many rows keep their scroll */
body.rz-theme form .box-header .box-title > div[style] {
    font: 600 14px/32px var(--font-mono) !important; /* ReloadRateController.php:115-119 writes an inline font-size and bold */
    letter-spacing: 0;
}
body.rz-theme .form-field.mb-0 [style*="font-size: 16px"] {
    color: var(--foreground);
    font-size: 14px !important; /* inline font-size (ReloadRateController.php:147-151, 179-183) */
    font-weight: 600 !important; /* inline font-weight: bold */
}
body.rz-theme .form-field hr[style*="red"] {
    margin: 8px 0;
    border-top: 1px solid var(--line) !important; /* inline border-top (ReloadRateController.php:130-134) */
}
body.rz-theme table.table.table-has-many {
    margin: 0;
    border: 1px solid var(--border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    background: var(--card);
}
body.rz-theme table.table.table-has-many > thead > tr > th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--paper-2);
    color: var(--text-2);
    font: 600 var(--rz-fs-label)/16px var(--font-sans);
    font-size: var(--rz-fs-label) !important; /* dcat-app-primary.css:1550-1556 .table thead th font-size is !important */
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
body.rz-theme table.table.table-has-many > thead > tr > th:first-child { border-top-left-radius: 11px; }
body.rz-theme table.table.table-has-many > thead > tr > th:last-child { border-top-right-radius: 11px; }
body.rz-theme table.table.table-has-many > tbody > tr > td { height: auto; padding: 8px 12px; border-top: 0; border-bottom: 1px solid var(--border-2); vertical-align: top; }
body.rz-theme table.table.table-has-many > tbody > tr:last-child > td { border-bottom: 0; }
body.rz-theme table.table.table-has-many .remove.btn {
    width: 32px;
    padding: 0 !important; /* the small-button padding (7.2) is !important */
}

/* ---------- 7.16 Dark fallback for controls outside .form-field (quick search, filters, invoice import, Dcat's own pages).
   Dcat's own dark rules (dcat-app-primary.css:3552-3656) come back once dark.css stops owning these selectors. ---------- */
body.rz-theme.dark-mode .form-control,
body.rz-theme.dark-mode .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    border-color: var(--input) !important; /* Dcat's own dark .form-control and select2 trigger borders are !important */
    background-color: var(--card);
    color: var(--foreground) !important; /* the same Dcat rules set the colour !important */
}
body.rz-theme.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--foreground) !important; /* Dcat's own dark rendered-text colour (0,4,1) is !important */
}
body.rz-theme.dark-mode .select2-container--default .select2-search--inline .select2-search__field {
    color: var(--foreground) !important; /* Dcat's own dark inline-search colour (0,4,1) is !important */
}
body.rz-theme.dark-mode :is(.input-group-addon, .input-group-text) {
    border-color: var(--input);
    background-color: var(--card);
    color: var(--text-2) !important; /* Dcat's own dark .input-group-* colour (0,2,1) is !important */
}
body.rz-theme.dark-mode :is(.input-group-prepend, .input-group-append) { background-color: transparent; }

/* ---------- 7.16 Chinese pages: no capitals, no letter-spacing, nothing under 12px (spec 5.4) ---------- */
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme table.table.table-has-many > thead > tr > th {
    font-size: var(--rz-fs-label-cn) !important; /* the has-many header size above is !important */
    letter-spacing: 0;
    text-transform: none;
}
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .select2-results__group { font-size: var(--rz-fs-label-cn); letter-spacing: 0; text-transform: none; }
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .bootstrap-datetimepicker-widget table th.dow {
    font-size: var(--rz-fs-label-cn);
    letter-spacing: 0;
    text-transform: none;
}
:is(html[lang="cn"], html[lang|="zh"]) body.rz-theme .bootstrap-datetimepicker-widget table th.picker-switch { letter-spacing: 0; text-transform: none; }

/* ---------- 7.9 Validation states. Keep this block last: it must follow every control and focus rule above. ---------- */
body.rz-theme .form-field.has-error .form-control,
body.rz-theme .form-field .form-control.is-invalid,
body.rz-theme .form-field.has-error .select2-selection,
body.rz-theme .form-field.has-error .form-control:focus,
body.rz-theme .form-field.has-error .select2-container--focus .select2-selection,
body.rz-theme .form-field.has-error .select2-container--open .select2-selection {
    border-color: var(--err-mark) !important; /* the control, focus and open rules above set border-color !important */
    background-image: none;
    box-shadow: 0 0 0 3px var(--err-halo), var(--shadow-xs);
}
body.rz-theme .form-field.has-error > .control-label { color: var(--err); }