/* ============================================================================
   TRUETALENT DESIGN SYSTEM v91 — Unified Cross-Portal Tokens & Styles
   ============================================================================
   Lädt NACH portal-v86-surgical.css → letzte Stimme.

   ARCHITEKTUR:
   ┌───────────────────────────────────────────────────────────────────┐
   │  SECTION 0 — Design Tokens (:root CSS Variables)                │
   │  SECTION 1 — Global Base Layer (html, body, *, fonts, inputs)   │
   │  SECTION 2 — Unified Login / Auth Pages                         │
   │  SECTION 3 — Unified Header (Admin + Talent + Sign + Builder)   │
   │  SECTION 4 — Unified Sidebar (Admin + Talent)                   │
   │  SECTION 5 — Unified Content Area                               │
   │  SECTION 6 — Unified Buttons                                    │
   │  SECTION 7 — Unified Form Inputs                                │
   │  SECTION 8 — Unified Cards                                      │
   │  SECTION 9 — Unified Tables                                     │
   │  SECTION 10 — Unified Modals                                    │
   │  SECTION 11+ — Feature-Specific Styles                          │
   └───────────────────────────────────────────────────────────────────┘
   ============================================================================ */


/* ============================================================================
   SECTION 0 — DESIGN TOKENS
   Single source of truth for colors, spacing, typography, radii, shadows.
   Every portal page inherits these. Change here → changes everywhere.
   ============================================================================ */

:root {
  /* ── Layout ─────────────────────────────────────────────────── */
  --tt-sidebar-w:       232px;
  --tt-header-h:        54px;
  --tt-sidebar-bg:      #151b2b;
  --tt-page-bg:         #f5f7fb;

  /* ── Header ─────────────────────────────────────────────────── */
  --tt-header-bg:       rgba(255, 255, 255, 0.96);
  --tt-header-border:   #dfe4ec;
  --tt-header-shadow:   0 1px 0 rgba(15, 23, 42, 0.04);
  --tt-header-pad-x:    20px;

  /* ── Typography ─────────────────────────────────────────────── */
  --tt-font:            ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                        "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto,
                        Helvetica, Arial, sans-serif;
  --tt-font-mono:       "SF Mono", "Fira Code", "Consolas", monospace;
  --tt-fs-2xs:          10.5px;
  --tt-fs-xs:           11px;
  --tt-fs-sm:           12px;
  --tt-fs-base:         13px;
  --tt-fs-md:           14px;
  --tt-fs-lg:           17px;
  --tt-fs-xl:           22px;
  --tt-fs-2xl:          28px;
  --tt-lh:              1.55;

  /* ── Colors — Text ──────────────────────────────────────────── */
  --tt-text:            #111827;
  --tt-text-secondary:  #374151;
  --tt-text-muted:      #6b7280;
  --tt-text-faint:      #9ca3af;

  /* ── Colors — Semantic ──────────────────────────────────────── */
  --tt-primary:         #111827;
  --tt-primary-hover:   #1f2937;
  --tt-accent:          #3b82f6;
  --tt-accent-hover:    #2563eb;
  --tt-success:         #047857;
  --tt-success-bg:      #d1fae5;
  --tt-warning:         #b45309;
  --tt-warning-bg:      #fef3c7;
  --tt-danger:          #b91c1c;
  --tt-danger-bg:       #fee2e2;
  --tt-danger-border:   #fecaca;
  --tt-info:            #2563eb;

  /* ── Colors — Surfaces ──────────────────────────────────────── */
  --tt-surface:         #ffffff;
  --tt-surface-alt:     #fafbfc;
  --tt-surface-hover:   #f3f4f6;
  --tt-surface-active:  #e5e7eb;

  /* ── Borders ────────────────────────────────────────────────── */
  --tt-border:          #e5e7eb;
  --tt-border-light:    #f1f1ef;
  --tt-border-input:    #d1d5db;
  --tt-border-strong:   #9ca3af;

  /* ── Sidebar Nav ────────────────────────────────────────────── */
  --tt-nav-text:        #d6dbe6;
  --tt-nav-hover-bg:    rgba(255, 255, 255, 0.08);
  --tt-nav-active-bg:   #3b82f6;
  --tt-nav-sub-border:  rgba(255, 255, 255, 0.12);
  --tt-nav-item-h:      36px;
  --tt-nav-item-r:      6px;
  --tt-nav-item-gap:    10px;
  --tt-nav-icon-size:   18px;

  /* ── Buttons ────────────────────────────────────────────────── */
  --tt-btn-h:           34px;
  --tt-btn-h-sm:        28px;
  --tt-btn-r:           6px;
  --tt-btn-font:        13px;
  --tt-btn-weight:      600;

  /* ── Inputs ─────────────────────────────────────────────────── */
  --tt-input-h:         36px;
  --tt-input-r:         6px;
  --tt-input-font:      13px;
  --tt-input-pad:       0 12px;

  /* ── Cards ──────────────────────────────────────────────────── */
  --tt-card-r:          8px;
  --tt-card-shadow:     0 1px 2px rgba(15, 23, 42, 0.03);

  /* ── Radii ──────────────────────────────────────────────────── */
  --tt-r-sm:            4px;
  --tt-r-md:            6px;
  --tt-r-lg:            8px;
  --tt-r-xl:            10px;
  --tt-r-2xl:           12px;
  --tt-r-pill:          999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --tt-shadow-xs:       0 1px 0 rgba(15, 23, 42, 0.03);
  --tt-shadow-sm:       0 1px 2px rgba(15, 23, 42, 0.04);
  --tt-shadow-md:       0 4px 12px rgba(15, 23, 42, 0.08);
  --tt-shadow-lg:       0 10px 30px rgba(15, 23, 42, 0.14);
  --tt-shadow-xl:       0 24px 64px rgba(15, 23, 42, 0.18);

  /* ── Modals ─────────────────────────────────────────────────── */
  --tt-modal-r:         12px;
  --tt-modal-shadow:    var(--tt-shadow-xl);
  --tt-modal-backdrop:  rgba(15, 23, 42, 0.5);

  /* ── Logo ───────────────────────────────────────────────────── */
  --tt-logo-h:          34px;

  /* ── Avatar ─────────────────────────────────────────────────── */
  --tt-avatar-size:     26px;
  --tt-avatar-bg:       linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --tt-avatar-font:     11px;

  /* ── Transitions ────────────────────────────────────────────── */
  --tt-ease:            0.15s ease;
  --tt-ease-slow:       0.25s ease;

  /* ── Content ────────────────────────────────────────────────── */
  --tt-content-pad:     22px 24px 28px;

  /* ── Page Titles ────────────────────────────────────────────── */
  --tt-page-title-fs:   22px;
  --tt-page-title-fw:   700;
  --tt-section-title-fs: 17px;
  --tt-section-title-fw: 700;

  /* ── Sidebar variable overrides (prevent facelift collapse) ── */
  --tt-nav-collapsed:   232px;
  --tt-nav-expanded:    232px;
}


/* ============================================================================
   SECTION 1 — GLOBAL BASE LAYER
   Applies to ALL portal pages: Admin, Talent, Sign, Builder, Generators.
   ============================================================================ */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--tt-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  min-width: 100vw !important;
  overflow-x: clip !important;
  color: var(--tt-text) !important;
  line-height: var(--tt-lh) !important;
}


/* ============================================================================
   SECTION 2 — UNIFIED LOGIN / AUTH PAGES
   Admin (#auth-view.auth-container) and Talent (.talent-shell.talent-auth-view)
   get the SAME centered, card-based layout — but .hidden ALWAYS wins.
   ============================================================================ */

/* CRITICAL: .hidden must always work — overrides all display rules */
#auth-view.hidden,
.auth-container.hidden,
.talent-shell.hidden,
.talent-shell.talent-auth-view.hidden,
#dashboard-view.hidden,
#loading-view.hidden {
  display: none !important;
}

/* ── ADMIN AUTH-VIEW (centering wrapper) ─────────────────────────── */
#auth-view.auth-container:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100vw !important;
  max-width: none !important;
  background: var(--tt-page-bg) !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
}

/* ── ADMIN LOGIN CARD ────────────────────────────────────────────── */
#auth-view.auth-container > .card,
.auth-container > .card {
  display: block !important;
  max-width: 420px !important;
  width: 100% !important;
  background: var(--tt-surface) !important;
  padding: 36px 32px !important;
  border-radius: var(--tt-modal-r) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10) !important;
  border: 1px solid var(--tt-border) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Inner centered header div (logo + Dashboard title) */
#auth-view.auth-container > .card > div[style*="text-align: center"] {
  display: block !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* ── TALENT AUTH-VIEW (centering wrapper) ────────────────────────── */
.talent-shell.talent-auth-view:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100vw !important;
  background: var(--tt-page-bg) !important;
  margin: 0 !important;
  padding: 16px !important;
  position: relative !important;
}

/* ── TALENT LOGIN CARD ───────────────────────────────────────────── */
.talent-shell.talent-auth-view .talent-auth-panel {
  display: block !important;
  max-width: 420px !important;
  width: 100% !important;
  background: var(--tt-surface) !important;
  padding: 36px 32px !important;
  border-radius: var(--tt-modal-r) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10) !important;
  border: 1px solid var(--tt-border) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  text-align: left !important;
}

/* ── LOGO in BOTH auth views — SAME SIZE ─────────────────────────── */
#auth-view.auth-container .logo,
#auth-view.auth-container img.logo,
.talent-shell.talent-auth-view .talent-logo,
.talent-shell.talent-auth-view img.talent-logo {
  height: 44px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto 20px !important;
  cursor: default !important;
}

/* ── Titles in auth views ────────────────────────────────────────── */
#auth-view.auth-container h2,
.talent-shell.talent-auth-view h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--tt-text) !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-family: var(--tt-font) !important;
}

/* ── Subtitles in auth views ─────────────────────────────────────── */
.talent-shell.talent-auth-view .talent-muted {
  text-align: center !important;
  color: var(--tt-text-muted) !important;
  font-size: 13px !important;
  margin: 0 0 22px !important;
}

/* ── Labels in BOTH auth views ───────────────────────────────────── */
#auth-view.auth-container label,
#auth-view.auth-container .form-group label,
.talent-shell.talent-auth-view label,
.talent-shell.talent-auth-view .talent-form label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tt-text-secondary) !important;
  margin: 14px 0 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Form-group spacing in admin auth ────────────────────────────── */
#auth-view.auth-container .form-group {
  margin-bottom: 14px !important;
}

/* ── Inputs in BOTH auth views — IDENTICAL ───────────────────────── */
#auth-view.auth-container input[type="text"],
#auth-view.auth-container input[type="email"],
#auth-view.auth-container input[type="password"],
.talent-shell.talent-auth-view input[type="text"],
.talent-shell.talent-auth-view input[type="password"],
.talent-shell.talent-auth-view .talent-form input {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--tt-border-input) !important;
  border-radius: var(--tt-input-r) !important;
  font-size: 14px !important;
  font-family: var(--tt-font) !important;
  color: var(--tt-text) !important;
  background: var(--tt-surface) !important;
  box-sizing: border-box !important;
  transition: border-color var(--tt-ease), box-shadow var(--tt-ease) !important;
  margin: 0 !important;
}

