/* ======================================================
   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;
}

/* ------------------------------------------------------
   Move Order — Order Info panel (dark)
------------------------------------------------------ */
html.dark-mode #fellowModal .order-info-name {
    color: #f1f5f9 !important;
}

html.dark-mode #fellowModal .order-info-address {
    color: #94a3b8 !important;
}

/* ------------------------------------------------------
   Move Order — Possible Customer Matches (dark)
------------------------------------------------------ */
html.dark-mode #fellowModal .suggestion-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode #fellowModal .suggestion-item:hover {
    background: rgba(168, 85, 247, 0.12) !important;
    border-color: #a855f7 !important;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.18) !important;
}

html.dark-mode #fellowModal .suggestion-item.preselected {
    background: rgba(168, 85, 247, 0.18) !important;
    border-color: #a855f7 !important;
}

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

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

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

/* Loading skeleton bars on dark */
html.dark-mode #fellowModal .suggestion-skeleton .skeleton-row {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%) !important;
}

/* Match badges — dark variants */
html.dark-mode #fellowModal .match-badge.email,
html.dark-mode #fellowModal .match-badge.phone,
html.dark-mode #fellowModal .match-badge.po_box {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}

html.dark-mode #fellowModal .match-badge.address,
html.dark-mode #fellowModal .match-badge.name,
html.dark-mode #fellowModal .match-badge.unique_name {
    background: #334155 !important;
    color: #cbd5e1 !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-wrapper {
    border-color: #334155 !important;
}

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-wrapper {
    border-top-color: #334155 !important;
    border-right-color: #334155 !important;
    border-bottom-color: #334155 !important;
    border-left-color: #64748b !important;
}

/* Inside a wrapper, children own the background */
html.dark-mode .order-row-wrapper .order-row,
html.dark-mode .order-row-wrapper .order-preview-btn {
    background: #1e293b !important;
    border-color: transparent !important;
}

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

html.dark-mode .order-row-wrapper .order-row,
html.dark-mode .order-row-wrapper .order-row:hover {
    color: #60a5fa !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-user {
    color: #64748b !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;
}

/* ======================================================
   ORDER PREVIEW MODAL
====================================================== */
html.dark-mode .preview-section {
    border-bottom-color: #334155 !important;
}

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

html.dark-mode .preview-section-label {
    color: #64748b !important;
}

html.dark-mode .preview-items-table th {
    color: #64748b !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .preview-items-table td {
    color: #e2e8f0 !important;
    border-bottom-color: #1e293b !important;
}

html.dark-mode .preview-payment-row {
    color: #94a3b8 !important;
}

html.dark-mode .preview-payment-label {
    color: #64748b !important;
}

html.dark-mode .preview-payment-row--total,
html.dark-mode .preview-payment-row--total .preview-payment-label {
    color: #f1f5f9 !important;
}

html.dark-mode .order-preview-btn:hover {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.1) !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 .ai-summary-btn i {
    color: inherit;
}

html.dark-mode .ai-summary-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

html.dark-mode .ai-summary-loading {
    color: #94a3b8;
}

html.dark-mode .ai-disclaimer {
    color: #64748b;
    border-bottom-color: #334155;
}

html.dark-mode .ai-summary-result {
    color: #f1f5f9;
}

html.dark-mode .ai-summary-result strong {
    color: #f1f5f9 !important;
}

html.dark-mode .ai-summary-result p {
    color: #f1f5f9 !important;
}


html.dark-mode .ai-summary-result h2,
html.dark-mode .ai-summary-result h3,
html.dark-mode .ai-summary-result h4,
html.dark-mode .ai-summary-result h5 {
    color: #60a5fa;
}

html.dark-mode .ai-summary-result strong {
    color: #e2e8f0;
}

html.dark-mode .ai-summary-result hr {
    border-top-color: #334155;
}

html.dark-mode .ai-summary-error {
    color: #f87171;
}

html.dark-mode .ai-cursor {
    color: #94a3b8;
}

html.dark-mode .ai-chat-input-area {
    border-top-color: #334155;
    background: #1e293b;
}

html.dark-mode .ai-chat-message--user {
    background: #071328 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .ai-chat-message--assistant {
    background: #243347 !important;
    color: #fff !important;
}

