/*
 * Biltory global UI theme ("soft modern").
 *
 * Loaded last in Views/Shared/_Layout.cshtml, after vendor, plugin and page styles.
 * Change the look of the whole system from the tokens in the :root block below;
 * the rest of the file only maps those tokens onto Vuexy / Bootstrap components.
 *
 * Vuexy hard-codes most colors and grows fields to a 2px border on focus (with padding
 * compensation). The rules below keep a 1px border in every state and show focus as a ring,
 * so fields never change size.
 */

/* ===== Fonts ===== */
/* Real Cairo weights; site.css only declares Medium, so bold text used to be synthesized. */

@font-face {
    font-family: "Cairo";
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/cairo/Cairo-Light.ttf) format("truetype");
}

@font-face {
    font-family: "Cairo";
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/cairo/Cairo-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Cairo";
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/cairo/Cairo-Medium.ttf) format("truetype");
}

@font-face {
    font-family: "Cairo";
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/cairo/Cairo-SemiBold.ttf) format("truetype");
}

@font-face {
    font-family: "Cairo";
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/cairo/Cairo-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Cairo";
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/cairo/Cairo-ExtraBold.ttf) format("truetype");
}

/* ===== Design tokens ===== */

:root {
    /* Typography */
    --app-font-family: "Cairo", system-ui, sans-serif;
    --app-font-weight-base: 400;

    /* Brand */
    --app-primary: var(--bs-primary);
    --app-primary-rgb: var(--bs-primary-rgb);
    --app-danger: var(--bs-danger);
    --app-danger-rgb: var(--bs-danger-rgb);

    /* Radius */
    --app-radius-sm: .375rem;
    --app-radius: .625rem;
    --app-radius-lg: .75rem;
    --app-radius-xl: .875rem;

    /* Fields */
    --app-field-height: 2.5rem;
    --app-field-bg: #fff;
    --app-field-border: #dcdfe6;
    --app-field-border-hover: #b9bcc8;
    --app-field-color: #444050;
    --app-field-placeholder: #a5a3ae;
    --app-field-disabled-bg: #f5f5f8;
    --app-field-icon-color: #8d8a94;
    --app-chip-bg: rgba(47, 43, 61, .08);
    --app-chip-color: #6d6b77;

    /* Focus and validation */
    --app-focus-border: var(--app-primary);
    --app-focus-ring: 0 0 0 3px rgba(var(--app-primary-rgb), .16);
    --app-invalid-ring: 0 0 0 3px rgba(var(--app-danger-rgb), .14);

    /* Labels */
    --app-label-size: .8125rem;
    --app-label-weight: 500;
    --app-label-color: #444050;
    --app-label-gap: .375rem;
    --app-required-color: var(--app-danger);

    /* Surfaces */
    --app-border-soft: rgba(47, 43, 61, .08);
    --app-shadow-card: 0 1px 2px rgba(47, 43, 61, .04), 0 2px 10px rgba(47, 43, 61, .06);
    --app-shadow-overlay: 0 8px 28px rgba(47, 43, 61, .16);

    /* Buttons */
    --app-btn-height: var(--app-field-height);
    --app-btn-font-weight: 500;

    /* Tables */
    --app-table-head-bg: #f7f7fa;
    --app-table-head-color: #444050;
    --app-table-head-size: .8125rem;
    --app-table-head-weight: 600;
    --app-table-border: #ececf1;
    --app-table-hover-bg: rgba(var(--app-primary-rgb), .04);

    /* Menu and badges */
    --app-menu-radius: .5rem;
    --app-menu-group-weight: 500;
    --app-badge-radius: var(--app-radius-sm);

    /* Notifications (toastr) - colors keep white text readable (WCAG AA) */
    --app-toast-success: #198754;
    --app-toast-error: #dc3545;
    --app-toast-info: #0a7ea4;
    --app-toast-warning: #b35c00;

    /* Page header */
    --app-page-title-size: 1.375rem;

    /* Backdrop behind modals and dialogs */
    --app-backdrop-bg: rgba(47, 43, 61, .3);
    --app-backdrop-blur: 6px;

    /* Scrollbars - neutral gray reads on both light content and the dark sidebar */
    --app-scrollbar-thumb: rgba(128, 131, 144, .4);
    --app-scrollbar-thumb-hover: rgba(128, 131, 144, .65);

    /* One centered spinner; an invisible layer blocks clicks while requests run.
       Hidden for requests faster than the delay, and once visible it stays at least
       min-visible so it never blinks (both read by app-shared.js). */
    --app-loader-backdrop: transparent;
    --app-loader-delay: .3s;
    --app-loader-min-visible: .4s;
    --app-loader-fade: .15s;

    /* Auth pages (login, register, forgot / reset password, create account) */
    --app-auth-bg: #f5f4fb;
    --app-auth-dots: rgba(115, 103, 240, .1);
    --app-auth-glow-1: rgba(115, 103, 240, .32);
    --app-auth-glow-2: rgba(72, 187, 160, .26);
    --app-auth-card-bg: rgba(255, 255, 255, .86);
    --app-auth-card-radius: 1.25rem;
    --app-auth-accent: linear-gradient(90deg, #7367f0, #48bba0);
    --app-auth-btn: linear-gradient(135deg, #7367f0, #8f85f3);

    /* Motion */
    --app-transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;

    /* Bootstrap radius scale follows the tokens (fields, buttons, dropdowns, alerts, pills...) */
    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius: var(--app-radius);
    --bs-border-radius-lg: var(--app-radius-lg);
}

/* ===== Typography ===== */

/* site.css and the Arabic block in _Layout force font-weight 200 on every element;
   let weights inherit again so bold/semibold text uses the real font files. */
* {
    font-family: var(--app-font-family);
    font-weight: inherit;
}

html,
body {
    font-family: var(--app-font-family);
    font-weight: var(--app-font-weight-base);
}

.arabic-font {
    font-weight: inherit;
}

/* ===== Text fields ===== */

.form-control,
.form-select {
    color: var(--app-field-color);
    background-color: var(--app-field-bg);
    border-color: var(--app-field-border);
    transition: var(--app-transition);
}

.form-control:not(.form-control-sm):not(.form-control-lg):not(.form-control-color):not([type=file]),
.form-select:not(.form-select-sm):not(.form-select-lg):not([multiple]):not([size]) {
    min-height: var(--app-field-height);
}

.form-control::placeholder {
    color: var(--app-field-placeholder);
}

.form-control:hover:not([disabled]):not([focus]),
.form-select:hover:not([disabled]):not([focus]) {
    border-color: var(--app-field-border-hover);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--app-field-disabled-bg);
    border-color: var(--app-field-border);
}

/* Focus: 1px border + ring. Restores Vuexy's resting padding (core.css .form-control:focus uses 2px). */
.form-control:focus {
    border-width: var(--bs-border-width);
    padding: calc(.426rem - var(--bs-border-width)) calc(.9375rem - var(--bs-border-width));
}

.form-control.form-control-sm:focus {
    padding: calc(.215rem - var(--bs-border-width)) calc(.75rem - var(--bs-border-width));
}

.form-control.form-control-lg:focus {
    padding: calc(.575rem - var(--bs-border-width)) calc(1rem - var(--bs-border-width));
}

/* html[dir] matches the specificity of the dir-specific select rules in vendor/css/rtl/core.css. */
html[dir] .form-select:focus {
    border-width: var(--bs-border-width);
    padding-block: calc(.426rem - var(--bs-border-width));
    padding-inline: calc(.9375rem - var(--bs-border-width)) calc(2.8125rem - var(--bs-border-width));
}

html[dir] .form-select.form-select-sm:focus {
    padding-block: calc(.215rem - var(--bs-border-width));
    padding-inline: calc(.75rem - var(--bs-border-width)) calc(2.25rem - var(--bs-border-width));
}

html[dir] .form-select.form-select-lg:focus {
    padding-block: calc(.575rem - var(--bs-border-width));
    padding-inline: calc(1rem - var(--bs-border-width)) calc(3rem - var(--bs-border-width));
}

/* !important: theme-*.css sets the focus border color with !important. */
.form-control:focus,
.form-select:focus {
    color: var(--app-field-color);
    background-color: var(--app-field-bg);
    border-color: var(--app-focus-border) !important;
    box-shadow: var(--app-focus-ring);
}

/* ===== Labels ===== */

.form-label,
.col-form-label {
    color: var(--app-label-color);
    font-size: var(--app-label-size);
    font-weight: var(--app-label-weight);
}

.form-label {
    margin-bottom: var(--app-label-gap);
}

label.required::after {
    color: var(--app-required-color);
}

/* ===== Input groups ===== */

.input-group-text {
    color: var(--app-field-icon-color);
    background-color: var(--app-field-bg);
    border-color: var(--app-field-border);
    transition: var(--app-transition);
}

.input-group:hover .input-group-text,
.input-group:hover .form-control {
    border-color: var(--app-field-border-hover);
}

/* A 1.25rem icon at the inherited 1.625 line height makes the group taller than a plain field. */
.input-group-text > i {
    line-height: 1;
}

.input-group:focus-within {
    box-shadow: var(--app-focus-ring);
}

/* Keep children at 1px while the group has focus (core.css switches them to 2px). */
.input-group:focus-within .input-group-text {
    border-width: var(--bs-border-width);
    padding: calc(.426rem - 2px) calc(.9375rem - var(--bs-border-width));
}

.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
    border-width: var(--bs-border-width);
    padding: calc(.426rem - var(--bs-border-width)) calc(.9375rem - var(--bs-border-width));
}

