/* Shared screen theme for the ERP and customer catalogue.
   Important declarations intentionally override legacy bg-light / border-0 fields.
   Brand colours, status colours and print layouts retain their own styles. */
:root {
    --ui-page: #dfe5ed;
    --ui-surface: #f3f6fa;
    --ui-field: #e6ecf3;
    --ui-border: #738296;
    --ui-panel-border: #acb9c9;
    --ui-text: #202e40;
    --ui-muted: #4d5d70;
    --ui-focus: #185cb0;
}
body.ui-contrast {
    background-color: var(--ui-page) !important;
    color: var(--ui-text);
    --bs-body-color: var(--ui-text);
    --bs-secondary-color: var(--ui-muted);
    --bs-border-color: var(--ui-panel-border);
    --bs-secondary-bg: #e3e9f1;
    --bs-tertiary-bg: #e9eef4;
}
body.ui-contrast :is(.main-content, .shop) { background-color: var(--ui-page); }
body.ui-contrast :is(.card, .modal-content, .accordion-item) {
    --bs-card-bg: var(--ui-surface);
    --bs-card-border-color: var(--ui-panel-border);
    --bs-modal-bg: var(--ui-surface);
    --bs-accordion-bg: var(--ui-surface);
    border-color: var(--ui-panel-border);
}
body.ui-contrast .card.border-0 {
    border: 1px solid var(--ui-panel-border) !important;
}
body.ui-contrast :is(.bg-white, .bg-light):not([class*="dark:"]) {
    background-color: var(--ui-surface) !important;
}
body.ui-contrast :is(.pw-card, .customer-panel:not(.security), .customer-row, .shop .card) {
    background-color: var(--ui-surface);
    border-right-color: var(--ui-panel-border);
    border-bottom-color: var(--ui-panel-border);
    box-shadow: 0 3px 10px rgb(25 43 66 / 8%);
}
body.ui-contrast :is(.text-muted, .text-secondary, .form-text, .muted, .pw-muted) {
    color: var(--ui-muted) !important;
}
/* Light text remains light on coloured headers and dark cards. */
body.ui-contrast :is(.text-white, .bg-dark, .text-bg-dark, .text-bg-primary) :is(.text-muted, .text-secondary, .form-text, .muted) {
    color: #e0e8f1 !important;
}
body.ui-contrast :is(
    input:not([type]), input[type=text], input[type=email], input[type=password],
    input[type=search], input[type=tel], input[type=url], input[type=number],
    input[type=date], input[type=datetime-local], input[type=time],
    input[type=month], input[type=week], input[type=file], textarea, select
) {
    background-color: var(--ui-field) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    opacity: 1;
    /* Keep native select arrows, calendar icons and validation indicators. */
}
body.ui-contrast :is(input, textarea)::placeholder {
    color: #526174 !important;
    opacity: 1;
}
body.ui-contrast :is(input, textarea, select):where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=submit], [type=button])):focus {
    background-color: #f5f8fc !important;
    border-color: var(--ui-focus) !important;
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgb(24 92 176 / 15%) !important;
}
body.ui-contrast :is(input, textarea, select):where(:not([type=checkbox], [type=radio])):disabled,
body.ui-contrast :is(input, textarea)[readonly] {
    background-color: #d5dde7 !important;
    color: #455468 !important;
    border-color: #8c9aab !important;
}
body.ui-contrast :is(input, textarea, select):disabled { cursor: not-allowed; }
body.ui-contrast :is(input[type=checkbox], input[type=radio]) {
    accent-color: #245f9f;
}
body.ui-contrast .form-check-input:not(:checked) {
    background-color: #e6ecf3;
    border: 1px solid var(--ui-border) !important;
}
body.ui-contrast :is(.is-invalid, [aria-invalid=true]),
body.ui-contrast .was-validated :is(input, select, textarea):invalid {
    border-color: #b32632 !important;
    outline-color: #b32632;
}
body.ui-contrast .is-valid,
body.ui-contrast .was-validated :is(input, select, textarea):valid {
    border-color: #287045 !important;
    outline-color: #287045;
}
body.ui-contrast .invalid-feedback { color: #a41f2b; }
body.ui-contrast .input-group-text {
    background-color: #dbe3ee !important;
    color: #283c55;
    border-color: var(--ui-border);
}
body.ui-contrast input::file-selector-button {
    background-color: #cdd9e7;
    color: #233b57;
}
body.ui-contrast .table:not(.table-dark) {
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: #b7c3d1;
    --bs-table-striped-bg: #e7edf4;
    --bs-table-hover-bg: #dce6f1;
}
body.ui-contrast .table:not(.table-dark):not(.table-primary):not(.table-secondary):not(.table-success):not(.table-danger):not(.table-warning):not(.table-info) {
    --bs-table-bg: var(--ui-surface);
}
body.ui-contrast .table thead { --bs-table-bg: #dce5f0; }
body.ui-contrast :is(.vacation-day, .admin-month-tile) { border-color: #8292a6; }
body.ui-contrast .vacation-day.is-off { background-color: #dfe6ef; }
body.ui-contrast :is(a, button, summary):focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 3px;
}
/* Also cover the standalone landing page, without changing its dark-mode panels. */
body.ui-contrast > .bg-gray-100:not([class*="dark:"]) { background-color: var(--ui-page); }
@media (forced-colors: active) {
    body.ui-contrast :is(input, textarea, select):where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=submit], [type=button])):focus { outline: 2px solid Highlight; }
}