/*
  Global dark mode styles for DHEnt Store.
  This file works with Bootstrap 5.3 data-bs-theme support and improves
  custom page areas that may not automatically inherit dark mode colors.
  It keeps text readable, updates cards/tables/forms/dropdowns, and styles
  the floating bottom-right theme toggle button.
*/

:root {
  --dhent-light-body-bg: #f8f9fa;
  --dhent-light-body-color: #212529;

  --dhent-dark-body-bg: #0b1120;
  --dhent-dark-surface-bg: #111827;
  --dhent-dark-surface-bg-soft: #1f2937;
  --dhent-dark-surface-bg-lighter: #243244;
  --dhent-dark-border: #374151;
  --dhent-dark-text: #f9fafb;
  --dhent-dark-muted-text: #d1d5db;
  --dhent-dark-soft-text: #e5e7eb;
  --dhent-dark-link: #93c5fd;

  --dhent-toggle-size: 48px;
}

body {
  background-color: var(--dhent-light-body-bg);
  color: var(--dhent-light-body-color);
  transition: none;
}

/* Floating bottom-right theme button */
.theme-floating-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  width: var(--dhent-toggle-size);
  height: var(--dhent-toggle-size);
  border: 0;
  border-radius: 50%;
  background: #0d6efd;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background-color 0.12s ease;
}

.theme-floating-toggle:hover {
  transform: translateY(-2px);
  background: #0b5ed7;
  color: #ffffff;
}

.theme-floating-toggle:focus-visible,
.theme-toggle-btn:focus-visible {
  outline: 3px solid rgba(13, 110, 253, 0.35);
  outline-offset: 3px;
}

.theme-toggle-btn {
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Main dark mode foundation */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
  background-color: var(--dhent-dark-body-bg);
  color: var(--dhent-dark-text);
}

html[data-bs-theme="dark"] .theme-floating-toggle {
  background: #facc15;
  color: #111827;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

html[data-bs-theme="dark"] .theme-floating-toggle:hover {
  background: #eab308;
  color: #111827;
}

/* General readable text */
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] p,
html[data-bs-theme="dark"] span,
html[data-bs-theme="dark"] label,
html[data-bs-theme="dark"] strong,
html[data-bs-theme="dark"] b,
html[data-bs-theme="dark"] li,
html[data-bs-theme="dark"] td,
html[data-bs-theme="dark"] th {
  color: inherit;
}

html[data-bs-theme="dark"] a {
  color: var(--dhent-dark-link);
}

html[data-bs-theme="dark"] a:hover {
  color: #bfdbfe;
}

html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-body,
html[data-bs-theme="dark"] .text-black {
  color: var(--dhent-dark-text) !important;
}

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary,
html[data-bs-theme="dark"] .small,
html[data-bs-theme="dark"] small {
  color: var(--dhent-dark-muted-text) !important;
}

html[data-bs-theme="dark"] .text-primary {
  color: #93c5fd !important;
}

html[data-bs-theme="dark"] .text-success {
  color: #86efac !important;
}

html[data-bs-theme="dark"] .text-danger {
  color: #fca5a5 !important;
}

html[data-bs-theme="dark"] .text-warning {
  color: #fde68a !important;
}

html[data-bs-theme="dark"] .text-info {
  color: #67e8f9 !important;
}

/* Common light backgrounds converted to dark surfaces */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .dropdown-menu:not(.dropdown-menu-dark),
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .accordion-item,
html[data-bs-theme="dark"] .page-item .page-link {
  background-color: var(--dhent-dark-surface-bg);
  color: var(--dhent-dark-text);
  border-color: var(--dhent-dark-border);
}

html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .accordion-header,
html[data-bs-theme="dark"] .accordion-button {
  background-color: var(--dhent-dark-surface-bg-soft);
  color: var(--dhent-dark-text);
  border-color: var(--dhent-dark-border);
}

html[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--dhent-dark-surface-bg-lighter);
  color: var(--dhent-dark-text);
}

/* Fix white/blue-ish Bootstrap background containers */
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-body,
html[data-bs-theme="dark"] .bg-body-tertiary,
html[data-bs-theme="dark"] .bg-body-secondary,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .alert-light {
  background-color: var(--dhent-dark-surface-bg) !important;
  color: var(--dhent-dark-text) !important;
  border-color: var(--dhent-dark-border) !important;
}

