/* =========================================================================
   CUSTOM DARK MODE FIXES (Non-AG Grid)
   ========================================================================= */

/* Dark/light toggle is an instant switch, not an animated fade. An earlier
   version animated background-color/color over 0.25s via a body.theme-transition
   class, but text color and background color don't fade in lockstep - for
   elements whose light and dark colors sit far apart (e.g. near-black label
   text on a near-white background fading to near-white text on near-black),
   there's a real mid-fade frame where text and background are close to the
   same color and the text reads as having vanished. An instant switch has no
   such frame. See applyTheme()/completeSwap() in _topbar.cshtml, which flips
   the stylesheet and every theme attribute together in one synchronous block. */

/* Fix Price Override Rules Table in Dark Mode */
body[data-theme-mode="dark"] #tblRules thead tr,
body[data-theme-mode="dark"] #tblRules thead th {
    background-color: #262b3c !important;
    color: #ffffffba !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] #tblRules tbody tr,
body[data-theme-mode="dark"] #tblRules tbody td {
    background-color: #2a3042 !important;
    color: #ffffffba !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] #tblRules tbody input:not([type="checkbox"]),
body[data-theme-mode="dark"] #tblRules tbody select {
    background-color: #262b3c !important;
    color: #ffffffba !important;
    border: 1px solid #404863 !important;
}

body[data-theme-mode="dark"] #tblRules tbody input:not([type="checkbox"]):disabled,
body[data-theme-mode="dark"] #tblRules tbody select:disabled {
    background-color: #32394e !important;
    color: #ffffffba !important;
}

/* Fix TinyMCE editor glaring white background in dark mode */
body[data-theme-mode="dark"] .tox-tinymce .tox-editor-container,
body[data-theme-mode="dark"] .tox-tinymce-aux {
    /* Uses the inline SVG color matrix defined in _Layout.cshtml to map White -> #262B3C and Black -> White exactly */
    filter: url('#tinymce-dark-exact') !important;
}
body[data-theme-mode="dark"] .tox-tinymce {
    border-color: #32394e !important;
}


/* Fix dropdown arrow icons in dark mode */
body[data-theme-mode="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a6b0cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Force layout bounds when collapsed in dark mode to prevent phantom scrollbars */
body.vertical-collpsed[data-theme-mode="dark"] {
    overflow-x: hidden;
}

/* OVERRIDE TEMPLATE BUG: The template hardcodes min-height: 1760px which causes a massive scrollbar */
body[data-sidebar=dark].vertical-collpsed {
    min-height: auto !important;
}

/* Force native select dropdown menus to be dark */
body[data-theme-mode="dark"] {
    color-scheme: dark;
}

body[data-theme-mode="dark"] select option,
body[data-theme-mode="dark"] .form-select option {
    background-color: #2a3042 !important;
    color: #ffffffba !important;
}

/* Fix Touchspin buttons (+/-) looking odd in dark mode
body[data-theme-mode="dark"] .bootstrap-touchspin .btn-primary {
    background-color: #2a3042 !important;
    border: 1px solid #404863 !important;
    color: #ffffffba !important;
}
body[data-theme-mode="dark"] .bootstrap-touchspin .btn-primary:hover {
    background-color: #32394e !important;
    border-color: #404863 !important; */
/* } */
body[data-theme-mode="dark"] .bootstrap-touchspin .bootstrap-touchspin-up {
    border-radius: 0 0.25rem 0 0 !important;
}

body[data-theme-mode="dark"] .bootstrap-touchspin .bootstrap-touchspin-down {
    border-radius: 0 0 0.25rem 0 !important;
}

/* Fix Select2 (multi-select) inputs in dark mode */
body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple,
body[data-theme-mode="dark"] .select2-container--default .select2-selection--single {
    background-color: #262b3c !important;
    border: 1px solid #828181 !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #32394e !important;
    border-color: #828181 !important;
    color: #ffffffba !important;
}

/* Hide phantom empty choices that might render as empty squares */
body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice:empty,
body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice[title=""] {
    display: none !important;
}

body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffffba !important;
    background-color: #404863 !important;
}

