/* ===== DESIGN SYSTEM ===== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-card: rgba(17, 24, 39, 0.8);
  --bg-card-hover: rgba(31, 41, 55, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);

  --border-color: rgba(255, 255, 255, 0.06);
  --border-active: rgba(99, 102, 241, 0.5);

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --accent-blue: #6366f1;
  --accent-purple: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --accent-pink: #ec4899;

  --gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-secondary: linear-gradient(135deg, #06b6d4, #10b981);
  --gradient-danger: linear-gradient(135deg, #ef4444, #ec4899);
  --gradient-bg: linear-gradient(135deg, #0a0e1a 0%, #1a1040 50%, #0a0e1a 100%);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --sidebar-width: 240px;
  --topbar-height: 64px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--gradient-bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== UTILITIES ===== */
.hidden { display: none !important; }
.active { display: block; }
.optional { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html.theme-transitioning body,
html.theme-transitioning body *:not(svg):not(path):not(.theme-switch):not(.theme-switch__thumb) {
  transition-property: background, background-color, color, border-color, box-shadow, opacity, transform, fill, stroke !important;
  transition-duration: 360ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== SCREENS ===== */
.screen { display: none; }
.screen.active { display: flex; }

/* ===== LOGIN SCREEN ===== */
#login-screen, #auth-screen {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: var(--gradient-bg);
  position: relative;
}

.login-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  z-index: 1;
}

.login-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinning {
  animation: spin 1s linear infinite;
}

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(99, 102, 241, 0.2);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  vertical-align: middle;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-icon {
  width: 64px;
  height: 64px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.login-icon svg { width: 32px; height: 32px; color: white; }

.login-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.login-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.login-form { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-group label svg { width: 14px; height: 14px; }

.form-group input, .form-group select {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-group input:focus, .form-group select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-group input::placeholder { color: var(--text-muted); }

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.auto-time-picker {
  position: relative;
  width: 100%;
}

.auto-time-picker__trigger {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #1f2937;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: text;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.auto-time-picker__trigger:hover,
.auto-time-picker__trigger:focus,
.auto-time-picker.open .auto-time-picker__trigger {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
  background: #fff7ed;
}

.auto-time-picker__trigger svg {
  width: 16px;
  height: 16px;
  color: #f97316;
  flex-shrink: 0;
  pointer-events: none;
}

.auto-time-picker__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #1f2937;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
}

.auto-time-picker__input::placeholder {
  color: #9ca3af;
}

.auto-time-picker__input.invalid {
  color: #dc2626;
}

.auto-time-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 32px));
  padding: 12px;
  display: none;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #fdba74;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(249, 115, 22, 0.06);
}

.auto-time-picker.open .auto-time-picker__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auto-time-picker__column {
  min-width: 0;
}

.auto-time-picker__label {
  margin-bottom: 8px;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auto-time-picker__grid {
  display: grid;
  gap: 6px;
  max-height: 224px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #fb923c #ffedd5;
}

.auto-time-picker__grid--hours {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.auto-time-picker__grid--minutes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auto-time-picker__grid::-webkit-scrollbar {
  width: 8px;
}

.auto-time-picker__grid::-webkit-scrollbar-track {
  background: #ffedd5;
  border-radius: 999px;
}

.auto-time-picker__grid::-webkit-scrollbar-thumb {
  background: #fb923c;
  border-radius: 999px;
}

.auto-time-picker__option {
  min-height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #ffffff;
  color: #374151;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.auto-time-picker__option:hover {
  background: #fff7ed;
  border-color: #fb923c;
  color: #9a3412;
}

.auto-time-picker__option.active {
  background: #f97316;
  border-color: #fb923c;
  color: #fff7ed;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.26);
}

@media (max-width: 520px) {
  .auto-time-picker__panel {
    width: calc(100vw - 40px);
    grid-template-columns: 1fr;
  }
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-base);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);
}

.btn-primary:active { transform: translateY(0); }
.btn-primary svg { width: 18px; height: 18px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--radius-md); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.btn-ghost:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
  border-color: var(--border-active);
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-sm svg { width: 14px; height: 14px; }

.error-msg {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-red);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.9rem;
  text-align: center;
}

/* ===== LOGIN HELP ===== */
.login-help { margin-top: 20px; }
.login-help details { cursor: pointer; }
.login-help summary {
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
.login-help summary svg { width: 14px; height: 14px; }
.help-content {
  padding: 16px;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.help-content h4 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 12px 0 8px;
}
.help-content h4:first-child { margin-top: 0; }
.help-content ol {
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.help-content li { margin: 4px 0; }

/* ===== MAIN LAYOUT ===== */
#main-screen {
  min-height: 100vh;
  display: none;
}

#main-screen.active {
  display: flex;
}

/* ===== SIDEBAR ===== */
#sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform var(--transition-base);
}

#sidebar.collapsed { transform: translateX(-100%); }

.sidebar-brand {
  padding: 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
}

.brand-icon {
  width: 36px;
  height: 36px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon svg { width: 20px; height: 20px; color: white; }

.brand-text {
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-list {
  list-style: none;
  padding: 12px 8px;
  flex: 1;
  overflow-y: auto;
}

.nav-group-header {
  padding: 16px 16px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  user-select: none;
}

.nav-item {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  margin: 2px 0;
}

.nav-item:hover {
  background: var(--bg-glass-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-blue);
  font-weight: 600;
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Submenu styles */
.nav-item.has-submenu {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.nav-item-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.submenu {
  list-style: none;
  padding: 4px 8px 8px 46px;
  display: none;
}

.nav-item.active .submenu {
  display: block;
}

.submenu-item {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
}

.submenu-item:hover {
  color: var(--text-primary);
  background: var(--bg-glass-hover);
}

.submenu-item.active {
  color: var(--accent-blue);
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
}

.submenu-arrow {
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  transition: transform var(--transition-base);
}

.nav-item.active .submenu-arrow {
  transform: rotate(180deg);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.user-info svg { width: 18px; height: 18px; }

.theme-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.theme-switcher--brand {
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

.theme-switch {
  position: relative;
  width: 46px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #7c3aed;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 26px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  overflow: hidden;
  transition: background 360ms cubic-bezier(0.4, 0, 0.2, 1), border-color 360ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch:hover {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08), 0 12px 30px rgba(15, 23, 42, 0.18);
}

.theme-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25), 0 12px 30px rgba(15, 23, 42, 0.18);
}

.theme-switch.is-dark {
  background: #171717;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.38), 0 12px 28px rgba(0, 0, 0, 0.24);
}

.theme-switch.is-dark:hover {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.42), 0 14px 34px rgba(0, 0, 0, 0.3);
}

.theme-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  color: #7c3aed;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), background 360ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch.is-dark .theme-switch__thumb {
  transform: translateX(22px);
  background: #2b2b2f;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.36);
}

.theme-switch__sun,
.theme-switch__moon {
  position: absolute;
  width: 11px;
  height: 11px;
  stroke-width: 2.8;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-switch__sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-switch__moon {
  opacity: 0;
  transform: rotate(-60deg) scale(0.55);
}

.theme-switch.is-dark .theme-switch__sun {
  opacity: 0;
  transform: rotate(60deg) scale(0.55);
}

.theme-switch.is-dark .theme-switch__moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning body,
  html.theme-transitioning body *:not(svg):not(path):not(.theme-switch):not(.theme-switch__thumb),
  .theme-switch,
  .theme-switch__thumb,
  .theme-switch__sun,
  .theme-switch__moon {
    transition-duration: 1ms !important;
  }
}

/* ===== CONTENT ===== */
#content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  transition: margin-left var(--transition-base);
  /* Tạo scroll context riêng để không bị body overflow-x:hidden chặn */
  overflow-x: auto;
}

#sidebar.collapsed + #content { margin-left: 0; }

/* ===== TOPBAR ===== */
#topbar {
  height: var(--topbar-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-left h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.topbar-right { display: flex; align-items: center; gap: 8px; }

.date-selector {
  display: flex;
  gap: 4px;
  background: var(--bg-glass);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.date-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.date-btn:hover { color: var(--text-primary); background: var(--bg-glass-hover); border: 1px solid rgba(255,255,255,0.1); }
.date-btn.active { background: var(--accent-blue) !important; color: white !important; box-shadow: 0 0 15px rgba(99, 102, 241, 0.35); font-weight: 600; }

.date-separator {
  width: 1px;
  background: var(--border-color);
  margin: 2px 6px;
  flex-shrink: 0;
}

.date-input {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.78rem;
  outline: none;
  width: 120px;
  transition: border-color var(--transition-fast);
  color-scheme: dark;
}

.date-input:focus {
  border-color: var(--accent-blue);
}

.date-range-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ===== TAB CONTENT ===== */
.tab-content {
  display: none;
  padding: 24px;
  animation: fadeIn 0.3s ease;
}

.tab-content.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== ACCOUNTS GRID ===== */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 0;
}

.account-chip:hover { background: var(--bg-glass-hover); }
.account-chip.selected {
  border-color: var(--accent-blue);
  background: rgba(99, 102, 241, 0.08);
}

.account-chip input[type="checkbox"] {
  accent-color: var(--accent-blue);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.account-chip > div {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.account-chip .account-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-chip .account-id {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== KPI GRID ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(12px);
  transition: all var(--transition-base);
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-active);
}

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon svg { width: 22px; height: 22px; }

.kpi-icon.spend { background: rgba(99, 102, 241, 0.15); color: var(--accent-blue); }
.kpi-icon.impressions { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
.kpi-icon.clicks { background: rgba(139, 92, 246, 0.15); color: var(--accent-purple); }
.kpi-icon.ctr { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.kpi-icon.cpc { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.kpi-icon.reach { background: rgba(236, 72, 153, 0.15); color: var(--accent-pink); }
.kpi-icon.revenue { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.kpi-icon.orders { background: rgba(99, 102, 241, 0.15); color: var(--accent-blue); }
.kpi-icon.avg { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.kpi-icon.success { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }

.kpi-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; overflow: hidden; }
.kpi-label { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== SECTION CARD ===== */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 20px 0;
  backdrop-filter: blur(12px);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-card h3 {
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.section-card h3 svg { width: 18px; height: 18px; color: var(--accent-blue); }

/* ===== CHARTS ===== */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  backdrop-filter: blur(12px);
}

.chart-card.full-width { grid-column: 1 / -1; }

.chart-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.chart-card h3 svg { width: 16px; height: 16px; color: var(--accent-blue); }

.chart-card canvas { max-height: 300px; }

/* ===== TABLE ===== */
.table-container { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

tbody tr {
  transition: background var(--transition-fast);
  cursor: pointer;
}

tbody tr:hover { background: var(--bg-glass-hover); }

.status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
}

.status-active, .status-confirmed, .status-delivered { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.status-paused, .status-shipping { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
.status-deleted, .status-cancelled, .status-returned { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }

/* ===== FLOW VIEW ===== */
.flow-container {
  display: flex;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  padding: 8px 0;
}

.flow-step {
  flex: 1;
  min-width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

.flow-step.active-step { border-color: var(--accent-blue); box-shadow: var(--shadow-glow); }

.flow-step-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-glass);
}

.flow-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.flow-step-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-step-header h3 svg { width: 16px; height: 16px; color: var(--accent-blue); }

.flow-step-body {
  padding: 16px;
  max-height: 500px;
  overflow-y: auto;
}

.flow-arrow {
  display: flex;
  align-items: center;
  color: var(--accent-blue);
  flex-shrink: 0;
  padding: 0 4px;
}

.flow-arrow svg { width: 24px; height: 24px; }

.flow-items-list { display: flex; flex-direction: column; gap: 8px; }

.flow-item {
  padding: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.flow-item:hover { background: var(--bg-glass-hover); border-color: var(--border-active); }
.flow-item.selected { border-color: var(--accent-blue); background: rgba(99, 102, 241, 0.08); }

.flow-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.flow-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.flow-item-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.flow-item-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ===== ORDERS ===== */
.orders-header {
  margin-bottom: 20px;
}

.form-inline {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-inline .form-group { flex: 1; min-width: 200px; }
.form-inline .btn-primary { height: 42px; flex-shrink: 0; }

.order-filters {
  display: flex;
  gap: 8px;
}

.order-filters select {
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.8rem;
  outline: none;
}

/* ===== LOADING ===== */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content { text-align: center; }
.loading-content p { margin-top: 16px; color: var(--text-secondary); }

.spinner, .spinner-lg {
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

.spinner { width: 18px; height: 18px; }
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
}

/* ===== TOAST ===== */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: slideInRight 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
}

.toast svg { width: 16px; height: 16px; flex-shrink: 0; }

.toast.success { background: rgba(16, 185, 129, 0.9); color: white; }
.toast.error { background: rgba(239, 68, 68, 0.9); color: white; }
.toast.info { background: rgba(99, 102, 241, 0.9); color: white; }

/* ===== PANCAKE POS REDESIGN ===== */
.pos-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.pos-time-filters, .pos-actions { display: flex; align-items: center; gap: 8px; }
.pos-time-filters span { color: var(--text-muted); font-size: 0.85rem; }
.pos-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all var(--transition-fast); }
.pos-btn:hover { background: var(--bg-glass-hover); border-color: var(--border-active); }
.pos-btn.active { background: var(--accent-blue) !important; color: white !important; border-color: var(--accent-blue); box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); font-weight: 600; }
.pos-btn i, .pos-btn svg { width: 14px; height: 14px; }

/* Custom SELECT BOX (pos-select) Styling */
.pos-select {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 36px 8px 12px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all var(--transition-fast) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  color-scheme: dark;
}

.pos-select:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--border-active) !important;
}

.pos-select:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), var(--shadow-sm) !important;
}

[data-theme="light"] .pos-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  color-scheme: light;
}

[data-theme="light"] .pos-select:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}

[data-theme="light"] .pos-select:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}
.pos-dropdown { position: relative; }
.pos-dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 480px; display: none; z-index: 100; backdrop-filter: blur(16px); }
.pos-dropdown-menu.show { display: flex; }
.dropdown-submenu { width: 200px; border-right: 1px solid var(--border-color); padding: 8px 0; }
.submenu-item { padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 0.85rem; }
.submenu-item:hover, .submenu-item.active { background: rgba(99, 102, 241, 0.1); color: var(--accent-blue); }
.submenu-item svg { width: 14px; height: 14px; }
.dropdown-pane { flex: 1; padding: 12px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.2); }
.pane-search { position: relative; margin-bottom: 12px; }
.pane-search input { width: 100%; background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 12px 8px 32px; color: var(--text-primary); font-size: 0.85rem; outline: none; }
.pane-search .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted); }
.pane-results { flex: 1; max-height: 240px; overflow-y: auto; }
.empty-state-small { color: var(--text-muted); font-size: 0.8rem; text-align: center; padding: 20px 0; }
.product-search-item { padding: 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; }
.product-search-item:hover { background: var(--bg-glass-hover); }