.input-group:focus-within .form-select {
    padding-inline-end: calc(2.8125rem - var(--bs-border-width));
}

.input-group:focus-within .form-control:first-child,
.input-group:focus-within .form-select:first-child {
    padding-inline-start: calc(.9375rem - var(--bs-border-width));
}

.input-group.input-group-sm:focus-within .input-group-text,
.input-group.input-group-sm:focus-within .form-control,
.input-group.input-group-sm:focus-within .form-select {
    padding: calc(.215rem - var(--bs-border-width)) calc(.75rem - var(--bs-border-width));
}

.input-group.input-group-lg:focus-within .input-group-text,
.input-group.input-group-lg:focus-within .form-control:not(:first-child),
.input-group.input-group-lg:focus-within .form-select:not(:first-child) {
    padding: calc(.575rem - var(--bs-border-width)) calc(1rem - var(--bs-border-width));
}

.input-group:focus-within > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not(.btn + .form-control):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-inline-start: calc(var(--bs-border-width) * -1);
}

/* !important: theme-*.css sets these border colors with !important. */
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: var(--app-focus-border) !important;
}

/* ===== Checks and switches ===== */

.form-check-input:focus-visible {
    box-shadow: var(--app-focus-ring);
}

/* ===== Validation ===== */

/* jQuery Validate marks invalid fields with .error; Vuexy gives them no border. */
.form-control.error,
.form-select.error,
.select2-hidden-accessible.error + .select2-container .select2-selection {
    border-color: var(--app-danger) !important;
}

