/* Dark Purple Navbar and Footer Background */

.dark-theme .navbar, .dark-theme .footer {
    background-color: #4B0082 !important; /* Royal Purple */
    color: #F5EBFF;
}

/* Dark-Medium Shade for Table Headers (use theme variable) */
.dark-theme th {
    background-color: var(--menu-link-color, #4B0082) !important;
}

/* Dark Shaded A Href Color */
.dark-theme a, p, div, li, strong {
    color: #F5EBFF;
    /*color: #800080; /* Purple */
}

/* Adjust the color for the checkboxes (fandom lists and table checkbox cells) */
body.dark-theme td.checkbox-cell input[type="checkbox"],
body.dark-theme td.checkbox-cell label {
    color: var(--card-text, #F5EBFF) !important;
}

/* Document-level scrollbars: style the page/window scrollbar (site-wide)
   Use `html` and `body` (no descendant combinator) so the browser's
   main scrollbar matches the footer/titlebar purple across pages. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--card-bg, #352b4a) !important;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: #4B0082 !important; /* match footer/titlebar purple */
    border-radius: 12px !important;
    border: 3px solid rgba(0,0,0,0) !important;
    background-clip: padding-box !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
    background: #4B0082 !important;
    box-shadow: 0 0 0 3px rgba(75,0,130,0.12) !important;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    background: #4B0082 !important;
}

/* Firefox fallback for document-level scrollbar */
html {
    scrollbar-color: #4B0082 var(--card-bg, #352b4a) !important;
    scrollbar-width: thin !important;
}

/* Also ensure when the class is present on body the document scrollbar
   is explicitly styled (some engines require the pseudo-element on the
   element itself rather than descendants). */
body.dark-theme::-webkit-scrollbar,
body.dark-theme::-webkit-scrollbar-track,
body.dark-theme::-webkit-scrollbar-thumb {
    /* intentionally empty: rules above already target `body`/`html` with !important */
}


/* Fandom / checkbox-list layout inside admin tables and ajax modals
   Ensure CheckboxSelectMultiple (ul/li) renders as a vertical list inside
   the table cell instead of escaping the table layout. */
body.dark-theme td.checkbox-cell ul,
#ajaxModal td.checkbox-cell ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    max-height: 36vh !important;
    overflow: auto !important;
}

#ajaxModal td.checkbox-cell .form-check,
#ajaxModal td.checkbox-cell ul li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
}

/* Also support CheckboxSelectMultiple when the renderer uses a div wrapper
   (some widget renderers output <div id="id_fandoms"><div>...</div></div>). */
body.dark-theme td.checkbox-cell > div,
#ajaxModal td.checkbox-cell > div,
body.dark-theme td.checkbox-cell .checkboxes,
#ajaxModal td.checkbox-cell .checkboxes {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    max-height: 36vh !important;
    overflow: auto !important;
}

body.dark-theme td.checkbox-cell > div > div,
#ajaxModal td.checkbox-cell > div > div,
body.dark-theme td.checkbox-cell .checkboxes > div,
#ajaxModal td.checkbox-cell .checkboxes > div {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
}

body.dark-theme td.checkbox-cell input[type="checkbox"],
#ajaxModal td.checkbox-cell input[type="checkbox"] {
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
}

#ajaxModal td.checkbox-cell label,
body.dark-theme td.checkbox-cell label {
    color: var(--card-text) !important;
}

/* Custom checkbox visuals for dark-theme admin modals and table cells.
   This keeps the native input accessible but hides the default box and
   renders a themed box via the label::before pseudo-element. Supports
   both "input + label" and "label wrapping input" patterns (uses :has
   where available). */
body.dark-theme td.checkbox-cell input[type="checkbox"],
body.dark-theme .ad-admin-wrapper input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
}

body.dark-theme td.checkbox-cell label,
body.dark-theme .ad-admin-wrapper .form-check-label,
body.dark-theme .ad-admin-wrapper .form-check > label {
    position: relative !important;
    padding-left: 26px !important;
    cursor: pointer !important;
}

body.dark-theme td.checkbox-cell label::before,
body.dark-theme .ad-admin-wrapper .form-check-label::before,
body.dark-theme .ad-admin-wrapper .form-check > label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid rgba(245,235,255,0.12) !important;
    background-color: var(--card-bg, #352b4a) !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}

/* Checked state when input precedes the label */
body.dark-theme td.checkbox-cell input[type="checkbox"]:checked + label::before,
body.dark-theme .ad-admin-wrapper input[type="checkbox"]:checked + label.form-check-label::before {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(245,235,255,0.26) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

/* Checked state when label wraps the input (use :has where supported) */
body.dark-theme td.checkbox-cell label:has(input[type="checkbox"]:checked)::before,
body.dark-theme .ad-admin-wrapper .form-check-label:has(input[type="checkbox"]:checked)::before {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(245,235,255,0.26) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

/* Focus ring for keyboard users */
body.dark-theme td.checkbox-cell input[type="checkbox"]:focus + label::before,
body.dark-theme .ad-admin-wrapper input[type="checkbox"]:focus + label.form-check-label::before {
    outline: 2px solid rgba(75,0,130,0.16) !important;
    outline-offset: 2px !important;
}

/* In ajax admin modals, rely on the native themed checkbox and disable the
   label pseudo-checkbox so injected admin forms do not render both systems. */
body.dark-theme #ajaxModal .ad-admin-wrapper .form-check-label,
body.dark-theme #ajaxModal .ad-admin-wrapper .form-check > label {
    padding-left: 0 !important;
}

body.dark-theme #ajaxModal .ad-admin-wrapper .form-check-label::before,
body.dark-theme #ajaxModal .ad-admin-wrapper .form-check > label::before {
    content: none !important;
}

/* Fallback: style bare checkboxes inside modal content when the template
   does not render a label wrapper or adjacent label. This ensures simple
   template patterns like `{{ form.available }}` render themed boxes. */
body.dark-theme .modal-content input[type="checkbox"],
body.dark-theme #ajaxModal input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(245,235,255,0.12) !important;
    border-radius: 3px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
    opacity: 1 !important;
}

body.dark-theme .modal-content input[type="checkbox"]:checked,
body.dark-theme #ajaxModal input[type="checkbox"]:checked {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(245,235,255,0.26) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' d='M1 5.2l3.1 3L11 1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    color: transparent !important;
}

body.dark-theme .modal-content input[type="checkbox"]:focus,
body.dark-theme #ajaxModal input[type="checkbox"]:focus {
    outline: 2px solid rgba(75,0,130,0.16) !important;
    outline-offset: 2px !important;
}

/* Dark Shaded Plum with Grey for buttons*/
.dark-theme button {
    background-color: #4B0082;
}
/* Force white text for warning buttons in dark modals/admin UI */
body.dark-theme .modal-content .btn-warning,
body.dark-theme .modal .btn-warning,
body.dark-theme .ad-admin-wrapper .btn-warning {
    color: var(--card-text) !important;
}
/* Exception: keep Track Order button text as site brown (stronger specificity) */
body.dark-theme .modal-content .btn-warning.track-order-btn,
body.dark-theme .modal .btn-warning.track-order-btn,
body.dark-theme .ad-admin-wrapper .btn-warning.track-order-btn,
body.dark-theme a.btn.btn-warning.track-order-btn {
    color: #8B5E3C !important;
}
/* Dark Grey-Purple Background Color */
.dark-theme body {
    background-color: #2E294E; /* Dark Lavender Gray */
}

/* Styles for light and dark themes */
.dark-theme {
    /* Add styles for the light theme */
    background-color: #2E294E; /* Dark Lavender Gray */
    color: #F5EBFF !important;
    --menu-link-color: #4B0082;
        --menu-link-hover-color: plum;
        /* Card/box variables */
        --card-bg: #352b4a;
        --card-border: rgba(245,235,255,0.06);
        --card-text: #F5EBFF;
        --card-subtext: rgba(245,235,255,0.9);
}

/* Cards & Boxes: dark-theme overrides (applies to product cards, service/learning/community boxes) */
body.dark-theme .card,
body.dark-theme .product-card,
body.dark-theme .default-custom-card,
body.dark-theme .product-body,
body.dark-theme .service-box,
body.dark-theme .learning-box,
body.dark-theme .community-box {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
}

body.dark-theme .product-card .product-title,
body.dark-theme .service-box h2,
body.dark-theme .learning-box h2,
body.dark-theme .community-box h2 {
    color: var(--card-text, #FFFFFF) !important;
}

body.dark-theme .product-card .product-sub,
body.dark-theme .service-box p,
body.dark-theme .learning-box p,
body.dark-theme .community-box p,
body.dark-theme .product-card .product-price {
    color: var(--card-subtext) !important;
}

body.dark-theme #productQuickViewModal .quickview-price {
    color: var(--card-text, #FFFFFF) !important;
}

body.dark-theme .service-link:hover .service-box,
body.dark-theme .learning-link:hover .learning-box,
body.dark-theme .community-link:hover .community-box,
body.dark-theme .product-card:hover {
    background-color: rgba(255,255,255,0.02) !important;
    border-color: var(--menu-link-hover-color) !important;
    transform: translateY(-4px);
}

body.dark-theme .product-card .product-actions .btn,
body.dark-theme .product-card .btn-primary,
body.dark-theme .product-card .btn {
    background-color: #4B0082 !important; /* match modal/cart primary */
    border-color: #4B0082 !important;
    color: var(--card-text) !important;
    border-radius: 0.5rem !important;
}

/* Customize New button text should match the product-sub text color */
body.dark-theme .product-card .product-actions .customize-new-btn {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: var(--card-subtext) !important;
    border-radius: 0.5rem !important;
}

/* Product badges (In Stock / Made to Order) — light purple pills */
body.dark-theme .product-badge {
    background-color: #E9D8F7 !important; /* light lilac */
    color: #4B0082 !important; /* dark purple text */
    border: 1px solid rgba(75,0,130,0.06) !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 0.375rem !important;
    font-weight: 600;
}

body.dark-theme .product-card a,
body.dark-theme .service-box a,
body.dark-theme .learning-box a,
body.dark-theme .community-box a {
    color: var(--menu-link-hover-color) !important;
}

body.dark-theme .product-thumb {
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Style for the toggle switch based on the theme */
.light-theme #moon, 
.dark-theme #sun {
    opacity: 1;
}

#moon {
    display: inline-block; /* or 'none' based on your initial preference */
}

#sun {
    display: none; /* or 'inline-block' based on your initial preference */
}

.item-status.text-success {
    color: green;
    font-weight: bolder;
}

.item-status.text-danger {
    color: red;
    font-weight: bolder;
}

/* breadcrumbs Style*/