#auth-view.auth-container input:focus,
.talent-shell.talent-auth-view input:focus {
  border-color: var(--tt-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

/* ── Login button in BOTH auth views ─────────────────────────────── */
#auth-view.auth-container .btn-primary,
#auth-view.auth-container button[type="submit"],
.talent-shell.talent-auth-view .btn-primary,
.talent-shell.talent-auth-view button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 42px !important;
  margin: 22px 0 0 !important;
  padding: 0 16px !important;
  background: var(--tt-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--tt-font) !important;
  cursor: pointer !important;
  transition: background var(--tt-ease) !important;
}

#auth-view.auth-container .btn-primary:hover,
.talent-shell.talent-auth-view .btn-primary:hover {
  background: var(--tt-primary-hover) !important;
}

/* ── Footer link (Hier klicken) ──────────────────────────────────── */
#auth-view.auth-container .auth-toggle {
  display: block !important;
  text-align: center !important;
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  color: var(--tt-text-muted) !important;
}

#auth-view.auth-container .auth-toggle a {
  color: var(--tt-text-secondary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-left: 4px !important;
}

#auth-view.auth-container .auth-toggle a:hover {
  text-decoration: underline !important;
}

/* ── Lang-toggle button in talent auth (top-right corner) ───────── */
.talent-shell.talent-auth-view .talent-auth-panel .lang-toggle-btn,
.talent-shell.talent-auth-view #lang-toggle-btn-auth {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: var(--tt-btn-r) !important;
  border: 1px solid var(--tt-border-input) !important;
  background: var(--tt-surface) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tt-text-secondary) !important;
  cursor: pointer !important;
}

/* ── Hide self-registration disabled box visual cleanup ──────────── */
#auth-view.auth-container #signup-form > div[style*="background: #f5f5f5"] {
  background: #f9fafb !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: var(--tt-r-lg) !important;
  padding: 18px !important;
  margin: 16px 0 !important;
}

#auth-view.auth-container #signup-form h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--tt-text) !important;
  margin: 0 0 8px !important;
}

#auth-view.auth-container #signup-form p {
  font-size: 13px !important;
  color: var(--tt-text-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Error message in talent auth ────────────────────────────────── */
.talent-shell.talent-auth-view .talent-error {
  margin: 12px 0 0 !important;
  padding: 10px 12px !important;
  background: var(--tt-danger-bg) !important;
  border: 1px solid var(--tt-danger-border) !important;
  border-radius: var(--tt-r-md) !important;
  color: var(--tt-danger) !important;
  font-size: 13px !important;
  display: none !important;
}

.talent-shell.talent-auth-view .talent-error:not(:empty) {
  display: block !important;
}


/* ============================================================================
   SECTION 3 — UNIFIED HEADER (HÖCHSTE SPEZIFITÄT)
   ALL portal pages: Admin, Talent, Sign, Builder.
   FESTE NORM: Höhe = exakt 54px. Padding = 0 20px. KEIN Border-Radius. KEIN extra Padding.
   Wir nutzen aggressiv-spezifische Selektoren um portal-facelift.css zu schlagen
   (das Talent-Header z.B. auf min-height: 64px setzt → das wäre 10px höher als Admin).
   ============================================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADMIN HEADER — Selektor-Spezifität (1,3,1) — schlägt alles in facelift
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view > .container > header,
html body #dashboard-view header.admin-header,
html body #dashboard-view > .container > header:first-of-type,
#dashboard-view.dashboard-view > .container > header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #dfe4ec !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow: hidden !important;
}

/* Header-content wrapper inside admin header — fills 54px exactly */
html body #dashboard-view header .header-content,
html body #dashboard-view > .container > header > .header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: none !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TALENT HEADER — Selektor-Spezifität (1,3,1) — schlägt #dashboard-view .talent-header
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view.talent-shell .talent-header,
html body .talent-shell > .talent-header,
html body .talent-shell .talent-header,
.talent-shell.talent-shell .talent-header.talent-header,
html body #dashboard-view .talent-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #dfe4ec !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIGN-PORTAL + BUILDER HEADER — gleiche Norm wie Admin/Talent
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .sign-container > header,
html body .builder-container > header,
html body .sign-container > header:first-of-type,
html body .builder-container > header:first-of-type {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4ec !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

html body .sign-container > header .header-content,
html body .builder-container > header .header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 54px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ALLE HEADER-CHILDREN — kompakte 54px-Layout-Norm
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view header > *,
html body .talent-shell .talent-header > *,
html body .sign-container > header > *,
html body .builder-container > header > * {
  height: auto !important;
  max-height: 54px !important;
  box-sizing: border-box !important;
}

/* Talent-header-brand und admin header-content auf 54px begrenzen */
html body .talent-shell .talent-header > .talent-header-brand,
html body .talent-shell .talent-header > .talent-header-actions {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Logo — IDENTICAL SIZE in ALL portal headers (Admin + Talent + Sign + Builder) */
#dashboard-view > .container > header .logo,
#dashboard-view header.admin-header .logo,
#dashboard-view header img.logo,
.talent-shell .talent-header img.talent-header-logo,
.talent-shell .talent-header img.talent-logo,
.talent-shell .talent-header .talent-header-logo,
.talent-shell .talent-header img.logo,
.sign-container > header img.logo,
.sign-container > header .logo,
.builder-container > header img.logo,
.builder-container > header .logo {
  height: 32px !important;
  width: auto !important;
  max-height: 32px !important;
  cursor: pointer !important;
  transition: opacity var(--tt-ease) !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

#dashboard-view header .logo:hover,
.talent-shell .talent-header img.talent-header-logo:hover,
.talent-shell .talent-header img.logo:hover,
.sign-container header .logo:hover,
.builder-container header .logo:hover {
  opacity: 0.78 !important;
}

/* Header-Actions — same layout everywhere */
.header-actions,
.talent-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

/* Lang toggle buttons — unified */
.lang-toggle-btn,
.tt-notif-toggle-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--tt-btn-r) !important;
  border: 1px solid var(--tt-border-input) !important;
  background: var(--tt-surface) !important;
  font-size: var(--tt-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--tt-text-secondary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: background var(--tt-ease), border-color var(--tt-ease) !important;
}

.lang-toggle-btn:hover,
.tt-notif-toggle-btn:hover {
  background: var(--tt-surface-hover) !important;
  border-color: var(--tt-border-strong) !important;
}

/* Sign/Builder language buttons */
.sign-container .lang-btn,
.builder-container .lang-btn {
  height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--tt-border-input) !important;
  background: var(--tt-surface) !important;
  color: var(--tt-text-secondary) !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: var(--tt-fs-sm) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.sign-container .lang-btn.active,
.builder-container .lang-btn.active {
  background: var(--tt-primary) !important;
  color: #fff !important;
  border-color: var(--tt-primary) !important;
}

/* Talent-Header-Brand: hide h1+p (just show logo) */
.talent-shell .talent-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.talent-shell .talent-header-brand h1,
.talent-shell .talent-header-brand p,
.talent-shell .talent-header-brand > div {
  display: none !important;
}

/* Logout button in admin header — ALWAYS hidden (lives in profile dropdown now)
   The patches.js injects the .tt-admin-profile dropdown which contains Abmelden */
#dashboard-view header #logout-btn,
#dashboard-view header .btn-secondary#logout-btn {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}


/* ============================================================================
   SECTION 6 — UNIFIED BUTTONS (ALL PORTALS)
   Every .btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-icon
   renders identically regardless of portal context.
   ============================================================================ */

/* Primary Button */
#dashboard-view .btn-primary,
.talent-shell .btn-primary,
.sign-container .btn-primary,
.builder-container .btn-primary,
.modal-overlay .btn-primary,
.tt-fullpage-modal .btn-primary {
  height: var(--tt-btn-h) !important;
  padding: 0 16px !important;
  background: var(--tt-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: var(--tt-btn-font) !important;
  font-weight: var(--tt-btn-weight) !important;
  font-family: var(--tt-font) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background var(--tt-ease) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#dashboard-view .btn-primary:hover,
.talent-shell .btn-primary:hover,
.sign-container .btn-primary:hover,
.builder-container .btn-primary:hover,
.modal-overlay .btn-primary:hover,
.tt-fullpage-modal .btn-primary:hover {
  background: var(--tt-primary-hover) !important;
}

/* Secondary Button */
#dashboard-view .btn-secondary,
.talent-shell .btn-secondary,
.sign-container .btn-secondary,
.builder-container .btn-secondary,
.modal-overlay .btn-secondary,
.tt-fullpage-modal .btn-secondary {
  height: var(--tt-btn-h) !important;
  padding: 0 14px !important;
  background: var(--tt-surface) !important;
  color: var(--tt-text-secondary) !important;
  border: 1px solid var(--tt-border-input) !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: var(--tt-btn-font) !important;
  font-weight: 500 !important;
  font-family: var(--tt-font) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background var(--tt-ease), border-color var(--tt-ease) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#dashboard-view .btn-secondary:hover,
.talent-shell .btn-secondary:hover,
.sign-container .btn-secondary:hover,
.builder-container .btn-secondary:hover,
.modal-overlay .btn-secondary:hover,
.tt-fullpage-modal .btn-secondary:hover {
  background: var(--tt-surface-hover) !important;
  border-color: var(--tt-border-strong) !important;
}

/* Danger Button */
#dashboard-view .btn-danger,
.talent-shell .btn-danger,
.modal-overlay .btn-danger,
.tt-fullpage-modal .btn-danger {
  height: var(--tt-btn-h) !important;
  padding: 0 14px !important;
  background: var(--tt-danger-bg) !important;
  color: var(--tt-danger) !important;
  border: 1px solid var(--tt-danger-border) !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: var(--tt-btn-font) !important;
  font-weight: var(--tt-btn-weight) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#dashboard-view .btn-danger:hover,
.talent-shell .btn-danger:hover,
.modal-overlay .btn-danger:hover,
.tt-fullpage-modal .btn-danger:hover {
  background: #fecaca !important;
}

/* Success Button */
#dashboard-view .btn-success,
.talent-shell .btn-success,
.modal-overlay .btn-success,
.tt-fullpage-modal .btn-success,
.sign-container .btn-success,
.builder-container .btn-success {
  height: var(--tt-btn-h) !important;
  padding: 0 16px !important;
  background: var(--tt-success) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: var(--tt-btn-font) !important;
  font-weight: var(--tt-btn-weight) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#dashboard-view .btn-success:hover,
.talent-shell .btn-success:hover,
.sign-container .btn-success:hover {
  background: #065f46 !important;
}

/* Icon Button */
#dashboard-view .btn-icon,
.talent-shell .btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: var(--tt-r-md) !important;
  border: 1px solid var(--tt-border-input) !important;
  background: var(--tt-surface) !important;
  color: var(--tt-text-secondary) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background var(--tt-ease), border-color var(--tt-ease) !important;
}

#dashboard-view .btn-icon:hover,
.talent-shell .btn-icon:hover {
  background: var(--tt-surface-hover) !important;
  border-color: var(--tt-border-strong) !important;
  color: var(--tt-text) !important;
}

/* Small Button modifier */
#dashboard-view .btn-small,
.talent-shell .btn-small {
  height: var(--tt-btn-h-sm) !important;
  padding: 0 10px !important;
  font-size: var(--tt-fs-sm) !important;
}


/* ============================================================================
   SECTION 7 — UNIFIED FORM INPUTS (ALL PORTALS)
   Inputs, selects, textareas render identically everywhere.
   ============================================================================ */

#dashboard-view input[type="text"],
#dashboard-view input[type="email"],
#dashboard-view input[type="password"],
#dashboard-view input[type="number"],
#dashboard-view input[type="date"],
#dashboard-view input[type="url"],
#dashboard-view input[type="tel"],
#dashboard-view input[type="search"],
#dashboard-view select,
#dashboard-view textarea,
.talent-shell input[type="text"],
.talent-shell input[type="email"],
.talent-shell input[type="password"],
.talent-shell input[type="number"],
.talent-shell input[type="date"],
.talent-shell input[type="url"],
.talent-shell input[type="tel"],
.talent-shell input[type="search"],
.talent-shell select,
.talent-shell textarea,
.modal-overlay input[type="text"],
.modal-overlay input[type="email"],
.modal-overlay input[type="password"],
.modal-overlay input[type="number"],
.modal-overlay input[type="date"],
.modal-overlay input[type="url"],
.modal-overlay select,
.modal-overlay textarea {
  height: var(--tt-input-h) !important;
  padding: var(--tt-input-pad) !important;
  border: 1px solid var(--tt-border-input) !important;
  border-radius: var(--tt-input-r) !important;
  font-size: var(--tt-input-font) !important;
  font-family: var(--tt-font) !important;
  color: var(--tt-text) !important;
  background: var(--tt-surface) !important;
  box-sizing: border-box !important;
  transition: border-color var(--tt-ease), box-shadow var(--tt-ease) !important;
  width: 100% !important;
}

#dashboard-view textarea,
.talent-shell textarea,
.modal-overlay textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 12px !important;
  resize: vertical !important;
}

#dashboard-view input:focus,
#dashboard-view select:focus,
#dashboard-view textarea:focus,
.talent-shell input:focus,
.talent-shell select:focus,
.talent-shell textarea:focus,
.modal-overlay input:focus,
.modal-overlay select:focus,
.modal-overlay textarea:focus {
  border-color: var(--tt-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

/* Form-Group: unified spacing */
#dashboard-view .form-group,
.talent-shell .form-group,
.modal-overlay .form-group {
  margin-bottom: 16px !important;
}

#dashboard-view .form-group label,
.talent-shell .form-group label,
.modal-overlay .form-group label {
  display: block !important;
  font-size: var(--tt-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--tt-text-muted) !important;
  margin-bottom: 6px !important;
}

/* Form-Row: unified grid */
#dashboard-view .form-row,
.talent-shell .form-row,
.modal-overlay .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}


/* ============================================================================
   SECTION 8 — UNIFIED CARDS
   ============================================================================ */

#dashboard-view .card,
.talent-shell .card {
  background: var(--tt-surface) !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: var(--tt-card-r) !important;
  box-shadow: var(--tt-card-shadow) !important;
}


/* ============================================================================
   SECTION 9 — UNIFIED TABLES
   ============================================================================ */

#dashboard-view table,
.talent-shell table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: var(--tt-fs-base) !important;
}

#dashboard-view th,
.talent-shell th {
  text-align: left !important;
  font-size: var(--tt-fs-sm) !important;
  font-weight: 600 !important;
  color: var(--tt-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--tt-border) !important;
  background: var(--tt-surface-alt) !important;
}

#dashboard-view td,
.talent-shell td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--tt-border-light) !important;
  color: var(--tt-text) !important;
  font-size: var(--tt-fs-base) !important;
  vertical-align: middle !important;
}

#dashboard-view tbody tr:hover,
.talent-shell tbody tr:hover {
  background: rgba(59, 130, 246, 0.03) !important;
}


/* ============================================================================
   SECTION 10 — UNIFIED PAGE TITLES
   Section headers (h2 at top of each content area) render identically.
   ============================================================================ */

/* Admin section titles */
#dashboard-view .admin-main-section > .card > .card-header h1,
#dashboard-view .admin-main-section > .card > .card-header h2,
#dashboard-view .section-header h1,
#dashboard-view .section-header h2,
.talent-shell .talent-panel-header h2 {
  font-size: var(--tt-page-title-fs) !important;
  font-weight: var(--tt-page-title-fw) !important;
  color: var(--tt-text) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Muted sub-text under titles */
#dashboard-view .card-header .card-subtitle,
.talent-shell .talent-panel-header .talent-muted {
  font-size: var(--tt-fs-base) !important;
  color: var(--tt-text-muted) !important;
  margin: 4px 0 0 !important;
}


/* ============================================================================
   LEGACY COMPAT — Original FIX headers (kept for reference, now use tokens)
   ============================================================================ */


/* ====================================================================
   SECTION 4 — UNIFIED SIDEBAR (Admin + Talent)
   Both portals: 232px, dark #151b2b, sticky below header.
   Sub-items always visible when parent is active.
   ==================================================================== */

/* Sub-Items ALWAYS visible when parent active */
html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent,
html body .talent-main > .dashboard-tabs .dashboard-subgroup.is-active-parent,
html body #dashboard-view .admin-main-nav:not(:hover):not(:focus-within) .admin-nav-subgroup.is-active-parent,
html body .talent-main > .dashboard-tabs:not(:hover):not(:focus-within) .dashboard-subgroup.is-active-parent {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem,
html body .talent-main > .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 30px !important;
}

/* ====================================================================
   SECTION 5 — ROOT LAYOUT (both portals flush to edges)
   ==================================================================== */

#dashboard-view,
#dashboard-view > .container,
.talent-shell,
.talent-shell > .container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
}

/* Main Container: Sidebar + Content */
#dashboard-view > .container > main,
#dashboard-view main.admin-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-height: calc(100vh - var(--tt-header-h)) !important;
  background: var(--tt-page-bg) !important;
}

/* Admin Sidebar */
#dashboard-view .admin-main-nav {
  position: sticky !important;
  top: var(--tt-header-h) !important;
  left: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  flex-shrink: 0 !important;
  flex: 0 0 var(--tt-sidebar-w) !important;
  width: var(--tt-sidebar-w) !important;
  min-width: var(--tt-sidebar-w) !important;
  max-width: var(--tt-sidebar-w) !important;
  height: calc(100vh - var(--tt-header-h)) !important;
  background: var(--tt-sidebar-bg) !important;
  padding: 12px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Admin sidebar nav items — identical to talent */
#dashboard-view .admin-main-nav .view-btn,
#dashboard-view .admin-main-nav .admin-nav-subitem {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--tt-nav-item-gap) !important;
  justify-content: flex-start !important;
  min-height: var(--tt-nav-item-h) !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--tt-nav-item-r) !important;
  color: var(--tt-nav-text) !important;
  font-size: var(--tt-fs-base) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: background var(--tt-ease), color var(--tt-ease) !important;
}

#dashboard-view .admin-main-nav .view-btn:hover,
#dashboard-view .admin-main-nav .admin-nav-subitem:hover {
  background: var(--tt-nav-hover-bg) !important;
  color: #ffffff !important;
}