/* Tags Container */
.pos-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; min-height: 28px; }
.pos-filter-tag { background: var(--bg-card); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--text-primary); padding: 4px 10px; border-radius: 16px; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.pos-filter-tag span { color: var(--text-secondary); }
.pos-filter-tag .tag-close { cursor: pointer; opacity: 0.6; display: flex; align-items: center; }
.pos-filter-tag .tag-close svg { width: 12px; height: 12px; }
.pos-filter-tag .tag-close:hover { opacity: 1; color: var(--accent-red); }

/* Summary Blocks */
.pos-summary-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.pos-block-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; }
.pos-block-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; margin-bottom: 16px; }
.icon-circle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-circle svg { width: 14px; height: 14px; color: white; }
.bg-green { background: var(--accent-green); }
.bg-orange { background: var(--accent-amber); }

.pos-block-stats { display: flex; gap: 24px; }
.stat-col { flex: 1; }
.stat-col .label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.stat-col .value { font-size: 1.35rem; font-weight: 700; margin-bottom: 4px; }
.green-text { color: var(--accent-green); }
.red-text { color: var(--accent-red); }
.trend { font-size: 0.8rem; display: flex; align-items: center; gap: 4px; }
.trend.up { color: var(--accent-green); }
.trend.down { color: var(--accent-red); }
.trend svg { width: 12px; height: 12px; }

.prices-card { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; }
.price-row .label { color: var(--text-muted); }
.price-row .value { font-weight: 600; font-size: 1.1rem; }
.price-note { font-size: 0.75rem; color: var(--accent-amber); display: flex; gap: 4px; align-items: center; margin-top: auto; }

/* Main Content Area */
.pos-main-content { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.pos-details-section, .pos-chart-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }

/* Detailed Metrics Grid */
.metric-row-top { display: flex; padding: 16px; border-bottom: 1px solid var(--border-color); }
.m-col { flex: 1; border-right: 1px solid var(--border-color); padding: 0 16px; }
.m-col.border-none { border-right: none; }
.m-col .label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.m-col .label svg { width: 16px; height: 16px; color: var(--accent-blue); }
.m-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 6px; }
.m-row span { color: var(--text-muted); }

.pos-tabs { display: flex; border-bottom: 1px solid var(--border-color); padding: 0 16px; }
.pos-tab { padding: 12px 16px; font-size: 0.85rem; font-weight: 500; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; }
.pos-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

.pos-metrics-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 16px; }
.detail-col .label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.detail-col .value { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.help-icon { width: 12px; height: 12px; opacity: 0.6; cursor: help; }

/* Charts */
.chart-header { padding: 16px; border-bottom: 1px solid var(--border-color); }
.chart-header h3 { font-size: 0.95rem; font-weight: 600; }
.chart-content { padding: 16px; display: flex; flex-direction: column; }
.chart-mini-kpis { display: flex; gap: 24px; margin-bottom: 16px; }
.kpi-box { background: var(--bg-glass); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); min-width: 120px; }
.kpi-box .label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.kpi-box .value { font-size: 1.1rem; font-weight: 700; }

@media (max-width: 1200px) { .pos-main-content { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .metric-row-top { flex-direction: column; gap: 16px; } .m-col { border-right: none; padding: 0; } .pos-metrics-details { grid-template-columns: repeat(2, 1fr); } }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
  #content { margin-left: 0 !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
  .flow-container { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); justify-content: center; }
  .date-selector { overflow-x: auto; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar-right { display: none; }
}

.suggestion-item:hover { background: var(--bg-hover) !important; }

/* ===== SELECT / COMBOBOX DARK ===== */
select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  color-scheme: dark;
}

select option {
  background-color: #1e293b;
  color: #f1f5f9;
  padding: 8px 12px;
}

select option:hover,
select option:checked {
  background-color: #334155;
}

/* ===== THEME SYSTEM ===== */

