/* ═══════════════════════════════════════════════════
   MEOS 4.0 – Theme Konfiguration
   Schreinerhelden GmbH
   
   ANLEITUNG: Farben hier ändern → sofort überall sichtbar
   Kein Rebuild nötig! Einfach Datei bearbeiten + Upload.
   
   FARBSCHEMA:
   - Primary (Orange):   Hauptfarbe, Buttons, aktive Elemente
   - Secondary (Braun):  Sidebar, Header, Akzente  
   - Success (Grün):     Bestätigungen, positive Werte
   - Warning (Gelb):     Warnungen, Budget-Hinweise
   - Danger (Rot):       Fehler, kritische Aktionen
   - Neutral (Grau):     Hintergründe, Borders, Text
   ═══════════════════════════════════════════════════ */

:root {
  /* ── PRIMARY: Orange (Schreinerhelden) ── */
  --primary:          #e87b1c;
  --primary-light:    #f5a623;
  --primary-dark:     #c4650f;
  --primary-bg:       #fef6ee;
  --primary-hover:    #d06a10;

  /* ── SECONDARY: Braun (Logo) ── */
  --secondary:        #6b4c2a;
  --secondary-light:  #8b6d45;
  --secondary-dark:   #4a3219;
  --secondary-bg:     #f5f0eb;

  /* ── SIDEBAR & HEADER ── */
  --sidebar-bg:       #1a1207;
  --sidebar-text:     #e8ddd0;
  --sidebar-hover:    #2d200f;
  --sidebar-active:   #e87b1c;
  --sidebar-active-bg: rgba(232,123,28,0.15);
  --header-bg:        #1a1207;

  /* ── SUCCESS ── */
  --success:          #16a34a;
  --success-light:    #22c55e;
  --success-bg:       #f0fdf4;

  /* ── WARNING ── */
  --warning:          #d97706;
  --warning-light:    #f59e0b;
  --warning-bg:       #fffbeb;

  /* ── DANGER ── */
  --danger:           #dc2626;
  --danger-light:     #f87171;
  --danger-bg:        #fef2f2;

  /* ── NEUTRAL (Grautöne) ── */
  --bg-page:          #f8f6f3;
  --bg-card:          #ffffff;
  --bg-input:         #ffffff;
  --border:           #e2ddd6;
  --border-light:     #f0ebe4;
  --text-primary:     #1a1207;
  --text-secondary:   #6b5d4d;
  --text-muted:       #9b8e7e;
  --text-on-primary:  #ffffff;

  /* ── TYPOGRAPHY ── */
  --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-size-xs:     11px;
  --font-size-sm:     12px;
  --font-size-base:   14px;
  --font-size-lg:     16px;
  --font-size-xl:     20px;
  --font-size-2xl:    24px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   600;
  --font-weight-heavy:  700;

  /* ── SPACING & RADIUS ── */
  --radius-sm:        6px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-full:      9999px;

  /* ── SHADOWS ── */
  --shadow-sm:        0 1px 3px rgba(26,18,7,0.06);
  --shadow-md:        0 4px 12px rgba(26,18,7,0.08);
  --shadow-lg:        0 8px 24px rgba(26,18,7,0.12);

  /* ── PHASE COLORS (Pipeline) ── */
  --phase-angebot:    #e87b1c;
  --phase-auftrag:    #8b6d45;
  --phase-aufmass:    #06b6d4;
  --phase-planung:    #6b4c2a;
  --phase-fertigung:  #f59e0b;
  --phase-montage:    #16a34a;
  --phase-abnahme:    #14b8a6;
  --phase-rechnung:   #e87b1c;
  --phase-zahlung:    #22c55e;

  /* ── ROLE COLORS ── */
  --role-admin:       #dc2626;
  --role-buero:       #e87b1c;
  --role-hr:          #8b6d45;
  --role-marketing:   #16a34a;
  --role-werkstatt:   #d97706;
  --role-montage:     #f59e0b;
  --role-stempeln:    #9b8e7e;
}

/* ═══════════════════════════════════════════════════
   GLOBAL STYLES
   ═══════════════════════════════════════════════════ */

body {
  font-family: var(--font-family);
  background: var(--bg-page);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── SIDEBAR ── */
.sidebar, nav[class*="sidebar"], div[style*="width:220px"], div[style*="width: 220px"] {
  background: var(--sidebar-bg) !important;
}

.sidebar a, .sidebar button, nav a {
  color: var(--sidebar-text) !important;
  transition: all 0.15s;
}

.sidebar a:hover, .sidebar button:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-active) !important;
}

/* ── BUTTONS ── */
.btn-primary, button[style*="background:#3b82f6"], button[style*="background: #3b82f6"] {
  background: var(--primary) !important;
  color: var(--text-on-primary) !important;
  border: none !important;
  border-radius: var(--radius-md);
  transition: all 0.15s;
}

.btn-primary:hover, button[style*="background:#3b82f6"]:hover {
  background: var(--primary-hover) !important;
}

/* ── LINKS ── */
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  color: var(--primary-dark);
}

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── INPUTS ── */
input, select, textarea {
  border-color: var(--border) !important;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(232,123,28,0.15);
}

/* ── PILLS / BADGES ── */
.pill {
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* ── LOADING SPINNER ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── FADE IN ── */
.fade-in {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── LOGIN PAGE ── */
.login-container {
  background: var(--sidebar-bg);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --font-size-base: 13px;
    --font-size-lg: 15px;
  }
}