#breadcrumbs {
    margin-left: 10px;
}
/* Input text and placeholder color for dark theme */
body.dark-theme input.form-control,
body.dark-theme textarea.form-control,
body.dark-theme .form-select,
body.dark-theme select.form-select {
    color: var(--card-text) !important;
    -webkit-text-fill-color: var(--card-text) !important;
}
body.dark-theme input.form-control::placeholder,
body.dark-theme textarea.form-control::placeholder,
body.dark-theme .form-select::placeholder,
body.dark-theme select.form-select::placeholder {
    color: rgba(245,235,255,0.85) !important;
    opacity: 1 !important;
}
/* Autofill handling (Chrome) */
body.dark-theme input:-webkit-autofill,
body.dark-theme input:-webkit-autofill:hover,
body.dark-theme input:-webkit-autofill:focus,
body.dark-theme textarea:-webkit-autofill,
body.dark-theme textarea:-webkit-autofill:hover,
body.dark-theme textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--card-text) !important;
    box-shadow: 0 0 0px 1000px var(--card-bg) inset !important;
}
/* Ensure form controls and tokenization/card widgets follow dark theme */
body.dark-theme .form-select,
body.dark-theme select.form-select,
body.dark-theme .form-control,
body.dark-theme input.form-control,
body.dark-theme textarea.form-control {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}
body.dark-theme .form-select option,
body.dark-theme .form-select optgroup {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}
body.dark-theme .form-select:focus,
body.dark-theme .form-control:focus,
body.dark-theme input.form-control:focus,
body.dark-theme textarea.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(75,0,130,0.25) !important;
    outline: none !important;
}
body.dark-theme .payment-method-box {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: var(--card-border) !important;
}
body.dark-theme .fake-square-card .sdk-header {
    background-color: var(--card-text, #FFFFFF) !important;
    color: var(--card-text) !important;
}
body.dark-theme .fake-square-card label {
    color: var(--card-text) !important;
}
body.dark-theme .fake-square-card input.form-control {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}
body.dark-theme .paypal-box input.form-control {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}

/* Style for Back Button */
.back-button {
    font-size: 18px; /* Adjust the font size as needed */
    font-weight: bold;
    text-decoration: none;
    color: #F5EBFF;/* Set the color as needed */
    margin-left: 10px; /* Adjust the margin as needed */
}

/* Style for Back to Top Button */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 18px; /* Adjust the font size as needed */
    font-weight: bold;
    background-color: #5C6B7F; /* Set the background color as needed */
    color: #F5EBFF; /* Set the text color as needed */
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

/* Customize DataTables styling */
.dataTables_wrapper {
    position: relative;
}

/* Style for the "Show x entries" dropdown */
.dataTables_length {
    margin-bottom: 10px;    
}

.dataTables_length label {
    color: #F5EBFF;
}

.dataTables_length select {
    color: #F5EBFF;
}
.dataTables_length option {
    background-color: #4B0082;
}

/* Style for the search input */
.dataTables_filter label {
    margin-right: 10px;
    color: #F5EBFF;
}

.dataTables_filter input {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #F5EBFF;
}

#DataTables_Table_0_info {
    color: #F5EBFF;
}

/* Style for the pagination */
.dataTables_paginate {
    margin-top: 10px;
}

.dataTables_paginate a {
    color: #F5EBFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    color: #F5EBFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #001f3f;
}

/* Style for Previous and Next buttons */
.paginate_button {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

/* Style for the active page button */
.paginate_button.current {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Dark theme for the jQuery UI dialog */
.ui-dialog {
    background-color: #2E294E; /* Replace with your dark background color */
    color: #F5EBFF; /* Replace with your text color */
}
/* Dark theme for the title bar of the dialog */
.ui-dialog .ui-dialog-titlebar {
    background-color: #663399;/* Replace with your title bar color */
    color: #F5EBFF; /* Replace with your text color */
}
/* Dark theme for the content area of the dialog */
.ui-dialog .ui-dialog-content {
    background-color: #2E294E; /* Replace with your dark background color */
}

/* Dark theme for the close button hover state */
.ui-dialog-titlebar-close:hover {
    background-color: #F5EBFF; /* Replace with your hover color */
    color: #663399; /* Replace with your hover text color */
}

.ui-dialog input,
.ui-dialog textarea {
    background-color: #F5EBFF;
    color: #001f3f;

}
.ui-dialog label {
    color: #F5EBFF;
}
.ui-dialog button {
    /* Add styles for form elements here */
    background-color: #4B0082;
    color: #F5EBFF;
    border: solid 1px #F5EBFF;
    border-radius: 12px;
}
.ui-dialog button:hover {
    /* Add styles for form elements here */
    background-color: gray;
    border: none;
    border-radius: 12px;
}

/* jQuery UI Datepicker: dark-theme adjustments so calendar popups match site palette */
body.dark-theme .ui-datepicker {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}
body.dark-theme .ui-datepicker .ui-datepicker-header {
    background: #4B0082 !important;
    color: var(--card-text) !important;
    border: none !important;
}
body.dark-theme .ui-datepicker .ui-datepicker-title {
    color: var(--card-text) !important;
}
body.dark-theme .ui-datepicker .ui-state-default {
    background: transparent !important;
    color: var(--card-text) !important;
    border-radius: 0.25rem !important;
}
body.dark-theme .ui-datepicker .ui-state-active,
body.dark-theme .ui-datepicker .ui-state-highlight {
    background: var(--menu-link-color, #663399) !important;
    color: #ffffff !important;
    border: none !important;
}
body.dark-theme .ui-datepicker .ui-datepicker-calendar th {
    color: var(--card-subtext) !important;
}
body.dark-theme .ui-datepicker .ui-datepicker-calendar td a {
    color: var(--card-text) !important;
}
body.dark-theme .ui-datepicker .ui-datepicker-prev,
body.dark-theme .ui-datepicker .ui-datepicker-next {
    color: var(--card-text) !important;
}
body.dark-theme .ui-widget-overlay {
    background: rgba(0,0,0,0.65) !important;
}

/* Small calendar trigger button next to date inputs in filter dropdowns */
body.dark-theme .filter-dropdown .datepicker-open,
body.dark-theme .datepicker-open {
    background: transparent !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    color: var(--card-text) !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin-left: 0.35rem !important;
    border-radius: 0.25rem !important;
    font-size: 14px !important;
}

/* Position datepicker opener inside wrapped inputs in AJAX modals */
body.dark-theme .modal-content .date-input-wrap {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
}
body.dark-theme .modal-content .date-input-wrap .datepicker-open {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1060 !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--card-border, rgba(245,235,255,0.06)) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--card-text) !important;
}
body.dark-theme .modal-content .date-input-wrap input.form-control,
body.dark-theme .modal-content .date-input-wrap input[type="text"] {
    padding-right: 44px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Make modal datepicker button visually match the per-column filter button */
body.dark-theme .modal-content .btn.datepicker-open,
body.dark-theme #ajaxModal .btn.datepicker-open {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    background: transparent !important;
    color: var(--card-text) !important;
    border-radius: 0.25rem !important;
}

/* Fallback calendar icon for templates using Bootstrap 3 glyphicons inside modals
   Render a small inline SVG so the calendar glyph is visible even when Glyphicon
   font isn't loaded. Scoped to modal content and ajax modal. */
body.dark-theme .modal-content .datetimepicker span.glyphicon,
body.dark-theme #ajaxModal .datetimepicker span.glyphicon,
body.dark-theme .modal-content .datetimepicker .fa-calendar,
body.dark-theme .modal-content .datepicker-open span.glyphicon,
body.dark-theme #ajaxModal .datepicker-open span.glyphicon,
body.dark-theme .modal-content .datepicker-open .fa-calendar {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='12' rx='2' fill='none' stroke='%23F5EBFF' stroke-width='1.2'/%3E%3Cline x1='1' y1='6' x2='15' y2='6' stroke='%23F5EBFF' stroke-width='1.2'/%3E%3Crect x='3' y='8' width='2' height='2' fill='%23F5EBFF'/%3E%3Crect x='6' y='8' width='2' height='2' fill='%23F5EBFF'/%3E%3C/svg%3E") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    color: transparent !important;
    cursor: pointer !important;
    margin-left: 0.35rem !important;
}

/* Generic filter dropdown and toggle styling for dark theme */
body.dark-theme .filter-dropdown {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}
body.dark-theme th.filterable .filter-toggle,
body.dark-theme .ad-admin-wrapper th.filterable .filter-toggle {
    background: rgba(255,255,255,0.02) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
}

/* DataTables length select and other selects in dark theme */
body.dark-theme .dataTables_length select,
body.dark-theme .dataTables_wrapper select,
body.dark-theme select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}
body.dark-theme .dataTables_length select:focus,
body.dark-theme select:focus {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--card-text) !important;
    outline: none !important;
}
body.dark-theme .dataTables_length select option,
body.dark-theme select option {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Ensure bootstrap dropdown menus follow dark palette */
body.dark-theme .dropdown-menu,
body.dark-theme .user-links-container,
body.dark-theme .admin-links-container,
body.dark-theme .filter-links-container,
body.dark-theme .dropdown-menu .dropdown-item {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}

/* Ensure DataTables header pills use card-text for readability */
body.dark-theme .table thead tr th.custom-thead {
    background-color: var(--menu-link-color, #4B0082) !important;
    color: var(--card-text, #F5EBFF) !important;
}
body.dark-theme .filter-dropdown .datepicker-open:hover,
body.dark-theme .datepicker-open:hover {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--card-text) !important;
}

#dreamlistDropdown {
    width: auto; /* Set width to auto to match the length of the selected option */
}

#addToExistingDreamlistBtn {
    width: fit-content;
    margin-left: 10px; /* Adjust the margin for spacing between dropdown and button */
}

/* Dark-theme modal/dialog overrides: align modal visuals with card styling */
body.dark-theme #globalModal .modal-content,
body.dark-theme .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.04) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

/* Ensure readonly/plaintext inputs inside dark modals are readable
   (Bootstrap's .form-control-plaintext defaults to dark text on light backgrounds)
   Scope to modal/content and ajax modal to avoid affecting other areas. */
body.dark-theme .modal-content .form-control-plaintext,
body.dark-theme .modal .form-control-plaintext,
body.dark-theme #ajaxModal .form-control-plaintext,
body.dark-theme .modal-content input[readonly].form-control-plaintext {
    color: var(--card-text) !important;
    opacity: 1 !important;
}

