/**
 * STATECH MES — Brand Core CSS (v30.0)
 * Static file that defines Tailwind overrides via CSS custom properties.
 * Tenant-specific theme.css only sets the :root values — this file re-routes
 * every Tailwind utility class to those variables, so full palettes rebrand
 * automatically.
 */

/* ─── Default palette (STATECH) — overridden by per-tenant theme.css ─── */
:root {
  /* Primary palette (blue by default) */
  --brand-primary-50:  #EFF6FF;
  --brand-primary-100: #DBEAFE;
  --brand-primary-200: #BFDBFE;
  --brand-primary-300: #93C5FD;
  --brand-primary-400: #60A5FA;
  --brand-primary-500: #3B82F6;
  --brand-primary-600: #2563EB;
  --brand-primary-700: #1D4ED8;
  --brand-primary-800: #1E40AF;
  --brand-primary-900: #1E3A8A;
  --brand-primary-contrast: #FFFFFF;

  /* Secondary accent (orange) */
  --brand-accent-50:  #FFF7ED;
  --brand-accent-100: #FFEDD5;
  --brand-accent-500: #F97316;
  --brand-accent-600: #EA580C;
  --brand-accent-700: #C2410C;

  /* Semantic */
  --brand-success:   #10B981;
  --brand-success-50: #ECFDF5;
  --brand-success-700: #047857;
  --brand-warning:   #F59E0B;
  --brand-warning-50: #FFFBEB;
  --brand-warning-700: #B45309;
  --brand-error:     #EF4444;
  --brand-error-50:  #FEF2F2;
  --brand-error-700: #B91C1C;

  /* Surface / Text */
  --brand-bg:           #F8FAFC;
  --brand-surface:      #FFFFFF;
  --brand-surface-alt:  #F1F5F9;
  --brand-text:         #0F172A;
  --brand-text-muted:   #64748B;
  --brand-text-subtle:  #94A3B8;
  --brand-border:       #E2E8F0;
  --brand-border-strong:#CBD5E1;

  /* TopNav */
  --brand-topnav-bg:     #1E293B;
  --brand-topnav-bg-alt: #0F172A;
  --brand-topnav-text:   #FFFFFF;
  --brand-topnav-hover:  rgba(255,255,255,0.08);
  --brand-topnav-accent: #14B8A6;

  /* Layout tokens */
  --brand-radius-sm: 4px;
  --brand-radius:    8px;
  --brand-radius-lg: 12px;
  --brand-radius-xl: 16px;
  --brand-font: 'Inter', system-ui, -apple-system, sans-serif;
  --brand-font-heading: var(--brand-font);

  /* Shadow tokens */
  --brand-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --brand-shadow:    0 4px 12px rgba(0,0,0,.08);
  --brand-shadow-lg: 0 12px 40px rgba(0,0,0,.15);
}

/* ─── Body base ─── */
body {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text);
  font-family: var(--brand-font) !important;
}

/* ══════ Tailwind blue → primary (all shades) ══════ */
.bg-blue-50  { background-color: var(--brand-primary-50)  !important; }
.bg-blue-100 { background-color: var(--brand-primary-100) !important; }
.bg-blue-200 { background-color: var(--brand-primary-200) !important; }
.bg-blue-300 { background-color: var(--brand-primary-300) !important; }
.bg-blue-400 { background-color: var(--brand-primary-400) !important; }
.bg-blue-500 { background-color: var(--brand-primary-500) !important; }
.bg-blue-600 { background-color: var(--brand-primary-600) !important; }
.bg-blue-700 { background-color: var(--brand-primary-700) !important; }
.bg-blue-800 { background-color: var(--brand-primary-800) !important; }
.bg-blue-900 { background-color: var(--brand-primary-900) !important; }
.hover\:bg-blue-600:hover { background-color: var(--brand-primary-600) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-primary-700) !important; }
.hover\:bg-blue-800:hover { background-color: var(--brand-primary-800) !important; }
.hover\:bg-blue-50:hover  { background-color: var(--brand-primary-50)  !important; }
.hover\:bg-blue-100:hover { background-color: var(--brand-primary-100) !important; }
.text-blue-50  { color: var(--brand-primary-50)  !important; }
.text-blue-100 { color: var(--brand-primary-100) !important; }
.text-blue-300 { color: var(--brand-primary-300) !important; }
.text-blue-400 { color: var(--brand-primary-400) !important; }
.text-blue-500 { color: var(--brand-primary-500) !important; }
.text-blue-600 { color: var(--brand-primary-600) !important; }
.text-blue-700 { color: var(--brand-primary-700) !important; }
.text-blue-800 { color: var(--brand-primary-800) !important; }
.text-blue-900 { color: var(--brand-primary-900) !important; }
.border-blue-200 { border-color: var(--brand-primary-200) !important; }
.border-blue-300 { border-color: var(--brand-primary-300) !important; }
.border-blue-400 { border-color: var(--brand-primary-400) !important; }
.border-blue-500 { border-color: var(--brand-primary-500) !important; }
.border-blue-600 { border-color: var(--brand-primary-600) !important; }
.border-blue-700 { border-color: var(--brand-primary-700) !important; }
.ring-blue-500, .focus\:ring-blue-500:focus { --tw-ring-color: var(--brand-primary-500) !important; }
.ring-blue-600, .focus\:ring-blue-600:focus { --tw-ring-color: var(--brand-primary-600) !important; }
.focus\:border-blue-500:focus { border-color: var(--brand-primary-500) !important; }
.focus\:border-blue-600:focus { border-color: var(--brand-primary-600) !important; }
.divide-blue-200 > * + * { border-color: var(--brand-primary-200) !important; }

