/* Windows XP Luna Blue skin. Scoped to html.theme-xp so other schemes stay intact. */

html.theme-xp {
    --xp-desktop: #3a6ea5;
    --xp-face: #ece9d8;
    --xp-face-light: #ffffff;
    --xp-face-shadow: #808080;
    --xp-face-dark: #404040;
    --xp-caption-dark: #0a246a;
    --xp-caption: #0054e3;
    --xp-caption-mid: #3a8cff;
    --xp-caption-light: #166aee;
    --xp-highlight: #316ac5;
    --xp-start: #3c8a3c;
    --xp-ink: #000000;
    --xp-window-border: #0054e3;
    --xp-radius: 8px;
    --color-primary: 0 84 227;
    --color-primary-light: 212 232 255;
    --color-primary-dark-light: 0 84 227 / 0.15;
    --xp-caption-gradient: linear-gradient(
        180deg,
        #0997ff 0%,
        #0053ee 8%,
        #0050ee 40%,
        #0066ff 88%,
        #005bff 95%,
        #003dd7 100%
    );
    --xp-bevel-out: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
    --xp-bevel-in: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

html.theme-xp,
html.theme-xp body,
html.theme-xp body.dark {
    background: var(--xp-desktop) !important;
    color: var(--xp-ink);
    font-family: Tahoma, Verdana, sans-serif;
}

html.theme-xp h1,
html.theme-xp h2,
html.theme-xp h3,
html.theme-xp h4,
html.theme-xp h5,
html.theme-xp h6,
html.theme-xp .btn {
    font-family: Tahoma, Verdana, sans-serif;
}

html.theme-xp .screen_loader {
    background: var(--xp-desktop) !important;
}

html.theme-xp .main-container {
    color: var(--xp-ink);
}

/* --- Panels / cards --- */
html.theme-xp .panel {
    background: var(--xp-face);
    border: 3px solid var(--xp-window-border);
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35), var(--xp-bevel-out);
    color: var(--xp-ink);
}