/* DataTables: ensure table header, borders and pagination match dark theme */
body.dark-theme .dataTables_wrapper table.dataTable thead th,
body.dark-theme table.dataTable thead th,
body.dark-theme .dataTables_wrapper .dataTables_scrollHeadInner table thead th,
body.dark-theme table.table thead th {
    background-color: var(--menu-link-color, #663399) !important;
    color: var(--card-text) !important;
    border-bottom: 1px solid rgba(245,235,255,0.06) !important;
}

/* Ensure DataTables sorting icons stay visible */
body.dark-theme table.dataTable thead th::after,
body.dark-theme table.dataTable thead th::before {
    color: var(--card-text) !important;
    opacity: 0.95 !important;
}

/* PAGE-SPECIFIC OVERRIDE: My Orders table header uses #my-orders-table
   The page template sets header colors (admin blue). Ensure dark-theme
   forces the purple palette for this table by scoping to body.dark-theme
   and using !important so it wins even if the page CSS is later inlined. */
body.dark-theme #my-orders-table thead th,
body.dark-theme #my-orders-table thead td,
body.dark-theme #my-orders-table thead th.sorting,
body.dark-theme #my-orders-table thead th.sorting_asc,
body.dark-theme #my-orders-table thead th.sorting_desc {
    background-color: #4B0082 !important; /* match footer background */
    color: var(--card-text) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(245,235,255,0.06) !important;
}

body.dark-theme #my-orders-table thead th a,
body.dark-theme #my-orders-table thead th a:link,
body.dark-theme #my-orders-table thead th a:visited,
body.dark-theme #my-orders-table thead th a:hover,
body.dark-theme #my-orders-table thead th a:active,
body.dark-theme #my-orders-table thead th a:focus {
    color: var(--card-text) !important;
}

/* My Orders: filter dropdown, filter input, and length select (dark-theme) */
body.dark-theme #my-orders-table .filter-dropdown,
body.dark-theme #my-orders-table .filter-dropdown .dropdown-menu,
body.dark-theme #my-orders-table .filter-dropdown .filter-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
}

body.dark-theme #my-orders-table .filter-dropdown input,
body.dark-theme #my-orders-table .filter-dropdown textarea,
body.dark-theme #my-orders-table .filter-dropdown select,
body.dark-theme #my-orders-table .filter-dropdown .form-control {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

/* DataTables controls for this specific table */
body.dark-theme #my-orders-table_wrapper .dataTables_filter input,
body.dark-theme #my-orders-table_wrapper .dataTables_filter input.form-control,
body.dark-theme #my-orders-table_wrapper .dataTables_length select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

body.dark-theme #my-orders-table_wrapper .dataTables_length option,
body.dark-theme #my-orders-table_wrapper .dataTables_filter option {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

body.dark-theme #my-orders-table_wrapper .dataTables_filter input::placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

/* My Orders: force Bootstrap/DataTables body rows into the dark palette */
body.dark-theme #my-orders-table {
    --bs-table-bg: var(--card-bg) !important;
    --bs-table-color: var(--card-text) !important;
    --bs-table-border-color: rgba(245,235,255,0.06) !important;
    --bs-table-striped-bg: rgba(255,255,255,0.03) !important;
    --bs-table-striped-color: var(--card-text) !important;
    --bs-table-active-bg: rgba(255,255,255,0.05) !important;
    --bs-table-active-color: var(--card-text) !important;
    --bs-table-hover-bg: rgba(255,255,255,0.05) !important;
    --bs-table-hover-color: var(--card-text) !important;
    color: var(--card-text) !important;
    border-color: rgba(245,235,255,0.06) !important;
}

body.dark-theme #my-orders-table tbody,
body.dark-theme #my-orders-table tbody tr,
body.dark-theme #my-orders-table tbody td,
body.dark-theme #my-orders-table.dataTable tbody > tr > .sorting_1,
body.dark-theme #my-orders-table.dataTable tbody > tr > .sorting_2,
body.dark-theme #my-orders-table.dataTable tbody > tr > .sorting_3,
body.dark-theme #my-orders-table_wrapper .dataTables_empty {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: rgba(245,235,255,0.06) !important;
    box-shadow: none !important;
}

body.dark-theme #my-orders-table.table-hover > tbody > tr:hover > *,
body.dark-theme #my-orders-table.dataTable tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--card-text) !important;
}

body.dark-theme #my-orders-table .filter-dropdown .btn,
body.dark-theme #my-orders-table_wrapper .dataTables_filter .btn {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: #F5EBFF !important;
}

/* PAGE-SPECIFIC OVERRIDE: Dreamlists table header uses #dreamlistsTable
   The page template sets header colors (blue). Ensure dark-theme forces
   the purple palette for this table by scoping to body.dark-theme and
   using !important so it wins even if the page CSS is later inlined. */
body.dark-theme #dreamlistsTable thead th,
body.dark-theme #dreamlistsTable thead td,
body.dark-theme #dreamlistsTable thead th.sorting,
body.dark-theme #dreamlistsTable thead th.sorting_asc,
body.dark-theme #dreamlistsTable thead th.sorting_desc {
    background-color: #4B0082 !important; /* match navbar/footer */
    color: var(--card-text) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(245,235,255,0.06) !important;
}

body.dark-theme #dreamlistsTable thead th a,
body.dark-theme #dreamlistsTable thead th a:link,
body.dark-theme #dreamlistsTable thead th a:visited,
body.dark-theme #dreamlistsTable thead th a:hover,
body.dark-theme #dreamlistsTable thead th a:active,
body.dark-theme #dreamlistsTable thead th a:focus {
    color: var(--card-text) !important;
}

body.dark-theme #dreamlistsTable,
body.dark-theme #dreamlistsTable tbody,
body.dark-theme #dreamlistsTable tbody tr,
body.dark-theme #dreamlistsTable tbody td,
body.dark-theme #dreamlistsTable.dataTable tbody > tr > .sorting_1,
body.dark-theme #dreamlistsTable.dataTable tbody > tr > .sorting_2,
body.dark-theme #dreamlistsTable.dataTable tbody > tr > .sorting_3,
body.dark-theme #dreamlistsTable_wrapper .dataTables_empty {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: rgba(245,235,255,0.06) !important;
    box-shadow: none !important;
}

body.dark-theme #dreamlistsTable {
    --bs-table-bg: var(--card-bg) !important;
    --bs-table-color: var(--card-text) !important;
    --bs-table-striped-bg: rgba(255,255,255,0.03) !important;
    --bs-table-striped-color: var(--card-text) !important;
    --bs-table-hover-bg: rgba(255,255,255,0.05) !important;
    --bs-table-hover-color: var(--card-text) !important;
}

body.dark-theme #dreamlistsTable.table-hover > tbody > tr:hover > *,
body.dark-theme #dreamlistsTable.dataTable tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.05) !important;
    color: var(--card-text) !important;
}

body.dark-theme #dreamlistsTable a,
body.dark-theme #dreamlistsTable tbody a,
body.dark-theme #dreamlistsTable tbody td a {
    color: #d8c4f0 !important;
}

body.dark-theme #dreamlistsTable a:hover,
body.dark-theme #dreamlistsTable tbody a:hover,
body.dark-theme #dreamlistsTable tbody td a:hover {
    color: #f5ebff !important;
}

body.dark-theme #dreamlistsTable_wrapper .dataTables_length,
body.dark-theme #dreamlistsTable_wrapper .dataTables_length label,
body.dark-theme #dreamlistsTable_wrapper .dataTables_filter,
body.dark-theme #dreamlistsTable_wrapper .dataTables_filter label,
body.dark-theme #dreamlistsTable_wrapper .dataTables_info,
body.dark-theme #dreamlistsTable_wrapper .dataTables_paginate,
body.dark-theme #dreamlistsTable_wrapper .dataTables_paginate .paginate_button,
body.dark-theme #dreamlistsTable_wrapper .dataTables_paginate .paginate_button a {
    color: var(--card-text) !important;
}

body.dark-theme #dreamlistsTable .filter-dropdown,
body.dark-theme #dreamlistsTable .filter-dropdown .dropdown-menu,
body.dark-theme #dreamlistsTable .filter-dropdown .filter-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
}

body.dark-theme #dreamlistsTable .filter-dropdown input,
body.dark-theme #dreamlistsTable .filter-dropdown textarea,
body.dark-theme #dreamlistsTable .filter-dropdown select,
body.dark-theme #dreamlistsTable .filter-dropdown .form-control {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

/* DataTables controls for this specific table */
body.dark-theme #dreamlistsTable_wrapper .dataTables_filter input,
body.dark-theme #dreamlistsTable_wrapper .dataTables_filter input.form-control,
body.dark-theme #dreamlistsTable_wrapper .dataTables_length select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

body.dark-theme #dreamlistsTable_wrapper .dataTables_length option,
body.dark-theme #dreamlistsTable_wrapper .dataTables_filter option {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

body.dark-theme #dreamlistsTable_wrapper .dataTables_filter input::placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

body.dark-theme #dreamlistsTable .filter-dropdown .btn,
body.dark-theme #dreamlistsTable_wrapper .dataTables_filter .btn {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: #F5EBFF !important;
}

/* Bootstrap DateTimePicker: ensure the bootstrap-datetimepicker widget
   follows the site dark palette when `body.dark-theme` is present. */