#dashboard-view .admin-main-nav .view-btn.active,
#dashboard-view .admin-main-nav .admin-nav-subitem.active {
  background: var(--tt-nav-active-bg) !important;
  color: #ffffff !important;
}

#dashboard-view .admin-main-nav .nav-label {
  opacity: 1 !important;
  width: auto !important;
  flex: 1 1 auto !important;
  pointer-events: auto !important;
  font-size: var(--tt-fs-base) !important;
  display: inline !important;
}

#dashboard-view .admin-main-nav .nav-icon {
  width: var(--tt-nav-icon-size) !important;
  height: var(--tt-nav-icon-size) !important;
  flex: 0 0 var(--tt-nav-icon-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
}

#dashboard-view .admin-main-nav .nav-icon svg {
  width: var(--tt-nav-icon-size) !important;
  height: var(--tt-nav-icon-size) !important;
}

#dashboard-view .admin-main-nav .admin-nav-subgroup {
  margin: 4px 0 8px 28px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--tt-nav-sub-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Override facelift hover expansion */
#dashboard-view .admin-main-nav:hover,
#dashboard-view .admin-main-nav:focus-within {
  width: var(--tt-sidebar-w) !important;
  min-width: var(--tt-sidebar-w) !important;
  max-width: var(--tt-sidebar-w) !important;
  flex-basis: var(--tt-sidebar-w) !important;
  box-shadow: none !important;
}

/* Content area takes remaining space */
#dashboard-view main > .admin-main-section {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: var(--tt-content-pad) !important;
  background: var(--tt-page-bg) !important;
}


/* ====================================================================
   FIX 2 — Templateauswahl Cards: Löschen-Btn im Card-Footer halten
   Cards: einheitlich, sauber formatiert, keine Overflows
   ==================================================================== */

.tt-template-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0 !important;
  min-height: 178px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.tt-template-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-1px) !important;
}

.tt-template-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px 0 !important;
  gap: 8px !important;
}

.tt-template-card-body {
  flex: 1 1 auto !important;
  padding: 12px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-height: 0 !important;
}

.tt-template-card-body strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
}

.tt-template-card-body small {
  font-size: 12px !important;
  color: #6b7280 !important;
}

.tt-template-card-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #f1f1ef !important;
  background: #fafbfc !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.tt-template-card-langs {
  display: inline-flex !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}

.tt-template-card-actions {
  display: inline-flex !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.tt-template-card-edit,
.tt-template-card-delete {
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tt-template-card-edit {
  border-color: #d1d5db !important;
  background: #ffffff !important;
  color: #111827 !important;
}

.tt-template-card-edit:hover {
  background: #f3f4f6 !important;
}

.tt-template-card-delete {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
  color: #b91c1c !important;
}

.tt-template-card-delete:hover {
  background: #fee2e2 !important;
}

/* Grid-Container vergrößert, gleichmäßig */
.tt-template-grid,
[id*="template-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  padding: 4px !important;
}

.tt-lang-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-width: 32px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.tt-lang-flag.ok {
  background: #111827 !important;
  color: #ffffff !important;
}

.tt-lang-flag.off {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
}

.tt-template-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 8px !important;
  border-radius: 5px !important;
}

.tt-template-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

.tt-template-badge--builtin {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}

.tt-template-badge--custom {
  background: #d1fae5 !important;
  color: #047857 !important;
}


/* ====================================================================
   FIX 3 — Vorlagen-Editor: Pages-Style Document-Editor
   - Hellgrauer "Workspace"-Background
   - Weißes Papier zentriert mit Schatten
   - Sticky Toolbar oben (clean wie Pages)
   - KEINE linke Page-Rail (versteckt)
   - Floating Page-Indicator unten rechts
   - Bessere Typografie im Editor
   ==================================================================== */

/* Stage-Background (wo das Papier liegt)
   WICHTIG: KEIN overflow:auto, sonst kollidiert mit window-scroll und
   sticky Header/Sidebar verlieren ihre Position. */
.tt-paper-stage,
#tt-editor-paper-stage {
  display: block !important;
  background: #ebeef3 !important;
  padding: 40px 24px 80px !important;
  overflow: visible !important;
  min-height: calc(100vh - 200px) !important;
  position: relative !important;
}

/* Workspace = Container für Papier (page-rail removed) */
.tt-paper-workspace {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* HIDE linke Page-Liste komplett — Pages hat sowas auch nicht inline */
.tt-editor-page-rail,
#tt-editor-page-rail {
  display: none !important;
}