/* --- Buttons --- */
html.theme-xp .btn {
    border: 1px solid #003c74;
    border-radius: 3px;
    background: linear-gradient(180deg, #ffffff 0%, #ece9d8 48%, #d4d0c8 100%);
    box-shadow: var(--xp-bevel-out);
    color: var(--xp-ink);
    font-weight: 600;
}

html.theme-xp .btn:hover {
    background: linear-gradient(180deg, #ffffff 0%, #fff8dc 48%, #ece9d8 100%);
}

html.theme-xp .btn:active {
    box-shadow: var(--xp-bevel-in);
}

html.theme-xp .btn-primary,
html.theme-xp .btn-gradient,
html.theme-xp .btn-dark {
    background: linear-gradient(180deg, #5b9aff 0%, #0054e3 55%, #003dd7 100%) !important;
    color: #ffffff !important;
    border-color: #003c74 !important;
}

html.theme-xp .btn-primary:hover,
html.theme-xp .btn-gradient:hover,
html.theme-xp .btn-dark:hover {
    background: linear-gradient(180deg, #7eb0ff 0%, #166aee 55%, #0054e3 100%) !important;
    color: #ffffff !important;
}

html.theme-xp .btn-outline-primary,
html.theme-xp .btn-outline-dark {
    background: linear-gradient(180deg, #ffffff 0%, #ece9d8 48%, #d4d0c8 100%);
    color: var(--xp-ink);
    border-color: #003c74;
}

html.theme-xp .btn-outline-primary:hover,
html.theme-xp .btn-outline-dark:hover {
    background: linear-gradient(180deg, #5b9aff 0%, #0054e3 55%, #003dd7 100%);
    color: #ffffff;
}

html.theme-xp .btn-success {
    background: linear-gradient(180deg, #6fbf6f 0%, #3c8a3c 55%, #2d6a2d 100%) !important;
    color: #ffffff !important;
    border-color: #215c21 !important;
}

html.theme-xp .btn-danger {
    background: linear-gradient(180deg, #e08080 0%, #c44d4d 55%, #8b2e2e 100%) !important;
    color: #ffffff !important;
}

html.theme-xp .badge {
    border: 1px solid #003c74;
    border-radius: 3px;
    box-shadow: var(--xp-bevel-out);
}

html.theme-xp .nb-button {
    border: 1px solid #003c74;
    border-radius: 3px;
    box-shadow: var(--xp-bevel-out);
}

html.theme-xp .nb-card {
    background: var(--xp-face);
    border: 3px solid var(--xp-window-border);
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
}

/* --- Forms --- */
html.theme-xp .form-input,
html.theme-xp .form-textarea,
html.theme-xp .form-select,
html.theme-xp .form-multiselect {
    background: #ffffff;
    border: 1px solid #7f9db9;
    border-radius: 0;
    box-shadow: var(--xp-bevel-in);
    color: var(--xp-ink);
}

html.theme-xp .form-input:focus,
html.theme-xp .form-textarea:focus,
html.theme-xp .form-select:focus,
html.theme-xp .form-multiselect:focus {
    border-color: var(--xp-highlight);
    outline: 1px dotted var(--xp-caption-dark);
    outline-offset: -4px;
}

html.theme-xp .user-form-select__control,
html.theme-xp .custom-select [class$='-control'] {
    min-height: 38px !important;
    background: #ffffff !important;
    border: 1px solid #7f9db9 !important;
    border-radius: 0 !important;
    box-shadow: var(--xp-bevel-in) !important;
    color: var(--xp-ink) !important;
}

html.theme-xp .user-form-select__control--is-focused,
html.theme-xp .custom-select [class*='-control']:hover,
html.theme-xp .custom-select [class*='--is-focused'] {
    border-color: var(--xp-highlight) !important;
}

html.theme-xp .user-form-select__placeholder,
html.theme-xp .user-form-select__single-value,
html.theme-xp .user-form-select__singleValue,
html.theme-xp .user-form-select__input,
html.theme-xp .user-form-select__input-container {
    color: var(--xp-ink) !important;
    font-family: Tahoma, Verdana, sans-serif;
}

html.theme-xp .user-form-select__menu,
html.theme-xp .custom-select [class$='-menu'] {
    background: #ffffff !important;
    border: 1px solid #7f9db9 !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25) !important;
}

html.theme-xp .user-form-select__option,
html.theme-xp .custom-select [class$='-option'] {
    background: transparent !important;
    color: var(--xp-ink) !important;
}

html.theme-xp .user-form-select__option--is-focused,
html.theme-xp .user-form-select__option--is-selected,
html.theme-xp .custom-select [class*='-option']:hover {
    background: var(--xp-highlight) !important;
    color: #ffffff !important;
}

html.theme-xp .form-checkbox,
html.theme-xp .form-radio {
    border: 1px solid #7f9db9;
    box-shadow: var(--xp-bevel-in);
    background: #ffffff;
}

html.theme-xp .form-checkbox:checked,
html.theme-xp .form-radio:checked {
    background-color: var(--xp-caption) !important;
    border-color: var(--xp-caption-dark);
}

/* --- Dropdown --- */
html.theme-xp .dropdown ul {
    background: var(--xp-face);
    border: 1px solid #003c74;
    border-radius: 0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: var(--xp-ink);
}

html.theme-xp .dropdown ul li > a:hover,
html.theme-xp .dropdown ul li > button:hover {
    background: var(--xp-highlight);
    color: #ffffff;
}

/* --- Tables --- */
html.theme-xp table thead tr,
html.theme-xp table tfoot tr {
    background: var(--xp-caption-gradient) !important;
}

html.theme-xp table thead tr th,
html.theme-xp table tfoot tr th {
    color: #ffffff;
    border-bottom: 1px solid var(--xp-caption-dark);
    font-weight: 700;
}

html.theme-xp table tbody tr {
    background: #ffffff;
    border-bottom: 1px solid #d4d0c8;
}

html.theme-xp table.table-hover tbody tr:hover {
    background: #c6d8f0 !important;
}

/* --- Header (Luna title bar) --- */
html.theme-xp header > div {
    box-shadow: none;
}

html.theme-xp header .shadow-sm > div:first-child,
html.theme-xp header > .shadow-sm > div {
    background: var(--xp-caption-gradient) !important;
    color: #ffffff;
    border: 2px solid var(--xp-caption-dark);
    border-bottom-width: 0;
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html.theme-xp header h5,
html.theme-xp header .dark\:text-white-light,
html.theme-xp header .dark\:text-\[\#d0d2d6\] {
    color: #ffffff !important;
}

html.theme-xp header button {
    color: #ffffff;
}

html.theme-xp header button.rounded-full,
html.theme-xp header .rounded-full {
    background: linear-gradient(180deg, #5b9aff 0%, #003dd7 100%) !important;
    border: 1px solid #002d7a;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4);
}

html.theme-xp header .invert {
    filter: invert(1) brightness(2);
}

html.theme-xp .navbar-floating header {
    background: transparent;
}

html.theme-xp .navbar-floating header > div > div:first-child {
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
}

html.theme-xp .horizontal-menu {
    background: var(--xp-face) !important;
    border-top: 1px solid var(--xp-caption-dark) !important;
    color: var(--xp-ink) !important;
}

html.theme-xp .horizontal-menu span {
   
    color: var(--xp-ink) !important;
}

html.theme-xp .horizontal-menu a:hover,
html.theme-xp .horizontal-menu a.active,
html.theme-xp .horizontal-menu .nav-link:hover,
html.theme-xp .horizontal-menu .nav-link.active {
    background: var(--xp-highlight);
    color: #ffffff !important;
}

html.theme-xp .horizontal-menu a:hover span,
html.theme-xp .horizontal-menu a.active span,
html.theme-xp .horizontal-menu .nav-link:hover span,
html.theme-xp .horizontal-menu .nav-link.active span {
    color: #ffffff !important;
}

html.theme-xp .horizontal-menu a:hover svg,
html.theme-xp .horizontal-menu a.active svg,
html.theme-xp .horizontal-menu .nav-link:hover svg,
html.theme-xp .horizontal-menu .nav-link.active svg {
    color: #ffffff !important;
}

/* --- Sidebar (XP window chrome) --- */
html.theme-xp .sidebar {
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);
    border-right: 3px solid var(--xp-window-border);
}

html.theme-xp .sidebar .h-full.bg-white {
    background: var(--xp-face) !important;
}

html.theme-xp .sidebar .h-full.bg-white > div:first-child {
    background: var(--xp-caption-gradient);
    color: #ffffff;
    border-bottom: 1px solid var(--xp-caption-dark);
}

html.theme-xp .sidebar .h-full.bg-white > div:first-child a,
html.theme-xp .sidebar .h-full.bg-white > div:first-child span,
html.theme-xp .sidebar .h-full.bg-white > div:first-child button {
    color: #ffffff !important;
}

html.theme-xp .sidebar .nav-item > button,
html.theme-xp .sidebar .nav-item > a {
    border-radius: 0;
    color: var(--xp-ink);
}

html.theme-xp .sidebar .nav-item > button:hover,
html.theme-xp .sidebar .nav-item > a:hover {
    background: var(--xp-highlight);
    color: #ffffff;
}

html.theme-xp .sidebar .nav-item > button.active,
html.theme-xp .sidebar .nav-item > a.active {
    background: var(--xp-highlight);
    color: #ffffff;
    border: none;
    box-shadow: none;
    font-weight: 700;
}

html.theme-xp .sidebar .nav-item > button:hover span,
html.theme-xp .sidebar .nav-item > a:hover span,
html.theme-xp .sidebar .nav-item > button.active span,
html.theme-xp .sidebar .nav-item > a.active span,
html.theme-xp .sidebar .nav-item > button:hover svg,
html.theme-xp .sidebar .nav-item > a:hover svg,
html.theme-xp .sidebar .nav-item > button.active svg,
html.theme-xp .sidebar .nav-item > a.active svg {
    color: #ffffff !important;
}

html.theme-xp .sidebar ul.sub-menu li a:hover,
html.theme-xp .sidebar ul.sub-menu li button:hover,
html.theme-xp .sidebar ul.sub-menu li a.active,
html.theme-xp .sidebar ul.sub-menu li button.active {
    color: #ffffff;
    background: var(--xp-highlight);
}

html.theme-xp .sidebar ul.sub-menu li a.active::before,
html.theme-xp .sidebar ul.sub-menu li button.active::before,
html.theme-xp .sidebar ul.sub-menu li a:hover::before,
html.theme-xp .sidebar ul.sub-menu li button:hover::before {
    background: #ffffff;
}

html.theme-xp .sidebar .invert {
    filter: invert(1) brightness(2);
}

/* Appearance drawer */
html.theme-xp nav.fixed.max-w-\[400px\] {
    background: var(--xp-face) !important;
    border-left: 3px solid var(--xp-window-border);
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3);
    color: var(--xp-ink);
}

html.theme-xp .bg-\[\#f6f7f8\],
html.theme-xp .bg-primary-light {
    background-color: #d4e8ff !important;
}

html.theme-xp .\!bg-white {
    background-color: var(--xp-face) !important;
}

/* --- Hardcoded Tailwind blues --- */
html.theme-xp .bg-blue-50,
html.theme-xp .bg-blue-100,
html.theme-xp .hover\:bg-blue-100:hover,
html.theme-xp .hover\:bg-blue-200:hover {
    background-color: #d4e8ff !important;
    color: var(--xp-ink) !important;
}

html.theme-xp .bg-blue-300,
html.theme-xp .bg-blue-400,
html.theme-xp .bg-blue-500,
html.theme-xp .bg-blue-600,
html.theme-xp .bg-blue-700,
html.theme-xp .bg-blue-800,
html.theme-xp .hover\:bg-blue-400:hover,
html.theme-xp .hover\:bg-blue-600:hover,
html.theme-xp .hover\:bg-blue-700:hover,
html.theme-xp .hover\:bg-blue-800:hover {
    background-color: var(--xp-caption) !important;
    color: #ffffff !important;
}

html.theme-xp .text-blue-500,
html.theme-xp .text-blue-600,
html.theme-xp .text-blue-700,
html.theme-xp .text-blue-800,
html.theme-xp .text-blue-900,
html.theme-xp .hover\:text-blue-700:hover {
    color: var(--xp-caption) !important;
}

html.theme-xp .border-blue-300,
html.theme-xp .border-blue-400,
html.theme-xp .border-blue-400\/20,
html.theme-xp .border-blue-500 {
    border-color: var(--xp-caption) !important;
}

html.theme-xp .rounded-lg,
html.theme-xp .rounded-xl,
html.theme-xp .rounded-2xl,
html.theme-xp .rounded-md {
    border-radius: 3px !important;
}

html.theme-xp .shadow,
html.theme-xp .shadow-sm,
html.theme-xp .shadow-lg,
html.theme-xp .shadow-xl {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25) !important;
}

html.theme-xp .peer-checked\:bg-blue-600:checked,
html.theme-xp .peer:checked ~ .peer-checked\:bg-blue-600,
html.theme-xp .peer:checked + .peer-checked\:bg-blue-600 {
    background-color: var(--xp-caption) !important;
}

/* --- Plugin / third-party --- */
html.theme-xp .tippy-box[data-theme~='primary'] {
    background-color: var(--xp-caption);
    border: 1px solid var(--xp-caption-dark);
    border-radius: 3px;
}

html.theme-xp .tippy-box[data-theme~='primary'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--xp-caption);
}

html.theme-xp .swiper-button-next,
html.theme-xp .swiper-button-prev {
    color: var(--xp-caption);
}

html.theme-xp #slider3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--xp-caption);
}

html.theme-xp input[type='range']::-webkit-slider-thumb,
html.theme-xp input[type='range']:active::-webkit-slider-thumb,
html.theme-xp .noUi-connect {
    background: var(--xp-caption) !important;
}

html.theme-xp .mantine-Pagination-item {
    border-radius: 3px !important;
    border: 1px solid #003c74 !important;
    font-family: Tahoma, Verdana, sans-serif;
    background: var(--xp-face) !important;
    color: var(--xp-ink) !important;
    box-shadow: var(--xp-bevel-out);
}

html.theme-xp .mantine-Pagination-item[data-active] {
    background: var(--xp-caption) !important;
    color: #ffffff !important;
}

html.theme-xp .swal2-popup {
    background: var(--xp-face);
    border: 3px solid var(--xp-window-border);
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    font-family: Tahoma, Verdana, sans-serif;
}

html.theme-xp .swal2-popup .swal2-styled {
    border-radius: 3px !important;
    box-shadow: var(--xp-bevel-out) !important;
    border: 1px solid #003c74 !important;
}

html.theme-xp .swal2-popup .swal2-styled.swal2-cancel {
    background: linear-gradient(180deg, #ffffff 0%, #ece9d8 48%, #d4d0c8 100%) !important;
    color: var(--xp-ink) !important;
}

html.theme-xp .swal2-popup .swal2-styled.swal2-confirm {
    background: linear-gradient(180deg, #5b9aff 0%, #0054e3 55%, #003dd7 100%) !important;
    color: #ffffff !important;
}

html.theme-xp .calendar-wrapper .fc-button-primary,
html.theme-xp .calendar-wrapper .fc-button-primary:disabled {
    color: var(--xp-ink) !important;
    border-color: #003c74 !important;
    background: var(--xp-face) !important;
}

html.theme-xp .calendar-wrapper .fc-button-primary:not(:disabled):hover,
html.theme-xp .calendar-wrapper .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--xp-highlight) !important;
    color: #ffffff !important;
}

html.theme-xp .calendar-wrapper .fc-daygrid-event.primary,
html.theme-xp .calendar-wrapper .fc-timegrid-event.primary,
html.theme-xp .calendar-wrapper .fc-daygrid-event.primary:hover,
html.theme-xp .calendar-wrapper .fc-timegrid-event.primary:hover {
    background-color: var(--xp-caption);
    border-color: var(--xp-caption-dark);
}

html.theme-xp .floating-menu {
    border: 1px solid #003c74 !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    background: var(--xp-face) !important;
}

html.theme-xp footer,
html.theme-xp .main-content > div.mt-auto {
    color: #ffffff;
}

/* Gift card / coupon voucher previews use CSS modules — do not restyle. */