/**
 * Sa Đéc Marketing Hub - Dark Theme CSS
 * Theme switching support với CSS custom properties
 */

/* ===== DARK THEME VARIABLES ===== */
/* Apply khi html có data-theme="dark" */
[data-theme="dark"] {
  /* Primary - Mekong Teal (adjusted for dark) */
  --md-sys-color-primary: #4ADDD0;
  --md-sys-color-on-primary: #003732;
  --md-sys-color-primary-container: #005149;
  --md-sys-color-on-primary-container: #74F8E5;

  /* Secondary - Sa Đéc Gold (adjusted for dark) */
  --md-sys-color-secondary: #FFD68A;
  --md-sys-color-on-secondary: #523500;
  --md-sys-color-secondary-container: #784F00;
  --md-sys-color-on-secondary-container: #FFDEA6;

  /* Tertiary - Accent Purple (adjusted for dark) */
  --md-sys-color-tertiary: #D0BCFF;
  --md-sys-color-on-tertiary: #381E72;
  --md-sys-color-tertiary-container: #4F378B;
  --md-sys-color-on-tertiary-container: #EADDFF;

  /* Error */
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;

  /* Surface & Backgrounds - Dark */
  --md-sys-color-surface: #191C1B;
  --md-sys-color-on-surface: #E1E3E2;
  --md-sys-color-surface-variant: #3F4946;
  --md-sys-color-on-surface-variant: #BFC9C6;
  --md-sys-color-surface-container: #111413;
  --md-sys-color-surface-container-high: #1B1E1D;
  --md-sys-color-surface-container-highest: #262928;
  --md-sys-color-inverse-surface: #E1E3E2;
  --md-sys-color-inverse-on-surface: #2E3130;
  --md-sys-color-inverse-primary: #006A60;

  /* Outlines - Dark */
  --md-sys-color-outline: #899390;
  --md-sys-color-outline-variant: #3F4946;

  /* Elevation - Dark shadows */
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);

  /* Additional dark mode specific colors */
  --md-sys-color-surface-dim: #0D0F0F;
  --md-sys-color-surface-bright: #323534;
  --md-sys-color-surface-container-low: #141716;
  --md-sys-color-surface-container-medium: #212423;

  /* Payment Status - Dark mode */
  --payment-success: #4ADE80;
  --payment-pending: #FBBF24;
  --payment-failed: #F87171;
}

/* ===== TRANSITION ANIMATIONS ===== */

/* Smooth theme transition - áp dụng cho tất cả elements */
*,
*::before,
*::after {
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Giảm animation cho users nhạy cảm với chuyển động */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ===== DARK THEME STYLES ===== */

/* Smooth theme transition */
[data-theme="dark"] body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

/* Card backgrounds in dark mode */
[data-theme="dark"] .card,
[data-theme="dark"] .md-card,
[data-theme="dark"] .surface-card {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline-variant);
}

/* Input fields in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}

/* Links in dark mode */
[data-theme="dark"] a {
  color: var(--md-sys-color-primary);
}

[data-theme="dark"] a:hover {
  color: var(--md-sys-color-inverse-primary);
}

/* Code blocks in dark mode */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: var(--md-sys-color-surface-container-highest);
  border-color: var(--md-sys-color-outline-variant);
}

/* Tables in dark mode */
[data-theme="dark"] table {
  border-color: var(--md-sys-color-outline-variant);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
  border-color: var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container);
}

[data-theme="dark"] tr:hover {
  background: var(--md-sys-color-surface-container-high);
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

[data-theme="dark"] .btn-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Images - slight brightness adjustment in dark mode */
[data-theme="dark"] img {
  filter: brightness(0.95);
}

/* Icon colors in dark mode */
[data-theme="dark"] .material-symbols-outlined {
  color: var(--md-sys-color-on-surface-variant);
}

/* Divider lines in dark mode */
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
  border-color: var(--md-sys-color-outline-variant);
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--md-sys-color-surface-container);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-on-surface-variant);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
  box-shadow: var(--md-sys-elevation-1);
}

.theme-toggle:hover {
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: var(--md-sys-elevation-2);
  transform: scale(1.02);
}

.theme-toggle:active {
  transform: scale(0.98);
}

.theme-toggle-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform 0.3s ease;
}

/* Rotate animation when toggling */
.theme-toggle.toggling .theme-toggle-icon {
  animation: rotateIcon 0.3s ease;
}

@keyframes rotateIcon {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.theme-toggle-label {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

/* Hide label on mobile */
@media (max-width: 768px) {
  .theme-toggle-label {
    display: none;
  }

  .theme-toggle {
    top: 12px;
    right: 12px;
    padding: 8px;
    border-radius: 50%;
  }
}

/* Sun icon (shown in dark mode) */
.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

/* In dark mode, show sun icon */
[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

/* ===== MOBILE FLOATING TOGGLE ===== */
.theme-toggle-floating {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  box-shadow: var(--md-sys-elevation-2);
  cursor: pointer;
  z-index: 9998;
  transition: all 0.2s var(--md-sys-motion-easing-standard);
}

.theme-toggle-floating:hover {
  transform: scale(1.1);
  box-shadow: var(--md-sys-elevation-3);
}

@media (min-width: 769px) {
  .theme-toggle-floating {
    display: none;
  }
}

/* ===== TRANSITION EFFECTS ===== */
/* Smooth color transitions */
body,
.card,
.card *,
header,
nav,
footer {
  transition:
    background-color 0.2s var(--md-sys-motion-easing-standard),
    color 0.2s var(--md-sys-motion-easing-standard),
    border-color 0.2s var(--md-sys-motion-easing-standard);
}

/* Prevent flash of unstyled content */
html {
  visibility: visible;
  opacity: 1;
}

html.no-transition * {
  transition: none !important;
}