/* Das eigentliche "Papier" (A4-Look) */
.tt-paper-content,
#template-rich-editor {
  width: 794px !important;            /* A4 = 210mm @ 96dpi */
  max-width: 100% !important;
  min-height: 1123px !important;       /* A4 = 297mm */
  margin: 0 auto !important;
  padding: 72px 72px !important;       /* Word-typischer Innenrand */
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
  border-radius: 2px !important;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
  font-size: 11pt !important;
  line-height: 1.5 !important;
  color: #1f2937 !important;
  outline: none !important;
  position: relative !important;
}

/* Bei längeren Templates: visueller Seitenumbruch alle 1123px */
#template-rich-editor::after {
  content: "" !important;
  display: block !important;
  height: 0 !important;
}

/* CRITICAL FIX: <main class="contract"> ist display:flex aus contract-XX.html.
   Das verwandelt Sektionen in horizontale Spalten → Text zerschossen.
   Wir ZWINGEN block + reset für alle Editor-Kinder. */
#template-rich-editor main,
#template-rich-editor main.contract,
#template-rich-editor .contract,
#template-rich-editor article,
#template-rich-editor section,
#template-rich-editor header.contract-title,
#template-rich-editor .preamble,
#template-rich-editor .party-block,
#template-rich-editor .signature-block,
#template-rich-editor > * {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  columns: auto !important;
  column-count: 1 !important;
  column-width: auto !important;
  float: none !important;
  position: static !important;
}

/* Signature-Container DARF flex bleiben (zwei Spalten side-by-side erwünscht) */
#template-rich-editor .signature-container,
#template-rich-editor .rv-signature-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  width: 100% !important;
}

#template-rich-editor .signature-column {
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Listen-Items mit korrektem Layout */
#template-rich-editor .clauses,
#template-rich-editor .subclauses {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 8pt 0 !important;
}

#template-rich-editor .clauses > li,
#template-rich-editor .subclauses > li {
  display: list-item !important;
  margin-bottom: 8pt !important;
  list-style: none !important;
}

/* Header.contract-title — Titel zentriert */
#template-rich-editor header.contract-title {
  text-align: center !important;
  margin-bottom: 16pt !important;
}

#template-rich-editor .preamble {
  text-align: center !important;
  margin: 14pt 0 16pt !important;
}

/* Typografie INNERHALB des Papiers (überschreibt facelift) */
#template-rich-editor h1 {
  font-size: 16pt !important;
  font-weight: 700 !important;
  margin: 0 0 16pt !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #111827 !important;
}

#template-rich-editor h2 {
  font-size: 13pt !important;
  font-weight: 700 !important;
  margin: 18pt 0 8pt !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #111827 !important;
}

#template-rich-editor h3 {
  font-size: 11.5pt !important;
  font-weight: 600 !important;
  margin: 14pt 0 6pt !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #111827 !important;
}

#template-rich-editor p {
  margin: 0 0 8pt !important;
  line-height: 1.55 !important;
}

#template-rich-editor ul,
#template-rich-editor ol {
  margin: 0 0 10pt !important;
  padding-left: 22pt !important;
}

#template-rich-editor li {
  margin-bottom: 4pt !important;
  line-height: 1.55 !important;
}

#template-rich-editor strong {
  font-weight: 700 !important;
}

/* V95c: slimmer toolbar so more A4 is visible (was padding 8/16, now 4/12) */
.tt-editor-toolbar,
.template-editor-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04) !important;
  padding: 4px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

.tt-toolbar-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
}

.tt-toolbar-group button,
.editor-toolbar-btn {
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tt-toolbar-group button:hover,
.editor-toolbar-btn:hover {
  background: #ffffff !important;
  color: #111 !important;
}

.tt-toolbar-group button.active,
.editor-toolbar-btn.active {
  background: #111827 !important;
  color: #ffffff !important;
}

.tt-toolbar-group select.editor-select {
  height: 26px !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 12px !important;
  color: #374151 !important;
  cursor: pointer !important;
  padding: 0 6px !important;
}

/* Floating Page-Indicator unten rechts (wie Pages) */
.tt-page-info-floating,
#tt-editor-page-info {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 60 !important;
  padding: 8px 14px !important;
  background: rgba(17, 24, 39, 0.92) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.20) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

.tt-paper-stage:hover ~ .tt-page-info-floating,
#tt-editor-page-info.tt-show {
  opacity: 1 !important;
}

#tt-view-editor:hover #tt-editor-page-info {
  opacity: 1 !important;
}


/* ====================================================================
   FIX 4 — Einheitlicher Zurück-Pfeil (.tt-back-btn) für alle Sub-Pages
   ==================================================================== */

.tt-back-btn,
a.tt-back-btn,
button.tt-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px 0 8px !important;
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  margin-right: 12px !important;
}

.tt-back-btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
  text-decoration: none !important;
}

.tt-back-btn::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* Back-Bar: Sub-Page-Header mit Back-Btn + Title */
.tt-subpage-header {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  position: sticky !important;
  top: 54px !important;
  z-index: 40 !important;
}

.tt-subpage-header h1,
.tt-subpage-header .tt-subpage-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* ====================================================================
   FIX 5 — Template-Details Side-Panel (statt verstreut)
   Wenn ein Template bearbeitet wird, zeigen wir Meta-Info clean rechts
   ==================================================================== */

.tt-template-meta-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}

.tt-template-meta-pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  padding: 0 8px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.tt-save-state {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.tt-save-state[data-state="saved"] { color: #047857 !important; }
.tt-save-state[data-state="dirty"] { color: #b45309 !important; }
.tt-save-state[data-state="saving"] { color: #2563eb !important; }


/* ====================================================================
   FIX 6 — Logo klickbar (Cursor + Hover-Effekt)
   ==================================================================== */

.logo,
header .logo,
.header-content .logo {
  cursor: pointer !important;
  transition: opacity .15s !important;
}

.logo:hover {
  opacity: 0.78 !important;
}


/* ====================================================================
   FIX 7 — Admin-Profil-Dropdown im Header
   ==================================================================== */

.tt-admin-profile {
  position: relative !important;
  display: inline-block !important;
}

.tt-admin-profile-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  padding: 0 12px 0 8px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 17px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

.tt-admin-profile-btn:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

.tt-admin-profile-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0 !important;
}

.tt-admin-profile-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 240px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
  padding: 6px !important;
  z-index: 1000 !important;
  display: none !important;
}

.tt-admin-profile.is-open .tt-admin-profile-menu {
  display: block !important;
}

.tt-admin-profile-menu .item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #374151 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.tt-admin-profile-menu .item:hover {
  background: #f3f4f6 !important;
  color: #111 !important;
}

.tt-admin-profile-menu .item.danger {
  color: #b91c1c !important;
}

.tt-admin-profile-menu .item.danger:hover {
  background: #fee2e2 !important;
}

.tt-admin-profile-menu .divider {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 4px 0 !important;
}

.tt-admin-profile-header {
  padding: 10px 12px !important;
  border-bottom: 1px solid #f1f1ef !important;
  margin-bottom: 4px !important;
}

.tt-admin-profile-header .name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.tt-admin-profile-header .email {
  font-size: 11.5px !important;
  color: #6b7280 !important;
  margin-top: 2px !important;
}


/* ====================================================================
   FIX 8 — Header-Actions Layout (cleaner)
   ==================================================================== */

.header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.lang-toggle-btn,
.tt-notif-toggle-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  cursor: pointer !important;
}

.lang-toggle-btn:hover,
.tt-notif-toggle-btn:hover {
  background: #f3f4f6 !important;
}

#logout-btn {
  display: none !important;
  /* Logout wandert ins Profil-Menü */
}

/* In legacy admin headers ohne Profile-Wrapper: Logout fallback sichtbar */
header:not(:has(.tt-admin-profile)) #logout-btn {
  display: inline-flex !important;
}


/* ====================================================================
   FIX 9 — Bessere Cards & Card-Header
   ==================================================================== */

#dashboard-view .card,
.talent-shell .card {
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}


/* ====================================================================
   FIX 10 — Platzhalter-Sidepanel besser
   ==================================================================== */

#tt-placeholder-sidepanel {
  border-left: 1px solid #e5e7eb !important;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.10) !important;
}

#tt-placeholder-sidepanel .tt-placeholder-list .tt-placeholder-item {
  border-radius: 8px !important;
  padding: 10px 12px !important;
  transition: background .12s !important;
}

#tt-placeholder-sidepanel .tt-placeholder-list .tt-placeholder-item:hover {
  background: #f3f4f6 !important;
}


/* ============================================================================
   TALENT PORTAL — UNIFIED SIDEBAR + LAYOUT
   Same tokens as Admin. Uses CSS Grid for layout.
   ============================================================================ */

/* Talent Shell = full viewport */
.talent-shell,
#dashboard-view.talent-shell,
html body .talent-shell {
  --tt-nav-collapsed: var(--tt-sidebar-w) !important;
  --tt-nav-expanded: var(--tt-sidebar-w) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--tt-page-bg) !important;
  min-height: 100vh !important;
}

/* Auth view = centered, no sidebar */
.talent-shell.talent-auth-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background: var(--tt-page-bg) !important;
}

/* .hidden ALWAYS wins */
.talent-shell.hidden,
.talent-shell.talent-auth-view.hidden {
  display: none !important;
}

/* TALENT-PROFILE-MENU → same as tt-admin-profile */
.talent-shell .talent-profile-menu {
  position: relative !important;
}

html body .talent-shell .talent-profile-menu > summary,
html body .talent-shell .talent-header .talent-profile-menu > summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px 0 4px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 17px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #374151 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.talent-shell .talent-profile-menu > summary::-webkit-details-marker {
  display: none !important;
}
.talent-shell .talent-profile-menu > summary::marker {
  display: none !important;
}

.talent-shell .talent-profile-menu > summary:hover {
  border-color: #9ca3af !important;
  background: #f9fafb !important;
}

.talent-shell .talent-profile-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.talent-shell .talent-profile-copy {
  display: inline-flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}

.talent-shell .talent-profile-copy strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.talent-shell .talent-profile-copy small {
  display: none !important;
  /* "Account" Untertitel weglassen, wie im Admin */
}

.talent-shell .talent-profile-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
  padding: 6px !important;
  z-index: 1000 !important;
}

.talent-shell .talent-profile-dropdown button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #374151 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

.talent-shell .talent-profile-dropdown button:hover {
  background: #f3f4f6 !important;
  color: #111 !important;
}

.talent-shell #talent-logout-btn {
  color: #b91c1c !important;
}

.talent-shell #talent-logout-btn:hover {
  background: #fee2e2 !important;
}


/* TALENT-MAIN: Grid-Layout with Sidebar + Content */
#dashboard-view.talent-shell .talent-main,
.talent-shell .talent-main {
  display: grid !important;
  grid-template-columns: var(--tt-sidebar-w) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  grid-template-areas:
    "nav alerts"
    "nav content" !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - var(--tt-header-h)) !important;
  background: var(--tt-page-bg) !important;
  transition: none !important;
}