.form-control.error:focus,
.form-select.error:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: var(--app-invalid-ring);
}

form .error:not(li):not(input):not(select):not(textarea) {
    color: var(--app-danger);
    font-size: .8125rem;
    margin-top: .25rem;
}

/* core.css's error-message rule also matches textareas; keep invalid textareas looking like fields. */
form textarea.form-control.error {
    color: var(--app-field-color);
    font-size: var(--bs-body-font-size);
    margin-top: 0;
}

/* ===== Select2 ===== */
/* :root prefix matches the .light-style / .dark-style prefixed rules in select2.css. */

:root .select2-container--default .select2-selection {
    background-color: var(--app-field-bg);
    border: var(--bs-border-width) solid var(--app-field-border);
    border-radius: var(--bs-border-radius);
    transition: var(--app-transition);
}

:root .select2-container--default .select2-selection:hover {
    border-color: var(--app-field-border-hover);
}

:root .select2-container--default .select2-selection--single {
    height: var(--app-field-height);
}

:root .select2-container--default .select2-selection--multiple {
    min-height: var(--app-field-height);
}

:root .select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered,
:root .select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
:root .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    color: var(--app-field-color);
    line-height: calc(var(--app-field-height) - var(--bs-border-width) * 2);
    padding-inline: calc(.9375rem - var(--bs-border-width)) 2.25rem;
}

:root .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--app-field-height) - var(--bs-border-width) * 2);
}

:root .select2-container--default .select2-selection__placeholder {
    color: var(--app-field-placeholder);
}