/* Việt Nam - Red & Gold */
[data-theme="vietnam"] {
  --bg-primary: #1a0a0a;
  --bg-secondary: #1f0d0d;
  --bg-card: rgba(40, 15, 15, 0.85);
  --bg-glass: rgba(255, 50, 50, 0.04);
  --bg-glass-hover: rgba(255, 50, 50, 0.08);
  --border-color: rgba(255, 80, 80, 0.1);
  --border-active: rgba(220, 38, 38, 0.5);
  --accent-blue: #dc2626;
  --accent-purple: #f59e0b;
  --gradient-primary: linear-gradient(135deg, #dc2626, #f59e0b);
  --gradient-bg: linear-gradient(135deg, #1a0a0a 0%, #3d1010 50%, #1a0a0a 100%);
  --shadow-glow: 0 0 40px rgba(220, 38, 38, 0.15);
}

/* Skyline - Cool blue cityscape */
[data-theme="skyline"] {
  --bg-primary: #0a1628;
  --bg-secondary: #0f1d32;
  --bg-card: rgba(15, 29, 50, 0.85);
  --bg-glass: rgba(56, 189, 248, 0.04);
  --bg-glass-hover: rgba(56, 189, 248, 0.08);
  --border-color: rgba(56, 189, 248, 0.1);
  --border-active: rgba(14, 165, 233, 0.5);
  --accent-blue: #0ea5e9;
  --accent-purple: #38bdf8;
  --gradient-primary: linear-gradient(135deg, #0ea5e9, #38bdf8);
  --gradient-bg: linear-gradient(135deg, #0a1628 0%, #0c2a4a 50%, #0a1628 100%);
  --shadow-glow: 0 0 40px rgba(14, 165, 233, 0.15);
}

/* Hidden Jaguar - Dark jungle green */
[data-theme="jaguar"] {
  --bg-primary: #071a0e;
  --bg-secondary: #0d2416;
  --bg-card: rgba(13, 36, 22, 0.85);
  --bg-glass: rgba(34, 197, 94, 0.04);
  --bg-glass-hover: rgba(34, 197, 94, 0.08);
  --border-color: rgba(34, 197, 94, 0.1);
  --border-active: rgba(22, 163, 74, 0.5);
  --accent-blue: #22c55e;
  --accent-purple: #4ade80;
  --gradient-primary: linear-gradient(135deg, #16a34a, #22c55e);
  --gradient-bg: linear-gradient(135deg, #071a0e 0%, #0f3d1f 50%, #071a0e 100%);
  --shadow-glow: 0 0 40px rgba(34, 197, 94, 0.15);
}

/* Wide Matrix - Neon green hacker */
[data-theme="matrix"] {
  --bg-primary: #020c02;
  --bg-secondary: #051505;
  --bg-card: rgba(5, 21, 5, 0.9);
  --bg-glass: rgba(0, 255, 65, 0.04);
  --bg-glass-hover: rgba(0, 255, 65, 0.08);
  --border-color: rgba(0, 255, 65, 0.1);
  --border-active: rgba(0, 255, 65, 0.5);
  --text-primary: #00ff41;
  --text-secondary: #33cc55;
  --text-muted: #228b22;
  --accent-blue: #00ff41;
  --accent-purple: #39ff14;
  --gradient-primary: linear-gradient(135deg, #00c934, #00ff41);
  --gradient-bg: linear-gradient(135deg, #020c02 0%, #0a2a0a 50%, #020c02 100%);
  --shadow-glow: 0 0 40px rgba(0, 255, 65, 0.2);
}

/* RainBow - Multi-color vibrant */
[data-theme="rainbow"] {
  --bg-primary: #0f0a1a;
  --bg-secondary: #161025;
  --bg-card: rgba(22, 16, 37, 0.85);
  --bg-glass: rgba(168, 85, 247, 0.04);
  --bg-glass-hover: rgba(168, 85, 247, 0.08);
  --border-color: rgba(168, 85, 247, 0.1);
  --border-active: rgba(168, 85, 247, 0.5);
  --accent-blue: #a855f7;
  --accent-purple: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-green: #22c55e;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --gradient-primary: linear-gradient(135deg, #ec4899, #a855f7, #06b6d4);
  --gradient-bg: linear-gradient(135deg, #1a0520 0%, #0f0a2a 33%, #051a25 66%, #0f0a1a 100%);
  --shadow-glow: 0 0 40px rgba(168, 85, 247, 0.2);
}

/* SoundCloud - Warm orange */
[data-theme="soundcloud"] {
  --bg-primary: #1a0f05;
  --bg-secondary: #241508;
  --bg-card: rgba(36, 21, 8, 0.85);
  --bg-glass: rgba(249, 115, 22, 0.04);
  --bg-glass-hover: rgba(249, 115, 22, 0.08);
  --border-color: rgba(249, 115, 22, 0.1);
  --border-active: rgba(234, 88, 12, 0.5);
  --accent-blue: #f97316;
  --accent-purple: #fb923c;
  --gradient-primary: linear-gradient(135deg, #ea580c, #f97316);
  --gradient-bg: linear-gradient(135deg, #1a0f05 0%, #3d1e08 50%, #1a0f05 100%);
  --shadow-glow: 0 0 40px rgba(249, 115, 22, 0.15);
}

/* Amin - Deep purple to blue */
[data-theme="amin"] {
  --bg-primary: #0f0520;
  --bg-secondary: #150a2e;
  --bg-card: rgba(21, 10, 46, 0.85);
  --bg-glass: rgba(139, 92, 246, 0.04);
  --bg-glass-hover: rgba(139, 92, 246, 0.08);
  --border-color: rgba(139, 92, 246, 0.1);
  --border-active: rgba(124, 58, 237, 0.5);
  --accent-blue: #8b5cf6;
  --accent-purple: #7c3aed;
  --gradient-primary: linear-gradient(135deg, #7c3aed, #2563eb);
  --gradient-bg: linear-gradient(135deg, #0f0520 0%, #1e0a4a 50%, #0a1040 100%);
  --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.2);
}

/* Capital - Indigo & Pink */
[data-theme="capital"] {
  --bg-primary: #0E0E10;
  --bg-secondary: #121214;
  --bg-card: rgba(24, 24, 28, 0.85);
  --bg-glass: rgba(129, 140, 248, 0.04);
  --bg-glass-hover: rgba(129, 140, 248, 0.08);
  --border-color: rgba(39, 39, 42, 0.4);
  --border-active: rgba(129, 140, 248, 0.5);
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --accent-blue: #818CF8;
  --accent-purple: #F472B6;
  --gradient-primary: linear-gradient(135deg, #818CF8, #F472B6);
  --gradient-bg: linear-gradient(135deg, #0E0E10 0%, #18181C 50%, #0E0E10 100%);
  --shadow-glow: 0 0 40px rgba(129, 140, 248, 0.15);
}

/* Light - Clean white background */
[data-theme="light"] {
  color-scheme: light;

  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-glass: rgba(0, 0, 0, 0.03);
  --bg-glass-hover: rgba(0, 0, 0, 0.06);

  --border-color: #e2e8f0;
  --border-active: #6366f1;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.05);

  --gradient-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] #topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .date-btn:hover {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ===== AUTO ADS TAB ===== */
.auto-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.auto-status-dot.active {
  background: var(--accent-green);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
  50% { opacity: 0.6; box-shadow: 0 0 16px rgba(16, 185, 129, 0.4); }
}

.nav-badge {
  background: var(--accent-red);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

#auto-activity-log {
  line-height: 1.6;
}

/* ===== PREMIUM VIDEO DOWNLOADER UI ===== */
.video-downloader-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0 60px;
  animation: fadeIn 0.8s ease-out;
}

.downloader-header {
  text-align: center;
  margin-bottom: 40px;
}

.downloader-header h3 {
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(to right, #6366f1, #a855f7, #ec4899, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.badge-premium {
  display: inline-block;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 1.5px;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.downloader-card-glass {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--shadow-md), 0 0 20px rgba(99, 102, 241, 0.05);
  transition: all 0.4s ease;
}

.input-container-premium {
  position: relative;
  width: 100%;
}

.input-wrapper-glow {
  display: flex;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.input-wrapper-glow:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  background: var(--bg-color);
}

.input-main-icon {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--text-muted);
  transition: color 0.3s;
}

.input-wrapper-glow:focus-within .input-main-icon {
  color: var(--accent-blue);
}

.downloader-input-field {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 1.1rem;
  padding: 10px 0;
  outline: none;
}

.downloader-input-field::placeholder {
  color: var(--text-muted);
}

.btn-premium-glow {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0 32px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  margin-left: 6px;
}

.btn-premium-glow:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.btn-premium-glow:active {
  transform: scale(0.98);
}

/* Result Area */
.video-result-premium {
  margin-top: 40px;
  animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.video-detail-card {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  gap: 32px;
}

.thumb-holder {
  position: relative;
  width: 220px;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.thumb-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.thumb-holder:hover img {
  transform: scale(1.05);
}

.duration-tag {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  color: white;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.platform-badge-floating {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.info-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title-premium {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stats-row-premium {
  display: flex;
  gap: 24px;
  margin-bottom: 30px;
}

.stat-item-premium {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

.stat-item-premium i {
  color: var(--accent-blue);
  width: 18px;
}

.actions-row-premium {
  margin-top: auto;
  display: flex;
  gap: 16px;
}

.btn-download-premium {
  flex: 2;
  background: var(--gradient-secondary);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 16px 24px;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

.btn-download-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.3);
  filter: brightness(1.1);
}

.btn-copy-premium {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-copy-premium:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* States */
.downloader-status-message {
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  display: none;
  align-items: center;
  gap: 10px;
}

.downloader-status-message.error {
  display: flex;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.loading-dots:after {
  content: '.';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60% { content: '...'; }
  80%, 100% { content: ''; }
}

.loading-spinner-glow {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(99, 102, 241, 0.1);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.douyin-image-card {
  margin-top: 24px;
}

.douyin-image-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.douyin-image-header h4 {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.douyin-badge {
  background: linear-gradient(90deg, #06b6d4, #2563eb);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

.douyin-clear-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
}

.douyin-search-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: stretch;
}

.douyin-image-dropzone {
  min-height: 310px;
  border: 1px dashed rgba(99, 102, 241, 0.45);
  border-radius: 16px;
  background: rgba(99, 102, 241, 0.05);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.douyin-image-dropzone:hover,
.douyin-image-dropzone.dragging {
  border-color: #06b6d4;
  background: rgba(6, 182, 212, 0.08);
}

.douyin-image-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px;
}

.douyin-image-empty svg {
  width: 42px;
  height: 42px;
  color: #06b6d4;
}

.douyin-image-empty strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.douyin-image-empty span {
  font-size: 0.82rem;
}

.douyin-image-preview {
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}

.douyin-image-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.douyin-field label {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.douyin-token-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
}

.douyin-token-input:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12);
}

.douyin-search-btn {
  min-height: 48px;
  justify-content: center;
  margin-left: 0;
  width: fit-content;
}

.douyin-image-status {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.08);
  color: #93c5fd;
  font-size: 0.88rem;
  line-height: 1.45;
}

.douyin-image-status[data-type="success"] {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
  color: #86efac;
}

.douyin-image-status[data-type="warning"] {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #fcd34d;
}

.douyin-image-status[data-type="error"] {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.douyin-analysis {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.douyin-analysis-main {
  display: grid;
  gap: 14px;
}

.douyin-analysis-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.douyin-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.douyin-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.22);
  color: #7dd3fc;
  font-size: 0.82rem;
  font-weight: 700;
}

.douyin-chip-row.muted span {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.douyin-results-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.douyin-video-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.douyin-video-thumb {
  position: relative;
  aspect-ratio: 9 / 14;
  background: #0f172a;
  overflow: hidden;
}

.douyin-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.douyin-video-thumb span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: white;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.douyin-video-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}

.douyin-video-body h5 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 62px;
}

.douyin-video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.douyin-video-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.douyin-video-meta svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.douyin-video-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
}

.douyin-video-actions .btn-copy-premium,
.douyin-video-actions .btn-download-premium {
  min-height: 42px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 0.86rem;
}

.douyin-mini-download {
  box-shadow: none;
}

.douyin-empty-result {
  grid-column: 1 / -1;
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .douyin-search-grid {
    grid-template-columns: 1fr;
  }

  .douyin-results-grid {
    grid-template-columns: 1fr;
  }

  .douyin-image-dropzone,
  .douyin-image-preview {
    min-height: 260px;
  }
}

/* ===== LEADERBOARD ===== */
.leaderboard-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.leader-row:hover {
  background: var(--bg-glass-hover);
  border-color: var(--border-active);
  transform: translateX(8px);
}

.leader-row.top-1 {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
  border-color: rgba(234, 179, 8, 0.4);
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.1);
}

.leader-rank {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rank-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.top-1 .rank-num {
  color: #eab308;
}

.rank-crown {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  width: 24px;
  height: 24px;
  color: #eab308;
  filter: drop-shadow(0 0 5px rgba(234, 179, 8, 0.5));
}

.leader-info {
  flex: 1;
  min-width: 0;
}

.leader-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.leader-metrics {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.leader-metrics span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leader-metrics svg {
  width: 14px;
  height: 14px;
}

.leader-progress-bar {
  width: 200px;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 10px;
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.top-1 .progress-fill {
  background: linear-gradient(90deg, #eab308, #f59e0b);
}

/* ===== AUTO ADS SUB-TABS ===== */
.auto-mode-btn {
  transition: all var(--transition-base) !important;
}
.auto-mode-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
}
.auto-mode-btn.active[data-mode="test"] {
  color: #3b82f6 !important;
}
.auto-mode-btn.active[data-mode="conversion"] {
  color: #eab308 !important;
}

/* ===== KANBAN BOARD (TRELLO-LIKE) ===== */
:root {
  --kanban-col-bg: rgba(17, 24, 39, 0.45);
  --kanban-card-bg: var(--bg-card);
  --kanban-card-text: var(--text-primary);
  --kanban-col-border: var(--border-color);
}

[data-theme="light"] {
  --kanban-col-bg: rgba(15, 23, 42, 0.05) !important;
  --kanban-card-bg: #ffffff !important;
  --kanban-card-text: #0f172a !important;
  --kanban-col-border: #cbd5e1 !important;
}

.kanban-board {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 4px 20px;
  align-items: flex-start;
  min-height: calc(100vh - 240px);
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.kanban-board::-webkit-scrollbar {
  height: 8px;
}
.kanban-board::-webkit-scrollbar-track {
  background: transparent;
}
.kanban-board::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.kanban-column {
  flex: 1;
  min-width: 290px;
  max-width: 330px;
  background: var(--kanban-col-bg);
  border: 1px solid var(--kanban-col-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 240px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.kanban-column:focus-within {
  border-color: rgba(129, 140, 248, 0.25);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.05);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.column-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.column-title {
  font-weight: 700;
  font-size: 1.1rem; /* Cỡ chữ to hơn */
  color: var(--text-primary);
  letter-spacing: 0.3px;
}

.column-count {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-secondary);
}

.kanban-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  padding: 4px;
  min-height: 150px;
  transition: background-color var(--transition-fast), border var(--transition-fast);
  scrollbar-width: none; /* Hide scrollbar for cards container inside columns */
}

.kanban-cards-container::-webkit-scrollbar {
  display: none;
}

/* Drag and Drop Visual Feedback */
.kanban-cards-container.drag-over {
  background: rgba(129, 140, 248, 0.06);
  border: 2px dashed rgba(129, 140, 248, 0.35);
  border-radius: var(--radius-md);
}

.kanban-card {
  background: var(--kanban-card-bg);
  border: 1px solid var(--kanban-col-border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: grab;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.2s, box-shadow 0.2s;
  position: relative;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.kanban-card:hover {
  transform: translateY(-2px);
  border-color: rgba(129, 140, 248, 0.45);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 10px rgba(129, 140, 248, 0.08);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: 0.35;
  transform: scale(0.96) rotate(1deg);
  border: 2px dashed var(--accent-blue);
  box-shadow: none;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.card-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(129, 140, 248, 0.12);
  color: #818cf8;
  border: 1px solid rgba(129, 140, 248, 0.2);
  text-transform: uppercase;
}

.card-title {
  font-size: 1.05rem; /* Cỡ chữ to hơn */
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
  word-break: break-word;
}

.card-desc {
  font-size: 0.9rem; /* Cỡ chữ to hơn */
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* Checklist progress inside card */
.card-checklist-progress {
  margin-bottom: 10px;
}

.card-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
  display: flex;
}

.card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.card-checklist-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-weight: 600;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 10px;
  margin-top: 10px;
}

.card-priority {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem; /* Cỡ chữ to hơn */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-priority.priority-low { color: #10b981; }
.card-priority.priority-medium { color: #f59e0b; }
.card-priority.priority-high { color: #ef4444; }

.card-due {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem; /* Cỡ chữ to hơn */
}
.card-due.overdue {
  color: #ef4444;
  font-weight: 600;
}

.card-assignee {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem; /* Cỡ chữ to hơn */
  font-weight: 600;
  color: var(--text-secondary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-assignee svg {
  width: 13px;
  height: 13px;
  color: #818cf8;
}

.btn-add-card-quick {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 10px;
}

.btn-add-card-quick:hover {
  background: var(--bg-glass-hover);
  border-color: rgba(129, 140, 248, 0.35);
  color: var(--text-primary);
}

.btn-add-card-quick svg {
  width: 14px;
  height: 14px;
}

/* Checklist Creator in Modal */
.checklist-item-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  box-sizing: border-box;
}

.checklist-item-wrap input[type="checkbox"] {
  accent-color: #10b981;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checklist-item-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
}

.btn-delete-checklist {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.btn-delete-checklist:hover {
  color: #ef4444;
}

.btn-delete-checklist svg {
  width: 14px;
  height: 14px;
}

/* Inline checklist direct ticking on card */
.card-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 14px 0;
  padding: 10px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.card-checklist-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem; /* Cỡ chữ to hơn */
  color: var(--text-secondary);
  user-select: none;
  transition: color 0.15s ease;
}

.card-checklist-item-label:hover {
  color: var(--text-primary);
}

.card-checklist-item-checkbox {
  width: 15px;
  height: 15px;
  accent-color: #10b981;
  cursor: pointer;
}

.checklist-item-text.completed {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ===== ADVANCED UI/UX OPTIMIZATIONS ===== */

/* 1. Ambient Background Glows */
.ambient-glow {
  position: fixed;
  width: 45vmax;
  height: 45vmax;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  transition: background 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, background;
}

.glow-1 {
  background: var(--accent-blue);
  top: -15%;
  left: -10%;
  animation: float-glow-1 30s ease-in-out infinite alternate;
}

.glow-2 {
  background: var(--accent-purple);
  bottom: -15%;
  right: -10%;
  animation: float-glow-2 35s ease-in-out infinite alternate;
}

.glow-3 {
  background: var(--accent-cyan);
  top: 40%;
  left: 50%;
  width: 35vmax;
  height: 35vmax;
  opacity: 0.05;
  animation: float-glow-3 40s ease-in-out infinite alternate;
}

/* Hiệu ứng trôi nổi cho Ambient Glow */
@keyframes float-glow-1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.15); }
  100% { transform: translate(4vw, -4vh) scale(0.9); }
}

@keyframes float-glow-2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, -8vh) scale(0.9); }
  100% { transform: translate(-2vw, 4vh) scale(1.1); }
}

@keyframes float-glow-3 {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-40%, -45%) scale(1.2); }
  100% { transform: translate(-55%, -55%) scale(0.85); }
}

/* 2. Glassmorphism backdrop-filter enhancements */
#sidebar, 
#topbar, 
.kpi-card, 
.section-card, 
.chart-card, 
.modal-content,
.login-card {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* 3. Custom Scrollbar Styling (Theo màu accent từng theme) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-active);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* 4. Tab transition animation */
.tab-content.active {
  animation: tabFadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabFadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Sidebar Nav Hover & Active slide effects */
.nav-item:not(.has-submenu),
.nav-item-header,
.submenu-item {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, color 0.25s ease !important;
  position: relative;
}

.nav-item:not(.has-submenu):hover,
.nav-item-header:hover,
.submenu-item:hover {
  transform: translateX(6px);
  color: var(--text-primary) !important;
}

/* Chỉ chỉ báo hoạt động cho mục đơn hoặc tiêu đề submenu hoạt động */
.nav-item:not(.has-submenu)::before,
.nav-item-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 4px;
  height: 50%;
  background: var(--accent-blue);
  border-radius: 0 4px 4px 0;
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item.active:not(.has-submenu)::before,
.nav-item.active .nav-item-header::before {
  transform: translateY(-50%) scaleX(1);
}

/* ===== PERMISSIONS TAB SCROLL FIX =====
   body has overflow-x: hidden which blocks sub-container scroll.
   This override allows horizontal scrolling specifically for the permissions table.
*/
#tab-user-permissions {
  overflow-x: auto;
}

/* Make body scrollable when permissions tab is active */
body.perm-tab-active {
  overflow-x: auto;
}

/* Scrollbar cho bảng phân quyền */
#tab-user-permissions [style*="overflow-x: auto"]::-webkit-scrollbar {
  height: 10px;
}
#tab-user-permissions [style*="overflow-x: auto"]::-webkit-scrollbar-track {
  background: rgba(99, 102, 241, 0.08);
  border-radius: 10px;
  margin: 0 4px;
}
#tab-user-permissions [style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.5);
}
#tab-user-permissions [style*="overflow-x: auto"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #818cf8, #c084fc);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
}

/* ===== RESPONSIVE POLISH ===== */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }

  .tab-content {
    padding: 18px;
  }

  .section-card,
  .chart-card,
  .kpi-card,
  .card {
    border-radius: 12px;
  }

  .charts-row {
    grid-template-columns: 1fr;
  }

  .kpi-grid,
  .accounts-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .section-header {
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .leader-progress-bar {
    width: 140px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 13px;
  }

  body {
    overflow-x: hidden;
  }

  #main-screen.active {
    display: block;
  }

  #sidebar {
    width: min(82vw, 320px);
    transform: translateX(-105%);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
  }

  #sidebar.open {
    transform: translateX(0);
  }

  #sidebar.collapsed {
    transform: translateX(-105%);
  }

  #content,
  #sidebar.collapsed + #content {
    margin-left: 0 !important;
    min-width: 0;
    overflow-x: hidden;
  }

  #topbar {
    height: auto;
    min-height: 58px;
    padding: 10px 14px;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }

  .topbar-left {
    width: 100%;
    min-width: 0;
  }

  .topbar-left h2 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-right {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .date-selector {
    width: max-content;
    max-width: none;
    overflow-x: visible;
  }

  .date-input {
    width: 112px;
    min-width: 112px;
  }

  .tab-content {
    padding: 14px;
  }

  .section-card,
  .chart-card,
  .card {
    padding: 16px !important;
    margin: 14px 0 !important;
  }

  .kpi-grid,
  .accounts-grid,
  .pos-metrics-details,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  [style*="display:grid"],
  [style*="display: grid"] {
    gap: 12px !important;
  }

  [style*="display:flex"],
  [style*="display: flex"] {
    max-width: 100%;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .btn-primary,
  .btn-ghost,
  .btn-secondary,
  .btn-premium-glow {
    min-height: 40px;
  }

  .table-container,
  .progress-table-wrapper,
  #campaigns-table-container,
  #auto-preview-table,
  #tab-user-permissions {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .sleek-table {
    min-width: 720px;
  }

  .leader-row {
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }

  .leader-row:hover {
    transform: none;
  }

  .leader-rank {
    width: 32px;
    height: 32px;
  }

  .leader-metrics {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .leader-progress-bar {
    display: none;
  }

  .kanban-board {
    gap: 12px;
    min-height: auto;
    padding-bottom: 14px;
  }

  .kanban-column {
    min-width: min(82vw, 320px);
    max-height: none;
  }

  .video-detail-card,
  .downloader-card-glass,
  .stats-row-premium,
  .actions-row-premium {
    flex-direction: column !important;
  }

  .thumb-holder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 520px) {
  .login-container {
    padding: 14px;
  }

  .login-card {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .sidebar-brand {
    padding: 16px;
  }

  .nav-list {
    padding: 8px;
  }

  .sidebar-footer {
    padding: 12px;
  }

  .tab-content {
    padding: 10px;
  }

  .section-card,
  .chart-card,
  .card {
    padding: 14px !important;
  }

  .kpi-card {
    padding: 14px;
    gap: 12px;
  }

  .kpi-icon {
    width: 38px;
    height: 38px;
  }

  .kpi-value {
    font-size: 1.2rem;
  }

  .leader-row {
    border-radius: 12px;
  }

  .leader-name {
    font-size: 1rem;
  }

  .leader-metrics {
    font-size: 0.82rem;
  }

  .date-btn {
    padding: 7px 10px;
  }

  .date-selector {
    border-radius: 10px;
  }
}

/* ===== PREMIUM SAAS DESIGN SYSTEM (WHITE / ORANGE) =====
   UI-layer refactor for the existing vanilla app. Component mapping:
   AppSidebar: #sidebar
   DashboardHeader: #topbar
   FilterBar: .date-selector, .pos-date-presets
   HeroStatCard / StatCard: .kpi-card
   DataTable: .sleek-table, table
   SectionContainer: .section-card, .chart-card, .card
*/
:root,
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fff7ed;
  --bg-glass: #f8fafc;
  --bg-glass-hover: #fff7ed;
  --bg-color: #f8fafc;
  --bg-hover: #f8fafc;
  --card-hover: #fff7ed;

  --border-color: #e7e5e4;
  --border-active: rgba(249, 115, 22, 0.34);

  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #8a8f98;
  --text-color: #111827;

  --accent-blue: #f97316;
  --accent-purple: #fb923c;
  --accent-cyan: #ea580c;
  --accent-green: #059669;
  --accent-amber: #f97316;
  --accent-red: #dc2626;
  --accent-pink: #f97316;
  --primary-color: #f97316;

  --gradient-primary: linear-gradient(180deg, #fb923c, #f97316);
  --gradient-secondary: linear-gradient(180deg, #fb923c, #ea580c);
  --gradient-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 10px 24px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 20px 60px rgba(249, 115, 22, 0.08);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
}

body {
  background: #f8fafc !important;
  color: var(--text-primary);
}

.ambient-glow,
.login-glow {
  display: none;
}

/* AppSidebar */
#sidebar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid #ececec !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
}

.sidebar-brand {
  min-height: 68px;
  padding: 20px 18px;
  border-bottom: 1px solid #f1f2f4;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #f97316 !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18);
}

.brand-text {
  color: #111827;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.nav-list {
  padding: 16px 12px;
}

.nav-group-header {
  padding: 18px 12px 8px;
  color: #9ca3af;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.nav-item,
.nav-item-header {
  border-radius: 9px;
  color: #586174;
  font-size: 0.88rem;
  font-weight: 560;
}

.nav-item {
  padding: 10px 12px;
  margin: 3px 0;
}

.nav-item-header {
  padding: 10px 12px;
}

.nav-item svg,
.nav-item-header svg,
.submenu-item svg {
  color: #6b7280;
  stroke-width: 1.8;
}

.nav-item:hover,
.nav-item-header:hover,
.submenu-item:hover {
  background: #fff7ed !important;
  color: #111827 !important;
  transform: none !important;
}

.nav-item.active {
  background: #fff7ed !important;
  color: #ea580c !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.10);
}

.nav-item.active svg,
.nav-item.active .nav-item-header svg {
  color: #f97316;
}

.nav-item:not(.has-submenu)::before,
.nav-item-header::before {
  width: 3px;
  height: 44%;
  background: #f97316;
  border-radius: 999px;
}

.submenu {
  padding: 2px 8px 8px 38px;
}

.submenu-item {
  color: #6b7280;
  border-radius: 8px;
}

.submenu-item.active {
  background: #fff7ed;
  color: #ea580c;
}

.sidebar-footer {
  border-top: 1px solid #f1f2f4;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), #ffffff);
}

.user-info {
  color: #4b5563;
}

/* DashboardHeader */
#topbar {
  height: 68px;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid #ececec !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.topbar-left h2 {
  font-size: 1.16rem;
  font-weight: 760;
  letter-spacing: -0.025em;
  color: #111827;
}

.btn-icon {
  color: #6b7280;
  border-radius: 8px;
}

.btn-icon:hover {
  background: #f5f5f4;
  color: #111827;
}

/* FilterBar */
.date-selector,
.pos-date-presets,
.pos-time-filters,
.view-selector-group {
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: var(--shadow-sm);
}

.date-btn,
.pos-btn,
.view-btn,
.auto-mode-btn {
  border: 0 !important;
  border-radius: 8px !important;
  color: #586174 !important;
  background: transparent !important;
  font-weight: 560 !important;
  letter-spacing: -0.005em;
}

.date-btn:hover,
.pos-btn:hover,
.view-btn:hover,
.auto-mode-btn:hover:not(.active) {
  background: #f8fafc !important;
  color: #111827 !important;
}

.date-btn.active,
.pos-btn.active,
.view-btn.active,
.auto-mode-btn.active {
  background: #fff7ed !important;
  color: #ea580c !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.10) !important;
}

.date-separator {
  background: #ececec;
}

.date-input,
.pos-select,
.form-group input,
.form-group select,
.form-group textarea,
textarea,
input,
select {
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  color: #111827 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

.date-input:focus,
.pos-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
textarea:focus,
input:focus,
select:focus {
  border-color: rgba(249, 115, 22, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.10) !important;
  outline: none !important;
}

/* SectionContainer */
.section-card,
.chart-card,
.card,
.downloader-card-glass,
.result-card-creative,
.lp-result-card {
  background: #ffffff !important;
  border: 1px solid rgba(231, 229, 228, 0.78) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 14px 36px rgba(15, 23, 42, 0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.section-card {
  padding: 22px;
  margin: 18px 0;
}

.section-header {
  margin-bottom: 18px;
}

.section-card h3,
.chart-card h3,
.section-card h4 {
  color: #111827;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.section-card h3 svg,
.chart-card h3 svg {
  color: #f97316;
}

/* Buttons */
.btn-primary,
.btn-premium-glow {
  background: #f97316 !important;
  border: 1px solid #f97316 !important;
  color: #ffffff !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18) !important;
  font-weight: 650 !important;
}

.btn-primary:hover,
.btn-premium-glow:hover {
  background: #ea580c !important;
  border-color: #ea580c !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.22) !important;
}

.btn-ghost,
.btn-secondary {
  background: #ffffff !important;
  color: #4b5563 !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 9px !important;
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover,
.btn-secondary:hover {
  background: #fff7ed !important;
  border-color: rgba(249, 115, 22, 0.28) !important;
  color: #ea580c !important;
}

/* KPI HeroStatCard / StatCard */
.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.kpi-card {
  background: #ffffff !important;
  border: 1px solid rgba(231, 229, 228, 0.75) !important;
  border-left: 1px solid rgba(231, 229, 228, 0.75) !important;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
  gap: 13px;
}

.kpi-card:hover {
  transform: translateY(-1px);
  border-color: rgba(249, 115, 22, 0.22) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.kpi-card:nth-child(11) {
  grid-column: span 2;
  padding: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  border-color: rgba(249, 115, 22, 0.22) !important;
  box-shadow: 0 18px 48px rgba(249, 115, 22, 0.10);
}

.kpi-card:nth-child(11) .kpi-value {
  font-size: 2rem;
  color: #111827 !important;
}

.kpi-card:nth-child(9),
.kpi-card:nth-child(12) {
  background: #fffaf5 !important;
}

.kpi-icon,
.kpi-card [class*="kpi-icon"] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff7ed !important;
  color: #f97316 !important;
}

.kpi-label {
  color: #858b96;
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  font-weight: 720;
}

.kpi-value {
  color: #111827 !important;
  font-size: 1.32rem;
  font-weight: 780;
  letter-spacing: -0.035em;
}

.kpi-sub-value {
  color: #8a8f98 !important;
}

.green-text {
  color: #111827 !important;
}

/* Account selector */
.account-chip {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.account-chip:hover {
  background: #fffaf5;
  border-color: rgba(249, 115, 22, 0.22);
  transform: translateY(-1px);
}

.account-chip.selected {
  background: #fff7ed;
  border-color: #fb923c;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.08);
}

.account-chip .account-name {
  color: #111827;
  font-weight: 650;
}

.account-chip .account-id {
  color: #8a8f98;
}

/* DataTable */
.table-container {
  border-radius: 12px;
}

table,
.sleek-table {
  background: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  background: #fafafa;
  color: #7b8190;
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #ececec;
  padding: 13px 16px;
}

tbody td {
  color: #4b5563;
  border-bottom: 1px solid #f1f2f4;
  padding: 15px 16px;
}

tbody tr:hover {
  background: #fffaf5;
}

.total-row {
  background: #fff7ed !important;
  color: #111827 !important;
}

.status-badge {
  border-radius: 999px;
  padding: 4px 9px;
  font-weight: 680;
}

.status-active,
.status-confirmed,
.status-delivered {
  background: #ecfdf5;
  color: #047857;
}

.status-paused,
.status-shipping {
  background: #fff7ed;
  color: #ea580c;
}

.status-deleted,
.status-cancelled,
.status-returned {
  background: #fef2f2;
  color: #dc2626;
}

/* Leaderboard */
.leader-row {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.leader-row.top-1 {
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
  border-color: rgba(249, 115, 22, 0.28);
  box-shadow: 0 16px 34px rgba(249, 115, 22, 0.08);
}

.leader-row:hover {
  transform: translateY(-1px);
  background: #fffaf5;
}

.leader-name {
  color: #111827;
  letter-spacing: -0.02em;
}

.leader-metrics {
  color: #6b7280;
}

.progress-fill,
.top-1 .progress-fill {
  background: #f97316;
}

/* Responsive refinements for premium system */
@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kpi-card:nth-child(11) {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  #topbar {
    padding: 10px 14px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .kpi-card {
    padding: 14px;
  }

  .kpi-card:nth-child(11) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .kpi-card:nth-child(11) .kpi-value {
    font-size: 1.55rem;
  }
}

/* ===== UI CORRECTIONS: EVEN RHYTHM / READABILITY ===== */
html {
  font-size: 15px;
}

#content {
  background: #f8fafc;
}

.tab-content {
  padding: 24px 28px;
}

#topbar {
  min-height: 70px;
}

.topbar-left h2 {
  font-size: 1.22rem;
}

.date-selector {
  gap: 4px;
}

.date-btn {
  min-height: 34px;
  padding: 8px 14px !important;
  font-size: 0.86rem !important;
}

.date-input {
  width: 138px !important;
  min-width: 138px;
  height: 36px;
  padding: 7px 10px !important;
  font-size: 0.88rem !important;
}

.date-range-label {
  padding: 0 2px;
  font-size: 0.95rem;
}

select,
.pos-select,
.form-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.kpi-card,
.kpi-card:nth-child(9),
.kpi-card:nth-child(11),
.kpi-card:nth-child(12) {
  grid-column: span 1 !important;
  min-height: 104px;
  padding: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(231, 229, 228, 0.75) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.kpi-card:nth-child(11) .kpi-value {
  font-size: 1.42rem !important;
}

.kpi-label {
  font-size: 0.78rem;
}

.kpi-value {
  font-size: 1.42rem !important;
  line-height: 1.15;
}

.kpi-sub-value {
  font-size: 0.82rem !important;
}

.account-chip {
  min-height: 64px;
}

.account-chip .account-name {
  font-size: 0.92rem;
}

.account-chip .account-id {
  font-size: 0.76rem;
}

tbody td {
  font-size: 0.92rem;
}

thead th {
  font-size: 0.74rem;
}

@media (max-width: 1280px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .tab-content {
    padding: 14px;
  }

  .date-selector {
    min-width: max-content;
  }

  .date-input {
    width: 128px !important;
    min-width: 128px;
  }
}

@media (max-width: 520px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Compact KPI layout: 12 metrics in 2 balanced desktop rows */
.kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.kpi-card,
.kpi-card:nth-child(9),
.kpi-card:nth-child(11),
.kpi-card:nth-child(12) {
  min-height: 86px !important;
  padding: 14px 16px !important;
  gap: 10px !important;
  align-items: center;
}

.kpi-icon,
.kpi-card [class*="kpi-icon"] {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
}

.kpi-icon svg,
.kpi-card [class*="kpi-icon"] svg {
  width: 18px !important;
  height: 18px !important;
}

.kpi-label {
  font-size: 0.72rem !important;
  line-height: 1.15;
}

.kpi-value,
.kpi-card:nth-child(11) .kpi-value {
  font-size: 1.22rem !important;
  line-height: 1.12;
}

.kpi-sub-value {
  font-size: 0.72rem !important;
}

@media (max-width: 1500px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Premium orange date picker */
.flatpickr-calendar {
  border: 1px solid #fed7aa !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14), 0 8px 18px rgba(249, 115, 22, 0.08) !important;
  font-family: var(--font) !important;
  overflow: hidden !important;
}

.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays {
  background: #ffffff !important;
}

.flatpickr-current-month {
  color: #111827 !important;
  font-weight: 700 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #111827 !important;
  font-weight: 650 !important;
  border-radius: 8px !important;
}

.flatpickr-weekday {
  color: #111827 !important;
  font-weight: 700 !important;
}

.flatpickr-day {
  border-radius: 999px !important;
  color: #4b5563 !important;
  font-weight: 500 !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #ea580c !important;
}

.flatpickr-day.today {
  border-color: #f97316 !important;
  color: #ea580c !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(249, 115, 22, 0.24) !important;
}

.flatpickr-day.inRange {
  background: #ffedd5 !important;
  border-color: #ffedd5 !important;
  box-shadow: -5px 0 0 #ffedd5, 5px 0 0 #ffedd5 !important;
  color: #9a3412 !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cbd5e1 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #6b7280 !important;
  fill: #6b7280 !important;
  border-radius: 8px !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: #fff7ed !important;
  color: #f97316 !important;
  fill: #f97316 !important;
}

/* Sidebar interaction polish */
#sidebar .nav-item,
#sidebar .nav-item-header,
#sidebar .submenu-item {
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease !important;
}

#sidebar .nav-item:not(.has-submenu):hover,
#sidebar .nav-item.has-submenu:hover .nav-item-header,
#sidebar .submenu-item:hover {
  background: #fff7ed !important;
  color: #ea580c !important;
  transform: translateX(4px) !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12), 0 6px 14px rgba(249, 115, 22, 0.06);
}

#sidebar .nav-item:not(.has-submenu):hover svg,
#sidebar .nav-item.has-submenu:hover .nav-item-header svg,
#sidebar .submenu-item:hover svg {
  color: #f97316 !important;
  stroke-width: 2.1;
}

#sidebar .nav-item:not(.has-submenu)::after,
#sidebar .nav-item-header::after,
#sidebar .submenu-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.10), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#sidebar .nav-item:not(.has-submenu):hover::after,
#sidebar .nav-item.has-submenu:hover .nav-item-header::after,
#sidebar .submenu-item:hover::after {
  opacity: 1;
}

#sidebar .nav-item.active:hover,
#sidebar .submenu-item.active:hover {
  transform: translateX(2px) !important;
}

/* ===== UI BUGFIX PASS: inputs, segmented tabs, account panes ===== */
input.pos-select,
textarea.pos-select,
input.date-input,
input[type="date"],
input[type="number"],
input[type="text"] {
  background-image: none !important;
  padding-right: 12px !important;
  cursor: text !important;
}

select.pos-select,
select {
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
}

input[type="date"].pos-select,
input[type="date"].date-input {
  min-width: 138px;
  color-scheme: light;
}

.view-selector-group,
[style*="border-radius:8px"][style*="overflow:hidden"],
#tab-auto-ads > div[style*="width:fit-content"] {
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 12px !important;
  padding: 4px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.view-btn,
.win-subtab-btn,
.auto-mode-btn,
.pos-btn {
  min-height: 34px;
  color: #586174 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.view-btn.active,
.win-subtab-btn.active,
.auto-mode-btn.active,
.pos-btn.active {
  color: #ea580c !important;
  background: #fff7ed !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12) !important;
}

.view-btn.active svg,
.win-subtab-btn.active svg,
.auto-mode-btn.active svg,
.pos-btn.active svg {
  color: #f97316 !important;
}

#pi-accounts-list {
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 12px !important;
  padding: 8px !important;
  max-height: 152px !important;
  overflow-y: auto !important;
  gap: 10px !important;
  align-content: start;
}

#pi-accounts-list .account-chip {
  min-height: 56px;
  padding: 11px 12px !important;
}

#tab-cash-flow .card > div:last-child {
  gap: 12px !important;
  align-items: flex-end !important;
}

#tab-cash-flow .form-group {
  min-width: 150px;
}

#tab-cash-flow .stat-box {
  min-width: 132px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#tab-care-sale .section-card .form-group select,
#tab-care-sale .section-card .form-group input,
#tab-care-sale .section-card textarea {
  width: 100%;
}

#care-filter-name-input {
  min-width: 260px;
}

@media (max-width: 900px) {
  #tab-cash-flow .card > div:last-child,
  #tab-product-win .card > div:last-child,
  #tab-care-sale .section-card [style*="display: flex"] {
    width: 100%;
  }

  #tab-cash-flow .form-group,
  #tab-cash-flow .form-group input,
  #care-filter-name-input {
    min-width: 0;
    width: 100% !important;
  }
}

/* ===== CASH FLOW LAYOUT FIX ===== */
#tab-cash-flow > .card:first-child {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 18px !important;
  padding: 22px !important;
}

#tab-cash-flow > .card:first-child > div:first-child {
  min-width: 0 !important;
}

#tab-cash-flow > .card:first-child > div:last-child {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 14px !important;
}

#tab-cash-flow .form-group {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 7px !important;
}

#tab-cash-flow .form-group label,
#tab-cash-flow .stat-box > div:first-child {
  color: #6b7280 !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

#tab-cash-flow .form-group input {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 9px 12px !important;
  background: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: initial !important;
  background-size: auto !important;
  color: #111827 !important;
  cursor: text !important;
  appearance: textfield !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

#tab-cash-flow input[type="number"]::-webkit-outer-spin-button,
#tab-cash-flow input[type="number"]::-webkit-inner-spin-button {
  margin: 0 !important;
  -webkit-appearance: none !important;
}

#tab-cash-flow .form-group:nth-child(3) {
  grid-column: span 2;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px !important;
  align-items: end !important;
  gap: 10px !important;
}