body[data-theme-mode="dark"] span.select2-container input.select2-search__field.select2-search__field,
body[data-theme-mode="dark"] .select2-container--default .select2-selection--multiple .select2-search__field,
body[data-theme-mode="dark"] .select2-search--inline .select2-search__field {
    color: #ffffffba !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body[data-theme-mode="dark"] .select2-dropdown {
    background-color: #2a3042 !important;
    border-color: #32394e !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #32394e !important;
}

body[data-theme-mode="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #404863 !important;
    color: #ffffffba !important;
}

/* Fix broken app-dark.min.css header color and layout spacing */
body[data-theme-mode="dark"] #page-topbar {
    background-color: #2a3042 !important;
}

/* app-dark.min.css's body[data-topbar="dark"] rule paints #page-topbar blue (#556ee6) -
   a mismatch with app.min.css's #2a3042 for that same selector. data-topbar="dark" is a
   permanent attribute set on <body> at layout render time (unrelated to the light/dark
   theme toggle), so the instant app-dark.min.css lands in the cascade during the toggle's
   stylesheet swap, its blue rule briefly wins (it's later in DOM order than the still-
   present old stylesheet) - before data-theme-mode="dark" is even set, so the rule above
   can't catch it yet. That's the "topbar flashes blue then corrects" glitch. Pin the
   correct color unconditionally on data-topbar="dark" alone, since #2a3042 is the intended
   color in both light and dark theme for this always-dark topbar. */
body[data-topbar="dark"] #page-topbar {
    background-color: #2a3042 !important;
}

/* app-dark.min.css's base .vertical-menu rule is still background:#fff (never themed).
   It only turns dark via the body[data-sidebar="dark"] override, so the sidebar briefly
   flashes white the instant app-dark.min.css finishes loading, before that override rule
   is applied. Keying off data-theme-mode (set together with the stylesheet swap) instead
   of data-sidebar removes that dependency on attribute-vs-stylesheet timing. */
body[data-theme-mode="dark"] .vertical-menu {
    background: #2a3042 !important;
}

/* Deliberately NOT gated on body[data-theme-mode="dark"]. During the toggle's stylesheet
   swap, app-dark.min.css's own un-gated .page-content{padding:calc(70px+24px)...} rule
   starts applying the instant the new <link> loads - which happens before data-theme-mode
   flips to "dark" (that only happens once completeSwap() runs in _topbar.cshtml). A
   data-theme-mode-gated fix can't catch that window, so the page briefly grows taller then
   snaps back once the attribute is set - the "DASHBOARD moves down then back" bug. Since
   this value also matches app.min.css's light-mode default exactly, pinning it
   unconditionally changes nothing in light mode and closes the gap in dark mode. */
.page-content {
    padding: calc(40px + 24px) calc(24px / 2) 20px calc(24px / 2) !important;
}

/* Same story as .page-content above: app-dark.min.css sets .page-title-box{padding-bottom:
   24px} vs app.min.css's 14px, with nothing reconciling the two. That's the exact 10px
   ("div.row 33.19 vs 43.19") gap that made the "DASHBOARD" row settle permanently lower in
   dark mode even after the transient swap-timing bubble was fixed. Unconditional (not
   data-theme-mode-gated) for the same reason: it also closes the mid-swap timing gap, and
   matches light mode's own value so it changes nothing there. */
.page-title-box {
    padding-bottom: 14px !important;
}

/* Same story again: app-dark.min.css's .footer{height:60px;padding:20px ...} is a genuinely
   different, unrelated-to-color layout value from app.min.css's .footer{height:34px;padding:7px
   ...} - not a light/dark design choice, just a base spacing inconsistency baked into that file
   (same pattern as .page-content/.page-title-box above). There's a separate, older
   body[data-theme-mode="dark"]-gated .footer rule further below (search "Fix footer spacing to
   match light mode") that already pins these same values for dark mode - but being gated means
   it does nothing in light mode, where app-dark.min.css's un-gated height:60px rule can still
   win the DOM-order cascade tie if it happens to sit later than app.min.css's at that moment
   (see _topbar.cshtml/_Layout.cshtml for how DOM order now decides theme precedence). That
   asymmetry is what let the footer jump on toggling. Pinning height/padding unconditionally
   here - matching the pattern already used for .page-content/.page-title-box above - closes it
   in both directions; the gated rule below still owns the color/border-top for dark mode. */
