/* ============================================================
   GetCollab Dark Mode
   Activated by html.dark class (toggled via dark-mode.js)
   Admin pages always dark; toggle persisted in localStorage
   ============================================================ */

/* ── Toggle Button ─────────────────────────────────────────── */
#dm-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  color: inherit;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
#dm-toggle:hover {
  background: rgba(0,0,0,0.06);
  transform: scale(1.08);
}
html.dark #dm-toggle {
  border-color: rgba(255,255,255,0.18);
  color: #f1f5f9;
}
html.dark #dm-toggle:hover {
  background: rgba(255,255,255,0.08);
}
/* Pages whose nav is always dark (notification-settings, inbox) */
nav .nav-logo ~ #dm-toggle,
nav:has(.nav-logo) #dm-toggle {
  border-color: rgba(255,255,255,0.28) !important;
  color: #e5e5e5 !important;
}
nav .nav-logo ~ #dm-toggle:hover,
nav:has(.nav-logo) #dm-toggle:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* ── Language Toggle ────────────────────────────────────────── */
#lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid rgba(0,0,0,0.18);
  background: transparent;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, background 0.2s, opacity 0.15s;
  color: inherit;
  flex-shrink: 0;
  padding: 0 8px;
}
#lang-toggle:hover {
  background: rgba(0,0,0,0.06);
}
html.dark #lang-toggle {
  border-color: rgba(255,255,255,0.22);
  color: #e5e5e5;
}
html.dark #lang-toggle:hover {
  background: rgba(255,255,255,0.08);
}
/* Dark navs (notification-settings, inbox) */
nav .nav-logo ~ #lang-toggle,
nav:has(.nav-logo) #lang-toggle {
  border-color: rgba(255,255,255,0.3) !important;
  color: #e5e5e5 !important;
}

/* ── Dark mode: global body ─────────────────────────────────── */
html.dark body {
  background-color: #121212 !important;
  color: #e2e8f0 !important;
}

/* ── Dark mode: headings ─────────────────────────────────────── */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #f1f5f9 !important;
}

