/* ============================================================= */
/* OmniTools - Theme system (light / dark)                        */
/* Applied via [data-theme="dark"] on <html> element              */
/* ============================================================= */

:root {
  /* Light theme colors */
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-input: #f8fafc;
  --bg-hover: #f1f5f9;
  --bg-muted: #f1f5f9;

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-invert: #ffffff;

  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef2ff;

  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-input: #0f172a;
  --bg-hover: #334155;
  --bg-muted: #1e293b;

  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-invert: #0f172a;

  --border-default: #334155;
  --border-strong: #475569;

  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-soft: #312e81;

  --shadow-card: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
  --shadow-hover: 0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.3);
}

/* Smooth theme transition */
html {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Override Tailwind background classes with theme variables */
.bg-white {
  background-color: var(--bg-card) !important;
}

.bg-slate-50,
.bg-slate-50\/60 {
  background-color: var(--bg-input) !important;
}

.bg-slate-100 {
  background-color: var(--bg-muted) !important;
}

.bg-slate-200 {
  background-color: var(--border-strong) !important;
}

/* Text overrides */
.text-slate-800,
.text-slate-900 {
  color: var(--text-primary) !important;
}

.text-slate-700,
.text-slate-600 {
  color: var(--text-secondary) !important;
}

.text-slate-500,
.text-slate-400 {
  color: var(--text-muted) !important;
}

/* Border overrides */
.border-slate-100,
.border-slate-200 {
  border-color: var(--border-default) !important;
}

.border-slate-300 {
  border-color: var(--border-strong) !important;
}

/* Header dark */
header {
  background-color: var(--bg-card) !important;
  border-color: var(--border-default) !important;
}

/* Inputs and selects */
input, textarea, select {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ============================================================= */
/* Theme toggle button                                            */
/* ============================================================= */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 16px;
  padding: 0;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.theme-toggle:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Code editor dark */
[data-theme="dark"] .code-editor {
  background: #0b1220;
  border-color: #334155;
}

[data-theme="dark"] .code-editor .line-numbers {
  background: #111c2e;
  border-color: #334155;
  color: #64748b;
}

[data-theme="dark"] .code-editor textarea {
  color: #e2e8f0;
  background: transparent !important;
}

/* Hide any extra Tailwind slate that leaks */
[data-theme="dark"] .bg-gradient-to-br.from-indigo-500 {
  background: linear-gradient(to bottom right, #4338ca, #6d28d9) !important;
}

/* ============================================================= */
/* Button states - unified standard (normal / hover / active)      */
/* For all button types, in both themes                            */
/* Colors: indigo = primary, emerald = success,                    */
/*         slate-700 = dark action, slate-200 = secondary          */
/* ============================================================= */

/* ---------- PRIMARY (indigo) ---------- */
.bg-indigo-600 { background-color: #4f46e5 !important; }
.bg-indigo-600:hover { background-color: #4338ca !important; }
.bg-indigo-600:active { background-color: #3730a3 !important; }

[data-theme="dark"] .bg-indigo-600 { background-color: #6366f1 !important; }
[data-theme="dark"] .bg-indigo-600:hover { background-color: #818cf8 !important; }
[data-theme="dark"] .bg-indigo-600:active { background-color: #a5b4fc !important; }

/* ---------- SUCCESS (emerald) ---------- */
.bg-emerald-600 { background-color: #059669 !important; }
.bg-emerald-600:hover { background-color: #047857 !important; }
.bg-emerald-600:active { background-color: #065f46 !important; }

[data-theme="dark"] .bg-emerald-600 { background-color: #10b981 !important; }
[data-theme="dark"] .bg-emerald-600:hover { background-color: #34d399 !important; }
[data-theme="dark"] .bg-emerald-600:active { background-color: #6ee7b7 !important; }

/* ---------- DARK ACTION (slate-700) ---------- */
.bg-slate-700 { background-color: #334155 !important; }
.bg-slate-700:hover { background-color: #1e293b !important; }
.bg-slate-700:active { background-color: #0f172a !important; }

[data-theme="dark"] .bg-slate-700 { background-color: #475569 !important; }
[data-theme="dark"] .bg-slate-700:hover { background-color: #64748b !important; }
[data-theme="dark"] .bg-slate-700:active { background-color: #94a3b8 !important; }

/* ---------- EXTRA DARK (slate-800) ---------- */
/* Used by "Save PDF / Print" in calorie calculator.                       */

.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-800:hover { background-color: #334155 !important; }   /* slate-700 */
.bg-slate-800:active { background-color: #475569 !important; }  /* slate-600 */

[data-theme="dark"] .bg-slate-800 { background-color: #334155 !important; }         /* slate-700 */
[data-theme="dark"] .bg-slate-800:hover { background-color: #475569 !important; }   /* slate-600 */
[data-theme="dark"] .bg-slate-800:active { background-color: #64748b !important; }  /* slate-500 */

/* ---------- SECONDARY (slate-200) ---------- */
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-slate-200:hover { background-color: #cbd5e1 !important; }
.bg-slate-200:active { background-color: #94a3b8 !important; }

[data-theme="dark"] .bg-slate-200 { background-color: #475569 !important; }
[data-theme="dark"] .bg-slate-200:hover { background-color: #64748b !important; }
[data-theme="dark"] .bg-slate-200:active { background-color: #94a3b8 !important; }


/* ---------- LIGHT INDIGO (indigo-50 base) ---------- */
/* Used by subtle/outline indigo buttons, e.g. JPG download in PDF-to-JPG.  */
/* Base: bg-indigo-50 + border-indigo-200 + text-indigo-700.               */

.hover\:bg-indigo-100:hover { background-color: #c7d2fe !important; }         /* indigo-200 - заметно */
.hover\:bg-indigo-100:active { background-color: #a5b4fc !important; }        /* indigo-300 */

.hover\:border-indigo-300:hover { border-color: #818cf8 !important; }        /* indigo-400 - ярче */
.hover\:border-indigo-300:active { border-color: #6366f1 !important; }       /* indigo-500 */

.hover\:text-indigo-700:hover { color: #3730a3 !important; }                  /* indigo-800 - темнее */
.hover\:text-indigo-700:active { color: #312e81 !important; }                 /* indigo-900 */

[data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: #312e81 !important; }    /* indigo-900 */
[data-theme="dark"] .hover\:bg-indigo-100:active { background-color: #3730a3 !important; }   /* indigo-800 */

[data-theme="dark"] .hover\:border-indigo-300:hover { border-color: #818cf8 !important; }   /* indigo-400 */
[data-theme="dark"] .hover\:border-indigo-300:active { border-color: #a5b4fc !important; }  /* indigo-300 */

[data-theme="dark"] .hover\:text-indigo-700:hover { color: #c7d2fe !important; }             /* indigo-200 */
[data-theme="dark"] .hover\:text-indigo-700:active { color: #e0e7ff !important; }            /* indigo-100 */


/* ============================================================= */
/* Text indigo visibility in dark theme                            */
/* text-indigo-600 is too dark on dark bg                          */
/* ============================================================= */

[data-theme="dark"] .text-indigo-600 {
  color: #a5b4fc !important;  /* indigo-300 */
}

[data-theme="dark"] .text-indigo-700 {
  color: #c7d2fe !important;  /* indigo-200 */
}


/* ============================================================= */
/* Colored background blocks in dark theme                         */
/* bg-*-50 stay light by default -> unreadable on dark bg          */
/* Make them dark tones so text is visible                         */
/* ============================================================= */

[data-theme="dark"] .bg-indigo-50 {
  background-color: #1e293b !important;  /* slate-800 - нейтрально */
}

[data-theme="dark"] .bg-rose-50 {
  background-color: #4c0519 !important;  /* rose-950 */
}

[data-theme="dark"] .bg-blue-50 {
  background-color: #172554 !important;  /* blue-950 */
}

[data-theme="dark"] .bg-cyan-50 {
  background-color: #083344 !important;  /* cyan-950 */
}


/* ============================================================= */
/* Text colors in dark theme: rose / emerald / amber / blue        */
/* These stay saturated on dark bg -> unreadable                   */
/* Make them light                                                  */
/* ============================================================= */

[data-theme="dark"] .text-rose-600,
[data-theme="dark"] .text-rose-700,
[data-theme="dark"] .text-rose-500 {
  color: #fda4af !important;  /* rose-300 */
}

[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-500 {
  color: #6ee7b7 !important;  /* emerald-300 */
}

[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-500 {
  color: #fcd34d !important;  /* amber-300 */
}

[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700 {
  color: #93c5fd !important;  /* blue-300 */
}

[data-theme="dark"] .text-cyan-600,
[data-theme="dark"] .text-cyan-700 {
  color: #67e8f9 !important;  /* cyan-300 */
}

/* ============================================================= */
/* Active state for Tailwind has-[:checked]: variants              */
/* ============================================================= */

/* ============================================================= */
/* Button metric/imperial active state                             */
/* ============================================================= */

[data-theme="dark"] #btn-metric.bg-white,
[data-theme="dark"] #btn-imperial.bg-white {
  background-color: #334155 !important;  /* slate-700 - нейтрально */
  color: #e2e8f0 !important;
}

[data-theme="dark"] #btn-imperial {
  color: var(--text-muted) !important;
}
[data-theme="dark"] #btn-imperial:hover {
  color: var(--text-secondary) !important;
}

/* ============================================================= */
/* Result tiles (BMI / TDEE / Target / Water) — readable in dark   */
/* ============================================================= */

[data-theme="dark"] #res-macros .text-2xl {
  color: #fff !important;
}


/* Universal dark-theme fix */
[data-theme="dark"] .has-\[\:checked\]\:bg-indigo-50:has(:checked) {
  background-color: #334155 !important;  /* slate-700 - нейтрально, не ядовито */
}
[data-theme="dark"] .has-\[\:checked\]\:border-indigo-600:has(:checked) {
  border-color: #818cf8 !important;  /* indigo-400 */
}

/* Focus rings in dark theme */
[data-theme="dark"] .focus\:ring-indigo-500:focus {
  --tw-ring-color: #818cf8 !important;  /* indigo-400 */
}

/* Indigo borders in dark theme (used on active fields / selects) */
[data-theme="dark"] .border-indigo-200 {
  border-color: #4338ca !important;  /* indigo-700 */
}
[data-theme="dark"] .border-indigo-100 {
  border-color: #312e81 !important;  /* indigo-900 */
}

/* Focus ring on file inputs and search fields */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #818cf8 !important;
}

/* ============================================================= */
/* Neutral borders in dark theme (replace toxic indigo)            */
/* ============================================================= */

[data-theme="dark"] .border-indigo-100 {
  border-color: #334155 !important;  /* slate-700 */
}
[data-theme="dark"] .border-indigo-200 {
  border-color: #475569 !important;  /* slate-600 */
}
[data-theme="dark"] .border-indigo-300 {
  border-color: #64748b !important;  /* slate-500 */
}

/* ============================================================= */
/* Readable amber text on dark amber backgrounds                   */
/* ============================================================= */

[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 {
  color: #fde68a !important;  /* amber-200 */
}

/* ============================================================= */
/* Header logo: PNG light / dark, switched via data-theme          */
/* ============================================================= */

.logo-light { display: inline-block; }
.logo-dark  { display: none; }

[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: inline-block; }


/* ============================================================= */
/* Dark theme: hover-bg-slate-100 -> slate-700 (fix white glow)    */
/* ============================================================= */

[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: #334155 !important;  /* slate-700 */
}

[data-theme="dark"] .hover\:bg-slate-200:hover {
  background-color: #475569 !important;  /* slate-600 */
}

/* ============================================================= */
/* Dark theme: date/time picker icon (datetime-local, date, time)  */
/* Browser draws it black by default - invert to make visible      */
/* ============================================================= */

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.8;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}


/* ============================================================= */
/* Clear-all button hover (jpg-to-pdf) - explicit both themes      */
/* ============================================================= */

.hover\:bg-indigo-50:hover {
  background-color: #e0e7ff !important;   /* indigo-100 - заметно на белом */
  border-color: #a5b4fc !important;       /* indigo-300 */
  color: #4338ca !important;              /* indigo-700 */
}

.hover\:border-indigo-300:hover {
  border-color: #a5b4fc !important;
}

.hover\:text-indigo-700:hover {
  color: #4338ca !important;
}

[data-theme="dark"] .hover\:bg-indigo-50:hover {
  background-color: #312e81 !important;   /* indigo-900 */
  border-color: #6366f1 !important;       /* indigo-500 */
  color: #c7d2fe !important;              /* indigo-200 */
}

[data-theme="dark"] .hover\:border-indigo-300:hover {
  border-color: #6366f1 !important;
}

[data-theme="dark"] .hover\:text-indigo-700:hover {
  color: #c7d2fe !important;
}


/* ============================================================= */
/* Rose hover (remove buttons) - strengthen in light theme          */
/* ============================================================= */

.hover\:bg-rose-50:hover {
  background-color: #ffe4e6 !important;   /* rose-100 */
  border-color: #fda4af !important;       /* rose-300 */
  color: #e11d48 !important;              /* rose-600 */
}

[data-theme="dark"] .hover\:bg-rose-50:hover {
  background-color: #2a161a !important;   /* очень тёмный, спокойный */
  border-color: #5f1d22 !important;       /* тёмно-бордовый, мягкий */
  color: #f4c7cd !important;              /* мягкая иконка */
}

.hover\:text-rose-600:hover {
  color: #e11d48 !important;
}

[data-theme="dark"] .hover\:text-rose-600:hover {
  color: #f4c7cd !important;              /* мягкий */
}

.hover\:border-rose-200:hover {
  border-color: #fda4af !important;
}

[data-theme="dark"] .hover\:border-rose-200:hover {
  border-color: #5f1d22 !important;       /* тёмно-бордовый */
}
.hover\:bg-slate-900:hover {
  background-color: #1e293b !important;   /* slate-800 */
}

[data-theme="dark"] .hover\:bg-slate-900:hover {
  background-color: #475569 !important;   /* slate-600 */
}

/* ============================================================= */
/* Text slate hover (small link-like buttons)                      */
/* ============================================================= */

.hover\:text-slate-600:hover {
  color: #475569 !important;              /* slate-600 - темнее */
}

[data-theme="dark"] .hover\:text-slate-600:hover {
  color: #cbd5e1 !important;              /* slate-300 - светлее */
}


/* ============================================================= */
/* Status blocks - full dark theme standard                        */
/* Covers bg-*-50/100/200, text-*-600..900, border-*-200          */
/* ============================================================= */

/* ---------- SUCCESS (emerald) ---------- */
[data-theme="dark"] .bg-emerald-50  { background-color: #052e26 !important; }
[data-theme="dark"] .bg-amber-50  { background-color: #422006 !important; }
[data-theme="dark"] .bg-emerald-100 { background-color: #064e3b !important; }
[data-theme="dark"] .bg-emerald-200 { background-color: #065f46 !important; }

[data-theme="dark"] .border-emerald-200 { border-color: #065f46 !important; }
[data-theme="dark"] .border-emerald-400 { border-color: #34d399 !important; }

[data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-emerald-900 { color: #a7f3d0 !important; }  /* emerald-200 */

/* ---------- ERROR (red) ---------- */
[data-theme="dark"] .bg-red-50  { background-color: #450a0a !important; }
[data-theme="dark"] .bg-red-100 { background-color: #7f1d1d !important; }
[data-theme="dark"] .bg-red-200 { background-color: #991b1b !important; }

[data-theme="dark"] .border-red-200 { border-color: #991b1b !important; }

[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }  /* red-300 */

/* ---------- ERROR (rose) ---------- */
[data-theme="dark"] .bg-rose-100 { background-color: #4c0519 !important; }
[data-theme="dark"] .bg-rose-200 { background-color: #7f1d1d !important; }

[data-theme="dark"] .text-rose-700 { color: #fda4af !important; }  /* rose-300 */

/* ---------- WARNING (amber) ---------- */
[data-theme="dark"] .bg-amber-100 { background-color: #451a03 !important; }
[data-theme="dark"] .bg-amber-200 { background-color: #78350f !important; }
[data-theme="dark"] .bg-amber-300 { background-color: #92400e !important; }

[data-theme="dark"] .border-amber-200 { border-color: #78350f !important; }
[data-theme="dark"] .border-amber-400 { border-color: #fbbf24 !important; }

[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 { color: #fde68a !important; }  /* amber-200 */

/* ---------- INFO (blue) ---------- */
[data-theme="dark"] .bg-blue-100 { background-color: #1e3a8a !important; }

/* ---------- INFO (indigo subtle) ---------- */
[data-theme="dark"] .bg-indigo-100 { background-color: #312e81 !important; }
[data-theme="dark"] .border-indigo-200 { border-color: #4338ca !important; }
[data-theme="dark"] .border-indigo-300 { border-color: #6366f1 !important; }
[data-theme="dark"] .border-indigo-500 { border-color: #818cf8 !important; }
[data-theme="dark"] .border-indigo-600 { border-color: #a5b4fc !important; }