/* ======================================================
   CORTEX DARK MODE
   Applied via html.dark-mode class (set by JavaScript)
   Uses !important to override page-specific stylesheets
   ====================================================== */

/* ======================================================
   GLOBAL RESET - UNSET DEFAULT BACKGROUNDS
====================================================== */
html.dark-mode div,
html.dark-mode section,
html.dark-mode article,
html.dark-mode aside,
html.dark-mode header,
html.dark-mode footer,
html.dark-mode nav,
html.dark-mode main,
html.dark-mode form,
html.dark-mode fieldset,
html.dark-mode legend,
html.dark-mode figure,
html.dark-mode figcaption,
html.dark-mode details,
html.dark-mode summary {
    background-color: transparent !important;
}

/* ======================================================
   CSS VARIABLES - DARK PALETTE
====================================================== */
html.dark-mode {
    --bg: #0f172a !important;
    --card-bg: #1e293b !important;
    --border: #334155 !important;
    --text: #f1f5f9 !important;
    --muted: #94a3b8 !important;
    --primary: #3b82f6 !important;
    --primary-hover: #60a5fa !important;
    --error: #f87171 !important;

    /* Order page variables */
    --order-panel-bg: #1e293b !important;
    --order-panel-border: #334155 !important;
    --order-panel-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2) !important;
    --order-panel-shadow-hover: 0 4px 12px rgba(0,0,0,0.4) !important;
    --order-heading-bg: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    --order-accent: #3b82f6 !important;
    --order-accent-hover: #60a5fa !important;
    --order-success: #34d399 !important;
    --order-danger: #f87171 !important;
    --order-warning: #fbbf24 !important;
    --order-muted: #94a3b8 !important;
}

/* ======================================================
   GLOBAL / BODY
====================================================== */
html.dark-mode body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ======================================================
   CARDS & PANELS
====================================================== */
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .controls-card,
html.dark-mode .stat-card,
html.dark-mode .stat-tile,
html.dark-mode .summary-tile,
html.dark-mode .dashboard-tile,
html.dark-mode .training-card,
html.dark-mode .designation-tile,
html.dark-mode .permission-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html.dark-mode .stat-card,
html.dark-mode .designation-tile {
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%) !important;
}

html.dark-mode .card:hover,
html.dark-mode .panel:hover,
html.dark-mode .dashboard-tile:hover,
html.dark-mode .training-card:hover,
html.dark-mode .designation-tile:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

html.dark-mode .stat-card--clickable:hover,
html.dark-mode .result-row:hover,
html.dark-mode .training-list-link:hover {
    background-color: #334155 !important;
}

/* ======================================================
   HEADINGS & TEXT
====================================================== */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .page-container h2,
html.dark-mode .page-header h2,
html.dark-mode .training-header h2,
html.dark-mode .panel h3,
html.dark-mode .panel-title,
html.dark-mode .stat-value,
html.dark-mode .designation-name,
html.dark-mode .designation-amount,
html.dark-mode .header-center h1 {
    color: #f1f5f9 !important;
}

html.dark-mode .subtitle,
html.dark-mode .stat-label,
html.dark-mode .stat-meta,
html.dark-mode .designation-meta,
html.dark-mode .field label,
html.dark-mode .form-row div:first-child,
html.dark-mode .form-label,
html.dark-mode .panel-inline-field label,
html.dark-mode .meta-label,
html.dark-mode .filter-row label,
html.dark-mode .date-filter-bar label {
    color: #94a3b8 !important;
}

html.dark-mode p,
html.dark-mode .page-container p,
html.dark-mode .empty,
html.dark-mode .empty-state,
html.dark-mode .hint,
html.dark-mode .form-help,
html.dark-mode .reprint-empty {
    color: #94a3b8 !important;
}

html.dark-mode .placeholder,
html.dark-mode #dateInfo {
    color: #64748b !important;
}

