/* ============================================================
   DESIGN-SYSTEM
   Subject: Compliance-Dashboard für Mitarbeiter-Dokumente.
   Palette: ruhiges Blaugrau + gedämpftes Tannengrün als Akzent.
   ============================================================ */

:root {
  --paper: #f4f7f5;
  --surface: #ffffff;
  --surface-hover: #f7fbf8;
  --line: #e6ece8;
  --line-strong: #d5ded8;

  --ink: #0B141A;
  --ink-soft: #566762;
  --ink-faint: #8A9A95;

  --accent: #25D366;
  --accent-soft: #E9FBEF;
  --accent-strong: #0F5A37;
  --accent-dark: #0B3A2A;

  --warn: #C45A2A;
  --warn-soft: #FCEADF;

  --info: #1F7A52;
  --info-soft: #E7F7EF;

  --flowsign-bg: #EAF6FC;
  --flowsign-border: #B8DEF3;
  --flowsign-text: #1B6FA8;

  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --sans: 'Manrope', -apple-system, 'Inter', 'Segoe UI', sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(11, 20, 26, 0.05), 0 14px 32px rgba(11, 20, 26, 0.06);
  --shadow-card-soft: 0 1px 2px rgba(11, 20, 26, 0.04), 0 8px 24px rgba(11, 20, 26, 0.04);
  --shadow-modal: 0 24px 48px rgba(11, 20, 26, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 0.82rem; }

a { color: var(--accent); text-decoration: none; }

/* ---------- App-Gerüst ---------- */
.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
  .sidebar.is-open { display: flex !important; }
}

/* ---------- Mobile-Topbar (Hamburger-Menü) ---------- */
.mobile-topbar {
  display: none;
}
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-menu-btn span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 1px;
}
.mobile-topbar__brand {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-topbar__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent) 0%, #1FA85A 100%);
  color: #06210F;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.13), 0 6px 16px rgba(37, 211, 102, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.sidebar-backdrop {
  display: none;
}

@media (max-width: 860px) {
  /* position:fixed nimmt die Topbar komplett aus dem app-shell-Grid-
     Fluss heraus - sonst würde sie als eigenes Grid-Item eine ganze
     (durch die Geschwister hochgezogene) Zeile beanspruchen und einen
     riesigen Leerraum erzeugen. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 30;
  }

  /* Platz für die fixe Topbar oben freihalten, damit der Inhalt nicht
     darunter verschwindet. !important nötig, da eine spätere
     ungeschützte .main{padding:...}-Regel (anderer 640px-Block) sonst
     genau dieses padding-top wieder überschreiben würde. */
  .main { padding-top: 76px !important; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* Fallback für sehr alte Browser ohne svh-Unterstützung */
    height: 100svh; /* Fallback für Browser mit svh, aber ohne dvh */
    height: 100dvh; /* Passt sich laufend an die tatsächlich sichtbare
      Höhe an, auch wenn Safaris Adressleiste beim Scrollen des
      Hintergrunds ein-/ausblendet - behebt eine Lücke am unteren Rand,
      die mit dem statischen svh-Wert sonst entstehen konnte. */
    width: 260px;
    z-index: 50;
    box-shadow: 18px 0 46px rgba(11, 20, 26, 0.25);
    overflow-y: auto;
  }

  .sidebar-backdrop.is-visible {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 20, 26, 0.45);
    z-index: 40;
  }
}

/* Scroll-Lock während offenem Mobile-Menü: reines overflow:hidden ist auf
   iOS Safari bekanntermaßen unzuverlässig (elastischer Overscroll kann
   den Hintergrund trotzdem verschieben). Stattdessen wird body per
   position:fixed an der aktuellen Scroll-Position "eingefroren" - der
   nötige negative top-Offset kommt dynamisch aus dashboard.js
   (openMobileSidebar()/closeMobileSidebar()), da er von der jeweils
   aktuellen Scroll-Position abhängt. */
html.mobile-sidebar-open {
  overflow: hidden;
}
body.mobile-sidebar-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- Seitenleiste ---------- */
/* Hinweis zur Reihenfolge: Die Mobile-Variante (position:fixed +
   100svh, siehe @media (max-width: 860px) weiter oben) MUSS nach
   dieser Regel in der Datei stehen, da CSS bei gleicher Spezifität
   die später stehende Regel gewinnen lässt - unabhängig davon, ob sie
   in einer Media Query steht. Sonst überschreibt diese Desktop-Regel
   (sticky + 100vh) versehentlich wieder die Mobile-Werte, obwohl die
   Media Query technisch "zutrifft". */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

@media (min-width: 861px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 22px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}

.brand-name { font-size: 0.96rem; font-weight: 600; }
.brand-sub { font-size: 0.74rem; color: var(--ink-faint); margin-top: 1px; }

.nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}

.nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-strong); }
/* Ohne diese Regel gewinnt ".nav-item { display: flex }" gegen das
   Browser-Standardverhalten von [hidden] (gleiche Spezifität, aber
   später in der Kaskade) - Menüpunkte mit dem hidden-Attribut (siehe
   applyRolePermissions() in dashboard.js) blieben dadurch trotzdem
   sichtbar. */
.nav-item[hidden] { display: none; }
/* Navigation erst zeigen, wenn Firma/Rolle/Add-ons bekannt sind (siehe
   loadOrganization() in dashboard.js) - visibility statt display, damit
   die Sidebar ihre Breite behält und nichts springt. */
.nav-group.nav-pending { visibility: hidden; }
.nav-item .nav-icon { width: 16px; text-align: center; flex-shrink: 0; font-family: var(--mono); font-size: 0.82rem; }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sidebar-help-link {
  display: block;
  font-size: 0.78rem;
  text-decoration: none;
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}

#user-button-slot {
  position: relative;
  max-width: 100%;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  font-family: var(--sans);
  transition: background 0.12s ease;
}
.user-menu-trigger:hover { background: rgba(255, 255, 255, 0.06); }

.user-menu-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, #1FA85A 100%);
  color: #06210F;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 500;
}

.user-menu-email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
}

.user-menu-chevron {
  flex-shrink: 0;
  color: rgba(245, 247, 246, 0.55);
  transition: transform 0.15s ease;
}
.user-menu-trigger[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }

/* Öffnet sich NACH OBEN (bottom statt top) - die Sidebar sitzt unten im
   Viewport, ein normales top-basiertes Dropdown liefe hier aus dem
   sichtbaren Bereich heraus. */
.user-menu-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal);
  padding: 6px;
  z-index: 40;
}

.user-menu-dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.user-menu-dropdown__item:hover { background: var(--surface-hover); }
.user-menu-dropdown__item--danger { color: var(--warn); }
.user-menu-dropdown__item--danger:hover { background: var(--warn-soft); }

.user-menu-dropdown__divider {
  height: 1px;
  background: var(--line);
  margin: 6px 2px;
}

/* ---------- Hauptbereich ---------- */
.main {
  padding: 28px 36px 60px;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  .main { padding: 20px 16px 48px; }
}

.view { display: none; }
.view.is-active { display: block; }

/* Die Übersicht nutzt die komplette verfügbare Breite neben der Sidebar
   (nur noch durch das .main-Padding begrenzt) - die Karten-Grids
   (.stat-grid/.doctype-compliance-grid) skalieren über auto-fit/minmax
   selbst sinnvoll mit. Andere Ansichten (Formulare, Listen) bleiben
   bewusst schmaler und damit lesbarer. */
