/**
 * YesCRM Theme System
 * Supports: dark (default), light, blue, green, purple
 */

/* ===== DARK THEME (Default) ===== */
:root,
[data-theme="dark"] {
  --bg: #0b0f14;
  --bg-alt: #0e1420;
  --panel: #121824;
  --panel-hover: #1a2332;
  --sidebar-bg: #0e1218;
  --text: #e8eef8;
  --text-secondary: #c8d4e8;
  --muted: #9fb0c6;
  --line: #223047;
  --line-light: rgba(34,48,71,.6);
  --accent: #6aa6ff;
  --accent-bg: rgba(106,166,255,.12);
  --accent-bg-hover: rgba(106,166,255,.18);
  --danger: #ff6a6a;
  --danger-bg: rgba(255,106,106,.12);
  --ok: #78ff9f;
  --ok-bg: rgba(120,255,159,.12);
  --warn: #ffd66a;
  --warn-bg: rgba(255,214,106,.12);
  --topbar-bg: rgba(18,24,36,.85);
  --modal-overlay: rgba(0,0,0,.75);
  --modal-bg: #1a2332;
  --modal-text: #e8eef8;
  --input-bg: #0e1420;
  --shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-alt: #ffffff;
  --panel: #ffffff;
  --panel-hover: #f0f2f5;
  --sidebar-bg: #ffffff;
  --text: #1a1a2e;
  --text-secondary: #444444;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-light: #f3f4f6;
  --accent: #3b82f6;
  --accent-bg: rgba(59,130,246,.1);
  --accent-bg-hover: rgba(59,130,246,.15);
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,.1);
  --ok: #22c55e;
  --ok-bg: rgba(34,197,94,.1);
  --warn: #f59e0b;
  --warn-bg: rgba(245,158,11,.1);
  --topbar-bg: rgba(255,255,255,.9);
  --modal-overlay: rgba(0,0,0,.5);
  --modal-bg: #ffffff;
  --modal-text: #1a1a2e;
  --input-bg: #f9fafb;
  --shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* ===== BLUE THEME ===== */
[data-theme="blue"] {
  --bg: #0c1929;
  --bg-alt: #0f2744;
  --panel: #132f4c;
  --panel-hover: #1a3a5c;
  --sidebar-bg: #0a1525;
  --text: #e3f2fd;
  --text-secondary: #b3d4fc;
  --muted: #7eb8da;
  --line: #1e4976;
  --line-light: rgba(30,73,118,.6);
  --accent: #42a5f5;
  --accent-bg: rgba(66,165,245,.15);
  --accent-bg-hover: rgba(66,165,245,.25);
  --danger: #f44336;
  --danger-bg: rgba(244,67,54,.15);
  --ok: #4caf50;
  --ok-bg: rgba(76,175,80,.15);
  --warn: #ff9800;
  --warn-bg: rgba(255,152,0,.15);
  --topbar-bg: rgba(19,47,76,.9);
  --modal-overlay: rgba(0,0,0,.7);
  --modal-bg: #132f4c;
  --modal-text: #e3f2fd;
  --input-bg: #0f2744;
  --shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ===== GREEN THEME ===== */
[data-theme="green"] {
  --bg: #0d1912;
  --bg-alt: #0f2418;
  --panel: #132d1a;
  --panel-hover: #1a3d22;
  --sidebar-bg: #0a150e;
  --text: #e8f5e9;
  --text-secondary: #c8e6c9;
  --muted: #81c784;
  --line: #1b5e20;
  --line-light: rgba(27,94,32,.6);
  --accent: #4caf50;
  --accent-bg: rgba(76,175,80,.15);
  --accent-bg-hover: rgba(76,175,80,.25);
  --danger: #f44336;
  --danger-bg: rgba(244,67,54,.15);
  --ok: #69f0ae;
  --ok-bg: rgba(105,240,174,.15);
  --warn: #ffeb3b;
  --warn-bg: rgba(255,235,59,.15);
  --topbar-bg: rgba(19,45,26,.9);
  --modal-overlay: rgba(0,0,0,.7);
  --modal-bg: #132d1a;
  --modal-text: #e8f5e9;
  --input-bg: #0f2418;
  --shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ===== PURPLE THEME ===== */
[data-theme="purple"] {
  --bg: #1a0a2e;
  --bg-alt: #251244;
  --panel: #2d1b4e;
  --panel-hover: #3d2860;
  --sidebar-bg: #150826;
  --text: #f3e5f5;
  --text-secondary: #e1bee7;
  --muted: #ba68c8;
  --line: #4a148c;
  --line-light: rgba(74,20,140,.6);
  --accent: #ce93d8;
  --accent-bg: rgba(206,147,216,.15);
  --accent-bg-hover: rgba(206,147,216,.25);
  --danger: #ff5252;
  --danger-bg: rgba(255,82,82,.15);
  --ok: #69f0ae;
  --ok-bg: rgba(105,240,174,.15);
  --warn: #ffd740;
  --warn-bg: rgba(255,215,64,.15);
  --topbar-bg: rgba(45,27,78,.9);
  --modal-overlay: rgba(0,0,0,.7);
  --modal-bg: #2d1b4e;
  --modal-text: #f3e5f5;
  --input-bg: #251244;
  --shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ===== THEME SWITCHER UI ===== */
.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-switcher select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb0c6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 100px;
}

.theme-switcher select:hover {
  border-color: var(--accent);
}

.theme-switcher select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

.theme-icon {
  font-size: 16px;
  line-height: 1;
}

/* Smooth transitions for theme changes */
body,
.sidebar,
.panel,
.card,
.tile,
.modal-content,
table,
input,
select,
textarea,
button,
.button {
  transition: background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease;
}