/* 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;
}

/* ============================================================
   NOUVEAUX THEMES YABOX (UI tokens only — aucune regle metier)
   Ajoutes via yabox-ui-pro pack. Apparaissent dans Personnaliser.
   ============================================================ */

/* --- NUIT : dark mode premium --- */
html[data-yabox-theme="nuit"],
body[data-theme="nuit"]{
  --y-bg:#0E1117; --y-surface:#171B22; --y-sidebar:#0A0D12; --y-sidebar-text:#C9D1D9;
  --y-primary:#E8400C; --y-secondary:#FF7A45; --y-success:#3FB950; --y-warning:#D29922;
  --y-danger:#F85149; --y-text:#E6EDF3; --y-muted:#8B949E; --y-border:#2A2F37; --y-card-radius:14px;
  --bg:var(--y-bg); --white:var(--y-surface); --bg-base:var(--y-bg);
  --bg-elev:var(--y-surface); --bg-1:var(--y-surface); --bg-2:#1C2129; --bg-3:#0E1117;
  --bg-sidebar:var(--y-sidebar); --bg-hover:#1F252E; --bg-active:rgba(232,64,12,.18);
  --text:var(--y-text); --text2:var(--y-muted); --text3:#6E7681; --text-dim:var(--y-muted); --text-faint:#6E7681;
  --border:var(--y-border); --border2:#3A4049; --border3:#454C56;
  --accent:var(--y-primary); --accent-h:var(--y-secondary); --accent-soft:rgba(232,64,12,.20);
  --blue:#4493F8; --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 30px rgba(0,0,0,.45); --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-focus:0 0 0 3px rgba(232,64,12,.4);
  --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);
}

/* --- EMERAUDE : vert business, calme et premium --- */
html[data-yabox-theme="emeraude"],
body[data-theme="emeraude"]{
  --y-bg:#F2F8F5; --y-surface:#FFFFFF; --y-sidebar:#063A2E; --y-sidebar-text:#D6EFE7;
  --y-primary:#0E8C7E; --y-secondary:#34D399; --y-success:#16A34A; --y-warning:#D97706;
  --y-danger:#DC2626; --y-text:#0B221C; --y-muted:#5B7268; --y-border:#D2E6DD; --y-card-radius:14px;
  --bg:var(--y-bg); --white:var(--y-surface); --bg-base:var(--y-bg);
  --bg-elev:var(--y-surface); --bg-2:#E8F2EE; --bg-3:#F2F8F5;
  --bg-sidebar:var(--y-sidebar); --bg-hover:#E4F1EB; --bg-active:rgba(14,140,126,.12);
  --text:var(--y-text); --text2:var(--y-muted); --text3:#94A3B8; --text-dim:var(--y-muted); --text-faint:#94A3B8;
  --border:var(--y-border); --border2:#B6D4C8; --border3:#9CC2B3;
  --accent:var(--y-primary); --accent-h:#0B7569; --accent-soft:rgba(14,140,126,.13);
  --blue:#2155E0; --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(6,58,46,.10); --shadow-focus:0 0 0 3px rgba(14,140,126,.25);
  --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);
}

/* --- SUNSET : orange signature YABOX, chaleureux --- */
html[data-yabox-theme="sunset"],
body[data-theme="sunset"]{
  --y-bg:#FFF8F4; --y-surface:#FFFFFF; --y-sidebar:#2A1206; --y-sidebar-text:#FBE3D6;
  --y-primary:#E8400C; --y-secondary:#FF7A45; --y-success:#16A34A; --y-warning:#D97706;
  --y-danger:#DC2626; --y-text:#2A1206; --y-muted:#8A6552; --y-border:#F3DCCF; --y-card-radius:16px;
  --bg:var(--y-bg); --white:var(--y-surface); --bg-base:var(--y-bg);
  --bg-elev:var(--y-surface); --bg-2:#FDEEE5; --bg-3:#FFF8F4;
  --bg-sidebar:var(--y-sidebar); --bg-hover:#FBEADF; --bg-active:rgba(232,64,12,.12);
  --text:var(--y-text); --text2:var(--y-muted); --text3:#B89684; --text-dim:var(--y-muted); --text-faint:#B89684;
  --border:var(--y-border); --border2:#EBC6B2; --border3:#E0B097;
  --accent:var(--y-primary); --accent-h:#C9360A; --accent-soft:rgba(232,64,12,.13);
  --blue:#2155E0; --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(232,64,12,.12); --shadow-focus:0 0 0 3px rgba(232,64,12,.25);
  --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);
}

/* --- ARDOISE : gris-bleu neutre, ultra pro --- */
html[data-yabox-theme="ardoise"],
body[data-theme="ardoise"]{
  --y-bg:#F1F5F9; --y-surface:#FFFFFF; --y-sidebar:#1E293B; --y-sidebar-text:#CBD5E1;
  --y-primary:#475569; --y-secondary:#94A3B8; --y-success:#16A34A; --y-warning:#D97706;
  --y-danger:#DC2626; --y-text:#0F172A; --y-muted:#64748B; --y-border:#DCE3EC; --y-card-radius:12px;
  --bg:var(--y-bg); --white:var(--y-surface); --bg-base:var(--y-bg);
  --bg-elev:var(--y-surface); --bg-2:#E8EEF5; --bg-3:#F1F5F9;
  --bg-sidebar:var(--y-sidebar); --bg-hover:#E6ECF3; --bg-active:rgba(71,85,105,.12);
  --text:var(--y-text); --text2:var(--y-muted); --text3:#94A3B8; --text-dim:var(--y-muted); --text-faint:#94A3B8;
  --border:var(--y-border); --border2:#C2CDDB; --border3:#A9B7C9;
  --accent:var(--y-primary); --accent-h:#334155; --accent-soft:rgba(71,85,105,.13);
  --blue:#2155E0; --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(15,23,42,.10); --shadow-focus:0 0 0 3px rgba(71,85,105,.25);
  --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);
}