/* Dark Mode - Color Changes Only */

/* Theme Toggle Switch */
.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.theme-toggle-track {
    position: relative;
    width: 56px;
    height: 30px;
    background: #DBDBDB;
    border-radius: 15px;
    transition: background 0.2s ease;
    display: block;
    flex-shrink: 0;
}

.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: left 0.2s cubic-bezier(0.4, 1.2, 0.6, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sun icon — visible in light mode */
.theme-icon-sun {
    color: #FF9100;
    position: absolute;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Moon icon — hidden in light mode */
.theme-icon-moon {
    fill: #6B6B6B;
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Dark mode: slide knob right, swap track colour, swap icons */
body.dark-mode .theme-toggle-track {
    background: #424242;
}

body.dark-mode .theme-toggle-knob {
    left: 29px;
}

body.dark-mode .theme-icon-sun {
    opacity: 0;
}

body.dark-mode .theme-icon-moon {
    opacity: 1;
    fill: #b0b8c8;
}

/* ========== BASE COLORS ========== */
html.dark-mode,
body.dark-mode {
    background: #111827 !important;
    color: #e5e7eb !important;
}

/* ========== LOADING SCREEN ========== */
/* Use html.dark-mode for loading screen to prevent flash */
html.dark-mode .loading-screen,
body.dark-mode .loading-screen {
    background: #111827 !important;
}

html.dark-mode .loading-text,
body.dark-mode .loading-text {
    color: #f9fafb !important;
}

/* Hide shimmer wrapper in dark mode, show plain logo instead */
html.dark-mode .shimmer-wrapper,
body.dark-mode .shimmer-wrapper {
    display: none !important;
}

html.dark-mode .loading-logo-dark,
body.dark-mode .loading-logo-dark {
    display: block !important;
}

/* Hide dark logo in light mode by default */
.loading-logo-dark {
    display: none;
    width: clamp(80px, 15vw, 120px);
    max-width: 100%;
    height: auto;
}

/* ========== HEADERS & NAVIGATION ========== */
body.dark-mode .header,
body.dark-mode .site-header,
body.dark-mode .top-bar,
body.dark-mode .header-content {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Nav bar - darker than header for contrast (like light mode where nav is gray vs white header) */
body.dark-mode .nav-bar {
    background: #151d2b !important;
    border-color: #374151 !important;
}

body.dark-mode .nav-bar:hover {
    background: #151d2b !important;
}

body.dark-mode .nav-content {
    scrollbar-color: #00a88f #1f2937 !important;
}

body.dark-mode .nav-content::-webkit-scrollbar-track {
    background: #1f2937 !important;
}

body.dark-mode .nav-content::-webkit-scrollbar-thumb {
    background: #00a88f !important;
}

body.dark-mode .nav-item {
    color: #d1d5db !important;
}

body.dark-mode .nav-item:hover,
body.dark-mode .nav-item.active {
    color: #f9fafb !important;
    background: #374151 !important;
}

/* ========== ADMIN SIDEBAR ========== */
body.dark-mode .admin-sidebar {
    background: #111827 !important;
    border-color: #374151 !important;
}

body.dark-mode .sidebar-label {
    color: #6b7280 !important;
}

body.dark-mode .sidebar-item {
    color: #d1d5db !important;
}

body.dark-mode .sidebar-item.sidebar-admin {
    color: #93c5fd !important;
}

body.dark-mode .sidebar-item:hover {
    background: rgba(0, 168, 143, 0.12) !important;
    color: #6ee7b7 !important;
}

body.dark-mode .sidebar-item.active {
    background: rgba(0, 168, 143, 0.18) !important;
    color: #6ee7b7 !important;
    border-left-color: #00a88f !important;
}

body.dark-mode .sidebar-divider {
    background: #374151 !important;
}

/* ========== ALL TEXT ========== */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title,
body.dark-mode .heading {
    color: #f9fafb !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th,
body.dark-mode div {
    color: #e5e7eb;
}

body.dark-mode .text-muted,
body.dark-mode .subtitle,
body.dark-mode small {
    color: #9ca3af !important;
}

/* ========== PAGE HEADERS ========== */
body.dark-mode .page-header {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .page-header-content {
    background: #1f2937 !important;
}

body.dark-mode .page-title {
    color: #f9fafb !important;
}

body.dark-mode .page-subtitle {
    color: #9ca3af !important;
}

body.dark-mode .section-header h2 {
    color: #f9fafb !important;
}

body.dark-mode .section-header p {
    color: #9ca3af !important;
}

/* ========== ALL VIEWS & SECTIONS ========== */
body.dark-mode .view,
body.dark-mode .page-section,
body.dark-mode .page-content,
body.dark-mode .content-wrapper,
body.dark-mode .main-content,
body.dark-mode .welcome-screen,
body.dark-mode .section,
body.dark-mode [class*="section"]:not(.page-header):not(.info-section) {
    background: #111827 !important;
}

body.dark-mode .info-section {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Home welcome greeting */
body.dark-mode .home-welcome h1,
body.dark-mode .home-welcome-greeting {
    color: #f9fafb !important;
}

body.dark-mode .home-welcome-name,
body.dark-mode .home-welcome-exclaim {
    color: #4fd1c1 !important;
}

body.dark-mode .home-overview-strip {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .overview-item + .overview-item,
body.dark-mode .overview-item:nth-child(2),
body.dark-mode .overview-item:nth-child(3),
body.dark-mode .overview-item:nth-child(4) {
    border-color: #374151 !important;
}

body.dark-mode .overview-item:hover {
    background: rgba(0, 168, 143, 0.08) !important;
}

body.dark-mode .overview-icon {
    background: linear-gradient(135deg, rgba(0, 168, 143, 0.22) 0%, rgba(102, 126, 234, 0.22) 100%) !important;
    color: #4fd1c1 !important;
}

body.dark-mode .overview-value {
    color: #f9fafb !important;
}

body.dark-mode .overview-label {
    color: #9ca3af !important;
}

/* Info intro section */
body.dark-mode .info-intro {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .info-intro h2 {
    color: #f9fafb !important;
}

body.dark-mode .info-intro p {
    color: #d1d5db !important;
}

/* Info benefits section */
body.dark-mode .info-benefits {
    background: #111827 !important;
}

body.dark-mode .info-benefits h3 {
    color: #f9fafb !important;
}

body.dark-mode .benefits-subtitle {
    color: #9ca3af !important;
}

/* Benefit cards specific styling */
body.dark-mode .benefit-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .benefit-card:hover {
    background: #1f2937 !important;
    border-color: #00a88f !important;
    box-shadow: 0 8px 20px rgba(0, 168, 143, 0.2) !important;
}

body.dark-mode .benefit-title-modern {
    color: #f9fafb !important;
}

body.dark-mode .benefit-text-modern {
    color: #d1d5db !important;
}

/* ========== ALL CARDS & CONTAINERS ========== */
body.dark-mode .card,
body.dark-mode [class*="-card"],
body.dark-mode [class*="card-"],
body.dark-mode .box,
body.dark-mode [class*="-box"],
body.dark-mode .container,
body.dark-mode [class*="-container"],
body.dark-mode .wrapper,
body.dark-mode [class*="-wrapper"],
body.dark-mode .panel,
body.dark-mode .tile {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

/* Card headers and content */
body.dark-mode [class*="card-header"],
body.dark-mode [class*="card-body"],
body.dark-mode [class*="card-content"],
body.dark-mode [class*="card-footer"] {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Specific cards from screenshots */
body.dark-mode .platform-newsletter-card,
body.dark-mode .platform-features-card,
body.dark-mode .platform-page-container,
body.dark-mode .benefit-card,
body.dark-mode .resource-feature-card,
body.dark-mode .reward-feature-card,
body.dark-mode .support-info-card,
body.dark-mode .support-form-card,
body.dark-mode .profile-main-card,
body.dark-mode .profile-info-card,
body.dark-mode .about-info-card,
body.dark-mode .telesales-card,
body.dark-mode .dashboard-card,
body.dark-mode .stat-card,
body.dark-mode .import-card,
body.dark-mode .members-table-container,
body.dark-mode .info-content-wrapper,
body.dark-mode .carousel-container,
body.dark-mode .login-container,
body.dark-mode .profile-photo-container,
body.dark-mode .profile-box {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Platform access cards - lighter background so button stands out */
body.dark-mode .platform-redirect-container,
body.dark-mode .platform-redirect-container-admin,
body.dark-mode .platform-access-card,
body.dark-mode .about-jti-access-card {
    background: transparent !important;
    border-color: transparent !important;
}

/* Platform page container - no visible borders */
body.dark-mode .platform-page-container {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
}

/* Profile page container - no visible borders */
body.dark-mode .profile-page-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-mode .profile-photo-section {
    background: linear-gradient(135deg, rgba(0, 168, 143, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%) !important;
    border-color: #374151 !important;
}

/* General containers - no visible borders */
body.dark-mode .container,
body.dark-mode [class*="-container"]:not(.platform-redirect-container):not(.platform-redirect-container-admin):not(.members-table-container):not(.import-card):not(.login-container) {
    border: none !important;
    border-color: transparent !important;
}

body.dark-mode .role-platform-access {
    background: transparent !important;
}

/* Platform redirect link and image styling */
body.dark-mode .platform-redirect-image {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .platform-redirect-link:hover .platform-redirect-image,
body.dark-mode .platform-redirect-image:hover {
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15), inset 0 0 0 2px #00a88f !important;
}

/* Profile box special case */
body.dark-mode .profile-box {
    background: #374151 !important;
}

body.dark-mode .profile-box:hover {
    background: #4b5563 !important;
}

body.dark-mode .profile-name {
    color: #f9fafb !important;
}

body.dark-mode .profile-role {
    color: #9ca3af !important;
}

/* ========== FORMS & INPUTS ========== */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control,
body.dark-mode .input,
body.dark-mode [type="text"],
body.dark-mode [type="email"],
body.dark-mode [type="password"],
body.dark-mode [type="number"],
body.dark-mode [type="search"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #9ca3af !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #00a88f !important;
    background: #374151 !important;
    color: #f9fafb !important;
}

body.dark-mode input:hover,
body.dark-mode textarea:hover,
body.dark-mode select:hover {
    background: #374151 !important;
    color: #f9fafb !important;
}

body.dark-mode .filter-input,
body.dark-mode .filter-select,
body.dark-mode .search-input,
body.dark-mode .search-box input {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .search-box {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Form labels */
body.dark-mode label,
body.dark-mode .form-label {
    color: #e5e7eb !important;
}

/* Checkboxes */
body.dark-mode .form-checkbox label,
body.dark-mode input[type="checkbox"] + label {
    color: #e5e7eb !important;
}

/* ========== ALL BUTTONS ========== */
body.dark-mode button:not(.theme-toggle),
body.dark-mode .btn,
body.dark-mode [class*="btn-"]:not(.btn-primary):not(.btn-danger):not(.btn-logout) {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode button:not(.theme-toggle):hover,
body.dark-mode .btn:hover,
body.dark-mode [class*="btn-"]:not(.btn-primary):not(.btn-danger):not(.btn-logout):hover {
    background: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .btn-primary {
    background: #00a88f !important;
    color: white !important;
    border-color: #00a88f !important;
}

body.dark-mode .btn-primary:hover {
    background: #008f7a !important;
    border-color: #008f7a !important;
}

body.dark-mode .btn-secondary {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode .btn-secondary:hover {
    background: #4b5563 !important;
}

body.dark-mode .btn-danger {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

body.dark-mode .btn-danger:hover {
    background: #991b1b !important;
}

body.dark-mode .btn-logout {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

body.dark-mode .btn-logout:hover {
    background: #991b1b !important;
}

/* ========== TABLES ========== */
body.dark-mode table {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode thead,
body.dark-mode table thead {
    background: #374151 !important;
}

body.dark-mode th {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode th:hover {
    background: #4b5563 !important;
}

body.dark-mode tr {
    border-color: #374151 !important;
}

body.dark-mode tbody tr:hover {
    background: #374151 !important;
}

body.dark-mode td {
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

/* Members table - prevent container/table highlight on cell hover */
body.dark-mode .members-table-container {
    background: #1f2937 !important;
}

body.dark-mode .members-table-container:hover {
    background: #1f2937 !important;
}

body.dark-mode .members-table {
    background: #1f2937 !important;
}

body.dark-mode .members-table:hover {
    background: #1f2937 !important;
}

body.dark-mode .members-table th:hover {
    background: #4b5563 !important;
}

body.dark-mode .members-table tbody tr:hover {
    background: #374151 !important;
}

body.dark-mode .members-table td:hover {
    background: inherit !important;
}

/* ========== PLATFORM TABS ========== */
body.dark-mode .platform-tabs-container {
    border-color: #374151 !important;
}

body.dark-mode .platform-tabs {
    background: #1f2937 !important;
}

body.dark-mode .platform-tabs:hover {
    background: #1f2937 !important;
}

body.dark-mode .platform-members-tab,
body.dark-mode .tab,
body.dark-mode .tab-button,
body.dark-mode .platform-tab {
    color: #9ca3af !important;
    background: transparent !important;
}

body.dark-mode .platform-members-tab:hover,
body.dark-mode .tab:hover,
body.dark-mode .tab-button:hover,
body.dark-mode .platform-tab:hover {
    color: #f9fafb !important;
    background: #374151 !important;
}

body.dark-mode .platform-members-tab.active,
body.dark-mode .tab.active,
body.dark-mode .tab-button.active,
body.dark-mode .platform-tab.active {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

/* ========== FAQ SECTION ========== */
body.dark-mode .faq-section {
    background: #111827 !important;
}

body.dark-mode .faq-item,
body.dark-mode .accordion-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .faq-item:hover,
body.dark-mode .accordion-item:hover {
    background: #374151 !important;
}

body.dark-mode .faq-question,
body.dark-mode .accordion-header {
    color: #f9fafb !important;
    background: #1f2937 !important;
}

body.dark-mode .faq-answer,
body.dark-mode .accordion-body {
    color: #d1d5db !important;
    background: #1f2937 !important;
}

/* ========== LOGIN & REGISTRATION ========== */
body.dark-mode .login-view,
body.dark-mode .registration-view,
body.dark-mode #loginView {
    background: #111827 !important;
}

body.dark-mode .login-container,
body.dark-mode .login-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

body.dark-mode .login-header h1  { color: #f9fafb !important; }
body.dark-mode .login-header p   { color: #9ca3af !important; }

body.dark-mode .login-title,
body.dark-mode .welcome-title {
    color: #f9fafb !important;
}

body.dark-mode .demo-credentials {
    background: #111827 !important;
    border-color: #374151 !important;
}
body.dark-mode .demo-credentials h3   { color: #6b7280 !important; }
body.dark-mode .demo-credentials p    { color: #d1d5db !important; }
body.dark-mode .demo-credentials p[style*="margin-top"] { border-top-color: #374151 !important; }
body.dark-mode .demo-credentials strong {
    color: #f9fafb !important;
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Registration container */
body.dark-mode .registration-container {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .registration-header h1 {
    color: #f9fafb !important;
}

body.dark-mode .registration-header p {
    color: #9ca3af !important;
}

/* Role selection cards */
body.dark-mode .role-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .role-card:hover {
    border-color: #00a88f !important;
    box-shadow: 0 8px 24px rgba(0, 168, 143, 0.2) !important;
}

body.dark-mode .role-icon {
    border-color: rgba(0, 168, 143, 0.45) !important;
    box-shadow: 0 0 12px rgba(0, 168, 143, 0.22) !important;
}

body.dark-mode .role-card:hover .role-icon {
    border-color: rgba(0, 168, 143, 0.85) !important;
    box-shadow: 0 0 22px rgba(0, 168, 143, 0.48) !important;
}

body.dark-mode .role-card h2 {
    color: #f9fafb !important;
}

body.dark-mode .role-card p {
    color: #9ca3af !important;
}

body.dark-mode .role-card .btn-primary {
    box-shadow: 0 4px 16px rgba(0, 168, 143, 0.35) !important;
}

body.dark-mode .role-card .btn-primary:hover {
    box-shadow: 0 8px 24px rgba(0, 168, 143, 0.55), 0 0 0 2px rgba(0, 168, 143, 0.4) !important;
}

/* Platform info section */
body.dark-mode .platform-info {
    background: #111827 !important;
    border: 1px solid #374151 !important;
}

body.dark-mode .platform-info h3 {
    color: #f9fafb !important;
}

body.dark-mode .platform-info p {
    color: #9ca3af !important;
}

body.dark-mode .benefit {
    color: #00a88f !important;
}

/* Registration link container */
body.dark-mode .registration-link-container p {
    color: #d1d5db !important;
}

/* Registration image button - dark mode shadow */
body.dark-mode .registration-image {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .registration-image-link:hover .registration-image,
body.dark-mode .registration-image:hover {
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15) !important;
}

/* ========== JTI ACHIEVERS REGISTRATION FORM - DARK MODE ========== */

/* Step Indicator */
body.dark-mode .step-indicator .step-number {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .step-indicator .step.active .step-number {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .step-indicator .step.completed .step-number {
    background: #10b981;
    color: white;
}

body.dark-mode .step-indicator .step-label {
    color: #9ca3af;
}

body.dark-mode .step-indicator .step.active .step-label {
    color: var(--primary-color);
}

body.dark-mode .step-indicator .step.completed .step-label {
    color: #10b981;
}

body.dark-mode .step-indicator .step-line {
    background: #374151;
}

/* Registration Notice */
body.dark-mode .reg-notice {
    background: #111827;
    border-color: #374151;
}

body.dark-mode .reg-notice p {
    color: #d1d5db;
}

body.dark-mode .reg-notice .warning-text {
    color: #f87171;
}

/* Store Type Options */
body.dark-mode .radio-option span {
    color: #d1d5db;
}

/* Form Fields Container */
body.dark-mode .achievers-form-fields {
    border-top-color: #374151;
}

/* Form Group */
body.dark-mode .achievers-registration .form-label {
    color: #d1d5db;
}

body.dark-mode .achievers-registration .form-input,
body.dark-mode .achievers-registration .form-select {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

body.dark-mode .achievers-registration .form-input:focus,
body.dark-mode .achievers-registration .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 168, 143, 0.2);
}

body.dark-mode .achievers-registration .form-input::placeholder {
    color: #6b7280;
}

body.dark-mode .achievers-registration .form-hint {
    color: #60a5fa;
}

/* Validation States - Dark Mode */
body.dark-mode .achievers-registration .form-input.valid,
body.dark-mode .achievers-registration .form-select.valid {
    border-color: #10b981;
    background-color: #111827;
}

body.dark-mode .achievers-registration .form-input.invalid,
body.dark-mode .achievers-registration .form-select.invalid {
    border-color: #ef4444;
    background-color: #111827;
}

body.dark-mode .achievers-registration .form-input.invalid:focus,
body.dark-mode .achievers-registration .form-select.invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

body.dark-mode .validation-message {
    color: #f87171;
}

body.dark-mode .validation-message.success {
    color: #34d399;
}

body.dark-mode .validation-summary {
    background: #1f1f1f;
    border-color: #7f1d1d;
}

body.dark-mode .validation-summary h4 {
    color: #f87171;
}

body.dark-mode .validation-summary ul {
    color: #fca5a5;
}

body.dark-mode .required {
    color: #f87171;
}

/* Checkbox Option */
body.dark-mode .checkbox-option span {
    color: #d1d5db;
}

body.dark-mode .checkbox-option .link {
    color: var(--primary-color);
}

/* Help Link */
body.dark-mode .help-link {
    color: #9ca3af;
}

body.dark-mode .help-link .link {
    color: var(--primary-color);
}

/* OTP Container */
body.dark-mode .otp-message {
    color: #d1d5db;
}

body.dark-mode .otp-phone {
    color: var(--primary-color);
}

body.dark-mode .otp-input {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

body.dark-mode .otp-input:focus {
    border-color: var(--primary-color);
}

body.dark-mode .otp-resend {
    color: #9ca3af;
}

body.dark-mode .otp-resend .link {
    color: var(--primary-color);
}

/* Confirmation Container */
body.dark-mode .confirmation-container h2 {
    color: #f9fafb;
}

body.dark-mode .confirmation-subtitle {
    color: #9ca3af;
}

body.dark-mode .confirmation-details {
    background: #111827;
    border: 1px solid #374151;
}

body.dark-mode .confirmation-details h3 {
    color: #d1d5db;
    border-bottom-color: #374151;
}

/* API Preview - already dark, but refine */
body.dark-mode .api-preview {
    background: #0f172a;
}

body.dark-mode .api-endpoint {
    background: #1e293b;
}

/* Confirmation Notice */
body.dark-mode .confirmation-notice {
    background: #422006;
    border-color: #92400e;
}

body.dark-mode .confirmation-notice p {
    color: #fcd34d;
}

/* Gray Back Button */
body.dark-mode .btn-back {
    background: #4b5563;
    color: #f9fafb;
}

body.dark-mode .btn-back:hover {
    background: #6b7280;
}

/* ========== WELCOME SPLASH SCREEN ========== */
body.dark-mode .welcome-splash {
    background: #111827 !important;
}

body.dark-mode .welcome-description {
    color: #d1d5db !important;
}

body.dark-mode .login-subtitle {
    color: #9ca3af !important;
}

/* Demo accounts section */
body.dark-mode .demo-accounts,
body.dark-mode [class*="demo"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* ========== MODALS ========== */
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode [class*="modal"] {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
}

body.dark-mode .logout-modal {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: #374151 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

body.dark-mode .logout-modal .modal-content {
    background: #1f2937 !important;
    border-radius: 16px !important;
}

body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .modal h2,
body.dark-mode .modal p {
    color: #f9fafb !important;
}

/* ========== HERO SECTIONS ========== */
body.dark-mode .hero,
body.dark-mode .hero-section,
body.dark-mode [class*="hero"] {
    background: #1f2937 !important;
}

body.dark-mode .rewards-hero-card {
    background: #00a88f !important;
}

body.dark-mode .rewards-hero-card h2,
body.dark-mode .rewards-hero-card p {
    color: white !important;
}

/* ========== CAROUSEL ========== */
body.dark-mode .carousel-container {
    background: transparent !important;
}

body.dark-mode .carousel {
    background: #111827 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .carousel-slide,
body.dark-mode .carousel-item {
    background: #111827 !important;
}

body.dark-mode .carousel-indicator {
    background: #4b5563 !important;
}

body.dark-mode .carousel-indicator.active {
    background: #00a88f !important;
}

/* ========== LINKS ========== */
body.dark-mode a:not(.btn):not(.nav-item):not([class*="btn-"]) {
    color: #10b981 !important;
}

body.dark-mode a:not(.btn):not(.nav-item):not([class*="btn-"]):hover {
    color: #34d399 !important;
}

/* ========== STATS BAR & STAT CARDS ========== */
body.dark-mode .stats-bar {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .stats-grid {
    background: transparent !important;
}

body.dark-mode .stat-item {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .stat-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .stat-value,
body.dark-mode .card-value {
    color: #f9fafb !important;
}

body.dark-mode .stat-label,
body.dark-mode .card-label {
    color: #9ca3af !important;
}

/* ========== IMPORT SECTION ========== */
body.dark-mode .import-card,
body.dark-mode .import-section {
    background: #1f2937 !important;
}

body.dark-mode .import-note {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

body.dark-mode .import-header h3,
body.dark-mode .import-header p {
    color: #e5e7eb !important;
}

/* API Sync Section */
body.dark-mode .api-sync-card,
body.dark-mode .api-sync-section {
    background: #1f2937 !important;
}

body.dark-mode .api-sync-card {
    border-left-color: #00a88f !important;
}

body.dark-mode .api-sync-header h3 {
    color: #f9fafb !important;
}

body.dark-mode .api-sync-header p {
    color: #9ca3af !important;
}

/* ========== FOOTER ========== */
body.dark-mode .footer,
body.dark-mode footer,
body.dark-mode .mobile-footer {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode .footer:hover,
body.dark-mode footer:hover {
    background: #1f2937 !important;
}

body.dark-mode .footer-link,
body.dark-mode .footer-links a {
    color: #9ca3af !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.dark-mode .footer-link:hover,
body.dark-mode .footer-link:focus,
body.dark-mode .footer-link:active,
body.dark-mode .footer-links a:hover,
body.dark-mode .footer-links a:focus,
body.dark-mode .footer-links a:active {
    color: #00a88f !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.dark-mode .footer-bottom {
    border-color: #374151 !important;
}

body.dark-mode #loginView .footer-bottom,
body.dark-mode .registration-view .footer-bottom {
    border-top-color: transparent !important;
}

body.dark-mode .footer-bottom p {
    color: #6b7280 !important;
}

/* ========== SCROLLBAR ========== */
body.dark-mode ::-webkit-scrollbar {
    background: #1f2937;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #374151;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #6b7280;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ========== BORDERS & DIVIDERS ========== */
body.dark-mode hr,
body.dark-mode .divider,
body.dark-mode [class*="border"] {
    border-color: #374151 !important;
}

/* ========== NOTIFICATIONS ========== */
body.dark-mode .notification,
body.dark-mode .alert,
body.dark-mode .toast {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #f9fafb !important;
}

/* ========== DROPDOWNS ========== */
body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-content,
body.dark-mode select option {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

body.dark-mode .dropdown-item:hover {
    background: #374151 !important;
}

/* ========== PROGRESS BARS ========== */
body.dark-mode .progress-bar-container,
body.dark-mode .progress-bar {
    background: #374151 !important;
}

body.dark-mode .progress-fill {
    background: #00a88f !important;
}

/* ========== SKELETON LOADING ========== */
body.dark-mode .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%) !important;
}

/* ========== ICONS ========== */
body.dark-mode .icon,
body.dark-mode [class*="icon"],
body.dark-mode i {
    color: #e5e7eb;
}

/* ========== RECEIPTS & ANALYSIS ========== */
body.dark-mode .receipt-info-box,
body.dark-mode .order-info-section {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* ========== TELESALES ========== */
body.dark-mode .telesales-container,
body.dark-mode .telesales-card,
body.dark-mode .telesales-table-container {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .success-card {
    background: #065f46 !important;
    border-color: #047857 !important;
}

/* ========== DASHBOARD ========== */
body.dark-mode .dashboard-header {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .dashboard-header h1 {
    color: #f9fafb !important;
}

body.dark-mode .dashboard-header p {
    color: #9ca3af !important;
}

body.dark-mode .dashboard-content-wrapper,
body.dark-mode .dashboard-grid {
    background: #111827 !important;
}

body.dark-mode .chart-container {
    background: #1f2937 !important;
}

/* Progress Items */
body.dark-mode .progress-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .progress-label {
    color: #f9fafb !important;
}

body.dark-mode .progress-value {
    color: #9ca3af !important;
}

body.dark-mode .progress-header {
    color: #f9fafb !important;
}

/* Campaign Items */
body.dark-mode .campaigns-list {
    background: transparent !important;
}

body.dark-mode .campaign-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .campaign-info h4 {
    color: #f9fafb !important;
}

body.dark-mode .campaign-info p {
    color: #9ca3af !important;
}

body.dark-mode .campaign-stats {
    color: #d1d5db !important;
}

/* Performer Items */
body.dark-mode .performer-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .performer-item:hover {
    border-color: #00a88f !important;
}

body.dark-mode .performer-item .name {
    color: #f9fafb !important;
}

body.dark-mode .performer-item .stat {
    color: #9ca3af !important;
}

body.dark-mode .performer-item .rank {
    /* Removed background circle styling for cleaner look */
    color: inherit !important;
}

/* Badges */
body.dark-mode .badge {
    color: #f9fafb !important;
}

body.dark-mode .badge-warning {
    background: #92400e !important;
    color: #fcd34d !important;
    border-color: #b45309 !important;
}

body.dark-mode .badge-info {
    background: #1e40af !important;
    color: #93c5fd !important;
    border-color: #2563eb !important;
}

body.dark-mode .status-badge {
    color: #f9fafb !important;
}

body.dark-mode .status-badge.pending {
    background: #92400e !important;
    color: #fcd34d !important;
}

body.dark-mode .status-badge.processed {
    background: #065f46 !important;
    color: #6ee7b7 !important;
}

/* Role Badges */
body.dark-mode .role-badges-container {
    background: transparent !important;
}

body.dark-mode .role-badge {
    border: 1px solid transparent !important;
}

body.dark-mode .role-cashier {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #2563eb !important;
}

body.dark-mode .role-manager {
    background: #78350f !important;
    color: #fcd34d !important;
    border-color: #b45309 !important;
}

body.dark-mode .role-owner {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
}

body.dark-mode .role-test {
    background: #78350f !important;
    color: #fbbf24 !important;
    border-color: #d97706 !important;
}

body.dark-mode .role-telesales {
    background: #4c1d95 !important;
    color: #c4b5fd !important;
    border-color: #7c3aed !important;
}

body.dark-mode .role-default {
    background: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}

/* Status Badges */
body.dark-mode .status-badge,
body.dark-mode .validation-badge,
body.dark-mode .invitation-badge {
    border: 1px solid transparent !important;
}

body.dark-mode .status-active {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
}

body.dark-mode .status-pending {
    background: #78350f !important;
    color: #fcd34d !important;
    border-color: #b45309 !important;
}

body.dark-mode .status-deleted {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #b91c1c !important;
}

body.dark-mode .status-default {
    background: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}

/* Validation Badges */
body.dark-mode .validated {
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #2563eb !important;
}

body.dark-mode .not-validated {
    background: #374151 !important;
    color: #9ca3af !important;
    border-color: #4b5563 !important;
}

/* Invitation Badges */
body.dark-mode .invited {
    background: #312e81 !important;
    color: #a5b4fc !important;
    border-color: #4338ca !important;
}

body.dark-mode .not-invited {
    background: #374151 !important;
    color: #9ca3af !important;
    border-color: #4b5563 !important;
}

body.dark-mode .status-badge.cancelled {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* Order Details Modal */
body.dark-mode .order-details-modal {
    background: #1f2937 !important;
}

body.dark-mode .order-details-modal .modal-header {
    border-color: #374151 !important;
}

body.dark-mode .order-details-modal .modal-header h2 {
    color: #f9fafb !important;
}

body.dark-mode .order-details-modal .modal-close {
    color: #9ca3af !important;
}

body.dark-mode .order-details-modal .modal-close:hover {
    background: #374151 !important;
    color: #f9fafb !important;
}

body.dark-mode .order-info-section {
    background: #374151 !important;
}

body.dark-mode .order-info-section h3 {
    color: #00a88f !important;
    border-color: #00a88f !important;
}

body.dark-mode .detail-row {
    border-color: #4b5563 !important;
}

body.dark-mode .detail-label {
    color: #9ca3af !important;
}

body.dark-mode .detail-value {
    color: #f9fafb !important;
}

body.dark-mode .products-list li {
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* Invoice Preview */
body.dark-mode .invoice-preview {
    background: #111827 !important;
    padding: 1rem;
    border-radius: 8px;
}

body.dark-mode .invoice-preview img {
    border-color: #374151 !important;
}

/* Order Notes */
body.dark-mode .detail-notes {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #d1d5db !important;
}

body.dark-mode .detail-notes p {
    color: #d1d5db !important;
}

body.dark-mode .order-details-modal .modal-footer {
    border-color: #374151 !important;
}

/* Winston/Camel Total Row */
body.dark-mode #modalWinstonCamelTotalRow {
    background: #064e3b !important;
    border-color: #00a88f !important;
}

/* ========== RECEIPT INFO BOX ========== */
body.dark-mode .receipt-info-box {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .receipt-info-box h4 {
    color: #00a88f !important;
    border-color: #00a88f !important;
}

body.dark-mode .receipt-analysis-grid {
    background: transparent !important;
}

/* Receipt Items List */
body.dark-mode #modalReceiptItems {
    background: transparent !important;
}

body.dark-mode #modalReceiptItems li {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #modalReceiptItems li .item-desc {
    color: #f9fafb !important;
}

body.dark-mode #modalReceiptItems li .item-qty {
    color: #9ca3af !important;
}

body.dark-mode #modalReceiptItems li .item-price {
    color: #00a88f !important;
}

/* Filter banner (Winston/Camel products only) */
body.dark-mode #modalReceiptItems [style*="background: #fff3cd"],
body.dark-mode #modalReceiptItems [style*="background: rgb(255, 243, 205)"] {
    background: #78350f !important;
    border-color: #b45309 !important;
}

body.dark-mode #modalReceiptItems [style*="background: #fff3cd"] strong,
body.dark-mode #modalReceiptItems [style*="background: rgb(255, 243, 205)"] strong {
    color: #fcd34d !important;
}

/* No items message */
body.dark-mode #modalReceiptItems p[style*="color: #999"],
body.dark-mode #modalReceiptItems p[style*="color: rgb(153, 153, 153)"] {
    color: #9ca3af !important;
}

body.dark-mode #modalReceiptItems p[style*="background: #fff3cd"],
body.dark-mode #modalReceiptItems p[style*="background: rgb(255, 243, 205)"] {
    background: #78350f !important;
    color: #fcd34d !important;
}

/* ========== MODAL VALIDATION STATUS ========== */
body.dark-mode #modalValidationStatus {
    border-color: #4b5563 !important;
}

/* Success validation status (override inline styles) */
body.dark-mode #modalValidationStatus[style*="background: #d4edda"],
body.dark-mode #modalValidationStatus[style*="background: rgb(212, 237, 218)"] {
    background: #064e3b !important;
    border-color: #059669 !important;
}

body.dark-mode #modalValidationStatus[style*="background: #d4edda"] strong,
body.dark-mode #modalValidationStatus[style*="background: rgb(212, 237, 218)"] strong {
    color: #6ee7b7 !important;
}

body.dark-mode #modalValidationStatus[style*="background: #d4edda"] p,
body.dark-mode #modalValidationStatus[style*="background: rgb(212, 237, 218)"] p {
    color: #6ee7b7 !important;
}

/* Warning validation status (override inline styles) */
body.dark-mode #modalValidationStatus[style*="background: #fff3cd"],
body.dark-mode #modalValidationStatus[style*="background: rgb(255, 243, 205)"] {
    background: #78350f !important;
    border-color: #b45309 !important;
}

body.dark-mode #modalValidationStatus[style*="background: #fff3cd"] strong,
body.dark-mode #modalValidationStatus[style*="background: rgb(255, 243, 205)"] strong {
    color: #fcd34d !important;
}

body.dark-mode #modalValidationStatus[style*="background: #fff3cd"] p,
body.dark-mode #modalValidationStatus[style*="background: rgb(255, 243, 205)"] p {
    color: #fcd34d !important;
}

/* Validation Details */
body.dark-mode #modalValidationDetails {
    color: #e5e7eb !important;
}

body.dark-mode #modalValidationDetails p {
    color: #9ca3af !important;
}

/* Stats boxes in validation details (override inline #f8f9fa background) */
body.dark-mode #modalValidationDetails [style*="background: #f8f9fa"],
body.dark-mode #modalValidationDetails [style*="background: rgb(248, 249, 250)"] {
    background: #374151 !important;
}

body.dark-mode #modalValidationDetails [style*="color: #666"],
body.dark-mode #modalValidationDetails [style*="color: rgb(102, 102, 102)"] {
    color: #9ca3af !important;
}

/* Matched products section (green background) */
body.dark-mode #modalValidationDetails [style*="background: #d4edda"],
body.dark-mode #modalValidationDetails [style*="background: rgb(212, 237, 218)"] {
    background: #064e3b !important;
}

body.dark-mode #modalValidationDetails [style*="color: #155724"],
body.dark-mode #modalValidationDetails [style*="color: rgb(21, 87, 36)"] {
    color: #6ee7b7 !important;
}

/* Mismatched products section (yellow/warning background) */
body.dark-mode #modalValidationDetails [style*="background: #fff3cd"],
body.dark-mode #modalValidationDetails [style*="background: rgb(255, 243, 205)"] {
    background: #78350f !important;
}

body.dark-mode #modalValidationDetails [style*="color: #856404"],
body.dark-mode #modalValidationDetails [style*="color: rgb(133, 100, 4)"] {
    color: #fcd34d !important;
}

/* White background items inside validation (product cards) */
body.dark-mode #modalValidationDetails [style*="background: white"] {
    background: #1f2937 !important;
}

body.dark-mode #modalValidationDetails h4 {
    color: inherit !important;
}

/* ========== TELESALES ========== */
/* Telesales Progress */
body.dark-mode .telesales-progress {
    background: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .step-number {
    background: #374151 !important;
    color: #9ca3af !important;
}

body.dark-mode .progress-step.active .step-number {
    background: #00a88f !important;
    color: #ffffff !important;
}

body.dark-mode .progress-step.completed .step-number {
    background: #059669 !important;
    color: #ffffff !important;
}

body.dark-mode .step-label {
    color: #9ca3af !important;
}

body.dark-mode .progress-step.active .step-label {
    color: #00a88f !important;
}

body.dark-mode .progress-step.completed .step-label {
    color: #059669 !important;
}

body.dark-mode .progress-line {
    background: #374151 !important;
}

body.dark-mode .progress-line.completed {
    background: #059669 !important;
}

/* Telesales Card */
body.dark-mode .telesales-card {
    background: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .telesales-card h2 {
    color: #f9fafb !important;
}

body.dark-mode .telesales-card h2 i {
    color: #00a88f !important;
}

body.dark-mode .telesales-card p {
    color: #9ca3af !important;
}

/* Telesales Form */
body.dark-mode .telesales-form label {
    color: #e5e7eb !important;
}

body.dark-mode .telesales-form input,
body.dark-mode .telesales-form select,
body.dark-mode .telesales-form textarea {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .telesales-form input::placeholder,
body.dark-mode .telesales-form textarea::placeholder {
    color: #6b7280 !important;
}

body.dark-mode .telesales-form input:focus,
body.dark-mode .telesales-form select:focus,
body.dark-mode .telesales-form textarea:focus {
    border-color: #00a88f !important;
    box-shadow: 0 0 0 3px rgba(0, 168, 143, 0.2) !important;
}

/* Telesales Container */
body.dark-mode .telesales-container {
    background: transparent !important;
}

/* Success Card in Telesales */
body.dark-mode .telesales-card.success-card {
    background: #064e3b !important;
    border-color: #059669 !important;
}

body.dark-mode .telesales-card.success-card h2,
body.dark-mode .telesales-card.success-card p {
    color: #ffffff !important;
}

/* Invoice Upload Area */
body.dark-mode .invoice-upload-area {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .invoice-upload-area:hover {
    border-color: #00a88f !important;
    background: rgba(0, 168, 143, 0.1) !important;
}

body.dark-mode .upload-placeholder i {
    color: #00a88f !important;
}

body.dark-mode .upload-placeholder p {
    color: #f9fafb !important;
}

body.dark-mode .upload-hint {
    color: #9ca3af !important;
}

body.dark-mode .preview-info p {
    color: #f9fafb !important;
}

body.dark-mode .upload-preview img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Generic Upload Area (CSV upload etc) */
body.dark-mode .upload-area {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .upload-area:hover {
    border-color: #00a88f !important;
    background: rgba(0, 168, 143, 0.1) !important;
}

body.dark-mode .upload-prompt {
    color: #e5e7eb !important;
}

/* Analysis Loading */
body.dark-mode #analysisLoading {
    background: #374151 !important;
}

body.dark-mode #analysisLoading p {
    color: #e5e7eb !important;
}

body.dark-mode #analysisLoading small {
    color: #9ca3af !important;
}

body.dark-mode #analysisLoading .spinner {
    border-color: #4b5563 !important;
    border-top-color: #00a88f !important;
}

/* Selected Products List */
body.dark-mode #selectedProductsList {
    background: #374151 !important;
}

body.dark-mode #selectedProductsList h4 {
    color: #00a88f !important;
}

body.dark-mode #selectedProductsContainer {
    color: #e5e7eb !important;
}

/* Selected Product Items (inline style overrides) */
body.dark-mode #selectedProductsContainer > div {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #selectedProductsContainer > div strong {
    color: #00a88f !important;
}

body.dark-mode #selectedProductsContainer > div [style*="color: #666"],
body.dark-mode #selectedProductsContainer > div [style*="color: rgb(102, 102, 102)"] {
    color: #9ca3af !important;
}

/* Quantity controls container */
body.dark-mode #selectedProductsContainer [style*="background: #f8f9fa"],
body.dark-mode #selectedProductsContainer [style*="background: rgb(248, 249, 250)"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

/* Quantity input */
body.dark-mode #selectedProductsContainer input[type="number"] {
    background: transparent !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

/* Price input */
body.dark-mode #selectedProductsContainer input[style*="background: white"],
body.dark-mode #selectedProductsContainer input[style*="border: 1px solid #dee2e6"] {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Order Summary */
body.dark-mode .order-summary {
    background: #374151 !important;
}

body.dark-mode .order-summary h3 {
    color: #f9fafb !important;
}

body.dark-mode .summary-item {
    border-color: #4b5563 !important;
}

body.dark-mode .summary-item span {
    color: #9ca3af !important;
}

body.dark-mode .summary-item strong {
    color: #f9fafb !important;
}

body.dark-mode .summary-item ul {
    color: #e5e7eb !important;
}

/* Summary Validation Details */
body.dark-mode #summaryValidationDetails {
    background: #374151 !important;
}

body.dark-mode #summaryValidationDetails p {
    color: #e5e7eb !important;
}

/* Analysis Results */
body.dark-mode #analysisResults {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #analysisResults h4 {
    color: #00a88f !important;
}

body.dark-mode #analysisMessage {
    color: #e5e7eb !important;
}

body.dark-mode #detectedProductsList {
    color: #e5e7eb !important;
}

body.dark-mode #detectedProductsList li {
    border-color: #4b5563 !important;
}

body.dark-mode #detectedTotal {
    color: #00a88f !important;
}

/* Analysis Results Success Banner (override inline #e8f5e9 background) */
body.dark-mode #analysisResults [style*="background: #e8f5e9"],
body.dark-mode #analysisResults [style*="background: rgb(232, 245, 233)"] {
    background: #064e3b !important;
    border-color: #059669 !important;
}

body.dark-mode #analysisResults [style*="background: #e8f5e9"] h4,
body.dark-mode #analysisResults [style*="background: rgb(232, 245, 233)"] h4 {
    color: #6ee7b7 !important;
}

body.dark-mode #analysisResults [style*="color: #2e7d32"],
body.dark-mode #analysisResults [style*="color: rgb(46, 125, 50)"] {
    color: #6ee7b7 !important;
}

body.dark-mode #analysisResults [style*="color: #1b5e20"],
body.dark-mode #analysisResults [style*="color: rgb(27, 94, 32)"] {
    color: #a7f3d0 !important;
}

/* Products Found Box (override inline white background) */
body.dark-mode #analysisResults > [style*="background: #fff"],
body.dark-mode #analysisResults > [style*="background: rgb(255, 255, 255)"] {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #analysisResults [style*="color: var(--primary-color)"] {
    color: #00a88f !important;
}

/* Products Found List Items */
body.dark-mode #analysisResults ul li {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode #analysisResults ul li strong {
    color: #f9fafb !important;
}

body.dark-mode #analysisResults ul li span {
    color: #9ca3af !important;
}

/* ========== CATCH-ALL FOR REMAINING WHITE BACKGROUNDS ========== */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background: rgb(255, 255, 255)"],
body.dark-mode [style*="background-color: rgb(255, 255, 255)"] {
    background: #1f2937 !important;
}

/* Force white text in cards */
body.dark-mode .card h1,
body.dark-mode .card h2,
body.dark-mode .card h3,
body.dark-mode .card h4,
body.dark-mode .card p,
body.dark-mode .card span,
body.dark-mode .card li,
body.dark-mode [class*="-card"] h1,
body.dark-mode [class*="-card"] h2,
body.dark-mode [class*="-card"] h3,
body.dark-mode [class*="-card"] h4,
body.dark-mode [class*="-card"] p,
body.dark-mode [class*="-card"] span,
body.dark-mode [class*="-card"] li {
    color: #e5e7eb !important;
}

/* Resource links in cards (exclude footer-link and nav-item) */
body.dark-mode .resource-link {
    color: #10b981 !important;
    border-color: #374151 !important;
}

body.dark-mode .resource-link:hover {
    background: #374151 !important;
}

/* Arrow icons in resource links */
body.dark-mode .resource-link::before,
body.dark-mode .arrow {
    color: #10b981 !important;
}

/* Check marks */
body.dark-mode .check,
body.dark-mode .checkmark,
body.dark-mode [class*="check"] {
    color: #10b981 !important;
}

/* ========== ABOUT JTI PAGE ========== */
body.dark-mode .about-page-container {
    background: transparent !important;
}

body.dark-mode .about-jti-access-card {
    background: transparent !important;
    border-color: transparent !important;
}

body.dark-mode .about-jti-access-card h2 {
    color: #f9fafb !important;
}

body.dark-mode .about-jti-access-card p {
    color: #d1d5db !important;
}

body.dark-mode .about-info-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .about-info-card h2,
body.dark-mode .about-info-card h3 {
    color: #f9fafb !important;
}

body.dark-mode .about-info-card p {
    color: #d1d5db !important;
}

/* ========== NEWSLETTER SECTION ========== */
body.dark-mode .newsletter-list {
    background: transparent !important;
}

body.dark-mode .newsletter-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .newsletter-item:hover {
    border-color: #00a88f !important;
}

body.dark-mode .newsletter-header {
    background: #374151 !important;
}

body.dark-mode .newsletter-header:hover {
    background: #4b5563 !important;
}

body.dark-mode .newsletter-date {
    color: #9ca3af !important;
}

body.dark-mode .newsletter-title {
    color: #f9fafb !important;
}

body.dark-mode .newsletter-toggle {
    color: #d1d5db !important;
}

body.dark-mode .newsletter-content {
    background: #1f2937 !important;
    color: #d1d5db !important;
}

body.dark-mode .newsletter-content p {
    color: #d1d5db !important;
}

/* ========== SUPPORT CENTER ========== */
body.dark-mode .support-container {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
}

body.dark-mode .support-info-card,
body.dark-mode .support-form-card {
    background: #1f2937 !important;
    border: none !important;
    border-color: transparent !important;
}

/* ========== PLATFORM FEATURES SECTION ========== */
body.dark-mode .platform-features-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .platform-features-card h2 {
    color: #f9fafb !important;
}

body.dark-mode .features-integrated-grid {
    border-color: #374151 !important;
}

body.dark-mode .feature-integrated-item {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .feature-integrated-item:hover {
    background: #4b5563 !important;
}

body.dark-mode .feature-integrated-item h3 {
    color: #f9fafb !important;
}

body.dark-mode .feature-integrated-item p {
    color: #d1d5db !important;
}


/* Language Selector Dark Mode */
body.dark-mode .language-btn {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .language-btn:hover {
    background: #4b5563 !important;
    border-color: #00a88f !important;
}

body.dark-mode .language-dropdown {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}

body.dark-mode .language-group-title {
    color: #9ca3af !important;
}

body.dark-mode .language-option,
body.dark-mode .language-option-hub {
    color: #f9fafb !important;
}

body.dark-mode .language-option:hover:not(.disabled),
body.dark-mode .language-option-hub:hover:not(.disabled) {
    background: #374151 !important;
    color: #00a88f !important;
}

body.dark-mode .language-option.active,
body.dark-mode .language-option-hub.active {
    background: #065f46 !important;
    color: #10b981 !important;
}

body.dark-mode .language-option.disabled,
body.dark-mode .language-option-hub.disabled {
    color: #6b7280 !important;
}

body.dark-mode .language-group {
    border-color: #374151 !important;
}

/* Forum Dark Mode */
body.dark-mode .forum-filters {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

body.dark-mode .form-select {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .form-select:hover {
    border-color: #00a88f !important;
}

body.dark-mode .forum-post {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .forum-post:hover {
    border-color: #00a88f !important;
}

body.dark-mode .post-title {
    color: #f9fafb !important;
}

body.dark-mode .post-content {
    color: #d1d5db !important;
}

body.dark-mode .post-footer {
    border-color: #374151 !important;
}

body.dark-mode .form-textarea {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .form-textarea:focus {
    border-color: #00a88f !important;
}

body.dark-mode .comment {
    background: #374151 !important;
    border-left-color: #00a88f !important;
}

body.dark-mode .comment-content {
    color: #d1d5db !important;
}

body.dark-mode .post-content-full {
    color: #d1d5db !important;
}

body.dark-mode .comments-section {
    border-color: #374151 !important;
}

body.dark-mode .comments-section h3 {
    color: #f9fafb !important;
}

body.dark-mode .forum-empty {
    color: #9ca3af !important;
}

body.dark-mode .forum-empty h3 {
    color: #d1d5db !important;
}

/* ========================================
   YOUR STORE DARK MODE
   ======================================== */

body.dark-mode .profitability-banner {
    background: linear-gradient(135deg, #007d6b 0%, #006655 100%);
}

body.dark-mode .form-select-small {
    background: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

body.dark-mode .submissions-count.high {
    background: #1e4620;
    color: #7de37d;
}

body.dark-mode .submissions-count.medium {
    background: #1e3a3a;
    color: #6bcfcf;
}

body.dark-mode .submissions-count.low {
    background: #4a1e1e;
    color: #f57d7d;
}

body.dark-mode .training-mini-bar {
    background: #333;
}

/* Training Cards Dark Mode */
body.dark-mode .training-card {
    border-color: #404040;
    background: #1e1e1e;
}

body.dark-mode .training-card:hover {
    border-color: var(--primary-color);
    background: #252525;
}

body.dark-mode .progress-bar {
    background: #333;
}

/* Barometer Cards Dark Mode */
body.dark-mode .barometer-card {
    border-color: #404040;
    background: #1e1e1e;
}

body.dark-mode .barometer-card.your-store {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(0, 168, 143, 0.1) 0%, rgba(0, 168, 143, 0.15) 100%);
}

body.dark-mode .barometer-card.top-performer {
    border-color: #b8960a;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.15) 100%);
}

body.dark-mode .rank-badge {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .stat-item {
    background: #2d2d2d;
}

/* Story Cards Dark Mode */
body.dark-mode .story-card {
    background: #1e1e1e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .story-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

body.dark-mode .story-card.featured {
    border-color: #b8960a;
}

body.dark-mode .btn-story-read {
    background: var(--primary-color);
}

body.dark-mode .btn-story-read:hover {
    background: var(--primary-hover);
}

/* ========================================
   TRIP STORY DARK MODE
   ======================================== */

body.dark-mode .trip-story-banner {
    background: linear-gradient(135deg, #5568d3 0%, #6a3d8a 100%);
}

body.dark-mode .reward-info-box {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
    border-left-color: var(--primary-color);
}

body.dark-mode .rating-stars .star {
    color: #555;
}

body.dark-mode .rating-stars .star:hover,
body.dark-mode .rating-stars .star.active {
    color: #ffd700;
}

body.dark-mode .checkbox-label {
    color: #e0e0e0;
}

/* ========================================
   ACTIVE CAMPAIGNS & PRIZES DARK MODE
   ======================================== */

body.dark-mode .prize-card {
    background: #1e1e1e;
    border-color: #404040;
}

body.dark-mode .prize-card.featured {
    background: linear-gradient(135deg, #2d2618 0%, #1e1e1e 100%);
    border-color: #b8960a;
}

body.dark-mode .prize-deadline {
    background: #2d2d2d;
    color: #e0e0e0;
}

/* ========================================
   WINNINGS STORIES DARK MODE
   ======================================== */

body.dark-mode .winnings-stories-section {
    background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
}

body.dark-mode .winnings-story-card {
    background: #1e1e1e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode .story-header {
    border-bottom-color: #404040;
}

body.dark-mode .story-image-placeholder {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
}

body.dark-mode .btn-share-story {
    background: var(--primary-color);
}

body.dark-mode .btn-share-story:hover {
    background: var(--primary-hover);
}

/* ========================================
   PERFORMANCE SECTION DARK MODE
   ======================================== */

body.dark-mode .performance-stat-card {
    background: #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.dark-mode .performance-comparison-section {
    background: #1e293b;
    border: 1px solid #2d3748;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .performance-comparison-section::after {
    background: linear-gradient(90deg, transparent, rgba(0, 168, 143, 0.5) 30%, rgba(102, 126, 234, 0.4) 70%, transparent);
}

/* Platform comparison cards */
body.dark-mode .comparison-card {
    background: #1f2937;
    border-color: #374151;
}
body.dark-mode .comparison-card.achievers-theme {
    border-color: #667eea;
}
body.dark-mode .comparison-card.connexus-theme {
    border-color: #f093fb;
}
body.dark-mode .comparison-card .comparison-header {
    background: #374151;
}
body.dark-mode .comparison-card.achievers-theme .comparison-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
}
body.dark-mode .comparison-card.connexus-theme .comparison-header {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(245, 87, 108, 0.2) 100%);
}
body.dark-mode .comparison-stat {
    border-bottom-color: #374151;
}
body.dark-mode .comparison-stat .stat-label {
    color: #9ca3af;
}
body.dark-mode .comparison-stat .stat-value {
    color: #f3f4f6;
}

/* Performance section comparison headers */
body.dark-mode .comparison-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: #2d3748;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
}
body.dark-mode .comparison-header h2 {
    color: #f3f4f6;
}
body.dark-mode .comparison-header p {
    color: #9ca3af;
}


body.dark-mode .performance-tips-card {
    background: linear-gradient(135deg, #1e293b 0%, #243447 100%);
    border: 1px solid #2d3748;
    border-left: 4px solid var(--primary-color);
}

/* Training CTA Banner — outer container is already dark-native (#0d1f2d) */
body.dark-mode .training-cta-outer {
    border-color: rgba(0, 168, 143, 0.28);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

/* MODULE PROGRESS CARDS DARK MODE */

body.dark-mode .perf-module-card {
    background: #1e1e1e;
    border-color: #404040;
}

body.dark-mode .perf-module-card.completed {
    background: linear-gradient(135deg, #1a3a35 0%, #1e1e1e 100%);
    border-color: var(--primary-color);
}

body.dark-mode .perf-module-card.in-progress {
    background: linear-gradient(135deg, #2a2200 0%, #1e1e1e 100%);
    border-color: #ffc107;
}

body.dark-mode .perf-module-number {
    background: #2d2d2d;
    color: #999;
}

body.dark-mode .perf-module-card.completed .perf-module-number {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .perf-module-card.in-progress .perf-module-number {
    background: #ffc107;
    color: white;
}

/* ========================================
   PASSWORD TOGGLE DARK MODE
   ======================================== */

body.dark-mode .toggle-password {
    color: #999;
}

body.dark-mode .toggle-password:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

/* ─── Training Viewer dark mode (editorial palette) ─────────────────── */
body.dark-mode #trainingViewerSection {
    background: #14110d;
    background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
}
body.dark-mode .tv-stage              { background: transparent; }

/* Card shell — header + footer strips */
body.dark-mode .tv-card-shell         { border-color: #2d2a24; box-shadow: 0 4px 32px rgba(0,0,0,0.38); }
body.dark-mode .tv-card-header        { background: #1c1a16; border-bottom-color: #2d2a24; }
body.dark-mode .tv-card-footer        { background: #1c1a16; border-top-color: #2d2a24; }
body.dark-mode .tv-progress-track     { background: #2d2a24; }
body.dark-mode .tv-cp-title           { color: #e8e0d4; }
body.dark-mode .tv-cp-eyebrow         { color: #00d6b5; }
body.dark-mode .tv-exit-btn           { border-color: #3d3a32; color: #9a9590; }
body.dark-mode .tv-exit-btn:hover     { border-color: #c0392b; color: #c0392b; background: rgba(138,42,26,0.1); }
body.dark-mode .tv-header-points      { background: #25221c; border-color: #3d3a32; color: #e8e0d4; }
body.dark-mode .tv-pts-label          { color: #8a857d; }
body.dark-mode .tv-page-count         { color: #8a857d; }
body.dark-mode .tv-btn-back           { background: #25221c; border-color: #3d3a32; color: #c4bdb0; }
body.dark-mode .tv-btn-back:hover     { border-color: #00a88f; color: #00a88f; background: rgba(0,168,143,0.06); }
body.dark-mode .tv-btn-next           { background: #f2ebe0; border-color: #f2ebe0; color: #1a2a4a; }
body.dark-mode .tv-btn-next:hover:not(:disabled) { background: #00a88f; border-color: #00a88f; color: #fff; }

/* Slides */
body.dark-mode .tv-slide              { background: #1e1b17; border-color: #2d2a24; box-shadow: 0 2px 28px rgba(0,0,0,0.42); }
body.dark-mode .tv-slide-light        { background: #1e1b17; border-top-color: #00a88f; }
body.dark-mode .tv-slide-activity     { background: #221c14; border-top-color: #e07b2a; border-color: #38301f; }
body.dark-mode .tv-slide-module-start { background: #1e1b17; border-top-color: #00a88f; }

/* Typography */
body.dark-mode .tv-slide-heading,
body.dark-mode .tv-activity-title,
body.dark-mode .tv-module-start-title,
body.dark-mode .tv-disclaimer-title,
body.dark-mode .tv-variant-pack-name  { color: #e8e0d4; }
body.dark-mode .tv-slide-intro,
body.dark-mode .tv-slide-body,
body.dark-mode .tv-italic-highlight   { color: #b0a898; }
body.dark-mode .tv-slide-body strong,
body.dark-mode .tv-slide-intro strong { color: #e8e0d4; }
body.dark-mode .tv-slide-quote        { color: #9a9288; border-left-color: #00a88f; }
body.dark-mode .tv-cta-text,
body.dark-mode .tv-start-cta          { color: #e8e0d4; }
body.dark-mode .tv-jti-is-list p      { color: #e8e0d4; }
body.dark-mode .tv-section-label      { color: #00d6b5; }

/* Components */
body.dark-mode .tv-callout            { background: rgba(0,168,143,0.08); border-color: rgba(0,168,143,0.3); color: #b0a898; }
body.dark-mode .tv-callout-box        { background: rgba(0,168,143,0.06); }
body.dark-mode .tv-callout-box p      { color: #b0a898; }
body.dark-mode .tv-info-list li       { border-color: #2d2a24; color: #b0a898; }
body.dark-mode .tv-disclaimer-block   { background: rgba(255,255,255,0.02); border-color: #2d2a24; }
body.dark-mode .tv-disclaimer-block p { color: #b0a898; }

body.dark-mode .tv-match-desc         { background: #25221c; border-color: #3d3a32; color: #e8e0d4; }
body.dark-mode .tv-match-desc:hover   { border-color: #e07b2a; background: #2d2218; }
body.dark-mode .tv-activity-instruction { background: rgba(224,123,42,0.08); color: #c4bdb0; }
body.dark-mode .tv-match-col-label    { color: #8a857d; }

body.dark-mode .tv-brand-profile      { background: #25221c; border-color: #3d3a32; }
body.dark-mode .tv-brand-profile h3   { color: #e8e0d4; }
body.dark-mode .tv-brand-profile p    { color: #b0a898; }
body.dark-mode .tv-agenda-item        { background: #25221c; border-color: #3d3a32; color: #b0a898; }
body.dark-mode .tv-curiosity-trigger  { background: rgba(245,200,66,0.08); border-color: #5a4818; color: #c4bdb0; }

body.dark-mode .tv-completion-card    { background: #1e1b17; border-top-color: #00a88f; }
body.dark-mode .tv-completion-card h2 { color: #e8e0d4; }
body.dark-mode .tv-completion-card p  { color: #9a9288; }
body.dark-mode .tv-retention-quote    { color: #e8e0d4; }
body.dark-mode .tv-cs-text            { color: #2d2a24; }

body.dark-mode .training-points-badge { background: linear-gradient(135deg, #0d2137 0%, #091827 100%); }

/* ─── Mobile drawer dark mode ────────────────────────────────────────── */
body.dark-mode .mob-menu-btn         { border-color: #374151; }
body.dark-mode .mob-menu-btn span    { background: #e5e7eb; }
body.dark-mode .mob-drawer-panel     { background: #1f2937; }
body.dark-mode .mob-drawer-header    { border-bottom-color: #374151; }
body.dark-mode .mob-drawer-close     { border-color: #374151; color: #9ca3af; }
body.dark-mode .mob-drawer-close:hover { background: #374151; color: #e5e7eb; }
body.dark-mode .mob-nav-item         { color: #d1d5db; }
body.dark-mode .mob-nav-item svg     { color: #6b7280; }
body.dark-mode .mob-nav-item:hover   { background: rgba(0,168,143,0.1); color: #34d399; border-left-color: #34d399; }
body.dark-mode .mob-nav-item:hover svg { color: #34d399; }
body.dark-mode .mob-drawer-footer    { border-top-color: #374151; }
body.dark-mode .mob-drawer-signout   { border-color: #374151; color: #9ca3af; }
body.dark-mode .mob-drawer-signout:hover { border-color: #ef4444; color: #ef4444; }
body.dark-mode .mob-drawer-overlay   { background: rgba(0,0,0,0.65); }
body.dark-mode .mob-drawer-section-label { color: #6b7280; }
body.dark-mode .mob-drawer-divider       { background: #374151; }
body.dark-mode .mob-nav-item.mob-nav-parent .mob-nav-caret { color: #6b7280; }
body.dark-mode .mob-nav-item.mob-nav-parent.open .mob-nav-caret { color: #34d399; }

/* ── Training CTA Banner (dark mode) ─────────────────────────────────────── */
body.dark-mode .training-cta-outer {
    background: linear-gradient(135deg, #0d1f2d 0%, #112a3c 100%);
    border-color: rgba(0, 168, 143, 0.28);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

body.dark-mode .training-cta-info {
    background: linear-gradient(135deg, #0d1f2d 0%, #112a3c 100%);
}

body.dark-mode .training-cta-heading {
    color: #ffffff;
}

body.dark-mode .training-cta-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .training-cta-flow-step {
    background: rgba(0, 168, 143, 0.14);
    border-color: rgba(0, 168, 143, 0.35);
    color: #ffffff;
}

body.dark-mode .training-cta-flow-step:hover {
    background: rgba(0, 168, 143, 0.22);
    border-color: rgba(0, 168, 143, 0.6);
}

body.dark-mode .training-cta-flow-arrow {
    color: #34d399;
}

body.dark-mode .training-cta-img-btn {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .training-cta-click-hint {
    background: linear-gradient(135deg, #0f2636 0%, #143147 100%);
    border-top-color: rgba(0, 168, 143, 0.28);
    border-bottom-color: rgba(0, 168, 143, 0.28);
}

body.dark-mode .training-cta-click-hint-text,
body.dark-mode .training-cta-click-hint-arrow {
    color: #34d399;
}

/* ========== CASHIER REGISTRATION — CONFIRM STORE & SSO INFO CARDS ========== */

/* "Confirm Your Store" — green store info card */
body.dark-mode #cashierRegStoreConfirmFound > p {
    color: #d1d5db !important;
}
body.dark-mode #cashierRegStoreConfirmFound > div {
    background: #064e3b !important;
    border-color: #00a88f !important;
}
body.dark-mode #cashierRegFoundStoreName {
    color: #f9fafb !important;
}
body.dark-mode #cashierRegFoundStoreLocation {
    color: #d1d5db !important;
}

/* "Sign in with JTI Achievers" — yellow phone info card */
body.dark-mode #cashierRegSSOPhoneInfo {
    background: #422006 !important;
    border-color: #92400e !important;
    color: #f9fafb !important;
}
body.dark-mode #cashierRegSSOPhoneInfo .cashier-reg-sso-phone-label,
body.dark-mode #cashierRegSSOPhoneInfo #cashierRegSSOPhone {
    color: #fcd34d !important;
}
body.dark-mode #cashierRegSSOPhoneInfo .cashier-reg-sso-username-hint {
    color: #d1d5db !important;
}

/* ========== MY PROFILE — STORE LIST ========== */

body.dark-mode .profile-store-item {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

body.dark-mode .profile-store-item.primary {
    background: #064e3b;
    border-color: #00a88f;
}

body.dark-mode .profile-store-badge {
    background: #065f46;
    color: #34d399;
}

/* ========== MODULE 5: BRAND TABLE SLIDES (slides 6–9) ========== */

body.dark-mode .tv-mod5-bslide-header          { border-bottom-color: rgba(255,255,255,0.10); }
body.dark-mode .tv-mod5-bslide-seg-title       { color: #e8e0d4; }
body.dark-mode .tv-mod5-bslide-info > span:last-child { color: #b0a898; }
body.dark-mode .tv-mod5-bslide-subtitle        { color: #e8e0d4; }

body.dark-mode .tv-mod5-brand-tbl              { background: #1e1c17; border-color: #3d3a32; }
body.dark-mode .tv-mod5-tbl-logo-row           { background: #252219; border-bottom-color: #3d3a32; }
body.dark-mode .tv-mod5-tbl-seg-cell           { background: #252219; }
body.dark-mode .tv-mod5-tbl-logo-cell          { background: #252219; }
body.dark-mode .tv-mod5-bat-wm                 { color: #7ba4d4; }
body.dark-mode .tv-mod5-tbl-body               { background: #1e1c17; }
body.dark-mode .tv-mod5-tbl-pack-cell,
body.dark-mode .tv-mod5-tbl-pack-cell-empty-white,
body.dark-mode .tv-mod5-tbl-pack-pmi-value     { background: #252219; }

/* ========== YOUR STORE DASHBOARD ========== */

/* Section cards */
body.dark-mode .your-store-container           { background: transparent !important; }
body.dark-mode .store-section                  { background: #1e2538 !important; border: 1px solid #2a3350; box-shadow: none; }

/* Staff table */
body.dark-mode .staff-table thead              { background: #1e2438; }
body.dark-mode .staff-table th                 { color: #e5e7eb; border-bottom-color: #2d3348; }
body.dark-mode .staff-table td                 { border-bottom-color: #252a3a; color: #d1d5db; }
body.dark-mode .staff-row:hover                { background: #1e2438; }
body.dark-mode .staff-name                     { color: #f3f4f6; }
body.dark-mode .staff-pts                      { color: #f3f4f6; }
body.dark-mode .last-active                    { color: #9ca3af; }
body.dark-mode .staff-modules-count            { color: #9ca3af; }
body.dark-mode .staff-modules-bar-wrapper      { background: #2d3348; }

/* Status badges */
body.dark-mode .status-badge.status-active     { background: #064e3b; color: #6ee7b7; }
body.dark-mode .status-badge.status-pending    { background: #451a03; color: #fcd34d; }

/* Section header & subtitle */
body.dark-mode .section-header h2              { color: #f3f4f6; }
body.dark-mode .section-sub                    { color: #9ca3af; }

/* Regional leaderboard items */
body.dark-mode .barometer-item                 { border-radius: 8px; }
body.dark-mode .barometer-item:hover           { background: #1e2438; }
body.dark-mode .barometer-item.current-user    { background: linear-gradient(135deg, #0d2d26 0%, #112820 100%); border-color: var(--primary-color); }
body.dark-mode .barometer-rank                 { color: #9ca3af; }
body.dark-mode .barometer-rank.top-3           { color: #fbbf24; }
body.dark-mode .barometer-name                 { color: #f3f4f6; }
body.dark-mode .barometer-sales-count          { color: #9ca3af; }
body.dark-mode .barometer-bar-wrapper          { background: #2d3348; }
body.dark-mode .barometer-badge                { background: var(--primary-color); color: #fff; }

body.dark-mode .barometer-active-staff         { color: #9ca3af; }

/* ── My Rewards: kill the global button-chrome on voucher tiles + modal X ───
   The blanket `body.dark-mode button:not(.theme-toggle)` rule earlier in
   this file paints every <button> with a grey background + border at
   specificity (0,2,2). To win the !important tie-break we need at least
   the same specificity AND to come later in the cascade. Including the
   `button` tag in each selector lifts these to (0,2,2), and being lower
   in the file means we win. */
body.dark-mode button.mr-voucher-tile,
body.dark-mode button.mr-voucher-tile:hover,
body.dark-mode button.mr-voucher-tile:focus,
body.dark-mode button.mr-voucher-tile-real,
body.dark-mode button.mr-voucher-tile-real:hover,
body.dark-mode button.mr-voucher-tile-real:focus,
body.dark-mode button.mr-voucher-tile-placeholder {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.dark-mode button.mr-modal-close,
body.dark-mode button.mr-modal-close:hover,
body.dark-mode button.mr-modal-close:focus,
body.dark-mode button.mr-modal-close:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #cbd5e1 !important;
}
body.dark-mode button.mr-modal-close:hover { color: #f9fafb !important; }