.footer {
    height: 34px !important;
    padding: 7px calc(24px / 2) !important;
}

/* Fix Variant Sections (Accordions) in Dark Mode*/
body[data-theme-mode="dark"] #variant-parent-section,
body[data-theme-mode="dark"] #adv-variant-parent-section {
    background-color: #222736 !important;
}

body[data-theme-mode="dark"] [id^="Variant-"],
body[data-theme-mode="dark"] [id^="adv-variant-section-"],
body[data-theme-mode="dark"] [id^="variant-section-"] {
    background-color: #262b3c !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] [id^="Variant-"] .content-collapse,
body[data-theme-mode="dark"] [id^="adv-variant-section-"] .content-collapse,
body[data-theme-mode="dark"] [id^="variant-section-"] .content-collapse {
    background-color: #262b3c !important;
    background: none !important;
    border-top: 4px solid #5A5C63 !important;
}

/* .collapsible (the "Variant N: (...)" header bar/button) has its own hardcoded
   background:#c7c7c7 + color:black in _layout.css, which loads after this file and wins
   the cascade since a <button> doesn't inherit background from its ancestor div. That left
   the variant header bar stuck light grey with near-invisible text in dark mode. */
body[data-theme-mode="dark"] [id^="Variant-"] .collapsible,
body[data-theme-mode="dark"] [id^="adv-variant-section-"] .collapsible,
body[data-theme-mode="dark"] [id^="variant-section-"] .collapsible {
    background-color: #32394e !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] [id^="Variant-"] .collapsible:after,
body[data-theme-mode="dark"] [id^="adv-variant-section-"] .collapsible:after,
body[data-theme-mode="dark"] [id^="variant-section-"] .collapsible:after {
    color: #ffffffba !important;
}

/* Fix Custom Image Uploader in dark mode */
body[data-theme-mode="dark"] .frame,
body[data-theme-mode="dark"] .upload-center {
    background-color: #2a3042 !important;
    border: 1px dashed #a6b0cf !important;
    border-radius: 4px;
}

body[data-theme-mode="dark"] .upload-center .title h1,
body[data-theme-mode="dark"] .upload-center .title h4 {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .upload-center .title p {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .upload-center .dropzone {
    background-color: transparent !important;
    border: none !important;
}

body[data-theme-mode="dark"] .upload-center .dropzone .upload-icon {
    filter: brightness(0) invert(1) !important;
}

/* Fix Syncfusion Grids (.e-grid) in dark mode */
body[data-theme-mode="dark"] .e-grid {
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] .e-grid .e-gridheader,
body[data-theme-mode="dark"] .e-grid .e-headercell {
    background-color: #262b3c !important;
    color: #ffffffba !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] .e-grid .e-gridcontent,
body[data-theme-mode="dark"] .e-grid .e-rowcell,
body[data-theme-mode="dark"] .e-grid .e-emptyrow {
    background-color: #2a3042 !important;
    color: #ffffffba !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] .e-grid .e-row:hover .e-rowcell {
    background-color: #32394e !important;
}

body[data-theme-mode="dark"] .e-grid .e-gridpager {
    background-color: #2a3042 !important;
    border-color: #32394e !important;
}

/* Fix Hardcoded Headers with #F7FBFF background in dark mode */
body[data-theme-mode="dark"] [style*="#F7FBFF"],
body[data-theme-mode="dark"] [style*="#f7fbff"] {
    background-color: #262b3c !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] [style*="#F7FBFF"] .text-black,
body[data-theme-mode="dark"] [style*="#f7fbff"] .text-black {
    color: #ffffffba !important;
}

/* Ensure all inputs and textareas have white text globally in dark mode */
body[data-theme-mode="dark"] .form-control,
body[data-theme-mode="dark"] .form-select,
body[data-theme-mode="dark"] input:not([type="checkbox"]):not([type="radio"]),
body[data-theme-mode="dark"] select,
body[data-theme-mode="dark"] textarea {
    background-color: #262b3c !important;
    color: #ffffffba !important;
}

/* Global exact border for common inputs */
body[data-theme-mode="dark"] .form-control,
body[data-theme-mode="dark"] .form-select,
body[data-theme-mode="dark"] input:not([type="checkbox"]):not([type="radio"]),
body[data-theme-mode="dark"] select,
body[data-theme-mode="dark"] textarea,
body[data-theme-mode="dark"] #txtShipping,
body[data-theme-mode="dark"] #txttotalDiscount,
body[data-theme-mode="dark"] #txtDepositPaid,
body[data-theme-mode="dark"] #txtOtherPayment {
    border: 1px solid #828181 !important;
}

/* Grid filter inputs and grid inputs */
body[data-theme-mode="dark"] .ag-theme-balham .form-control,
body[data-theme-mode="dark"] .ag-theme-balham .form-select,
body[data-theme-mode="dark"] .ag-theme-balham input,
body[data-theme-mode="dark"] .ag-theme-balham textarea {
    border: 1px solid #828181 !important;
}

body[data-theme-mode="dark"] .tox-tinymce {
    border: 1px solid #9397A5 !important;
    /* Maps to #828181 precisely via the SVG filter matrix */
}

body[data-theme-mode="dark"] .form-control:disabled,
body[data-theme-mode="dark"] .form-select:disabled,
body[data-theme-mode="dark"] input:not([type="checkbox"]):not([type="radio"]):disabled,
body[data-theme-mode="dark"] select:disabled,
body[data-theme-mode="dark"] textarea:disabled,
body[data-theme-mode="dark"] .form-control[readonly] {
    background-color: #32394e !important;
    border: 1px solid #828181 !important;
}

/* Global Text and Labels in Dark Mode */
body[data-theme-mode="dark"],
body[data-theme-mode="dark"] label,
body[data-theme-mode="dark"] .form-label,
body[data-theme-mode="dark"] .fw-bold,
body[data-theme-mode="dark"] span:not(.badge):not(.btn):not(.select2-selection__choice__remove):not([id^="colorLabel_"]):not(.text-danger):not(.ag-header-cell-text),
body[data-theme-mode="dark"] h1,
body[data-theme-mode="dark"] h2,
body[data-theme-mode="dark"] h3,
body[data-theme-mode="dark"] h4,
body[data-theme-mode="dark"] h5,
body[data-theme-mode="dark"] h6 {
    color: #ffffffba !important;
}

/* .text-dark must stay dark — used on tiles/cards with light backgrounds (e.g. EPOS category tiles) */
body[data-theme-mode="dark"] h1.text-dark,
body[data-theme-mode="dark"] h2.text-dark,
body[data-theme-mode="dark"] h3.text-dark,
body[data-theme-mode="dark"] h4.text-dark,
body[data-theme-mode="dark"] h5.text-dark,
body[data-theme-mode="dark"] h6.text-dark,
body[data-theme-mode="dark"] .text-dark {
    color: #343a40 !important;
}

body[data-theme-mode="dark"] h1.text-white,
body[data-theme-mode="dark"] h2.text-white,
body[data-theme-mode="dark"] h3.text-white,
body[data-theme-mode="dark"] h4.text-white,
body[data-theme-mode="dark"] h5.text-white,
body[data-theme-mode="dark"] h6.text-white,
body[data-theme-mode="dark"] .text-white {
    color: #ffffffba !important;
}

/* Ensure all placeholder text is white in dark mode */
body[data-theme-mode="dark"] ::placeholder {
    color: #ffffffba !important;
    opacity: 1 !important;
}

body[data-theme-mode="dark"] ::-webkit-input-placeholder {
    color: #ffffffba !important;
    opacity: 1 !important;
}

body[data-theme-mode="dark"] ::-moz-placeholder {
    color: #ffffffba !important;
    opacity: 1 !important;
}

body[data-theme-mode="dark"] :-ms-input-placeholder {
    color: #ffffffba !important;
    opacity: 1 !important;
}

/* Dark mode footer color. height/padding are now pinned unconditionally further up (search
   "Same story again" above) so they're not repeated here. */
body[data-theme-mode="dark"] .footer {
    background-color: #2a3042 !important;
    /* Lighter dark to stand out from body */
    border-top: 1px solid #32394e !important;
    /* Distinct line just like light mode */
}

/* Restore missing SimpleBar CSS structure that was omitted from app-dark.min.css */
body[data-theme-mode="dark"] .simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit;
}

body[data-theme-mode="dark"] .simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0;
}

body[data-theme-mode="dark"] .simplebar-offset {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    left: 0 !important;
    bottom: 0;
    right: 0 !important;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}

body[data-theme-mode="dark"] .simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    visibility: visible;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: none;
    padding: 0 !important;
}

body[data-theme-mode="dark"] .simplebar-content-wrapper::-webkit-scrollbar,
body[data-theme-mode="dark"] .simplebar-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

body[data-theme-mode="dark"] .simplebar-content:after,
body[data-theme-mode="dark"] .simplebar-content:before {
    content: ' ';
    display: table;
}

body[data-theme-mode="dark"] .simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none;
}

body[data-theme-mode="dark"] .simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex-grow: inherit;
    flex-shrink: 0;
    flex-basis: 0;
}

