/*
 * Mavis Dark Theme v2 — Unified override layer.
 * Strategy: instead of listing every class, we use wildcard/attribute
 * selectors that catch ANY light surface (white, near-white, semi-transparent
 * white). The only thing that stays near-white is text/icons.
 *
 * Loaded after all legacy/page-specific styles.
 */

html[data-theme="dark"],
body.theme-dark {
  color-scheme: dark;
  /* Core palette */
  --dark-page:        #061321;
  --dark-page-2:      #091a2d;
  --dark-surface:     #10243b;
  --dark-surface-2:   #0c2035;
  --dark-surface-3:   #142d47;
  --dark-input:       #081a2c;
  --dark-border:      #294763;
  --dark-border-soft: #203b57;
  --dark-text:        #f8fafc;   /* Only near-white we keep */
  --dark-muted:       #c1cfdd;
  --dark-muted-2:     #91a7bb;
  --dark-blue:        #62b7ff;
  --dark-cyan:        #67e8f9;

  /* Override legacy variables */
  --ui-surface:       rgba(16, 36, 59, 0.92) !important;
  --ui-border:        rgba(41, 71, 99, 0.55) !important;
  --ui-text:          var(--dark-text) !important;
  --ui-muted:         var(--dark-muted) !important;
  --user-canvas:      var(--dark-page);
  --user-surface:     var(--dark-surface);
  --user-ink:         var(--dark-text);
  --user-muted:       var(--dark-muted);
  --user-line:        var(--dark-border-soft);
  --user-navy:        var(--dark-text);
  --text:             var(--dark-text);
  --text-light:       var(--dark-muted);
  --muted:            var(--dark-muted);
  --panel:            var(--dark-surface);
  --border:           var(--dark-border-soft);
  --border-color:     var(--dark-border-soft);
  --main-bg:          rgba(6, 19, 33, .9);
}