/* indigo → primary (alias) */
.bg-indigo-50  { background-color: var(--brand-primary-50)  !important; }
.bg-indigo-100 { background-color: var(--brand-primary-100) !important; }
.bg-indigo-500 { background-color: var(--brand-primary-500) !important; }
.bg-indigo-600 { background-color: var(--brand-primary-600) !important; }
.bg-indigo-700 { background-color: var(--brand-primary-700) !important; }
.text-indigo-500 { color: var(--brand-primary-500) !important; }
.text-indigo-600 { color: var(--brand-primary-600) !important; }
.text-indigo-700 { color: var(--brand-primary-700) !important; }
.border-indigo-500 { border-color: var(--brand-primary-500) !important; }
.border-indigo-600 { border-color: var(--brand-primary-600) !important; }

/* sky → primary (alias) */
.bg-sky-50  { background-color: var(--brand-primary-50)  !important; }
.bg-sky-100 { background-color: var(--brand-primary-100) !important; }
.bg-sky-500 { background-color: var(--brand-primary-500) !important; }
.bg-sky-600 { background-color: var(--brand-primary-600) !important; }
.text-sky-600 { color: var(--brand-primary-600) !important; }

/* v33.4: violet / purple / fuchsia → primary (alias, fuer KI-Themen visuell am naechsten) */
.bg-violet-50, .bg-purple-50, .bg-fuchsia-50   { background-color: var(--brand-primary-50)  !important; }
.bg-violet-100, .bg-purple-100, .bg-fuchsia-100 { background-color: var(--brand-primary-100) !important; }
.bg-violet-200, .bg-purple-200                  { background-color: var(--brand-primary-200) !important; }
.bg-violet-500, .bg-purple-500, .bg-fuchsia-500 { background-color: var(--brand-primary-500) !important; }
.bg-violet-600, .bg-purple-600, .bg-fuchsia-600 { background-color: var(--brand-primary-600) !important; }
.bg-violet-700, .bg-purple-700, .bg-fuchsia-700 { background-color: var(--brand-primary-700) !important; }
.hover\:bg-violet-600:hover, .hover\:bg-purple-600:hover { background-color: var(--brand-primary-600) !important; }
.hover\:bg-violet-700:hover, .hover\:bg-purple-700:hover { background-color: var(--brand-primary-700) !important; }
.text-violet-500, .text-purple-500, .text-fuchsia-500 { color: var(--brand-primary-500) !important; }
.text-violet-600, .text-purple-600, .text-fuchsia-600 { color: var(--brand-primary-600) !important; }
.text-violet-700, .text-purple-700, .text-fuchsia-700 { color: var(--brand-primary-700) !important; }
.text-violet-400, .text-purple-400                      { color: var(--brand-primary-400) !important; }
.border-violet-200, .border-purple-200                  { border-color: var(--brand-primary-200) !important; }
.border-violet-500, .border-purple-500                  { border-color: var(--brand-primary-500) !important; }
.border-violet-600, .border-purple-600                  { border-color: var(--brand-primary-600) !important; }