/* Override Hover-Auto-Expand (facelift) */
#dashboard-view.talent-shell .talent-main:has(.dashboard-tabs:hover),
.talent-shell .talent-main:has(.dashboard-tabs:hover),
#dashboard-view.talent-shell .talent-main:has(.dashboard-tabs:focus-within),
.talent-shell .talent-main:has(.dashboard-tabs:focus-within) {
  grid-template-columns: var(--tt-sidebar-w) minmax(0, 1fr) !important;
}

/* Grid-Areas explizit: dashboard-tabs → nav, alerts → alerts, panels → content */
#dashboard-view.talent-shell .talent-main > .dashboard-tabs,
.talent-shell .talent-main > .dashboard-tabs {
  grid-area: nav !important;
}

#dashboard-view.talent-shell .talent-main > .talent-global-alerts,
.talent-shell .talent-main > .talent-global-alerts {
  grid-area: alerts !important;
  margin: 0 !important;
}

#dashboard-view.talent-shell .talent-main > .talent-panel,
.talent-shell .talent-main > .talent-panel,
#dashboard-view.talent-shell .talent-main > section,
.talent-shell .talent-main > section {
  grid-area: content !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Talent SIDEBAR: dashboard-tabs — identical to admin-main-nav */
#dashboard-view.talent-shell .dashboard-tabs,
.talent-shell .dashboard-tabs,
.talent-main > .dashboard-tabs {
  position: sticky !important;
  top: var(--tt-header-h) !important;
  align-self: stretch !important;
  width: var(--tt-sidebar-w) !important;
  min-width: var(--tt-sidebar-w) !important;
  max-width: var(--tt-sidebar-w) !important;
  height: calc(100vh - var(--tt-header-h)) !important;
  min-height: calc(100vh - var(--tt-header-h)) !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  background: var(--tt-sidebar-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  transition: none !important;
}

/* Override Hover expansion from facelift */
#dashboard-view.talent-shell .dashboard-tabs:hover,
#dashboard-view.talent-shell .dashboard-tabs:focus-within,
.talent-shell .dashboard-tabs:hover,
.talent-shell .dashboard-tabs:focus-within {
  width: var(--tt-sidebar-w) !important;
  min-width: var(--tt-sidebar-w) !important;
  max-width: var(--tt-sidebar-w) !important;
  box-shadow: none !important;
}

/* Talent nav items — IDENTICAL to admin nav items (same tokens) */
#dashboard-view.talent-shell .dashboard-tab,
#dashboard-view.talent-shell .dashboard-subtab,
.talent-shell .dashboard-tab,
.talent-shell .dashboard-subtab,
.talent-shell .dashboard-tabs .dashboard-tab,
.talent-shell .dashboard-tabs .dashboard-subtab {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--tt-nav-item-gap) !important;
  justify-content: flex-start !important;
  min-height: var(--tt-nav-item-h) !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 0 !important;
  border-radius: var(--tt-nav-item-r) !important;
  color: var(--tt-nav-text) !important;
  font-size: var(--tt-fs-base) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: background var(--tt-ease), color var(--tt-ease) !important;
}

.talent-shell .dashboard-tabs:not(:hover) .dashboard-tab,
.talent-shell .dashboard-tabs:not(:hover) .dashboard-subtab {
  color: var(--tt-nav-text) !important;
}

.talent-shell .dashboard-tabs .dashboard-tab::before,
.talent-shell .dashboard-tabs .dashboard-subtab::before {
  content: none !important;
}

.talent-shell .dashboard-tab:hover,
.talent-shell .dashboard-subtab:hover {
  background: var(--tt-nav-hover-bg) !important;
  color: #ffffff !important;
}

.talent-shell .dashboard-tab.active,
.talent-shell .dashboard-subtab.active {
  background: var(--tt-nav-active-bg) !important;
  color: #ffffff !important;
}

.talent-shell .dashboard-tab .nav-icon,
.talent-shell .dashboard-subtab .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--tt-nav-icon-size) !important;
  height: var(--tt-nav-icon-size) !important;
  flex-shrink: 0 !important;
}

.talent-shell .dashboard-tab .nav-label,
.talent-shell .dashboard-subtab .nav-label,
.talent-shell .dashboard-tabs .nav-label,
.talent-main > .dashboard-tabs .nav-label,
.talent-main > .dashboard-tabs:not(:hover):not(:focus-within) .nav-label,
html body .talent-shell .nav-label {
  flex: 1 1 auto !important;
  opacity: 1 !important;
  font-size: var(--tt-fs-base) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline !important;
  pointer-events: auto !important;
}

html body .talent-shell .dashboard-tabs .nav-icon {
  width: var(--tt-nav-icon-size) !important;
  height: var(--tt-nav-icon-size) !important;
  flex: 0 0 var(--tt-nav-icon-size) !important;
}

html body .talent-shell .dashboard-tabs .nav-icon svg {
  width: var(--tt-nav-icon-size) !important;
  height: var(--tt-nav-icon-size) !important;
}

.talent-shell .dashboard-subgroup {
  margin: 4px 0 8px 28px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--tt-nav-sub-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Talent content area — same padding as admin */
.talent-shell .talent-main > .talent-global-alerts {
  flex: 0 0 100% !important;
  order: -1 !important;
}

.talent-shell .talent-panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: var(--tt-content-pad) !important;
  margin: 0 !important;
  background: var(--tt-page-bg) !important;
}

.talent-shell .talent-main > section.talent-panel,
.talent-shell .talent-main > .talent-global-alerts ~ section.talent-panel,
.talent-shell .talent-main > nav.dashboard-tabs ~ section.talent-panel {
  flex: 1 1 auto !important;
}

/* Panel-Header — same as admin section-header */
.talent-shell .talent-panel-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--tt-border) !important;
  flex-wrap: wrap !important;
}

.talent-shell .talent-panel-header h2 {
  font-size: var(--tt-page-title-fs) !important;
  font-weight: var(--tt-page-title-fw) !important;
  color: var(--tt-text) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin: 0 !important;
}

.talent-shell .talent-panel-header .talent-muted {
  font-size: var(--tt-fs-base) !important;
  color: var(--tt-text-muted) !important;
  margin: 4px 0 0 !important;
}

/* Sub-Tabs ("Rechnungen" Submenu) in sidebar */
.talent-shell .dashboard-subgroup .nav-label {
  font-size: 12.5px !important;
}

/* Notif Panel z-index */
.talent-shell .tt-notif-panel,
.talent-shell .tt-notif-backdrop {
  z-index: 200 !important;
}


/* ============================================================================
   V87b — EDITOR: TOOLBAR RECHTS (Word/Notion-Style, sticky)
   + Layout-Fixes (doppelte Kästen, abgeschnittene Header, Page-Width)
   ============================================================================ */

/* Editor-Workspace: Paper LINKS, Toolbar RECHTS, beide flex side-by-side */
.tt-paper-stage,
#tt-editor-paper-stage {
  background: #ebeef3 !important;
  padding: 28px 24px 60px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 24px !important;
}

.tt-paper-workspace {
  display: contents !important;
  /* Container löst sich auf, damit paper-content + side-toolbar als direkte
     Flex-Kinder der Stage rendern */
}

/* Paper bleibt zentriert */
.tt-paper-content,
#template-rich-editor {
  flex: 0 0 auto !important;
  width: 794px !important;
  max-width: calc(100vw - 360px) !important;
  margin: 0 !important;
}

/* RIGHT SIDE-TOOLBAR (sticky, Word/Notion-Style) */
.tt-editor-side-toolbar {
  position: sticky !important;
  top: 64px !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.tt-editor-side-toolbar h4 {
  margin: 4px 4px 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.tt-editor-side-toolbar .tt-side-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 6px 4px !important;
  border-bottom: 1px solid #f1f1ef !important;
}

.tt-editor-side-toolbar .tt-side-section:last-child {
  border-bottom: 0 !important;
}

.tt-editor-side-toolbar .tt-side-row {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.tt-editor-side-toolbar .tt-side-row button,
.tt-editor-side-toolbar .tt-side-row .editor-toolbar-btn {
  width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  color: #374151 !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tt-editor-side-toolbar .tt-side-row button:hover {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

.tt-editor-side-toolbar .tt-side-row button.active {
  background: #111827 !important;
  color: #fff !important;
}

.tt-editor-side-toolbar select {
  width: 100% !important;
  height: 30px !important;
  padding: 0 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 5px !important;
  background: #fff !important;
  font-size: 12px !important;
  color: #374151 !important;
}

.tt-editor-side-toolbar input[type="color"] {
  width: 32px !important;
  height: 30px !important;
  padding: 2px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer !important;
}

.tt-editor-side-toolbar .tt-side-action-btn {
  width: 100% !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  color: #111827 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.tt-editor-side-toolbar .tt-side-action-btn:hover {
  background: #f3f4f6 !important;
}

.tt-editor-side-toolbar .tt-side-action-btn.primary {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
}

.tt-editor-side-toolbar .tt-side-action-btn.primary:hover {
  background: #1f2937 !important;
}

.tt-editor-side-toolbar .tt-side-action-btn.danger {
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

/* Wenn Side-Toolbar aktiv ist (per JS injected), top-toolbar verkleinern */
.tt-paper-stage.has-side-toolbar ~ .editor-toolbar,
body.has-side-toolbar .editor-toolbar,
body.has-side-toolbar .tt-editor-toolbar {
  display: none !important;
}


/* ============================================================================
   V87b — TEMPLATE-VERWALTUNG LAYOUT-FIXES
   ============================================================================ */

/* Doppelte Card-Wrapper entfernen — die Template-View hat eigene Header */
.contracts-admin-section .card:has(#tt-view-templates),
.contracts-admin-section .card:has(#tt-view-editor),
.contracts-admin-section .card:has(#tt-view-placeholders) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.contracts-admin-section .card-body:has(#tt-view-editor),
.contracts-admin-section .card-body:has(#tt-view-templates),
.contracts-admin-section .card-body:has(#tt-view-placeholders) {
  padding: 0 !important;
}

/* Editor-Header: enge Buttons aufweiten */
.tt-view-header,
#tt-view-editor > .tt-view-header,
#tt-view-templates > .tt-view-header,
#tt-view-placeholders > .tt-view-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.tt-view-header > * {
  flex: 0 0 auto !important;
}

.tt-view-header h1,
.tt-view-header h2,
.tt-view-header .tt-view-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Description / Subtitle in Header */
.tt-view-header p,
.tt-view-header .tt-view-sub,
.tt-view-header .tt-view-subtitle {
  flex: 1 1 100% !important;
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
  color: #6b7280 !important;
  white-space: normal !important;
}

.tt-view-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
}

/* Buttons im Editor-Header */
.tt-view-header-actions .btn,
.tt-view-header-actions button {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
}


/* ============================================================================
   V87b — PLATZHALTER-BIBLIOTHEK
   Header-Texte voll sichtbar (nicht abgeschnitten)
   ============================================================================ */

#tt-view-placeholders {
  padding: 0 !important;
  margin: 0 !important;
}

#tt-view-placeholders > .tt-view-header {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

#tt-view-placeholders > .tt-view-header > div:first-child,
#tt-view-placeholders > .tt-view-header .tt-view-title-wrap {
  flex: 1 1 60% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#tt-view-placeholders > .tt-view-header h1,
#tt-view-placeholders > .tt-view-header h2 {
  font-size: 17px !important;
  white-space: nowrap !important;
}

#tt-view-placeholders > .tt-view-header p {
  flex: 0 0 100% !important;
  font-size: 12.5px !important;
  color: #6b7280 !important;
  margin: 4px 0 0 !important;
  white-space: normal !important;
  line-height: 1.5 !important;
}

#tt-view-placeholders input[type="search"],
#tt-view-placeholders #tt-placeholder-search,
#tt-view-placeholders .tt-placeholder-search,
#tt-view-placeholders [placeholder*="Platzhalter suchen"] {
  width: 240px !important;
  max-width: 100% !important;
  height: 32px !important;
}

/* "+ Neuer Platzhalter" Button im Header */
.tt-add-placeholder-btn {
  height: 32px !important;
  padding: 0 14px !important;
  background: #111827 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tt-add-placeholder-btn:hover {
  background: #1f2937 !important;
}


/* ============================================================================
   V87b — MAHNGENERATOR / INVOICE-GENERATOR EINBETTUNG (iframe)
   Wenn diese Seiten in einem iframe im Portal eingebettet sind:
   - Hide doppelten Header der eingebetteten Page
   - Container voll ausnutzen
   ============================================================================ */

iframe.tt-embedded-tool,
.tt-tool-embed-frame {
  width: 100% !important;
  border: 0 !important;
  height: calc(100vh - 60px) !important;
  background: #fff !important;
  display: block !important;
}

.tt-tool-embed-wrap {
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 16px !important;
  border: 1px solid #e5e7eb !important;
}

/* Wenn die Generator-Pages standalone geladen werden (NICHT eingebettet),
   sollen sie auch die Portal-Hülle bekommen */
body.tt-tool-standalone {
  margin: 0 !important;
  padding: 0 !important;
  background: #f5f7fb !important;
}

/* Mahngenerator/Invoice-Generator: eigene Header verstecken WENN sie als embed
   geladen werden. Die Pages haben bereits html.portal-embedded class (durch
   ?portal=admin oder ?embedded=1 URL-Param gesetzt). Wir verstärken das CSS. */
html.portal-embedded body,
html.portal-embedded {
  background: #f5f7fb !important;
  padding: 12px 18px !important;
}

html.portal-embedded > body > header:first-of-type,
html.portal-embedded body > nav.sidebar,
html.portal-embedded body > .app-header,
html.portal-embedded body > .topbar {
  display: none !important;
}

/* Mahngenerator: Compact Header bei Embed */
html.portal-embedded .generator-shell > header {
  background: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

html.portal-embedded .generator-shell .page-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Invoice-Generator iframe-Container im Talent-Portal */
.invoice-generator-frame,
.tt-tool-embed-frame {
  width: 100% !important;
  height: calc(100vh - 100px) !important;
  min-height: 600px !important;
  border: 0 !important;
  background: #fff !important;
  display: block !important;
  border-radius: 8px !important;
}

/* Wrap im Portal: clean rendering */
.invoice-panel > .invoice-generator-frame,
#admin-reminder-generator-panel iframe {
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
}


/* ============================================================================
   V87b — EINHEITLICHER PAGE-HEADER MIT BACK-BUTTON (alle Sub-Views)
   ============================================================================ */

.tt-page-header {
  position: sticky !important;
  top: 54px !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin: 0 !important;
}

.tt-page-header .tt-page-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tt-page-header .tt-page-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  gap: 8px !important;
}

/* In Talent-Detail / Brand-Detail / Monat-Detail: Back-Button im Modal-Header */
#brand-detail-modal .modal-header,
#talent-detail-modal .modal-header,
#month-detail-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
}