/* !important: theme-*.css sets the focus/open border color with !important. */
:root .select2-container--default.select2-container--focus .select2-selection,
:root .select2-container--default.select2-container--open .select2-selection {
    border-width: var(--bs-border-width);
    border-color: var(--app-focus-border) !important;
    box-shadow: var(--app-focus-ring);
}

:root .select2-container--default.select2-container--focus .select2-selection--multiple,
:root .select2-container--default.select2-container--open .select2-selection--multiple {
    padding-inline: calc(.9375rem - var(--bs-border-width));
}

:root .select2-container--default.select2-container--focus .select2-selection--multiple .select2-selection__choice,
:root .select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__choice {
    margin-top: calc(.4375rem - var(--bs-border-width));
}

:root .select2-container--default.select2-container--focus .select2-selection--multiple .select2-selection__choice:nth-last-child(2),
:root .select2-container--default.select2-container--open .select2-selection--multiple .select2-selection__choice:nth-last-child(2) {
    margin-bottom: calc(.4375rem - var(--bs-border-width));
}

:root .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--app-chip-color);
    background-color: var(--app-chip-bg);
    border-radius: var(--app-radius-sm);
}

:root .select2-dropdown {
    border: var(--bs-border-width) solid var(--app-border-soft);
    box-shadow: var(--app-shadow-overlay);
}

/* ===== flatpickr ===== */

:root .form-control.flatpickr-input[readonly],
:root .flatpickr-input ~ .form-control[readonly] {
    background-color: var(--app-field-bg);
}

/* !important: flatpickr.css sets the calendar radius with !important. */
:root .flatpickr-calendar {
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--app-shadow-overlay);
}

/* ===== tagify / bootstrap-select (loaded globally, not used by any page yet) ===== */

/* !important: tagify.css sets the focus padding with !important. */
.tagify.tagify--focus,
.tagify.form-control:focus {
    border-width: var(--bs-border-width);
    padding: calc(2px - var(--bs-border-width)) .5625rem .375rem !important;
    box-shadow: var(--app-focus-ring);
}

:root .bootstrap-select .dropdown-toggle {
    background-color: var(--app-field-bg);
    border: var(--bs-border-width) solid var(--app-field-border);
    border-radius: var(--bs-border-radius);
}

:root .bootstrap-select .dropdown-toggle.show,
:root .bootstrap-select .dropdown-toggle:focus {
    border: var(--bs-border-width) solid var(--app-focus-border);
    box-shadow: var(--app-focus-ring);
}

/* ===== Buttons ===== */

.btn {
    --bs-btn-font-weight: var(--app-btn-font-weight);
}

/* Default-size buttons are exactly as tall as default fields. */
.btn:where(:not(.btn-xs, .btn-sm, .btn-lg, .btn-xl, .btn-icon)) {
    --bs-btn-padding-y: calc((var(--app-btn-height) - var(--bs-btn-font-size) * var(--bs-btn-line-height) - var(--bs-btn-border-width) * 2) / 2);
}

.btn:focus-visible {
    box-shadow: var(--app-focus-ring);
}

/* ===== Cards ===== */

.card {
    --bs-card-border-radius: var(--app-radius-lg);
    --bs-card-inner-border-radius: calc(var(--app-radius-lg) - var(--bs-border-width));
    border: var(--bs-border-width) solid var(--app-border-soft);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--app-shadow-card);
}

/* ===== Modals and dropdowns ===== */

.modal {
    --bs-modal-border-radius: var(--app-radius-xl);
    --bs-modal-inner-border-radius: var(--app-radius-xl);
}

.modal-content {
    box-shadow: var(--app-shadow-overlay);
}

.dropdown-menu {
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-border-color: var(--app-border-soft);
    box-shadow: var(--app-shadow-overlay);
}

.dropdown-item {
    border-radius: var(--app-radius-sm);
}

/* ===== Tables ===== */

.table {
    --bs-table-border-color: var(--app-table-border);
    --bs-table-hover-bg: var(--app-table-hover-bg);
}

/* Header tint goes through --bs-table-bg so explicit table-* heads and rows keep their own colors. */
.table:not(.table-dark) > thead:not([class*="table-"]) {
    --bs-table-bg: var(--app-table-head-bg);
}

.table:not(.table-dark) > thead:not([class*="table-"]) > tr > th {
    background-color: var(--bs-table-bg);
}