/* v33.4: cyan → primary (alias) */
.bg-cyan-50   { background-color: var(--brand-primary-50)  !important; }
.bg-cyan-100  { background-color: var(--brand-primary-100) !important; }
.bg-cyan-500  { background-color: var(--brand-primary-500) !important; }
.bg-cyan-600  { background-color: var(--brand-primary-600) !important; }
.bg-cyan-700  { background-color: var(--brand-primary-700) !important; }
.text-cyan-500 { color: var(--brand-primary-500) !important; }
.text-cyan-600 { color: var(--brand-primary-600) !important; }
.text-cyan-700 { color: var(--brand-primary-700) !important; }
.border-cyan-500 { border-color: var(--brand-primary-500) !important; }

/* v33.4: lime → success (alias, lime ist grüner Bereich) */
.bg-lime-50  { background-color: var(--brand-success-50) !important; }
.bg-lime-500 { background-color: var(--brand-success) !important; }
.bg-lime-600 { background-color: var(--brand-success) !important; }
.text-lime-600 { color: var(--brand-success) !important; }

/* ══════ Tailwind emerald/green → success ══════ */
.bg-emerald-50,  .bg-green-50  { background-color: var(--brand-success-50) !important; }
.bg-emerald-100, .bg-green-100 { background-color: var(--brand-success-50) !important; }
.bg-emerald-500, .bg-green-500 { background-color: var(--brand-success) !important; }
.bg-emerald-600, .bg-green-600 { background-color: var(--brand-success) !important; }
.bg-emerald-700, .bg-green-700 { background-color: var(--brand-success-700) !important; }
.hover\:bg-emerald-600:hover, .hover\:bg-green-600:hover { background-color: var(--brand-success) !important; }
.hover\:bg-emerald-700:hover, .hover\:bg-green-700:hover { background-color: var(--brand-success-700) !important; }
.text-emerald-500, .text-green-500 { color: var(--brand-success) !important; }
.text-emerald-600, .text-green-600 { color: var(--brand-success) !important; }
.text-emerald-700, .text-green-700 { color: var(--brand-success-700) !important; }
.border-emerald-200, .border-green-200 { border-color: var(--brand-success) !important; opacity: 0.4; }
.border-emerald-500, .border-green-500 { border-color: var(--brand-success) !important; }

/* teal aliased to success */
.bg-teal-500 { background-color: var(--brand-success) !important; }
.bg-teal-600 { background-color: var(--brand-success-700) !important; }
.text-teal-500 { color: var(--brand-success) !important; }
.text-teal-600 { color: var(--brand-success-700) !important; }

/* ══════ Tailwind amber/yellow → warning; orange → accent ══════ */
.bg-amber-50,  .bg-yellow-50  { background-color: var(--brand-warning-50) !important; }
.bg-amber-100, .bg-yellow-100 { background-color: var(--brand-warning-50) !important; }
.bg-amber-500, .bg-yellow-500 { background-color: var(--brand-warning) !important; }
.bg-amber-600, .bg-yellow-600 { background-color: var(--brand-warning) !important; }
.text-amber-500, .text-yellow-500 { color: var(--brand-warning) !important; }
.text-amber-600, .text-yellow-600 { color: var(--brand-warning) !important; }
.text-amber-700, .text-yellow-700 { color: var(--brand-warning-700) !important; }

.bg-orange-50  { background-color: var(--brand-accent-50)  !important; }
.bg-orange-100 { background-color: var(--brand-accent-100) !important; }
.bg-orange-500 { background-color: var(--brand-accent-500) !important; }
.bg-orange-600 { background-color: var(--brand-accent-600) !important; }
.text-orange-500 { color: var(--brand-accent-500) !important; }
.text-orange-600 { color: var(--brand-accent-600) !important; }
.text-orange-700 { color: var(--brand-accent-700) !important; }
.border-orange-500 { border-color: var(--brand-accent-500) !important; }

/* ══════ Tailwind red/rose/pink → error ══════ */
.bg-red-50,  .bg-rose-50  { background-color: var(--brand-error-50) !important; }
.bg-red-100, .bg-rose-100 { background-color: var(--brand-error-50) !important; }
.bg-red-500, .bg-rose-500 { background-color: var(--brand-error) !important; }
.bg-red-600, .bg-rose-600 { background-color: var(--brand-error) !important; }
.bg-red-700, .bg-rose-700 { background-color: var(--brand-error-700) !important; }
.hover\:bg-red-600:hover { background-color: var(--brand-error) !important; }
.hover\:bg-red-700:hover { background-color: var(--brand-error-700) !important; }
.text-red-500, .text-rose-500 { color: var(--brand-error) !important; }
.text-red-600, .text-rose-600 { color: var(--brand-error) !important; }
.text-red-700, .text-rose-700 { color: var(--brand-error-700) !important; }
.border-red-500 { border-color: var(--brand-error) !important; }
.border-red-600 { border-color: var(--brand-error) !important; }