/* ============================================================================
   V88 — MODAL → FULL-PAGE (Zoho-Pattern)
   Statt zentriertem Overlay nutzen + Neuer Vertrag/Kampagne/Brand/Talent
   den gesamten Content-Bereich rechts der Sidebar — Sidebar + Header bleiben
   sichtbar. KEIN Backdrop. Konsistent über alle 4 Entity-Types.
   ============================================================================ */

/* Wenn Modal als fullpage gekennzeichnet ist: Overlay-Verhalten überschreiben
   ID-Selektoren brauchen wir, weil portal-facelift.css #contract-modal.modal-overlay
   mit !important left:0 setzt (höhere Specificity als .class.class) */
#contract-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
#campaign-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
#brand-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
#talent-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
#manual-tx-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
.modal-overlay.tt-fullpage-modal:not(.hidden) {
  position: fixed !important;
  top: var(--tt-header-h) !important;
  left: var(--tt-sidebar-w) !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: var(--tt-header-h) 0 0 var(--tt-sidebar-w) !important;
  width: auto !important;
  height: auto !important;
  background: #f5f7fb !important;
  /* Kein Backdrop-Blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 50 !important;
  overflow-y: auto !important;
}

/* Modal-Dialog im Full-Page-Mode: voll breit, kein Rand
   ID-selektoren brauchen wir wegen portal-facelift Override */
#contract-modal.tt-fullpage-modal .modal-dialog,
#campaign-edit-modal.tt-fullpage-modal .modal-dialog,
#brand-edit-modal.tt-fullpage-modal .modal-dialog,
#talent-edit-modal.tt-fullpage-modal .modal-dialog,
#manual-tx-modal.tt-fullpage-modal .modal-dialog,
.tt-fullpage-modal .modal-dialog,
.tt-fullpage-modal > .modal-dialog,
.tt-fullpage-modal .modal,
.tt-fullpage-modal .modal-dialog[style*="padding"],
.tt-fullpage-modal .modal-dialog[style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
}

/* Direkt-Children im Modal-Dialog dürfen nicht überlaufen */
.tt-fullpage-modal .modal-dialog > *,
.tt-fullpage-modal > .modal-dialog > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Sticky Header im Full-Page-Modal */
.tt-fullpage-modal .modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 28px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

.tt-fullpage-modal .modal-header h2,
.tt-fullpage-modal .modal-header h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Modal-Close → Zurück-Pfeil-Style (clean, single-line, no wrap) */
.tt-fullpage-modal .modal-header .modal-close,
.tt-fullpage-modal .modal-close {
  width: auto !important;
  min-width: 92px !important;
  height: 34px !important;
  padding: 0 14px 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 0 !important; /* Verstecke original "×" */
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  order: -1 !important;
}

.tt-fullpage-modal .modal-header .modal-close::before,
.tt-fullpage-modal .modal-close::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

.tt-fullpage-modal .modal-header .modal-close::after,
.tt-fullpage-modal .modal-close::after {
  content: "Zurück" !important;
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Modal-Body: zentriert, max 1100px, viel Padding */
.tt-fullpage-modal .modal-body {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 28px 28px 100px !important;
  box-sizing: border-box !important;
}

/* Modal-Footer: Sticky bottom mit Save/Cancel */
.tt-fullpage-modal .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 28px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.03) !important;
}

/* Form-Sections im Full-Page-Modal: cleaner Card-Look */
.tt-fullpage-modal .form-section,
.tt-fullpage-modal details.cform-disclosure,
.tt-fullpage-modal details.bf-disclosure,
.tt-fullpage-modal details.talent-form-disclosure {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 18px 22px !important;
  margin-bottom: 16px !important;
}

.tt-fullpage-modal .form-section-title,
.tt-fullpage-modal details summary {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 12px !important;
}

/* Tab-Bar im Vertrag-Modal (FORM / EDITOR) — bleibt sichtbar */
.tt-fullpage-modal .contract-tab-bar,
.tt-fullpage-modal [role="tablist"] {
  position: sticky !important;
  top: 54px !important;
  z-index: 4 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0 28px !important;
}

/* Backdrop verstecken im Full-Page-Modus (kein Schwarz darüber) */
.tt-fullpage-modal::before,
.tt-fullpage-modal::after {
  display: none !important;
}

/* Wenn Full-Page-Modal aktiv: Page-Content (admin-main-section) im Hintergrund
   bleibt sichtbar UNTER dem Modal — wir verstecken es trotzdem für sauberen Look */
body:has(.modal-overlay.tt-fullpage-modal:not(.hidden)) .admin-main-section:not(.hidden) {
  /* Content scrollt nicht mit, Sidebar bleibt sichtbar (sticky) */
  pointer-events: none !important;
}

/* Talent-Portal Full-Page-Modale */
.talent-shell .modal-overlay.tt-fullpage-modal:not(.hidden) {
  left: var(--tt-sidebar-w) !important;
  top: var(--tt-header-h) !important;
}


/* ============================================================================
   V90 — EINHEITLICHE MODAL-HEADERS (Vertrag / Talent / Brand / Kampagne)
   Alle "Neuer X"-Formulare: gleicher Header-Style.
   ============================================================================ */

/* Header-Layout in allen Full-Page-Modals: Zurück | Titel+Subtitle | Actions */
.tt-fullpage-modal .modal-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  padding: 14px 28px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}

/* Zurück-Button immer links (col 1, row 1) */
.tt-fullpage-modal .modal-header .modal-close {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  order: 0 !important;
  margin: 0 !important;
}

/* Titel: mitte (col 2) */
.tt-fullpage-modal .modal-header h1,
.tt-fullpage-modal .modal-header h2,
.tt-fullpage-modal .modal-header .modal-title {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Subtitle: optional unter Titel */
.tt-fullpage-modal .modal-header .modal-subtitle,
.tt-fullpage-modal .modal-header p {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  margin: 2px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  text-align: left !important;
}

/* Action-Slots rechts (col 3) — falls jemand .modal-header-actions verwendet */
.tt-fullpage-modal .modal-header .modal-header-actions {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  display: inline-flex !important;
  gap: 8px !important;
}


/* ============================================================================
   V90 — TEMPLATE-VERWALTUNG HEADER-LAYOUT (clean)
   Templateauswahl + Platzhalter-Bibliothek bekommen identischen Header-Stil
   ============================================================================ */

#tt-view-templates .tt-view-header,
#tt-view-placeholders .tt-view-header,
#tt-view-editor .tt-view-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 24px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  margin: 0 0 16px !important;
  min-height: 60px !important;
}

#tt-view-templates .tt-view-header > *:first-child,
#tt-view-placeholders .tt-view-header > *:first-child,
#tt-view-editor .tt-view-header > *:first-child,
.tt-view-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  grid-column: 1 / 2 !important;
}

.tt-view-header-actions {
  grid-column: 2 / 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Title-Block (Titel + Beschreibung) */
.tt-view-header-title,
.tt-view-header-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.tt-view-header h1,
.tt-view-header h2,
.tt-view-header .tt-view-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tt-view-header p,
.tt-view-header .tt-view-sub,
.tt-view-header .tt-view-subtitle {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Zurück-Link in den Template-Views */
.tt-view-header .tt-backlink,
#tt-placeholders-back-btn,
#tt-template-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 14px 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.tt-view-header .tt-backlink:hover,
#tt-placeholders-back-btn:hover,
#tt-template-back-btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
  text-decoration: none !important;
}

/* Such-Input im Header */
.tt-view-header input[type="search"],
.tt-view-header .tt-search-input {
  width: 240px !important;
  max-width: 100% !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

/* Buttons im Header */
.tt-view-header button.btn-primary,
.tt-view-header button.btn-secondary {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}


/* ============================================================================
   V90 — LOGO/BRANDING MODAL POLISH
   ============================================================================ */
#tt-branding-modal .modal-dialog {
  border-radius: 12px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
}

#tt-branding-modal h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#tt-branding-modal label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
  margin-bottom: 8px !important;
}