.table th {
    color: var(--app-table-head-color);
    font-size: var(--app-table-head-size);
    font-weight: var(--app-table-head-weight);
}

/* ===== Sidebar menu and badges ===== */

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item .menu-link,
.layout-horizontal .bg-menu-theme .menu-inner > .menu-item > .menu-link {
    border-radius: var(--app-menu-radius);
}

/* Nested group headers (Sales Invoices, Notifications, POS...): site.css sets 700, too heavy next to the items */
.layout-menu .menu-sub > .menu-item > .menu-link.menu-toggle {
    font-weight: var(--app-menu-group-weight);
}

.badge {
    --bs-badge-border-radius: var(--app-badge-radius);
}

/* ===== Notifications (toastr) ===== */

#toast-container > div {
    padding: 1rem 1.25rem 1rem 3.25rem;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-overlay);
    opacity: 1;
    line-height: 1.5;
}

#toast-container > div:hover {
    box-shadow: var(--app-shadow-overlay);
}

#toast-container > .toast-success {
    background-color: var(--app-toast-success);
}

#toast-container > .toast-error {
    background-color: var(--app-toast-error);
}

#toast-container > .toast-info {
    background-color: var(--app-toast-info);
}

#toast-container > .toast-warning {
    background-color: var(--app-toast-warning);
}

#toast-container .toast-title {
    font-weight: 600;
}

/* ===== Dialogs (SweetAlert2) ===== */
/* sweetalert2.all.min.js injects its CSS after this file, so these rules are scoped one level deeper. */

.swal2-container .swal2-popup {
    padding-bottom: 1.5rem;
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-overlay);
}

.swal2-popup .swal2-title {
    color: var(--bs-heading-color);
    font-size: 1.375rem;
    font-weight: 600;
}

.swal2-popup .swal2-html-container {
    color: var(--bs-body-color);
    font-size: 1rem;
}

/* Buttons use the app's .btn classes (buttonsStyling: false), which have no spacing of their own. */
.swal2-popup .swal2-actions {
    gap: .5rem;
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    color: var(--app-field-color);
    border: var(--bs-border-width) solid var(--app-field-border);
    border-radius: var(--app-radius);
    box-shadow: none;
}

.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
    border-color: var(--app-focus-border);
    box-shadow: var(--app-focus-ring);
}

/* ===== Page header (title + PageActions in _Layout) ===== */

/* !important: the markup uses the align-items-start utility, which is !important. */
.page-title-actions {
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center !important;
    margin-bottom: 1.5rem;
}

.page-title-actions h4 {
    margin-bottom: 0;
    color: var(--bs-heading-color);
    font-size: var(--app-page-title-size);
    font-weight: 600;
}

.page-title-actions > div:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* ===== Modal backdrop ===== */

/* Blur the page behind modals. The tint moves into the color so the element can reach opacity 1;
   Bootstrap still fades opacity in and out, which fades the blur with it. */
.modal-backdrop {
    --bs-backdrop-bg: var(--app-backdrop-bg);
    --bs-backdrop-opacity: 1;
    backdrop-filter: blur(var(--app-backdrop-blur));
}

/* SweetAlert2 dialogs get the same backdrop (body prefix: its CSS is injected after this file). */
body .swal2-container.swal2-backdrop-show {
    background-color: var(--app-backdrop-bg);
    backdrop-filter: blur(var(--app-backdrop-blur));
    transition: background-color .15s, backdrop-filter .15s;
}

body .swal2-container.swal2-backdrop-hide {
    backdrop-filter: blur(0);
    transition: background-color .15s, backdrop-filter .15s;
}

/* ===== Modal footers ===== */

/* Long dialogs keep Save / Cancel visible while the form scrolls. */
.modal-content > .modal-footer,
.modal-content > form > .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background-color: var(--bs-modal-bg);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    box-shadow: 0 -1px 0 var(--app-border-soft);
}

/* Scrollable dialogs whose <form> wraps body + footer: only the body scrolls, the footer stays put. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-dialog-scrollable .modal-content > form > .modal-footer {
    flex: 0 0 auto;
}

/* ===== Scrollbars ===== */

* {
    scrollbar-color: var(--app-scrollbar-thumb) transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
}

/* !important: site.css colors the perfect-scrollbar (sidebar) rails and thumbs with !important. */
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
    background-color: rgba(128, 131, 144, .1) !important;
}

