/* TEMU theme. Customer app: white + red. Admin: charcoal sidebar, white header, gray canvas. */

:root {
  --temu-red: #E30613;
  --temu-red-deep: #B9000D;
  --temu-white: #FFFFFF;
  --temu-surface: #F5F5F5;
  --temu-charcoal: #171717;
  --temu-gold: #F5B82E;
  --temu-muted: #737373;
  --temu-border: #E5E5E5;
  --temu-success: #16A34A;
  --temu-warning: #F59E0B;
  --temu-error: #DC2626;
  --temu-red-soft: #FFF1F2;
  --primary: #E30613 !important;
  --primary-foreground: #FFFFFF !important;
  --foreground: #171717 !important;
  --card-foreground: #171717 !important;
  --theme-dark: #171717 !important;
  --sidebar: #171717 !important;
  --sidebar-active: #E30613 !important;
  --sidebar-active-fg: #FFFFFF !important;
  --muted: #F5F5F5 !important;
  --muted-foreground: #737373 !important;
  --border: #E5E5E5 !important;
  --success: #16A34A !important;
  --warning: #F59E0B !important;
  --destructive: #DC2626 !important;
  --theme-cyan: #B9000D !important;
  --auth-primary: #E30613 !important;
  --auth-primary-hover: #B9000D !important;
  --auth-primary-soft: rgba(227, 6, 19, 0.1) !important;
  --auth-text: #171717 !important;
  --auth-muted: #737373 !important;
  --auth-border: #E5E5E5 !important;
  --auth-bg: #F5F5F5 !important;
  --bg-outer: #F5F5F5 !important;
  --text-main: #171717 !important;
  --text-muted: #737373 !important;
}

/* Customer: white chrome, light gray page, white cards, red actions, gold money. */
.content-scroll {
  background: #F5F5F5;
}
.header-sticky,
.bottom-nav,
.app-bar,
.header {
  background: #FFFFFF !important;
  border-color: #E5E5E5 !important;
}
.nav-item.active,
.nav-item.active iconify-icon,
.bottom-nav .nav-item.active,
.bottom-nav .nav-item.active iconify-icon {
  color: #E30613 !important;
}
.stat-card,
.order-card,
.wallet-card,
.balance-card,
.panel,
.history-card {
  background: #FFFFFF !important;
  border-color: #E5E5E5 !important;
}
.wallet-card,
.balance-card {
  color: #171717 !important;
  border-top: 3px solid #E30613 !important;
}
.balance-amount,
.wallet-amount-value,
.balance-summary-value,
.reward-value,
.bonus-value {
  color: #F5B82E !important;
}
.balance-currency,
.wallet-amount-currency,
.wallet-title,
.balance-summary-title {
  color: #737373 !important;
}
.stat-badge,
.order-status,
.status-pill {
  background: #E30613 !important;
  color: #FFFFFF !important;
}
.start-btn,
.auth-btn--primary,
.btn-primary,
.btn.btn-primary,
.btn-admin-login {
  background: #E30613 !important;
  border-color: #E30613 !important;
  color: #FFFFFF !important;
}
.start-btn:hover,
.auth-btn--primary:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-admin-login:hover {
  background: #B9000D !important;
  border-color: #B9000D !important;
  color: #FFFFFF !important;
}
.menu-item-text,
.stat-title,
.stat-desc {
  color: #737373 !important;
}

/* Admin: charcoal sidebar, white header, gray workspace, white cards. */
.export-wrapper:has(.sidebar),
.admin-wrapper,
.main-content,
.dashboard-content {
  background: #F5F5F5 !important;
}
.sidebar {
  background: #171717 !important;
  color: #F5F5F5 !important;
}
.sidebar-header {
  color: #E30613 !important;
  background: #171717 !important;
}
.sidebar .nav-item {
  color: rgba(255, 255, 255, 0.82) !important;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}
.sidebar .nav-item.active {
  background: #E30613 !important;
  color: #FFFFFF !important;
}
.topbar {
  background: #FFFFFF !important;
  color: #171717 !important;
  border-bottom: 1px solid #E5E5E5 !important;
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.06) !important;
  overflow: visible !important;
  z-index: 80;
}
.emergency-contact-wrap {
  position: relative;
  z-index: 90;
}
.emergency-contact-dropdown {
  z-index: 4000 !important;
}
.emergency-contact-dropdown.open {
  display: block !important;
}
.topbar-left {
  min-width: 0;
  overflow: hidden;
}
.topbar .admin-service-expiry {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.topbar-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}
.topbar-tabs::-webkit-scrollbar { display: none; }
.topbar .breadcrumb,
.topbar .breadcrumb-current {
  color: #171717 !important;
}
.topbar .header-tab {
  color: #737373 !important;
}
.topbar .header-tab:hover {
  background: #F5F5F5 !important;
  color: #171717 !important;
}
.topbar .header-tab.active {
  background: #E30613 !important;
  color: #FFFFFF !important;
}
.topbar .admin-logout-link {
  color: #171717 !important;
}
.data-table th,
.admin-table th,
.logs-table th,
.existing-table th,
.inject-records-table th {
  background: #F3F4F6 !important;
  color: #737373 !important;
}
.stat-icon {
  background: #FFF1F2 !important;
  color: #E30613 !important;
}
.admin-login-lang .admin-lang-switch a.active {
  background: #E30613 !important;
  color: #FFFFFF !important;
}