#tt-branding-preview {
  display: block !important;
  margin: 0 auto !important;
}

#tt-branding-modal .btn-primary {
  background: #111827 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 16px !important;
  height: 36px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#tt-branding-modal .btn-secondary {
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  padding: 0 16px !important;
  height: 36px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}


/* ============================================================================
   V90 — TALENT-PROFILEINSTELLUNGEN passend zum Rest
   ============================================================================ */
.talent-profile-modal,
.talent-modal.talent-profile-modal {
  background: rgba(15, 23, 42, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.talent-profile-modal .talent-modal-dialog,
.talent-profile-modal > .talent-modal-content {
  background: #ffffff !important;
  border-radius: 12px !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: 640px !important;
  padding: 0 !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

.talent-profile-modal .talent-modal-header,
.talent-profile-modal > .talent-modal-content > header,
.talent-profile-modal > .talent-modal-content > .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.talent-profile-modal h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.talent-profile-modal .talent-modal-body,
.talent-profile-modal > .talent-modal-content > .modal-body {
  padding: 20px 22px !important;
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
}

.talent-profile-modal .talent-modal-footer,
.talent-profile-modal > .talent-modal-content > .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 14px 22px !important;
  border-top: 1px solid #e5e7eb !important;
  background: #fafbfc !important;
}

.talent-profile-modal h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 16px 0 10px !important;
}


/* ============================================================================
   V90 — VERTRAG-VORSCHAU als Full-Page-View im Portal
   Statt window.open: Vorschau wird im Portal als Full-Page-Modal angezeigt
   ============================================================================ */
.tt-contract-preview-fullpage {
  position: fixed !important;
  top: var(--tt-header-h) !important;
  left: var(--tt-sidebar-w) !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 90 !important;
  background: var(--tt-page-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.talent-shell .tt-contract-preview-fullpage {
  left: var(--tt-sidebar-w) !important;
}

.tt-contract-preview-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 24px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.tt-contract-preview-header .tt-preview-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tt-contract-preview-header .tt-preview-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 14px 0 10px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.tt-contract-preview-header .tt-preview-back:hover {
  background: #f3f4f6 !important;
}

.tt-contract-preview-header .tt-preview-actions {
  display: inline-flex !important;
  gap: 8px !important;
}

.tt-contract-preview-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 28px 24px !important;
  display: flex !important;
  justify-content: center !important;
}

.tt-contract-preview-body iframe {
  width: 794px !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 1100px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
  border-radius: 4px !important;
}

.tt-contract-preview-body .tt-preview-content {
  width: 794px !important;
  max-width: 100% !important;
  background: #fff !important;
  padding: 72px !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
  border-radius: 4px !important;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
  font-size: 11pt !important;
  line-height: 1.5 !important;
  color: #1f2937 !important;
}

/* Backdrop bei Vorschau-Modus blockiert Klicks außerhalb */
body.tt-has-preview {
  overflow: hidden !important;
}


/* ============================================================================
   V90 — ACCOUNT- / EINSTELLUNGEN-MODAL (Admin)
   ============================================================================ */
#tt-account-modal,
#tt-prefs-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
}

#tt-account-modal .modal-dialog,
#tt-prefs-modal .modal-dialog {
  background: #ffffff !important;
  border-radius: 12px !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: 560px !important;
  padding: 0 !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
}

#tt-account-modal .modal-header,
#tt-prefs-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#tt-account-modal h2,
#tt-prefs-modal h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 !important;
}

#tt-account-modal .modal-body,
#tt-prefs-modal .modal-body {
  padding: 20px 22px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#tt-account-modal label,
#tt-prefs-modal label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: block !important;
  margin-bottom: 6px !important;
}

#tt-account-modal input,
#tt-account-modal select,
#tt-prefs-modal input,
#tt-prefs-modal select {
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  background: #fff !important;
  color: #111827 !important;
  box-sizing: border-box !important;
}

#tt-account-modal .modal-footer,
#tt-prefs-modal .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 14px 22px !important;
  border-top: 1px solid #e5e7eb !important;
  background: #fafbfc !important;
}

.tt-account-avatar-section {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid #f1f1ef !important;
  margin-bottom: 6px !important;
}

.tt-account-avatar-section .avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--tt-avatar-bg) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}


/* ============================================================================
   UNIFIED MOBILE / RESPONSIVE (ALL PORTALS)
   Consistent breakpoints and behavior for Admin, Talent, Sign, Builder.
   ============================================================================ */

/* ── Small screens (< 768px): Sidebar collapses, single column ─── */
@media (max-width: 767px) {

  /* Header — full width, slightly smaller */
  #dashboard-view > .container > header,
  .talent-shell .talent-header,
  .sign-container > header,
  .builder-container > header {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
  }

  /* Logo slightly smaller on mobile */
  .logo,
  header .logo,
  .talent-header-logo,
  .talent-header img.logo {
    height: 28px !important;
  }

  /* Admin sidebar — hidden on small screens */
  #dashboard-view .admin-main-nav {
    display: none !important;
  }

  /* Talent sidebar — hidden on small screens */
  .talent-shell .dashboard-tabs,
  .talent-main > .dashboard-tabs {
    display: none !important;
  }

  /* Admin main — single column */
  #dashboard-view > .container > main,
  #dashboard-view main.admin-main {
    flex-direction: column !important;
  }

  #dashboard-view main > .admin-main-section {
    padding: 14px 12px 20px !important;
  }

  /* Talent main — single column */
  .talent-shell .talent-main {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  .talent-shell .talent-panel {
    padding: 14px 12px 20px !important;
  }

  /* Fullpage modals — take full screen on mobile */
  .modal-overlay.tt-fullpage-modal:not(.hidden),
  #contract-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  #campaign-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  #brand-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden),
  #talent-edit-modal.modal-overlay.tt-fullpage-modal:not(.hidden) {
    inset: 48px 0 0 0 !important;
    left: 0 !important;
  }

  .tt-contract-preview-fullpage,
  .talent-shell .tt-contract-preview-fullpage {
    top: 48px !important;
    left: 0 !important;
  }

  /* Page titles smaller on mobile */
  .talent-shell .talent-panel-header h2,
  #dashboard-view .admin-main-section .card-header h2 {
    font-size: 18px !important;
  }

  /* Form rows — single column on mobile */
  .form-row,
  #dashboard-view .form-row,
  .talent-shell .form-row,
  .modal-overlay .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Builder — stack vertically */
  .builder-layout {
    flex-direction: column !important;
  }

  /* Sign — stack vertically */
  .signing-layout {
    flex-direction: column !important;
  }
}

/* ── Medium screens (768px - 1079px): Sidebar narrow ────────── */
@media (min-width: 768px) and (max-width: 1079px) {

  /* Sidebar narrower but still visible */
  #dashboard-view .admin-main-nav {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  #dashboard-view .admin-main-nav .nav-label {
    display: none !important;
  }

  .talent-shell .talent-main {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .talent-shell .talent-main:has(.dashboard-tabs:hover),
  .talent-shell .talent-main:has(.dashboard-tabs:focus-within) {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .talent-shell .dashboard-tabs,
  .talent-main > .dashboard-tabs {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 8px 4px !important;
  }

  .talent-shell .dashboard-tabs .nav-label {
    display: none !important;
  }

  .talent-shell .dashboard-subgroup,
  #dashboard-view .admin-main-nav .admin-nav-subgroup {
    display: none !important;
  }

  /* Fullpage modals — smaller sidebar offset */
  .modal-overlay.tt-fullpage-modal:not(.hidden),
  .tt-contract-preview-fullpage {
    left: 56px !important;
  }
}

/* ── Large screens (>= 1080px): Full layout as designed ────── */
@media (min-width: 1080px) {
  /* Ensure admin main uses grid when sidebar + main are both visible */
  #dashboard-view main:has(.admin-main-nav) {
    grid-template-columns: var(--tt-sidebar-w) minmax(0, 1fr) !important;
  }
}


/* ============================================================================
   UNIFIED STATUS BADGES (ALL PORTALS)
   Contract status, payment status, campaign status — same pill style.
   ============================================================================ */

.status-badge,
.contract-status-badge,
.payment-status-badge,
.talent-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: var(--tt-r-sm) !important;
  font-size: var(--tt-fs-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


/* ============================================================================
   UNIFIED EMPTY-STATE PLACEHOLDERS
   ============================================================================ */

.empty-state,
.no-data-message,
.talent-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--tt-text-muted) !important;
  font-size: var(--tt-fs-md) !important;
}


/* ============================================================================
   UNIFIED SEARCH BARS (ADMIN + TALENT)
   ============================================================================ */

#dashboard-view .search-box input,
.talent-shell .search-box input,
#dashboard-view .card-header input[type="search"],
.talent-shell input[type="search"] {
  height: var(--tt-input-h) !important;
  padding: var(--tt-input-pad) !important;
  border: 1px solid var(--tt-border-input) !important;
  border-radius: var(--tt-input-r) !important;
  font-size: var(--tt-input-font) !important;
  background: var(--tt-surface) !important;
}


/* ============================================================================
   UNIFIED ALERT / NOTIFICATION BARS
   ============================================================================ */

.admin-invoice-alert,
.talent-global-alerts,
#admin-invoice-alert,
#talent-global-alerts {
  padding: 0 24px !important;
}

.admin-invoice-alert .alert,
.talent-global-alerts .alert {
  padding: 10px 16px !important;
  border-radius: var(--tt-r-lg) !important;
  font-size: var(--tt-fs-base) !important;
  border: 1px solid var(--tt-border) !important;
  margin: 12px 0 !important;
}


/* ============================================================================
   UNIFIED TOOLTIP / POPOVER STYLES
   ============================================================================ */

.tt-tooltip,
[data-tooltip]::after {
  background: var(--tt-primary) !important;
  color: #fff !important;
  font-size: var(--tt-fs-xs) !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: var(--tt-r-sm) !important;
}


/* ============================================================================
   SIGN PORTAL — Unified with main portal design
   ============================================================================ */

.sign-container {
  background: var(--tt-page-bg) !important;
  min-height: 100vh !important;
  font-family: var(--tt-font) !important;
}

