/* YABOX visual themes. UI tokens only, no business rules. */
:root,
html[data-yabox-theme="general"],
body[data-theme="general"] {
  --y-bg: #F7F8FA;
  --y-surface: #FFFFFF;
  --y-sidebar: #0F172A;
  --y-sidebar-text: #E5E7EB;
  --y-primary: #2563EB;
  --y-secondary: #60A5FA;
  --y-success: #10B981;
  --y-warning: #F59E0B;
  --y-danger: #EF4444;
  --y-text: #111827;
  --y-muted: #6B7280;
  --y-border: #E5E7EB;
  --y-card-radius: 12px;
  --bg: var(--y-bg);
  --white: var(--y-surface);
  --bg-elev: var(--y-surface);
  --bg-sidebar: var(--y-sidebar);
  --bg-hover: #EEF2F8;
  --bg-active: rgba(37,99,235,.12);
  --text: var(--y-text);
  --text2: var(--y-muted);
  --text3: #94A3B8;
  --text-dim: var(--y-muted);
  --text-faint: #94A3B8;
  --border: var(--y-border);
  --border2: #CBD5E1;
  --accent: var(--y-primary);
  --accent-h: #1D4ED8;
  --accent-soft: rgba(37,99,235,.12);
  --blue: var(--y-primary);
  --green: var(--y-success);
  --success: var(--y-success);
  --orange: var(--y-warning);
  --warn: var(--y-warning);
  --red: var(--y-danger);
  --danger: var(--y-danger);
  --radius: var(--y-card-radius);
  --r-lg: var(--y-card-radius);
  --shadow: 0 8px 24px rgba(16,24,40,.10);
  --kit-bg: var(--y-bg);
  --kit-panel: var(--y-surface);
  --kit-border: var(--y-border);
  --kit-text: var(--y-text);
  --kit-muted: var(--y-muted);
  --kit-accent: var(--y-primary);
}

html[data-yabox-theme="feminine"],
body[data-theme="feminine"] {
  --y-bg: #FFF7FB;
  --y-surface: #FFFFFF;
  --y-sidebar: #3B0764;
  --y-sidebar-text: #FCE7F3;
  --y-primary: #D946EF;
  --y-secondary: #F9A8D4;
  --y-success: #10B981;
  --y-warning: #F59E0B;
  --y-danger: #EF4444;
  --y-text: #2D1B3D;
  --y-muted: #8B5C7E;
  --y-border: #F3D7EA;
  --y-card-radius: 14px;
  --bg: var(--y-bg);
  --white: var(--y-surface);
  --bg-elev: var(--y-surface);
  --bg-sidebar: var(--y-sidebar);
  --bg-hover: #FCE7F3;
  --bg-active: rgba(217,70,239,.13);
  --text: var(--y-text);
  --text2: var(--y-muted);
  --text3: #B984AA;
  --text-dim: var(--y-muted);
  --text-faint: #B984AA;
  --border: var(--y-border);
  --border2: #E9BBD8;
  --accent: var(--y-primary);
  --accent-h: #C026D3;
  --accent-soft: rgba(217,70,239,.13);
  --blue: var(--y-primary);
  --green: var(--y-success);
  --success: var(--y-success);
  --orange: var(--y-warning);
  --warn: var(--y-warning);
  --red: var(--y-danger);
  --danger: var(--y-danger);
  --radius: var(--y-card-radius);
  --r-lg: var(--y-card-radius);
  --shadow: 0 10px 28px rgba(75,7,100,.10);
  --kit-bg: var(--y-bg);
  --kit-panel: var(--y-surface);
  --kit-border: var(--y-border);
  --kit-text: var(--y-text);
  --kit-muted: var(--y-muted);
  --kit-accent: var(--y-primary);
}

html[data-yabox-theme="primary"],
body[data-theme="primary"] {
  --y-bg: #F4F7FF;
  --y-surface: #FFFFFF;
  --y-sidebar: #071A3D;
  --y-sidebar-text: #DBEAFE;
  --y-primary: #1D4ED8;
  --y-secondary: #60A5FA;
  --y-success: #059669;
  --y-warning: #D97706;
  --y-danger: #DC2626;
  --y-text: #0F172A;
  --y-muted: #64748B;
  --y-border: #D8E2F3;
  --y-card-radius: 12px;
  --bg: var(--y-bg);
  --white: var(--y-surface);
  --bg-elev: var(--y-surface);
  --bg-sidebar: var(--y-sidebar);
  --bg-hover: #EAF1FF;
  --bg-active: rgba(29,78,216,.13);
  --text: var(--y-text);
  --text2: var(--y-muted);
  --text3: #94A3B8;
  --text-dim: var(--y-muted);
  --text-faint: #94A3B8;
  --border: var(--y-border);
  --border2: #BED0EA;
  --accent: var(--y-primary);
  --accent-h: #1E40AF;
  --accent-soft: rgba(29,78,216,.13);
  --blue: var(--y-primary);
  --green: var(--y-success);
  --success: var(--y-success);
  --orange: var(--y-warning);
  --warn: var(--y-warning);
  --red: var(--y-danger);
  --danger: var(--y-danger);
  --radius: var(--y-card-radius);
  --r-lg: var(--y-card-radius);
  --shadow: 0 10px 28px rgba(7,26,61,.11);
  --kit-bg: var(--y-bg);
  --kit-panel: var(--y-surface);
  --kit-border: var(--y-border);
  --kit-text: var(--y-text);
  --kit-muted: var(--y-muted);
  --kit-accent: var(--y-primary);
}