/* ══════ Form elements get primary focus ═════ */
input:focus, select:focus, textarea:focus {
  outline: none;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--brand-primary-600);
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--brand-surface-alt); }
::-webkit-scrollbar-thumb { background: var(--brand-border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary-300); }

/* Text selection */
::selection {
  background: var(--brand-primary-100);
  color: var(--brand-primary-900);
}

/* ══════ TopNav base styling ══════ */
nav.brand-topnav, nav[style*="#1e293b"], nav[style*="#1E293B"], nav[style*="#0f172a"], nav[style*="#0F172A"] {
  background: var(--brand-topnav-bg) !important;
  color: var(--brand-topnav-text) !important;
}

/* ══════ Border-radius tokens ═════ */
.rounded { border-radius: var(--brand-radius-sm) !important; }
.rounded-md { border-radius: var(--brand-radius-sm) !important; }
.rounded-lg { border-radius: var(--brand-radius) !important; }
.rounded-xl { border-radius: var(--brand-radius-lg) !important; }
.rounded-2xl { border-radius: var(--brand-radius-xl) !important; }

/* ══════ Utility helpers for direct use ═════ */
.bg-brand-primary { background-color: var(--brand-primary-600) !important; }
.bg-brand-primary-hover:hover { background-color: var(--brand-primary-700) !important; }
.text-brand-primary { color: var(--brand-primary-600) !important; }
.border-brand-primary { border-color: var(--brand-primary-600) !important; }
.bg-brand-accent { background-color: var(--brand-accent-500) !important; }
.text-brand-accent { color: var(--brand-accent-500) !important; }
.bg-brand-success { background-color: var(--brand-success) !important; }
.text-brand-success { color: var(--brand-success) !important; }
.bg-brand-warning { background-color: var(--brand-warning) !important; }
.text-brand-warning { color: var(--brand-warning) !important; }
.bg-brand-error { background-color: var(--brand-error) !important; }
.text-brand-error { color: var(--brand-error) !important; }
.bg-brand-surface { background-color: var(--brand-surface) !important; }
.bg-brand-surface-alt { background-color: var(--brand-surface-alt) !important; }
.text-brand { color: var(--brand-text); }
.text-brand-muted { color: var(--brand-text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
 * v33.0 — Neutrale Palette: gray/slate/zinc/neutral/stone → Brand-Tokens
 * Ohne diese Overrides blieben >900 Flächen hart-grau trotz Branding-Save.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Hintergründe 50 → bg (App-BG) */
.bg-gray-50, .bg-slate-50, .bg-zinc-50, .bg-neutral-50, .bg-stone-50 {
  background-color: var(--brand-bg) !important;
}
.hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover, .hover\:bg-zinc-50:hover,
.hover\:bg-neutral-50:hover, .hover\:bg-stone-50:hover {
  background-color: var(--brand-bg) !important;
}

/* Hintergründe 100/200 → surface-alt (leichte Tönung) */
.bg-gray-100, .bg-slate-100, .bg-zinc-100, .bg-neutral-100, .bg-stone-100,
.bg-gray-200, .bg-slate-200, .bg-zinc-200, .bg-neutral-200, .bg-stone-200 {
  background-color: var(--brand-surface-alt) !important;
}
.hover\:bg-gray-100:hover, .hover\:bg-slate-100:hover, .hover\:bg-zinc-100:hover,
.hover\:bg-neutral-100:hover, .hover\:bg-stone-100:hover,
.hover\:bg-gray-200:hover, .hover\:bg-slate-200:hover {
  background-color: var(--brand-surface-alt) !important;
}

/* Hintergründe 800/900 → topnav-bg (dunkle Flächen) */
.bg-gray-800, .bg-slate-800, .bg-zinc-800, .bg-neutral-800, .bg-stone-800,
.bg-gray-900, .bg-slate-900, .bg-zinc-900, .bg-neutral-900, .bg-stone-900,
.bg-gray-950, .bg-slate-950, .bg-zinc-950, .bg-neutral-950, .bg-stone-950 {
  background-color: var(--brand-topnav-bg) !important;
}

/* Borders */
.border-gray-100, .border-slate-100, .border-zinc-100, .border-neutral-100, .border-stone-100,
.border-gray-200, .border-slate-200, .border-zinc-200, .border-neutral-200, .border-stone-200 {
  border-color: var(--brand-border) !important;
}
.border-gray-300, .border-slate-300, .border-zinc-300, .border-neutral-300, .border-stone-300,
.border-gray-400, .border-slate-400, .border-zinc-400, .border-neutral-400, .border-stone-400 {
  border-color: var(--brand-border-strong) !important;
}
.divide-gray-100 > * + *, .divide-slate-100 > * + *, .divide-zinc-100 > * + *,
.divide-gray-200 > * + *, .divide-slate-200 > * + *, .divide-zinc-200 > * + * {
  border-color: var(--brand-border) !important;
}
.divide-gray-300 > * + *, .divide-slate-300 > * + * {
  border-color: var(--brand-border-strong) !important;
}

/* Text-Farben Grautöne */
.text-gray-900, .text-slate-900, .text-zinc-900, .text-neutral-900, .text-stone-900,
.text-gray-800, .text-slate-800, .text-zinc-800, .text-neutral-800, .text-stone-800,
.text-gray-700, .text-slate-700, .text-zinc-700, .text-neutral-700, .text-stone-700 {
  color: var(--brand-text) !important;
}
.text-gray-600, .text-slate-600, .text-zinc-600, .text-neutral-600, .text-stone-600,
.text-gray-500, .text-slate-500, .text-zinc-500, .text-neutral-500, .text-stone-500 {
  color: var(--brand-text-muted) !important;
}
.text-gray-400, .text-slate-400, .text-zinc-400, .text-neutral-400, .text-stone-400,
.text-gray-300, .text-slate-300 {
  color: var(--brand-text-subtle, var(--brand-text-muted)) !important;
}

/* Weißflächen sollen Surface nehmen (damit Dark-Mode greift) */
.bg-white { background-color: var(--brand-surface) !important; }
.hover\:bg-white:hover { background-color: var(--brand-surface) !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * v32.0 — Component-Tokens
 * Tailwind-Overrides fuer dynamische Component-Props aus TenantTheme.tokens
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Button component ── */
button:not(.raw), .btn, [role="button"]:not(.raw) {
  padding: var(--brand-btn-py) var(--brand-btn-px);
  font-weight: var(--brand-btn-fw);
  border-radius: var(--brand-btn-radius);
  transition: background-color .15s, box-shadow .15s, transform .05s;
}
.btn-primary {
  background-color: var(--brand-primary-600);
  color: var(--brand-primary-contrast);
  box-shadow: var(--brand-shadow-sm);
}
.btn-primary:hover { background-color: var(--brand-primary-700); }

/* ── Card component ── */
.card, .brand-card {
  background-color: var(--brand-surface);
  border-radius: var(--brand-card-radius);
  padding: var(--brand-card-pad);
  border: var(--brand-card-border) solid var(--brand-border);
  box-shadow: var(--brand-shadow);
  color: var(--brand-text);
}

/* ── Input component (v32) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  border-radius: var(--brand-input-radius);
  padding: var(--brand-input-py) var(--brand-input-px);
  border: var(--brand-input-border) solid var(--brand-border);
  background-color: var(--brand-surface);
  color: var(--brand-text);
  font-family: var(--brand-font);
}

/* ── Density modifier: body class .brand-density-compact / -comfortable ── */
body.brand-density-compact { --brand-density-scale: 0.85; }
body.brand-density-comfortable { --brand-density-scale: 1.2; }

/* ── Dark-Mode: invert body bg/text when [data-theme=dark] ── */
html[data-theme="dark"] body,
body[data-theme="dark"] {
  background-color: var(--brand-bg) !important;
  color: var(--brand-text) !important;
}
html[data-theme="dark"] .card, html[data-theme="dark"] .brand-card,
body[data-theme="dark"] .card, body[data-theme="dark"] .brand-card {
  border-color: var(--brand-border);
}

/* ── Layout modes (v32) ── */
/* Sidebar mode: move nav into fixed left column; shell adds left padding. */
body.brand-layout-sidebar #statech-shell,
body.brand-layout-sidebar .app-shell {
  padding-left: var(--brand-sidebar-width);
}
body.brand-layout-kiosk nav.brand-topnav,
body.brand-layout-kiosk statech-topnav {
  display: none !important;
}
body.brand-layout-kiosk {
  padding-top: 0 !important;
}

/* ── Topnav height respect ── */
statech-topnav, nav.brand-topnav { min-height: var(--brand-topnav-height); }