#view-overview.view { max-width: none; }
#view-employees.view,
#view-jobs.view,
#view-doctypes.view,
#view-capture.view,
#view-scans.view,
#view-review.view,
#view-settings.view { max-width: 1080px; }

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.view-title { font-size: 1.32rem; }
.view-subtitle { font-size: 0.9rem; color: var(--ink-soft); margin-top: 4px; max-width: 56ch; }
.view-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.role-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.role-legend__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.84rem;
}
.role-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--ink-faint);
}
.role-legend__dot--admin { background: var(--accent); }
.role-legend__dot--member { background: #3B7DBF; }
.role-legend__dot--viewer { background: var(--ink-faint); }
.role-legend__name {
  font-weight: 700;
  color: var(--ink);
  width: 52px;
  flex-shrink: 0;
}
.role-legend__desc { color: var(--ink-soft); }

/* ---------- Status-Filter (z.B. Erfasste Dokumente) ---------- */
.filter-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-chip {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.filter-chip:hover { background: var(--surface-hover); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-chip__count { opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ---------- Erfasste Dokumente: Suche + Dokumenttyp-Filter ---------- */
.scans-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.scans-toolbar input[type="text"] {
  flex: 1 1 260px;
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.scans-toolbar select {
  flex: 0 0 auto;
  min-width: 200px;
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 9px 32px 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23566762' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px;
}

/* ---------- Erfasste Dokumente: Pagination ---------- */
.scans-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.scans-pagination__info {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- Erfasste Dokumente: Mobile ---------- */
@media (max-width: 640px) {
  /* Status-Tabs: eine Zeile, horizontal wischbar statt vertikal
     umzubrechen. Scrollbar bewusst ausgeblendet (Chrome/Safari via
     ::-webkit-scrollbar, Firefox via scrollbar-width) - das horizontale
     Wischen bleibt trotzdem funktionsfähig. */
  #scans-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 12px;
    padding-bottom: 2px;
  }
  #scans-filter-row::-webkit-scrollbar { display: none; }
  #scans-filter-row .filter-chip { flex-shrink: 0; }

  /* Suche + Dokumenttyp-Filter nebeneinander statt untereinander -
     Suche nimmt den verfügbaren Platz, Dropdown bleibt kompakt. */
  .scans-toolbar {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .scans-toolbar input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .scans-toolbar select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 42%;
    font-size: 0.8rem;
    padding: 9px 24px 9px 10px;
    background-position: right 7px center;
    background-size: 12px;
  }

  /* Listenzeilen: eigenständig kompakteres Layout statt der generischen
     .row-item-Mobile-Regel (siehe oben, für andere Listen wie
     Mitarbeiter/Dokumenttypen gedacht - dort brechen Thumbnail+Badges
     bewusst auf eine zweite volle Zeile um). Bei Erfasste Dokumente
     bleibt die Zeile EINreihig: kleines Thumbnail links, Titel/Datum in
     der Mitte (je max. eine Zeile, mit Ellipsis abgeschnitten statt
     umzubrechen), Badges rechts kompakt gestapelt statt nebeneinander.
     #scans-list gewinnt gegen die generische Regel per ID-Spezifität,
     ganz ohne !important. */
  #scans-list .row-item {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
  }
  #scans-list .row-thumb {
    width: 44px;
    height: 44px;
  }
  #scans-list .row-main {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
  }
  /* Titel auf zwei Zeilen statt einer einzigen mit " — "-Trennung: der
     Mitarbeitername ist die eigentlich relevante Information in der
     Zeile und darf nie mit "..." abgeschnitten werden. Trick: Flexbox
     mit flex-wrap, .row-title__employee bekommt flex-basis:100% und
     erzwingt dadurch IMMER einen Zeilenumbruch vor sich, ganz ohne die
     DOM-Reihenfolge zu ändern - der Trenner " — " wird nur auf Mobile
     versteckt, das flowsign-Badge bleibt (per order) auf Zeile 1 neben
     dem Dokumenttyp. Desktop nutzt weiterhin die einzeilige
     Grundregel oben (.row-title ohne display-Override).
  */
  #scans-list .row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    font-size: 0.85rem;
    white-space: normal;
  }
  #scans-list .row-title__doctype {
    order: 1;
    font-weight: 600;
  }
  #scans-list .row-title .badge-flowsign {
    order: 2;
  }
  #scans-list .row-title__sep {
    display: none;
  }
  #scans-list .row-title__employee {
    order: 3;
    flex-basis: 100%;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
  #scans-list .row-meta {
    font-size: 0.72rem;
    margin-top: 1px;
  }
  #scans-list .row-item__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    margin-left: 0;
  }
  #scans-list .row-item__badges .badge {
    font-size: 0.62rem;
    padding: 2px 7px;
  }

  /* Pagination: gut antippbar (min. 44px Zielhöhe), aber nicht
     unnötig breit - Breite bleibt inhaltsbasiert. */
  .scans-pagination {
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .scans-pagination .btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .scans-pagination__info {
    font-size: 0.74rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.05s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { opacity: 0.88; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn-outline-warn { background: transparent; border-color: var(--warn); color: var(--warn); }
.btn-outline-warn:hover { background: var(--warn-soft); }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Karten ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 22px 24px; }

.section-title {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.section-desc { font-size: 0.84rem; color: var(--ink-soft); margin-bottom: 16px; }

/* ---------- Kennzahlen-Karten (Übersicht) ---------- */
/* minmax-Untergrenze bewusst von 160px auf 200px angehoben (siehe
   #view-overview.view weiter oben, jetzt ohne max-width): bei genau 8
   Karten und weniger als 8 möglichen 160px-Spalten blieb die Breite
   unauffällig, auf sehr breiten Monitoren (>2500px Content-Breite)
   passten aber alle 8 Spalten trotzdem noch nebeneinander und wurden
   unnatürlich weit auseinandergezogen. 200px verschiebt diese Schwelle
   nach oben, ohne bei normaler Bildschirmbreite (1080-1480px) etwas an
   der bisherigen Spaltenzahl zu ändern. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.stat-value {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 6px;
}
.stat-card.is-warn .stat-value { color: var(--warn); }
.stat-card.is-ok .stat-value { color: var(--accent); }

/* ---------- Compliance-Ring (Signature-Element) ---------- */
.ring {
  --pct: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--line) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ring-inner {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink);
}
.ring.is-complete { --pct: 100; }
.ring.is-complete .ring-inner { color: var(--accent); }
.ring.is-empty { --pct: 0; }

/* ---------- Listen-Zeilen ---------- */
.row-list { display: flex; flex-direction: column; }
.import-preview-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; margin-top: 10px; }
.row-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.row-item:last-child { border-bottom: none; }
.row-item:hover { background: var(--surface-hover); margin: 0 -12px; padding: 13px 12px; border-radius: var(--radius-sm); }
/* Auf Desktop bleibt der Wrapper unsichtbar (contents), die Badges
   sitzen direkt als Flex-Items in der Zeile wie zuvor. Auf Mobile
   (siehe @media unten) wird er zu einer echten Reihe, damit mehrere
   Badges als zusammengehöriges Paar nebeneinander bleiben, statt
   durch flex-wrap jeweils einzeln umzubrechen. */
.row-item__badges { display: contents; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 0.92rem; font-weight: 600; }
.row-job-col {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.row-job-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.row-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
/* Eigenes, optisch abgesetztes Element für Signatur-Hinweise (z.B.
   "wartet auf Signatur") innerhalb von .row-meta - bewusst KEIN
   display:flex auf .row-meta selbst (wird an mehreren anderen Stellen
   für reinen Text verwendet), stattdessen inline-block-Spans, die wie
   normaler Text zeilenweise umbrechen. */
.row-meta-pill {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  margin: 2px 4px 2px 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.attention-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.attention-reminder-btn { flex-shrink: 0; }
.attention-reminder-btn .label-mobile { display: none; }

/* ---------- Dashboard Aufmerksamkeit: feste Spalten fuer Job und Status ---------- */
.attention-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 128px 132px;
  align-items: center;
  column-gap: 14px;
}

.attention-row:hover {
  padding-left: 14px;
  padding-right: 14px;
}

.attention-row .row-main { min-width: 0; }

/* Auf Desktop ist der Tags-Wrapper unsichtbar (transparentes Grid-
   Subgrid-Verhalten via contents) - Job-Tag und Status-Badge landen
   direkt als Grid-Items in den letzten beiden festen Spalten. */
.attention-row .attention-row__tags { display: contents; }

.attention-row .row-job-tag {
  justify-self: start;
}

.attention-row .badge {
  justify-self: end;
  min-width: 104px;
  justify-content: center;
  text-align: center;
}

@media (max-width: 720px) {
  .attention-card__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .attention-reminder-btn {
    width: 100%;
    justify-content: center;
  }
  .attention-reminder-btn .label-desktop { display: none; }
  .attention-reminder-btn .label-mobile { display: inline; }
}

.row-thumb {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0;
}
/* flowsign-Dokumente haben nie ein Foto (immer ein PDF) - dasselbe
   hellblaue, abgerundet-quadratische Kachel-Design wie
   .employee-doc-row .row-thumb--doc in der Employee-Akte (dort auf
   Desktop-Breiten per Media-Query von Kreis auf 16px-Radius-Quadrat
   umgestellt, siehe dort) statt der leeren grauen Bild-Fläche. Erbt
   border-radius von .row-thumb (var(--radius-sm)) - bewusst KEIN
   border-radius:50%, sonst wieder ein Kreis statt der Kachel-Form. */
.row-thumb--flowsign {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flowsign-bg);
  border-color: var(--flowsign-border);
  color: var(--flowsign-text);
}
.row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.row-empty {
  padding: 28px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .row-item:not(.attention-row) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Die 56px Einrückung ist nur sinnvoll, wenn die Zeile tatsächlich
     ein Thumbnail-Bild hat (z.B. Scans). Listen ohne Bild (z.B.
     Dokumenttypen, Mitarbeiter) sollen NICHT eingerückt werden - sonst
     stehen Buttons/Badges nicht bündig unter dem Titel. */
  .row-item:not(.attention-row):has(.row-thumb) .row-main {
    flex-basis: calc(100% - 56px);
  }
  /* Ohne Thumbnail braucht .row-main die volle Zeilenbreite, sonst
     quetscht die generische .row-main{flex:1} Basisregel (flex-basis:
     0%) den Namen/Text gegen die danebenstehenden Badges/Buttons. */
  .row-item:not(.attention-row):not(:has(.row-thumb)) .row-main {
    flex-basis: 100%;
  }
  .row-item .row-job-col,
  .row-item .row-actions {
    flex-shrink: 0;
  }
  .row-item:not(.attention-row):has(.row-thumb) > *:not(.row-thumb):not(.row-main):not(.row-item__badges) {
    margin-left: 56px;
  }
  .row-item:not(.attention-row) .row-item__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .row-item:not(.attention-row) .row-item__badges > * {
    margin-left: 0;
  }
}

/* ---------- Badges ---------- */
.badge {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-neutral { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }
.badge-new { background: #f3edd9; color: #8a6a1c; }
.badge-ok { background: var(--accent-soft); color: var(--accent-strong); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-expired { background: #f3d9d3; color: #8a2e1c; font-weight: 600; }
.badge-expiring { background: #faecd2; color: #9a6c10; font-weight: 600; }

#billing-status-badge { display: inline-block; margin-top: 8px; }

/* Rechtsbündig statt links mit Leerraum daneben - .settings-row__control
   hat kein .field-with-action, das Button/Status sonst über
   margin-left:auto ans rechte Ende schieben würde. */
#billing-status-card .settings-row__control { align-items: flex-end; }

/* Schmalere Control-Spalte nur für diese Karte (Button braucht keine
   300px) - gibt der Info-Spalte mehr Platz, damit der Hint-Text in
   einer Zeile bleibt, ohne die Karte insgesamt breiter zu machen
   (bleibt innerhalb des bestehenden max-width:880px der .settings-list). */
#billing-status-card { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: 20px; }
#billing-status-card .hint { white-space: nowrap; }
#billing-reactivate-btn { margin-top: 8px; }

/* Gleiches Muster wie #billing-status-card oben: Button rechtsbündig
   statt links mit Leerraum, schmalere Control-Spalte gibt der
   Info-Spalte genug Platz für den einzeiligen Hint-Text. */
#flowsign-quota-card .settings-row__control { align-items: flex-end; }
#flowsign-quota-card { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); gap: 20px; }
#flowsign-quota-card .hint { white-space: nowrap; }

/* .btn setzt display:inline-flex mit derselben Spezifität wie die
   implizite [hidden]-Regel des Browsers - ohne diese Override-Regel
   bliebe JEDER .btn trotz hidden=true sichtbar (identisches Muster wie
   bei .review-card-side-select[hidden] weiter unten in dieser Datei).
   Generisch statt pro Button-ID einzeln aufgezählt, nachdem genau das
   (vergessene Ergänzung für einen neu hinzugekommenen Button,
   #flowsign-consent-btn) schon einmal zu diesem Bug geführt hat. */
.btn[hidden] { display: none; }

/* ---------- Formulare ---------- */
.form-grid { display: grid; gap: 14px; }
#scan-form { gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display: none; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.hint { font-size: 0.76rem; color: var(--ink-faint); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"],
.field input[type="file"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 9px 11px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
/* textarea ist mehrzeilig - überschreibt die feste height:40px der
   Sammelregel oben gezielt mit min-height (72px, in etwa der
   bisherigen rows="2"-Höhe, aber nicht zu knapp), erlaubt vertikales
   Vergrößern durch den Nutzer und sorgt für lesbaren Zeilenabstand.
   Restliche Optik (Font/Padding/Rahmen/Hintergrund/Breite) kommt
   unverändert aus der Sammelregel oben. */
.field textarea {
  height: auto;
  min-height: 72px;
  line-height: 1.4;
  resize: vertical;
}
.field select,
.review-card-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23566762' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px;
  padding-right: 32px;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: #DCE3DF;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 2px 9px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.field input[type="file"]::file-selector-button:hover {
  background: #c5d2ca;
  color: var(--ink);
  border-color: #BFD0C8;
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.checkbox-row input { margin: 0; }
.checkbox-row[hidden] { display: none; }

/* App-weit individuell gestaltete Checkbox statt der browser-/
   betriebssystemabhängigen nativen Optik - appearance:none blendet nur
   das native AUSSEHEN aus, das <input> bleibt ein echtes Checkbox-
   Element (Klick/Tastatur/Leertaste/Screenreader funktionieren
   unverändert, kein Ersatz-Markup nötig). Das Häkchen selbst ist ein
   ::after-Pseudo-Element, nur im :checked-Zustand sichtbar. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="checkbox"]:hover {
  border-color: var(--accent);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ablaufdatum-Felder (is_expiry_field): readonly Text-Input mit eigenem
   Kalender-Icon statt des nativen type="date"-Icons - öffnet das
   Kalender-Popup unten statt den Browser-eigenen Datums-Picker. */
.field input.field-date-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566762' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
  padding-right: 34px;
}

/* Eigene Kalender-Popup-Komponente (ersetzt die native Browser-Optik von
   <input type="date">) - EINE geteilte Instanz, wird per JS unter das
   jeweils angeklickte Ablaufdatum-Feld positioniert (siehe
   openDatePicker() in dashboard.js). */
.date-picker-popup {
  position: absolute;
  z-index: 1000;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 12px;
}
.date-picker-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.date-picker-popup__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}
.date-picker-popup__year-toggle {
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 6px;
}
.date-picker-popup__year-toggle:hover { background: var(--surface-hover); }
.date-picker-popup__nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.date-picker-popup__nav:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.date-picker-popup__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 4px;
}
.date-picker-popup__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.date-picker-popup__day {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.date-picker-popup__day:hover { background: var(--surface-hover); }
.date-picker-popup__day.is-today { font-weight: 700; color: var(--accent-strong); }
.date-picker-popup__day.is-selected { background: var(--accent); color: #fff; font-weight: 700; }
.date-picker-popup__day--empty { cursor: default; }
/* Jahres-Liste: legt sich über Wochentags-Kopfzeile + Tage-Raster, statt
   das Popup zu vergrößern - schließt sich wieder, sobald ein Jahr
   gewählt wurde, das normale Tage-Raster bleibt danach unverändert
   offen. */
.date-picker-popup__years {
  position: absolute;
  top: 40px;
  left: 12px;
  right: 12px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  z-index: 1;
}
.date-picker-popup__year-btn {
  border: none;
  background: none;
  border-radius: 8px;
  padding: 6px 0;
  font-size: 0.82rem;
  font-family: var(--sans);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.date-picker-popup__year-btn:hover { background: var(--surface-hover); }
.date-picker-popup__year-btn.is-selected { background: var(--accent); color: #fff; font-weight: 700; }
/* .date-picker-popup__years setzt display:grid explizit - überschreibt
   sonst das native [hidden]-Verhalten des Browsers (gleiches Muster wie
   .field/.flowsign-box/.scan-modal-images an anderer Stelle). */
.date-picker-popup__years[hidden] { display: none; }
.date-picker-popup__footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Abgesetzte, klar erkennbare Box für das FlowSign-Zusatzmodul (eigene
   Akzentfarbe statt des normalen WhatsApp-Grüns), damit im
   Dokumenttyp-Formular sofort klar ist: das gehört zum Zusatzmodul,
   nicht zur normalen Foto-Erfassung. */
.flowsign-box {
  border: 1px solid var(--flowsign-border);
  background: var(--flowsign-bg);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flowsign-box__title {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--flowsign-text);
}
.flowsign-box .checkbox-row,
.flowsign-box .field { margin: 0; }
/* Ohne diese Regel würde die eigene display:flex-Deklaration oben das
   native [hidden]-Verhalten des Browsers überschreiben (siehe .field[hidden]
   weiter unten für dasselbe Muster). */
.flowsign-box[hidden] { display: none; }

/* Abgesetzter "Code-Block" für Platzhalter-Tags (z.B. im Formularfelder-
   Hinweis beim FlowSign-PDF-Upload) - je Tag eine eigene Zeile statt
   Inline-<code> mitten im Fließtext. Pill-Optik an
   .whatsapp-number-card__hint code angelehnt, nur als Block statt inline. */
.placeholder-tag-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--flowsign-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 4px 0;
}
.placeholder-tag-block code {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.placeholder-tag-block__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.placeholder-tag-block__label {
  flex-shrink: 0;
  min-width: 52px;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.placeholder-tag-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.placeholder-tag-links a:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  color: var(--ink-faint);
}
.badge-flowsign { background: var(--flowsign-bg); color: var(--flowsign-text); border: 1px solid var(--flowsign-border); }

.divider { height: 1px; background: var(--line); margin: 22px 0; border: none; }

/* ---------- Einstellungen: kompaktes Zeilen-Layout ---------- */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 880px;
}
.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: start;
  gap: 32px;
  padding: 22px 26px;
}
.settings-row .section-title { font-size: 0.94rem; margin-bottom: 6px; }
.settings-row .section-desc { font-size: 0.82rem; margin-bottom: 0; }
.settings-row__control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.settings-row__control .field-with-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.settings-row__control .field-with-action input,
.settings-row__control .field-with-action select { flex: 1; min-width: 0; }
.settings-row__control .field-with-action input[style*="max-width"] { flex: 0 0 auto; }
.settings-row__control .field-with-action input[style*="max-width"] ~ .btn { margin-left: auto; }
.settings-row__control .field { width: 100%; margin-bottom: 12px; }
.settings-row__control .status-text { margin-top: 8px; }
#view-members .card { max-width: 640px; }
#view-members .field-with-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#view-members .field-with-action input { flex: 1; min-width: 0; }
#view-members #invite-role { flex: 0 0 auto; max-width: 170px; }
@media (max-width: 600px) {
  #view-members .field-with-action { flex-wrap: wrap; }
  #view-members .field-with-action input { flex: 1 1 100%; }
  #view-members #invite-role { flex: 1 1 auto; max-width: none; }
  #view-members #invite-submit-btn { flex: 1 1 auto; }
}
.section-subtitle { font-size: 0.82rem; font-weight: 600; margin: 18px 0 8px; color: var(--ink-soft); }
.section-subtitle:first-child { margin-top: 0; }
.member-row-role-select {
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23566762' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  flex-shrink: 0;
}
.member-row-role-select:focus {
  outline: 3px solid rgba(37, 211, 102, 0.22);
  border-color: var(--accent);
}
.member-row-role-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .settings-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  #billing-status-card .hint {
    white-space: normal;
  }
  #flowsign-quota-card .hint {
    white-space: normal;
  }
}

/* ---------- Status-Meldungen ---------- */
.status-text { font-size: 0.84rem; margin-top: 10px; min-height: 1.2em; }
.status-text:empty { margin-top: 0; min-height: 0; }
.status-text.is-error { color: var(--warn); }
.status-text.is-success { color: var(--accent-strong); }

/* ---------- FlowSign-Kontingent-Blockiert-Box ---------- */
.flowsign-blocked-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #faecd2;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
  text-align: left;
}
.flowsign-blocked-box__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: #9a6c10; }
.flowsign-blocked-box__body { flex: 1; min-width: 0; }
.flowsign-blocked-box__success { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 4px; }
.flowsign-blocked-box__reason { font-size: 0.82rem; color: #9a6c10; font-weight: 600; line-height: 1.4; }
.flowsign-blocked-box__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #9a6c10;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #9a6c10;
  text-decoration: none;
  cursor: pointer;
}
.flowsign-blocked-box__link:hover { background: #9a6c10; color: #fff; }

/* ---------- Settings-Tabs ---------- */
/* Geteilte Komponente: Haupt-Dashboard (index.html, 2 Tabs) UND
   Marketing-Dashboard (marketing-admin.html, 4 Tabs). Bei zu wenig Platz
   auf schmalen Bildschirmen wischbar/scrollbar statt umbrechend oder
   abgeschnitten - overflow-x:auto zeigt bei index.html (Inhalt läuft dort
   nie über) standardmäßig keinen Scrollbalken, verändert dort optisch also
   nichts. Scrollbalken selbst bewusst ausgeblendet (scrollbar-width/
   ::-webkit-scrollbar), der Scroll-Bereich bleibt per Fingergeste bedienbar. */
.settings-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  padding: 10px 14px; background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer;
  flex-shrink: 0;
}
.settings-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.settings-tab-panel[hidden] { display: none; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 42, 48, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.hidden { display: none; }
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 28px;
  position: relative;
}
.modal-box.is-narrow { max-width: 540px; }
.modal-box--centered { text-align: center; }
.modal-box.is-wide { max-width: 900px; }
.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  font-size: 1.3rem;
  background: none; border: none;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
  padding: 4px;
}
.modal-close:hover { color: var(--ink); }
.modal-grid { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
@media (max-width: 620px) { .modal-grid { grid-template-columns: 1fr; } }
.modal-img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 10px; }

.scan-modal-images { display: flex; flex-direction: column; gap: 14px; }
.scan-modal-images[hidden] { display: none; }

/* Kompakte, zentrierte Karte für den Signatur-Status im Scan-Modal -
   ersetzt die für Fotos gedachte .scan-modal-image-block-Struktur, die
   für Signatur-Scans viel Leerraum ohne Bild hinterlassen hat. */
.scan-modal-signature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  text-align: center;
  border: 1px solid var(--flowsign-border);
  background: linear-gradient(180deg, var(--flowsign-bg) 0%, var(--surface) 100%);
  border-radius: var(--radius);
  padding: 28px 20px;
  box-shadow: var(--shadow-card-soft);
}
.scan-modal-signature-card[hidden] { display: none; }
/* .btn setzt display:inline-flex explizit (siehe Zeile ~360/1619) -
   überschreibt sonst das native [hidden]-Verhalten des Browsers, exakt
   wie bei .field/.flowsign-box/.scan-modal-images weiter oben. Betraf
   den "Signiertes Dokument ansehen"-Link, der trotz hidden-Attribut im
   "Wartet auf Signatur"-Zustand sichtbar blieb. */