/* ── Dark mode: nav (light-themed pages) ───────────────────── */
html.dark nav {
  background: rgba(18,18,18,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom-color: #2a2a2a !important;
}
html.dark nav[style*="display:none"] {
  background: #0a0a0a !important;
}

/* ── Dark mode: nav text ─────────────────────────────────────── */
html.dark .nav-user,
html.dark .nav-user span {
  color: #94a3b8 !important;
}
html.dark .btn-logout {
  border-color: #3a3a3a !important;
  color: #94a3b8 !important;
}
html.dark .btn-logout:hover {
  border-color: #f1f5f9 !important;
  color: #f1f5f9 !important;
}
html.dark .nav-links a {
  color: #94a3b8 !important;
}
html.dark .nav-links a:hover,
html.dark .nav-links a.active {
  color: #f1f5f9 !important;
}
html.dark .nav-links a.profile-link {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark .nav-links a.profile-link:hover {
  background: #e2e8f0 !important;
  color: #111 !important;
}
html.dark .nav-links a.admin-link {
  background: #E9F4A1 !important;
  color: #111827 !important;
}

/* ── Dark mode: logo pill ──────────────────────────────────── */
html.dark .logo-pill {
  background: #E9F4A1 !important;
  color: #111 !important;
}
html.dark .logo-pill span {
  color: #E9F4A1 !important;
}

/* ── Dark mode: cards / white containers ────────────────────── */
html.dark .photo-card,
html.dark .form-card,
html.dark .tabs,
html.dark .deal-card,
html.dark .match-card,
html.dark .match-card-full,
html.dark .payout-card,
html.dark .section-card,
html.dark .login-card,
html.dark .card,
html.dark .profile-preview-card,
html.dark .card-block,
html.dark .stats-card,
html.dark .empty-state,
html.dark .notification-card,
html.dark .empty-card {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25) !important;
}

/* ── Dark mode: tab buttons ─────────────────────────────────── */
html.dark .tab-btn {
  color: #94a3b8 !important;
}
html.dark .tab-btn.active {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark .tab-btn:hover:not(.active) {
  background: #2a2a2a !important;
}

/* ── Dark mode: welcome banner (already dark bg, keep it) ───── */
html.dark .welcome-banner {
  background: #0f0f0f !important;
}

/* ── Dark mode: form elements ───────────────────────────────── */
html.dark input,
html.dark textarea,
html.dark select {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #555 !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #E9F4A1 !important;
  box-shadow: 0 0 0 3px rgba(233,244,161,0.15) !important;
  outline: none;
}

/* ── Dark mode: input prefix groups (app.html @handle fields) ─ */
html.dark .input-prefix-group {
  background: #1e1e1e !important;
  border-color: #333 !important;
}
html.dark .input-prefix-group:focus-within {
  border-color: #E9F4A1 !important;
  box-shadow: 0 0 0 3px rgba(233,244,161,0.15) !important;
}
html.dark .input-prefix {
  color: #666 !important;
}

/* ── Dark mode: labels and misc text ────────────────────────── */
html.dark label,
html.dark .label,
html.dark .form-label,
html.dark .field-label {
  color: #cbd5e1 !important;
}
html.dark .form-card .section-desc,
html.dark .subtitle,
html.dark .desc,
html.dark .meta,
html.dark p {
  color: #94a3b8 !important;
}
/* Re-allow inheriting text in sections that have their own color scheme */
html.dark .welcome-banner p,
html.dark .welcome-banner h1,
html.dark .how-section p,
html.dark .how-section h2 {
  color: inherit !important;
}

/* ── Dark mode: secondary/gray text ─────────────────────────── */
html.dark .gray,
html.dark .muted,
html.dark small {
  color: #6b7280 !important;
}

/* ── Dark mode: borders and dividers ────────────────────────── */
html.dark hr,
html.dark .divider {
  border-color: #2a2a2a !important;
}

/* ── Dark mode: buttons ─────────────────────────────────────── */
html.dark .btn-pill {
  background: #252525 !important;
  color: #f1f5f9 !important;
  border-color: #3a3a3a !important;
}
html.dark .btn-pill:hover {
  background: #333 !important;
}
html.dark .btn-pill-green {
  background: #E9F4A1 !important;
  color: #111 !important;
  border-color: #E9F4A1 !important;
}
html.dark .btn-pill-green:hover {
  background: #ddef80 !important;
}
html.dark .btn-primary {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark .btn-primary:hover:not(:disabled) {
  background: #e2e8f0 !important;
}
html.dark .btn-secondary {
  border-color: #3a3a3a !important;
  color: #94a3b8 !important;
}
html.dark .btn-secondary:hover {
  border-color: #f1f5f9 !important;
  color: #f1f5f9 !important;
}

/* ============================================================
   LANDING PAGE (index.html) — Dark Mode
   ============================================================ */

html.dark .hero {
  background: #121212 !important;
}
html.dark .hero::before {
  opacity: 0.15 !important;
}

/* FIX #1: "first collab" highlight — dark text on lime background */
html.dark .hero h1 .highlight {
  color: #111 !important;
}

html.dark .hero-sub {
  color: #94a3b8 !important;
}
html.dark .hero-note {
  color: #6b7280 !important;
}
html.dark .hero-label {
  color: #a3c93a !important;
}

/* How it works section (already dark bg) */
html.dark .how-section {
  background: #0a0a0a !important;
}
html.dark .step {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
}
html.dark .step:hover {
  border-color: #E9F4A1 !important;
}
html.dark .step h3,
html.dark .step-title {
  color: #f1f5f9 !important;
}
html.dark .step p {
  color: #94a3b8 !important;
}

/* FIX #2: Commission/business model section — lime bg keeps dark text */
html.dark .commission-section {
  background: #E9F4A1 !important;
}
html.dark .commission-section h2 {
  color: #111 !important;
}
html.dark .commission-section h2 strong {
  color: #111 !important;
}
html.dark .commission-section h2 .you-highlight {
  color: #111 !important;
}
html.dark .commission-section p {
  color: #333 !important;
}
/* The CTA button inside commission uses inline style with var(--black) bg, ensure it stays dark */
html.dark .commission-section .btn-pill {
  background: #111 !important;
  color: #f1f5f9 !important;
}

/* FIX #3: "Who we are" section — switch to dark background */
html.dark .us-section {
  background: #161616 !important;
}
html.dark .us-section h2 {
  color: #f1f5f9 !important;
}
html.dark .us-section p {
  color: #94a3b8 !important;
}
html.dark .us-section .section-label {
  color: #E9F4A1 !important;
}

/* FIX #4: Contact section — switch to dark background */
html.dark .contact-section {
  background: #121212 !important;
  border-top-color: #2a2a2a !important;
}
html.dark .contact-section h2 {
  color: #f1f5f9 !important;
}
html.dark .contact-section .contact-sub {
  color: #94a3b8 !important;
}
html.dark .contact-section .section-label {
  color: #E9F4A1 !important;
}
html.dark .contact-form input,
html.dark .contact-form textarea {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e2e8f0 !important;
}
html.dark .contact-form button {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark .contact-form button:hover {
  background: #e2e8f0 !important;
}
html.dark .contact-success {
  background: rgba(233,244,161,0.15) !important;
  color: #E9F4A1 !important;
}
html.dark .contact-error {
  background: rgba(239,68,68,0.12) !important;
  color: #fca5a5 !important;
}

/* Other landing page sections */
html.dark .trust-section,
html.dark .stats-section,
html.dark .faq-section,
html.dark .cta-section {
  background: #121212 !important;
}
html.dark .faq-item {
  border-color: #2a2a2a !important;
}
html.dark .faq-q {
  color: #f1f5f9 !important;
}
html.dark .faq-a {
  color: #94a3b8 !important;
}
html.dark .testimonial-card,
html.dark .feature-card {
  background: #1e1e1e !important;
  border-color: #2a2a2a !important;
}
html.dark .feature-card h3 {
  color: #f1f5f9 !important;
}
html.dark .feature-card p {
  color: #94a3b8 !important;
}

/* Glass bg for nav on index */
html.dark .glass-bg {
  background: rgba(18,18,18,0.95) !important;
}

/* Footer */
html.dark footer {
  background: #0a0a0a !important;
}

/* ============================================================
   LOGIN PAGE (login.html) — Dark Mode
   ============================================================ */

html.dark .login-wrapper {
  background: #121212 !important;
}
html.dark .login-card {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important;
}
html.dark .login-card .subtitle {
  color: #94a3b8 !important;
}
html.dark .divider-text {
  color: #6b7280 !important;
}
html.dark .btn-google {
  background: #252525 !important;
  border-color: #3a3a3a !important;
  color: #f1f5f9 !important;
}
html.dark .btn-google:hover {
  background: #333 !important;
}

/* ============================================================
   APP PAGE (app.html) — Dark Mode (FIX #5)
   ============================================================ */

/* Photo upload card */
html.dark .photo-circle {
  background: #252525 !important;
  border-color: #3a3a3a !important;
}
html.dark .photo-circle:hover {
  border-color: #E9F4A1 !important;
}
html.dark .photo-info h3 {
  color: #f1f5f9 !important;
}
html.dark .photo-info p {
  color: #94a3b8 !important;
}

/* Platform label checkboxes */
html.dark .platform-label {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #94a3b8 !important;
}
html.dark .platform-label:hover {
  border-color: #f1f5f9 !important;
  color: #f1f5f9 !important;
}
html.dark .platform-label.checked {
  background: #f1f5f9 !important;
  border-color: #f1f5f9 !important;
  color: #111 !important;
}

/* Platform fields container */
html.dark .platform-fields {
  background: rgba(233,244,161,0.05) !important;
  border-color: #2a2a2a !important;
}
html.dark .platform-fields-header {
  color: #f1f5f9 !important;
}

/* Kit upload section */
html.dark .kit-upload-section {
  background: rgba(255,92,53,0.06) !important;
  border-color: rgba(255,92,53,0.2) !important;
}
html.dark .kit-upload-info h4 {
  color: #f1f5f9 !important;
}
html.dark .kit-upload-info p {
  color: #94a3b8 !important;
}
html.dark .btn-upload-kit {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark .btn-upload-kit:hover {
  background: #e2e8f0 !important;
}
html.dark .btn-upload-photo {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark .btn-upload-photo:hover {
  background: #e2e8f0 !important;
}

/* Chip selectors (collab types, brand preferences) */
html.dark .chip {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #94a3b8 !important;
}
html.dark .chip:hover {
  border-color: #E9F4A1 !important;
  color: #E9F4A1 !important;
}
html.dark .chip.selected {
  background: #f1f5f9 !important;
  border-color: #f1f5f9 !important;
  color: #111 !important;
}

/* Validation hints */
html.dark .validation-hint {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.15) !important;
  color: #fca5a5 !important;
}

/* Form field backgrounds */
html.dark .form-field {
  background: #1e1e1e !important;
  border-color: #333 !important;
}
html.dark .form-group input,
html.dark .form-group textarea {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e2e8f0 !important;
}

/* Status badge */
html.dark .status-badge {
  background: #252525 !important;
}

/* Toast notifications */
html.dark .toast {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* Others input group */
html.dark .others-input-group label {
  color: #cbd5e1 !important;
}

/* ============================================================
   PROFILE PAGE (profile.html) — Dark Mode (FIX #6)
   ============================================================ */

/* Profile header */
html.dark .profile-avatar-large {
  background: #252525 !important;
  color: #94a3b8 !important;
}

/* Stat items — the cards showing social stats, contact info */
html.dark .stat-item {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}
html.dark .stat-label {
  color: #6b7280 !important;
}
html.dark .stat-value {
  color: #f1f5f9 !important;
}
html.dark .stat-value.empty {
  color: #555 !important;
}

/* Chip tags (collab types, brand preferences on profile view) */
html.dark .chip-tag {
  background: rgba(233,244,161,0.12) !important;
  color: #E9F4A1 !important;
}

/* Card icon backgrounds */
html.dark .card-icon {
  background: rgba(233,244,161,0.12) !important;
}

/* Bio text */
html.dark #profileBio {
  color: #94a3b8 !important;
}

/* Profile email text */
html.dark .profile-header-info p {
  color: #94a3b8 !important;
}

/* Edit profile button */
html.dark a.btn-primary {
  background: #f1f5f9 !important;
  color: #111 !important;
}
html.dark a.btn-primary:hover {
  background: #e2e8f0 !important;
}

/* ============================================================
   NOTIFICATION SETTINGS — Dark Mode
   ============================================================ */

html.dark .card-header {
  background: #161616 !important;
}
html.dark .card-body {
  background: #1e1e1e !important;
}
html.dark .toggle-row {
  border-color: #2a2a2a !important;
}
html.dark .toggle-label h3 {
  color: #f1f5f9 !important;
}
html.dark .toggle-label p {
  color: #94a3b8 !important;
}
html.dark .contact-icon {
  background: #252525 !important;
  border-color: #3a3a3a !important;
}
html.dark .contact-value {
  color: #f1f5f9 !important;
}
html.dark .contact-type {
  color: #6b7280 !important;
}
html.dark .contact-edit {
  color: #94a3b8 !important;
}
html.dark .history-table th {
  color: #6b7280 !important;
  border-color: #2a2a2a !important;
}
html.dark .history-table td {
  border-color: #2a2a2a !important;
  color: #94a3b8 !important;
}
html.dark .history-table .amount {
  color: #f1f5f9 !important;
}

/* ============================================================
   SCROLLBARS — Dark Mode
   ============================================================ */

html.dark ::-webkit-scrollbar-track {
  background: #121212;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* ============================================================
   HOTBAR — Light Mode Overrides (app/profile/notif/deal-manager)
   These pages have hardcoded dark navs — override in light mode
   ============================================================ */

html:not(.dark) nav:has(.nav-logo) {
  background: #ffffff !important;
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) nav:has(.nav-logo) .nav-logo {
  background: #111827 !important;
  color: #E9F4A1 !important;
}
html:not(.dark) nav:has(.nav-logo) .nav-links a {
  color: #6b7280 !important;
}
html:not(.dark) nav:has(.nav-logo) .nav-links a:hover,
html:not(.dark) nav:has(.nav-logo) .nav-links a.active {
  color: #111827 !important;
}
html:not(.dark) nav:has(.nav-logo) .nav-logout-link {
  color: #6b7280 !important;
}
html:not(.dark) nav:has(.nav-logo) .hamburger-btn {
  border-color: #e5e7eb !important;
}
html:not(.dark) nav:has(.nav-logo) .hamburger-btn span {
  background: #6b7280 !important;
}
/* Deal Manager tabs — light mode */
html:not(.dark) .dm-tabs {
  background: #ffffff;
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) .dm-tab {
  color: #9ca3af !important;
}
html:not(.dark) .dm-tab:hover {
  color: #111827 !important;
}
html:not(.dark) .dm-tab.active {
  color: #111827 !important;
  border-bottom-color: #111827 !important;
}

/* ============================================================
   INBOX — Light Mode Overrides (inbox.html is dark by default)
   ============================================================ */

html:not(.dark) body.inbox-page {
  background: #f8f9fa !important;
  color: #111827 !important;
}
html:not(.dark) .inbox-nav,
html:not(.dark) body.inbox-page nav {
  background: #fff !important;
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) .nav-logo {
  background: rgba(0,0,0,0.08) !important;
  color: #111827 !important;
}
html:not(.dark) body.inbox-page .sidebar {
  background: #fff !important;
  border-right-color: #e5e7eb !important;
}
html:not(.dark) body.inbox-page .sidebar-header {
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) body.inbox-page .sidebar-header h2 {
  color: #111827 !important;
}
html:not(.dark) body.inbox-page .sidebar-header .subtitle {
  color: #6b7280 !important;
}
html:not(.dark) body.inbox-page .conv-item {
  border-bottom-color: #f0f0f0 !important;
}
html:not(.dark) body.inbox-page .conv-item:hover {
  background: #f5f5f5 !important;
}
html:not(.dark) body.inbox-page .conv-item.active {
  background: #f0f4ff !important;
  border-left-color: #111827 !important;
}
html:not(.dark) body.inbox-page .conv-item .conv-brand {
  color: #111827 !important;
}
html:not(.dark) body.inbox-page .conv-item .conv-type {
  color: #9ca3af !important;
}
html:not(.dark) body.inbox-page .conv-item .conv-preview,
html:not(.dark) body.inbox-page .conv-item .conv-time {
  color: #9ca3af !important;
}
html:not(.dark) body.inbox-page .chat-panel {
  background: #fafafa !important;
}
html:not(.dark) body.inbox-page .chat-header {
  background: #fff !important;
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) body.inbox-page .chat-header h3 {
  color: #111827 !important;
}
html:not(.dark) body.inbox-page .chat-header .meta {
  color: #6b7280 !important;
}
html:not(.dark) body.inbox-page .msg-bubble-in {
  background: #e5e7eb !important;
  color: #111827 !important;
}
html:not(.dark) body.inbox-page .msg-bubble-out {
  background: #111827 !important;
  color: #fff !important;
}
html:not(.dark) body.inbox-page .chat-footer {
  background: #fff !important;
  border-top-color: #e5e7eb !important;
}
html:not(.dark) body.inbox-page .chat-input {
  background: #f5f5f5 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* ============================================================
   DEAL MANAGER — Light Mode Overrides (dark by default)
   ============================================================ */

html:not(.dark) body.deal-manager-page,
html:not(.dark) .dm-body {
  background: #f8f9fa !important;
  color: #111827 !important;
}
html:not(.dark) .sidebar {
  background: #ffffff !important;
  border-right-color: #e5e7eb !important;
}
html:not(.dark) .sidebar-header {
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) .sidebar-header h2 {
  color: #111827 !important;
}
html:not(.dark) .sidebar-header .subtitle {
  color: #6b7280 !important;
}
html:not(.dark) .conv-item {
  border-bottom-color: #f0f0f0 !important;
}
html:not(.dark) .conv-item:hover {
  background: #f5f5f5 !important;
}
html:not(.dark) .conv-item.active {
  background: #f0f4ff !important;
  border-left-color: #111827 !important;
}
html:not(.dark) .conv-item .conv-brand {
  color: #111827 !important;
}
html:not(.dark) .conv-item .unread-dot {
  background: #111827 !important;
}
html:not(.dark) .conv-item .conv-type {
  color: #9ca3af !important;
}
html:not(.dark) .conv-item .conv-preview,
html:not(.dark) .conv-item .conv-time {
  color: #9ca3af !important;
}
html:not(.dark) .chat-panel {
  background: #fafafa !important;
}
html:not(.dark) .chat-empty {
  color: #9ca3af !important;
}
html:not(.dark) .chat-empty p {
  color: #9ca3af !important;
}
html:not(.dark) .chat-header {
  background: #ffffff !important;
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) .chat-header h3 {
  color: #111827 !important;
}
html:not(.dark) .chat-header .meta {
  color: #6b7280 !important;
}
html:not(.dark) .chat-header .brand-avatar {
  background: #f0f0f0 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
html:not(.dark) .chat-header .deal-badge {
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
}
html:not(.dark) .msg.brand .msg-bubble {
  background: #f0f0f0 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
html:not(.dark) .msg.client .msg-bubble {
  background: #111827 !important;
  color: #ffffff !important;
}
html:not(.dark) .msg.system .msg-bubble {
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
}
html:not(.dark) .msg .msg-meta {
  color: #9ca3af !important;
}
html:not(.dark) .msg .msg-label {
  color: #9ca3af !important;
}
html:not(.dark) .chat-compose {
  border-top-color: #e5e7eb !important;
  background: #ffffff !important;
}
html:not(.dark) .compose-input {
  background: #f5f5f5 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
html:not(.dark) .compose-input::placeholder {
  color: #9ca3af !important;
}
html:not(.dark) .compose-hint {
  color: #9ca3af !important;
}
html:not(.dark) .new-conv-btn {
  background: #111827 !important;
  color: #ffffff !important;
}
/* Deals tab — light mode */
html:not(.dark) .deals-layout {
  background: #f8f9fa !important;
}
html:not(.dark) .deals-header h2 {
  color: #111827 !important;
}
html:not(.dark) .deals-header p {
  color: #6b7280 !important;
}
html:not(.dark) .deal-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
html:not(.dark) .deal-card:hover {
  border-color: #d1d5db !important;
}
html:not(.dark) .deal-brand {
  color: #111827 !important;
}
html:not(.dark) .deal-type {
  color: #9ca3af !important;
}
html:not(.dark) .deal-status-msg {
  background: rgba(0,0,0,0.03) !important;
  color: #6b7280 !important;
}
html:not(.dark) .deal-submitted-link {
  color: #9ca3af !important;
}
html:not(.dark) .deal-submitted-link a {
  color: #6b7280 !important;
}
html:not(.dark) .status-step {
  color: #e5e7eb !important;
}
html:not(.dark) .status-step.done {
  color: #22c55e !important;
}
html:not(.dark) .status-step.active {
  color: #111827 !important;
}
html:not(.dark) .status-step .dot {
  background: #e5e7eb !important;
}
html:not(.dark) .status-step.done .dot {
  background: #22c55e !important;
}
html:not(.dark) .status-step.active .dot {
  background: #111827 !important;
}
html:not(.dark) .status-connector {
  background: #e5e7eb !important;
}
html:not(.dark) .status-connector.done {
  background: #22c55e !important;
}
/* Modal — light mode */
html:not(.dark) .modal-overlay {
  background: rgba(0,0,0,0.5) !important;
}
html:not(.dark) .modal {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
html:not(.dark) .modal h3 {
  color: #111827 !important;
}
html:not(.dark) .modal p {
  color: #6b7280 !important;
}
html:not(.dark) .modal label {
  color: #9ca3af !important;
}
html:not(.dark) .modal select,
html:not(.dark) .modal input,
html:not(.dark) .modal textarea {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
html:not(.dark) .btn-cancel {
  color: #6b7280 !important;
  border-color: #e5e7eb !important;
}
/* Mobile menu — light mode for app pages */
html:not(.dark) .mobile-menu {
  background: #ffffff !important;
  border-bottom-color: #e5e7eb !important;
}
html:not(.dark) .mobile-menu a {
  color: #6b7280 !important;
}
html:not(.dark) .mobile-menu a:hover,
html:not(.dark) .mobile-menu a.active {
  color: #111827 !important;
  background: rgba(0,0,0,0.04) !important;
}
html:not(.dark) .mobile-menu-divider {
  background: #e5e7eb !important;
}
html:not(.dark) .mobile-menu-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
}

/* ============================================================
   APP PAGE — Light Mode lang-btn label fix
   .lang-toggle-label uses var(--black) which resolves to #111827
   In dark mode this needs to be light
   ============================================================ */

html.dark .lang-toggle-label {
  color: #cbd5e1 !important;
}
html.dark .lang-btn {
  border-color: #3a3a3a !important;
  color: #94a3b8 !important;
  background: transparent !important;
}
html.dark .lang-btn.selected {
  background: #f1f5f9 !important;
  border-color: #f1f5f9 !important;
  color: #111 !important;
}

/* ============================================================
   TRANSITIONS — Smooth dark/light mode switching
   ============================================================ */

body, nav, .card, .form-card, .login-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
html.dark body,
html.dark nav,
html.dark .card,
html.dark .form-card,
html.dark .login-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}