/* ======================================================
   FORMS & INPUTS
====================================================== */
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="number"],
html.dark-mode input[type="date"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="search"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .form-row input,
html.dark-mode .form-row select,
html.dark-mode .form-row textarea,
html.dark-mode .filters-row input[type="date"],
html.dark-mode .filters-row select,
html.dark-mode #orderInfoPanel select,
html.dark-mode #orderInfoPanel input,
html.dark-mode .items-table input,
html.dark-mode .rel-input,
html.dark-mode .typeahead-wrapper input[type="text"],
html.dark-mode #productSearchInput,
html.dark-mode #fellowSearchInput,
html.dark-mode #correspondenceModal select,
html.dark-mode #reprintModal input[type="date"],
html.dark-mode #reprintModal textarea,
html.dark-mode #donationModal input,
html.dark-mode #donationModal select,
html.dark-mode #questionText,
html.dark-mode #explanation,
html.dark-mode .badgealert input[type="text"],
html.dark-mode .training-container .form-grid input,
html.dark-mode #newItemInput,
html.dark-mode #filter,
html.dark-mode .passkey-name-input input,
html.dark-mode .date-filter-bar input[type="date"] {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode .typeahead-wrapper input[type="text"]::placeholder,
html.dark-mode #productSearchInput::placeholder,
html.dark-mode #fellowSearchInput::placeholder {
    color: #64748b !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode .form-row input:focus,
html.dark-mode .form-row select:focus,
html.dark-mode .form-row textarea:focus,
html.dark-mode #orderInfoPanel select:focus,
html.dark-mode #orderInfoPanel input:focus,
html.dark-mode .items-table input:focus,
html.dark-mode .typeahead-wrapper input[type="text"]:focus,
html.dark-mode #productSearchInput:focus,
html.dark-mode #fellowSearchInput:focus,
html.dark-mode #correspondenceModal select:focus,
html.dark-mode #reprintModal input[type="date"]:focus,
html.dark-mode #reprintModal textarea:focus,
html.dark-mode #donationModal input:focus,
html.dark-mode #donationModal select:focus,
html.dark-mode #questionText:focus,
html.dark-mode #explanation:focus,
html.dark-mode .badgealert input[type="text"]:focus,
html.dark-mode .training-container .form-grid input:focus {
    background-color: #1e293b !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

html.dark-mode input:disabled,
html.dark-mode select:disabled,
html.dark-mode textarea:disabled {
    background-color: #1e293b !important;
    color: #64748b !important;
}

/* ======================================================
   BUTTONS
====================================================== */
html.dark-mode .btn,
html.dark-mode .btn-primary {
    background:#334155 !important;
    border-color: #334155 !important;
    color: #e0e7ff !important;
}

html.dark-mode .btn:hover,
html.dark-mode .btn-primary:hover {
    background: #334155 !important;
    border-color:#334155 !important;
    color: #fff !important;
}

html.dark-mode .btn-secondary,
html.dark-mode .order-header-row .btn-secondary,
html.dark-mode .modal-footer .btn.secondary,
html.dark-mode .dashboard-footer .btn {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .order-header-row .btn-secondary:hover,
html.dark-mode .modal-footer .btn.secondary:hover,
html.dark-mode .dashboard-footer .btn:hover {
    background-color: #475569 !important;
    border-color: #64748b !important;
}

html.dark-mode .panel .order-btns,
html.dark-mode .addStuff,
html.dark-mode .clear-selection,
html.dark-mode #clearProductSelection,
html.dark-mode #clearFellowSelection,
html.dark-mode .inventory-toggle-btn,
html.dark-mode #addOption,
html.dark-mode .buttonbrowse {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .panel .order-btns:hover,
html.dark-mode .addStuff:hover,
html.dark-mode .clear-selection:hover,
html.dark-mode #clearProductSelection:hover,
html.dark-mode #clearFellowSelection:hover,
html.dark-mode .inventory-toggle-btn:hover,
html.dark-mode #addOption:hover {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .order-screenshot-btn {
    background-color: rgba(37, 99, 235, 0.15) !important;
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

html.dark-mode .order-screenshot-btn:hover {
    background-color: rgba(37, 99, 235, 0.25) !important;
}

html.dark-mode .order-delete-top-btn {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: #f87171 !important;
    color: #f87171 !important;
}

html.dark-mode .order-delete-top-btn:hover {
    background-color: rgba(239, 68, 68, 0.25) !important;
}

/* Preset date buttons */
html.dark-mode .preset-btn {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .preset-btn:hover {
    background: #475569 !important;
    border-color: #64748b !important;
}

/* ======================================================
   TABLES
====================================================== */
html.dark-mode .results-table,
html.dark-mode .emails-table,
html.dark-mode table.users-table {
    background-color: #1e293b !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html.dark-mode .results-table thead,
html.dark-mode .emails-table thead,
html.dark-mode .users-table th,
html.dark-mode thead {
    background-color: #0a111b !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

html.dark-mode .results-table th,
html.dark-mode .emails-table th,
html.dark-mode .users-table th,
html.dark-mode thead th {
    background-color: #0a111b !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .results-table td,
html.dark-mode .emails-table td,
html.dark-mode .users-table td,
html.dark-mode #productTable tbody td,
html.dark-mode #donationsTable tbody td {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}

/* Generic table row hover - catch all */
html.dark-mode table tr:hover,
html.dark-mode table tbody tr:hover,
html.dark-mode .results-table tr:hover,
html.dark-mode .results-table .result-row:hover,
html.dark-mode .emails-table tbody tr:hover,
html.dark-mode #productTable tbody tr:hover,
html.dark-mode #donationsTable tbody tr:hover {
    background-color: #334155 !important;
}

/* Ensure td elements also get dark background on row hover */
html.dark-mode table tr:hover td,
html.dark-mode table tbody tr:hover td,
html.dark-mode .results-table tr:hover td,
html.dark-mode .results-table .result-row:hover td {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Cell-link hover state */
html.dark-mode .results-table tr:hover .cell-link,
html.dark-mode .results-table tr:hover .row-link {
    background-color: #334155 !important;
}

html.dark-mode #productTable tbody tr:nth-child(even) {
    background-color: #172033 !important;
}

html.dark-mode #productTable tbody tr:nth-child(even):hover {
    background-color: #334155 !important;
}

html.dark-mode .results-table td.strong,
html.dark-mode .results-table .row-link,
html.dark-mode .result-row:hover .row-link {
    color: #f1f5f9 !important;
}

html.dark-mode .results-table td.email,
html.dark-mode .results-table .email,
html.dark-mode th.sortable a:hover,
html.dark-mode th.sortable.active {
    color: #60a5fa !important;
}

html.dark-mode .results-table td::before,
html.dark-mode .emails-table td::before {
    color: #64748b !important;
}

/* Table row links */
html.dark-mode .row-link {
    color: #60a5fa !important;
}

/* ======================================================
   ALERTS & WARNINGS
====================================================== */
html.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}

html.dark-mode .alert-success {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: #4ade80 !important;
    color: #86efac !important;
}

html.dark-mode .alert-warning,
html.dark-mode .record-lock-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
    border-color: #fbbf24 !important;
    color: #fcd34d !important;
}

html.dark-mode .green-warning {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: #4ade80 !important;
    color: #86efac !important;
}

html.dark-mode .field-dirty {
    background-color: rgba(251, 191, 36, 0.2) !important;
}

/* ======================================================
   MODALS
====================================================== */
html.dark-mode .modal-overlay,
html.dark-mode .modal-overlay2,
html.dark-mode .popup-overlay,
html.dark-mode .badgecontainer,
html.dark-mode #donationModal .modal-overlay,
html.dark-mode #productModal.modal-overlay,
html.dark-mode #fellowModal.modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .modal-window,
html.dark-mode .modal-dialog,
html.dark-mode .modal-body2,
html.dark-mode .popup-container,
html.dark-mode .badgealert,
html.dark-mode #donationModal .modal,
html.dark-mode #productModal .modal-window,
html.dark-mode #fellowModal .modal-window {
    background: #1e293b !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-header2,
html.dark-mode .popup-header,
html.dark-mode #donationModal h3,
html.dark-mode #productModal .modal-header,
html.dark-mode #fellowModal .modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #172554 100%) !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode #fellowModal .modal-header {
    background: linear-gradient(135deg, #3b1f5f 0%, #2d1b4e 100%) !important;
}

html.dark-mode .modal-header h3,
html.dark-mode .popup-header h3,
html.dark-mode #donationModal h3,
html.dark-mode #productModal h3,
html.dark-mode #fellowModal h3 {
    color: #93c5fd !important;
}

html.dark-mode #fellowModal h3 {
    color: #c4b5fd !important;
}

html.dark-mode .modal-body,
html.dark-mode .modal-body label,
html.dark-mode #donationModal label,
html.dark-mode #productModal label,
html.dark-mode #fellowModal label {
    color: #94a3b8 !important;
}

html.dark-mode .modal-body2 {
    color: #e2e8f0 !important;
}

html.dark-mode .modal-footer,
html.dark-mode .modal-footer2,
html.dark-mode .popup-footer,
html.dark-mode #donationModal .modal-actions,
html.dark-mode #productModal .modal-footer,
html.dark-mode #fellowModal .modal-footer {
    background: #0f172a !important;
    border-top-color: #334155 !important;
}

html.dark-mode .modal-close,
html.dark-mode .popup-close {
    color: #94a3b8 !important;
}

html.dark-mode .modal-close:hover,
html.dark-mode .popup-close:hover {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Typeahead dropdowns */
html.dark-mode .typeahead-dropdown,
html.dark-mode #productModal .typeahead-dropdown,
html.dark-mode #fellowModal .typeahead-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .typeahead-dropdown a,
html.dark-mode .typeahead-dropdown div,
html.dark-mode #productModal .typeahead-dropdown a,
html.dark-mode #productModal .typeahead-dropdown div,
html.dark-mode #fellowModal .typeahead-dropdown a,
html.dark-mode #fellowModal .typeahead-dropdown div {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .typeahead-dropdown a:hover,
html.dark-mode .typeahead-dropdown div:hover,
html.dark-mode #productModal .typeahead-dropdown a:hover,
html.dark-mode #productModal .typeahead-dropdown div:hover,
html.dark-mode #fellowModal .typeahead-dropdown a:hover,
html.dark-mode #fellowModal .typeahead-dropdown div:hover {
    background: #334155 !important;
    color: #60a5fa !important;
}

/* Selected items */
html.dark-mode .selected-item,
html.dark-mode #productModal .selected-item {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%) !important;
    border-color: #4ade80 !important;
    color: #86efac !important;
}