#scan-modal-signature-link[hidden],
#scan-modal-signature-resend-btn[hidden] { display: none; }

.scan-modal-signature-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flowsign-text);
  opacity: 0.8;
}

/* Kreis-Badge statt nacktem Emoji - Farbe zeigt den Zustand (erledigt,
   offen, abgelehnt), ohne dass Text nötig ist. */
.scan-modal-signature-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.18);
}
.scan-modal-signature-icon-badge.is-pending {
  background: var(--flowsign-bg);
  color: var(--flowsign-text);
  box-shadow: none;
}
.scan-modal-signature-icon-badge.is-declined {
  background: var(--warn-soft);
  color: var(--warn);
  box-shadow: none;
}

.scan-modal-signature-status-text { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin: 0; }

/* Zusätzliche, robustere Absicherung neben dem .hidden-Property-Toggle
   in JS (gleiches !important-Muster wie body.role-readonly weiter
   unten) - falls die reine Property-Zuweisung aus irgendeinem Grund
   nicht greift, erzwingt diese Regel das Ausblenden trotzdem. */
#scan-modal-delete.is-signature-completed { display: none !important; }
.scan-modal-image-block .modal-img { margin-bottom: 6px; }

.scan-modal-back-missing {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 18px 14px;
  text-align: center;
}
/* Gleicher visueller Hinweis wie bei der Haupt-Dropzone - macht
   sichtbar, dass man die Rückseite hier auch per Drag & Drop direkt
   ablegen kann, nicht nur über den "Jetzt hochladen"-Button. */