/* Page background */
html[data-theme="dark"] body,
body.theme-dark {
  color: var(--dark-text) !important;
  background:
    radial-gradient(circle at 9% 4%, rgba(28,111,181,.18), transparent 31rem),
    radial-gradient(circle at 92% 94%, rgba(0,190,210,.11), transparent 33rem),
    linear-gradient(145deg, var(--dark-page), var(--dark-page-2)) !important;
}
html[data-theme="dark"] body::before,
body.theme-dark::before {
  background-color: var(--dark-page) !important;
  background-image:
    linear-gradient(to right, rgba(104,145,181,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(104,145,181,.055) 1px, transparent 1px),
    radial-gradient(circle 620px at 18% 12%, rgba(27,112,184,.16), transparent),
    radial-gradient(circle 560px at 86% 84%, rgba(8,168,190,.10), transparent) !important;
}

/* ============================================
   TEXT (the only thing that stays near-white)
   ============================================ */
html[data-theme="dark"] body :is(h1,h2,h3,h4,h5,h6),
html[data-theme="dark"] body :is(strong,b),
html[data-theme="dark"] body :is(label,legend),
html[data-theme="dark"] body :is(.title,.page-title,.card-title,.section-title,
  .form-section-title,.header-title,.profile-name,.pd-name,.stat-value,
  .current-month,.notification-title,.item-title,.user-fullname,.day-num,
  .brand-text,.legend-title,.empty-title,.tab-text,.modal-title,.dialog-title,
  .form-title,.login-title,.support-title,.admin-title,.users-title),
body.theme-dark :is(h1,h2,h3,h4,h5,h6),
body.theme-dark :is(strong,b),
body.theme-dark :is(label,legend),
body.theme-dark :is(.title,.page-title,.card-title,.section-title,
  .form-section-title,.header-title,.profile-name,.pd-name,.stat-value,
  .current-month,.notification-title,.item-title,.user-fullname,.day-num,
  .brand-text,.legend-title,.empty-title,.tab-text,.modal-title,.dialog-title,
  .form-title,.login-title,.support-title,.admin-title,.users-title) {
  color: var(--dark-text) !important;
}

html[data-theme="dark"] body :is(p,small),
html[data-theme="dark"] body :is(.muted,.subtitle,.card-subtitle,.form-hint,
  .form-description,.description,.stat-label,.profile-code,.pd-code,
  .notification-message,.notification-date,.legend-item,.info-label,
  .toggle-description,.empty-description,.tab-description,.modal-description,
  .form-text,.form-note,.login-subtitle,.support-subtitle,.admin-subtitle,
  .users-subtitle,.brand-tagline),
body.theme-dark :is(p,small),
body.theme-dark :is(.muted,.subtitle,.card-subtitle,.form-hint,
  .form-description,.description,.stat-label,.profile-code,.pd-code,
  .notification-message,.notification-date,.legend-item,.info-label,
  .toggle-description,.empty-description,.tab-description,.modal-description,
  .form-text,.form-note,.login-subtitle,.support-subtitle,.admin-subtitle,
  .users-subtitle,.brand-tagline) {
  color: var(--dark-muted) !important;
}

html[data-theme="dark"] body a:not(.btn):not(.btn-primary):not(.btn-danger):not(.btn-success):not(.logout),
body.theme-dark a:not(.btn):not(.btn-primary):not(.btn-danger):not(.btn-success):not(.logout) {
  color: #dcecf9;
}

/* ============================================
   NAVIGATION / SIDEBARS / DROPDOWNS
   ============================================ */
html[data-theme="dark"] body :is(.top-nav,.header,.navbar,.sidebar,
  .sidebar-header,.sidebar-footer,.mobile-header,.topbar,.admin-header,
  .profile-dropdown,.dropdown-menu,.context-menu,.submenu,.menu-list,
  .nav-menu,.user-menu),
body.theme-dark :is(.top-nav,.header,.navbar,.sidebar,
  .sidebar-header,.sidebar-footer,.mobile-header,.topbar,.admin-header,
  .profile-dropdown,.dropdown-menu,.context-menu,.submenu,.menu-list,
  .nav-menu,.user-menu) {
  color: var(--dark-text) !important;
  background: rgba(8, 26, 44, .94) !important;
  border-color: var(--dark-border-soft) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] body :is(.brand,.nav-links a,.sidebar a,
  .sidebar-link,.nav-item,.menu-link),
body.theme-dark :is(.brand,.nav-links a,.sidebar a,
  .sidebar-link,.nav-item,.menu-link) { color: #dceaf6 !important; }
html[data-theme="dark"] body :is(.nav-links a:hover,.sidebar a:hover,
  .sidebar-link:hover,.nav-item:hover,.pd-item:hover,.menu-link:hover),
body.theme-dark :is(.nav-links a:hover,.sidebar a:hover,
  .sidebar-link:hover,.nav-item:hover,.pd-item:hover,.menu-link:hover) {
  color: #fff !important;
  background: #15314b !important;
}

/* ============================================
   CARDS / SURFACES — wildcard cover
   ============================================ */
html[data-theme="dark"] body :is(
  .card,.glass-card,.section-card,.panel,.dashboard-card,.stat-card,
  .content-card,.profile-card,.support-card,.settings-card,.users-card,
  .attendance-card,.chart-card,.activity-card,.table-card,.notification-card,
  .form-card,.list-card,.restore-card,.warning-card,.management-card,
  .navigation-card,.backup-card,.log-card,.mail-stat,.login-card,
  .card-intro,.info-item,.day-card,.ticket-item,.ticket-detail,
  .tickets-list,.notification-item,.action-card,.current-file,
  .upload-area,.file-preview,.file-preview-new,.captcha-box,
  .captcha-preview,.empty-state,.stats,.stats-section,.stat-item,
  .search-section,.export-section,.bulk-actions,.filter-form,
  .maintenance-status,.time-inputs-grid,.toggle-container,
  .navigation-setting-row,.countdown-item,.trust-item,.message-bubble,
  .calendar-container,.chat-container,.notifications-list,
  .attendance-table-container,.table-container,.mini-chart,
  .auth-shell,.content,.back-button,.back-link,.ticket-list,
  .attachment-link,.file-info,.settings-tabs,.tabs-wrapper,
  .reply-form,.preview-content,.user-profile,.kpi-card,.mail-card,
  .period-card,.primary-card,.security-card,.sidebar-system-card,
  .jalali-calendar-container,.jalali-calendar-day,.checkbox-wrapper,
  .image-preview-card,.form-container,.password-container,
  .notice-container,.stats-container,.report-section,.filter-section,
  .activity-item,
  /* additional common classes */
  .dashboard-container,.dashboard-content,.dashboard-header,
  .profile-container,.profile-content,.profile-header,
  .users-container,.users-content,.users-header,
  .support-container,.support-content,.support-header,
  .attendance-container,.attendance-content,.attendance-header,
  .admin-container,.admin-content,.admin-page,
  .main-container,.main-content,.page-content,.page-container,
  .app-container,.app-content,
  .box,.widget,.tile,.tile-card,
  .hero,.hero-card,.feature-card,
  .modal,.dialog,.popup,.drawer
),
body.theme-dark :is(
  .card,.glass-card,.section-card,.panel,.dashboard-card,.stat-card,
  .content-card,.profile-card,.support-card,.settings-card,.users-card,
  .attendance-card,.chart-card,.activity-card,.table-card,.notification-card,
  .form-card,.list-card,.restore-card,.warning-card,.management-card,
  .navigation-card,.backup-card,.log-card,.mail-stat,.login-card,
  .card-intro,.info-item,.day-card,.ticket-item,.ticket-detail,
  .tickets-list,.notification-item,.action-card,.current-file,
  .upload-area,.file-preview,.file-preview-new,.captcha-box,
  .captcha-preview,.empty-state,.stats,.stats-section,.stat-item,
  .search-section,.export-section,.bulk-actions,.filter-form,
  .maintenance-status,.time-inputs-grid,.toggle-container,
  .navigation-setting-row,.countdown-item,.trust-item,.message-bubble,
  .calendar-container,.chat-container,.notifications-list,
  .attendance-table-container,.table-container,.mini-chart,
  .auth-shell,.content,.back-button,.back-link,.ticket-list,
  .attachment-link,.file-info,.settings-tabs,.tabs-wrapper,
  .reply-form,.preview-content,.user-profile,.kpi-card,.mail-card,
  .period-card,.primary-card,.security-card,.sidebar-system-card,
  .jalali-calendar-container,.jalali-calendar-day,.checkbox-wrapper,
  .image-preview-card,.form-container,.password-container,
  .notice-container,.stats-container,.report-section,.filter-section,
  .activity-item,
  .dashboard-container,.dashboard-content,.dashboard-header,
  .profile-container,.profile-content,.profile-header,
  .users-container,.users-content,.users-header,
  .support-container,.support-content,.support-header,
  .attendance-container,.attendance-content,.attendance-header,
  .admin-container,.admin-content,.admin-page,
  .main-container,.main-content,.page-content,.page-container,
  .app-container,.app-content,
  .box,.widget,.tile,.tile-card,
  .hero,.hero-card,.feature-card,
  .modal,.dialog,.popup,.drawer
) {
  color: var(--dark-text) !important;
  background: var(--dark-surface) !important;
  border-color: var(--dark-border-soft) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.20) !important;
}

/* ============================================
   SECONDARY SURFACES
   ============================================ */
html[data-theme="dark"] body :is(
  .card-header,.card-header-inline,.list-header,.detail-header,
  .restore-header,.modal-header,.delete-modal-header,.form-section,
  .form-group,.profile-details,.pd-header,.month-navigation,
  .calendar-day,.list-item,.scrollable-list,.scrollable-chat,
  .sidebar-media-toolbar,.sidebar-media-details,.sidebar-media-footer,
  .sidebar-media-item,.sidebar-media-item-visual,
  .sidebar-media-selected-preview,.progress-container,.form-divider,
  .tab,.tab-button,.file-label,.reply-form,
  .message.admin .message-bubble,.message.user .message-bubble,
  .item,.item-content,.item-header,.item-meta,.table-summary,
  .table-header,.chart-header,.kpi-header,.stat-header,
  .section-header,.form-header,.modal-footer,.dialog-footer,
  .delete-modal-footer,.delete-modal-body
),
body.theme-dark :is(
  .card-header,.card-header-inline,.list-header,.detail-header,
  .restore-header,.modal-header,.delete-modal-header,.form-section,
  .form-group,.profile-details,.pd-header,.month-navigation,
  .calendar-day,.list-item,.scrollable-list,.scrollable-chat,
  .sidebar-media-toolbar,.sidebar-media-details,.sidebar-media-footer,
  .sidebar-media-item,.sidebar-media-item-visual,
  .sidebar-media-selected-preview,.progress-container,.form-divider,
  .tab,.tab-button,.file-label,.reply-form,
  .message.admin .message-bubble,.message.user .message-bubble,
  .item,.item-content,.item-header,.item-meta,.table-summary,
  .table-header,.chart-header,.kpi-header,.stat-header,
  .section-header,.form-header,.modal-footer,.dialog-footer,
  .delete-modal-footer,.delete-modal-body
) {
  color: var(--dark-text) !important;
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-border-soft) !important;
}