#tab-cash-flow .form-group:nth-child(3) > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
}

#tab-cash-flow #btn-cash-flow-add-expense {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
}

#tab-cash-flow .stat-box {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(231, 229, 228, 0.78) !important;
  background: #f8fafc !important;
}

#tab-cash-flow .stat-box > div:last-child {
  font-size: 1.1rem !important;
  line-height: 1.25 !important;
}

#tab-cash-flow #btn-load-cash-flow {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border-radius: 10px !important;
}

@media (max-width: 1500px) {
  #tab-cash-flow > .card:first-child > div:last-child {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #tab-cash-flow .form-group:nth-child(3) {
    grid-column: span 2;
  }
}

@media (max-width: 980px) {
  #tab-cash-flow > .card:first-child {
    padding: 18px !important;
  }

  #tab-cash-flow > .card:first-child > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #tab-cash-flow .form-group:nth-child(3),
  #tab-cash-flow #btn-load-cash-flow {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  #tab-cash-flow > .card:first-child > div:last-child,
  #tab-cash-flow .form-group:nth-child(3) {
    grid-template-columns: 1fr !important;
  }

  #tab-cash-flow .form-group:nth-child(3),
  #tab-cash-flow #btn-load-cash-flow {
    grid-column: span 1;
  }

  #tab-cash-flow #btn-cash-flow-add-expense {
    width: 100% !important;
  }
}