.scan-modal-back-missing.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.scan-modal-back-missing__text {
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--warn);
}
.scan-modal-back-missing__hint {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.scan-modal-back-missing .btn-sm { cursor: pointer; }
.scan-modal-image-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

/* ---------- Übersichtszeilen (Mitarbeiter-Detail) ---------- */
.overview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.overview-row:last-child { border-bottom: none; }
.overview-row .ov-name { font-size: 0.9rem; font-weight: 600; flex: 1; }
.overview-row .ov-meta { font-size: 0.76rem; color: var(--ink-soft); }

/* Aufklappbare Mitarbeiter-Zeile in der Dokumenttyp-Detailansicht bei
   Mehrfach-Instanz-Dokumenttypen (z.B. "Sicherheitsunterweisung") -
   Button statt div, damit sie anklickbar ist, aber optisch identisch
   zu einer normalen .overview-row bleibt. */
button.overview-row--toggle {
  width: 100%;
  background: none;
  font-family: var(--sans);
  font-size: inherit;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.overview-row--sub {
  padding-left: 16px;
  border-bottom: 1px dashed var(--line);
}

/* Info-Block einer Übersichtszeile (Dokumenttyp-Detailansicht):
   Name, Datum UND Badges stehen alle gemeinsam in dieser einen Spalte
   neben dem Bild - dadurch automatisch bündig zueinander, auf jeder
   Bildschirmgröße gleich, ohne separate Mobile-Sonderbehandlung mit
   Umbruch-Berechnung und Einrückungs-Korrekturen (wie es vorher mit
   den Badges als eigenem, eigenständigem Flex-Geschwister von
   .ov-row-info nötig war). */
.ov-row-info { flex: 1; min-width: 0; }
.ov-row-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
}
.empty-state .empty-icon {
  font-family: var(--mono);
  font-size: 1.6rem;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.empty-state p { font-size: 0.88rem; }

/* ---------- Edit-Feldzeilen (Dokumenttyp bearbeiten) ---------- */
.doctype-edit-fields {
  margin-top: 24px;
}
.edit-field-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 34px;
  gap: 8px;
  align-items: end;
  margin: 0 0 12px;
  padding: 0 4px;
}
.edit-field-section-head label {
  display: block;
  margin-bottom: 4px;
}
.edit-field-section-head > span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding-bottom: 2px;
}
.field-help {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.edit-field-head { display: none; }
.edit-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 34px;
  gap: 8px;
  margin-bottom: 7px;
  align-items: center;
  padding: 3px 4px;
  margin-left: -4px;
  margin-right: -4px;
  border-radius: 14px;
  transition: background 0.18s ease;
}
.edit-field-row:hover,
.edit-field-row:focus-within {
  background: rgba(11, 20, 26, 0.025);
}
.edit-field-row input[type="text"] {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.86rem;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.edit-field-row.is-expiry input[type="text"] {
  border-color: rgba(37, 211, 102, 0.55);
  background: rgba(37, 211, 102, 0.035);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.08);
}
.edit-field-row .expiry-selector {
  width: 88px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}