/* ============================================
   INLINE STYLES — kill light backgrounds
   Catch any element with inline light bg
   ============================================ */

/* Solid whites via inline style (background or background-color) */
html[data-theme="dark"] body [style*="background: white" i],
html[data-theme="dark"] body [style*="background:white" i],
html[data-theme="dark"] body [style*="background: #fff" i],
html[data-theme="dark"] body [style*="background:#fff" i],
html[data-theme="dark"] body [style*="background: #FFF" i],
html[data-theme="dark"] body [style*="background:#FFF" i],
html[data-theme="dark"] body [style*="background: #ffffff" i],
html[data-theme="dark"] body [style*="background:#ffffff" i],
html[data-theme="dark"] body [style*="background-color: white" i],
html[data-theme="dark"] body [style*="background-color:white" i],
html[data-theme="dark"] body [style*="background-color: #fff" i],
html[data-theme="dark"] body [style*="background-color:#fff" i],
html[data-theme="dark"] body [style*="background-color: #ffffff" i],
html[data-theme="dark"] body [style*="background:#FFF" i],
html[data-theme="dark"] body [style*="background-color:#FFF" i],
html[data-theme="dark"] body [style*="background-color:#ffffff" i],
body.theme-dark [style*="background: white" i],
body.theme-dark [style*="background:white" i],
body.theme-dark [style*="background: #fff" i],
body.theme-dark [style*="background:#fff" i],
body.theme-dark [style*="background: #FFF" i],
body.theme-dark [style*="background:#FFF" i],
body.theme-dark [style*="background: #ffffff" i],
body.theme-dark [style*="background:#ffffff" i],
body.theme-dark [style*="background-color: white" i],
body.theme-dark [style*="background-color:white" i],
body.theme-dark [style*="background-color: #fff" i],
body.theme-dark [style*="background-color:#fff" i],
body.theme-dark [style*="background-color: #ffffff" i],
body.theme-dark [style*="background-color:#FFF" i],
body.theme-dark [style*="background-color:#ffffff" i] {
  color: var(--dark-text) !important;
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-border-soft) !important;
}