html.dark-mode .ai-chat-message--assistant p,
html.dark-mode .ai-chat-message--assistant li,
html.dark-mode .ai-chat-message--assistant strong,
html.dark-mode .ai-chat-message--assistant em {
    color: #fff !important;
}

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

html.dark-mode .ai-chat-input:focus {
    border-color: #3b82f6;
}


html.dark-mode .ai-chat-send {
    background: #0f1729 !important;
}

html.dark-mode .ai-chat-send:hover {
    background: #2563eb;
}

html.dark-mode .ai-chat-error {
    color: #f87171;
}

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 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; }

html.dark-mode .auser--photo,
html.dark-mode .auser--photo:nth-child(8n + 1),
html.dark-mode .auser--photo:nth-child(8n + 2),
html.dark-mode .auser--photo:nth-child(8n + 3),
html.dark-mode .auser--photo:nth-child(8n + 4),
html.dark-mode .auser--photo:nth-child(8n + 5),
html.dark-mode .auser--photo:nth-child(8n + 6),
html.dark-mode .auser--photo:nth-child(8n + 7),
html.dark-mode .auser--photo:nth-child(8n + 8) {
    background: transparent !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;
}

/* ======================================================
   ABIDE ATTENDANCE TRACKER
   ====================================================== */
html.dark-mode .abide-nav {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .abide-nav-links a:hover {
    background-color: #0f172a !important;
}

html.dark-mode .abide-nav-links a.active {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark-mode .abide-table th {
    background-color: #0f172a !important;
}

html.dark-mode .abide-table tbody tr.clickable:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .abide-table tbody tr.first-timer {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

html.dark-mode .abide-table tbody tr.first-timer:hover {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

html.dark-mode .badge-first-timer {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
}

html.dark-mode .first-timer-separator {
    background-color: #1e293b !important;
    color: #93c5fd !important;
}

html.dark-mode .abide-modal {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .typeahead-item:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .selected-row:not(#selectedFellowRow) {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .livestream-field input {
    background-color: #0f172a !important;
}

html.dark-mode .livestream-saved {
    color: #4ade80 !important;
}

html.dark-mode .badge-deleted {
    background-color: #450a0a !important;
    color: #fca5a5 !important;
}

html.dark-mode .typeahead-section-label.cortex {
    color: #a78bfa !important;
    background-color: #1e1b4b !important;
    border-top-color: #312e81 !important;
}

/* ── Comments & Notifications (dark mode) ─────────────────── */
html.dark-mode .comment-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-mode .comment-reply {
    background-color: #172033 !important;
    border-left-color: #3730a3 !important;
}
html.dark-mode .comment-author { color: #e2e8f0 !important; }
html.dark-mode .comment-body { color: #cbd5e1 !important; }
html.dark-mode .comment-date { color: #64748b !important; }
html.dark-mode .like-btn,
html.dark-mode .reply-btn,
html.dark-mode .edit-comment-btn,
html.dark-mode .delete-comment-btn {
    border-color: #334155 !important;
    color: #94a3b8 !important;
    background: none !important;
}
html.dark-mode .like-btn.liked {
    background-color: rgba(37,99,235,.2) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html.dark-mode .attachment-chip {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark-mode .attachment-chip:hover {
    background-color: rgba(37,99,235,.15) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html.dark-mode #commentComposeArea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
html.dark-mode .reply-compose-inner {
    background-color: #0f172a !important;
    border-color: #312e81 !important;
}
html.dark-mode .mention { background-color: rgba(37,99,235,.2) !important; color: #93c5fd !important; }
html.dark-mode .like-tooltip { background-color: #0f172a !important; }
html.dark-mode .like-tooltip::after { border-bottom-color: #0f172a !important; }
html.dark-mode .mention-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-mode .mention-item { color: #e2e8f0 !important; }
html.dark-mode .mention-item:hover,
html.dark-mode .mention-item.active {
    background-color: rgba(37,99,235,.2) !important;
    color: #93c5fd !important;
}
html.dark-mode .notif-bell { color: #94a3b8 !important; }
html.dark-mode .notif-bell:hover { background-color: rgba(37,99,235,.15) !important; color: #93c5fd !important; }
html.dark-mode .notif-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-mode .notif-dropdown-header {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
html.dark-mode .notif-item { border-bottom-color: #1e293b !important; }
html.dark-mode .notif-item:hover { background-color: #0f172a !important; }
html.dark-mode .notif-item.unread { background-color: rgba(37,99,235,.12) !important; }
html.dark-mode .notif-item.unread:hover { background-color: rgba(37,99,235,.2) !important; }
html.dark-mode .notif-item-msg { color: #e2e8f0 !important; }
html.dark-mode .notif-item-time { color: #64748b !important; }
html.dark-mode .notif-empty { color: #64748b !important; }

/* Attachment preview modal */
html.dark-mode .attach-preview-dialog { background: #1e293b !important; }
html.dark-mode .attach-preview-header { background: linear-gradient(135deg,#1e3a5f,#1e3a8a) !important; border-bottom-color: #1d4ed8 !important; }
html.dark-mode .attach-preview-title { color: #93c5fd !important; }
html.dark-mode .attach-preview-close { color: #94a3b8 !important; }
html.dark-mode .attach-preview-close:hover { color: #e2e8f0 !important; }
html.dark-mode .attach-preview-body { background: #0f172a !important; }
html.dark-mode .attach-preview-generic-name { color: #e2e8f0 !important; }
html.dark-mode .attach-preview-generic-size { color: #94a3b8 !important; }
html.dark-mode .attach-preview-icon { color: #475569 !important; }
html.dark-mode .attach-preview-loading { color: #94a3b8 !important; }
/* CSV table */
html.dark-mode .attach-preview-csv th { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
html.dark-mode .attach-preview-csv td { color: #cbd5e1 !important; border-color: #334155 !important; }
html.dark-mode .attach-preview-csv tbody tr:nth-child(even) td { background: #0f172a !important; }

/* ======================================================
   TOPBAR & DASHBOARD REFRESH (Concept A)
====================================================== */
html.dark-mode .dashboard-topbar {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}
html.dark-mode .dashboard-brand-name { color: #f1f5f9 !important; }
html.dark-mode .dashboard-search {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark-mode .dashboard-search input {
    color: #94a3b8 !important;
    background: transparent !important;
}
html.dark-mode .dashboard-search input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}
html.dark-mode .dashboard-search input::placeholder {
    color: #64748b !important;
}
html.dark-mode .dashboard-search-kbd {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark-mode .dashboard-topbar .notif-bell {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark-mode .dashboard-topbar .notif-bell:hover {
    background: #1e293b !important;
    color: #3b82f6 !important;
}
html.dark-mode .dashboard-tile-icon,
html.dark-mode .tile-icon {
    background: #1e3a5f !important;
    color: #3b82f6 !important;
}
html.dark-mode .dashboard-tile-title { color: #f1f5f9 !important; }
html.dark-mode .dashboard-footer-inline,
html.dark-mode .dashboard-footer-inline a,
html.dark-mode #darkModeSelect { color: #6b7280 !important; background: transparent !important; }
html.dark-mode .foot-dot { color: #334155 !important; }

/* Top-bar search dropdown */
html.dark-mode .topsearch-dropdown { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 12px 36px rgba(0,0,0,.4) !important; }
html.dark-mode .topsearch-item { color: #f1f5f9 !important; }
html.dark-mode .topsearch-item:hover,
html.dark-mode .topsearch-item.topsearch-active { background: #0f172a !important; }
html.dark-mode .topsearch-item-icon { background: #1e3a5f !important; color: #3b82f6 !important; }
html.dark-mode .topsearch-item-label { color: #f1f5f9 !important; }
html.dark-mode .topsearch-item-sublabel { color: #94a3b8 !important; }
html.dark-mode .notif-dropdown-divider { background: #334155 !important; }

/* Profile page — crop modal */
html.dark-mode .profile-crop-modal { background: rgba(0, 0, 0, 0.78) !important; }
html.dark-mode .profile-crop-dialog { background: #1e293b !important; border-color: #334155 !important; }

/* ======================================================
   New Web Orders — spreadsheet-style editable table
====================================================== */
html.dark-mode .results-table-scroll { background-color: #1e293b !important; }

html.dark-mode .results-table--spreadsheet thead th {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

html.dark-mode .results-table--spreadsheet td.open-cell,
html.dark-mode .results-table--spreadsheet th.open-th {
    background-color: #1e293b !important;
    box-shadow: 1px 0 0 0 #334155 !important;
}

html.dark-mode .results-table--spreadsheet td.open-cell::before {
    background-color: #334155 !important;
}

html.dark-mode .results-table--spreadsheet thead th.open-th {
    background-color: #0f172a !important;
}

html.dark-mode .results-table--spreadsheet colgroup.cols-shipping col {
    background-color: rgba(96, 165, 250, 0.06) !important;
}

html.dark-mode .results-table--spreadsheet th.ship-start,
html.dark-mode .results-table--spreadsheet td.ship-start {
    border-left-color: #475569 !important;
}

html.dark-mode .results-table--spreadsheet td.editable-cell:hover {
    background-color: rgba(96, 165, 250, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
}

html.dark-mode .results-table--spreadsheet td.editable-cell:focus {
    background-color: rgba(96, 165, 250, 0.10) !important;
    box-shadow: inset 0 0 0 2px #60a5fa !important;
}

html.dark-mode .results-table--spreadsheet td.editable-cell.editing {
    background-color: rgba(251, 191, 36, 0.10) !important;
    box-shadow: inset 0 0 0 2px #fbbf24 !important;
}

/* Staged-but-unsaved cell (dark): muted amber tint with left-edge accent. */
html.dark-mode .results-table--spreadsheet td.editable-cell.is-dirty {
    background-color: rgba(251, 191, 36, 0.08) !important;
    box-shadow: inset 3px 0 0 0 #fbbf24 !important;
    color: #fde68a !important;
}

/* Printed rows: subtle green tint (dark) */
html.dark-mode .results-table--spreadsheet tr.is-printed > td,
html.dark-mode .results-table--spreadsheet tr.is-printed > td.open-cell {
    background-color: rgba(34, 197, 94, 0.08) !important;
}

html.dark-mode .results-table--spreadsheet td.editable-cell.mirror-flash {
    animation: mirror-flash-dark 1.4s ease-out !important;
}

@keyframes mirror-flash-dark {
    0%   { background-color: rgba(96, 165, 250, 0.28); box-shadow: inset 0 0 0 2px #60a5fa; }
    60%  { background-color: rgba(96, 165, 250, 0.10); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); }
    100% { background-color: transparent; box-shadow: none; }
}

html.dark-mode .results-table--spreadsheet input.cell-input {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

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

/* ======================================================
   SALES TAX RULES (admin/sales-tax-rules.php)
====================================================== */

html.dark-mode .sales-tax-rules-container h2 {
    color: #f1f5f9 !important;
}

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

html.dark-mode .sales-tax-rules-table th {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .sales-tax-rules-table td {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .sales-tax-rules-table tr:hover {
    background-color: #334155 !important;
}

html.dark-mode #salesTaxRuleModal .form-row label {
    color: #cbd5e1 !important;
}

html.dark-mode #salesTaxRuleModal .form-row input[type="text"],
html.dark-mode #salesTaxRuleModal .form-row input[type="number"],
html.dark-mode #salesTaxRuleModal .form-row select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #salesTaxRuleModal .form-row input:focus,
html.dark-mode #salesTaxRuleModal .form-row select:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
}

html.dark-mode #salesTaxRuleModal .field-hint {
    color: #64748b !important;
}


/* ======================================================
   COMPANY INFO (admin/company-info.php)
====================================================== */

html.dark-mode .company-info-container h2,
html.dark-mode .company-info-container h3 {
    color: #f1f5f9 !important;
}

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

html.dark-mode #companyInfoForm .form-row label {
    color: #cbd5e1 !important;
}

html.dark-mode #companyInfoForm .form-row input[type="text"],
html.dark-mode #companyInfoForm .form-row select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode #companyInfoForm .form-row input[type="text"]:focus,
html.dark-mode #companyInfoForm .form-row select:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
}

html.dark-mode #companyInfoForm .field-hint,
html.dark-mode .logo-file-name {
    color: #64748b !important;
}

html.dark-mode .company-info-divider {
    border-top-color: #334155 !important;
}

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

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

html.dark-mode .logo-upload-row .btn.secondary {
    background: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

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

html.dark-mode .save-status.success {
    color: #6ee7b7 !important;
}

html.dark-mode .save-status.error {
    color: #fca5a5 !important;
}