body.dark-theme .bootstrap-datetimepicker-widget,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker table tr td,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker table tr th,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-days .day,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-switch,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-months .month,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-years .year {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

/* jQuery UI dialog (Create/Edit Dreamlist) dark-theme overrides
   These override the page-scoped .ui-dialog rules above when the site
   is in dark mode so inputs, placeholders, buttons, and titlebars
   use the dark palette and remain legible. */
body.dark-theme .ui-dialog,
body.dark-theme .create-dreamlist-widget.ui-dialog {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
body.dark-theme .ui-dialog .ui-dialog-titlebar,
body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar {
    background-color: var(--card-text, #FFFFFF) !important;
    color: var(--card-text) !important;
    border-bottom: 1px solid var(--card-border) !important;
}
body.dark-theme .ui-dialog .ui-dialog-title,
body.dark-theme .create-dreamlist-widget .ui-dialog-title {
    color: var(--menu-link-hover-color) !important;
}
body.dark-theme .ui-dialog .ui-dialog-titlebar-close {
    color: var(--card-text) !important;
    opacity: 1 !important;
}
body.dark-theme .ui-dialog .ui-dialog-content,
body.dark-theme .create-dreamlist-widget .ui-dialog-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    padding: 12px !important;
}
body.dark-theme .ui-dialog input,
body.dark-theme .ui-dialog textarea,
body.dark-theme .ui-dialog select,
body.dark-theme .ui-dialog .form-control {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: none !important;
}
body.dark-theme .ui-dialog input::placeholder,
body.dark-theme .ui-dialog textarea::placeholder,
body.dark-theme .ui-dialog select::placeholder {
    color: rgba(245,235,255,0.85) !important;
    opacity: 1 !important;
}
body.dark-theme .ui-dialog input:-webkit-autofill,
body.dark-theme .ui-dialog input:-webkit-autofill:hover,
body.dark-theme .ui-dialog input:-webkit-autofill:focus,
body.dark-theme .ui-dialog textarea:-webkit-autofill,
body.dark-theme .ui-dialog textarea:-webkit-autofill:hover,
body.dark-theme .ui-dialog textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--card-text) !important;
    box-shadow: 0 0 0px 1000px var(--card-bg) inset !important;
}
body.dark-theme .ui-dialog .btn,
body.dark-theme .ui-dialog button,
body.dark-theme .ui-dialog .btn-primary,
body.dark-theme .ui-dialog .btn-secondary {
    color: var(--card-text) !important;
    border-color: var(--card-border) !important;
}
body.dark-theme .ui-dialog .btn-primary,
body.dark-theme .ui-dialog button#createDreamlistBtn,
body.dark-theme .ui-dialog button#saveEditDreamlistBtn {
    background-color: var(--card-text, #FFFFFF) !important;
    border-color: var(--card-text, #FFFFFF) !important;
    color: var(--card-text) !important;
}
body.dark-theme .ui-dialog .btn-secondary {
    background-color: rgba(255,255,255,0.03) !important;
}

body.dark-theme .bootstrap-datetimepicker-widget .datepicker-years td.active {
    background-color: var(--card-text, #FFFFFF) !important;
    color: var(--card-text) !important;
}
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-years td:hover {
    background-color: rgba(255,255,255,0.02) !important;
}
body.dark-theme .bootstrap-datetimepicker-widget .prev,
body.dark-theme .bootstrap-datetimepicker-widget .next,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-prev,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-next,
body.dark-theme .bootstrap-datetimepicker-widget .datepicker-switch {
    color: var(--card-text) !important;
}

/* Page-level action buttons used by AD Admin forms should match the
   site primary in dark-theme when present. Templates may add
   `.save-coupon-button` — ensure it follows site variables. */
body.dark-theme .save-coupon-button,
body.dark-theme button.save-coupon-button,
body.dark-theme .btn.save-coupon-button {
    background-color: var(--card-text, #FFFFFF) !important;
    border-color: var(--card-text, #FFFFFF) !important;
    color: var(--card-text) !important;
}
body.dark-theme .save-coupon-button:hover,
body.dark-theme button.save-coupon-button:hover,
body.dark-theme .btn.save-coupon-button:hover {
    background-color: var(--menu-link-hover-color) !important;
    border-color: var(--menu-link-hover-color) !important;
    color: var(--card-text) !important;
}


/* Dreamlists page wrapper and info/pagination colors */
body.dark-theme .dreamlist-page .dataTables_info,
body.dark-theme .dreamlist-page .dataTables_paginate {
    color: var(--card-text) !important;
}

body.dark-theme .dreamlist-page {
    border: 1px solid rgba(245,235,255,0.04) !important;
    border-radius: 0.375rem !important;
}

/* jQuery UI dialog titlebar for create/edit dreamlist: match dark-theme */
body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar {
    background-color: #4B0082 !important;
    color: var(--card-text) !important;
    border: none !important;
}
body.dark-theme .create-dreamlist-widget .ui-dialog-title,
body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar .ui-dialog-title {
    color: var(--card-text) !important;
}
body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar .ui-dialog-titlebar-close {
    color: #ffffff !important;
}

/* Ensure filter toggles are visible on dark header rows */
body.dark-theme #dreamlistsTable thead th .filter-toggle {
    color: var(--card-text) !important;
}

/* GLOBAL dark-theme filter dropdown override
   Some pages register `.filter-dropdown` globally (page.css). Make a
   global override so any dropdown uses dark palette when `body.dark-theme`. */
body.dark-theme .filter-dropdown,
body.dark-theme .filter-dropdown.compact,
body.dark-theme div.filter-dropdown,
body.dark-theme .filter-dropdown .dropdown-menu,
body.dark-theme .filter-dropdown .filter-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
}

body.dark-theme .filter-dropdown input,
body.dark-theme .filter-dropdown textarea,
body.dark-theme .filter-dropdown select,
body.dark-theme .filter-dropdown .form-control {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

body.dark-theme .filter-dropdown .btn,
body.dark-theme .filter-dropdown button.apply-filter,
body.dark-theme .filter-dropdown button.clear-filter {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: #F5EBFF !important;
}

/* AD Admin: Status filter dropdown — avoid pink hover and use dark menu */
body.dark-theme .ad-admin-wrapper .status-filter-btn {
    background-color: var(--menu-link-color, #4B0082) !important;
    color: var(--card-text) !important;
    border-color: var(--card-text, #FFFFFF) !important;
    box-shadow: none !important;
}
body.dark-theme .ad-admin-wrapper .status-filter-btn:hover,
body.dark-theme .ad-admin-wrapper .status-filter-btn:focus,
body.dark-theme .ad-admin-wrapper .status-filter-btn[aria-expanded="true"],
body.dark-theme .ad-admin-wrapper .status-filter-btn.show {
    background-color: var(--menu-link-color, #4B0082) !important;
    border-color: var(--menu-link-color, #4B0082) !important;
    color: var(--card-text) !important;
}

/* Ensure dropdown menu itself uses dark background inside AD Admin */
body.dark-theme .ad-admin-wrapper .dropdown-menu {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border, rgba(245,235,255,0.06)) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}
body.dark-theme .ad-admin-wrapper .dropdown-menu .dropdown-item {
    color: var(--card-text) !important;
    background: transparent !important;
}
body.dark-theme .ad-admin-wrapper .dropdown-menu .dropdown-item:hover,
body.dark-theme .ad-admin-wrapper .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
}

/* Detached external filter input (orders page) — ensure editbox follows dark theme */
body.dark-theme #orders-filter-form,
body.dark-theme #my-orders-table_wrapper #orders-filter-form {
    background: transparent !important;
}

body.dark-theme #orders-filter-form input.form-control,
body.dark-theme #my-orders-table_wrapper #orders-filter-form input.form-control {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    padding: 6px 8px !important;
    width: 220px !important;
    box-shadow: none !important;
}

body.dark-theme #orders-filter-form input::placeholder,
body.dark-theme #my-orders-table_wrapper #orders-filter-form input::placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

/* Make the orders page wrapper use a full subtle border in dark-theme */
body.dark-theme .orders-page-wrapper {
    border: 1px solid rgba(245,235,255,0.04) !important;
    border-radius: 0.375rem !important;
}


/* INPUT READABILITY: ensure filter editboxes are light-colored on dark-theme */
body.dark-theme .filter-dropdown input,
body.dark-theme .filter-dropdown textarea,
body.dark-theme .filter-dropdown select,
body.dark-theme .filter-dropdown .form-control,
body.dark-theme .filter-dropdown .date-start,
body.dark-theme .filter-dropdown .date-end {
    color: var(--card-text) !important;
    -webkit-text-fill-color: var(--card-text) !important;
    caret-color: var(--card-text) !important;
}

body.dark-theme .filter-dropdown input::placeholder,
body.dark-theme .filter-dropdown textarea::placeholder,
body.dark-theme .filter-dropdown select::placeholder,
body.dark-theme .filter-dropdown input::-webkit-input-placeholder,
body.dark-theme .filter-dropdown textarea::-webkit-input-placeholder,
body.dark-theme .filter-dropdown select::-webkit-input-placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

body.dark-theme .filter-dropdown input:disabled,
body.dark-theme .filter-dropdown textarea:disabled {
    color: var(--card-subtext) !important;
    -webkit-text-fill-color: var(--card-subtext) !important;
    opacity: 1 !important;
}





/* Remove heavy table outlines and use subtle borders to fit dark theme */
body.dark-theme .dataTables_wrapper table.dataTable,
body.dark-theme .dataTables_wrapper .dataTables_scrollBody,
body.dark-theme .dataTables_wrapper .dataTables_scrollHead {
    border: none !important;
    box-shadow: none !important;
}

/* Pagination buttons: neutral by default, purple when active */
body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    border-radius: 0.375rem !important;
    padding: 0.35rem 0.6rem !important;
    margin: 0 0.15rem !important;
}
body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current a {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: #F5EBFF !important;
    box-shadow: none !important;
}

/* Make page number input / active page more compact and matching */
body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(75,0,130,0.08) !important;
}

/* Keep search/filter input and length select consistent */
/* High-specificity overrides for jQuery UI dialogs created with
   the .create-dreamlist-widget wrapper so page-scoped styles cannot
   override the dark theme. These selectors include the body ID to
   increase specificity and win against in-page .create-dreamlist-widget
   declarations that are injected later in the document. */
#theme-body.dark-theme .create-dreamlist-widget.ui-dialog,
#theme-body.dark-theme .create-dreamlist-widget.ui-dialog .ui-dialog {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.65) !important;
}
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar {
    background-color: var(--card-text, #FFFFFF) !important;
    background: var(--menu-link-color) !important;
    color: var(--card-text) !important;
    border-bottom: 1px solid var(--card-border) !important;
}
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-title {
    color: var(--card-text) !important;
}
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-content {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    padding: 12px !important;
}
/* Override the inserted Bootstrap close button used in the jQuery UI titlebar */
#theme-body.dark-theme .create-dreamlist-widget .btn-close,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar .btn-close,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#theme-body.dark-theme .create-dreamlist-widget .btn-close::before,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar .btn-close::before {
    content: "×" !important;
    color: var(--card-text) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    line-height: 1 !important;
}
#theme-body.dark-theme .create-dreamlist-widget .btn-close::after,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar .btn-close::after {
    display: none !important;
}

/* Ensure form controls inside these jQuery UI dialogs follow dark theme */
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-content .form-control,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-content textarea.form-control,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-content select.form-select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}

/* Extra overrides for the inserted close button variant used in dialogs */
#theme-body.dark-theme .create-dreamlist-widget .btn-close.btn-close-white,
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-titlebar .btn-close.btn-close-white {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    box-shadow: none !important;
}

/* Ensure the ui-dialog wrapper & content use dark background shorthand too */
#theme-body.dark-theme .create-dreamlist-widget.ui-dialog,
#theme-body.dark-theme .create-dreamlist-widget.ui-dialog .ui-dialog {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
}
#theme-body.dark-theme .create-dreamlist-widget .ui-dialog-content {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
}
body.dark-theme .dataTables_wrapper .dataTables_filter input,
body.dark-theme .dataTables_wrapper .dataTables_length select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