.sign-container .panel-header h2 {
  font-size: var(--tt-section-title-fs) !important;
  font-weight: var(--tt-section-title-fw) !important;
  color: var(--tt-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sign-container .role-badge {
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: var(--tt-r-sm) !important;
  font-size: var(--tt-fs-2xs) !important;
  font-weight: 700 !important;
}

.sign-container .form-panel {
  background: var(--tt-surface) !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: var(--tt-card-r) !important;
}

.sign-container input[type="text"],
.sign-container input[type="email"],
.sign-container input[type="date"],
.sign-container select,
.sign-container textarea {
  height: var(--tt-input-h) !important;
  padding: var(--tt-input-pad) !important;
  border: 1px solid var(--tt-border-input) !important;
  border-radius: var(--tt-input-r) !important;
  font-size: var(--tt-input-font) !important;
  font-family: var(--tt-font) !important;
}


/* ============================================================================
   BUILDER PORTAL — Unified with main portal design
   ============================================================================ */

.builder-container {
  background: var(--tt-page-bg) !important;
  min-height: 100vh !important;
  font-family: var(--tt-font) !important;
}

.builder-container .panel-header h2 {
  font-size: var(--tt-section-title-fs) !important;
  font-weight: var(--tt-section-title-fw) !important;
  color: var(--tt-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.builder-container .sidebar-panel {
  background: var(--tt-surface) !important;
  border-left: 1px solid var(--tt-border) !important;
}

.builder-container .sidebar-section h3 {
  font-size: var(--tt-fs-sm) !important;
  font-weight: 700 !important;
  color: var(--tt-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.builder-container .field-item {
  height: var(--tt-btn-h) !important;
  padding: 0 12px !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: var(--tt-btn-r) !important;
  font-size: var(--tt-fs-base) !important;
  background: var(--tt-surface) !important;
  cursor: grab !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.builder-container .field-item:hover {
  background: var(--tt-surface-hover) !important;
  border-color: var(--tt-border-strong) !important;
}

.builder-container input[type="text"],
.builder-container input[type="email"],
.builder-container input[type="number"],
.builder-container select {
  height: var(--tt-input-h) !important;
  padding: var(--tt-input-pad) !important;
  border: 1px solid var(--tt-border-input) !important;
  border-radius: var(--tt-input-r) !important;
  font-size: var(--tt-input-font) !important;
  font-family: var(--tt-font) !important;
}


/* ============================================================================
   UNIFIED SCROLLBAR STYLE (ALL PORTALS)
   ============================================================================ */

#dashboard-view ::-webkit-scrollbar,
.talent-shell ::-webkit-scrollbar,
.sign-container ::-webkit-scrollbar,
.builder-container ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

#dashboard-view ::-webkit-scrollbar-track,
.talent-shell ::-webkit-scrollbar-track,
.sign-container ::-webkit-scrollbar-track,
.builder-container ::-webkit-scrollbar-track {
  background: transparent !important;
}

#dashboard-view ::-webkit-scrollbar-thumb,
.talent-shell ::-webkit-scrollbar-thumb,
.sign-container ::-webkit-scrollbar-thumb,
.builder-container ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12) !important;
  border-radius: 3px !important;
}

#dashboard-view ::-webkit-scrollbar-thumb:hover,
.talent-shell ::-webkit-scrollbar-thumb:hover,
.sign-container ::-webkit-scrollbar-thumb:hover,
.builder-container ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.24) !important;
}

/* Sidebar scrollbar — lighter */
.admin-main-nav::-webkit-scrollbar-thumb,
.dashboard-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12) !important;
}

.admin-main-nav::-webkit-scrollbar-thumb:hover,
.dashboard-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}


/* ============================================================================
   UNIFIED SELECTION / FOCUS STYLES
   ============================================================================ */

#dashboard-view ::selection,
.talent-shell ::selection,
.sign-container ::selection,
.builder-container ::selection {
  background: rgba(59, 130, 246, 0.16) !important;
  color: var(--tt-text) !important;
}

/* Focus-visible outlines for accessibility — scoped to exclude nav items
   so the active sidebar pill doesn't get a blue ring around its dark fill. */
#dashboard-view *:focus-visible:not(.view-btn):not(.admin-nav-subitem):not(.dashboard-tab):not(.dashboard-subtab):not(.nav-item):not(button[class*="nav"]),
.talent-shell *:focus-visible:not(.dashboard-tab):not(.dashboard-subtab):not(.nav-item) {
  outline: 2px solid var(--tt-accent) !important;
  outline-offset: 2px !important;
}

/* Remove focus-visible from elements that have their own focus styles */
#dashboard-view input:focus-visible,
#dashboard-view select:focus-visible,
#dashboard-view textarea:focus-visible,
.talent-shell input:focus-visible,
.talent-shell select:focus-visible,
.talent-shell textarea:focus-visible {
  outline: none !important;
}


/* ============================================================================
   ⭐ ZOHO-BOOKS-STYLE SIDEBAR NAV ANIMATIONS (ALL PORTALS)
   Höchste Spezifität — schlägt portal-facelift.css's konflikt-styles
   (z.B. .dashboard-tab.active { background: #101010 } → wir wollen blau)
   ============================================================================

   ZOHO-Pattern:
   1. Nav-Item:  transparent bg, light gray text, smooth transitions
   2. Hover:     subtle white-tint bg, brighter text, slight slide-in
   3. Active:    solid blue bg, white text, 3px left border indicator
   4. Transition:  220ms cubic-bezier(0.4, 0, 0.2, 1) — Material easing
   5. NO focus-visible outline auf Nav-Items (active = visual feedback)
   ============================================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. Base Nav-Item — Admin + Talent IDENTISCH
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .view-btn,
html body #dashboard-view .admin-main-nav .admin-nav-subitem,
html body .talent-shell .dashboard-tabs .dashboard-tab,
html body .talent-shell .dashboard-tabs .dashboard-subtab {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #d6dbe6 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--tt-font) !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateX(0) !important;
  transition:
    background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sub-Items leicht eingerückt + kleiner */
html body #dashboard-view .admin-main-nav .admin-nav-subitem,
html body .talent-shell .dashboard-tabs .dashboard-subtab {
  min-height: 32px !important;
  height: 32px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #a8b0c0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. Nav-Icon — gleiche Größe, smooth color transition
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .view-btn .nav-icon,
html body #dashboard-view .admin-main-nav .admin-nav-subitem .nav-icon,
html body .talent-shell .dashboard-tab .nav-icon,
html body .talent-shell .dashboard-subtab .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: currentColor !important;
  opacity: 0.85 !important;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body #dashboard-view .admin-main-nav .view-btn .nav-icon svg,
html body #dashboard-view .admin-main-nav .admin-nav-subitem .nav-icon svg,
html body .talent-shell .dashboard-tab .nav-icon svg,
html body .talent-shell .dashboard-subtab .nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. HOVER state — subtle slide-right + lighter bg
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .view-btn:hover,
html body #dashboard-view .admin-main-nav .admin-nav-subitem:hover,
html body .talent-shell .dashboard-tab:hover,
html body .talent-shell .dashboard-subtab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

html body #dashboard-view .admin-main-nav .view-btn:hover .nav-icon,
html body #dashboard-view .admin-main-nav .admin-nav-subitem:hover .nav-icon,
html body .talent-shell .dashboard-tab:hover .nav-icon,
html body .talent-shell .dashboard-subtab:hover .nav-icon {
  opacity: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. ACTIVE state — Zoho-style solid blue + 3px left indicator
   (höchste Spezifität — schlägt #101010 aus facelift)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .view-btn.active,
html body #dashboard-view .admin-main-nav .admin-nav-subitem.active,
html body .talent-shell .dashboard-tabs .dashboard-tab.active,
html body .talent-shell .dashboard-tabs .dashboard-subtab.active,
html body #dashboard-view.talent-shell .dashboard-tab.active,
html body #dashboard-view.talent-shell .dashboard-subtab.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 2px rgba(59, 130, 246, 0.25),
    inset 3px 0 0 0 #60a5fa !important;
}

html body #dashboard-view .admin-main-nav .view-btn.active .nav-icon,
html body #dashboard-view .admin-main-nav .admin-nav-subitem.active .nav-icon,
html body .talent-shell .dashboard-tab.active .nav-icon,
html body .talent-shell .dashboard-subtab.active .nav-icon {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. NO focus-visible outline auf Nav-Items — active state ist genug
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .view-btn:focus,
html body #dashboard-view .admin-main-nav .view-btn:focus-visible,
html body #dashboard-view .admin-main-nav .admin-nav-subitem:focus,
html body #dashboard-view .admin-main-nav .admin-nav-subitem:focus-visible,
html body .talent-shell .dashboard-tab:focus,
html body .talent-shell .dashboard-tab:focus-visible,
html body .talent-shell .dashboard-subtab:focus,
html body .talent-shell .dashboard-subtab:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Active items darf Box-Shadow behalten (für das 3px left indicator) */
html body #dashboard-view .admin-main-nav .view-btn.active:focus,
html body #dashboard-view .admin-main-nav .view-btn.active:focus-visible,
html body #dashboard-view .admin-main-nav .admin-nav-subitem.active:focus,
html body #dashboard-view .admin-main-nav .admin-nav-subitem.active:focus-visible,
html body .talent-shell .dashboard-tab.active:focus,
html body .talent-shell .dashboard-tab.active:focus-visible,
html body .talent-shell .dashboard-subtab.active:focus,
html body .talent-shell .dashboard-subtab.active:focus-visible {
  outline: none !important;
  box-shadow:
    0 1px 2px rgba(59, 130, 246, 0.25),
    inset 3px 0 0 0 #60a5fa !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. NAV-LABEL — smooth, gleiche Größe, kein Wrapping
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .nav-label,
html body .talent-shell .dashboard-tabs .nav-label {
  flex: 1 1 auto !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline !important;
  pointer-events: auto !important;
  color: currentColor !important;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body #dashboard-view .admin-main-nav .admin-nav-subitem .nav-label,
html body .talent-shell .dashboard-subtab .nav-label {
  font-size: 12.5px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. SUBGROUP — gleicher Style in Admin + Talent
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .admin-nav-subgroup,
html body .talent-shell .dashboard-tabs .dashboard-subgroup {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  margin: 2px 0 6px 16px !important;
  padding-left: 12px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
  transition: max-height 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. ENTRANCE ANIMATION — sub-items slide in when parent active
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes ttSidebarSubItemIn {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem,
html body .talent-shell .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab {
  animation: ttSidebarSubItemIn 200ms cubic-bezier(0.4, 0, 0.2, 1) backwards !important;
}

html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem:nth-child(1),
html body .talent-shell .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab:nth-child(1) {
  animation-delay: 0ms !important;
}
html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem:nth-child(2),
html body .talent-shell .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab:nth-child(2) {
  animation-delay: 40ms !important;
}
html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem:nth-child(3),
html body .talent-shell .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab:nth-child(3) {
  animation-delay: 80ms !important;
}
html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem:nth-child(4),
html body .talent-shell .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab:nth-child(4) {
  animation-delay: 120ms !important;
}
html body #dashboard-view .admin-main-nav .admin-nav-subgroup.is-active-parent .admin-nav-subitem:nth-child(5),
html body .talent-shell .dashboard-tabs .dashboard-subgroup.is-active-parent .dashboard-subtab:nth-child(5) {
  animation-delay: 160ms !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. PAGE-CONTENT FADE-IN — when switching sections
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes ttSectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html body #dashboard-view main > .admin-main-section:not(.hidden),
html body .talent-shell .talent-panel:not(.hidden) {
  animation: ttSectionFadeIn 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. ACTIVE INDICATOR — alternative dot/pill style (Zoho mobile style)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #dashboard-view .admin-main-nav .view-btn::before,
html body #dashboard-view .admin-main-nav .admin-nav-subitem::before,
html body .talent-shell .dashboard-tab::before,
html body .talent-shell .dashboard-subtab::before {
  content: none !important;
  display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. PREFERS-REDUCED-MOTION — accessibility
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  html body #dashboard-view .admin-main-nav .view-btn,
  html body #dashboard-view .admin-main-nav .admin-nav-subitem,
  html body .talent-shell .dashboard-tab,
  html body .talent-shell .dashboard-subtab,
  html body #dashboard-view main > .admin-main-section,
  html body .talent-shell .talent-panel {
    transition: none !important;
    animation: none !important;
  }
}