/* ══════════════════════════════════════════════════════════════
   Theme: Dark (Slack-inspiriert)
   Warme, dunkle Grautöne mit grünem Akzent.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Hintergründe ─────────────────────────────────────────── */
  --bg-app: #1a1d21;
  --bg-surface: #222529;
  --bg-surface-alt: #2c2d31;
  --bg-surface-hover: #35373b;
  --bg-elevated: #2c2d31;
  --bg-input: #1a1d21;
  --bg-overlay: rgba(0, 0, 0, 0.65);

  /* ── Navigation (Sidebar) ──────────────────────────────────── */
  --nav-bg: #19171d;
  --nav-text: #d1d2d3;
  --nav-item-color: #cfc3cf;
  --nav-item-hover-bg: #0c45704d;
  --nav-item-active-bg: #0c4570;
  --nav-item-active-color: #ffffff;
  --nav-item-active-border: #1164a3;

  /* ── Akzent (Slack-Grün + Blau-Links) ──────────────────────── */
  --accent: #1062a5;
  --accent-hover: #56b3ff;
  --accent-soft: rgba(150, 184, 255, 0.15);
  --accent-text: #1d9bd1;

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary: #d1d2d3;
  --text-secondary: #ababad;
  --text-tertiary: #8b8b8d;
  --text-on-accent: #ffffff;
  --text-on-accent-soft: rgba(255, 255, 255, 0.6);
  --text-on-accent-strong: rgba(255, 255, 255, 0.92);

  /* ── Borders ───────────────────────────────────────────────── */
  --border-default: #35373b;
  --border-strong: #49494e;
  --border-input: #49494e;

  /* ── Signal-Farben ─────────────────────────────────────────── */
  --signal-red: #ff5a7c;
--signal-red-deep: #c41e48;
--signal-red-light: #ff9eb0;
--signal-red-bg: #3a1f28;
--signal-red-border: #b83b54;
--signal-yellow: #e6b422;
--signal-yellow-deep: #fdd46a;
--signal-yellow-light: #f7c22475;
--signal-yellow-bg: #33281a;
--signal-yellow-border: #eebc26;
--signal-green: #2ecc71;
--signal-green-deep: #1f8a4c;
--signal-green-light: #7ee3a8;
--signal-green-bg: #1e2a24;
--signal-green-border: #2e9c5a;

  /* ── Avatare / Status ─────────────────────────────────────── */
  --avatar-bg: var(--signal-green);
  --avatar-icon-color: var(--text-on-accent-soft);
  --avatar-text-color: var(--text-on-accent-strong);
  --status-active-bg: var(--signal-green-bg);
  --status-active-color: var(--signal-green);
  --status-active-border: var(--signal-green-border);
  --avatar-palette-1: var(--signal-green);
  --avatar-palette-2: var(--accent);
  --avatar-palette-3: var(--accent-text);
  --avatar-palette-4: var(--signal-yellow);
  --avatar-palette-5: var(--signal-red);
  --avatar-palette-6: var(--signal-green-deep);
  --avatar-palette-7: var(--link-color);
  --avatar-palette-8: var(--signal-yellow-deep);
  --avatar-palette-9: var(--signal-red-deep);
  --avatar-palette-10: var(--nav-item-active-border);

  /* ── Brand-Token ──────────────────────────────────────────── */
  --brand-google-blue: #4285f4;
  --brand-google-green: #34a853;
  --brand-google-yellow: #fbbc05;
  --brand-google-red: #ea4335;

  /* ── Surface-Text ──────────────────────────────────────────── */
  --surface-text: var(--text-primary);
  --surface-text-secondary: var(--text-secondary);

  /* ── Buttons ───────────────────────────────────────────────── */
  --btn-primary-bg: #0c4570;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #135a91;
  --btn-primary-hover-bg: #1275c7;

  --btn-secondary-bg: var(--bg-surface-alt);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: var(--border-default);
  --btn-secondary-hover-bg: var(--bg-surface-hover);

  --btn-danger-bg: #e01e5a;
  --btn-danger-text: #ffffff;
  --btn-danger-border: #c4133f;
  --btn-danger-hover-bg: #c4133f;

  /* ── Inputs ────────────────────────────────────────────────── */
  --input-bg: var(--bg-input);
  --input-text: var(--text-primary);
  --input-border: var(--border-strong);
  --input-placeholder: var(--text-tertiary);
  --input-focus-border: #115f807c;
  --input-focus-ring: rgba(29, 155, 209, 0.2);
  --input-disabled-bg: var(--bg-surface-alt);
  --input-disabled-opacity: 0.5;

  /* ── Links ─────────────────────────────────────────────────── */
  --link-color: #1d9bd1;
  --link-hover-color: #4fc3f7;

  /* ── Modals ────────────────────────────────────────────────── */
  --modal-bg: var(--bg-surface);
  --modal-text: var(--text-primary);
  --modal-text-secondary: var(--text-secondary);
  --modal-header-bg: #1a1d21;
  --modal-header-text: var(--text-primary);
  --modal-border: var(--border-default);

  /* ── Badges / Tags ─────────────────────────────────────────── */
  --badge-bg: rgba(29, 155, 209, 0.15);
  --badge-text: #1d9bd1;
  --tag-bg: rgba(29, 155, 209, 0.15);
  --tag-text: #1d9bd1;


  /* ── Schatten ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6);
  --scroll-shadow-color: rgba(255, 255, 255, 0.35);

  /* ── Rundungen ─────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 999px;

  /* ── Tabs ──────────────────────────────────────────────────── */
  /* Underline-Tabs (z.B. Mitarbeiter-Detail) */
  --tab-color:             #8b8b8d;       /* inaktiv */
  --tab-color-hover:       #d1d2d3;       /* hover   */
  --tab-active-color:      #1d9bd1;       /* aktiv – Text */
  --tab-active-border:     #1d9bd1;       /* aktiv – Unterstrich */
  --tab-bar-border:        #35373b;       /* Trennlinie unter der Tab-Leiste */
  /* Pill-Tabs (Filter-Tabs in der Mitarbeiterliste) */
  --tab-pill-bg-hover:     #2c2d31;
  --tab-pill-bg-active:    #2c2d31;
  --tab-pill-color-hover:  #d1d2d3;
  --tab-pill-color-active: #d1d2d3;
}