.ps__thumb-x,
.ps__thumb-y {
    background-color: var(--app-scrollbar-thumb) !important;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x,
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: var(--app-scrollbar-thumb-hover) !important;
}

/* ===== Loading overlay (#loader-overlay, shown by showLoader() in app-shared.js) ===== */

/* The transparent overlay blocks clicks while requests run and centers a single spinner.
   !important: the markup uses bg-dark / bg-opacity-50 utilities and an inline 100vw x 100vh size;
   inset: 0 avoids counting the scrollbar. */
#loader-overlay {
    inset: 0;
    width: auto !important;
    height: auto !important;
    background-color: var(--app-loader-backdrop) !important;
    cursor: progress;
}

/* Fades in only after the delay, so quick requests show nothing at all. */
#loader-overlay:not(.d-none) {
    animation: app-loader-in var(--app-loader-fade) ease var(--app-loader-delay) both;
}

#loader-overlay .spinner-border {
    width: 2rem;
    height: 2rem;
    --bs-spinner-border-width: .15em;
    animation: .75s linear infinite spinner-border;
}

@keyframes app-loader-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== Invoice, return and quotation pages ===== */
/* Their page styles (css/sale_invoices, purchase_invoices, return_*, quotations) restyle every card,
   card header and success alert with older Bootstrap 4 colors. These rules restore the theme look;
   they only restate Bootstrap / Vuexy defaults, so other pages are unaffected. */

.card:hover {
    box-shadow: var(--app-shadow-card);
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-body {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.alert-success {
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .16);
    border: var(--bs-border-width) solid rgba(var(--bs-success-rgb), .16);
    border-radius: var(--bs-alert-border-radius);
}

/* ===== Auth pages (Views/Users: Login, Register, ForgotPassword, ResetPassword, CreateAccount) ===== */

body:has(.authentication-wrapper) {
    background-color: var(--app-auth-bg);
    background-image: radial-gradient(var(--app-auth-dots) 1px, transparent 1.5px);
    background-size: 24px 24px;
}

/* Two soft brand-colored glows that drift slowly behind the card. */
.authentication-wrapper::before,
.authentication-wrapper::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 44vmax;
    height: 44vmax;
    border-radius: 50%;
    pointer-events: none;
}

.authentication-wrapper::before {
    top: -16vmax;
    inset-inline-start: -14vmax;
    background: radial-gradient(circle, var(--app-auth-glow-1), transparent 68%);
    animation: app-auth-drift 18s ease-in-out infinite alternate;
}

.authentication-wrapper::after {
    bottom: -18vmax;
    inset-inline-end: -14vmax;
    background: radial-gradient(circle, var(--app-auth-glow-2), transparent 68%);
    animation: app-auth-drift 22s ease-in-out -6s infinite alternate-reverse;
}

/* Replace the template's decorative squares. */
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after {
    display: none;
}

.authentication-wrapper .authentication-inner {
    z-index: 1;
}

/* Builds made while the split-screen trial existed still render its .auth-showcase panel; keep it hidden. */
.auth-showcase {
    display: none !important;
}

.authentication-wrapper .card {
    overflow: hidden;
    background-color: var(--app-auth-card-bg);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--app-auth-card-radius);
    box-shadow: 0 24px 60px -16px rgba(47, 43, 61, .22), 0 2px 6px rgba(47, 43, 61, .05);
    backdrop-filter: blur(14px) saturate(1.2);
    animation: app-auth-card-in .6s cubic-bezier(.2, .7, .2, 1) both;
}

/* Brand accent line along the top of the card. */
.authentication-wrapper .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--app-auth-accent);
}

.authentication-wrapper .card-body > h4 {
    color: var(--bs-heading-color);
    font-size: 1.5rem;
    font-weight: 700;
}

.authentication-wrapper .card-body > h4 + p {
    color: var(--bs-secondary-color);
    font-size: .9375rem;
}

/* Field icons (inline SVG, so no extra files are needed). */
.authentication-wrapper .form-control:is(#Subdomain, #CompanyName, #Email, #MobileNumber, #FirstName, #LastName, #CaptchaCode, #MfaCode, [type=password]) {
    padding-inline-start: 2.75rem;
    background-repeat: no-repeat;
    background-position: left .95rem center;
    background-size: 1.125rem;
}