html[data-yabox-theme="simple"],
body[data-theme="simple"] {
  --y-bg: #FAFAFA;
  --y-surface: #FFFFFF;
  --y-sidebar: #FFFFFF;
  --y-sidebar-text: #111827;
  --y-primary: #2563EB;
  --y-secondary: #93C5FD;
  --y-success: #16A34A;
  --y-warning: #EA580C;
  --y-danger: #DC2626;
  --y-text: #111827;
  --y-muted: #6B7280;
  --y-border: #E5E7EB;
  --y-card-radius: 8px;
  --bg: var(--y-bg);
  --white: var(--y-surface);
  --bg-elev: var(--y-surface);
  --bg-sidebar: var(--y-sidebar);
  --bg-hover: #F3F4F6;
  --bg-active: rgba(37,99,235,.10);
  --text: var(--y-text);
  --text2: var(--y-muted);
  --text3: #9CA3AF;
  --text-dim: var(--y-muted);
  --text-faint: #9CA3AF;
  --border: var(--y-border);
  --border2: #D1D5DB;
  --accent: var(--y-primary);
  --accent-h: #1D4ED8;
  --accent-soft: rgba(37,99,235,.10);
  --blue: var(--y-primary);
  --green: var(--y-success);
  --success: var(--y-success);
  --orange: var(--y-warning);
  --warn: var(--y-warning);
  --red: var(--y-danger);
  --danger: var(--y-danger);
  --radius: var(--y-card-radius);
  --r-lg: var(--y-card-radius);
  --shadow: 0 6px 18px rgba(17,24,39,.07);
  --kit-bg: var(--y-bg);
  --kit-panel: var(--y-surface);
  --kit-border: var(--y-border);
  --kit-text: var(--y-text);
  --kit-muted: var(--y-muted);
  --kit-accent: var(--y-primary);
}

body[data-theme] {
  background: var(--y-bg);
  color: var(--y-text);
}

body[data-theme] .sidebar,
html[data-yabox-theme]:not([data-theme="nuit"]) .sidebar {
  background: var(--y-sidebar) !important;
  color: var(--y-sidebar-text) !important;
  border-right-color: color-mix(in srgb, var(--y-sidebar-text) 18%, transparent) !important;
}

body[data-theme] .sidebar .nav-item,
body[data-theme] .sidebar .sd-item,
body[data-theme] .sidebar .sd-group-btn,
body[data-theme] .sidebar .nav-section-title,
body[data-theme] .sidebar .sd-brand-ver,
body[data-theme] .sidebar .sd-urole {
  color: color-mix(in srgb, var(--y-sidebar-text) 72%, transparent) !important;
}

body[data-theme] .sidebar .sd-brand-name,
body[data-theme] .sidebar .sd-uname,
body[data-theme] .sidebar .agent-name,
body[data-theme] .sidebar .sidebar-name {
  color: var(--y-sidebar-text) !important;
}

body[data-theme] .sidebar .nav-item:hover,
body[data-theme] .sidebar .sd-item:hover,
body[data-theme] .sidebar .sd-group-btn:hover {
  background: color-mix(in srgb, var(--y-sidebar-text) 12%, transparent) !important;
  color: var(--y-sidebar-text) !important;
}

body[data-theme] .sidebar .nav-item.active,
body[data-theme] .sidebar .sd-item.active {
  background: var(--accent-soft) !important;
  color: var(--y-sidebar-text) !important;
  border-left-color: var(--y-primary) !important;
}

body[data-theme="simple"] .sidebar .nav-item,
body[data-theme="simple"] .sidebar .sd-item,
body[data-theme="simple"] .sidebar .sd-group-btn,
body[data-theme="simple"] .sidebar .nav-section-title,
body[data-theme="simple"] .sidebar .sd-brand-ver,
body[data-theme="simple"] .sidebar .sd-urole {
  color: var(--y-muted) !important;
}

body[data-theme="simple"] .sidebar .sd-brand-name,
body[data-theme="simple"] .sidebar .sd-uname,
body[data-theme="simple"] .sidebar .agent-name,
body[data-theme="simple"] .sidebar .sidebar-name,
body[data-theme="simple"] .sidebar .nav-item:hover,
body[data-theme="simple"] .sidebar .sd-item:hover,
body[data-theme="simple"] .sidebar .nav-item.active {
  color: var(--y-text) !important;
}

.theme-panel {
  display: grid;
  gap: 18px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.theme-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs, none);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.theme-option:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.theme-option.is-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.theme-preview {
  min-height: 92px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--theme-bg);
  display: grid;
  grid-template-columns: 50px 1fr;
  margin-bottom: 12px;
}

.theme-preview-sidebar {
  background: var(--theme-sidebar);
}

.theme-preview-body {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.theme-preview-card {
  height: 24px;
  border-radius: 6px;
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
}

.theme-preview-row {
  display: flex;
  gap: 6px;
}

.theme-preview-chip {
  width: 36px;
  height: 12px;
  border-radius: 999px;
  background: var(--theme-primary);
}

.theme-preview-chip.muted {
  background: var(--theme-muted);
  opacity: .35;
}

.theme-option-title {
  font-weight: 800;
  margin-bottom: 4px;
}

.theme-option-desc {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.4;
}

.theme-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.theme-status {
  color: var(--text2);
  font-size: 13px;
}