html.dark-mode #fellowModal .selected-item {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%) !important;
    border-color: #a855f7 !important;
    color: #c4b5fd !important;
}

/* ======================================================
   CUSTOMER PAGE
====================================================== */
html.dark-mode .customer-container {
    background-color: #0f172a !important;
}

html.dark-mode .customer-left,
html.dark-mode .customer-middle,
html.dark-mode .customer-right,
html.dark-mode .customer-correspondence,
html.dark-mode .customer-orders {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .customer-header {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

html.dark-mode .product-header {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

html.dark-mode .customer-nav {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
}

html.dark-mode .customer-save-bar,
html.dark-mode .product-save-bar,
html.dark-mode #saveBar {
    background: rgba(30, 41, 59, 0.95) !important;
    border-top-color: #334155 !important;
}

html.dark-mode #saveBar.unsavedWarning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
    border-color: #fbbf24 !important;
}

/* Checkbox pills */
html.dark-mode .checkbox-pill {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .checkbox-pill:has(input:checked) {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

/* Relationships */
html.dark-mode .relationship-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .rel-remove-btn {
    color: #64748b !important;
}

html.dark-mode .rel-remove-btn:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

html.dark-mode .relationships-empty {
    color: #64748b !important;
}

/* Scrollbars */
html.dark-mode .relationships-list::-webkit-scrollbar-thumb,
html.dark-mode .typeahead-dropdown::-webkit-scrollbar-thumb,
html.dark-mode #playlistnames::-webkit-scrollbar-thumb,
html.dark-mode .conversation-history-scroll::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

html.dark-mode .relationships-list::-webkit-scrollbar-thumb:hover,
html.dark-mode .typeahead-dropdown::-webkit-scrollbar-thumb:hover,
html.dark-mode #playlistnames::-webkit-scrollbar-thumb:hover,
html.dark-mode .conversation-history-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

/* Monthly donor section */
html.dark-mode #monthlyDonorFields .form-row {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .monthly-donor-icon {
    color: #4ade80 !important;
}

/* ======================================================
   ORDER PAGE
====================================================== */
html.dark-mode .order-header-row {
    background: #1e293b !important;
}

html.dark-mode .order-section-heading {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    color: #f1f5f9 !important;
}

/* Toggle pills */
html.dark-mode .te-check span {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html.dark-mode .te-check:hover span {
    background: #475569 !important;
}

html.dark-mode .te-check input:checked + span {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

html.dark-mode .te-check input[data-field="daf"]:checked + span {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}

html.dark-mode #daf-selection-wrapper {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border-color: #f87171 !important;
}

html.dark-mode .desHelp {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

/* Table action buttons */
html.dark-mode .item-actions button.edit {
    color: #94a3b8 !important;
    background-color: unset !important;
    border: unset !important;
}

html.dark-mode .item-actions button.delete {
    color: #64748b !important;
        background-color: unset !important;
    border: unset !important;
}

html.dark-mode .item-actions button.edit:hover {
    color: #60a5fa !important;
}

html.dark-mode .item-actions button.delete:hover {
    color: #f87171 !important;
}

/* Edit history */
html.dark-mode .edit-history-item {
    border-color: #334155 !important;
}

html.dark-mode .edit-history-main {
    color: #e2e8f0 !important;
}

html.dark-mode .edit-history-main strong {
    color: #f1f5f9 !important;
}

html.dark-mode .edit-history-date {
    color: #64748b !important;
}

/* Scroll box */
html.dark-mode .scroll-box {
    border-color: #334155 !important;
}

/* Order action buttons border */
html.dark-mode .order-action-btns {
    border-top-color: #334155 !important;
}

/* Dotted leaders in product table */
html.dark-mode #productTable tbody td:nth-child(2)::after {
    border-bottom-color: #475569 !important;
}

/* Order history panel */
html.dark-mode .order-row {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .order-row:hover {
    background: #334155 !important;
}

html.dark-mode .order-row.has-donation {
    border-left-color: #64748b !important;
}

html.dark-mode .order-donation-icon {
    color: #64748b !important;
}

/* Donation heart */
html.dark-mode .donation-row .fa-heart,
html.dark-mode .fa-heart {
    color: #f87171 !important;
}

/* ======================================================
   PRODUCT PAGE
====================================================== */
html.dark-mode .reprint-row {
    background: #0f172a !important;
}

html.dark-mode .reprint-row:hover {
    background: #334155 !important;
}

/* ======================================================
   REPORTS
====================================================== */
/* Date filter bar */
html.dark-mode .date-filter-bar {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Geo tags panel */
html.dark-mode .geo-tags {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Tag pills in reports */
html.dark-mode .tag-item {
    color: #e2e8f0 !important;
}

/* Pagination */
html.dark-mode .page-link {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .page-link:hover {
    background-color: #475569 !important;
}

html.dark-mode .page-status {
    color: #94a3b8 !important;
}

/* ======================================================
   CORRESPONDENCE & REPRINTS PANELS
====================================================== */
html.dark-mode .conversation-history-item,
html.dark-mode .reprint-history-item {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .conversation-history-item:hover,
html.dark-mode .reprint-history-item:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .conversation-date,
html.dark-mode .reprint-date {
    color: #94a3b8 !important;
}

html.dark-mode .conversation-summary,
html.dark-mode .reprint-id {
    color: #f1f5f9 !important;
}

html.dark-mode .conversation-history-item[data-type="letter"] {
    border-left-color: #8b5cf6 !important;
}

html.dark-mode .conversation-history-item[data-type="letter"]:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    border-color: #6d28d9 !important;
    border-left-color: #8b5cf6 !important;
}

html.dark-mode .conversation-history-item .letter-icon {
    color: #a78bfa !important;
}

html.dark-mode .letter-cta {
    border-bottom-color: #334155 !important;
}

html.dark-mode .letter-cta .btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .letter-cta .btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    border-color: #6d28d9 !important;
    color: #a78bfa !important;
}

html.dark-mode .recipient-preview {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .recipient-warning {
    color: #fbbf24 !important;
}

html.dark-mode .letter-detail-label {
    color: #94a3b8 !important;
}

html.dark-mode .letter-detail-value {
    color: #f1f5f9 !important;
}

html.dark-mode .letter-detail-message {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #letterModal select#letter_template {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #letterModal select#letter_template:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
}

html.dark-mode #letterModal textarea#letter_message {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #letterModal textarea#letter_message:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .letter-char-count {
    color: #64748b;
}

html.dark-mode .letter-char-count.over-limit {
    color: #ef4444;
}

html.dark-mode .reprint-id {
    color: #64748b !important;
}

html.dark-mode .conversation-add-btn,
html.dark-mode .reprint-add-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .conversation-add-btn:hover,
html.dark-mode .reprint-add-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

html.dark-mode #conversationHistoryPanel .panel-header,
html.dark-mode #orderHistoryPanel .panel-header,
html.dark-mode #reprintHistoryPanel .panel-header,
html.dark-mode #relationshipsPanel .panel-header,
html.dark-mode .panel-header-divider,
html.dark-mode .panel h3 {
    border-bottom-color: #334155 !important;
}

html.dark-mode #reprintHistoryPanel .panel-header h3 {
    color: #e2e8f0 !important;
}

/* ======================================================
   POPUPS (Search)
====================================================== */
html.dark-mode .search-fields label {
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .search-fields label:hover {
    background-color: #334155 !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .search-fields input[type=radio]:checked + label {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

html.dark-mode .search-fields-label,
html.dark-mode #search-input-field label {
    color: #94a3b8 !important;
}

html.dark-mode .popup-body input[type=text] {
    border-color: #334155 !important;
}

/* ======================================================
   TRAINING
====================================================== */
html.dark-mode .training-card .card-title {
    color: #fff !important;
}

html.dark-mode .training-icon {
    color: #94a3b8 !important;
}

html.dark-mode .training-card .card-desc {
    color: #64748b !important;
}

html.dark-mode .training-card.accent-orange .training-icon {
    color: #fb923c !important;
}

html.dark-mode .training-card.accent-red .training-icon {
    color: #f87171 !important;
}

html.dark-mode .training-card.muted .training-icon {
    color: #64748b !important;
}

html.dark-mode .training-card.accent-blue .training-icon {
    color: #38bdf8 !important;
}

html.dark-mode .training-footer .logout-link {
    color: #64748b !important;
}

html.dark-mode .training-list-link {
    color: #f1f5f9 !important;
}

html.dark-mode .training-checkbox {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .training-checkbox:hover {
    background: #1e293b !important;
    border-color: #475569 !important;
}

html.dark-mode .training-list-item {
    border-bottom-color: #334155 !important;
}

/* Tag pills */
html.dark-mode .question-text {
    color: #e2e8f0 !important;
}

html.dark-mode .tag-pill {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

html.dark-mode .tag-pill:hover {
    background: rgba(59, 130, 246, 0.25) !important;
}

html.dark-mode .tag-pill[data-new-tag="1"] {
    background-color: rgba(251, 191, 36, 0.15) !important;
    border-color: #fbbf24 !important;
    color: #fcd34d !important;
}

html.dark-mode .tag-pill .remove-tag {
    color: #64748b !important;
}

html.dark-mode .tag-pill .remove-tag:hover {
    color: #f87171 !important;
}

html.dark-mode .trainee-tags .tag-pill {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

/* Options */
html.dark-mode .option {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .option.correct {
    background: rgba(56, 189, 248, 0.1) !important;
    border-color: #38bdf8 !important;
}

html.dark-mode .deleteOption {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html.dark-mode .deleteOption:hover {
    background: rgba(239, 68, 68, 0.25) !important;
}

html.dark-mode .correctOption {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

html.dark-mode .option.correct .correctOption {
    background: #38bdf8 !important;
    color: #0f172a !important;
}

/* Quiz page */
html.dark-mode .training-container.quiz-page .answer-option {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .training-container.quiz-page .answer-option:hover {
    background: #334155 !important;
    border-color: #475569 !important;
}

html.dark-mode .training-container.quiz-page .rightanswer {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

html.dark-mode .training-container.quiz-page .wronganswer {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

html.dark-mode .training-container.quiz-page .confirmation {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
}

html.dark-mode .training-container.quiz-page .success {
    color: #6ee7b7 !important;
}

html.dark-mode .training-container.quiz-page .quiz-timer {
    color: #94a3b8 !important;
}

html.dark-mode .training-container.quiz-page .quiz-timer.red {
    color: #f87171 !important;
}

/* Trainee rows */
html.dark-mode .trainee-row {
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .trainee-name {
    color: #f1f5f9 !important;
}

html.dark-mode .trainee-meta {
    color: #94a3b8 !important;
}

html.dark-mode .trainee-meta.italic {
    color: #64748b !important;
}

html.dark-mode .trainee-actions .btn-muted {
    background: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .trainee-actions .btn-muted:hover {
    background: #64748b !important;
}

/* Report card */
html.dark-mode .report-card p {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

html.dark-mode .report-card h3 {
    color: #f1f5f9 !important;
}

html.dark-mode .report-card .average {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
}

html.dark-mode .report-card hr {
    background: #334155 !important;
}

/* Playlist names */
html.dark-mode #playlistnames > div:hover,
html.dark-mode .training-container #playlistnames > div:hover {
    background: #334155 !important;
}

html.dark-mode #playlistnames label,
html.dark-mode .training-container #playlistnames label {
    color: #f1f5f9 !important;
}

html.dark-mode #playlistnames label span,
html.dark-mode .training-container #playlistnames label span {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

html.dark-mode #playlistnames input[type="checkbox"]:checked + label span,
html.dark-mode .training-container #playlistnames input[type="checkbox"]:checked + label span {
    background: #3b82f6 !important;
    color: #fff !important;
}

html.dark-mode #newtoplaylistcontainer > strong {
    color: #f1f5f9 !important;
}

/* Upload container */
html.dark-mode .uploadcontainer .file-browse {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .uploadcontainer .file-browse::before {
    color: #64748b !important;
}

html.dark-mode .uploadcontainer .form-control {
    color: #64748b !important;
}

html.dark-mode .uploadcontainer .file-browse:nth-of-type(1) {
    background-color: rgba(37, 99, 235, 0.1) !important;
    border-left-color: #3b82f6 !important;
}

html.dark-mode .uploadcontainer .file-browse:nth-of-type(2) {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-left-color: #f59e0b !important;
}

/* Edit link */
html.dark-mode .edit-link,
html.dark-mode .colorlink,
html.dark-mode #activate_creator {
    color: #60a5fa !important;
}

/* ======================================================
   2FA PAGE
====================================================== */
html.dark-mode .card-login {
    background: #1e293b !important;
}

html.dark-mode .backup-codes {
    background: #0f172a !important;
}

html.dark-mode .backup-codes li {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .auth-method-btn {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .auth-method-btn:hover {
    background: #334155 !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .auth-method-btn.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .qr-center img {
    border-color: #334155 !important;
}

html.dark-mode .passkey-status.authenticating,
html.dark-mode .passkey-status.registering {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fcd34d !important;
}

html.dark-mode .passkey-status.error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

html.dark-mode .passkey-status.success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

/* ======================================================
   USERS PAGE
====================================================== */
html.dark-mode .badge {
    background: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .badge.admin {
    background: #3b82f6 !important;
}

html.dark-mode .badge.readonly {
    background: #64748b !important;
}

html.dark-mode .users-table th,
html.dark-mode .users-table td {
    border-bottom-color: #334155 !important;
}

html.dark-mode .permission-divider,
html.dark-mode .no-passkeys,
html.dark-mode .passkey-meta,
html.dark-mode .add-passkey-section p {
    color: #94a3b8 !important;
}

html.dark-mode .info-icon {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

html.dark-mode .info-icon::after {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html.dark-mode .passkey-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .passkey-item:hover {
    background: #334155 !important;
}

html.dark-mode .add-passkey-section {
    border-color: #475569 !important;
}

html.dark-mode .browser-support-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fcd34d !important;
}

html.dark-mode .permission-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .permission-card.admin-card {
    border-left-color: #f87171 !important;
}

html.dark-mode .permission-card.warning-card {
    border-left-color: #fbbf24 !important;
}

html.dark-mode .sub-permission {
    background: #162032 !important;
    border-left-color: #475569 !important;
}

/* ======================================================
   TAGS PANEL
====================================================== */
html.dark-mode .tags-panel {
    border-color: #475569 !important;
}

html.dark-mode .tag-section-wrapper {
    background: #1e293b !important;
    border-color: #475569 !important;
}

html.dark-mode .tag-section-wrapper:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

html.dark-mode .remove-tag {
    color: #64748b !important;
}

html.dark-mode .remove-tag:hover {
    color: #f87171 !important;
}

/* ======================================================
   SEARCH PAGE
====================================================== */
html.dark-mode .page-container h2 em {
    color: #60a5fa !important;
}

html.dark-mode .search-toggle-label {
    color: #94a3b8 !important;
}

html.dark-mode .search-toggle-item {
    color: #e0e7ff !important;
}

html.dark-mode .search-toggle-item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .search-toggle-first {
    border-right-color: rgba(255, 255, 255, 0.25) !important;
}

/* ======================================================
   ICONS
====================================================== */
html.dark-mode .small-icon {
    color: #f1f5f9 !important;
}

html.dark-mode .geo-icon {
    color: #94a3b8 !important;
}

html.dark-mode .geo-icon-wrapper:hover {
    color: #60a5fa !important;
}

html.dark-mode .panel-icon {
    color: #f1f5f9 !important;
}

html.dark-mode .order-btns .fas,
html.dark-mode .order-btns .fa {
    color: #94a3b8 !important;
}


/* ======================================================
   MISCELLANEOUS
====================================================== */
/* Delete button text */
html.dark-mode .customer-delete-top-btn {
    color: #f87171 !important;
}

html.dark-mode .delete {
    color: #f87171 !important;
}

html.dark-mode .delete:hover {
    color: #fca5a5 !important;
}

/* Import button */
html.dark-mode .import-btn {
    background: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .import-btn:hover {
    background: #64748b !important;
}

/* Price/qty inputs */
html.dark-mode .price-input,
html.dark-mode .qty-input {
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* Reports dashboard badge */
html.dark-mode .tile-badge {
    background: #ef4444 !important;
    color: #fff !important;
}

html.dark-mode .reports-category {
    color: #64748b !important;
}

/* Form select */
html.dark-mode .form-select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Panel hr */
html.dark-mode .panel hr {
    border-top-color: #334155 !important;
}

/* Website product save status */
html.dark-mode .save-status {
    color: #94a3b8 !important;
}

/* ======================================================
   FOCUS RING OVERRIDES (for better visibility in dark)
====================================================== */
html.dark-mode *:focus {
    outline-color: #3b82f6 !important;
}

/* ======================================================
   DARK MODE TOGGLE
====================================================== */
html.dark-mode .dark-mode-toggle label {
    color: #94a3b8 !important;
}

html.dark-mode .dark-mode-toggle select {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* ======================================================
   SELECTION
====================================================== */
html.dark-mode ::selection {
    background: rgba(59, 130, 246, 0.4) !important;
    color: #fff !important;
}

/* ======================================================
   DONATELY APPLICATION STYLES
====================================================== */

/* Body and base text (wptheme2.css overrides) */
html.dark-mode body,
html.dark-mode button,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Dashboard container */
html.dark-mode .dashboard {
    background-color: #0f172a !important;
}

/* Dashboard element cards */
html.dark-mode .db_element {
    background-color: #1e293b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode a .db_element{
    color: #e2e8f0 !important;
}

html.dark-mode .db_element:hover {
    background-color: #334155 !important;
}

/* Collection links */
html.dark-mode .collection_link {
    color: #93c5fd !important;
}

/* Profile menu */
html.dark-mode .profilemenu {
    background-color: #1e293b !important;
}

/* Registration and form headers */
html.dark-mode .regheader,
html.dark-mode .evform_header {
    background-color: #1e40af !important;
}

/* Confirmation message */
html.dark-mode .confirmation {
    background-color: #166534 !important;
    border-color: #22c55e !important;
}

/* Error message */
html.dark-mode .errormessage {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}

/* FAQ sections */
html.dark-mode .faq,
html.dark-mode .faqanswer {
    color: #e2e8f0 !important;
}

/* Fancy header */
html.dark-mode .fancyheader {
    color: #f1f5f9 !important;
}

/* Highlight */
html.dark-mode .highlight {
    background-color: #854d0e !important;
    color: #fef3c7 !important;
}

/* Color links */
html.dark-mode .colorlink,
html.dark-mode .colorlink a {
    color: #60a5fa !important;
}

html.dark-mode .colorlink:hover {
    color: #f97316 !important;
}

html.dark-mode .colorlink2 {
    color: #cbd5e1 !important;
}

/* Playlist list container */
html.dark-mode #listofplaylists,
html.dark-mode .listofplaylists {
    background-color: #1e3a5f !important;
    color: #e2e8f0 !important;
}

/* Profile page box */
html.dark-mode .profilepagebox {
    background-color: #1e40af !important;
}

/* Playlist container */
html.dark-mode .playlistcontainer {
    color: #e2e8f0 !important;
}

/* Sortable list */
html.dark-mode .sortable {
    background-color: transparent !important;
}

/* Forms and inputs (wptheme2.css overrides) */
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode input[type="url"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode select,
html.dark-mode textarea {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="number"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="url"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="search"]:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

/* Buttons (wptheme2.css overrides) */
html.dark-mode button,
html.dark-mode input[type="button"],
html.dark-mode input[type="reset"] {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .remove-tag{
    background-color: unset !important;
}

html.dark-mode #saveOrderBtn {
 background-color: #37465e !important;
}


html.dark-mode button:hover,
html.dark-mode button:focus,
html.dark-mode input[type="button"]:hover,
html.dark-mode input[type="button"]:focus,
html.dark-mode input[type="reset"]:hover,
html.dark-mode input[type="reset"]:focus {
    background-color: #1e40af !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

/* Verse controls - eye and study buttons */
html.dark-mode .eye,
html.dark-mode .studyit {
    background-color: #166534 !important;
}

html.dark-mode .studyit {
    background-color: #1e40af !important;
}

html.dark-mode .pencil {
    background-color: #475569 !important;
}

/* Topnav - keep original colors, just ensure text visibility */
html.dark-mode .topnav,
html.dark-mode .guestnav {
    background: #0f172a !important;
}

/* Li and paragraph text */
html.dark-mode li p {
    color: #94a3b8 !important;
}

/* Note card */
html.dark-mode .notecard {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Flip card */
html.dark-mode .flip-card-front,
html.dark-mode .flip-card-back {
    background-color: #1e293b !important;
}

/* Gift summary modal - backdrop */
html.dark-mode #gift-summary {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* Gift summary modal - box */
html.dark-mode #gift-summary .modal {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Gift summary modal - header */
html.dark-mode #gift-summary .modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode #gift-summary .modal-header h2 {
    color: #93c5fd !important;
}

html.dark-mode #gift-summary .close-modal {
    color: #94a3b8 !important;
}

html.dark-mode #gift-summary .close-modal:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

/* Gift summary modal - dropdowns section */
html.dark-mode #modal-dropdowns {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode #modal-dropdown1,
html.dark-mode #modal-dropdown2,
html.dark-mode #modal-dropdown3 {
    background-color: transparent !important;
}

html.dark-mode #modal-dropdowns label {
    color: #94a3b8 !important;
}

html.dark-mode #gift-summary select,
html.dark-mode #gift-summary textarea {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #gift-summary select:focus,
html.dark-mode #gift-summary textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Gift summary modal - closed state */
html.dark-mode #modal-dropdowns.is-closed {
    background: linear-gradient(135deg, #0f420f 0%, #14532d 100%) !important;
    border-bottom-color: #166534 !important;
}

/* Gift summary modal - summary grid */
html.dark-mode .summary-grid {
    background-color: #1e293b !important;
}

html.dark-mode .summary-grid label {
    color: #94a3b8 !important;
}

html.dark-mode .summary-grid .copy {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Generic paragraph and text colors */
html.dark-mode p {
    color: #cbd5e1;
}

/* Headings */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #f1f5f9 !important;
}

/* Generic links in donately */
html.dark-mode a {
    color: #60a5fa;
}

html.dark-mode a:hover {
    color: #93c5fd;
}

/* Closed status */
html.dark-mode .closed,
html.dark-mode tr.closed,
html.dark-mode tbody tr.closed,
html.dark-mode table tr.closed {
    background-color: #0f420f !important;
}

html.dark-mode .closed td,
html.dark-mode tr.closed td,
html.dark-mode tbody tr.closed td,
html.dark-mode table tr.closed td {
    background-color: #0f420f !important;
}

/* Active user avatar circles */
html.dark-mode .auser {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode rotating background colors */
html.dark-mode .auser:nth-child(8n + 1) { background: #6b5f00 !important; }
html.dark-mode .auser:nth-child(8n + 2) { background: #0e4f5f !important; }
html.dark-mode .auser:nth-child(8n + 3) { background: #1e5a1e !important; }
html.dark-mode .auser:nth-child(8n + 4) { background: #5c4a1a !important; }
html.dark-mode .auser:nth-child(8n + 5) { background: #4a2d6b !important; }
html.dark-mode .auser:nth-child(8n + 6) { background: #1a5a4a !important; }
html.dark-mode .auser:nth-child(8n + 7) { background: #5a3020 !important; }
html.dark-mode .auser:nth-child(8n + 8) { background: #2d3060 !important; }

/* ======================================================
   DONATELY TAX PAGE STYLES
====================================================== */

/* Main content container */
html.dark-mode #main_content {
 
    border-color: #334155 !important;
}

/* Table header */
html.dark-mode thead th {
    background-color: #334155 !important;
    border-bottom-color: #475569 !important;
}

/* Table cells */
html.dark-mode th,
html.dark-mode td {
    border-color: #334155 !important;
}

/* Alternating rows */
html.dark-mode tbody tr:nth-child(even) {
    background-color: #1e293b !important;
}

html.dark-mode tbody tr:nth-child(odd) {
    background-color: #0f172a !important;
}

/* Row hover */
html.dark-mode tbody tr:hover {
    background-color: #334155 !important;
}

/* Sent rows (green) */
html.dark-mode tbody tr.row-sent,
html.dark-mode table tr.row-sent,
html.dark-mode tr.row-sent {
    background-color: #14532d !important;
}

html.dark-mode tbody tr.row-sent td,
html.dark-mode table tr.row-sent td,
html.dark-mode tr.row-sent td {
    background-color: #14532d !important;
    border-color: #166534 !important;
}

/* Printed rows */
html.dark-mode .printed {
    background-color: #166534 !important;
}

html.dark-mode .printed a {
    color: #fff !important;
}

/* Success message */
html.dark-mode .success {
    background-color: #14532d !important;
    border-color: #166534 !important;
    color: #86efac !important;
}

/* Error message */
html.dark-mode .error {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fecaca !important;
}

/* Pagination */
html.dark-mode .pagination a {
    border-color: #475569 !important;
    color: #60a5fa !important;
}

html.dark-mode .pagination strong {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .pagination .disabled {
    color: #64748b !important;
}

/* Import summary */
html.dark-mode .import-summary {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Muted text */
html.dark-mode .muted {
    color: #94a3b8 !important;
}

/* Select toggle link */
html.dark-mode #select-toggle {
    color: #60a5fa !important;
}

/* ======================================================
   SCROLLBARS
====================================================== */

/* Firefox */
html.dark-mode {
    scrollbar-color: #475569 #1e293b;
}

html.dark-mode * {
    scrollbar-color: #475569 #1e293b;
}

/* WebKit (Chrome, Safari, Edge) */
html.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 6px;
    border: 2px solid #1e293b;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

html.dark-mode ::-webkit-scrollbar-corner {
    background: #1e293b;
}

/* ======================================================
   MONTHLY DONORS REPORT
====================================================== */

html.dark-mode .summary-tile {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .summary-label {
    color: #e2e8f0 !important;
}

html.dark-mode .summary-value {
    color: #fff !important;
}

/* ======================================================
   DONORS REPORT FILTERS
====================================================== */

html.dark-mode .filter-trigger {
    color: #64748b;
}

html.dark-mode .filter-trigger:hover,
html.dark-mode .filter-trigger.filter-active {
    color: #60a5fa;
}

html.dark-mode .filter-popover {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

html.dark-mode .filter-popover-title {
    color: #f1f5f9;
}

html.dark-mode .filter-label {
    color: #94a3b8;
}

html.dark-mode .filter-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

html.dark-mode .filter-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96,165,250,0.25);
}

html.dark-mode select.filter-select {
    background: #0f172a;
    color: #f1f5f9;
}

html.dark-mode .filter-clear {
    color: #94a3b8;
}

html.dark-mode .filter-clear:hover {
    color: #f87171;
}

html.dark-mode .active-filters-bar {
    background: #172033;
    border-color: #1e3a5f;
}

html.dark-mode .active-filters-label {
    color: #60a5fa;
}

html.dark-mode .filter-tag {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

html.dark-mode .filter-tag-remove {
    color: #64748b;
}

html.dark-mode .filter-tag-remove:hover {
    color: #f87171;
}

html.dark-mode .filter-clear-all {
    color: #94a3b8;
}

html.dark-mode .filter-clear-all:hover {
    color: #f87171;
}

/* ======================================================
   CONTACT TAGS REPORT
====================================================== */

html.dark-mode .tag-filter-header strong {
    color: #fff !important;
}

html.dark-mode .field-label {
    color: #e2e8f0 !important;
}

/* ======================================================
   TRAINING QUIZ PAGE
====================================================== */

html.dark-mode .training-container.quiz-page .panel p.strong {
    color: #fff !important;
}

html.dark-mode .training-container.quiz-page .panel p {
    color: #e2e8f0 !important;
}

html.dark-mode .monthlygift{
    background-color: #5c5305 !important;
    border-radius: none;
}

/* ======================================================
   DONATELY #GIFTS TABLE
====================================================== */

html.dark-mode #gifts {
    background-color: #1e293b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode #gifts thead {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
}

html.dark-mode #gifts th {
    background: #152035 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

html.dark-mode #gifts td {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode #gifts tbody tr:nth-child(even) {
    background-color: #172033 !important;
}

html.dark-mode #gifts tbody tr:hover {
    background-color: #334155 !important;
}

html.dark-mode #gifts tbody tr:hover td {
    background-color: #334155 !important;
}

html.dark-mode #gifts select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #gifts .amount {
    color: #f1f5f9 !important;
}

html.dark-mode #gifts .copy {
    color: #e2e8f0 !important;
    text-decoration-color: #64748b !important;
}

html.dark-mode #gifts .copy:hover {
    color: #60a5fa !important;
    text-decoration-color: #60a5fa !important;
}

html.dark-mode #gifts .ajaxreceipt {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

html.dark-mode #gifts .ajaxreceipt:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

/* ======================================================
   ADMIN PAGE INSTRUCTIONS
====================================================== */
html.dark-mode .page-instructions {
    color: #94a3b8;
}

/* ======================================================
   INCOME REPORT CHART
====================================================== */

html.dark-mode .chart-container {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

html.dark-mode .legend-item:hover {
    background-color: #334155 !important;
}

html.dark-mode .legend-label {
    color: #e2e8f0 !important;
}

/* ======================================================
   ORDER SNAPSHOT MODAL
====================================================== */
html.dark-mode #snapshotModal.modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .snapshot-modal-window {
    background: #1e293b !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode #snapshotModal .modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #172554 100%) !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode #snapshotModal .modal-header h3 {
    color: #93c5fd !important;
}

html.dark-mode #snapshotModal .modal-footer {
    background: #0f172a !important;
    border-top-color: #334155 !important;
}

html.dark-mode .snapshot-loading {
    color: #94a3b8 !important;
}

html.dark-mode .snapshot-loading .spinner {
    border-color: #334155 !important;
    border-top-color: #3b82f6 !important;
}

html.dark-mode .snapshot-error {
    color: #f87171 !important;
}

html.dark-mode .snapshot-section {
    border-bottom-color: #334155 !important;
}

html.dark-mode .snapshot-section h4 {
    color: #94a3b8 !important;
}

html.dark-mode .snapshot-label {
    color: #94a3b8 !important;
}

html.dark-mode .snapshot-value {
    color: #f1f5f9 !important;
}

html.dark-mode .snapshot-empty {
    color: #475569 !important;
}

html.dark-mode .snapshot-table-wrap {
    border-color: #334155 !important;
}

html.dark-mode .snapshot-items-table thead th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .snapshot-items-table tbody td {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .snapshot-notes {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Clickable edit history items */
html.dark-mode .edit-history-item.has-snapshot:hover {
    background: #334155 !important;
}

html.dark-mode .edit-history-item .snapshot-icon {
    color: #64748b !important;
}

html.dark-mode .edit-history-item.has-snapshot:hover .snapshot-icon {
    color: #60a5fa !important;
}

/* --------------------------------------------------
   Potential Duplicates – Ignore button
-------------------------------------------------- */

html.dark-mode .btn-ignore {
    color: #94a3b8 !important;
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .btn-ignore:hover {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

/* ======================================================
   DONATELY AUTO-PROCESS MONTHLY IMPORT
====================================================== */

html.dark-mode .auto-process-btn {
    background: linear-gradient(135deg, #4f5fd5 0%, #6b3fa0 100%) !important;
    box-shadow: 0 4px 12px rgba(79, 95, 213, 0.3) !important;
}

html.dark-mode .auto-process-btn:hover {
    background: linear-gradient(135deg, #4f5fd5 0%, #6b3fa0 100%) !important;
    box-shadow: 0 6px 16px rgba(79, 95, 213, 0.4) !important;
}

html.dark-mode .import-modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .import-modal-window {
    background: #1e293b !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .import-modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
}

html.dark-mode .import-modal-header h2 {
    color: #93c5fd !important;
}

html.dark-mode .import-modal-close {
    color: #94a3b8 !important;
}

html.dark-mode .import-modal-close:hover {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .import-modal-body {
    background: #1e293b !important;
}

html.dark-mode .import-modal-footer {
    background: #0f172a !important;
    border-top-color: #334155 !important;
}

html.dark-mode .import-section h3 {
    color: #e2e8f0 !important;
}

html.dark-mode .import-ready h3 {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
    border-color: #166534 !important;
}

html.dark-mode .import-success h3 {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
    border-color: #166534 !important;
}

html.dark-mode .import-warn h3 {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fcd34d !important;
    border-color: #854d0e !important;
}

html.dark-mode .import-error h3 {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

html.dark-mode .import-empty {
    color: #94a3b8 !important;
}

html.dark-mode .import-skipped {
    color: #64748b !important;
}

html.dark-mode .import-error-msg {
    color: #f87171 !important;
}

html.dark-mode .import-results-table {
    border-color: #334155 !important;
}

html.dark-mode .import-results-table thead {
    background: #0f172a !important;
}

html.dark-mode .import-results-table th {
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .import-results-table td {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .import-results-table tbody tr:nth-child(even) {
    background: #172033 !important;
}

html.dark-mode .import-confirm-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #fff !important;
}

html.dark-mode .import-cancel-btn {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .import-cancel-btn:hover {
    background: #475569 !important;
}

/* ======================================================
   DONATELY DASHBOARD - Green Accent Dark Mode
====================================================== */

html.dark-mode body.donately-dashboard {
    background-color: #0f172a !important;
}

/* Green accent lightens for dark mode contrast */
html.dark-mode .donately-dashboard .dashboard-tile {
    border-top-color: #22c55e !important;
}

html.dark-mode .donately-dashboard .tile-icon {
    color: #4ade80 !important;
}

html.dark-mode .donately-dashboard .dashboard-tile:hover {
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2) !important;
}

html.dark-mode .donately-dashboard .section-label {
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .donately-dashboard .dashboard-footer a {
    color: #4ade80 !important;
}

html.dark-mode .donately-dashboard .dashboard-footer a:hover {
    color: #86efac !important;
}

/* ======================================================
   Correspondence modal - Dark Mode
====================================================== */


html.dark-mode .correspondence-field select,
html.dark-mode .correspondence-field input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .correspondence-field select:hover,
html.dark-mode .correspondence-field input:hover {
    border-color: #475569 !important;
}

html.dark-mode .correspondence-field select:focus,
html.dark-mode .correspondence-field input:focus {
    border-color: #3b82f6 !important;
    background: #0f172a !important;
}

html.dark-mode #correspondenceModal .form-row-stacked input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode #correspondenceModal .form-row-stacked input:focus {
    border-color: #3b82f6 !important;
    background: #0f172a !important;
}

/* ======================================================
   CKEditor 5 - Dark Mode
====================================================== */

html.dark-mode .ck.ck-editor__main > .ck-editor__editable {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .ck.ck-editor__editable p,
html.dark-mode .ck.ck-editor__editable li,
html.dark-mode .ck.ck-editor__editable blockquote {
    color: #f1f5f9 !important;
}

html.dark-mode .ck.ck-toolbar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .ck.ck-toolbar .ck-button {
    color: #f1f5f9 !important;
}

html.dark-mode .ck.ck-toolbar .ck-button:hover {
    background-color: #334155 !important;
}

html.dark-mode .ck.ck-toolbar .ck-button.ck-on {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .ck.ck-editor__editable.ck-focused {
    border-color: #3b82f6 !important;
}

html.dark-mode .ck.ck-editor__editable .ck-placeholder::before {
    color: #94a3b8 !important;
}

html.dark-mode .ck.ck-dropdown__panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .ck.ck-list__item .ck-button:hover {
    background-color: #334155 !important;
}