/* AD Admin: Add New button — purple body, blue border; hover -> blue background */
body.dark-theme .ad-admin-wrapper .btn.add-new-btn,
body.dark-theme .ad-admin-wrapper a.btn.add-new-btn,
body.dark-theme .ad-admin-wrapper button.btn.add-new-btn,
body.dark-theme .btn.add-new-btn,
body.dark-theme a.btn.add-new-btn,
body.dark-theme button.btn.add-new-btn {
    background-color: var(--menu-link-color, #4B0082) !important;
    color: var(--card-text, #F5EBFF) !important;
    border: 1px solid #0b5ed7 !important;
    box-shadow: none !important;
}

body.dark-theme .ad-admin-wrapper .btn.add-new-btn:hover,
body.dark-theme .ad-admin-wrapper a.btn.add-new-btn:hover,
body.dark-theme .ad-admin-wrapper button.btn.add-new-btn:hover,
body.dark-theme .btn.add-new-btn:hover,
body.dark-theme a.btn.add-new-btn:hover,
body.dark-theme button.btn.add-new-btn:hover,
body.dark-theme .btn.add-new-btn:focus,
body.dark-theme .btn.add-new-btn:active {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
    color: #ffffff !important;
}


body.dark-theme #globalModal .modal-header,
body.dark-theme .modal-header {
    background-color: #4B0082 !important; /* match navbar/footer */
    color: #ffffff !important;
    border-bottom: 1px solid rgba(245,235,255,0.04) !important;
}

body.dark-theme .modal-title {
    color: #ffffff !important;
}

body.dark-theme #globalModal .modal-body,
body.dark-theme .modal-body {
    background-color: transparent !important;
    color: var(--card-text) !important;
}

/* FORCE DataTables header/table/pagination for dark theme — high specificity */
body.dark-theme .dataTables_wrapper table.dataTable thead th,
body.dark-theme .dataTables_wrapper table.dataTable thead td,
body.dark-theme table.dataTable thead th,
body.dark-theme table.dataTable thead td,
body.dark-theme .dataTables_wrapper .dataTables_scrollHeadInner table thead th,
body.dark-theme table.table.dataTable thead th {
    background-color: var(--menu-link-color, #663399) !important;
    color: var(--card-text) !important;
    border-bottom: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: none !important;
}

body.dark-theme .dataTables_wrapper table.dataTable,
body.dark-theme table.dataTable,
body.dark-theme .dataTables_wrapper .dataTables_scrollBody {
    border: 1px solid rgba(245,235,255,0.04) !important;
    background-color: transparent !important;
    color: var(--card-text) !important;
}

body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button,
body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button a {
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    background: transparent !important;
}

body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current a {
    background-color: var(--menu-link-color, #663399) !important;
    border-color: var(--menu-link-color, #663399) !important;
    color: var(--card-text) !important;
    box-shadow: none !important;
}

body.dark-theme table.dataTable thead th::after,
body.dark-theme table.dataTable thead th::before {
    color: var(--card-text) !important;
    opacity: 0.95 !important;
}

body.dark-theme #globalModal .modal-footer,
body.dark-theme .modal-footer {
    background-color: transparent !important;
    border-top: none !important;
}

/* Close button in modal header: transparent background and bold white × */
body.dark-theme .modal-header .btn-close {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.dark-theme .modal-header .btn-close::before {
    content: "×" !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

/* High-specificity product modal close icon override to beat inherited variables */
body.dark-theme #productDetailsModal.show .modal-header > button.btn-close::before,
body.dark-theme #productQuickViewModal.show .modal-header > button.btn-close::before,
body.dark-theme #customizeNewModal.show .modal-header > button.btn-close::before,
body.dark-theme #customizeFandomModal.show .modal-header > button.btn-close::before,
body.dark-theme #createFandomModal.show .modal-header > button.btn-close::before,
body.dark-theme #createCharacterModal.show .modal-header > button.btn-close::before {
    font-size: 28px !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
    transform: none !important;
}

body.dark-theme #productDetailsModal.show .modal-header > button.btn-close,
body.dark-theme #productQuickViewModal.show .modal-header > button.btn-close,
body.dark-theme #customizeNewModal.show .modal-header > button.btn-close,
body.dark-theme #customizeFandomModal.show .modal-header > button.btn-close,
body.dark-theme #createFandomModal.show .modal-header > button.btn-close,
body.dark-theme #createCharacterModal.show .modal-header > button.btn-close {
    width: 40px !important;
    height: 40px !important;
}

body.dark-theme .modal-header .btn-close::after { display:none !important; }


/* My Profile styles */

/* Form controls in dark-theme modals and dialogs: ensure inputs/selects follow dark theme */
body.dark-theme .modal-content .form-control,
body.dark-theme .modal-content input.form-control,
body.dark-theme .modal-content textarea.form-control,
body.dark-theme .modal-content select.form-select,
body.dark-theme .modal-content .form-select,
body.dark-theme .modal-content .form-control:focus,
body.dark-theme .modal-content .form-select:focus,
body.dark-theme .modal-content .form-control:active {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: none !important;
}

body.dark-theme .modal-content .form-select option {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Ensure modal select dropdowns (native and plugin) show dark backgrounds
   when opened. Covers native <select>, Bootstrap dropdowns, and Select2.
   Scoped to .modal-content and #ajaxModal so page-level selects are unaffected. */
body.dark-theme .modal-content select,
body.dark-theme .modal-content select.form-select,
body.dark-theme #ajaxModal select,
body.dark-theme #ajaxModal select.form-select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}

body.dark-theme .modal-content select:focus,
body.dark-theme #ajaxModal select:focus {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--card-text) !important;
}

body.dark-theme .modal-content select option,
body.dark-theme #ajaxModal select option,
body.dark-theme .modal-content select.form-select option {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Select2 / vendor dropdowns (Django admin) inside modals */
body.dark-theme .modal-content .select2-container--default .select2-selection--single,
body.dark-theme .modal-content .select2-container--default .select2-selection--multiple,
body.dark-theme #ajaxModal .select2-container--default .select2-selection--single,
body.dark-theme #ajaxModal .select2-container--default .select2-selection--multiple {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}
body.dark-theme .modal-content .select2-container--default .select2-selection__rendered,
body.dark-theme .modal-content .select2-container--default .select2-selection__choice,
body.dark-theme #ajaxModal .select2-container--default .select2-selection__rendered,
body.dark-theme #ajaxModal .select2-container--default .select2-selection__choice {
    color: var(--card-text) !important;
}
body.dark-theme .select2-dropdown,
body.dark-theme .modal-content .select2-dropdown,
body.dark-theme #ajaxModal .select2-dropdown,
body.dark-theme .select2-container .select2-results__option {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Ensure dropdown-menu inside modal (Bootstrap/custom) uses dark bg */
body.dark-theme .modal-content .dropdown-menu,
body.dark-theme #ajaxModal .dropdown-menu {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border: 1px solid var(--card-border) !important;
}
body.dark-theme .modal-content .dropdown-menu .dropdown-item,
body.dark-theme #ajaxModal .dropdown-menu .dropdown-item {
    color: var(--card-text) !important;
}
body.dark-theme .modal-content .dropdown-menu .dropdown-item:hover,
body.dark-theme .modal-content .dropdown-menu .dropdown-item:focus,
body.dark-theme #ajaxModal .dropdown-menu .dropdown-item:hover,
body.dark-theme #ajaxModal .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255,255,255,0.02) !important;
}

/* jQuery UI dialog inputs under dark theme */
body.dark-theme .ui-dialog input,
body.dark-theme .ui-dialog textarea,
body.dark-theme .ui-dialog select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

/* Modal radio/checkbox accent color: use purple instead of blue in dark-theme modals */
/* Ensure checkboxes inside modals (including CheckboxSelectMultiple) use the
   dark-theme palette even if the input lacks helper classes. */
body.dark-theme .modal-content input[type="checkbox"],
body.dark-theme .modal-content .form-check-input {
    accent-color: #7b7f92 !important;
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(245,235,255,0.12) !important;
    box-shadow: none !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    vertical-align: middle !important;
}

body.dark-theme .modal-content input[type="checkbox"]:checked,
body.dark-theme .modal-content .form-check-input:checked {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(245,235,255,0.26) !important;
    box-shadow: 0 0 0 0.22rem rgba(245,235,255,0.10) !important;
}
body.dark-theme .modal-content .form-check-input:focus,
body.dark-theme .modal-content input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.28rem rgba(75,0,130,0.16) !important;
}
/* Ensure labels inside injected modal content are readable */
body.dark-theme .modal-content label,
body.dark-theme #ajaxModal .modal-content label {
    color: var(--card-text) !important;
}
/* (focus and label rules are handled above) */


/* Ensure placeholder text and disabled form controls remain readable in dark-theme modals */
body.dark-theme .modal-content .form-control::placeholder,
body.dark-theme .modal-content textarea::placeholder,
body.dark-theme .modal-content input::placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}
body.dark-theme .modal-content .form-control::-webkit-input-placeholder,
body.dark-theme .modal-content textarea::-webkit-input-placeholder,
body.dark-theme .modal-content input::-webkit-input-placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

/* Disabled controls: keep subdued but readable */
body.dark-theme .modal-content .form-control:disabled,
body.dark-theme .modal-content .form-control[disabled],
body.dark-theme .modal-content textarea:disabled,
body.dark-theme .modal-content textarea[disabled] {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

/* Ensure selects show readable disabled/placeholder text */
body.dark-theme .modal-content select.form-select,
body.dark-theme .modal-content .form-select {
    color: var(--card-subtext) !important;
}

/* Make Upload Image and modal outline-primary buttons use primary styling inside modals */
body.dark-theme .modal-content .btn-outline-primary,
body.dark-theme .modal-content button.btn-outline-primary,
body.dark-theme .modal-content .btn-outline-primary:focus,
body.dark-theme .modal-content .btn-outline-primary:hover {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: #F5EBFF !important;
}

/* Style the native file input (Choose File) to match dark theme and give its button a purple background */
body.dark-theme .modal-content input[type="file"] {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
}

/* WebKit/Blink file button */
body.dark-theme .modal-content input[type="file"]::-webkit-file-upload-button {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
    border: none !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
}

/* Modern file selector button */
body.dark-theme .modal-content input[type="file"]::file-selector-button {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
    border: none !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
}



.profile-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-links {
    margin-top: 50px; /* Adjust the top margin to center the links height-wise */
    margin-left: 100px; /* Add a left margin of 100px */
}

.profile-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

.profile-links li {
    margin-bottom: 10px;
    margin-top: 10px;
}

.profile-links a {
    text-decoration: none;
    padding: 10px 15px;
    background-color: #4B0082; /* Set a background color */
    color: #F5EBFF; /* Set text color */
    border-radius: 5px; /* Add rounded corners */
    transition: background-color 0.3s; /* Add a smooth transition for hover effect */
}

.profile-links a:hover {
    background-color: #663399; /* Change background color on hover */
}

.tab-content {
    margin-left: 20px; /* Adjust the left margin for the content */
}

.profile-content {
    max-width: 800px; /* Set a maximum width for the content */
    padding: 20px; /* Add padding for a cleaner look */
    margin-left: 0; /* Adjust the left margin for the content */
    margin-right: 550px;
}

#notifications {
    margin-left: 0;
    margin-right: 95px;
}