/* ===== PRODUCT WIN LAYOUT FIX ===== */
#tab-product-win > .view-selector-group {
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow-x: auto !important;
}

#tab-product-win .win-subtab-btn {
  min-width: 142px !important;
  min-height: 38px !important;
  justify-content: center !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#tab-product-win .win-subtab-btn.active {
  color: #ea580c !important;
  background: #fff7ed !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.14) !important;
}

#tab-product-win .win-subtab-btn.active svg {
  color: #f97316 !important;
  stroke: #f97316 !important;
}

#tab-product-win .win-subview[data-view="search"] > .card:first-child {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.9fr) minmax(680px, 1.4fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 18px !important;
  padding: 22px !important;
}

#tab-product-win .win-subview[data-view="search"] > .card:first-child > div:first-child {
  min-width: 0 !important;
}

#tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.25fr) minmax(150px, 0.85fr) minmax(220px, 1fr) 68px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 12px !important;
}

#tab-product-win #win-account-select,
#tab-product-win #win-date-select,
#tab-product-win #win-search-input {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 42px !important;
  font-size: 0.92rem !important;
}

#tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child > div {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#tab-product-win #win-search-input {
  padding-left: 38px !important;
  padding-right: 12px !important;
  background-image: none !important;
}

#tab-product-win #btn-win-refresh {
  width: 68px !important;
  min-width: 68px !important;
  height: 44px !important;
  justify-content: center !important;
  border-radius: 10px !important;
  padding: 0 !important;
}

@media (max-width: 1280px) {
  #tab-product-win .win-subview[data-view="search"] > .card:first-child {
    grid-template-columns: 1fr !important;
  }

  #tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child {
    grid-template-columns: minmax(220px, 1.2fr) minmax(150px, 0.8fr) minmax(220px, 1fr) 68px !important;
  }
}

@media (max-width: 820px) {
  #tab-product-win > .view-selector-group {
    width: 100% !important;
  }

  #tab-product-win .win-subtab-btn {
    flex: 1 0 auto !important;
    min-width: 132px !important;
  }

  #tab-product-win .win-subview[data-view="search"] > .card:first-child {
    padding: 18px !important;
  }

  #tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child > div,
  #tab-product-win #btn-win-refresh {
    grid-column: span 2;
  }

  #tab-product-win #btn-win-refresh {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  #tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child {
    grid-template-columns: 1fr !important;
  }

  #tab-product-win .win-subview[data-view="search"] > .card:first-child > div:last-child > div,
  #tab-product-win #btn-win-refresh {
    grid-column: auto;
  }
}

/* ===== FORM CONTROL ARROW FIX =====
   Keep dropdown chevrons only on real select elements. Many text fields reuse
   .pos-select for sizing, so reset their inherited select background here. */
input.pos-select,
textarea.pos-select,
input.downloader-input-field,
textarea.downloader-input-field,
.form-group input.pos-select,
.form-group textarea.pos-select,
#tab-content-1688 input.pos-select,
#tab-content-1688 textarea.pos-select,
#tab-ladipage-edit input.pos-select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: initial !important;
  background-size: auto !important;
  padding-right: 12px !important;
  cursor: text !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

textarea.pos-select,
textarea.downloader-input-field,
#tab-content-1688 textarea.pos-select {
  min-height: 44px;
  line-height: 1.45 !important;
  resize: vertical;
}

select.pos-select,
.form-group select.pos-select,
#tab-content-1688 select.pos-select,
#tab-ladipage-edit select.pos-select {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#tab-content-1688 input.pos-select,
#tab-content-1688 select.pos-select,
#tab-content-1688 textarea.pos-select,
#tab-ladipage-edit input.pos-select {
  min-height: 42px !important;
  border-color: #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
}

#tab-content-1688 input.pos-select:focus,
#tab-content-1688 select.pos-select:focus,
#tab-content-1688 textarea.pos-select:focus,
#tab-ladipage-edit input.pos-select:focus {
  border-color: rgba(249, 115, 22, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12) !important;
}

/* ===== KANBAN VIEW TABS FIX ===== */
#tab-kanban .view-selector-group {
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  overflow-x: auto !important;
}

#tab-kanban .view-btn {
  min-height: 38px !important;
  min-width: 132px !important;
  justify-content: center !important;
  color: #4b5563 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#tab-kanban .view-btn svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

#tab-kanban .view-btn:hover {
  color: #ea580c !important;
  background: #fff7ed !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.10) !important;
}

#tab-kanban .view-btn.active,
#tab-kanban .view-btn.active:hover {
  color: #ea580c !important;
  background: #fff7ed !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.16), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#tab-kanban .view-btn.active svg {
  color: #f97316 !important;
  stroke: #f97316 !important;
}

@media (max-width: 640px) {
  #tab-kanban .view-selector-group {
    width: 100% !important;
  }

#tab-kanban .view-btn {
    flex: 1 0 auto !important;
    min-width: 124px !important;
  }
}

/* ===== CARE SALE INPUT ARROW FIX ===== */
#tab-care-sale #care-filter-name-input,
#tab-care-sale #care-sheet-url,
#tab-care-sale #care-sheet-names,
#tab-care-sale input[type="text"],
#tab-care-sale textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: initial !important;
  background-size: auto !important;
  padding-right: 12px !important;
  cursor: text !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#tab-care-sale #care-saved-filter-select {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

/* ===== SPENDING STATS DATE INPUT FIX ===== */
#tab-spending-stats #spending-date-from,
#tab-spending-stats #spending-date-to,
#tab-spending-stats input[type="date"] {
  width: 192px !important;
  min-width: 168px !important;
  height: 42px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: initial !important;
  background-size: auto !important;
  padding: 9px 12px !important;
  color: #111827 !important;
  color-scheme: light !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#tab-spending-stats input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 6px;
  opacity: 0.62;
  cursor: pointer;
}

#tab-spending-stats input[type="date"]:focus {
  border-color: rgba(249, 115, 22, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12) !important;
}

