/* ============================================================================
   Toolbase-Verwaltung Rework — scoped design tokens (2026-07)
   Source: Claude Design project "EMP Plattform – Design System"
   (patterns/*.html, foundations/farben.html, foundations/typografie.html,
   components/tabellen.html, components/badges-alerts.html).

   Deliberately scoped under .tb-rework, NOT :root — this must never leak
   outside the Toolbase-Verwaltung pages that opt in (see the plan's scope
   decision: global MudBlazor theme in frontend/Theme/TcmTheme.cs is
   untouched). Font uses the fallback stack only (no Nudista Web licensing).
   ============================================================================ */

.tb-rework {
  /* Marke (Bronze-Skala aus #B5895E abgeleitet) */
  --brand-50: #FAF5EF;
  --brand-100: #F3E8DA;
  --brand-200: #E6D2B6;
  --brand-300: #D5B78D;
  --brand-400: #C5A06E;
  --brand-500: #B5895E;
  --brand-600: #9A7048;
  --brand-700: #7C5938;
  --brand-800: #5E432B;
  --brand-900: #412E1E;

  /* Warme Neutrale */
  --n-0: #FFFFFF;
  --n-25: #FCFBFA;
  --n-50: #F7F6F4;
  --n-100: #EFEDE9;
  --n-200: #E3E0DB;
  --n-300: #CBC7C0;
  --n-400: #A6A199;
  --n-500: #7E7972;
  --n-600: #5C5750;
  --n-700: #403C37;
  --n-800: #2B2823;
  --n-900: #1B1917;

  /* Status — immer mit Icon + Label, nie Farbe allein */
  --ok: #2E7D43;
  --ok-bg: #E8F3EB;
  --warn: #B25E09;
  --warn-bg: #FBF0E1;
  --err: #C0392B;
  --err-bg: #FBEAE8;
  --info: #2B6CB0;
  --info-bg: #E8F0F9;

  /* Typografie: Fallback-Stack (kein Nudista Web, keine Lizenz vorhanden) */
  --tb-font: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Form & Tiefe */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(27, 25, 23, .06);
  --shadow-md: 0 2px 8px rgba(27, 25, 23, .08), 0 1px 2px rgba(27, 25, 23, .05);
  --shadow-lg: 0 8px 24px rgba(27, 25, 23, .14);
  --focus: 0 0 0 3px rgba(181, 137, 94, .35);

  font-family: var(--tb-font);
  background: var(--n-50);
  color: var(--n-800);
  padding: 4px 0 24px;
}

/* ---- Eyebrow / headings (used by EmpPageHeader) --------------------------- */
.tb-rework .tb-eyebrow {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-600);
  margin: 0 0 4px;
}

.tb-rework .tb-h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--n-900);
  font-family: var(--tb-font);
}

/* ---- Buttons --------------------------------------------------------------
   MudBlazor variant classes: mud-button-filled (primary action),
   mud-button-outlined (secondary action). Scoped so this never touches
   buttons outside Toolbase-Verwaltung pages. */
.tb-rework .mud-button-root {
  border-radius: var(--r-md);
  font-family: var(--tb-font);
  text-transform: none;
  font-weight: 600;
}

.tb-rework .mud-button-filled.mud-button-filled-primary {
  background-color: var(--brand-600);
}

.tb-rework .mud-button-outlined.mud-button-outlined-primary {
  border-color: var(--n-300);
  color: var(--n-800);
}

/* ---- Filter chips ----------------------------------------------------------
   MudChip default vs. selected/filled state. */
.tb-rework .mud-chip {
  border-radius: 999px;
  font-family: var(--tb-font);
  font-weight: 600;
}

.tb-rework .mud-chip-filled.mud-chip-color-primary {
  background-color: var(--brand-600) !important;
  color: #fff !important;
}

/* ---- Cards / paper ---------------------------------------------------------- */
.tb-rework .mud-paper,
.tb-rework .mud-card {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* ---- Tables -----------------------------------------------------------------
   Ruhige Linien statt Zebrastreifen, Hover in Bronze-50, sortierte Spalte
   in Bronze-700, Zahlen tabellarisch rechtsbündig. */
.tb-rework .mud-table-container {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.tb-rework .mud-table-head .mud-table-cell {
  font-size: 11px;
  font-weight: 700;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--n-25);
  border-bottom: 1px solid var(--n-200);
}

.tb-rework .mud-table-head .mud-table-sort-label-active {
  color: var(--brand-700);
}

.tb-rework .mud-table-body .mud-table-row:hover {
  background-color: var(--brand-50) !important;
}

.tb-rework .mud-table-body .mud-table-cell {
  border-bottom: 1px solid var(--n-100);
  font-family: var(--tb-font);
  font-size: 13.5px;
  color: var(--n-800);
}

/* Explicitly disable MudBlazor's built-in zebra striping for this scope —
   the design system calls for hover-only emphasis, no alternating rows. */
.tb-rework .mud-table-striped .mud-table-row:nth-of-type(odd) {
  background-color: transparent;
}

/* ---- Status pills (EmpStatusPill) -------------------------------------- */
.tb-rework .tb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--tb-font);
  line-height: 1.6;
}

.tb-rework .tb-pill-ok { background: var(--ok-bg); color: var(--ok); }
.tb-rework .tb-pill-warn { background: var(--warn-bg); color: var(--warn); }
.tb-rework .tb-pill-err { background: var(--err-bg); color: var(--err); }
.tb-rework .tb-pill-info { background: var(--info-bg); color: var(--info); }

/* ---- Text fields ------------------------------------------------------- */
.tb-rework .mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--r-sm);
}