body[data-theme-mode="dark"] .simplebar-height-auto-observer {
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

body[data-theme-mode="dark"] .simplebar-track {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

body[data-theme-mode="dark"] [data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    user-select: none;
}

body[data-theme-mode="dark"] [data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all;
}

body[data-theme-mode="dark"] .simplebar-scrollbar {
    position: absolute;
    right: 2px;
    width: 4px;
    min-height: 10px;
}

body[data-theme-mode="dark"] .simplebar-scrollbar:before {
    position: absolute;
    content: '';
    background: #a2adb7;
    border-radius: 7px;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity .2s linear;
}

body[data-theme-mode="dark"] .simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    transition: opacity 0s linear;
}

body[data-theme-mode="dark"] .simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px;
}

body[data-theme-mode="dark"] .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px;
}

body[data-theme-mode="dark"] .simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px;
}

body[data-theme-mode="dark"] .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    height: 100%;
    left: 2px;
    right: 2px;
}

body[data-theme-mode="dark"] .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto;
}

body[data-theme-mode="dark"] [data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    right: auto;
    left: 0;
}




/* Fix custom loaders with hardcoded white backgrounds */
body[data-theme-mode="dark"] #loader_PO,
body[data-theme-mode="dark"] .loader {
    background-color: rgba(42, 48, 66, 0.95) !important;
    /* Matches card background #2a3042 with high opacity */
}