/* All rgba(255, 255, 255, ...) translucent whites → dark equivalent */
html[data-theme="dark"] body [style*="rgba(255, 255, 255" i],
html[data-theme="dark"] body [style*="rgba(255,255,255" i],
html[data-theme="dark"] body [style*="rgba(248, 250, 252" i],
html[data-theme="dark"] body [style*="rgba(248,250,252" i],
html[data-theme="dark"] body [style*="rgba(243, 244, 246" i],
html[data-theme="dark"] body [style*="rgba(255, 225, 225" i],   /* the typo we saw */
body.theme-dark [style*="rgba(255, 255, 255" i],
body.theme-dark [style*="rgba(255,255,255" i],
body.theme-dark [style*="rgba(248, 250, 252" i],
body.theme-dark [style*="rgba(248,250,252" i],
body.theme-dark [style*="rgba(243, 244, 246" i],
body.theme-dark [style*="rgba(255, 225, 225" i] {
  background-color: var(--dark-surface-2) !important;
  background-image: none !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

/* Legacy inline dark text colors → light text in dark mode */
html[data-theme="dark"] body [style*="color: #1f2937" i],
html[data-theme="dark"] body [style*="color:#1f2937" i],
html[data-theme="dark"] body [style*="color: #111827" i],
html[data-theme="dark"] body [style*="color:#111827" i],
html[data-theme="dark"] body [style*="color: #0f172a" i],
html[data-theme="dark"] body [style*="color:#0f172a" i],
html[data-theme="dark"] body [style*="color: #334155" i],
html[data-theme="dark"] body [style*="color:#334155" i],
html[data-theme="dark"] body [style*="color: #374151" i],
html[data-theme="dark"] body [style*="color:#374151" i],
body.theme-dark [style*="color: #1f2937" i],
body.theme-dark [style*="color:#1f2937" i],
body.theme-dark [style*="color: #111827" i],
body.theme-dark [style*="color:#111827" i],
body.theme-dark [color*="#0f172a"] {
  color: var(--dark-text) !important;
}
html[data-theme="dark"] body [style*="color: #6b7280" i],
html[data-theme="dark"] body [style*="color:#6b7280" i],
html[data-theme="dark"] body [style*="color: #64748b" i],
html[data-theme="dark"] body [style*="color:#64748b" i],
html[data-theme="dark"] body [style*="color: #718096" i],
html[data-theme="dark"] body [style*="color:#718096" i],
body.theme-dark [style*="color: #6b7280" i],
body.theme-dark [style*="color:#6b7280" i],
body.theme-dark [style*="color: #64748b" i],
body.theme-dark [style*="color:#64748b" i],
body.theme-dark [style*="color: #718096" i],
body.theme-dark [style*="color:#718096" i] {
  color: var(--dark-muted) !important;
}

/* ============================================
   DAY CARDS / CALENDAR / TABLES
   ============================================ */
html[data-theme="dark"] body .calendar-day,
body.theme-dark .calendar-day { background: #0d2237 !important; border-color: #294763 !important; }
html[data-theme="dark"] body .calendar-day.present,
html[data-theme="dark"] body .day-card.present,
body.theme-dark .calendar-day.present,
body.theme-dark .day-card.present { background: #0c302d !important; border-color: #1a8a70 !important; }
html[data-theme="dark"] body .calendar-day.absent,
html[data-theme="dark"] body .day-card.absent,
body.theme-dark .calendar-day.absent,
body.theme-dark .day-card.absent { background: #351d2a !important; border-color: #b94a5d !important; }
html[data-theme="dark"] body .calendar-day.today,
body.theme-dark .calendar-day.today { background: #102f50 !important; border-color: #3c82c4 !important; }
html[data-theme="dark"] body .day-card.excused,
body.theme-dark .day-card.excused { background: #382b17 !important; border-color: #b77b20 !important; }

html[data-theme="dark"] body table,
html[data-theme="dark"] body thead,
html[data-theme="dark"] body tbody,
html[data-theme="dark"] body tr,
body.theme-dark table,
body.theme-dark thead,
body.theme-dark tbody,
body.theme-dark tr {
  color: var(--dark-text) !important;
  background: var(--dark-surface) !important;
  border-color: var(--dark-border-soft) !important;
}
html[data-theme="dark"] body th,
body.theme-dark th { color: #d8e7f3 !important; background: #17314b !important; border-color: var(--dark-border) !important; }
html[data-theme="dark"] body td,
body.theme-dark td { color: #edf5fb !important; background: var(--dark-surface) !important; border-color: var(--dark-border-soft) !important; }
html[data-theme="dark"] body tbody tr:hover td,
body.theme-dark tbody tr:hover td { background: var(--dark-surface-3) !important; }

/* ============================================
   FORMS / CONTROLS
   ============================================ */
html[data-theme="dark"] body :is(input,select,textarea,option,
  .form-control,.form-input,.glass-input,.input-field,.search-input,
  .sidebar-media-search),
body.theme-dark :is(input,select,textarea,option,
  .form-control,.form-input,.glass-input,.input-field,.search-input,
  .sidebar-media-search) {
  color: var(--dark-text) !important;
  background: var(--dark-input) !important;
  border-color: var(--dark-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body :is(input,textarea)::placeholder,
body.theme-dark :is(input,textarea)::placeholder { color: #7f98ae !important; opacity: 1; }
html[data-theme="dark"] body :is(input,select,textarea):focus,
body.theme-dark :is(input,select,textarea):focus {
  border-color: #4b9de0 !important;
  box-shadow: 0 0 0 4px rgba(75,157,224,.15) !important;
}
html[data-theme="dark"] body input[type="file"]::file-selector-button,
body.theme-dark input[type="file"]::file-selector-button {
  color: #eaf4fc;
  background: #17334f;
  border: 1px solid #31536f;
}
html[data-theme="dark"] body input[readonly],
body.theme-dark input[readonly] { background: #0d2237 !important; color: #d7e5f1 !important; }

/* Checkbox / radio wrappers */
html[data-theme="dark"] body .checkbox-wrapper,
body.theme-dark .checkbox-wrapper { background: transparent !important; }

/* ============================================
   ICONS / AVATARS — keep light icon containers? No, dark them.
   ============================================ */
html[data-theme="dark"] body :is(.stat-icon,.card-title-icon,.form-section-icon,
  .avatar-container,.icon-box,.icon-wrapper,.icon-picker-preview,
  .sidebar-media-selected-preview,.emoji-icon,.feature-icon,
  .stat-icon-box,.profile-avatar-wrap,.profile-avatar-frame),
body.theme-dark :is(.stat-icon,.card-title-icon,.form-section-icon,
  .avatar-container,.icon-box,.icon-wrapper,.icon-picker-preview,
  .sidebar-media-selected-preview,.emoji-icon,.feature-icon,
  .stat-icon-box,.profile-avatar-wrap,.profile-avatar-frame) {
  background: #15314b !important;
  border-color: #31516d !important;
}

/* ============================================
   MODALS / DIALOGS
   ============================================ */
html[data-theme="dark"] body :is(.modal-content,.dialog,
  .sidebar-media-dialog,.delete-modal-content,.popup-content,.modal-body),
body.theme-dark :is(.modal-content,.dialog,
  .sidebar-media-dialog,.delete-modal-content,.popup-content,.modal-body) {
  color: var(--dark-text) !important;
  background: #0a1c30 !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.52) !important;
}
html[data-theme="dark"] body :is(.modal-overlay,.overlay,.modal-backdrop),
body.theme-dark :is(.modal-overlay,.overlay,.modal-backdrop) {
  background: rgba(1,8,15,.76) !important;
}

/* ============================================
   SEMANTIC FEEDBACK
   ============================================ */
html[data-theme="dark"] body .alert.success,
body.theme-dark .alert.success { color: #baf3dd !important; background: #10382f !important; border-color: #216d58 !important; }
html[data-theme="dark"] body .alert.error,
body.theme-dark .alert.error { color: #ffd0d6 !important; background: #3b1d29 !important; border-color: #743747 !important; }
html[data-theme="dark"] body .alert.info,
body.theme-dark .alert.info { color: #c8e6ff !important; background: #10314f !important; border-color: #2d699c !important; }
html[data-theme="dark"] body .alert.warning,
body.theme-dark .alert.warning { color: #ffe6b0 !important; background: #3a2a10 !important; border-color: #8a6420 !important; }
html[data-theme="dark"] body :is(.status-active,.badge-success),
body.theme-dark :is(.status-active,.badge-success) { color: #baf3dd !important; background: #12382f !important; }
html[data-theme="dark"] body :is(.status-inactive,.badge-danger),
body.theme-dark :is(.status-inactive,.badge-danger) { color: #ffd0d6 !important; background: #3b1d29 !important; }
html[data-theme="dark"] body .notification-item.unread,
body.theme-dark .notification-item.unread { background: #102c49 !important; border-color: #2d699c !important; }

/* ============================================
   BUTTONS
   ============================================ */
html[data-theme="dark"] body :is(.btn-secondary,.btn-light,.month-nav-btn,
  .pd-item,.icon-picker-button,.sidebar-media-close,.back-button),
body.theme-dark :is(.btn-secondary,.btn-light,.month-nav-btn,
  .pd-item,.icon-picker-button,.sidebar-media-close,.back-button) {
  color: #e4eff8 !important;
  background: #17314b !important;
  border-color: #31516d !important;
}
html[data-theme="dark"] body :is(.logout,.pd-logout-btn),
body.theme-dark :is(.logout,.pd-logout-btn) {
  color: #ffbdc6 !important;
  background: #351d2a !important;
  border-color: #683747 !important;
}

/* ============================================
   FOOTER
   ============================================ */
html[data-theme="dark"] body footer,
body.theme-dark footer { color: #b5c7d7 !important; background: transparent !important; }

/* ============================================
   USER-FACING FLOATING THEME TOGGLE
   ============================================ */
.floating-theme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #17314b;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
  cursor: pointer;
  font-size: 19px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.floating-theme-toggle:hover { transform: translateY(-2px); }
html[data-theme="dark"] .floating-theme-toggle,
body.theme-dark .floating-theme-toggle {
  color: #f8fafc;
  background: #15314b;
  border-color: #31516d;
  box-shadow: 0 12px 30px rgba(0,0,0,.34);
}

@media (max-width: 640px) {
  .floating-theme-toggle { left: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 13px; }
}

/* ============================================
   SCROLLBAR
   ============================================ */
html[data-theme="dark"] body ::-webkit-scrollbar,
body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] body ::-webkit-scrollbar-track,
body.theme-dark ::-webkit-scrollbar-track { background: var(--dark-page-2); }
html[data-theme="dark"] body ::-webkit-scrollbar-thumb,
body.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 6px;
  border: 2px solid var(--dark-page-2);
}
html[data-theme="dark"] body ::-webkit-scrollbar-thumb:hover,
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #3a5a7a; }

/* Selection */
html[data-theme="dark"] ::selection,
body.theme-dark ::selection { background: #2d699c; color: var(--dark-text); }