#preferences {
    margin-left: 0;
    margin-right: 290px;
}

/* Shopping Cart Styles*/
.shopping-cart-icon {
    padding-left: 10px;
}

#shopping-cart-icon {
    position: relative;
}

.cart-item-count {
    position: absolute;
    top: 1px;
    left: 11px;
    background-color: #663399;
    color: #F5EBFF;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 0px;
    padding: 1px 1px; /* Adjust padding as needed */
    font-size: 10px; /* Adjust font size as needed */
    cursor: pointer; /* Add this line to make it clickable */
    z-index: 2; /* Ensure it's above the shopping cart icon */
}

/* TARGETED: My Orders DataTables ID-specific overrides and spacing tweaks */
/* These selectors use the generated table ID (DataTables_Table_0) to win specificity */
body.dark-theme #DataTables_Table_0_wrapper table#DataTables_Table_0 thead th,
body.dark-theme #DataTables_Table_0 thead th,
body.dark-theme #DataTables_Table_0_wrapper .dataTables_scrollHeadInner table thead th {
    background-color: var(--menu-link-color, #663399) !important;
    color: var(--card-text) !important;
    border-bottom: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: none !important;
}

/* Filter input + length select for the specific table */
body.dark-theme #DataTables_Table_0_wrapper #DataTables_Table_0_filter input,
body.dark-theme #DataTables_Table_0_filter input,
body.dark-theme #DataTables_Table_0_wrapper .dataTables_filter input {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

body.dark-theme #DataTables_Table_0_wrapper #DataTables_Table_0_length select,
body.dark-theme #DataTables_Table_0_length select,
body.dark-theme #DataTables_Table_0_wrapper .dataTables_length select {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--card-text) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
}

/* Remove heavy left/bottom borders that clash with dark theme */
body.dark-theme #DataTables_Table_0_wrapper .dataTables_scrollBody,
body.dark-theme #DataTables_Table_0_wrapper .dataTables_scrollHead,
body.dark-theme #DataTables_Table_0 {
    border-left: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Tighten pagination spacing and reduce gap between Prev/Next */
body.dark-theme #DataTables_Table_0_wrapper .dataTables_paginate .paginate_button {
    margin: 0 0.12rem !important;
    padding: 0.25rem 0.45rem !important;
}
body.dark-theme #DataTables_Table_0_wrapper .dataTables_paginate .paginate_button.previous,
body.dark-theme #DataTables_Table_0_wrapper .dataTables_paginate .paginate_button.next {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}


.cart-item-count:hover + #shopping-cart-icon i {
    background-color: #8E4585;
}

/* Shopping cart table dark theme */
body.dark-theme .shopping-cart-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--card-text, #F5EBFF);
    --bs-table-border-color: rgba(245,235,255,0.08);
    --bs-table-hover-bg: rgba(255,255,255,0.06);
    --bs-table-hover-color: var(--card-text, #F5EBFF);
    color: var(--card-text, #F5EBFF) !important;
}

body.dark-theme .shopping-cart-table thead.table-light,
body.dark-theme .shopping-cart-table thead.table-light th {
    --bs-table-bg: var(--menu-link-color, #4B0082);
    --bs-table-color: var(--card-text, #F5EBFF);
    background-color: var(--menu-link-color, #4B0082) !important;
    color: var(--card-text, #F5EBFF) !important;
    border-color: rgba(245,235,255,0.08) !important;
}

body.dark-theme .shopping-cart-table tbody tr,
body.dark-theme .shopping-cart-table tbody td {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--card-text, #F5EBFF) !important;
    border-color: rgba(245,235,255,0.08) !important;
}

body.dark-theme .shopping-cart-table.table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.06) !important;
    color: var(--card-text, #F5EBFF) !important;
}

body.dark-theme .shopping-cart-table tfoot tr.table-light,
body.dark-theme .shopping-cart-table tfoot tr.table-light td {
    --bs-table-bg: rgba(255,255,255,0.03);
    --bs-table-color: var(--card-text, #F5EBFF);
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text, #F5EBFF) !important;
    border-color: rgba(245,235,255,0.12) !important;
}

body.dark-theme .shopping-cart-table .text-muted,
body.dark-theme .shopping-cart-table .small.text-muted {
    color: rgba(245,235,255,0.76) !important;
}

/* Chat Bubble Styles */
#chat-bubble {
    position: fixed;
    top: 60px;
    right: 20px;
    background-color: #800080;
    color: #F5EBFF;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#chat-icon {
    margin-right: 10px;
}

/*#chat-messages {
   
}*/

/* Hide the chat bubble by default */
#chat-bubble.hidden {
    display: none;
}


.admin-bg {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
}

.text-end.admin-bg {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
}

.text-white.admin-bg {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
}

/* Override Bootstrap styles for AD Admin navbar */
.navbar.navbar-expand-lg.navbar-light.bg-light.admin-bg {
    background-color: #4B0082 !important;
}

/* Set color for AD Admin navbar links */
.navbar.navbar-expand-lg.navbar-light.bg-light.admin-bg .navbar-nav .nav-link {
    color: #F5EBFF !important;
}

/* Override Bootstrap styles for AD Admin navbar */
.custom-navbar {
    background-color: #4B0082 !important;
}

/* Set color for AD Admin navbar links */
.custom-navbar .navbar-nav .nav-link {
    color: #F5EBFF !important;
}

/* Admin navbar hover must override earlier non-hover !important rules.
   Place this in dark-theme so it wins after admin.css declarations. */
.navbar.navbar-expand-lg.navbar-light.bg-light.admin-bg .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link:hover {
    color: var(--menu-link-hover-color, #8E4585) !important;
    background-color: transparent !important;
}

.table thead tr th.custom-thead {
    background-color: #001f3f !important;
    color: #F5EBFF !important;
}

/* Strong override: ensure the Admin button in the site navbar matches the main purple
   Use a high-specificity selector and !important to beat inline or conflicting rules. */
body.dark-theme #adminDropdown .custom-admin-btn,
body.dark-theme #adminDropdown button,
body.dark-theme #adminDropdown .btn {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
    border-color: #4B0082 !important;
    box-shadow: none !important;
}

body.dark-theme #adminDropdown .custom-admin-btn:hover,
body.dark-theme #adminDropdown button:hover,
body.dark-theme #adminDropdown .btn:hover {
    background-color: #4B0082 !important;
    color: var(--menu-link-hover-color, #8E4585) !important;
}

.input-group-prepend, .input-group-append {
    margin: 0;
}

/* AD Admin: ensure Cancel/Reject danger buttons remain large solid red with white text */
body.dark-theme .ad-admin-wrapper .btn.btn-danger,
body.dark-theme .ad-admin-wrapper .btn-danger,
body.dark-theme .ad-admin-wrapper .cancel-order-btn,
body.dark-theme .ad-admin-wrapper .reject-order-newnames-btn,
body.dark-theme .ad-admin-wrapper .btn-danger:focus,
body.dark-theme .ad-admin-wrapper .btn-danger:hover,
body.dark-theme .ad-admin-wrapper .btn-danger:active {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.dark-theme .ad-admin-wrapper .btn.btn-danger.btn-sm {
    padding: 0.375rem 0.6rem !important;
    font-weight: 600 !important;
}

.form-control {
    border: none;  
    border-radius: 0;
}

.btn-primary {
    border-radius: 0;
}

.add-new-btn {
    color: #F5EBFF !important;
    background-color: #5C6B7F !important;
    font-weight: bolder;
}

.add-new-btn:hover {
    background-color: #8E4585 !important;
    color: #001f3f !important;
    font-weight: bolder;
}

.btn-purple {
    background-color: #8E4585 !important; /* Royal Purple */
    color: #001f3f !important;
}

.admin-logo {
    color:#6CA6CD;
}

.admin-logo:hover {
    color:plum !important;
}

.footer {
    flex-shrink: 0; /* Prevent the footer from shrinking */
    margin-top: 8px;
    background-color: #4B0082;
    color: #F5EBFF;
    padding: 20px 0;
    text-align: center; /* Center the content within the footer */
    border-top: 1px solid #F5EBFF;
}

.footer table {
    margin: auto;
}

.footer td {
    text-align: center;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer li {
    margin-bottom: 10px;
}

.footer a {
    text-decoration: none; /* Remove underlines */
    color: #F5EBFF;
    font-weight: bold; /* Make the text bold */
    margin: 0 10px; /* Add some spacing between links */
    display: block; /* Remove the default bullet points */
}

.footer a:hover {
    text-decoration: none; /* Remove underlines */
    color: plum !important;
    font-weight: bold; /* Make the text bold */
}

.footer p {
    margin-top: 20px;
    text-align: center; /* Added to center-align */
    color: white !important;
    font-weight: bolder !important;
}

.footer-copyright {
    margin-top: 20px;
    text-align: center;
    color: white !important;
    font-weight: bolder !important;
}

.adminnav {
    border-bottom: 1px solid #F5EBFF;
}

/* Navbar */
/* navbar.css */

/* navbar */
.navbar {
    padding: 0;
    border-bottom: 1px solid #F5EBFF;
}

.navbar a {
    color: #F5EBFF;
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underlines */
}
.navbar a:hover {
    color: plum !important;
    font-weight: bold; /* Make the text bold */
    text-decoration: none; /* Remove underlines */
}

.custom-btn {
    height: 20px;
    font-size: 12px;
    padding: 4px 8px;
}

.custom-filter-btn {
    border-radius: 0 5px 5px 0; /* Adjust the border-radius for the filter button */
    color: #F5EBFF !important;
    background-color: #5C6B7F !important;
}

.custom-filter-btn:hover {
    background-color: #8E4585 !important;
    color: #001f3f !important;
}

.custom-form-control {
    font-size: 12px;
}

.custom-user-links {
    font-size: 12px;
}

.custom-button-group {
    display: flex;
    align-items: stretch;
}

.custom-input-group {
    height: 30px;
}

.custom-btn,
.custom-form-control {
    height: 100%;
}

.navbar-nav.user-links {
    margin-left: auto;
}

/* Adjust padding for the navbar brand and navigation links */
.navbar-brand,
.navbar-nav {
    margin-left: 10px;
    padding: 0;
}

/* Ensure that the navbar elements are vertically aligned */
.navbar-nav,
.navbar-collapse {
    display: flex;
    align-items: center;
}

/* Adjust the padding for the dropdown menu */
.navbar-nav .dropdown-menu {
    padding: 10px;
}

.navbar.navbar-expand-lg {
    padding-top: 0; /* Adjust as needed */
    padding-bottom: 0; /* Adjust as needed */
}

.navbar.navbar-expand-lg .container-fluid {
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-info .not-authenticated {
    color: #F5EBFF;  /* Choose an appropriate color for your design */
    background-color: red;  /* Choose an appropriate background color for your design */
    padding: 5px;
    border-radius: 5px;
}

.nav-link.debug-info {
    color: red; /* Set text color to white */
    font-weight: bold;
    background-color: black; /* Set background color to black */
    padding: 5px; /* Add some padding for better readability */
}

.nav-info.debug-info {
    color: #F5EBFF; /* Set text color to white */
    font-weight: bold;
    background-color: black; /* Set background color to black */
    padding: 5px; /* Add some padding for better readability */
}

/* Username Link Menu */
.user-links-container {
    display: none;
    position: absolute;
    background-color: #000; /* Change background color to black */
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    padding-left: 10px;
    transition: left 0.3s ease, width 0.3s ease; /* Add transition for smooth animation */
    max-width: 100px; /* Set a maximum width for the dropdown */
}

#userMenu:hover .user-links-container {
    left: calc(100% - 100px); /* Align with the right edge of the Account link */
    width: 100px; /* Set the desired width */
    text-align: center;
    font-size: 14px;
}

.user-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Display links in a column */
}

.user-link {
    color: #F5EBFF !important; /* Change text color to white */
    text-decoration: none;
    display: block;
    font-weight: bolder;
    padding: 8px 0; /* Add padding to the links */
}

.user-link:hover {
    background-color: #1A1A2E !important; /* Change background color on hover */
    color: plum !important;
}

.user-link + .user-link {
    border-top: 1px solid #333; /* Add top border to separate links */
}

.user-links-list li {
    flex: 1; /* Distribute available space evenly among the list items */
    padding: 5px 0; /* Add padding to improve visibility of the divider */
}

.user-links-list li:last-child {
    border-top: 1px solid #333; /* Add top border to the last link as a divider */
}

/* Filter and Admin dropdowns */
.filter-links-container,
.admin-links-container {
    display: none;
    position: absolute;
    background-color: #000;
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    width: 100px; /* Adjust the width as needed */
    padding-left: 10px;
    padding-right: 10px;
    transition: opacity 0.3s ease; /* Add transition for smooth opacity change */
}

.custom-admin-btn {
    border: none; /* Remove the border */
    background-color: #4B0082; /* Make the background transparent */
    color: #F5EBFF; /* Set text color to white */
    padding: 4px 8px; /* Adjust padding as needed */
    font-size: 12px; /* Adjust font size as needed */
    font-weight: bolder;
}

.custom-admin-btn:hover {
    color: plum !important;
    background-color: #4B0082;
    border-color: #001f3f;
}

#filterDropdown:hover .filter-links-container,
#adminDropdown:hover .admin-links-container {
    display: block;
    left: 0;
    opacity: 1;
}

.filter-links-list,
.admin-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#filterDropdown:hover .filter-link,
#adminDropdown:hover .admin-link {
    opacity: 1; /* Change opacity on hover */
}

.filter-link,
.admin-link {
    color: #F5EBFF !important; /* Set text color to white */
    text-decoration: none;
    display: block;
    padding: 8px 0;
    opacity: 0; /* Initialize opacity to 0 */
    transition: opacity 0.3s ease; /* Add transition for smooth opacity change */
    max-width: none; /* Remove the max-width property */
}

.filter-link:hover,
.admin-link:hover {
    background-color: #1A1A2E;
    color: plum !important;
}

.filter-link + .filter-link,
.admin-link + .admin-link {
    border-top: 1px solid #333;
}

.filter-links-list li,
.admin-links-list li {
    flex: 1;
    padding: 5px 0;
}

.filter-links-list li:last-child,
.admin-links-list li:last-child {
    border-top: 1px solid #333;
}

/* Center-justify text in dropdown menus */
.filter-links-list,
.admin-links-list,
#product-dropdown {
    text-align: center;
}

.filter-link,
.admin-link,
#product-dropdown a {
    display: block;
    padding: 8px 0;
    color: #F5EBFF !important;
    text-decoration: none;
}