.edit-field-row .expiry-selector:hover { background: rgba(37, 211, 102, 0.08); }
.edit-field-row .expiry-selector input { margin: 0; }
.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  border-radius: 999px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.remove-field-btn {
  opacity: 1;
}
.icon-btn:hover {
  color: var(--warn);
  border-color: rgba(197, 84, 31, 0.32);
}
.icon-btn:active {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: rgba(197, 84, 31, 0.45);
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 400;
  cursor: pointer;
}
/* .checkbox-list label setzt display:flex explizit - überschreibt sonst
   das native [hidden]-Verhalten des Browsers (gleiches Muster wie an
   anderen Stellen in diesem Projekt, z.B. .field/.flowsign-box). Nötig
   für die Live-Filterung der Mitarbeiter-Liste im Dropzone-Modal. */
.checkbox-list label[hidden] { display: none; }
.checkbox-list .empty-hint { font-size: 0.8rem; color: var(--ink-faint); }

/* ---------- Dokumenttyp-Compliance-Karten (Übersicht) ---------- */
/* Gilt für beide Grids der Übersicht (Compliance-Dokumente UND
   Unterschriften, siehe #doctype-compliance-grid-photo/-signature in
   index.html - gemeinsame Klasse). minmax-Untergrenze von 240px auf
   280px angehoben, gleicher Grund wie bei .stat-grid oben: verschiebt
   die Schwelle, ab der auf sehr breiten Monitoren zusätzliche Spalten
   statt immer breiterer Karten entstehen. */
.doctype-compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.compliance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.compliance-card:hover { border-color: var(--line-strong); }
/* Vollständig signierter Dokumenttyp: bewusst gedämpfter als die
   normale Karte (kein Schatten, Papier-Hintergrund) - signalisiert
   "hier aktuell nichts zu tun", im Unterschied zu einer Foto-Karte mit
   "2/2 aktuell", die trotzdem weiter beobachtet werden muss. */