[dir=rtl] .authentication-wrapper .form-control:is(#Subdomain, #CompanyName, #Email, #MobileNumber, #FirstName, #LastName, #CaptchaCode, #MfaCode, [type=password]) {
    background-position: right .95rem center;
}

.authentication-wrapper #Subdomain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='M9 8h1.5M13.5 8H15M9 12h1.5M13.5 12H15M10 20.5V17h4v3.5'/%3E%3C/svg%3E");
}

.authentication-wrapper #CompanyName {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2.5'/%3E%3Cpath d='M9 7.5V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5M3.5 12.5h17'/%3E%3C/svg%3E");
}

.authentication-wrapper #Email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.authentication-wrapper #MobileNumber {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.5'/%3E%3Cpath d='M11 17.5h2'/%3E%3C/svg%3E");
}

.authentication-wrapper :is(#FirstName, #LastName) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.6 4.2-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/%3E%3C/svg%3E");
}

.authentication-wrapper :is(#CaptchaCode, #MfaCode) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6v5.5c0 4.3 3 7.9 7 9 4-1.1 7-4.7 7-9V6z'/%3E%3Cpath d='m9.5 12 1.8 1.8 3.4-3.6'/%3E%3C/svg%3E");
}

.authentication-wrapper .form-control[type=password] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8a94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
}

/* Password eye: move it from its own column into the field (Login, Register, ResetPassword markup). */
.authentication-wrapper .form-password-toggle > .row {
    --bs-gutter-x: 0;
    position: relative;
}

.authentication-wrapper .form-password-toggle > .row > .col-11 {
    flex: 0 0 100%;
    width: 100%;
}

.authentication-wrapper .form-password-toggle > .row > .col-11 > .form-control {
    padding-inline-end: 2.75rem;
}

.authentication-wrapper .form-password-toggle > .row > .col-1 {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: .5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    width: auto;
}

/* !important: the eye icon's inline style sets width: 20%. */
.authentication-wrapper .form-password-toggle > .row > .col-1 > .btn-icon {
    width: 2rem !important;
    height: 2rem;
    color: var(--app-field-icon-color);
}

.authentication-wrapper .form-password-toggle > .row > .col-1 > .btn-icon:hover {
    color: var(--app-primary);
}

/* The template's toggle listens on the <i>, so let it fill the whole button for an easier click target. */
.authentication-wrapper .form-password-toggle > .row > .col-1 > .btn-icon > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Captcha image and its "new code" link. */
.authentication-wrapper img[id$="Captcha"] {
    padding: .25rem .75rem;
    background-color: #fff;
    border: 1px solid var(--app-field-border);
    border-radius: var(--app-radius);
}

.authentication-wrapper a[id$="CaptchaUpdate"] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .375rem;
    font-size: .8125rem;
    font-weight: 500;
}

.authentication-wrapper a[id$="CaptchaUpdate"]::before {
    content: "\f116";
    font-family: bootstrap-icons;
}

/* Primary action. */
.authentication-wrapper .btn-primary {
    background-image: var(--app-auth-btn);
    border: 0;
    box-shadow: 0 10px 22px -8px rgba(var(--app-primary-rgb), .6);
}

.authentication-wrapper .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -10px rgba(var(--app-primary-rgb), .7);
}

.authentication-wrapper .card a:not(.btn) {
    font-weight: 500;
}

/* Language switch as a small pill. */
.authentication-wrapper a[href*="ChangeLanguageExternal"] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .9rem;
    color: var(--bs-heading-color);
    background-color: rgba(255, 255, 255, .7);
    border: 1px solid var(--app-border-soft);
    border-radius: 50rem;
    transition: var(--app-transition);
}

.authentication-wrapper a[href*="ChangeLanguageExternal"]::before {
    content: "\f3ef";
    font-family: bootstrap-icons;
    color: var(--app-primary);
}

.authentication-wrapper a[href*="ChangeLanguageExternal"]:hover {
    background-color: #fff;
    border-color: rgba(var(--app-primary-rgb), .4);
}

@keyframes app-auth-drift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(5vmax, 4vmax) scale(1.08);
    }
}

@keyframes app-auth-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .authentication-wrapper::before,
    .authentication-wrapper::after,
    .authentication-wrapper .card {
        animation: none;
    }
}