.filter-link:hover,
.admin-link:hover,
#product-dropdown a:hover {
    color: var(--menu-link-hover-color, plum) !important;
    text-decoration: none;
}

/* Ensure product dropdown hover color follows the global dark-theme hover variable
   and wins over other rules by including the body.dark-theme prefix. */
body.dark-theme #product-dropdown a:hover,
body.dark-theme #product-dropdown a:active {
    color: var(--menu-link-hover-color, plum) !important;
}

/* Search */
.search-container .input-group,
.search-container .input-group-prepend,
.search-container .input-group-append,
.search-container .form-control,
.search-container .btn {
    height: 100%;
}

.custom-search-btn {
    border-radius: 5px 0 0 5px; /* Adjust the border-radius for the search button */
    color: #F5EBFF !important;
    background-color: #5C6B7F !important;
}

.custom-search-btn:hover {
    border-radius: 5px 0 0 5px; /* Adjust the border-radius for the search button */
    background-color: #8E4585 !important;
    color: #001f3f !important;
}

.custom-search-container {
    align-items: center;
}

.search-container {
    padding: 5px;  
    margin-top: 0;  
}

.search-container .btn, 
.search-container .form-control {
    padding: 0.15rem 0.5rem;  /* Adjust the padding as needed */
    font-size: 12px;  /* Adjust the font size as needed */
}

.search-container .dropdown-toggle {
    padding: 0.175rem 0.75rem;  /* Adjust the padding as needed */
    font-size: 12px;  /* Adjust the font size as needed */
}
/* Dropdowns */
.input-group {
    background-color: #000;
    border: 1px solid #ced4da; 
    border-radius: 5px;
}

.dropdown-toggle {
    border-radius: 0;
}

.dropdown-menu {
    top: 100%;
    
    max-height: 200px; /* Set a maximum height for the dropdown menu */
    overflow-y: auto; /* Enable vertical scrolling if needed */
}

.custom-dropdown {
    left: 0 !important;
    right: auto !important;
    padding: 100px; /* Adjust the padding as needed */
}

.dropdown-item {
    margin-bottom: 5px; /* Adjust the margin as needed */
    padding: 10px; /* Adjust the padding as needed */
    font-weight: bolder;
}

.dropdown-item:hover {
    color: plum !important;
    font-weight: bolder;
}

.dropdown-menu-end {
    right: 0;
}

/* Services, Learning, Community, and About Menus */
#servicesDropdown:hover #services-dropdown,
#learningDropdown:hover #learning-dropdown,
#communityDropdown:hover #community-dropdown,
#aboutDropdown:hover #about-dropdown {
    display: block;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
}

#services-dropdown,
#learning-dropdown,
#community-dropdown,
#about-dropdown {
    display: none;
    position: absolute;
    background-color: #000;
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    padding-left: 10px;
    transition: left 0.3s ease, width 0.3s ease;
    max-width: 100px;
}

#services-dropdown div,
#learning-dropdown div,
#community-dropdown div,
#about-dropdown div {
    color: #F5EBFF;
    text-decoration: none;
    display: block;
    padding: 8px 0;
}

#services-dropdown div:hover,
#learning-dropdown div:hover,
#community-dropdown div:hover,
#about-dropdown div:hover {
    background-color: #1A1A2E;
}

/* Multi-column dropdowns */

/* For larger screens, display in multiple columns */
@media (min-width: 768px) {
    #productDropdown {
        display: flex;
        /*grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
        gap: 20px;
        position: relative;
    }

    #product-dropdown {
        box-sizing: border-box;
        padding: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        position: absolute; /* Position the dropdown absolutely */
        top: 100%; /* Position below the parent */
        left: 0; /* Align with the left edge of the parent */
        z-index: 1000;
        background-color: #000;
        border: 1px solid #ddd;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        max-width: 100%; /* Ensure the dropdown does not extend beyond the screen */
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.3s ease, height 0.3s ease;
    }

    #productDropdown:hover #product-dropdown {
        visibility: visible;
        opacity: 1;
        /* Adjust the max-height as needed */
        max-height: 600px;
        overflow-y: auto;
    }
}

/* For smaller screens, revert to a single column */
@media (max-width: 767px) {
    #productDropdown {
        position: static;
        /*max-width: none;*/
    }

    #product-dropdown {
        flex: 0 0 100%;
        position: static;
        visibility: visible;
        opacity: 1;
        transition: none;
    }
}

/* Show dropdown on hover */
#productDropdown:hover #product-dropdown {
    display: block;
}

/* Hide dropdown when not hovering */
#product-dropdown {
    display: none;
}

/* Ensure the dropdown hides when not hovering over the menu */
#productDropdown:not(:hover) #product-dropdown {
    display: none;
}

/* Product */
.site-navbar {
    margin-bottom: 0 !important;
}

.ad-admin-navbar {
    margin-top: 0 !important;
}

/* Products styling */

.product-box {
    box-sizing: border-box;
    border: 1px solid #F5EBFF; /* Replace #000 with your desired border color */
    padding: 10px; /* Adjust padding as needed */
    margin: 10px; /* Adjust margin as needed */
    max-width: 300px; /* Set maximum width */
    /*width: 100%;  Ensure flexibility for responsiveness */
}

/* Display products in a row */
.product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjust as needed */
    max-width: 1000px; /* Set the maximum width of the container */
    margin: 0 auto; /* Center the container */
}

/* Additional styling for better appearance */
.product-box h2 {
    margin-bottom: 5px;
}

.product-box p {
    margin-bottom: 10px;
}

.products-table {
    width: 80%; /* Adjust the width as needed */
    margin: auto; /* Center the table */
}
.custom-thead {
    background-color: #4B0082 !important;
    color: #F5EBFF !important;
}
.product-name,
.product-description,
.product-actions {
    text-align: center;
}

.product-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-description {
    max-width: 60px;
    word-wrap: break-word; /* Word wrap for description */
    line-height: 1.2; /* Adjust line height for better spacing */
}

.product-actions a {
    margin: 0 5px;
}

.product-border {
    border: 3px solid #F5EBFF !important;
}

/* Ensure consistent background color for the entire row */
.products-table tbody tr {
    background-color: #f8f9fa; /* Adjust the background color as needed */
}

/* Adjust spacing between rows */
.products-table tbody tr td {
    padding-top: 10px; /* Adjust top padding as needed */
    padding-bottom: 10px; /* Adjust bottom padding as needed */
}

/* Improve hover effect */
.products-table tbody tr:hover {
    background-color: #1A1A2E; /* Adjust the hover background color as needed */
}

#product-dropdown {
    display: none;
    position: absolute;
    background-color: #000;
    border: 1px solid #ddd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    z-index: 1000;
    padding-left: 10px;
    transition: left 0.3s ease, width 0.3s ease;
    max-width: 100px;

}

.nav-item:hover #product-dropdown {
    display: block;
}

#product-dropdown {
    background-color: #000;
}