.compliance-card--done {
  background: var(--paper);
  box-shadow: none;
}
.compliance-card--done .compliance-card-title { color: var(--ink-soft); }
.compliance-card__done-badge {
  margin-top: 10px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 8px 0;
}
.compliance-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.compliance-card-title .count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 400;
}
.compliance-bar {
  display: flex;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper);
  margin-bottom: 10px;
}
.compliance-bar span { height: 100%; }
.compliance-bar .seg-current { background: var(--accent); }
.compliance-bar .seg-expiring { background: #d9a02e; }
.compliance-bar .seg-expired { background: #b5402b; }
.compliance-bar .seg-backside-missing { background: #c9a14a; }
.compliance-bar .seg-missing { background: var(--line-strong); }
.compliance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.compliance-legend .legend-item { display: flex; align-items: center; gap: 4px; }
.compliance-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.compliance-legend .dot.seg-current { background: var(--accent); }
.compliance-legend .dot.seg-expiring { background: #d9a02e; }
.compliance-legend .dot.seg-expired { background: #b5402b; }
.compliance-legend .dot.seg-backside-missing { background: #c9a14a; }
.compliance-legend .dot.seg-missing { background: var(--line-strong); }

/* ---------- Nav-Zähler-Badge ---------- */
.nav-count-badge {
  margin-left: auto;
  background: var(--warn);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.68rem;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 0 5px;
}
/* Ohne diese Regel gewinnt "display: inline-flex" oben gegen das
   Browser-Standardverhalten von [hidden] (gleiche Spezifität, aber
   später in der Kaskade) - der Badge bliebe trotz hidden=true (siehe
   loadExternalContractsExpiring() in dashboard.js) sichtbar, gleiches
   Muster wie bei .nav-item[hidden] oben. */
.nav-count-badge[hidden] { display: none; }
.nav-count-badge--zero {
  background: var(--paper);
  color: var(--ink-faint);
  border: 1px solid var(--line);
}
.nav-item { display: flex; align-items: center; }

/* ---------- WhatsApp-Versandnummer-Karte (Übersicht) ---------- */
.whatsapp-number-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-color: #BFEBD0;
}
.whatsapp-number-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whatsapp-number-card__icon svg { width: 16px; height: 16px; }
.whatsapp-number-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.whatsapp-number-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.whatsapp-number-card__number {
  font-family: var(--mono);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.whatsapp-number-card__hint {
  font-size: 0.74rem;
  color: var(--ink-soft);
  width: 100%;
  margin-top: 2px;
}
.whatsapp-number-card__hint code {
  font-family: var(--mono);
  background: rgba(255,255,255,0.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.whatsapp-number-card__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.whatsapp-number-card__actions .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .whatsapp-number-card { flex-wrap: wrap; }
  .whatsapp-number-card__actions { flex-basis: 100%; }
  .whatsapp-number-card__actions .btn { flex: 1; }
}

/* ---------- Dropzone (Smart Upload) ---------- */
.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone-icon { font-family: var(--mono); font-size: 1.8rem; color: var(--ink-faint); margin-bottom: 8px; }
.dropzone-text { font-size: 0.9rem; color: var(--ink-soft); }
.dropzone-hint { font-size: 0.76rem; color: var(--ink-faint); margin-top: 6px; }
.dropzone-browse { color: var(--accent); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.dropzone-compact { padding: 20px; }
.dropzone-compact .dropzone-icon { font-size: 1.3rem; margin-bottom: 4px; }
.dropzone-compact .dropzone-text { font-size: 0.86rem; }
.dropzone-preview { display: block; height: 72px; width: auto; max-width: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); margin: 0 auto 8px; }
.dropzone-preview[hidden] { display: none; }
.dropzone-compact .dropzone-hint { font-size: 0.72rem; }

/* ---------- Review-Karten (Zu prüfen) ---------- */
.review-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.review-card-images { display: flex; gap: 6px; flex-shrink: 0; }
.review-card-images img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); flex-shrink: 0; }
.review-card-body { flex: 1; min-width: 0; }
.review-card-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; }
.review-card-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
.review-card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 10px;
  margin: 4px 0 10px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.review-card-fields .field { gap: 3px; }
.review-card-fields .field label { font-size: 0.7rem; }
.review-card-fields .field input {
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.review-card-fields .field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.review-card-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.review-card-row select {
  max-width: 220px;
  font-family: var(--sans);
  font-size: 0.86rem;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.review-card-row select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.review-card-side-select {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
/* WICHTIG: .review-card-side-select setzt oben "display: flex" mit
   Klassen-Spezifität - das überschreibt die sehr niedrige Spezifität
   der impliziten "[hidden] { display: none }"-Regel des Browsers,
   wodurch das hidden-Attribut wirkungslos würde und das Element trotz
   hidden sichtbar bliebe (genau das beobachtete Problem: "Rückseite"
   blieb anklickbar, obwohl der Dokumenttyp keine Rückseite vorsieht).
   Diese Regel mit gleicher Klasse + [hidden]-Attribut-Selektor hat
   höhere Spezifität als die Browser-Default-Regel UND als die Regel
   oben (zwei Selektoren statt einem), und stellt damit sicher, dass
   hidden zuverlässig greift. */
.review-card-side-select[hidden] {
  display: none;
}
.review-card-side-label { font-weight: 600; color: var(--ink-soft); }
.review-card-side-select label { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }

/* Auf kleinen Bildschirmen nimmt der ganze Block die volle Breite ein
   und das Label steht über den beiden Auswahlmöglichkeiten, statt sich
   mit "Vorderseite"/"Rückseite" in eine enge Zeile zu quetschen (sonst
   auf dem Handy kaum lesbar/treffbar). */
@media (max-width: 640px) {
  .review-card-side-select {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .review-card-side-label { flex-basis: 100%; }
}

/* ---------- Login-Bildschirm ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-screen > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-intro {
  text-align: center;
  margin-bottom: 22px;
}
.auth-brand-link { display: block; width: fit-content; margin: 0 auto; color: inherit; text-decoration: none; cursor: pointer; }
.auth-intro .brand-mark { margin: 0 auto 14px; }
.auth-intro h1 { font-size: 1.2rem; }
.auth-intro p { font-size: 0.86rem; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Login/Signup-Karte + Org-Setup (siehe dashboard.js: authTexts/applyAuthTexts) ---------- */
.auth-card { width: 360px; max-width: 100%; }
.auth-card-heading { font-size: 1rem; margin-bottom: 16px; text-align: center; }
/* Gleicher Stil wie .auth-intro p (Untertitel unter dem Flow321-Logo). */
.auth-card-subtitle { font-size: 0.86rem; color: var(--ink-soft); text-align: center; margin: -8px 0 18px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-oauth-btn { width: 100%; gap: 8px; }
.auth-oauth-btn + .auth-oauth-btn { margin-top: 8px; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--ink-faint);
  font-size: 0.78rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.auth-card .btn-primary { width: 100%; margin-top: 4px; }
.auth-switch { text-align: center; font-size: 0.82rem; color: var(--ink-soft); margin-top: 16px; }
.auth-switch a { font-weight: 600; }

/* Login-Ansicht hat (anders als Signup) keine eigene Card-Überschrift
   mehr, da sie den Untertitel in .auth-intro oben nur wiederholt hätte -
   Ausgleichs-Abstand, damit der Google-Button nicht direkt am
   Card-Rand klebt. */
#auth-login-view { padding-top: 18px; }

/* "Passwort vergessen?" bewusst gedämpfter als "Registrieren" - selber
   Ton wie sekundäre Hilfetexte (siehe .muted), damit "Registrieren" der
   klar erkennbare sekundäre CTA bleibt. Weiterhin unterstrichen und mit
   Hover-Effekt als Link erkennbar. */
.auth-switch a.auth-link-muted { color: var(--ink-soft); font-weight: 500; text-decoration: underline; }
.auth-switch a.auth-link-muted:hover { color: var(--ink); }

/* ---------- Plan-Auswahl (frische Org ohne Plan) ---------- */
.plan-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 720px;
}
.plan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-soft);
  padding: 28px 22px;
  width: 220px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan-card--popular {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-card);
}
.plan-card-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
}
.plan-card h3 { font-size: 0.98rem; font-weight: 600; margin-bottom: 8px; }
.plan-card-price { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.plan-card-price-unit { font-size: 0.76rem; font-weight: 400; color: var(--ink-faint); }
.plan-card-limit { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }
.plan-card-tagline { font-size: 0.76rem; color: var(--ink-faint); margin-top: 6px; line-height: 1.4; }
.plan-card-features {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}
.plan-card-features li {
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 4px 0 4px 18px;
  position: relative;
}
.plan-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-strong);
  font-weight: 700;
}
.plan-card .btn { width: 100%; margin-top: auto; }
.plan-selection-trust { margin-top: 18px; text-align: center; }

#plan-selection-screen { position: relative; }
.plan-selection-logout-link {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.plan-selection-logout-link:hover { color: var(--ink-soft); }

#org-setup-screen { position: relative; }
.org-setup-logout-link {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.org-setup-logout-link:hover { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}


/* ============================================================
   FLOW321 THEME REFINEMENTS
   Matches the public flow321.com design language.
   ============================================================ */

html, body {
  background:
    radial-gradient(circle at 72% -12%, rgba(37, 211, 102, 0.08), transparent 34%),
    var(--paper);
}

.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  background: linear-gradient(180deg, #0B141A 0%, #071116 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 18px 0 46px rgba(11, 20, 26, 0.14);
}

.brand {
  padding: 8px 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 12px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, #1FA85A 100%);
  color: #06210F;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.13), 0 10px 24px rgba(37, 211, 102, 0.2);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand-name {
  color: #F5F7F6;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-sub {
  color: rgba(245, 247, 246, 0.55);
  font-size: 0.75rem;
}

.nav-group { gap: 5px; }

.nav-group-label {
  padding: 14px 11px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(245, 247, 246, 0.4);
}

.nav-item {
  color: rgba(245, 247, 246, 0.68);
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 11px;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #F5F7F6;
  transform: translateX(1px);
}

.nav-item.is-active {
  background: rgba(37, 211, 102, 0.16);
  color: #E8FFF1;
  border-color: rgba(37, 211, 102, 0.3);
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item .nav-icon {
  color: currentColor;
  opacity: 0.9;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-help-link {
  /* Gleicher Grauton wie die normalen Nav-Texte (.nav-item, 0.68) -
     etwas kräftiger als der ursprüngliche 0.5-Wert, der als klickbarer
     Call-to-Action zu kontrastarm/deaktiviert wirkte. Bleibt trotzdem
     als "weniger wichtig" erkennbar über die kleinere Schriftgröße
     (0.78rem statt der Nav-Item-Größe), nicht über die Farbe. */
  color: rgba(245, 247, 246, 0.68);
}
.sidebar-help-link:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #F5F7F6;
}

#user-button-slot { color: rgba(245, 247, 246, 0.78); }

.main {
  padding: 32px 40px 70px;
}

.view-title {
  font-size: 1.48rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.view-subtitle {
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.card,
.stat-card,
.compliance-card,
.modal-box,
.review-card {
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-soft);
}

.card:hover,
.stat-card:hover,
.compliance-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.card-pad { padding: 24px 26px; }

.stat-grid {
  gap: 16px;
  margin-bottom: 30px;
}

.stat-card {
  padding: 22px 22px 20px;
  min-height: 92px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.stat-card:hover { transform: translateY(-2px); }

.stat-value {
  font-family: var(--sans);
  font-size: clamp(1.6rem, 4vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.stat-card.is-ok .stat-value { color: var(--accent-strong); }
.stat-card.is-warn .stat-value { color: var(--warn); }

.stat-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 7px;
}

.section-title {
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-desc {
  color: var(--ink-soft);
}

.btn {
  border-radius: 11px;
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: #06210F;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.22);
}

.btn-primary:hover {
  background: #2FE176;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.28);
}

.btn-secondary {
  background: var(--ink);
  color: #F5F7F6;
}

.btn-ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

.btn-ghost:hover {
  background: var(--surface-hover);
  color: var(--ink);
  border-color: #BFD0C8;
}

.dropzone {
  position: relative;
  border: 2px dashed #C9D6D0;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(37, 211, 102, 0.025), rgba(255, 255, 255, 0));
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 9px;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.1);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.dropzone-text {
  color: var(--ink-soft);
  font-weight: 500;
}

.dropzone-browse {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.compliance-card {
  padding: 18px 20px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.compliance-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.35);
}

.compliance-bar {
  height: 10px;
  border-radius: 999px;
  background: #D8DED9;
}

.compliance-bar .seg-current { background: var(--accent); }
.compliance-bar .seg-expiring { background: #F0A04B; }
.compliance-bar .seg-expired { background: #C45A2A; }
.compliance-bar .seg-backside-missing { background: #D4B106; }
.compliance-bar .seg-missing { background: #AAB4AF; }

.ring {
  width: 42px;
  height: 42px;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), #DAE3DE 0);
}

.ring-inner {
  background: var(--surface);
  color: var(--ink);
  font-size: 0.63rem;
}

.ring.is-complete .ring-inner { color: var(--accent-strong); }

.row-item {
  padding: 15px 0;
  border-bottom-color: var(--line);
}

.row-item:hover {
  background: var(--surface-hover);
  margin: 0 -14px;
  padding: 15px 14px;
  border-radius: 12px;
}

.row-title { font-weight: 800; }

.row-job-tag,
.badge-neutral {
  background: #F4F8F6;
  border-color: var(--line);
  color: var(--ink-soft);
}

.badge {
  border-radius: 999px;
  font-weight: 700;
}

.badge-ok {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge-warn,
.badge-expired {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge-expiring {
  background: #FFF1D8;
  color: #9A6C10;
}

.nav-count-badge {
  background: var(--warn);
  color: #fff;
  font-weight: 800;
}

.nav-count-badge--zero {
  background: rgba(255,255,255,0.08);
  color: rgba(245,247,246,0.58);
  border-color: rgba(255,255,255,0.1);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"],
.field input[type="file"],
.field select,
.review-card-row select,
.review-card-fields .field input,
.edit-field-row input[type="text"] {
  border-color: var(--line-strong);
  border-radius: 11px;
}

.field input:focus,
.field select:focus,
.review-card-row select:focus,
.review-card-fields .field input:focus {
  outline: 3px solid rgba(37, 211, 102, 0.22);
  border-color: var(--accent);
}

.modal-overlay {
  background: rgba(11, 20, 26, 0.56);
  backdrop-filter: blur(4px);
}

.auth-screen {
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 211, 102, 0.12), transparent 42%),
    var(--paper);
}

.auth-intro .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.auth-intro h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

@media (max-width: 860px) {
  .sidebar.is-open {
    background: linear-gradient(180deg, #0B141A 0%, #071116 100%);
  }
}

@media (max-width: 640px) {
  .main { padding: 22px 16px 48px; }
  .stat-value { font-size: 1.82rem; }
}


/* ---------- WhatsApp-Erinnerungsdialog ---------- */
#reminders-list {
  overflow-x: hidden;
}
.reminder-preview-card {
  background: #F6FAF8;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.reminder-preview-card:last-child {
  margin-bottom: 0;
}
.reminder-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.reminder-person-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  min-width: 0;
}
.reminder-phone {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.reminder-section-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}
.reminder-doc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  margin: 0;
}
.reminder-doc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.reminder-doc-list li::before {
  content: none;
}
.reminder-doc-list li span:first-child {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
}
.reminder-reason {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .reminder-preview-head,
  .reminder-doc-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .reminder-phone,
  .reminder-reason {
    white-space: normal;
  }
}

/* ============================================================
   Mobile-Fix: Mitarbeiter sauber darstellen
   - Detaildialog passt auf Handybreite
   - WhatsApp-Eingabe bricht nicht aus
   - Dokumentzeilen und Badges umbrechen sauber
   - Aufmerksamkeit-Karte bleibt kompakt lesbar
   ============================================================ */
.employee-modal-box {
  max-width: 720px;
}
.employee-detail-field {
  max-width: 420px;
  margin-top: 10px;
}
.employee-detail-field--job {
  max-width: 300px;
}
.employee-detail-field + .status-text {
  margin-top: 4px;
  min-height: 1em;
  margin-bottom: 4px;
}
.employee-whatsapp-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.employee-whatsapp-row input,
.employee-whatsapp-row select {
  flex: 1 1 auto;
  min-width: 0;
}
.employee-whatsapp-row .btn {
  flex-shrink: 0;
}
.employee-overview-list {
  margin-top: 18px;
}
.employee-signature-section-heading {
  margin-top: 28px;
  margin-bottom: 4px;
  font-size: 0.98rem;
  font-weight: 600;
}
.employee-signature-section-heading[hidden] { display: none; }
.employee-signature-group-label {
  margin-top: 14px;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.employee-signature-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.employee-signature-toggle:hover { border-color: var(--line-strong); }
.employee-signature-toggle__arrow { font-size: 0.78rem; color: var(--ink-faint); }
.employee-doc-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.employee-doc-row .row-thumb {
  grid-column: 1;
}
.employee-doc-row .row-thumb--placeholder {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(211, 223, 216, 0.72);
  background: rgba(248, 251, 249, 0.76);
}
/* Signatur-Dokumente haben nie ein Foto (immer ein PDF) - neutrales
   Dokument-Icon statt einer leeren Fläche, damit das nicht wie ein
   Ladefehler wirkt. Gleiche Box-Größe/Ausrichtung wie die
   Foto-Vorschauen der Compliance-Dokumente, aber im selben runden,
   sanft eingefärbten Kreis-Stil wie die anderen flowsign-Status-Icons
   (Sanduhr/Häkchen im Scan-Modal, siehe .scan-modal-signature-icon-badge). */
.employee-doc-row .row-thumb--doc {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--flowsign-bg);
  border-color: var(--flowsign-border);
  color: var(--flowsign-text);
}
/* Wrapper um Text + Badges: auf Desktop transparent fürs Grid (die
   beiden Kinder verhalten sich wie eigene Grid-Items in Spalte 2/3),
   auf Mobile wird er zu einer echten Spalte, in der beide Blöcke
   direkt untereinander stehen (siehe Media-Query unten). */
.employee-doc-row__content {
  display: contents;
}
.employee-doc-row__main {
  min-width: 0;
}
.employee-doc-row__badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.employee-doc-row .ov-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.employee-doc-row .badge {
  max-width: 100%;
}

/* Erzwingt das gestapelte Layout (siehe die entsprechenden Regeln im
   640px-Media-Query weiter unten, von dort inhaltlich unverändert
   übernommen) unabhängig von der Bildschirmbreite - für Zeilen mit vier
   Elementen nebeneinander (Badge + mehrere Buttons, siehe
   renderExternalDocOpenRow() in dashboard.js), bei denen die dritte
   Grid-Spalte sonst so viel Breite beansprucht, dass die Dateiname-
   Spalte mitten im Wort umbricht. Bewusst eine eigene Klasse statt die
   Basis-Regel .employee-doc-row generell zu ändern - die meisten
   Zeilen (Mitarbeiter-Compliance, abgeschlossene/abgebrochene externe
   Dokumente) haben nur 1-2 Elemente und passen im kompakten
   Nebeneinander-Layout auf Desktop weiterhin gut. */
.employee-doc-row.employee-doc-row--stack {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px 12px;
  padding: 16px 0;
}
.employee-doc-row--stack .employee-doc-row__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: 2;
  min-width: 0;
}
.employee-doc-row--stack .employee-doc-row__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.employee-doc-row--stack .employee-doc-row__badges {
  justify-content: flex-start;
}
.employee-doc-row--stack .badge {
  min-width: 0;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}
.employee-doc-row.employee-doc-row--stack .row-thumb,
.employee-doc-row.employee-doc-row--stack .row-thumb--placeholder {
  width: 64px;
  height: 64px;
}

@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    overflow-y: auto;
  }
  .modal-box {
    max-height: none;
    width: min(100%, 520px);
    padding: 24px 20px;
    border-radius: 22px;
  }
  .employee-modal-box {
    padding: 24px 18px 22px;
  }
  .employee-detail-field,
  .employee-detail-field--job {
    max-width: none;
    width: 100%;
  }
  .employee-whatsapp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .employee-whatsapp-row .btn {
    padding-left: 12px;
    padding-right: 12px;
  }
  .employee-doc-row,
  .employee-doc-row.employee-doc-row--missing {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px 12px;
    padding: 14px 0;
  }
  .employee-doc-row__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 2;
    min-width: 0;
  }
  .employee-doc-row__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .employee-doc-row__badges {
    justify-content: flex-start;
  }
  .employee-doc-row .badge {
    min-width: 0;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
  }
  .row-thumb,
  .employee-doc-row .row-thumb--placeholder {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 374px) {
  .employee-whatsapp-row {
    grid-template-columns: 1fr;
  }
  .employee-whatsapp-row .btn {
    width: 100%;
  }
}

/* Mobile-Layout für die Mitarbeiter-Zeile in "Braucht Aufmerksamkeit":
   der Fortschritts-Ring bekommt eine eigene, über beide Zeilen
   gespannte Grid-Spalte, damit Name/Text/Tags ihn auf schmalen
   Bildschirmen nie überlappen. */
@media (max-width: 720px) {
  .attention-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "ring main"
      "ring tags";
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    text-align: left;
  }

  .attention-row .ring {
    grid-area: ring;
    width: 48px;
    height: 48px;
    align-self: center;
    justify-self: start;
    margin: 0;
  }

  .attention-row .ring-inner {
    width: 36px;
    height: 36px;
    font-size: 0.72rem;
  }

  .attention-row .row-main {
    grid-area: main;
    min-width: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }

  .attention-row .row-title,
  .attention-row .row-meta {
    display: block;
    text-align: left;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .attention-row .attention-row__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
  }

  .attention-row .badge,
  .attention-row .row-job-tag {
    white-space: nowrap;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .attention-row {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 14px;
  }

  .attention-row .ring {
    width: 46px;
    height: 46px;
  }

  .attention-row .ring-inner {
    width: 34px;
    height: 34px;
    font-size: 0.68rem;
  }
}


/* FLOW321 Desktop employee document thumbnails 88px
   Only desktop/tablet employee-document thumbnails are unified to 88x88.
   Mobile rules remain unchanged. */
@media (min-width: 641px) {
  .employee-doc-row {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    column-gap: 18px;
  }

  .employee-doc-row .row-thumb,
  .employee-doc-row .row-thumb--placeholder {
    width: 88px;
    height: 88px;
    border-radius: 16px;
  }
}

/* ============================================================
   ONBOARDING-BANNER
   Checkliste der ersten Einrichtungsschritte im Dashboard. Wird
   automatisch ausgeblendet, sobald alle drei Schritte erledigt
   sind (siehe renderOnboardingBanner in dashboard.js).
   ============================================================ */
.onboarding-banner.hidden { display: none; }
.onboarding-banner {
  margin-bottom: 20px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 65%);
}
.onboarding-banner__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.onboarding-banner__title {
  font-size: 1.1rem;
  margin: 0 0 4px;
}
.onboarding-banner__subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.onboarding-banner__progress {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--accent-strong);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onboarding-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.onboarding-step:last-child { border-bottom: none; }

.onboarding-step__check {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.onboarding-step.is-done .onboarding-step__check {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.onboarding-step.is-done .onboarding-step__title,
.onboarding-step.is-done .onboarding-step__desc {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
.onboarding-step.is-done button { display: none; }

.onboarding-step__body { flex: 1; min-width: 0; }
.onboarding-step__title {
  font-weight: 700;
  font-size: 0.92rem;
}
.onboarding-step__desc {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .onboarding-banner__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .onboarding-step {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
  }
  .onboarding-step__body {
    flex-basis: calc(100% - 38px);
  }
  .onboarding-step button {
    margin-left: 38px;
    flex-shrink: 0;
  }
}

.required-marker {
  color: var(--warn);
  font-weight: 700;
}

/* ---------- Rollen-Sichtbarkeit ----------
   Rein kosmetisch: blendet Aktionen aus, die die aktuelle Rolle laut
   Server (requireRole() in server.js) ohnehin nicht ausführen dürfte.
   Ein hier übersehenes Element ist kein Sicherheitsproblem, die
   eigentliche Absicherung passiert serverseitig. */
body.role-readonly [data-open-modal],
body.role-readonly [data-action="edit"],
body.role-readonly [data-action="delete"],
body.role-readonly [data-action="toggle"],
body.role-readonly [data-role="confirm"],
body.role-readonly [data-role="discard"],
body.role-readonly [data-role="new-employee"],
body.role-readonly #doctype-edit-save,
body.role-readonly #employee-import-commit-btn,
body.role-readonly #job-delete-btn,
body.role-readonly #job-edit-save,
body.role-readonly #scan-modal-delete,
body.role-readonly #scan-modal-save,
body.role-readonly #scan-modal-archive-toggle,
body.role-readonly #employee-overview-name-save,
body.role-readonly #employee-overview-whatsapp-save {
  display: none !important;
}

body.role-not-admin #doctype-rescan-btn,
body.role-not-admin #open-reminders-btn,
body.role-not-admin #reminders-send-btn {
  display: none !important;
}