html[data-bs-theme="dark"] .bg-primary-subtle,
html[data-bs-theme="dark"] .bg-info-subtle,
html[data-bs-theme="dark"] .bg-success-subtle,
html[data-bs-theme="dark"] .bg-warning-subtle,
html[data-bs-theme="dark"] .bg-danger-subtle,
html[data-bs-theme="dark"] .bg-secondary-subtle {
  background-color: var(--dhent-dark-surface-bg-soft) !important;
  color: var(--dhent-dark-text) !important;
  border-color: var(--dhent-dark-border) !important;
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-end,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-light {
  border-color: var(--dhent-dark-border) !important;
}

/* Alerts */
html[data-bs-theme="dark"] .alert {
  border-color: var(--dhent-dark-border);
}

html[data-bs-theme="dark"] .alert-primary {
  background-color: #172554;
  color: #bfdbfe;
}

html[data-bs-theme="dark"] .alert-success {
  background-color: #052e16;
  color: #bbf7d0;
}

html[data-bs-theme="dark"] .alert-danger {
  background-color: #450a0a;
  color: #fecaca;
}

html[data-bs-theme="dark"] .alert-warning {
  background-color: #422006;
  color: #fde68a;
}

html[data-bs-theme="dark"] .alert-info {
  background-color: #083344;
  color: #cffafe;
}

/* Tables */
html[data-bs-theme="dark"] .table {
  --bs-table-color: var(--dhent-dark-text);
  --bs-table-bg: var(--dhent-dark-surface-bg);
  --bs-table-border-color: var(--dhent-dark-border);
  --bs-table-striped-color: var(--dhent-dark-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-hover-color: var(--dhent-dark-text);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

html[data-bs-theme="dark"] .table thead,
html[data-bs-theme="dark"] .table th {
  color: var(--dhent-dark-text);
  background-color: var(--dhent-dark-surface-bg-soft);
}

/* Forms */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] input {
  background-color: var(--dhent-dark-surface-bg);
  color: var(--dhent-dark-text);
  border-color: var(--dhent-dark-border);
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] textarea::placeholder,
html[data-bs-theme="dark"] input::placeholder {
  color: #9ca3af;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--dhent-dark-surface-bg);
  color: var(--dhent-dark-text);
  border-color: #60a5fa;
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
}

html[data-bs-theme="dark"] .input-group-text {
  background-color: var(--dhent-dark-surface-bg-soft);
  color: var(--dhent-dark-text);
  border-color: var(--dhent-dark-border);
}

/* Dropdowns */
html[data-bs-theme="dark"] .dropdown-item {
  color: var(--dhent-dark-text);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--dhent-dark-surface-bg-soft);
  color: #ffffff;
}

html[data-bs-theme="dark"] .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-item:active {
  background-color: #0d6efd;
  color: #ffffff;
}

/* Buttons */
html[data-bs-theme="dark"] .btn-light {
  background-color: var(--dhent-dark-surface-bg-soft);
  color: var(--dhent-dark-text);
  border-color: var(--dhent-dark-border);
}

html[data-bs-theme="dark"] .btn-light:hover {
  background-color: var(--dhent-dark-surface-bg-lighter);
  color: var(--dhent-dark-text);
}

html[data-bs-theme="dark"] .btn-outline-dark {
  color: var(--dhent-dark-text);
  border-color: var(--dhent-dark-muted-text);
}

html[data-bs-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--dhent-dark-text);
  color: #111827;
}

/* Badges */
html[data-bs-theme="dark"] .badge.bg-light,
html[data-bs-theme="dark"] .badge.text-bg-light {
  background-color: var(--dhent-dark-surface-bg-soft) !important;
  color: var(--dhent-dark-text) !important;
}

/* Common custom page wrappers */
html[data-bs-theme="dark"] .container-box,
html[data-bs-theme="dark"] .content-box,
html[data-bs-theme="dark"] .dashboard-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .wallet-card,
html[data-bs-theme="dark"] .order-card,
html[data-bs-theme="dark"] .profile-card,
html[data-bs-theme="dark"] .section-box,
html[data-bs-theme="dark"] .main-content,
html[data-bs-theme="dark"] .content-wrapper,
html[data-bs-theme="dark"] .page-content {
  background-color: var(--dhent-dark-surface-bg) !important;
  color: var(--dhent-dark-text) !important;
  border-color: var(--dhent-dark-border) !important;
}