/* Fix Advertisement Admin tab boxes */
body[data-theme-mode="dark"] .tab-box {
    background-color: #2a3042 !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] .tab-header {
    border-bottom-color: #32394e !important;
}

body[data-theme-mode="dark"] .mandatory-input {
    background-color: #2d354f !important;
    /* Subtle dark-blue tint for mandatory fields */
}

/* SweetAlert2 Dark Mode Overrides */
body[data-theme-mode="dark"] .swal2-popup {
    background-color: #2a3042 !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .swal2-title {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .swal2-html-container,
body[data-theme-mode="dark"] .swal2-content {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .swal2-input,
body[data-theme-mode="dark"] .swal2-textarea {
    background-color: #262b3c !important;
    color: #ffffffba !important;
    border: 1px solid #32394e !important;
}

body[data-theme-mode="dark"] .swal2-input:focus,
body[data-theme-mode="dark"] .swal2-textarea:focus {
    border-color: #556ee6 !important;
    box-shadow: none !important;
}

body[data-theme-mode="dark"] .swal2-validation-message {
    background-color: #262b3c !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .swal2-footer {
    border-top: 1px solid #32394e !important;
}

body[data-theme-mode="dark"] .swal2-close {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .swal2-close:hover {
    color: #ffffffba !important;
}

/* EPOS Open Till Modal Overrides */
body[data-theme-mode="dark"] .clock-in-cards-parent {
    background-color: #222736 !important;
    border: 1px solid #222736;
}

body[data-theme-mode="dark"] .clock-in-cards-parent.bg-secondary {
    background-color: #74788d !important;
}

body[data-theme-mode="dark"] .clock-in-cards-parent .epos-card-title {
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .calculator__keys_epos,
body[data-theme-mode="dark"] .calculator__keys {
    background-color: #2a3042 !important;
}

body[data-theme-mode="dark"] .calculator__key,
body[data-theme-mode="dark"] .calculator__key__dark {
    background-color: #222736 !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .calculator__key:hover,
body[data-theme-mode="dark"] .calculator__key:active,
body[data-theme-mode="dark"] .calculator__key__dark:hover,
body[data-theme-mode="dark"] .calculator__key__dark:active {
    background-color: #1e2230 !important;
}

body[data-theme-mode="dark"] .calculator_output_epos_login,
body[data-theme-mode="dark"] .calculator__output {
    color: #ffffffba !important;
    border-bottom: 5px solid #32394e !important;
}

body[data-theme-mode="dark"] .calculator_output_epos_login:focus,
body[data-theme-mode="dark"] .calculator__output:focus {
    color: #ffffffba !important;
}

/* EPOS Website Orders Modal Overrides */
body[data-theme-mode="dark"] #websiteOrderStickyHeader,
body[data-theme-mode="dark"] #stickyHeader {
    background-color: #2a3042 !important;
}

/* Sidebar Active Item Styling */
body[data-theme-mode="dark"] #sidebar-menu a.active,
body[data-theme-mode="dark"] #sidebar-menu a.active i,
body[data-theme-mode="dark"] #sidebar-menu a.active span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body[data-theme-mode="dark"] #sidebar-menu a.active {
    position: relative;
    background-color: #32394e !important;
}

body[data-theme-mode="dark"] #sidebar-menu a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #ffffff;
}

/* Fix breadcrumbs in dark mode - alignment only */
body[data-theme-mode="dark"] ul.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

body[data-theme-mode="dark"] ul.breadcrumb li {
    display: inline-flex;
    align-items: center;
}

body[data-theme-mode="dark"] ul.breadcrumb li a {
    background-color: #32394e;
    color: #ffffffba;
    border-color: #404863;
}

body[data-theme-mode="dark"] ul.breadcrumb li:last-child a {
    background-color: #32394e;
    color: #556ee6;
    border-color: #556ee6;
}

body[data-theme-mode="dark"] ul.breadcrumb li:only-child a {
    background-color: #32394e;
    color: #ffffffba;
    border-color: #404863;
}

body[data-theme-mode="dark"] ul.breadcrumb li a:hover,
body[data-theme-mode="dark"] ul.breadcrumb li:last-child a:hover,
body[data-theme-mode="dark"] ul.breadcrumb li:only-child a:hover {
    background-color: #556ee6;
    color: #ffffff !important;
    border-color: #556ee6;
}

body[data-theme-mode="dark"] ul.breadcrumb li+li:before {
    color: #ffffffba;
}

/* Fix EPOS Basket Product Cards in Dark Mode */
body[data-theme-mode="dark"] .addProductCard {
    background-color: #2a3042 !important;
}

body[data-theme-mode="dark"] .add-Product-Card-closed {
    background-color: #505a7a !important;
}

body[data-theme-mode="dark"] .syncing-text {
    color: #ffffff !important;
}

body[data-theme-mode="dark"] .epos-sidebar-buttons {
    background-color: #404863 !important;
    color: #ffffffba !important;
    border: 1px solid #404863 !important;
}

body[data-theme-mode="dark"] .epos-sidebar-buttons:hover {
    background-color: #505a7a !important;
    color: #ffffff !important;
}

body[data-theme-mode="dark"] .addProductCard.bg-dark {
    background-color: #2a3042 !important;
    /* Override bootstrap's swapped .bg-dark in app-dark.css */
}

body[data-theme-mode="dark"] .borderBottomDiv {
    background-color: #32394e !important;
}

body[data-theme-mode="dark"] .addProductCard .epos-footer-card-qty-update {
    background-color: #262b3c !important;
    /* Slight contrast for the footer controls */
}

/* Fix EPOS Basket Touchspin Controls to match original look with prominent borders */
body[data-theme-mode="dark"] .addProductCard .bootstrap-touchspin .btn,
body[data-theme-mode="dark"] .addProductCard .bootstrap-touchspin .btn:hover,
body[data-theme-mode="dark"] .addProductCard .bootstrap-touchspin .btn:active {
    background-color: transparent !important;
    border: 1px solid #828181 !important;
    color: #ffffffba !important;
    box-shadow: none !important;
}

body[data-theme-mode="dark"] .addProductCard .bootstrap-touchspin input {
    background-color: transparent !important;
    border: 1px solid #828181 !important;
    color: #ffffffba !important;
    box-shadow: none !important;
}

body[data-theme-mode="dark"] .addProductCard .bootstrap-touchspin .bootstrap-touchspin-down,
body[data-theme-mode="dark"] .addProductCard .bootstrap-touchspin .bootstrap-touchspin-up {
    border-radius: 28px !important;
}

/* Fix EPOS Website/Customer Orders Cards in Dark Mode */
body[data-theme-mode="dark"] .customer-order-cards {
    background-color: #222736 !important;
    /* Darker than modal background (#2a3042) for a distinct inset look */
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] .customer-order-cards:hover {
    background-color: #262b3c !important;
    /* Slightly lighter on hover */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme-mode="dark"] .customer-order-cards:hover button,
body[data-theme-mode="dark"] .customer-order-cards:hover label.btn {
    background-color: #556ee6 !important;
    /* Add primary blue pop on hover */
    color: #ffffffba !important;
}

/* Fix EPOS Basket/Product Discount UI hardcoded white background */
body[data-theme-mode="dark"] .DicountTypesDialogue .bg-white,
body[data-theme-mode="dark"] #BasketProductDiscountTypes .bg-white,
body[data-theme-mode="dark"] #BasketDiscountTypes .bg-white,
body[data-theme-mode="dark"] div[DiscountType] {
    background-color: transparent !important;
}

body[data-theme-mode="dark"] .DicountTypesDialogue .border,
body[data-theme-mode="dark"] #BasketProductDiscountTypes .border,
body[data-theme-mode="dark"] #BasketDiscountTypes .border,
body[data-theme-mode="dark"] div[DiscountType] .border {
    border-color: #32394e !important;
}

/* Fix ag-Grid status bar text in Dark Mode */
body[data-theme-mode="dark"] .ag-theme-balham .ag-status-bar,
body[data-theme-mode="dark"] .ag-theme-balham .ag-status-bar * {
    color: #ffffffba !important;
}

/* Fix EPOS Item Details Modal hardcoded colors in Dark Mode */
body[data-theme-mode="dark"] *[style*="#F0FAFF" i] {
    background-color: #32394e !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] h4[style*="#BEBEBE" i],
body[data-theme-mode="dark"] h5[style*="#BEBEBE" i] {
    background-color: #222736 !important;
    color: #ffffffba !important;
    border-bottom: 1px solid #404863 !important;
}

/* Preserve inline primary blue text in dark mode */
body[data-theme-mode="dark"] p[style*="color: #556ee6" i],
body[data-theme-mode="dark"] span[style*="color: #556ee6" i] {
    color: #556ee6 !important;
}

/* Fix Bootstrap Accordions in Dark Mode (e.g. Variant Headers) */
body[data-theme-mode="dark"] .accordion-item {
    background-color: #222736 !important;
    border-color: #32394e !important;
}

body[data-theme-mode="dark"] .accordion-button {
    background-color: #32394e !important;
    color: #ffffffba !important;
}

body[data-theme-mode="dark"] .accordion-button:not(.collapsed) {
    background-color: #262b3c !important;
    color: #ffffff !important;
}

body[data-theme-mode="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}