@media (max-width: 720px) {
  #tab-spending-stats #spending-date-from,
  #tab-spending-stats #spending-date-to {
    width: 100% !important;
  }
}

/* ===== GLOBAL POS-SELECT NORMALIZATION =====
   Final override: .pos-select is used by legacy markup on inputs, textareas
   and selects. Apply chevrons only to select elements, never text fields. */
:root input.pos-select,
:root textarea.pos-select,
[data-theme] input.pos-select,
[data-theme] textarea.pos-select,
body input.pos-select,
body textarea.pos-select,
.tab-content input.pos-select,
.tab-content textarea.pos-select,
.modal-content input.pos-select,
.modal-content textarea.pos-select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: initial !important;
  background-size: auto !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important;
  padding-right: 12px !important;
  cursor: text !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color-scheme: light !important;
}

:root input[type="number"].pos-select,
[data-theme] input[type="number"].pos-select,
.tab-content input[type="number"].pos-select {
  appearance: textfield !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

:root input[type="number"].pos-select::-webkit-outer-spin-button,
:root input[type="number"].pos-select::-webkit-inner-spin-button,
[data-theme] input[type="number"].pos-select::-webkit-outer-spin-button,
[data-theme] input[type="number"].pos-select::-webkit-inner-spin-button,
.tab-content input[type="number"].pos-select::-webkit-outer-spin-button,
.tab-content input[type="number"].pos-select::-webkit-inner-spin-button {
  margin: 0 !important;
  -webkit-appearance: none !important;
}

:root input[type="date"].pos-select,
:root input.date-input,
[data-theme] input[type="date"].pos-select,
[data-theme] input.date-input,
.tab-content input[type="date"].pos-select,
.tab-content input.date-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  padding-right: 12px !important;
  cursor: pointer !important;
  color-scheme: light !important;
}

:root textarea.pos-select,
[data-theme] textarea.pos-select,
.tab-content textarea.pos-select {
  min-height: 44px;
  resize: vertical;
}

:root select.pos-select,
[data-theme] select.pos-select,
body select.pos-select,
.tab-content select.pos-select,
.modal-content select.pos-select {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color-scheme: light !important;
}

/* ===== KPI LABEL DIACRITIC FIX ===== */
.kpi-label,
#kpi-cards .kpi-label,
.kpi-card .kpi-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

#kpi-cards .kpi-value,
.kpi-card .kpi-value {
  font-size: 1.34rem !important;
  line-height: 1.12 !important;
}

#kpi-cards .kpi-sub-value,
.kpi-card .kpi-sub-value {
  font-size: 0.78rem !important;
}

/* ===== ORANGE FOCUS RING ===== */
input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.date-input:focus,
.pos-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
input.pos-select:focus,
textarea.pos-select:focus,
select.pos-select:focus,
.tab-content input:focus,
.tab-content select:focus,
.tab-content textarea:focus,
.section-card input:focus,
.section-card select:focus,
.section-card textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus {
  border-color: #fed7aa !important;
  box-shadow: 0 0 0 2px #fff7ed !important;
  outline: none !important;
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus),
.date-input:hover:not(:focus),
.pos-select:hover:not(:focus) {
  border-color: #fed7aa !important;
}

input:focus:hover,
select:focus:hover,
textarea:focus:hover,
.date-input:focus:hover,
.pos-select:focus:hover,
.form-group input:focus:hover,
.form-group select:focus:hover,
.form-group textarea:focus:hover,
.tab-content input:focus:hover,
.tab-content select:focus:hover,
.tab-content textarea:focus:hover,
.section-card input:focus:hover,
.section-card select:focus:hover,
.section-card textarea:focus:hover,
.card input:focus:hover,
.card select:focus:hover,
.card textarea:focus:hover {
  border-color: #fed7aa !important;
  box-shadow: 0 0 0 2px #fff7ed !important;
}

input:focus:not(:hover),
select:focus:not(:hover),
textarea:focus:not(:hover),
.date-input:focus:not(:hover),
.pos-select:focus:not(:hover),
.form-group input:focus:not(:hover),
.form-group select:focus:not(:hover),
.form-group textarea:focus:not(:hover),
.tab-content input:focus:not(:hover),
.tab-content select:focus:not(:hover),
.tab-content textarea:focus:not(:hover),
.section-card input:focus:not(:hover),
.section-card select:focus:not(:hover),
.section-card textarea:focus:not(:hover),
.card input:focus:not(:hover),
.card select:focus:not(:hover),
.card textarea:focus:not(:hover) {
  border-color: #fed7aa !important;
  box-shadow: 0 0 0 2px #fff7ed !important;
}

/* ===== HIDDEN AD ACCOUNTS MANAGER ===== */
.hidden-ad-accounts-overlay {
  padding: 20px;
}

.hidden-ad-accounts-modal {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.hidden-ad-accounts-header {
  user-select: none;
}

.hidden-ad-accounts-header h3 {
  color: var(--text-primary);
  font-size: 1.22rem !important;
  line-height: 1.25;
  letter-spacing: 0;
}

.hidden-ad-accounts-header p {
  line-height: 1.45;
}

.hidden-ad-accounts-icon {
  flex: 0 0 42px;
}

.hidden-ad-accounts-toolbar input {
  height: 42px;
  background: #ffffff;
  border-color: #e5e7eb;
}

#hidden-ad-accounts-summary {
  letter-spacing: 0;
}

#hidden-ad-accounts-list {
  border-color: #e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}