/* Prevent bright shadow boxes from looking blue or washed out */
html[data-bs-theme="dark"] .shadow,
html[data-bs-theme="dark"] .shadow-sm,
html[data-bs-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

/* Horizontal rules */
html[data-bs-theme="dark"] hr {
  border-color: var(--dhent-dark-border);
  opacity: 1;
}

/* Selection */
html[data-bs-theme="dark"] ::selection {
  background-color: #2563eb;
  color: #ffffff;
}

@media (max-width: 575.98px) {
  .theme-floating-toggle {
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}

/* ========================================================================
   DHEnt 2026 live fixes: branded theme colors, fixed header/footer support,
   dashboard dark gradient, and readable WhatsApp floating popup.
   ======================================================================== */

:root {
  --dhent-theme-gold: #f59e0b;
  --dhent-theme-blue: #2563eb;
  --dhent-theme-green: #16a34a;
  --dhent-theme-gradient: linear-gradient(135deg, #f59e0b 0%, #2563eb 62%, #16a34a 100%);
  --dhent-dark-gradient: radial-gradient(circle at top left, rgba(245, 158, 11, 0.16), transparent 32%),
                         radial-gradient(circle at top right, rgba(37, 99, 235, 0.22), transparent 34%),
                         linear-gradient(135deg, #020617 0%, #0f172a 48%, #064e3b 100%);
}

html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
  background: var(--dhent-dark-body-bg) !important;
  color: var(--dhent-dark-text) !important;
}

/* Header support for the new fixed slide-left header */
html[data-bs-theme="dark"] .dh-fixed-header {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 27, 75, 0.95), rgba(6, 78, 59, 0.94)) !important;
  border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-bs-theme="dark"] .dh-side-panel,
html[data-bs-theme="dark"] .dh-side-drawer,
html[data-bs-theme="dark"] .dh-side-menu {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-bs-theme="dark"] .dh-side-card,
html[data-bs-theme="dark"] .dh-side-section {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-bs-theme="dark"] .dh-side-link,
html[data-bs-theme="dark"] .dh-side-title,
html[data-bs-theme="dark"] .dh-side-label {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .dh-side-link:hover,
html[data-bs-theme="dark"] .dh-side-link.active {
  background: rgba(96, 165, 250, 0.16) !important;
  color: #fbbf24 !important;
}

/* Dashboard dark gradient and readable surfaces */
html[data-bs-theme="dark"] .dashboard-page {
  background: var(--dhent-dark-body-bg) !important;
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .dashboard-page > .container > .card,
html[data-bs-theme="dark"] .dashboard-page .card,
html[data-bs-theme="dark"] .dashboard-page .card-body,
html[data-bs-theme="dark"] .dashboard-page .menu-grid-card,
html[data-bs-theme="dark"] .dashboard-page .table-responsive {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-bs-theme="dark"] .dashboard-page > .container > .card {
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.42) !important;
}

html[data-bs-theme="dark"] .dashboard-page .wallet-panel {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(30, 27, 75, 0.84), rgba(6, 78, 59, 0.78)) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

html[data-bs-theme="dark"] .dashboard-page .square-tile {
  background: rgba(30, 41, 59, 0.92) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

html[data-bs-theme="dark"] .dashboard-page .square-tile.bg-warning {
  background: linear-gradient(135deg, #b45309, #92400e) !important;
  color: #fff7ed !important;
}

html[data-bs-theme="dark"] .dashboard-page .square-tile.bg-primary {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .dashboard-page .text-muted,
html[data-bs-theme="dark"] .dashboard-page .tile-sub,
html[data-bs-theme="dark"] .dashboard-page .small,
html[data-bs-theme="dark"] .dashboard-page small {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .dashboard-page .greeting-text,
html[data-bs-theme="dark"] .dashboard-page .fw-semibold,
html[data-bs-theme="dark"] .dashboard-page .wallet-amount,
html[data-bs-theme="dark"] .dashboard-page .tile-title,
html[data-bs-theme="dark"] .dashboard-page td,
html[data-bs-theme="dark"] .dashboard-page th {
  color: #f8fafc !important;
}

/* WhatsApp floating message readability */
.whatsapp-float-msg {
  color: #111827;
}

html[data-bs-theme="dark"] .whatsapp-float-msg {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.48) !important;
}

html[data-bs-theme="dark"] .whatsapp-float-msg .fw-semibold,
html[data-bs-theme="dark"] .whatsapp-float-msg strong {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .whatsapp-float-msg .text-muted,
html[data-bs-theme="dark"] .whatsapp-float-msg .small,
html[data-bs-theme="dark"] .whatsapp-float-msg small {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .whatsapp-float-msg .wa-close {
  color: #e2e8f0 !important;
  background: rgba(148, 163, 184, 0.14) !important;
}

html[data-bs-theme="dark"] .whatsapp-float-msg .wa-close:hover {
  background: rgba(148, 163, 184, 0.24) !important;
}

/* Footer support */
html[data-bs-theme="dark"] .site-footer-card,
html[data-bs-theme="dark"] .site-footer {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .site-footer-card {
  background: linear-gradient(135deg, #0f172a, #1e1b4b 55%, #064e3b) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}


/* ========================================================================
   DHEnt 2026 performance and global WhatsApp/header/footer updates.
   ======================================================================== */
html[data-bs-theme="dark"] *,
html[data-bs-theme="dark"] *::before,
html[data-bs-theme="dark"] *::after {
  transition-duration: .01ms !important;
}

.dh-wa-floating,
.dh-wa-floating *,
.dh-wa-btn,
.dh-wa-btn * {
  color-scheme: light;
}

html[data-bs-theme="dark"] .dh-wa-btn {
  background: #25D366 !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .dh-wa-count {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-bs-theme="dark"] .dh-fixed-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-bs-theme="dark"] .dashboard-page,
html[data-bs-theme="dark"] body {
  background-attachment: scroll !important;
}