/* ==================== MOBILE LIGHT THEME ==================== */
/* Warm cream/peach palette derived from auris-design-tokens.json */
@media (max-width: 767px) {
  :root {
    /* Warm cream backgrounds with stronger card/page contrast */
    --bg-primary: #ece6de;
    --bg-secondary: #e6e0d6;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f5f2;
    --bg-surface: #d8d0c6;

    /* Darker accent-blue for readability on cream */
    --accent-blue: #2d7ab5;

    /* Stronger text hierarchy for readability */
    --text-primary: #1a1a1a;
    --text-secondary: #4a5568;
    --text-muted: #7a7a7a;

    /* Visible warm borders */
    --border-color: rgba(180, 140, 100, 0.25);
    --border-color-light: rgba(180, 140, 100, 0.4);

    /* Accent dims tuned for cream bg */
    --accent-green-dim: rgba(106, 138, 122, 0.12);
    --accent-blue-dim: rgba(138, 165, 197, 0.12);
    --accent-purple-dim: rgba(154, 133, 201, 0.12);
    --accent-orange-dim: rgba(212, 165, 116, 0.12);
    --accent-red-dim: rgba(212, 145, 138, 0.12);

    /* Stronger shadows for card separation */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 220, 180, 0.12);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(180, 140, 100, 0.15);
    --shadow-focus-blue: 0 0 0 3px rgba(180, 140, 100, 0.3);
    --shadow-focus-green: 0 0 0 3px rgba(106, 138, 122, 0.25);

    /* Kill textures */
    --fractal-opacity: 0;
    --noise-opacity: 0;

    /* Utility tokens */
    --bg-input: #f5f2f0;
    --bg-menu: #f5f2f0;
    --bg-active: #ddd7cd;
    --bg-hover-subtle: rgba(180, 140, 100, 0.08);
    --text-icon: #4a5568;
    --text-icon-hover: #1a1a1a;
    --text-label: #7a5a3a;

    /* Filter dropdown tokens */
    --bg-dropdown: #ffffff;
    --bg-dropdown-item-hover: rgba(180, 140, 100, 0.08);
    --bg-dropdown-item-active: #e8e2da;
  }

  /* Light color-scheme for native scrollbars, inputs, etc. */
  html {
    color-scheme: light;
  }

  /* Text selection */
  ::selection {
    background: rgba(106, 138, 122, 0.2);
    color: #4a5a6a;
  }

  /* Light scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(138, 106, 74, 0.15);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 106, 74, 0.25);
  }

  /* Light autofill */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ece6de inset !important;
    -webkit-text-fill-color: #1a1a1a !important;
    caret-color: #1a1a1a !important;
  }

  /* Light shimmer with warm cream gradient */
  .animate-shimmer {
    background: linear-gradient(90deg, #e0d9cf 0%, #ece6de 50%, #e0d9cf 100%) !important;
    background-size: 200% 100%;
  }

  /* Force-dark: restore dark theme inside modals on mobile */
  .force-dark {
    --bg-primary: #0c0e14;
    --bg-secondary: #12141a;
    --bg-card: #181b22;
    --bg-card-hover: #1e2128;
    --bg-surface: #14171e;
    --text-primary: #ffffff;
    --text-secondary: #b8b8b8;
    --text-muted: #8f8f8f;
    --border-color: #2e323a;
    --border-color-light: #3c4049;
    --accent-green-dim: rgba(91, 176, 154, 0.15);
    --accent-blue-dim: rgba(122, 174, 212, 0.15);
    --accent-purple-dim: rgba(154, 133, 201, 0.15);
    --accent-orange-dim: rgba(212, 165, 116, 0.15);
    --accent-red-dim: rgba(212, 145, 138, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.7);
    --bg-input: #181b22;
    --bg-menu: #181b22;
    --bg-active: #1a1a1a;
    --bg-dropdown: #0d0d0d;
    --bg-dropdown-item-hover: rgba(255, 255, 255, 0.05);
    --bg-dropdown-item-active: #1a1a1a;
    --text-icon: #8f8f8f;
    --text-icon-hover: #ffffff;
    color-scheme: dark;
  }

  .force-dark input:-webkit-autofill,
  .force-dark input:-webkit-autofill:hover,
  .force-dark input:-webkit-autofill:focus,
  .force-dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #12141a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
  }

  /* Chat active: match primary bg */
  .noise-bg.chat-active {
    background-color: var(--bg-primary) !important;
  }

  /* Sticky header: warm cream to match page */
  .sticky-header-bg {
    background: rgba(236, 230, 222, 0.92) !important;
  }

  /* Cards with visible borders and shadow */
  .card {
    background: #ffffff;
    border-color: rgba(180, 140, 100, 0.2);
    box-shadow: var(--shadow-card);
  }
  .card:hover {
    border-color: rgba(180, 140, 100, 0.4);
    box-shadow: var(--shadow-card-hover);
  }

  /* Table wrapper on mobile: transparent so page bg shows between cards */
  .card-table {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Mobile cards: white with strong border/shadow to pop off cream bg */
  .mobile-card {
    background: #ffffff;
    border-color: rgba(180, 140, 100, 0.22);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  /* Type badges: stronger colors for light bg */
  .type-badge {
    font-weight: 600;
  }
  .mobile-card .type-badge.bg-sky-500\/15 {
    background: rgba(56, 132, 188, 0.14) !important;
    color: #2874a6 !important;
  }
  .mobile-card .type-badge.bg-purple-500\/15 {
    background: rgba(128, 90, 200, 0.14) !important;
    color: #6a4db8 !important;
  }

  /* Tables */
  .data-table th {
    color: var(--text-label, #7a5a3a);
    border-bottom-color: rgba(180, 140, 100, 0.18);
    background: #f6f2ec;
  }
  .data-table td {
    color: var(--text-secondary);
    border-bottom-color: rgba(180, 140, 100, 0.12);
  }
  .data-table tr:hover td {
    background: rgba(180, 140, 100, 0.06);
  }

  /* Distributor badge for warm light bg */
  .distributor-badge {
    background: rgba(180, 140, 100, 0.1);
    color: #5a4a3a;
  }

  /* Genre badge for warm light bg */
  .genre-badge {
    background: rgba(80, 120, 100, 0.12) !important;
    color: #3a5a4a !important;
  }

  /* Strength meter bars: visible on white cards */
  :root {
    --meter-empty: rgba(180, 140, 100, 0.15);
    --meter-1: #7aaa98;
    --meter-2: #5a9a84;
    --meter-3: #3a8a6a;
    --meter-4: #2a7a58;
    --meter-5: #1a6a48;
  }
  .strength-bar {
    width: 5px !important;
    height: 16px !important;
    border-radius: 2px !important;
  }

  /* Pipeline card hover with warm glow */
  .pipeline-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 8px rgba(255, 220, 180, 0.08);
  }

  /* Pipeline stage badges tuned for cream bg - stronger */
  .stage-badge-keeping_tabs { background: rgba(200, 150, 80, 0.18); color: #7a5530; }
  .stage-badge-client_contacted { background: rgba(100, 150, 200, 0.18); color: #2a5a8a; }
  .stage-badge-in_conversation { background: rgba(140, 110, 200, 0.18); color: #5a4a8a; }
  .stage-badge-project_incoming { background: rgba(80, 140, 110, 0.18); color: #2a6a4a; }

  /* Rate buttons for light bg */
  .rate-btn {
    color: #8a8a8a;
  }
  .rate-btn:hover {
    background: rgba(106, 138, 122, 0.08);
    color: #6a8a7a;
  }
  .rate-btn.down:hover {
    background: rgba(154, 133, 201, 0.08);
    color: #9A85C9;
  }
  .rate-btn.active-up {
    background: rgba(106, 138, 122, 0.15);
    color: #6a8a7a;
  }
  .rate-btn.active-down {
    background: rgba(154, 133, 201, 0.15);
    color: #9A85C9;
  }

  /* Pipeline add buttons for light bg */
  .pipeline-add-btn {
    border-color: rgba(180, 140, 100, 0.3);
    color: #6a5030;
    background: rgba(180, 140, 100, 0.06);
  }
  .pipeline-add-btn:hover {
    color: #5a4020;
    border-color: rgba(180, 140, 100, 0.5);
    background: rgba(180, 140, 100, 0.12);
  }
  .mobile-pipeline-btn {
    border-color: rgba(180, 140, 100, 0.3);
    color: #6a5030;
    background: rgba(180, 140, 100, 0.06);
  }
  .mobile-pipeline-btn:hover {
    color: #5a4020;
    border-color: rgba(180, 140, 100, 0.5);
    background: rgba(180, 140, 100, 0.12);
  }

  /* Send button: warm brown to match primary */
  .send-button {
    background: #8a6a4a;
    color: #ffffff;
  }
  .send-button:hover {
    background: #7a5a3a;
  }

  /* Toggle knob: visible on white/cream cards */
  .toggle-switch-knob {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
  }

  /* Primary button: warm brown */
  .btn-primary {
    background: #8a6a4a !important;
    color: #ffffff !important;
  }
  .btn-primary:hover {
    background: #7a5a3a !important;
  }

  /* Secondary button for light bg */
  .btn-secondary {
    border-color: rgba(255, 168, 122, 0.25);
    color: var(--text-primary);
  }
  .btn-secondary:hover {
    border-color: rgba(255, 168, 122, 0.45);
    background: rgba(255, 168, 122, 0.04);
  }

  /* Inputs: peach focus border */
  input:focus,
  textarea:focus,
  select:focus {
    border-color: rgba(255, 168, 122, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 168, 122, 0.12) !important;
    outline: none;
  }

  /* Light input placeholders */
  .light-input::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: #8a8a8a !important;
  }

  /* ---- Hardcoded dark background overrides ---- */
  .bg-\[\#0f0f0f\],
  .bg-\[\#0d0d0d\],
  .bg-\[\#080808\],
  .bg-\[\#0a0a0a\],
  .bg-\[\#0a0d12\],
  .bg-\[\#08090d\],
  .bg-\[\#0c1218\] {
    background-color: var(--bg-card) !important;
  }
  .bg-\[\#1a1a1a\],
  .bg-\[\#141414\],
  .bg-\[\#151515\],
  .bg-\[\#111\],
  .bg-\[\#111113\],
  .bg-\[\#1a1e26\] {
    background-color: var(--bg-surface) !important;
  }
  .bg-\[\#222\],
  .bg-\[\#1f1f1f\],
  .bg-\[\#262626\],
  .bg-\[\#2a2a2a\],
  .bg-\[\#1e2230\],
  .bg-\[\#14171e\],
  .bg-\[\#282d38\],
  .bg-\[\#2a2f38\],
  .bg-\[\#18181b\],
  .bg-\[\#27272a\],
  .bg-\[\#3f3f46\] {
    background-color: var(--bg-active) !important;
  }

  /* ---- Hardcoded dark hover background overrides ---- */
  .hover\:bg-\[\#222\]:hover,
  .hover\:bg-\[\#1a1a1a\]:hover,
  .hover\:bg-\[\#1f1f1f\]:hover,
  .hover\:bg-\[\#262626\]:hover {
    background-color: rgba(255, 168, 122, 0.06) !important;
  }
  .hover\:bg-\[\#111\]:hover,
  .hover\:bg-\[\#0a0a0a\]:hover,
  .hover\:bg-\[\#0e0e0e\]:hover,
  .hover\:bg-\[\#141414\]:hover,
  .hover\:bg-\[\#151515\]:hover {
    background-color: rgba(180, 140, 100, 0.06) !important;
  }
  .hover\:bg-\[\#e5e5e5\]:hover {
    background-color: #ede9e5 !important;
  }
  .hover\:bg-\[\#3a3a3a\]:hover,
  .hover\:bg-\[\#252525\]:hover,
  .hover\:bg-\[\#282d38\]:hover,
  .hover\:bg-\[\#2a2f38\]:hover {
    background-color: var(--bg-active) !important;
  }
  .hover\:bg-zinc-800:hover {
    background-color: rgba(180, 140, 100, 0.08) !important;
  }

  /* ---- Hardcoded dark border overrides ---- */
  .border-\[\#1a1a1a\],
  .border-\[\#252525\],
  .border-\[\#141414\],
  .border-\[\#151515\],
  .border-\[\#1f1f1f\],
  .border-\[\#2a2a2a\],
  .border-\[\#222\] {
    border-color: rgba(180, 140, 100, 0.15) !important;
  }
  .border-\[\#262626\],
  .border-\[\#333\],
  .border-\[\#444\],
  .border-\[\#3a3a3a\],
  .border-\[\#3a3f4a\],
  .border-\[\#2e323a\],
  .border-\[\#52525b\] {
    border-color: rgba(180, 140, 100, 0.3) !important;
  }
  .border-t-\[\#444\],
  .border-t-\[\#333\] {
    border-top-color: rgba(180, 140, 100, 0.3) !important;
  }
  .border-b-\[\#141414\],
  .border-b-\[\#1a1a1a\],
  .border-b-\[\#151515\] {
    border-bottom-color: rgba(180, 140, 100, 0.15) !important;
  }
  .hover\:border-\[\#333\]:hover,
  .hover\:border-\[\#3a3a3a\]:hover,
  .hover\:border-\[\#444\]:hover,
  .hover\:border-\[\#4a4e58\]:hover,
  .hover\:border-\[\#71717a\]:hover {
    border-color: rgba(180, 140, 100, 0.45) !important;
  }
  .divide-\[\#262626\] > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(180, 140, 100, 0.15) !important;
  }

  /* ---- Hardcoded dark text overrides ---- */
  .text-\[\#e5e5e5\],
  .text-\[\#e8e8e8\],
  .text-\[\#ccc\],
  .text-\[\#ddd\] {
    color: var(--text-primary) !important;
  }
  .text-\[\#888\],
  .text-\[\#999\],
  .text-\[\#8f8f8f\],
  .text-\[\#a1a1aa\],
  .text-\[\#a3a3a3\] {
    color: var(--text-secondary) !important;
  }
  .text-\[\#666\],
  .text-\[\#555\],
  .text-\[\#777\],
  .text-\[\#71717a\],
  .text-\[\#737373\],
  .text-\[\#525252\],
  .text-\[\#444\],
  .text-\[\#333\],
  .text-\[\#3a3a3a\] {
    color: var(--text-muted) !important;
  }

  /* Accent hex colors: darken for cream bg readability */
  .text-\[\#8b5cf6\] { color: var(--accent-purple) !important; }
  .text-\[\#f97316\] { color: #c97a30 !important; }

  /* Hover text: dark-theme "white" becomes light-theme "primary" */
  .hover\:text-white:hover {
    color: var(--text-primary) !important;
  }
  .hover\:text-\[\#ef4444\]:hover {
    color: #dc2626 !important;
  }

  /* Placeholder text overrides */
  .placeholder-\[\#525252\]::placeholder,
  .placeholder-\[\#555\]::placeholder,
  .placeholder-\[\#444\]::placeholder,
  .placeholder-zinc-500::placeholder {
    color: #8a8a8a !important;
  }

  /* Focus border overrides: peach focus instead of blue */
  .focus\:border-\[\#3b82f6\]:focus {
    border-color: rgba(255, 168, 122, 0.6) !important;
  }
  .focus\:ring-\[\#f97316\]\/50:focus {
    --tw-ring-color: rgba(255, 168, 122, 0.3) !important;
  }
  .focus\:border-\[\#f97316\]\/50:focus {
    border-color: rgba(255, 168, 122, 0.5) !important;
  }

  /* ---- Hardcoded dark gradient overrides ---- */
  .from-\[\#0f0f0f\],
  .from-\[\#0d0d0d\],
  .from-\[\#0a0a0a\],
  .from-\[\#080808\] {
    --tw-gradient-from: var(--bg-card) var(--tw-gradient-from-position) !important;
  }
  .to-\[\#0d0d0d\],
  .to-\[\#0a0a0a\],
  .to-\[\#0f0f0f\],
  .to-\[\#080808\] {
    --tw-gradient-to: var(--bg-card) var(--tw-gradient-to-position) !important;
  }
  .via-\[\#0d0d0d\]\/60,
  .via-\[\#0d0d0d\]\/70,
  .via-\[\#0a0a0a\]\/60,
  .via-\[\#0a0a0a\]\/70 {
    --tw-gradient-via: var(--bg-card) var(--tw-gradient-via-position) !important;
  }
  .from-\[\#0a0a0a\]\/50,
  .from-\[\#0a0a0a\]\/80,
  .from-\[\#0d0d0d\]\/80 {
    --tw-gradient-from: var(--bg-card) var(--tw-gradient-from-position) !important;
  }
  .to-\[\#0a0a0a\]\/30 {
    --tw-gradient-to: var(--bg-card) var(--tw-gradient-to-position) !important;
  }

  /* ---- Tailwind color class overrides ---- */
  .text-zinc-600,
  .text-zinc-500 {
    color: var(--text-muted) !important;
  }
  .text-zinc-400,
  .text-zinc-300 {
    color: var(--text-secondary) !important;
  }
  .text-zinc-200,
  .text-zinc-100 {
    color: var(--text-primary) !important;
  }
  .bg-zinc-800,
  .bg-zinc-900 {
    background-color: var(--bg-surface) !important;
  }
  .bg-zinc-700 {
    background-color: var(--bg-active) !important;
  }
  .bg-zinc-900\/50 {
    background-color: rgba(180, 140, 100, 0.06) !important;
  }
  .bg-zinc-700\/40 {
    background-color: rgba(180, 140, 100, 0.08) !important;
  }
  .border-zinc-700,
  .border-zinc-800 {
    border-color: rgba(180, 140, 100, 0.15) !important;
  }
  .hover\:text-zinc-300:hover {
    color: var(--text-primary) !important;
  }
  .hover\:text-zinc-200:hover {
    color: var(--text-primary) !important;
  }

  /* Opacity variants of dark backgrounds */
  .bg-\[\#0a0a0a\]\/60,
  .bg-\[\#0a0a0a\]\/90 {
    background-color: rgba(180, 140, 100, 0.08) !important;
  }

  /* Modal overlays: lighter for light theme */
  .modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  .bg-black\/50 { background-color: rgba(0, 0, 0, 0.3) !important; }
  .bg-black\/75 { background-color: rgba(0, 0, 0, 0.35) !important; }
  .bg-black\/80 { background-color: rgba(0, 0, 0, 0.4) !important; }
  .bg-black\/90 { background-color: rgba(0, 0, 0, 0.5) !important; }
  .bg-black\/40 { background-color: rgba(0, 0, 0, 0.2) !important; }
  .hover\:bg-black\/60:hover { background-color: rgba(0, 0, 0, 0.35) !important; }

  /* ---- Broad text-white override for light theme ---- */
  .text-white {
    color: var(--text-primary) !important;
  }
  .text-white\/70 { color: var(--text-secondary) !important; }
  .text-white\/80 { color: var(--text-primary) !important; }
  .text-white\/90 { color: var(--text-primary) !important; }
  .text-white\/50 { color: var(--text-muted) !important; }

  /* Keep white text on colored button backgrounds */
  .bg-orange-500.text-white,
  .bg-orange-500 .text-white,
  .bg-\[\#f97316\].text-white,
  .bg-\[\#f97316\] .text-white,
  .bg-emerald-500.text-white,
  .bg-emerald-500 .text-white,
  .bg-red-500.text-white,
  .bg-red-500 .text-white,
  .bg-amber-500.text-white,
  .bg-amber-500 .text-white,
  .bg-auris-blue.text-white,
  .bg-auris-blue .text-white,
  .bg-auris-purple.text-white,
  .bg-auris-purple .text-white,
  .bg-auris-green.text-white,
  .bg-auris-green .text-white,
  .bg-\[\#22c55e\].text-white,
  .bg-\[\#ea580c\].text-white,
  .bg-\[\#ef4444\].text-white {
    color: #ffffff !important;
  }

  /* Input and select text should be dark on light bg */
  input.text-white,
  select.text-white,
  textarea.text-white {
    color: var(--text-primary) !important;
  }

  /* ---- Opacity / ring overrides for accent badges on light ---- */
  .bg-\[\#7AAED4\]\/8 { background-color: rgba(138, 165, 197, 0.08) !important; }
  .bg-\[\#D4918A\]\/8 { background-color: rgba(212, 145, 138, 0.08) !important; }
}