.hidden-account-row {
  min-height: 58px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.hidden-account-row + .hidden-account-row {
  margin-top: 4px;
}

.hidden-account-row:hover {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.hidden-account-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.hidden-account-status.is-hidden {
  background: #fff7ed;
  color: #f97316;
}

@media (max-width: 640px) {
  .hidden-ad-accounts-overlay {
    padding: 12px;
    align-items: flex-start !important;
  }

  .hidden-ad-accounts-modal {
    width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    padding: 18px !important;
  }

  .hidden-ad-accounts-header {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .hidden-ad-accounts-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .hidden-ad-accounts-toolbar > div,
  .hidden-ad-accounts-toolbar button,
  .hidden-ad-accounts-actions button {
    width: 100%;
  }

  .hidden-ad-accounts-actions {
    flex-direction: column-reverse;
    align-items: stretch !important;
  }

  .hidden-account-row {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .hidden-account-status {
    min-width: 68px;
    font-size: 0.72rem;
  }
}

/* ===== DARK MODE FINAL OVERRIDES ===== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #0f172a;
  --bg-secondary: #111827;
  --bg-card: #151b2a;
  --bg-card-hover: #1d2536;
  --bg-glass: rgba(255, 255, 255, 0.045);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --bg-color: #0f172a;
  --bg-hover: #1d2536;
  --card-hover: #1d2536;

  --border-color: rgba(148, 163, 184, 0.16);
  --border-active: rgba(249, 115, 22, 0.42);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-color: #f8fafc;

  --accent-blue: #fb923c;
  --accent-purple: #f97316;
  --accent-cyan: #fdba74;
  --accent-green: #34d399;
  --accent-amber: #f59e0b;
  --accent-red: #f87171;
  --accent-pink: #fb7185;
  --primary-color: #fb923c;

  --gradient-primary: linear-gradient(180deg, #fb923c, #f97316);
  --gradient-secondary: linear-gradient(180deg, #fdba74, #ea580c);
  --gradient-bg: linear-gradient(180deg, #0f172a 0%, #111827 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22), 0 14px 36px rgba(0, 0, 0, 0.24);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 20px 60px rgba(249, 115, 22, 0.10);
}

[data-theme="dark"] body {
  background: #0f172a !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #content,
[data-theme="dark"] .tab-content {
  background: #0f172a !important;
}

[data-theme="dark"] #sidebar {
  background: rgba(17, 24, 39, 0.98) !important;
  border-right-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .sidebar-footer {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

[data-theme="dark"] .brand-text,
[data-theme="dark"] .topbar-left h2,
[data-theme="dark"] .section-card h3,
[data-theme="dark"] .section-card h4,
[data-theme="dark"] .chart-card h3 {
  color: #f8fafc !important;
  -webkit-text-fill-color: currentColor !important;
}

[data-theme="dark"] .user-info,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .nav-item-header,
[data-theme="dark"] .submenu-item {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .nav-group-header {
  color: #64748b !important;
}

[data-theme="dark"] .nav-item svg,
[data-theme="dark"] .nav-item-header svg,
[data-theme="dark"] .submenu-item svg {
  color: #94a3b8 !important;
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item-header:hover,
[data-theme="dark"] .submenu-item:hover,
[data-theme="dark"] #sidebar .nav-item:not(.has-submenu):hover,
[data-theme="dark"] #sidebar .nav-item.has-submenu:hover .nav-item-header,
[data-theme="dark"] #sidebar .submenu-item:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  color: #fed7aa !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.16) !important;
}

[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .submenu-item.active {
  background: rgba(249, 115, 22, 0.16) !important;
  color: #fdba74 !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.22) !important;
}

[data-theme="dark"] .nav-item.active svg,
[data-theme="dark"] .nav-item.active .nav-item-header svg,
[data-theme="dark"] .submenu-item.active svg {
  color: #fb923c !important;
}

[data-theme="dark"] #topbar {
  background: rgba(17, 24, 39, 0.88) !important;
  border-bottom-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .date-selector,
[data-theme="dark"] .pos-date-presets,
[data-theme="dark"] .pos-time-filters,
[data-theme="dark"] .view-selector-group {
  background: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .date-btn,
[data-theme="dark"] .pos-btn,
[data-theme="dark"] .view-btn,
[data-theme="dark"] .auto-mode-btn {
  background: transparent !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .date-btn:hover,
[data-theme="dark"] .pos-btn:hover,
[data-theme="dark"] .view-btn:hover,
[data-theme="dark"] .auto-mode-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .date-btn.active,
[data-theme="dark"] .pos-btn.active,
[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .auto-mode-btn.active {
  background: rgba(249, 115, 22, 0.16) !important;
  color: #fdba74 !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.22) !important;
}

[data-theme="dark"] .section-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .card,
[data-theme="dark"] .downloader-card-glass,
[data-theme="dark"] .result-card-creative,
[data-theme="dark"] .lp-result-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi-card:nth-child(9),
[data-theme="dark"] .kpi-card:nth-child(11),
[data-theme="dark"] .kpi-card:nth-child(12) {
  background: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] .section-card:hover,
[data-theme="dark"] .chart-card:hover,
[data-theme="dark"] .kpi-card:hover {
  border-color: rgba(249, 115, 22, 0.30) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

[data-theme="dark"] .account-chip,
[data-theme="dark"] .flow-item,
[data-theme="dark"] .kpi-box,
[data-theme="dark"] .file-item,
[data-theme="dark"] .lp-content-box,
[data-theme="dark"] .lp-hook-item {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .account-chip:hover,
[data-theme="dark"] .flow-item:hover,
[data-theme="dark"] .lp-hook-item:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(249, 115, 22, 0.28) !important;
}

[data-theme="dark"] .account-chip.selected {
  background: rgba(249, 115, 22, 0.14) !important;
  border-color: rgba(249, 115, 22, 0.42) !important;
}

[data-theme="dark"] .account-chip .account-name,
[data-theme="dark"] .kpi-value,
[data-theme="dark"] #kpi-cards .kpi-value,
[data-theme="dark"] .flow-item-title,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .loading-placeholder {
  color: #f8fafc !important;
}

[data-theme="dark"] .account-chip .account-id,
[data-theme="dark"] .kpi-label,
[data-theme="dark"] #kpi-cards .kpi-label,
[data-theme="dark"] .kpi-sub-value,
[data-theme="dark"] .flow-item-meta,
[data-theme="dark"] .date-range-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .date-input,
[data-theme="dark"] .pos-select,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] input.pos-select,
[data-theme="dark"] textarea.pos-select,
[data-theme="dark"] input.date-input,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] .tab-content input.pos-select,
[data-theme="dark"] .tab-content textarea.pos-select,
[data-theme="dark"] .modal-content input.pos-select,
[data-theme="dark"] .modal-content textarea.pos-select {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

[data-theme="dark"] select,
[data-theme="dark"] select.pos-select,
[data-theme="dark"] :root select.pos-select,
[data-theme="dark"] .tab-content select.pos-select,
[data-theme="dark"] .modal-content select.pos-select {
  background-color: #111827 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .date-input:focus,
[data-theme="dark"] .pos-select:focus {
  border-color: rgba(249, 115, 22, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14) !important;
}

[data-theme="dark"] table,
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-wrapper {
  color: #cbd5e1 !important;
}

[data-theme="dark"] thead th {
  color: #94a3b8 !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}

[data-theme="dark"] tbody td {
  color: #cbd5e1 !important;
  border-bottom-color: rgba(148, 163, 184, 0.10) !important;
}

[data-theme="dark"] tbody tr:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}

[data-theme="dark"] .btn-ghost {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
  border-color: rgba(249, 115, 22, 0.34) !important;
}

[data-theme="dark"] .hidden-ad-accounts-modal,
[data-theme="dark"] #hidden-ad-accounts-list,
[data-theme="dark"] .hidden-account-row {
  background: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .hidden-account-row:hover {
  background: rgba(249, 115, 22, 0.10) !important;
  border-color: rgba(249, 115, 22, 0.30) !important;
}

/* ===== DARK MODE NORMALIZATION: legacy inline/light UI ===== */
[data-theme="dark"] .table-container {
  background: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

[data-theme="dark"] table,
[data-theme="dark"] .sleek-table,
[data-theme="dark"] .table-container table,
[data-theme="dark"] .table-container .sleek-table,
[data-theme="dark"] table tbody,
[data-theme="dark"] .sleek-table tbody {
  background: #151b2a !important;
  background-color: #151b2a !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] table thead,
[data-theme="dark"] .sleek-table thead,
[data-theme="dark"] table thead tr,
[data-theme="dark"] .sleek-table thead tr,
[data-theme="dark"] table thead th,
[data-theme="dark"] .sleek-table thead th {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

[data-theme="dark"] table tbody tr,
[data-theme="dark"] .sleek-table tbody tr {
  background: #151b2a !important;
  background-color: #151b2a !important;
}

[data-theme="dark"] table tbody td,
[data-theme="dark"] .sleek-table tbody td,
[data-theme="dark"] table tfoot td,
[data-theme="dark"] .sleek-table tfoot td {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] .sleek-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.055) !important;
  background-color: rgba(255, 255, 255, 0.055) !important;
}

[data-theme="dark"] .total-row,
[data-theme="dark"] tfoot tr,
[data-theme="dark"] tr[style*="background: var(--bg-hover)"],
[data-theme="dark"] td[style*="background: var(--bg-hover)"],
[data-theme="dark"] th[style*="background: var(--bg-hover)"] {
  background: rgba(249, 115, 22, 0.12) !important;
  background-color: rgba(249, 115, 22, 0.12) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .status-badge {
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

[data-theme="dark"] .status-active,
[data-theme="dark"] .status-confirmed,
[data-theme="dark"] .status-delivered {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
}

[data-theme="dark"] .status-paused,
[data-theme="dark"] .status-shipping {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}

[data-theme="dark"] .status-deleted,
[data-theme="dark"] .status-cancelled,
[data-theme="dark"] .status-returned {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-icon {
  background: rgba(255, 255, 255, 0.035) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-icon:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  color: #fed7aa !important;
  border-color: rgba(249, 115, 22, 0.30) !important;
}

[data-theme="dark"] .btn-ghost[style*="color: #3b82f6"],
[data-theme="dark"] .btn-icon[style*="color:#3b82f6"],
[data-theme="dark"] .btn-icon[style*="color: #3b82f6"] {
  color: #93c5fd !important;
}

[data-theme="dark"] .kpi-icon,
[data-theme="dark"] .kpi-card [class*="kpi-icon"],
[data-theme="dark"] .kpi-icon[style*="background"],
[data-theme="dark"] [style*="border-radius:12px"][style*="display:flex"][style*="justify-content:center"][style*="background:rgba"] {
  background: rgba(249, 115, 22, 0.14) !important;
  color: #fb923c !important;
}

[data-theme="dark"] .green-text {
  color: #34d399 !important;
}

[data-theme="dark"] a {
  color: #93c5fd !important;
}

[data-theme="dark"] .tag-badge,
[data-theme="dark"] [style*="border-radius:4px"][style*="background:rgba"],
[data-theme="dark"] [style*="border-radius:6px"][style*="background:rgba"],
[data-theme="dark"] [style*="border-radius:20px"][style*="background:rgba"] {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #fafafa"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fffaf5"],
[data-theme="dark"] [style*="background:#fffaf5"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #f8fafc"],
[data-theme="dark"] [style*="background-color:#f8fafc"],
[data-theme="dark"] [style*="background-color: #fafafa"],
[data-theme="dark"] [style*="background-color:#fafafa"] {
  background: #151b2a !important;
  background-color: #151b2a !important;
}

[data-theme="dark"] [style*="background: var(--bg-color)"],
[data-theme="dark"] [style*="background:var(--bg-color)"],
[data-theme="dark"] [style*="background: var(--bg-hover)"],
[data-theme="dark"] [style*="background:var(--bg-hover)"],
[data-theme="dark"] [style*="background: var(--bg-card)"],
[data-theme="dark"] [style*="background:var(--bg-card)"] {
  background-color: var(--bg-card) !important;
}

[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"] {
  color: #f8fafc !important;
}

[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #8a8f98"],
[data-theme="dark"] [style*="color:#8a8f98"] {
  color: #94a3b8 !important;
}

[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e7e5e4"],
[data-theme="dark"] [style*="border: 1px solid #e7e5e4"],
[data-theme="dark"] [style*="border-color: #e5e7eb"],
[data-theme="dark"] [style*="border-color:#e5e7eb"],
[data-theme="dark"] [style*="border-color: #e7e5e4"],
[data-theme="dark"] [style*="border-color:#e7e5e4"] {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input.date-input::-webkit-calendar-picker-indicator,
[data-theme="dark"] input.pos-select::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.72;
}

[data-theme="dark"] select option {
  background-color: #111827 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .flatpickr-calendar,
[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-weekdays {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-weekday {
  color: #f8fafc !important;
}

[data-theme="dark"] .flatpickr-day {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
  background: rgba(249, 115, 22, 0.14) !important;
  border-color: rgba(249, 115, 22, 0.36) !important;
  color: #fed7aa !important;
}

[data-theme="dark"] .flatpickr-day.today {
  border-color: #fb923c !important;
  color: #fdba74 !important;
}

[data-theme="dark"] .flatpickr-day.inRange {
  background: rgba(249, 115, 22, 0.16) !important;
  border-color: rgba(249, 115, 22, 0.16) !important;
  box-shadow: -5px 0 0 rgba(249, 115, 22, 0.16), 5px 0 0 rgba(249, 115, 22, 0.16) !important;
  color: #fed7aa !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month {
  color: #cbd5e1 !important;
  fill: #cbd5e1 !important;
}

[data-theme="dark"] .leader-row,
[data-theme="dark"] .leader-row.top-1,
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .kanban-card,
[data-theme="dark"] .calendar-day-cell,
[data-theme="dark"] .calendar-task-item,
[data-theme="dark"] .pos-block-card,
[data-theme="dark"] .pos-details-section,
[data-theme="dark"] .pos-chart-container,
[data-theme="dark"] .pos-dropdown-menu,
[data-theme="dark"] .dropdown-pane,
[data-theme="dark"] .douyin-video-card,
[data-theme="dark"] .douyin-analysis,
[data-theme="dark"] .video-detail-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .login-card,
[data-theme="dark"] .help-content {
  background: #151b2a !important;
  background-color: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #f8fafc !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="dark"] .leader-row:hover,
[data-theme="dark"] .kanban-card:hover,
[data-theme="dark"] .calendar-day-cell:hover,
[data-theme="dark"] .calendar-task-item:hover,
[data-theme="dark"] .product-search-item:hover,
[data-theme="dark"] .suggestion-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(249, 115, 22, 0.28) !important;
}

[data-theme="dark"] .kanban-card *,
[data-theme="dark"] .leader-row *,
[data-theme="dark"] .calendar-task-item *,
[data-theme="dark"] .douyin-video-card *,
[data-theme="dark"] .modal-content * {
  border-color: inherit;
}

[data-theme="dark"] .kanban-card [style*="color: #1e293b"],
[data-theme="dark"] .kanban-card [style*="color:#1e293b"],
[data-theme="dark"] .kanban-card [style*="color: #0f172a"],
[data-theme="dark"] .kanban-card [style*="color:#0f172a"],
[data-theme="dark"] .kanban-card [style*="color: #64748b"],
[data-theme="dark"] .kanban-card [style*="color:#64748b"] {
  color: #f8fafc !important;
}

[data-theme="dark"] .leader-name,
[data-theme="dark"] .column-title,
[data-theme="dark"] .calendar-day-number,
[data-theme="dark"] .calendar-task-title,
[data-theme="dark"] .douyin-video-body h5,
[data-theme="dark"] .video-title-premium,
[data-theme="dark"] .login-header h1 {
  color: #f8fafc !important;
  -webkit-text-fill-color: currentColor !important;
}

[data-theme="dark"] .leader-metrics,
[data-theme="dark"] .column-count,
[data-theme="dark"] .calendar-task-assignee,
[data-theme="dark"] .douyin-video-meta,
[data-theme="dark"] .login-subtitle,
[data-theme="dark"] .form-hint {
  color: #94a3b8 !important;
}

[data-theme="dark"] .auto-time-picker__trigger,
[data-theme="dark"] .auto-time-picker__panel,
[data-theme="dark"] .auto-time-picker__input,
[data-theme="dark"] .auto-time-picker__option,
[data-theme="dark"] .pane-search input,
[data-theme="dark"] .product-search-item,
[data-theme="dark"] .suggestion-item,
[data-theme="dark"] .pos-filter-tag {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .auto-time-picker__option:hover,
[data-theme="dark"] .auto-time-picker__option.active {
  background: rgba(249, 115, 22, 0.16) !important;
  border-color: rgba(249, 115, 22, 0.34) !important;
  color: #fed7aa !important;
}

[data-theme="dark"] .auto-time-picker__label {
  color: #fdba74 !important;
}

[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"],
[data-theme="dark"] [style*="background:#d1fae5"],
[data-theme="dark"] [style*="background: #d1fae5"],
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"],
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background: #ecfdf5"],
[data-theme="dark"] [style*="background:#ffedd5"],
[data-theme="dark"] [style*="background: #ffedd5"],
[data-theme="dark"] [style*="background:#fed7aa"],
[data-theme="dark"] [style*="background: #fed7aa"] {
  background: rgba(255, 255, 255, 0.07) !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f172a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32);
  border-color: #0f172a;
}

[data-theme="dark"] ::selection {
  background: rgba(249, 115, 22, 0.34);
  color: #fff7ed;
}

/* ===== DARK MODE SWEEP: final pass for legacy inline UI ===== */
[data-theme="dark"] .tab-content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme="dark"] .tab-content textarea,
[data-theme="dark"] .tab-content select,
[data-theme="dark"] .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme="dark"] .modal-content textarea,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .settings-scroll-area input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme="dark"] .settings-scroll-area textarea,
[data-theme="dark"] .settings-scroll-area select,
[data-theme="dark"] #hidden-ad-account-search,
[data-theme="dark"] #admin-configs-list input,
[data-theme="dark"] #reveal-config-modal-overlay input,
[data-theme="dark"] .downloader-input-field,
[data-theme="dark"] .pos-select,
[data-theme="dark"] .date-input,
[data-theme="dark"] .auto-time-picker__input,
[data-theme="dark"] .auto-time-picker__trigger {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}

[data-theme="dark"] .tab-content input::placeholder,
[data-theme="dark"] .tab-content textarea::placeholder,
[data-theme="dark"] .modal-content input::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder,
[data-theme="dark"] .downloader-input-field::placeholder,
[data-theme="dark"] .pos-select::placeholder {
  color: #64748b !important;
}

[data-theme="dark"] .tab-content input:focus,
[data-theme="dark"] .tab-content textarea:focus,
[data-theme="dark"] .tab-content select:focus,
[data-theme="dark"] .modal-content input:focus,
[data-theme="dark"] .modal-content textarea:focus,
[data-theme="dark"] .modal-content select:focus,
[data-theme="dark"] .downloader-input-field:focus,
[data-theme="dark"] .pos-select:focus,
[data-theme="dark"] .date-input:focus,
[data-theme="dark"] .auto-time-picker.open .auto-time-picker__trigger {
  border-color: rgba(249, 115, 22, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14) !important;
  outline: none !important;
}

[data-theme="dark"] .tab-content select,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] select.pos-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="date"].pos-select,
[data-theme="dark"] input[type="date"].date-input {
  background-image: none !important;
  color-scheme: dark !important;
}

[data-theme="dark"] .view-selector-group,
[data-theme="dark"] .view-toggle,
[data-theme="dark"] .creative-mode-toggle,
[data-theme="dark"] #tab-auto-ads > div[style*="width:fit-content"],
[data-theme="dark"] #tab-content-1688 > div[style*="width:fit-content"],
[data-theme="dark"] [style*="border-radius:8px"][style*="overflow:hidden"],
[data-theme="dark"] [style*="border-radius: 8px"][style*="overflow:hidden"],
[data-theme="dark"] [style*="border-radius:8px"][style*="overflow: hidden"],
[data-theme="dark"] [style*="border-radius: 8px"][style*="overflow: hidden"] {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .date-btn,
[data-theme="dark"] .pos-btn,
[data-theme="dark"] .view-btn,
[data-theme="dark"] .win-subtab-btn,
[data-theme="dark"] .auto-mode-btn,
[data-theme="dark"] .c1688-mode-btn,
[data-theme="dark"] .creative-mode-btn,
[data-theme="dark"] .care-ads-view-btn,
[data-theme="dark"] .ts-preset-btn,
[data-theme="dark"] .win-list-preset,
[data-theme="dark"] .win-stats-preset {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] .date-btn:hover,
[data-theme="dark"] .pos-btn:hover,
[data-theme="dark"] .view-btn:hover,
[data-theme="dark"] .win-subtab-btn:hover,
[data-theme="dark"] .auto-mode-btn:hover:not(.active),
[data-theme="dark"] .c1688-mode-btn:hover:not(.active),
[data-theme="dark"] .creative-mode-btn:hover:not(.active),
[data-theme="dark"] .care-ads-view-btn:hover:not(.active),
[data-theme="dark"] .ts-preset-btn:hover,
[data-theme="dark"] .win-list-preset:hover,
[data-theme="dark"] .win-stats-preset:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .date-btn.active,
[data-theme="dark"] .pos-btn.active,
[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .win-subtab-btn.active,
[data-theme="dark"] .auto-mode-btn.active,
[data-theme="dark"] .c1688-mode-btn.active,
[data-theme="dark"] .creative-mode-btn.active,
[data-theme="dark"] .care-ads-view-btn.active,
[data-theme="dark"] .ts-preset-btn.active,
[data-theme="dark"] .win-list-preset.active,
[data-theme="dark"] .win-stats-preset.active {
  background: rgba(249, 115, 22, 0.16) !important;
  color: #fdba74 !important;
  border-color: rgba(249, 115, 22, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.22) !important;
}

[data-theme="dark"] .date-separator {
  background: rgba(148, 163, 184, 0.22) !important;
}

[data-theme="dark"] #cv-subtitle-pos-guide span {
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .progress-table-wrapper,
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] #simple-drive-table-body,
[data-theme="dark"] #fb-drive-progress-body,
[data-theme="dark"] #auto-preview-table,
[data-theme="dark"] #pi-accounts-list,
[data-theme="dark"] #hidden-ad-accounts-list,
[data-theme="dark"] .accounts-grid,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .loading-placeholder {
  background: #151b2a !important;
  background-color: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] #pi-accounts-list .loading-placeholder,
[data-theme="dark"] #spending-accounts-list .loading-placeholder,
[data-theme="dark"] #cash-flow-accounts-list .loading-placeholder {
  background: transparent !important;
}

[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"] {
  background: #151b2a !important;
  background-color: #151b2a !important;
}

[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#fce7f3"],
[data-theme="dark"] [style*="background: #fce7f3"],
[data-theme="dark"] [style*="background:#e8c840"],
[data-theme="dark"] [style*="background: #e8c840"] {
  background: rgba(249, 115, 22, 0.14) !important;
  background-color: rgba(249, 115, 22, 0.14) !important;
  color: #fdba74 !important;
}

[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e7e5e4"],
[data-theme="dark"] [style*="border: 1px solid #e7e5e4"],
[data-theme="dark"] [style*="border-color:#e5e7eb"],
[data-theme="dark"] [style*="border-color: #e5e7eb"],
[data-theme="dark"] [style*="border-color:#e7e5e4"],
[data-theme="dark"] [style*="border-color: #e7e5e4"],
[data-theme="dark"] [style*="border: 1px solid rgba(0, 0, 0"],
[data-theme="dark"] [style*="border:1px solid rgba(0, 0, 0"] {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"] {
  color: #f8fafc !important;
}

[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"] {
  color: #94a3b8 !important;
}

/* ===== AI ASSISTANT ===== */
.ai-assistant-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  min-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
}
.ai-asst-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.ai-asst-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777);
}
.ai-asst-header-icon i { width: 20px; height: 20px; }
.ai-asst-header-text { flex: 1; min-width: 0; }
.ai-asst-header-text h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.ai-asst-header-text p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.ai-asst-header .btn-ghost { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.ai-asst-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-asst-empty {
  margin: auto;
  text-align: center;
  max-width: 460px;
  color: var(--text-muted);
}
.ai-asst-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--accent-blue);
}
.ai-asst-empty-title { font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.ai-asst-empty-sub { font-size: 0.85rem; margin: 0 0 18px; }
.ai-asst-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ai-asst-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-asst-chip:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  transform: translateY(-1px);
}

.ai-asst-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-asst-msg-user { flex-direction: row-reverse; }
.ai-asst-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
}
.ai-asst-avatar i { width: 17px; height: 17px; }
.ai-asst-msg-assistant .ai-asst-avatar { background: linear-gradient(135deg, #7c3aed, #db2777); }
.ai-asst-msg-user .ai-asst-avatar { background: var(--accent-blue); }
.ai-asst-bubble {
  max-width: 76%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ai-asst-msg-user .ai-asst-bubble {
  background: var(--accent-blue);
  color: #fff;
  border-color: transparent;
}
.ai-asst-bubble-error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.ai-asst-bubble h4 { margin: 10px 0 4px; font-size: 0.92rem; color: var(--accent-blue); }
.ai-asst-bubble ul { margin: 6px 0; padding-left: 20px; }
.ai-asst-bubble li { margin: 2px 0; }
.ai-asst-bubble code {
  background: rgba(124, 58, 237, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.ai-asst-msg-user .ai-asst-bubble code { background: rgba(255, 255, 255, 0.2); }
.ai-asst-tools {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ai-asst-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.ai-asst-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: ai-asst-blink 1.2s infinite ease-in-out;
}
.ai-asst-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-asst-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-asst-blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.ai-asst-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 20px 6px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.ai-asst-input {
  flex: 1;
  resize: none;
  max-height: 160px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
}
.ai-asst-input:focus { border-color: var(--accent-blue); }
.ai-asst-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  transition: opacity 0.15s ease;
}
.ai-asst-send:hover { opacity: 0.9; }
.ai-asst-send:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-asst-hint {
  margin: 0;
  padding: 0 20px 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-secondary);
}
.spinner-small {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ===== DARK MODE FINAL OVERRIDES =====
   These rules must remain at the very end of the file so that source-order
   wins when specificity is equal with earlier light-only rules. */

/* --- Generic inputs, selects, textareas --- */
[data-theme="dark"] .date-input,
[data-theme="dark"] .pos-select,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] textarea,
[data-theme="dark"] input,
[data-theme="dark"] select {
  background: #111827 !important;
  background-color: #111827 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

/* --- pos-select normalization dark override --- */
[data-theme="dark"] :root input.pos-select,
[data-theme="dark"] :root textarea.pos-select,
[data-theme="dark"][data-theme="dark"] input.pos-select,
[data-theme="dark"][data-theme="dark"] textarea.pos-select,
[data-theme="dark"] body input.pos-select,
[data-theme="dark"] body textarea.pos-select,
[data-theme="dark"] .tab-content input.pos-select,
[data-theme="dark"] .tab-content textarea.pos-select,
[data-theme="dark"] .modal-content input.pos-select,
[data-theme="dark"] .modal-content textarea.pos-select {
  background: #111827 !important;
  background-color: #111827 !important;
  background-image: none !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* --- date-input dark override (matches :root input.date-input specificity) --- */
[data-theme="dark"] :root input[type="date"].pos-select,
[data-theme="dark"] :root input.date-input,
[data-theme="dark"][data-theme="dark"] input[type="date"].pos-select,
[data-theme="dark"][data-theme="dark"] input.date-input,
[data-theme="dark"] .tab-content input[type="date"].pos-select,
[data-theme="dark"] .tab-content input.date-input {
  background: #111827 !important;
  background-color: #111827 !important;
  background-image: none !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

/* --- select.pos-select dark override --- */
[data-theme="dark"] :root select.pos-select,
[data-theme="dark"][data-theme="dark"] select.pos-select,
[data-theme="dark"] body select.pos-select,
[data-theme="dark"] .tab-content select.pos-select,
[data-theme="dark"] .modal-content select.pos-select {
  background-color: #111827 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* --- Spending stats date inputs (high specificity with 2 IDs) --- */
[data-theme="dark"] #tab-spending-stats #spending-date-from,
[data-theme="dark"] #tab-spending-stats #spending-date-to,
[data-theme="dark"] #tab-spending-stats input[type="date"] {
  background: #111827 !important;
  background-color: #111827 !important;
  background-image: none !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
}

/* --- Cash-flow stat-box --- */
[data-theme="dark"] #tab-cash-flow .stat-box {
  background: #151b2a !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  color: #f8fafc !important;
}

/* --- Cash-flow inputs --- */
[data-theme="dark"] #tab-cash-flow input.pos-select,
[data-theme="dark"] #tab-cash-flow select.pos-select {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* --- Product-win view-selector-group --- */
[data-theme="dark"] #tab-product-win > .view-selector-group {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
}

/* --- Kanban view-selector-group --- */
[data-theme="dark"] #tab-kanban .view-selector-group {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
}

/* --- Generic view-selector-group --- */
[data-theme="dark"] .view-selector-group,
[data-theme="dark"] [style*="border-radius:8px"][style*="overflow:hidden"],
[data-theme="dark"] #tab-auto-ads > div[style*="width:fit-content"] {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: none !important;
}

/* --- Care-sale inputs --- */
[data-theme="dark"] #tab-care-sale input,
[data-theme="dark"] #tab-care-sale select,
[data-theme="dark"] #tab-care-sale textarea {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* --- Content-1688 inputs --- */
[data-theme="dark"] #tab-content-1688 input.pos-select,
[data-theme="dark"] #tab-content-1688 select.pos-select,
[data-theme="dark"] #tab-content-1688 textarea.pos-select {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* --- Ladipage-edit inputs --- */
[data-theme="dark"] #tab-ladipage-edit input.pos-select,
[data-theme="dark"] #tab-ladipage-edit select.pos-select {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* --- Sales-call status options dark mode --- */
[data-theme="dark"] .sales-call-status-chua-goi-sale {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #475569 !important;
}
[data-theme="dark"] .sales-call-status-khong-nghe-may-lan-1 {
  background: #422006 !important;
  color: #fbbf24 !important;
  border-color: #b45309 !important;
}
[data-theme="dark"] .sales-call-status-khong-nghe-may-lan-2 {
  background: #431407 !important;
  color: #fb923c !important;
  border-color: #c2410c !important;
}
[data-theme="dark"] .sales-call-status-sai-so {
  background: #450a0a !important;
  color: #fca5a5 !important;
  border-color: #dc2626 !important;
}
[data-theme="dark"] .sales-call-status-da-chot {
  background: #022c22 !important;
  color: #6ee7b7 !important;
  border-color: #10b981 !important;
}
[data-theme="dark"] .sales-call-status-da-len-don {
  background: #052e16 !important;
  color: #86efac !important;
  border-color: #22c55e !important;
}
[data-theme="dark"] .sales-call-status-tu-choi {
  background: #2e1065 !important;
  color: #c4b5fd !important;
  border-color: #8b5cf6 !important;
}

/* --- Focus ring dark mode --- */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .date-input:focus,
[data-theme="dark"] .pos-select:focus,
[data-theme="dark"] input.pos-select:focus,
[data-theme="dark"] textarea.pos-select:focus,
[data-theme="dark"] select.pos-select:focus {
  border-color: rgba(249, 115, 22, 0.62) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14) !important;
}

/* --- Placeholder dark mode --- */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .pos-select::placeholder,
[data-theme="dark"] .date-input::placeholder {
  color: #64748b !important;
}

/* --- Care-sale high-specificity inputs (2 IDs) --- */
[data-theme="dark"] #tab-care-sale #care-filter-name-input,
[data-theme="dark"] #tab-care-sale #care-sheet-url,
[data-theme="dark"] #tab-care-sale #care-sheet-names,
[data-theme="dark"] #tab-care-sale input[type="text"],
[data-theme="dark"] #tab-care-sale textarea {
  background: #111827 !important;
  background-color: #111827 !important;
  background-image: none !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

[data-theme="dark"] #tab-care-sale #care-saved-filter-select {
  background-color: #111827 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color-scheme: dark !important;
}

/* ===== BUTTON CONTRAST FIX =====
   Original #fb923c/#f97316 + white text = 2.26-2.80:1 (fail WCAG AA).
   Fix: slightly darker vibrant orange #ea580c/#c2410c + white text = 3.56-5.18:1.
   Visually vibrant, much better contrast. Dark mode uses same. */
.btn-primary,
.btn-premium-glow {
  background: linear-gradient(180deg, #ea580c, #c2410c) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3) !important;
}

.btn-primary:hover,
.btn-premium-glow:hover {
  background: linear-gradient(180deg, #c2410c, #9a3412) !important;
  box-shadow: 0 6px 20px rgba(194, 65, 12, 0.4) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-premium-glow {
  background: linear-gradient(180deg, #ea580c, #c2410c) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.25) !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-premium-glow:hover {
  background: linear-gradient(180deg, #f97316, #ea580c) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35) !important;
}

/* ===== VIEW-BTN ACTIVE CONTRAST FIX (WCAG AA) =====
   Orange-600 (#ea580c) text on orange-50 (#fff7ed) bg gives only 3.35:1.
   Darkened active text to orange-700 (#c2410c) for 4.6:1 contrast (passes AA). */
.view-btn.active,
.win-subtab-btn.active,
.auto-mode-btn.active,
.pos-btn.active {
  color: #c2410c !important;
}

[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .win-subtab-btn.active,
[data-theme="dark"] .auto-mode-btn.active,
[data-theme="dark"] .pos-btn.active {
  color: #fb923c !important;
}

/* ===== KANBAN VIEW-BTN ACTIVE CONTRAST FIX =====
   #tab-kanban .view-btn.active uses #ea580c on #fff7ed (3.35:1).
   Override with #c2410c for 4.6:1 (WCAG AA pass). */
#tab-kanban .view-btn.active,
#tab-kanban .view-btn.active:hover {
  color: #c2410c !important;
}

[data-theme="dark"] #tab-kanban .view-btn.active,
[data-theme="dark"] #tab-kanban .view-btn.active:hover {
  color: #fb923c !important;
}

/* ===== KANBAN CALENDAR HEADER & DARK VIEW-BTN FIX =====
   Calendar th headers use muted color (3.11:1) - darken for AA.
   Dark mode view-btn.active has light bg - fix bg to dark. */
#tab-kanban th {
  color: #4b5563 !important;
}

[data-theme="dark"] #tab-kanban th {
  color: #d1d5db !important;
}

[data-theme="dark"] #tab-kanban .view-btn.active,
[data-theme="dark"] #tab-kanban .view-btn.active:hover {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #fb923c !important;
}

/* ===== MODE-BTN ACTIVE & HINT TEXT CONTRAST FIX =====
   .c1688-mode-btn.active and .creative-mode-btn.active use orange on light bg.
   .ai-asst-hint uses too-light gray. Fix all for WCAG AA. */
.c1688-mode-btn.active,
.creative-mode-btn.active {
  color: #c2410c !important;
}

[data-theme="dark"] .c1688-mode-btn.active,
[data-theme="dark"] .creative-mode-btn.active {
  color: #fb923c !important;
}

.ai-asst-hint {
  color: #6b7280 !important;
}

[data-theme="dark"] .ai-asst-hint {
  color: #9ca3af !important;
}

/* ===== PREVENT LOGIN SCREEN FLASH ON REFRESH ===== */
.auth-logged-in #auth-screen {
  display: none !important;
}
.auth-logged-in #main-screen {
  display: flex !important;
}