#product-dropdown a {
    color: #F5EBFF;
    font-size: 14px;
}

#product-dropdown a:hover,
#product-dropdown a:active {
    background-color: #1A1A2E;
    /*color: #000;*/
}

/* Styles for the toggle switch */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 5px;  /* Adjust the gap value as needed */
}

.toggle-label {
    margin-right: 5px;
}

.theme-switch {
    display: none;
}

.toggle-icon {
    font-size: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
/* Ensure Theme label and icons are visible and clickable in the navbar */
.theme-toggle,
.site-navbar .theme-toggle,
.theme-toggle .toggle-icon,
.theme-toggle > span {
    color: #fff !important;
    cursor: pointer !important;
}


/* Styles */
/* styles.css */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make sure the body covers at least the full height of the viewport */
    margin: 0;
}

.wrapper {
    flex: 1;
}

.mt-3 {
    margin-top: 0;  
}

.centered-title {
    text-align: center;
    margin-top: 20px; /* Adjust the margin as needed */
}

.custom-img-class {
    /* Add your custom styling here */
    max-width: 100%; /* Ensures the image doesn't exceed its container */
    height: auto;    /* Ensures the image maintains its aspect ratio */
    /* Add any other styling you need */
}

.custom-p-class {
    font-size: 20px;
}

.category-button {
    color: #F5EBFF !important;
    background-color: #5C6B7F !important;
    font-weight: bolder;
}

.category-button:hover {
    background-color: #8E4585 !important;
    color: #001f3f !important;
    font-weight: bolder;
}

/* AJAX modal specific defensive overrides to ensure injected modals (Edit User / Change Password)
   follow the dark-theme: make titles white and inputs use dark backgrounds. */
body.dark-theme #ajaxModal .modal-title {
    color: var(--card-text, #F5EBFF) !important;
}

body.dark-theme #ajaxModal .modal-content input,
body.dark-theme #ajaxModal .modal-content textarea,
body.dark-theme #ajaxModal .modal-content select,
body.dark-theme #ajaxModal .modal-content .form-control,
body.dark-theme #ajaxModal .modal-content .form-select {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--card-text, #F5EBFF) !important;
    border: 1px solid rgba(245,235,255,0.06) !important;
    box-shadow: none !important;
}

body.dark-theme #ajaxModal .modal-content input::placeholder,
body.dark-theme #ajaxModal .modal-content textarea::placeholder,
body.dark-theme #ajaxModal .modal-content .form-control::placeholder,
body.dark-theme #ajaxModal .modal-content .form-select::placeholder {
    color: var(--card-subtext) !important;
    opacity: 1 !important;
}

body.dark-theme #ajaxModal .modal-content .form-control:focus,
body.dark-theme #ajaxModal .modal-content .form-select:focus {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--card-text, #F5EBFF) !important;
    outline: none !important;
    border-color: rgba(245,235,255,0.12) !important;
}
/* Dark-theme scrollbar styling — lighter thumb + darker on hover/click */
body.dark-theme {
    /* light default thumb, dark track */
    scrollbar-color: #8E4585 var(--card-bg);
    scrollbar-width: thin;
}

/* WebKit/Blink scrollbars */
body.dark-theme ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-theme ::-webkit-scrollbar-track {
    background: var(--card-bg) !important;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01);
}

/* Default: purple thumb (reduced pink tint) */
body.dark-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8E4585, #663399) !important;
    border-radius: 12px;
    border: 3px solid rgba(0,0,0,0);
    background-clip: padding-box;
}

/* Hover / active: use titlebar purple */
body.dark-theme ::-webkit-scrollbar-thumb:hover,
body.dark-theme ::-webkit-scrollbar-thumb:active {
    background: #4B0082 !important;
    box-shadow: 0 0 0 3px rgba(75,0,130,0.12) !important;
}

/* Scrollbar buttons / little arrows */
body.dark-theme ::-webkit-scrollbar-button {
    background: linear-gradient(180deg, #8E4585, #663399) !important;
    height: 12px;
    display: block;
}
body.dark-theme ::-webkit-scrollbar-button:vertical:decrement,
body.dark-theme ::-webkit-scrollbar-button:vertical:increment {
    background: linear-gradient(180deg, #8E4585, #663399) !important;
}
/* Buttons become darker on hover/click (titlebar purple) */
body.dark-theme ::-webkit-scrollbar-button:hover,
body.dark-theme ::-webkit-scrollbar-button:active,
body.dark-theme ::-webkit-scrollbar-button:vertical:decrement:hover,
body.dark-theme ::-webkit-scrollbar-button:vertical:increment:hover {
    background: #4B0082 !important;
}

/* Target scrollable regions inside modals, DataTables scroll bodies and checkbox lists */
body.dark-theme .modal-content ::-webkit-scrollbar,
body.dark-theme .dataTables_wrapper .dataTables_scrollBody ::-webkit-scrollbar,
body.dark-theme td.checkbox-cell ul ::-webkit-scrollbar,
body.dark-theme .filter-dropdown ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-theme .modal-content ::-webkit-scrollbar-thumb,
body.dark-theme .dataTables_wrapper .dataTables_scrollBody ::-webkit-scrollbar-thumb,
body.dark-theme td.checkbox-cell ul ::-webkit-scrollbar-thumb,
body.dark-theme .filter-dropdown ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #B38DC2, #8E4585) !important;
    border-radius: 8px;
}

body.dark-theme ::-webkit-scrollbar-thumb:focus {
    box-shadow: 0 0 0 3px rgba(75,0,130,0.18) !important;
}

body.dark-theme ::-webkit-scrollbar-corner {
    background: var(--card-bg) !important;
}

/* Fallback for browsers supporting only scrollbar-color/width */
body.dark-theme .modal-content,
body.dark-theme .dataTables_wrapper .dataTables_scrollBody,
body.dark-theme td.checkbox-cell ul,
body.dark-theme .filter-dropdown {
    scrollbar-color: #8E4585 var(--card-bg);
    scrollbar-width: thin;
}

/* FORCE: very specific overrides for scrollbar thumb/buttons inside
   AJAX-injected modals (fandom lists) and checkbox cells. These use
   element-id selectors and !important to beat any competing rules. */
body.dark-theme #ajaxModal #id_fandoms::-webkit-scrollbar-thumb,
body.dark-theme #ajaxModal div#id_fandoms::-webkit-scrollbar-thumb,
body.dark-theme .modal-content div#id_fandoms::-webkit-scrollbar-thumb,
body.dark-theme td.checkbox-cell ul::-webkit-scrollbar-thumb,
body.dark-theme td.checkbox-cell::-webkit-scrollbar-thumb {
    background: #4B0082 !important; /* titlebar purple */
    background-image: none !important;
    background-clip: padding-box !important;
    border-radius: 10px !important;
    border: 2px solid rgba(0,0,0,0) !important;
}

body.dark-theme #ajaxModal #id_fandoms::-webkit-scrollbar-button,
body.dark-theme #ajaxModal div#id_fandoms::-webkit-scrollbar-button,
body.dark-theme .modal-content div#id_fandoms::-webkit-scrollbar-button,
body.dark-theme td.checkbox-cell ul::-webkit-scrollbar-button,
body.dark-theme td.checkbox-cell::-webkit-scrollbar-button {
    background: #4B0082 !important;
}

/* Firefox fallback for the specific scrollable regions */
body.dark-theme #ajaxModal #id_fandoms,
body.dark-theme .modal-content #id_fandoms,
body.dark-theme td.checkbox-cell ul,
body.dark-theme td.checkbox-cell {
    scrollbar-color: #4B0082 var(--card-bg) !important;
    scrollbar-width: thin !important;
}

/* Ensure theme toggle spacing consistent (use light-theme spacing) */
.site-navbar .theme-toggle,
.theme-toggle {
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.theme-toggle .toggle-icon {
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
  font-size: 1em !important;
}
.theme-toggle-nav { gap: 8px !important; }


/* Toggle icon visibility: only show icon for current theme */
.toggle-icon { display: inline-block !important; }
body.light-theme .toggle-icon#moon { display: none !important; }
body.light-theme .toggle-icon#sun { display: inline-block !important; }
body.dark-theme .toggle-icon#sun { display: none !important; }
body.dark-theme .toggle-icon#moon { display: inline-block !important; }


/* Invert theme icons (show action icon, not state) + normalize spacing */
.theme-toggle { gap: 6px !important; display: inline-flex !important; align-items: center !important; }
.theme-toggle .toggle-icon { margin: 0 !important; line-height: 1 !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; font-size: 1em !important; width: 1.2em !important; padding: 0 !important; }
.theme-toggle-nav { gap: 8px !important; }

/* Icon visibility: show opposite icon to indicate action (action, not current state) */
.toggle-icon { display: inline-block !important; }
body:not(.dark-theme) .toggle-icon#sun { display: none !important; }
body:not(.dark-theme) .toggle-icon#moon { display: inline-block !important; }
body.dark-theme .toggle-icon#moon { display: none !important; }
body.dark-theme .toggle-icon#sun { display: inline-block !important; }


/* Normalize custom user links spacing */
.site-navbar .custom-user-links { margin-left: 6px !important; display:inline-flex !important; align-items:center !important; gap:0.4rem !important; }

/* Ensure theme-toggle sits flush to account menu */
.site-navbar .theme-toggle-nav { margin-right: 0 !important; }

/* Tighter label spacing */
.theme-toggle { margin-right: 0 !important; }



/* Ensure consistent spacing between shopping cart and account menu */
.site-navbar #shopping-cart-icon { margin-right: 6px !important; }
.site-navbar .theme-toggle-nav { margin-left: 0 !important; margin-right: 0 !important; }
.site-navbar .custom-user-links { margin-left: 6px !important; }

/* Appended: dark-theme heading and breadcrumb fixes (applies only in dark theme) */
body.dark-theme .content-area h1,
body.dark-theme .content-area h2,
body.dark-theme .content-area h3,
body.dark-theme .card h1,
body.dark-theme .card h2,
body.dark-theme .card h3,
body.dark-theme .tab-content h2,
body.dark-theme .page-title,
body.dark-theme h2.text-center {
  color: var(--card-text, #FFFFFF) !important;
}

body.dark-theme #breadcrumbs,
body.dark-theme #breadcrumbs a,
body.dark-theme .breadcrumb,
body.dark-theme .breadcrumb a,
body.dark-theme .breadcrumb .breadcrumb-item {
  color: var(--card-text, #F5EBFF) !important;
}

body.dark-theme .breadcrumb a:hover,
body.dark-theme #breadcrumbs a:hover {
  color: var(--menu-link-hover-color, plum) !important;
  text-decoration: none;
}

/* ensure breadcrumb divider is visible */
body.dark-theme .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--card-text, #F5EBFF) !important;
  opacity: 0.85;
}