:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-strong: #F9FAFB;
  --surface-soft: #F3F4F6;
  --surface-muted: #EAECF0;
  --line: rgba(15, 23, 42, 0.09);
  --line-strong: rgba(15, 23, 42, 0.16);
  --text: #111111;
  /* Einen Tick dunkler als vorher (#6B7280). Auf den grauen Flaechen der App
     (#EAECF0, #F3F4F6) lag der alte Wert bei 4,1:1 bis 4,5:1 und damit unter
     dem, was kleiner Text braucht; jetzt sind es ueberall mindestens 4,6:1.
     Optisch ist der Unterschied kaum zu sehen. */
  --muted: #616A78;
  /* Gruen fuer einen Stundensaldo im Plus, 5,0:1 auf hellem Grund. */
  --saldo-plus: #15803D;
  --brand: #2563EB;
  --brand-deep: #1E40AF;
  --accent: #EEF3FE;
  --danger: #DC2626;
  --shadow: none;
  --hover-shadow: none;
  --soft-hover-shadow: none;
  --selected-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
  --page-overlay: rgba(242, 241, 238, 0.0);
  --page-bg-start: #F2F1EE;
  --page-bg-end: #ECEAE6;
  --switch-bg: #ffffff;
  --switch-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  --switch-active-bg: #111111;
  --switch-active-shadow: none;
  --chip-bg: #ffffff;
  --primary-start: #111111;
  --primary-end: #111111;
  --primary-text: #ffffff;
  --secondary-bg: #EEF3FE;
  --secondary-text: #1E3A8A;
  --ghost-bg: #ffffff;
  --ghost-text: #111111;
  --pill-bg: #EEF3FE;
  --pill-text: #1E3A8A;
  --focus-border: rgba(37, 99, 235, 0.5);
  --focus-ring: rgba(37, 99, 235, 0.1);
  --success-bg: rgba(37, 99, 235, 0.08);
  --success-text: #1E3A8A;
  --danger-bg: rgba(220, 38, 38, 0.07);
  --danger-text: #991B1B;
  --warning-bg: rgba(245, 158, 11, 0.08);
  --warning-text: #92400E;
  --row-bg: #F8F9FB;
  --row-hover-bg: #EEF2FF;
  --calendar-day-bg: #ffffff;
  --calendar-day-outside-bg: #F5F6F8;
  --calendar-selected-bg: rgba(37, 99, 235, 0.07);
  --calendar-selected-border: rgba(37, 99, 235, 0.35);
  --radius-xl: 8px;
  --radius-lg: 6px;
  --radius-md: 5px;
  --radius-sm: 4px;
  --topbar-h: 58px;
}

:root[data-theme="ember"] {
  color-scheme: dark;
  --bg: #141414;
  --surface: #1C1C1C;
  --surface-strong: #222222;
  --surface-soft: #1A1A1A;
  --surface-muted: #181818;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #F0EDE8;
  /* Dasselbe im dunklen Design: auf #222222 lag #888888 bei 4,5:1 und damit
     genau auf der Grenze. */
  --muted: #949494;
  /* Heller, damit es auf dunklem Grund lesbar bleibt (9,8:1). */
  --saldo-plus: #4ADE80;
  --brand: #4F8EF7;
  --brand-deep: #93C5FD;
  --accent: #1E2A3A;
  --danger: #F87171;
  --shadow: none;
  --hover-shadow: none;
  --soft-hover-shadow: none;
  --selected-shadow: 0 0 0 2px rgba(79, 142, 247, 0.28);
  --page-overlay: rgba(20,20,20,0.0);
  --page-bg-start: #141414;
  --page-bg-end: #111111;
  --switch-bg: #222222;
  --switch-shadow: 0 1px 3px rgba(0,0,0,0.25);
  --switch-active-bg: #F0EDE8;
  --switch-active-shadow: none;
  --chip-bg: #222222;
  --primary-start: #F0EDE8;
  --primary-end: #F0EDE8;
  --primary-text: #111111;
  --secondary-bg: #1E2A3A;
  --secondary-text: #93C5FD;
  --ghost-bg: #222222;
  --ghost-text: #F0EDE8;
  --pill-bg: #1E2A3A;
  --pill-text: #93C5FD;
  --focus-border: rgba(79, 142, 247, 0.55);
  --focus-ring: rgba(79, 142, 247, 0.12);
  --success-bg: rgba(79, 142, 247, 0.12);
  --success-text: #93C5FD;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-text: #FCA5A5;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --warning-text: #FCD34D;
  --row-bg: #1C1C1C;
  --row-hover-bg: #222222;
  --calendar-day-bg: #1C1C1C;
  --calendar-day-outside-bg: #181818;
  --calendar-selected-bg: rgba(79, 142, 247, 0.1);
  --calendar-selected-border: rgba(79, 142, 247, 0.38);
  --topbar-h: 58px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Inter",
    "Helvetica Neue",
    Arial,
    sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-shell {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 44px;
}

.app-shell[data-view="manager"],
.app-shell[data-view="employee"] {
  width: min(2040px, calc(100% - 18px));
  padding-top: 0;
}

.loading-card,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 200ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

body[data-app-mode="employee-pwa"] {
  min-height: 100dvh;
  height: auto;
  background: #111827;
  /* Scrollen in der installierten PWA (Standalone) explizit erlauben –
     sonst bleibt der Inhalt bei kleinen Displays / offener Tastatur fest. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.pwa-doc {
  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-app-mode="employee-pwa"] .app-shell,
.app-shell[data-view="employee-pwa"],
.app-shell[data-view="employee-pwa-login"],
.app-shell[data-view="employee-pwa-blocked"] {
  width: min(100%, 520px);
  min-height: 100dvh;
  padding: 0;
}

.employee-pwa-shell,
.employee-pwa-auth-shell {
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    16px
    calc(env(safe-area-inset-bottom, 0px) + 96px);
  color: var(--text);
}

.employee-pwa-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.employee-pwa-topbar,
.employee-pwa-auth-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.employee-pwa-branding,
.employee-pwa-auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.employee-pwa-brand-icon,
.employee-pwa-auth-brand-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.employee-pwa-brand-icon img,
.employee-pwa-auth-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employee-pwa-branding strong,
.employee-pwa-auth-brand-copy strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.employee-pwa-branding span,
.employee-pwa-auth-brand-copy span {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.employee-pwa-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.employee-pwa-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}

.employee-pwa-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.employee-pwa-hero-card,
.employee-pwa-section-card,
.employee-pwa-profile-card,
.employee-pwa-timeline-card,
.employee-pwa-compact-card,
.employee-pwa-blocked-card,
.employee-pwa-auth-card,
.employee-pwa-install-banner {
  background: rgba(19, 24, 33, 0.78);
  border-color: rgba(255, 255, 255, 0.08);
}

.employee-pwa-hero-head,
.employee-pwa-section-header,
.employee-pwa-auth-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.employee-pwa-hero-head h2,
.employee-pwa-section-header h2,
.employee-pwa-auth-copy h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.employee-pwa-hero-head p,
.employee-pwa-section-header p,
.employee-pwa-auth-copy p,
.employee-pwa-blocked-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.employee-pwa-live-card {
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.employee-pwa-live-card .clock-live-value {
  font-size: clamp(46px, 13vw, 64px);
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.employee-pwa-live-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.employee-pwa-live-facts div,
.employee-pwa-profile-grid article {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.employee-pwa-live-facts span,
.employee-pwa-profile-grid span,
.employee-pwa-metric-grid span,
.employee-pwa-next-shift small {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.employee-pwa-live-facts strong,
.employee-pwa-profile-grid strong,
.employee-pwa-metric-grid strong,
.employee-pwa-next-shift strong {
  font-size: 18px;
  letter-spacing: -0.03em;
}

.employee-pwa-action-grid {
  gap: 12px;
}

.employee-pwa-action-grid .clock-action-button,
.employee-pwa-auth-form .primary-button,
.employee-pwa-profile-actions .primary-button,
.employee-pwa-profile-actions .secondary-button,
.employee-pwa-profile-actions .ghost-button {
  min-height: 56px;
  font-size: 16px;
}

.employee-pwa-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.employee-pwa-compact-card,
.employee-pwa-profile-card,
.employee-pwa-timeline-card,
.employee-pwa-section-card,
.employee-pwa-auth-card,
.employee-pwa-blocked-card {
  padding: 20px;
}

.employee-pwa-metric-grid,
.employee-pwa-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.employee-pwa-next-shift {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.employee-pwa-shift-list,
.employee-pwa-section-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.employee-pwa-shift-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.employee-pwa-shift-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.employee-pwa-shift-head strong {
  display: block;
  font-size: 16px;
}

.employee-pwa-shift-head span,
.employee-pwa-shift-duration {
  color: var(--muted);
}

.employee-pwa-shift-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.employee-pwa-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.employee-pwa-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
}

.employee-pwa-profile-head strong {
  display: block;
  font-size: 18px;
}

.employee-pwa-profile-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.employee-pwa-profile-note {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.employee-pwa-profile-note strong {
  display: block;
  margin-bottom: 6px;
}

.employee-pwa-profile-note p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.employee-pwa-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.employee-pwa-install-banner {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.employee-pwa-install-banner p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.employee-pwa-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 12px;
  margin-top: auto;
  border-radius: 24px;
  background: rgba(17, 24, 39, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.35);
}

.employee-pwa-nav-button {
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
}

.employee-pwa-nav-button i {
  font-size: 20px;
}

.employee-pwa-nav-button strong {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.employee-pwa-nav-button.is-active {
  background: rgba(255, 156, 80, 0.14);
  color: var(--brand);
}

/* PWA Schnellaktionen (Zeit eintragen / Abwesenheit beantragen) */
.employee-pwa-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}

.employee-pwa-quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text, #fff);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.employee-pwa-quick-action i {
  font-size: 19px;
  color: var(--brand);
}

.employee-pwa-quick-action:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* Manager-PWA: KPI-Kacheln */
.manager-pwa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manager-pwa-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: 16px;
}

.manager-pwa-kpi i {
  font-size: 20px;
  color: var(--brand);
}

.manager-pwa-kpi strong {
  font-size: 1.6rem;
  line-height: 1;
}

.manager-pwa-kpi span {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.manager-pwa-absence-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.manager-pwa-absence-actions .small-button {
  padding: 8px 10px;
}

.manager-pwa-entry-row {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.employee-pwa-auth-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Zentriert bei viel Platz, wird aber bei wenig Platz (z. B. offene
     Tastatur) oben ausgerichtet und bleibt scrollbar – kein abgeschnittener
     Inhalt mehr. */
  justify-content: flex-start;
}

.employee-pwa-auth-shell > :first-child {
  margin-top: auto;
}

.employee-pwa-auth-shell > :last-child {
  margin-bottom: auto;
}

.employee-pwa-auth-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.employee-pwa-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.employee-pwa-auth-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.employee-pwa-auth-form span {
  font-size: 13px;
  color: var(--muted);
}

.employee-pwa-auth-form input {
  min-height: 56px;
}

.employee-pwa-blocked-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  min-height: calc(100dvh - 150px);
}

.employee-pwa-blocked-copy h1 {
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: -0.05em;
}

@media (max-width: 560px) {
  .employee-pwa-live-facts,
  .employee-pwa-card-grid,
  .employee-pwa-metric-grid,
  .employee-pwa-profile-grid {
    grid-template-columns: 1fr;
  }

  .employee-pwa-install-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .employee-pwa-branding {
    align-items: center;
  }

  /* Frueher stand hier "width: 100%; justify-content: space-between" - ein
     Rest aus einer Zeit, in der die Kopfzeile auf schmalen Geraeten
     untereinander stand. In der heutigen einzeiligen Kopfzeile nahm die
     Knopfgruppe damit die volle Breite: der Name wurde auf null gequetscht
     und das Namenskuerzel stand auf 320 px hinter dem rechten Rand.
     Die Gruppe belegt jetzt nur noch, was ihre Knoepfe brauchen. */
  .employee-pwa-topbar-actions {
    justify-content: flex-end;
  }
}

.loading-card {
  width: min(460px, 100%);
  margin: 120px auto 0;
  display: grid;
  place-items: center;
  gap: 20px;
  padding: 38px 28px;
  text-align: center;
}

/* Ladeanimation: eine Woche, die sich fuellt. Sieben Balken wachsen
   nacheinander hoch, ein Lichtstreifen laeuft darueber – passend zum
   Dienstplan statt eines beliebigen Spinners. */
.shiftora-loader {
  position: relative;
  width: 132px;
  height: 76px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.shiftora-loader-week {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 6px;
}

.shiftora-loader-bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: var(--brand);
  transform-origin: bottom center;
  transform: scaleY(0.14);
  opacity: 0.28;
  animation: shiftoraLoaderFill 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Unterschiedliche Zielhoehen lassen es nach einem echten Plan aussehen
   statt nach einem gleichmaessigen Equalizer. */
.shiftora-loader-bar:nth-child(1) { animation-delay: 0s;    --bar-peak: 0.62; }
.shiftora-loader-bar:nth-child(2) { animation-delay: 0.09s; --bar-peak: 0.88; }
.shiftora-loader-bar:nth-child(3) { animation-delay: 0.18s; --bar-peak: 0.54; }
.shiftora-loader-bar:nth-child(4) { animation-delay: 0.27s; --bar-peak: 1;    }
.shiftora-loader-bar:nth-child(5) { animation-delay: 0.36s; --bar-peak: 0.72; }
.shiftora-loader-bar:nth-child(6) { animation-delay: 0.45s; --bar-peak: 0.34; }
.shiftora-loader-bar:nth-child(7) { animation-delay: 0.54s; --bar-peak: 0.24; }

/* Wochenende ruhiger, wie im Plan. */
.shiftora-loader-bar:nth-child(6),
.shiftora-loader-bar:nth-child(7) {
  background: var(--line-strong);
}

.shiftora-loader-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: shiftoraLoaderSweep 1.8s ease-in-out infinite;
}

:root[data-theme="ember"] .shiftora-loader-sweep {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
}

@keyframes shiftoraLoaderFill {
  0%,
  100% {
    transform: scaleY(0.14);
    opacity: 0.28;
  }
  45%,
  65% {
    transform: scaleY(var(--bar-peak, 0.8));
    opacity: 1;
  }
}

@keyframes shiftoraLoaderSweep {
  0% {
    transform: translateX(-120%);
  }
  60%,
  100% {
    transform: translateX(360%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shiftora-loader-bar {
    animation: none;
    transform: scaleY(var(--bar-peak, 0.8));
    opacity: 1;
  }

  .shiftora-loader-sweep {
    animation: none;
    opacity: 0;
  }
}

.loading-copy {
  display: grid;
  gap: 6px;
}

.loading-copy strong {
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.loading-copy span {
  color: var(--muted);
  font-size: 0.92rem;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-copy strong {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.brand-lockup-hero {
  margin-bottom: 28px;
}

.brand-lockup-dual {
  width: 100%;
}

.brand-logo-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.brand-logo-vamed {
  width: 208px;
}

.brand-logo-shiftora {
  width: 154px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark-vamed {
  padding: 14px 18px;
  border-radius: 28px;
  background: #12181f;
  box-shadow: var(--shadow);
}

.brand-mark-inline {
  padding: 10px 14px;
  border-radius: 22px;
}

.brand-divider {
  color: var(--muted);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  transform: translateY(-2px);
}

.brand-lockup-hero .brand-copy {
  display: none;
}

.brand-lockup-hero .brand-logo-vamed {
  width: 214px;
}

.brand-lockup-hero .brand-logo-shiftora {
  width: 162px;
}

.brand-lockup-header .brand-logo {
  width: 136px;
}

.brand-lockup-header .brand-copy strong {
  font-size: 13px;
}

.login-shell {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 430px);
  gap: 28px;
  align-items: center;
}

.login-utility {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.login-intro {
  padding: 28px 8px 28px 4px;
}

.login-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 700;
}

.login-intro p,
.workspace-heading p,
.panel-head p,
.body-text,
.summary-row span,
.stat-card p,
.stat-card span,
.login-note span {
  color: var(--muted);
}

.login-intro p {
  max-width: 560px;
  font-size: 1.06rem;
  line-height: 1.65;
}

.meta-strip {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.meta-strip span {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}

.login-form,
.entry-form,
.export-week-panel,
.settings-panel,
.filter-card,
.user-form,
.manager-calendar-card,
.calendar-detail-card,
.roster-card,
.summary-panel,
.table-card,
.empty-state,
.error-card {
  padding: 24px;
}

.panel:hover {
  border-color: var(--line-strong);
  box-shadow: var(--hover-shadow);
}

/* ── Layout-Panels = Sections, keine schwebenden Karten ── */
/* Nur direkte Kinder — verschachtelte Panels behalten ihren Card-Look */
.manager-side-stack > .panel,
.manager-main-stack > .panel,
.manager-main-stack-full > .panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  padding-bottom: 8px;
}

.manager-side-stack > .panel:first-child,
.manager-main-stack > .panel:first-child,
.manager-main-stack-full > .panel:first-child {
  border-top: none;
  padding-top: 0;
}

.manager-side-stack > .panel:hover,
.manager-main-stack > .panel:hover,
.manager-main-stack-full > .panel:hover {
  border-top-color: var(--line);
  box-shadow: none;
}

/* Sections im side-stack etwas enger */
.manager-side-stack {
  gap: 0;
}

.manager-main-stack {
  gap: 0;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.panel-head h2,
.empty-state h2,
.error-card h1 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-form-head {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-bottom: 28px;
  text-align: left;
}

.login-form-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.login-form-head p {
  margin: 0;
  max-width: 30ch;
  font-size: 0.98rem;
  line-height: 1.55;
}

.login-form > .primary-button {
  margin-top: 14px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.93rem;
  color: var(--muted);
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  background: var(--surface-strong);
  color: var(--text);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Vom Browser abgelehnte Eingabe: bis zur naechsten Korrektur markiert, damit
   das blockierte Speichern auch nach dem Verschwinden der System-Sprechblase
   noch nachvollziehbar ist. */
.is-invalid-field,
.is-invalid-field:hover {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.is-invalid-field:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-bg);
}

button {
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease;
}

button:hover {
  opacity: 0.88;
}

/* Fallback for any custom button class that doesn't define its own
   :focus-visible treatment: without this, the browser's own (much larger,
   often oval) native focus ring is drawn instead, which looks broken next to
   the app's consistent, subtle focus rings. More specific rules like
   .primary-button:focus-visible still win over this. */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

button:disabled,
textarea:disabled,
input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button:disabled:hover {
  opacity: 0.55;
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.language-button {
  min-width: 36px;
  padding: 5px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: none;
  border-radius: 6px;
}

.language-button.is-active {
  background: var(--switch-active-bg);
  color: var(--primary-text);
  box-shadow: none;
}

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.view-switch-button {
  min-width: auto;
  padding: 6px 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
  border-radius: 7px;
  white-space: nowrap;
}

.view-switch-button.is-active {
  background: var(--switch-active-bg);
  color: var(--primary-text);
  box-shadow: none;
}

.primary-button {
  background: var(--primary-start);
  color: var(--primary-text);
}

.primary-button:active {
  opacity: 0.82;
}

button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: default;
}

button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.05em;
  height: 1.05em;
  margin: -0.525em 0 0 -0.525em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--primary-text);
  opacity: 0.9;
  animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

.support-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--primary-start, #111827);
  color: var(--primary-text, #fff);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
}

.support-fab:hover {
  opacity: 0.92;
}

.support-fab i {
  font-size: 1.15rem;
}

.support-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}

.support-modal-overlay[hidden] {
  display: none;
}

.support-modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: 20px;
  background: var(--surface, #fff);
  color: inherit;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.support-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.support-modal-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.support-modal-head p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted, #6b7280);
}

.support-form {
  display: grid;
  gap: 14px;
}

.support-form label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
}

.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  font: inherit;
}

.support-form textarea {
  resize: vertical;
}

.support-form-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 600;
}

.support-form-status[hidden] {
  display: none;
}

.support-form-status[data-type="success"] {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.support-form-status[data-type="error"] {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

@media (max-width: 640px) {
  .support-fab span {
    display: none;
  }

  .support-fab {
    padding: 12px;
  }
}

.time-field {
  position: relative;
  display: block;
}

.time-field > input {
  width: 100%;
}

.time-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* Vorher: left und right auf 0, also exakt so breit wie das Eingabefeld.
     In den schmalen Feldern des Wochenformulars waren die beiden Spalten
     dadurch so eng, dass "07:15" rechts abgeschnitten wurde. Jetzt richtet
     sich die Breite nach dem Inhalt, mindestens aber nach dem Feld. */
  right: auto;
  min-width: max(100%, 224px);
  max-width: min(320px, calc(100vw - 24px));
  z-index: 40;
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.12));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Steht das Feld nah am rechten Rand, klappt die Liste nach links auf. */
.time-dropdown.is-right-aligned {
  left: auto;
  right: 0;
}

/* Die fuenf Zeiten, die diese Person wirklich benutzt – ganz oben, damit
   der Normalfall ein Klick ist statt einer Suche durch 65 Eintraege. */
.time-dropdown-frequent {
  position: sticky;
  top: -6px;
  margin: -6px -6px 6px;
  padding: 8px 10px 10px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  z-index: 1;
}

.time-dropdown-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.time-dropdown-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.time-dropdown-chips .time-dropdown-option {
  padding: 6px 11px;
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.12));
  font-weight: 650;
}

.time-dropdown-all {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
  gap: 4px;
}

.time-dropdown[hidden] {
  display: none;
}

.time-dropdown-option {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
}

.time-dropdown-option:hover {
  background: var(--row-hover-bg, rgba(0, 0, 0, 0.06));
}

.time-dropdown-option.is-selected {
  background: var(--primary-start, #2f6bff);
  color: var(--primary-text, #fff);
}

.secondary-button {
  background: var(--secondary-bg);
  color: var(--secondary-text);
}

.secondary-button:hover {
  background: color-mix(in srgb, var(--secondary-bg) 82%, var(--brand) 18%);
  opacity: 1;
}

.ghost-button {
  background: var(--ghost-bg);
  color: var(--ghost-text);
  border: 1px solid var(--line-strong);
}

.ghost-button:hover {
  background: var(--row-hover-bg);
  border-color: var(--line-strong);
  opacity: 1;
}

.danger-button {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.danger-button:hover {
  background: color-mix(in srgb, var(--danger-bg) 78%, var(--danger) 22%);
  opacity: 1;
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.ghost-button:focus-visible,
.danger-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.view-switch-button:hover,
.language-button:hover {
  background: var(--row-hover-bg);
  opacity: 1;
}

.view-switch-button.is-active:hover,
.language-button.is-active:hover {
  background: var(--switch-active-bg);
}

.small-button {
  padding: 8px 12px;
  font-size: 0.86rem;
}

.status-banner {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

.status-banner[data-type="success"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.status-banner[data-type="error"] {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.form-error,
.form-success {
  margin: 0 0 4px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.84rem;
}

.form-error {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.form-success {
  background: var(--success-bg);
  color: var(--success-text);
}

.global-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 2000;
  max-width: min(420px, 90vw);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

.global-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.global-toast[data-type="error"] {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-color: transparent;
}

.global-toast[data-type="success"] {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: transparent;
}

.settings-panel {
  display: grid;
  gap: 18px;
}

.settings-modal-panel {
  max-width: 980px;
  margin: 0 auto;
}

.settings-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.settings-tab {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.settings-tab.is-active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  font-weight: 700;
}

[data-theme="dark"] .settings-tab.is-active {
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08);
}

/* Ohne diese Regel zeichnet der Browser bei Klick/Fokus seinen eigenen,
   deutlich zu großen ovalen Standard-Fokusring über den Tab – das sah wie
   ein kaputter blauer Fleck hinter dem Tab-Label aus. */
.settings-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.settings-panel-body {
  display: grid;
  gap: 18px;
}

.settings-trigger {
  white-space: nowrap;
}

.settings-section {
  display: grid;
  gap: 12px;
}

.settings-admin-form {
  gap: 16px;
}

.settings-admin-defaults-form {
  display: grid;
  gap: 16px;
}

.settings-admin-block {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: calc(var(--radius-lg) - 6px);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.settings-block-head {
  display: grid;
  gap: 4px;
}

.settings-block-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.admin-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-rule-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: calc(var(--radius-lg) - 6px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.admin-rule-card-head {
  display: grid;
  gap: 6px;
}

.admin-rule-card-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.admin-rule-card-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-rule-form {
  display: grid;
  gap: 12px;
}

.admin-rule-list {
  display: grid;
  gap: 10px;
}

.admin-rule-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.admin-rule-item > div {
  display: grid;
  gap: 4px;
}

.admin-rule-item strong {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.admin-rule-item span,
.admin-rule-item small {
  color: var(--muted);
  line-height: 1.4;
}

.admin-rule-color {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.admin-rule-color span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  flex: 0 0 12px;
}

.empty-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
  text-align: left;
}

.empty-card strong {
  font-size: 0.94rem;
  letter-spacing: -0.02em;
}

.empty-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.utility-panel-stack {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.invite-panel,
.user-form {
  display: grid;
  gap: 16px;
}

.invite-panel {
  width: min(100%, 920px);
  margin: 0 auto;
  display: grid;
  gap: 22px;
  padding: 34px 28px 28px;
}

.team-directory-panel {
  width: min(100%, 780px);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 34px 28px 28px;
}

.team-directory-panel.is-full-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.team-directory-panel.is-full-page .panel-head > div {
  max-width: none;
}

.invite-panel .panel-head > div,
.team-directory-panel .panel-head > div {
  max-width: 44rem;
}

.invite-panel .panel-head,
.team-directory-panel .panel-head {
  margin: 0;
  padding-top: 2px;
}

.invite-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.invite-panel-form,
.invite-panel-list {
  min-width: 0;
}

.invite-panel-surface,
.team-directory-summary {
  padding: 22px;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.team-directory-summary {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  align-self: start;
}

.invite-panel-form {
  display: grid;
  gap: 16px;
}

.invite-panel-list {
  gap: 14px;
}

.invite-panel-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.invite-panel-list-head small,
.team-directory-count {
  color: var(--muted);
  font-size: 0.88rem;
}

.settings-section-title {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.theme-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theme-option-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: none;
}

.theme-option-card.is-active {
  border-color: var(--calendar-selected-border);
  background: var(--calendar-selected-bg);
  box-shadow: var(--soft-hover-shadow);
}

.theme-option-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.theme-option-card strong {
  font-size: 0.96rem;
  letter-spacing: -0.02em;
}

.theme-option-card small {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
}

.theme-option-preview {
  width: 100%;
  height: 74px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.theme-option-preview-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    linear-gradient(180deg, #f6f7fb 0%, #eef2f7 100%);
}

.theme-option-preview-ember {
  background:
    linear-gradient(180deg, rgba(20, 12, 8, 0.24), rgba(20, 12, 8, 0.24)),
    linear-gradient(180deg, #2c1b12 0%, #140d0a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 105, 0.12);
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.selection-grid,
.invite-link-list {
  display: grid;
  gap: 10px;
}

.selection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invite-link-list {
  grid-template-columns: 1fr;
}

.checkbox-card {
  flex-direction: row;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
}

.checkbox-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.checkbox-card span {
  display: grid;
  gap: 3px;
}

.checkbox-card strong {
  font-size: 0.94rem;
}

.checkbox-card small {
  color: var(--muted);
  font-size: 0.84rem;
}

.invite-link-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  min-width: 0;
}

.invite-link-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.invite-link-role {
  display: grid;
  gap: 4px;
}

.invite-link-card strong {
  font-size: 0.96rem;
  letter-spacing: -0.02em;
}

.invite-link-card small {
  color: var(--muted);
}

.invite-link-pill,
.team-directory-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
}

.invite-link-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invite-link-facts span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
}

.invite-link-url {
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--page);
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
}

.invite-empty-card {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.93rem;
}

.login-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.login-note a {
  color: var(--text);
  text-decoration: none;
}

.login-note a:hover {
  text-decoration: underline;
}

/* ── Wochen-Zeiterfassung ───────────────────────────────────────────────── */

.week-entry-form {
  /* --muted erreicht auf den gedaempften Flaechen der Tabelle keine 4.5:1
     (4.09-4.47 hell, 3.54 dunkel). Diese Abstufung bleibt sekundaer, liegt
     aber auf allen hier verwendeten Flaechen ueber 5:1. */
  --week-muted-strong: #5B6472;
  --week-columns: minmax(190px, 226px) 118px 118px 96px minmax(150px, 1fr) 104px;
  --week-gutter: 18px;
  /* Die Tabelle bricht nach ihrer eigenen Breite um, nicht nach der des
     Fensters – links steht die Navigation, rechts die Seitenspalte. */
  container-type: inline-size;
  container-name: weekform;
  display: grid;
  gap: 18px;
}

:root[data-theme="ember"] .week-entry-form {
  --week-muted-strong: #9A9A9A;
}

.week-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.week-form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.week-form-heading h2 {
  margin: 0;
}

.week-form-range {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 0;
  font-size: 0.92rem;
}

.week-form-range-week {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.week-form-range-dates {
  color: var(--week-muted-strong);
  font-variant-numeric: tabular-nums;
}

.week-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Wochenschritt: ◀ Woche ▶ als eine zusammenhaengende Einheit. */
.week-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  overflow: hidden;
}

.week-step {
  display: grid;
  place-items: center;
  width: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--week-muted-strong);
  font-size: 1rem;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.week-step:hover {
  opacity: 1;
  background: var(--row-hover-bg);
  color: var(--text);
}

.week-step:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: -2px;
}

.week-stepper-input {
  display: block;
  border-inline: 1px solid var(--line);
}

.week-stepper-input input {
  width: 100%;
  min-width: 150px;
  border: 0;
  border-radius: 0;
  padding: 8px 10px;
  background: transparent;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.week-stepper-input input:focus {
  box-shadow: none;
  background: var(--row-hover-bg);
}

.week-chip-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ghost-bg);
  color: var(--ghost-text);
  font-size: 0.87rem;
  font-weight: 600;
}

.week-chip-button:hover:not(:disabled) {
  opacity: 1;
  border-color: var(--line-strong);
  background: var(--row-hover-bg);
}

.week-chip-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.week-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 360px);
  gap: 12px;
}

/* ── Fortschritt gegen das Wochensoll ───────────────────────────────────── */

.week-progress {
  display: grid;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
}

.week-progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.week-progress-readout {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.week-progress-readout strong {
  font-size: 1.28rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.week-progress-readout span {
  color: var(--week-muted-strong);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.week-progress-delta {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--week-muted-strong);
  font-size: 0.8rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

.week-progress.is-reached .week-progress-delta {
  background: var(--success-bg);
  color: var(--success-text);
}

.week-progress.is-over .week-progress-delta {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.week-progress {
  --week-over-fill: #D97706;
}

:root[data-theme="ember"] .week-progress {
  --week-over-fill: #FBBF24;
}

.week-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.week-progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}

.week-progress.is-reached .week-progress-fill {
  background: var(--brand-deep);
}

.week-progress.is-over .week-progress-fill {
  background: var(--week-over-fill);
}

.week-progress.has-no-target .week-progress-readout span {
  font-size: 0.86rem;
}

/* ── Schnellaktionen ────────────────────────────────────────────────────── */

.week-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.week-quick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
}

.week-quick i {
  color: var(--muted);
  font-size: 1rem;
  transition: color 140ms ease;
}

.week-quick:hover {
  opacity: 1;
  border-color: var(--line-strong);
  background: var(--row-hover-bg);
}

.week-quick:hover i {
  color: var(--brand);
}

.week-quick:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
}

/* ── Wochentabelle ──────────────────────────────────────────────────────── */

.week-grid {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.week-grid-head {
  display: grid;
  grid-template-columns: var(--week-columns);
  gap: 12px;
  align-items: center;
  padding: 10px var(--week-gutter);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-soft);
  color: var(--week-muted-strong);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-grid-head > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-grid-head-duration {
  text-align: right;
}

.week-days {
  display: block;
}

.week-row {
  display: grid;
  grid-template-columns: var(--week-columns);
  gap: 12px;
  align-items: center;
  padding: 11px var(--week-gutter);
  border-top: 1px solid var(--line);
  background: var(--surface);
  transition:
    background-color 160ms ease,
    opacity 160ms ease;
}

.week-row:first-child {
  border-top: 0;
}

.week-row:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.week-row:not(.is-inactive):hover {
  background: var(--row-hover-bg);
}

.week-row.is-today {
  background: var(--calendar-selected-bg);
}

.week-row.has-rule {
  background: var(--calendar-selected-bg);
}

.week-row.has-custom-color {
  background: var(--calendar-rule-bg, var(--surface-muted));
}

/* Freie Tage schrumpfen auf eine Zeile, statt sieben gleich hohe Bloecke zu
   zeigen – der Blick bleibt bei den Tagen, die wirklich erfasst sind. */
.week-row.is-inactive {
  grid-template-columns: minmax(196px, 232px) minmax(0, 1fr);
  padding-block: 9px;
  background: var(--surface-soft);
  color: var(--muted);
}

.week-row.is-inactive.is-weekend {
  background: var(--calendar-day-outside-bg);
}

.week-row.is-inactive .week-field,
.week-row.is-inactive .week-row-duration,
.week-row.is-inactive .week-rule-note {
  display: none;
}

.week-row:not(.is-inactive) .week-row-idle {
  display: none;
}

.week-row-idle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--week-muted-strong);
  font-size: 0.87rem;
}

.week-row-idle-action {
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--week-muted-strong);
  font-size: 0.85rem;
  font-weight: 650;
  transition: color 140ms ease;
}

.week-row:hover .week-row-idle-action,
.week-row-idle-action:focus-visible {
  color: var(--brand);
}

.week-row-idle-action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.week-row-day {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Echter Schalter statt nackter Checkbox. */
.week-switch {
  position: relative;
  flex: none;
  display: inline-flex;
  cursor: pointer;
}

.week-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.week-switch input:disabled {
  cursor: default;
}

.week-switch-track {
  display: block;
  width: 36px;
  height: 21px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.week-switch-thumb {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.week-switch input:checked + .week-switch-track {
  background: var(--brand);
  border-color: var(--brand);
}

.week-switch input:checked + .week-switch-track .week-switch-thumb {
  transform: translateX(15px);
}

.week-switch input:focus-visible + .week-switch-track {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
}

.week-switch input:disabled + .week-switch-track {
  opacity: 0.45;
}

.week-day {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.week-day strong {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}

.week-day span {
  color: var(--week-muted-strong);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.week-day-flags {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.week-day-flags:empty {
  display: none;
}

.week-flag {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.week-flag.is-today {
  background: var(--pill-bg);
  color: var(--pill-text);
}

.week-flag.is-new {
  background: var(--success-bg);
  color: var(--success-text);
}

/* Ein abgewaehlter Tag ist nicht "neu" – die Markierung wuerde in Ruhe stehen
   bleiben, obwohl nichts mehr gespeichert wird. */
.week-row.is-inactive .week-flag.is-new {
  display: none;
}

.week-flag.is-rule {
  background: var(--calendar-rule-bg, var(--surface-muted));
  color: var(--calendar-rule-accent, var(--muted));
}

.week-field {
  min-width: 0;
  display: block;
}

/* Auf grossen Screens traegt die Kopfzeile die Beschriftung – die Labels in
   den Zeilen erscheinen erst, wenn die Tabelle zu Karten umbricht. */
.week-field-label {
  display: none;
}

.week-field input {
  min-height: 40px;
  padding: 9px 11px;
  background: var(--surface-strong);
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}

.week-row:not(.is-inactive):hover .week-field input {
  background: var(--surface);
}

.week-field-note input {
  min-width: 0;
  font-variant-numeric: normal;
}

.week-break-input {
  position: relative;
  display: block;
}

.week-break-input input {
  padding-right: 40px;
  /* Die Spinner-Pfeile wuerden mit dem Einheiten-Suffix kollidieren. */
  appearance: textfield;
  -moz-appearance: textfield;
}

.week-break-input input::-webkit-outer-spin-button,
.week-break-input input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.week-break-input em {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  color: var(--week-muted-strong);
  font-size: 0.78rem;
  font-style: normal;
  pointer-events: none;
}

.week-row.is-inactive .week-break-input em {
  display: none;
}

.week-row-duration {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.week-row-duration strong {
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.week-rule-note {
  grid-column: 1 / -1;
  color: var(--week-muted-strong);
  font-size: 0.78rem;
  line-height: 1.45;
}

.week-helper {
  margin: 0;
  color: var(--week-muted-strong);
  font-size: 0.87rem;
  line-height: 1.55;
}

/* ── Speicherleiste ─────────────────────────────────────────────────────── */

.week-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.week-form-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--week-muted-strong);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.week-form-summary strong {
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.week-form-summary-dot {
  color: var(--line-strong);
}

.week-form-footer .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
}

/* ── Planungsregeln ─────────────────────────────────────────────────────── */

.week-rule-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.week-rule-pill {
  display: inline-grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-style: normal;
}

.week-rule-pill strong {
  font-size: 0.8rem;
  letter-spacing: -0.01em;
}

.week-rule-pill em {
  color: var(--week-muted-strong);
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.45;
}

.week-rule-pill.is-holiday,
.calendar-rule-callout.is-holiday,
.calendar-day-flag.is-holiday {
  background: rgba(46, 155, 219, 0.1);
  border-color: rgba(46, 155, 219, 0.24);
  color: #1f4f7a;
}

:root[data-theme="ember"] .week-rule-pill.is-holiday,
:root[data-theme="ember"] .calendar-rule-callout.is-holiday,
:root[data-theme="ember"] .calendar-day-flag.is-holiday {
  background: rgba(255, 156, 80, 0.14);
  border-color: rgba(255, 156, 80, 0.26);
  color: #ffd5b0;
}

.week-rule-pill.has-custom-color,
.calendar-day-flag.has-custom-color,
.calendar-rule-callout.has-custom-color {
  background: var(--calendar-rule-bg, var(--surface-soft));
  border-color: var(--calendar-rule-border, var(--line));
  color: var(--calendar-rule-accent, inherit);
}

/* ── Umbruch: Tabelle wird zur Karte ────────────────────────────────────── */

@container weekform (max-width: 880px) {
  .week-grid {
    --week-columns: minmax(160px, 190px) 104px 104px 84px minmax(104px, 1fr) 92px;
    --week-gutter: 13px;
  }

  .week-field input {
    padding: 9px 8px;
    font-size: 0.9rem;
  }
}

@container weekform (max-width: 700px) {
  .week-grid-head {
    display: none;
  }

  .week-row,
  .week-row.is-inactive {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px var(--week-gutter);
  }

  .week-row:not(.is-inactive) {
    grid-template-areas:
      "day day"
      "start end"
      "break note"
      "duration duration";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .week-row-day {
    grid-area: day;
  }

  .week-row:not(.is-inactive) .week-field:nth-of-type(1) {
    grid-area: start;
  }

  .week-row:not(.is-inactive) .week-field:nth-of-type(2) {
    grid-area: end;
  }

  .week-field-break {
    grid-area: break;
  }

  .week-field-note {
    grid-area: note;
  }

  .week-row-duration {
    grid-area: duration;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    text-align: left;
  }

  .week-row-duration::before {
    content: attr(data-duration-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Ohne Kopfzeile brauchen die Felder ihre eigenen Beschriftungen. */
  .week-field {
    display: grid;
    gap: 5px;
  }

  .week-field-label {
    display: block;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

}

@container weekform (max-width: 470px) {
  .week-form-head {
    flex-direction: column;
    align-items: stretch;
  }

  .week-head-actions {
    justify-content: flex-start;
  }

  .week-stepper {
    flex: 1 1 auto;
  }

  .week-stepper-input input {
    min-width: 0;
  }

  .week-row:not(.is-inactive) {
    grid-template-areas:
      "day"
      "start"
      "end"
      "break"
      "note"
      "duration";
    grid-template-columns: minmax(0, 1fr);
  }

  .week-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .week-form-footer .primary-button {
    justify-content: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .week-progress-fill,
  .week-switch-thumb {
    transition-duration: 1ms;
  }
}

/* Wird noch vom Export-Panel genutzt (.export-week-range-card). */
.week-range-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.week-range-card span {
  color: var(--muted);
  font-size: 0.85rem;
}

.week-range-card strong {
  letter-spacing: -0.02em;
}

.workspace-shell {
  display: grid;
  gap: 18px;
}

.workspace-shell-manager {
  gap: 20px;
}

.workspace-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
  gap: 16px;
}

.workspace-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.workspace-heading h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}

.workspace-heading p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.workspace-tools {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
}

.role-pill {
  padding: 5px 12px;
  border-radius: 7px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.action-menu-shell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 20;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ghost-bg);
  color: var(--ghost-text);
  box-shadow: var(--shadow);
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.icon-button:hover {
  border-color: var(--line-strong);
  box-shadow: var(--soft-hover-shadow);
}

.action-menu-toggle.is-open {
  border-color: var(--calendar-selected-border);
  background: var(--surface-soft);
  box-shadow: var(--soft-hover-shadow);
}

.action-menu-toggle span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.action-menu-toggle.is-open span:nth-child(1) {
  transform: translateY(-1px) scale(1.04);
}

.action-menu-toggle.is-open span:nth-child(2) {
  opacity: 0.72;
}

.action-menu-toggle.is-open span:nth-child(3) {
  transform: translateY(1px) scale(1.04);
}

.action-menu-popover {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.action-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  letter-spacing: -0.01em;
  animation: menu-rollout 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(20ms + (var(--menu-index, 0) * 36ms));
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.action-menu-item:hover {
  border-color: var(--calendar-selected-border);
  box-shadow: var(--soft-hover-shadow);
}

.action-menu-item.is-danger {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.utility-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.utility-drawer-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.utility-drawer-backdrop:hover {
  transform: none;
}

/* Werkzeuge oeffnen mittig als Dialog. Vorher fuhren sie rechts als Schublade
   ein, was den Blick aus der Seite herauszog und die Liste dahinter verdeckte. */
.utility-drawer-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  pointer-events: auto;
  display: flex;
}

.utility-drawer-frame {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.utility-drawer-content {
  min-height: 0;
  display: flex;
}

.utility-drawer-sheet.is-team-drawer {
  width: min(760px, calc(100vw - 32px));
}

.utility-drawer-sheet.is-export-drawer {
  width: min(430px, calc(100vw - 32px));
}

.utility-drawer-sheet.is-settings-drawer {
  width: min(980px, calc(100vw - 40px));
}

.utility-drawer-sheet .panel {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 28px;
  border-radius: 30px;
  margin: 0;
}

.utility-drawer-sheet .panel:hover {
  transform: none;
}

.utility-drawer-sheet .panel-head > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.utility-drawer-sheet .invite-panel,
.utility-drawer-sheet .team-directory-panel,
.utility-drawer-sheet .user-form,
.utility-drawer-sheet .settings-panel,
.utility-drawer-sheet .export-week-panel {
  width: 100%;
  max-width: none;
  padding: 32px 26px 26px;
}

.utility-drawer-sheet.is-settings-drawer .utility-drawer-nav {
  display: none;
}

.utility-drawer-sheet.is-settings-drawer .utility-drawer-frame {
  grid-template-rows: minmax(0, 1fr);
}

.utility-drawer-sheet.is-settings-drawer .panel {
  height: auto;
  max-height: calc(100vh - 40px);
  padding: 30px;
}

.export-week-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.export-week-stack {
  display: grid;
  gap: 14px;
}

.export-week-range-card {
  min-height: 0;
}

.export-week-range-card small {
  color: var(--muted);
  font-size: 0.84rem;
}

.stats-grid,
.tools-grid,
.main-grid {
  display: grid;
  gap: 16px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card {
  padding: 22px 22px 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Stundensaldo: Plus und Minus sollen ohne Lesen erkennbar sein. Die Farbe
   traegt die Aussage nicht allein – davor steht immer ein + oder −. */
.stat-card.is-positive strong { color: var(--saldo-plus); }
.stat-card.is-negative strong { color: var(--danger); }

.stat-card span {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: clamp(1.65rem, 2.5vw, 2.3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.main-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.55fr);
  align-items: start;
}

.tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.manager-tools-stack {
  display: grid;
  gap: 16px;
}

.manager-dashboard-frame {
  display: grid;
  grid-template-columns: minmax(208px, 244px) minmax(0, 1fr);
  gap: 0 32px;
  align-items: start;
}

.manager-dashboard-frame.is-sidebar-compact {
  grid-template-columns: minmax(188px, 212px) minmax(0, 1fr);
}

.manager-dashboard-frame.is-week-focus {
  grid-template-columns: minmax(132px, 156px) minmax(0, 1fr);
}

.manager-dashboard-frame.is-week-focus .manager-overview-card,
.manager-dashboard-frame.is-week-focus .filter-card {
  padding: 16px;
}

.manager-dashboard-frame.is-week-focus .manager-panel-copy p,
.manager-dashboard-frame.is-week-focus .filter-card .panel-head p {
  display: none;
  font-size: 0.9rem;
  line-height: 1.45;
}

.manager-dashboard-frame.is-week-focus .manager-panel-copy h2 {
  font-size: 0.98rem;
  line-height: 1.1;
}

.manager-dashboard-frame.is-week-focus .manager-overview-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.manager-dashboard-frame.is-week-focus .manager-overview-metric {
  padding: 10px 11px;
}

.manager-dashboard-frame.is-week-focus .manager-overview-metric-wide {
  display: none;
}

.manager-dashboard-frame.is-week-focus .manager-overview-metric strong {
  font-size: 0.94rem;
}

.manager-dashboard-frame.is-week-focus .manager-preview-chip {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.72rem;
}

.manager-dashboard-frame.is-week-focus .icon-only-button.panel-toggle-button {
  min-width: 34px;
  min-height: 34px;
}

.manager-dashboard-frame.is-week-focus .filter-card .compact-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.manager-dashboard-frame.is-week-focus .manager-overview-card,
.manager-dashboard-frame.is-week-focus .filter-card {
  border-radius: 24px;
}

.manager-dashboard-frame.is-week-focus .manager-panel-preview {
  display: grid;
  gap: 6px;
}

.manager-side-stack {
  display: grid;
  gap: 16px;
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
}

.manager-main-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.plan-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.manager-main-stack-full {
  grid-column: 1 / -1;
}

.manager-week-focus-stack {
  gap: 14px;
}

.week-focus-filter-bar {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.week-focus-filter-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.week-focus-filter-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}

.week-focus-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.week-focus-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.week-focus-filter-toggle {
  flex: 0 0 auto;
}

.week-focus-filter-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.week-focus-filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.manager-overview-card {
  padding: 22px;
}

.manager-collapsible-panel.is-collapsed {
  gap: 10px;
}

.manager-collapsible-panel.is-collapsed .panel-head {
  margin-bottom: 0;
}

.manager-panel-copy {
  min-width: 0;
}

.icon-only-button.panel-toggle-button {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
}

.manager-panel-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.manager-preview-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.84rem;
}

.manager-overview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manager-overview-metric {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--row-bg);
}

.manager-overview-metric-wide {
  grid-column: 1 / -1;
}

.manager-overview-metric span {
  color: var(--muted);
  font-size: 0.82rem;
}

.manager-overview-metric strong {
  font-size: 1.08rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.team-directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.team-member-card {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) minmax(220px, 1.8fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(110px, 0.8fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  min-height: auto;
  width: 100%;
}

.team-member-primary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-member-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--text);
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.team-member-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.team-member-copy strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.team-member-field span {
  color: var(--muted);
  font-size: 0.72rem;
}

.team-member-field strong {
  font-size: 0.86rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-role {
  padding: 7px 10px;
  font-size: 0.78rem;
  justify-self: end;
}

.team-member-actions {
  display: flex;
  justify-content: flex-end;
}

.manager-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.employee-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.78fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.panel-head-calendar,
.panel-head-calendar-detail {
  align-items: center;
}

.calendar-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.calendar-grid-shell {
  display: grid;
  gap: 0;
  min-width: 0;
}

.calendar-month-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 0.92rem;
  font-weight: 600;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-weekdays {
  margin-bottom: 10px;
}

.calendar-weekdays span {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.calendar-day-button {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--calendar-day-bg);
  color: var(--text);
  box-shadow: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.calendar-day-card {
  position: relative;
}

.calendar-day-card .calendar-day-button {
  width: 100%;
  height: 100%;
}

.calendar-day-tools {
  position: absolute;
  top: -8px;
  right: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-color-picker,
.calendar-color-clear {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--hover-shadow);
}

:root[data-theme="ember"] .calendar-color-picker,
:root[data-theme="ember"] .calendar-color-clear {
  background: rgba(41, 26, 17, 0.92);
}

.calendar-color-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.calendar-color-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.calendar-color-swatch {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--calendar-picker-color, #5a9cf8);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.calendar-color-picker.is-empty .calendar-color-swatch {
  background: var(--row-bg);
}

.calendar-color-picker.is-empty .calendar-color-swatch::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: rgba(79, 94, 117, 0.42);
}

.calendar-color-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.calendar-day-button:hover {
  border-color: var(--calendar-selected-border);
  background: var(--surface);
  box-shadow: var(--soft-hover-shadow);
}

.calendar-day-button.is-selected {
  border-color: var(--calendar-selected-border);
  background: var(--calendar-selected-bg);
  box-shadow: var(--selected-shadow);
}

.calendar-day-button.has-custom-color {
  border-color: var(--calendar-rule-border, var(--line));
  background: var(--calendar-rule-bg, var(--calendar-day-bg));
}

.calendar-day-button.has-custom-color:hover {
  background: var(--calendar-rule-bg-strong, var(--surface));
  border-color: var(--calendar-rule-border, var(--calendar-selected-border));
}

.calendar-day-button.has-custom-color.is-selected {
  background: var(--calendar-rule-bg-strong, var(--calendar-selected-bg));
  border-color: var(--calendar-rule-border, var(--calendar-selected-border));
}

.calendar-day-button.is-today .calendar-day-number {
  color: var(--brand);
}

.calendar-day-button.is-outside-month {
  opacity: 0.56;
  background: var(--calendar-day-outside-bg);
}

.calendar-day-number {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.calendar-day-count {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
}

.calendar-day-count strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.calendar-day-count em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.76rem;
  line-height: 1.2;
}

.calendar-day-flag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.calendar-rule-callout {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 13px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.calendar-rule-callout strong {
  font-size: 0.88rem;
  letter-spacing: -0.02em;
}

.calendar-rule-callout span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.attendance-columns,
.attendance-column,
.attendance-list {
  display: grid;
  gap: 12px;
}

.attendance-columns {
  gap: 18px;
}

.attendance-column {
  align-content: start;
  min-height: 0;
}

.attendance-column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.attendance-column-head h3 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.attendance-count-pill {
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.attendance-list {
  max-height: min(34vh, 320px);
  overflow-y: auto;
  padding-right: 4px;
}

.attendance-item {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.attendance-item strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.attendance-item span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.statistics-shell,
.statistics-kpi-grid,
.statistics-chart-grid,
.statistics-bars,
.statistics-day-list,
.statistics-table {
  display: grid;
  gap: 16px;
}

.statistics-intro-card,
.statistics-filter-card {
  padding: 22px;
}

.statistics-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.statistics-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.statistics-kpi-card,
.statistics-panel {
  padding: 22px;
}

.statistics-kpi-card strong {
  display: block;
  margin: 10px 0 6px;
  font-size: clamp(1.55rem, 2.1vw, 2.1rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.statistics-kpi-card p {
  margin: 0;
}

.statistics-bar-row {
  display: grid;
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.statistics-bar-row-user {
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) auto;
}

.statistics-bar-meta {
  display: grid;
  gap: 4px;
}

.statistics-bar-meta strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.statistics-bar-meta span {
  color: var(--muted);
  font-size: 0.82rem;
}

.statistics-bar-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

.statistics-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}

.statistics-bar-fill-accent {
  background: var(--brand-deep);
}

.statistics-bar-value {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.statistics-day-card,
.statistics-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.statistics-day-card strong,
.statistics-table-row strong {
  font-size: 0.96rem;
  letter-spacing: -0.02em;
}

.statistics-day-meta,
.statistics-table-row > div:first-child,
.statistics-table-values {
  display: grid;
  gap: 4px;
}

.statistics-day-meta span,
.statistics-table-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.statistics-table-values {
  justify-items: end;
  text-align: right;
}

.attendance-item-subtle {
  background: var(--surface-muted);
}

.side-stack {
  display: grid;
  gap: 16px;
}

.summary-list {
  display: grid;
  gap: 8px;
}

.summary-row,
.roster-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--row-bg);
  border: 1px solid var(--line);
  transition:
    transform 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.summary-row:hover,
.roster-item:hover {
  background: var(--row-hover-bg);
  border-color: var(--line-strong);
}

.summary-row.summary-row-highlight {
  background: var(--accent);
  border-color: var(--calendar-selected-border);
}

.absence-type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--muted);
}
.absence-type-dot--vacation  { background: #6366F1; }
.absence-type-dot--sick      { background: #EF4444; }
.absence-type-dot--training  { background: #10B981; }
.absence-type-dot--free      { background: #F59E0B; }
.absence-type-dot--maternity { background: #EC4899; }
.absence-type-dot--special_leave { background: #8B5CF6; }

.summary-row strong,
.roster-item strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-align: right;
}

.summary-email {
  font-size: 0.82rem !important;
  word-break: break-all;
}

.summary-row-icon {
  font-size: 0.9em;
  margin-right: 6px;
  opacity: 0.55;
  vertical-align: middle;
}

.summary-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.roster-item span,
.muted {
  color: var(--muted);
}

.mini-roster {
  display: grid;
  gap: 10px;
}

.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-width {
  grid-column: 1 / -1;
}

.button-row,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

th,
td {
  padding: 15px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

tbody tr:hover {
  background: var(--surface-soft);
}

tbody tr {
}

.print-sheet {
  display: none;
  margin-top: 4px;
  padding: 28px;
  background: white;
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.print-logo {
  width: 180px;
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
}

.print-logo-vamed {
  padding: 8px 12px;
  border-radius: 18px;
  background: #111827;
}

.print-meta {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.print-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.print-meta h2 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: -0.04em;
}

.print-meta p {
  margin: 0;
  max-width: 320px;
  color: var(--muted);
  line-height: 1.5;
}

.print-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}

.print-summary-card {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}

.print-summary-card span,
.print-summary-card small {
  display: block;
  color: var(--muted);
}

.print-summary-card span {
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.print-summary-card strong {
  display: block;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
}

.print-summary-card small {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.print-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.print-table th,
.print-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.print-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.print-table td strong,
.print-table td span {
  display: block;
}

.print-table td strong {
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.print-table td span {
  color: var(--muted);
  font-size: 0.84rem;
}

@keyframes menu-rollout {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.empty-state,
.error-card {
  text-align: center;
}

@media (max-width: 1080px) {
  .manager-dashboard-frame,
  .admin-rule-grid,
  .employee-calendar-layout,
  .export-week-stack,
  .invite-panel-layout,
  .login-shell,
  .manager-calendar-layout,
  .main-grid,
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statistics-chart-grid {
    grid-template-columns: 1fr;
  }

  .current-kpi-grid,
  .current-focus-grid,
  .current-done-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .current-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .week-plan-layout {
    grid-template-columns: 1fr;
  }

  .week-plan-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .week-day-card {
    min-height: 640px;
  }

  .week-range-card {
    grid-column: 1 / -1;
  }

  .print-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manager-side-stack {
    position: static;
  }

  .team-member-card {
    grid-template-columns: 1fr;
  }

  .team-member-role {
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .app-shell {
    width: min(100% - 18px, 100%);
    padding-top: 18px;
  }

  .app-shell[data-view="manager"] {
    width: min(100% - 18px, 100%);
  }

  .utility-drawer-sheet {
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .workspace-header {
    flex-direction: column;
    align-items: start;
  }

  .workspace-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .current-dashboard-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .current-dashboard-hero h2,
  .current-live-clock strong {
    font-size: 2.4rem;
  }

  .current-live-clock {
    justify-items: start;
  }

  .current-kpi-grid,
  .current-focus-grid,
  .current-done-strip {
    grid-template-columns: 1fr;
  }

  .brand-logo-group {
    gap: 14px;
    align-items: center;
  }

  .action-menu-shell,
  .action-menu-popover {
    justify-content: flex-start;
  }

  .week-head-actions {
    justify-content: flex-start;
  }

  .panel-head-calendar,
  .panel-head-calendar-detail,
  .calendar-nav {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .panel-head-calendar,
  .panel-head-calendar-detail {
    flex-direction: column;
  }

  .calendar-grid-shell {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 560px;
    gap: 8px;
  }

  .calendar-weekdays span {
    padding: 0 2px;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }

  .theme-options-grid {
    grid-template-columns: 1fr;
  }

  .statistics-kpi-grid {
    grid-template-columns: 1fr;
  }

  .statistics-bar-row,
  .statistics-bar-row-user {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .statistics-bar-value {
    justify-self: start;
  }

  .statistics-day-card,
  .statistics-table-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .statistics-table-values {
    justify-items: start;
    text-align: left;
  }

  .calendar-day-button {
    min-height: 82px;
    padding: 10px 9px;
    gap: 8px;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .week-plan-board,
  .week-plan-side-panel {
    padding: 18px;
  }

  .week-plan-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .week-plan-nav,
  .week-plan-toolbar-right {
    width: 100%;
  }

  .week-plan-toolbar-right {
    justify-content: flex-start;
  }

  .week-plan-range {
    min-width: 0;
    flex: 1 1 auto;
  }

  .week-plan-range strong {
    font-size: 1.24rem;
  }

  .week-plan-week-control {
    width: 100%;
    justify-content: space-between;
  }

  .week-plan-week-control input {
    min-width: 0;
    width: 100%;
    text-align: right;
  }

  .week-plan-side {
    grid-template-columns: 1fr;
  }

  .week-plan-capacity-grid {
    grid-template-columns: 1fr;
  }

  .week-plan-person-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .week-plan-person-meta {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .week-day-card {
    min-height: auto;
  }

  .week-day-card-head,
  .week-day-person-top {
    flex-direction: column;
    align-items: stretch;
  }

  .week-day-card-pills {
    justify-content: flex-start;
  }

  .week-day-person-meta {
    align-items: flex-start;
    text-align: left;
  }

  .calendar-day-tools {
    top: -6px;
    right: -2px;
    gap: 5px;
  }

  .calendar-color-picker,
  .calendar-color-clear {
    width: 18px;
    height: 18px;
  }

  .calendar-day-number {
    font-size: 0.98rem;
  }

  .calendar-day-count {
    gap: 1px;
    font-size: 0.7rem;
    line-height: 1.12;
  }

  .calendar-day-count strong {
    font-size: 0.92rem;
  }

  .calendar-day-count em {
    display: none;
  }

  .calendar-day-flag {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 0.6rem;
  }

  .manager-calendar-card,
  .calendar-detail-card {
    padding: 18px;
  }

  .calendar-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .calendar-nav .calendar-month-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .attendance-item {
    padding: 12px 13px;
  }

  .attendance-item strong {
    font-size: 0.92rem;
  }

  .attendance-item span {
    font-size: 0.82rem;
  }

  .attendance-list {
    max-height: min(28vh, 220px);
  }

  .calendar-rule-callout {
    margin-bottom: 12px;
    padding: 12px 13px;
  }

  .print-header,
  .print-meta {
    justify-items: start;
    text-align: left;
  }

  .print-summary {
    grid-template-columns: 1fr;
  }

  .manager-overview-list {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .compact-grid {
    grid-template-columns: 1fr;
  }

  .selection-grid {
    grid-template-columns: 1fr;
  }

  .team-member-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .week-toolbar {
    grid-template-columns: 1fr;
  }

  .login-form,
  .entry-form,
  .filter-card,
  .user-form,
  .roster-card,
  .summary-panel,
  .table-card,
  .empty-state,
  .error-card {
    padding: 18px;
  }

  table {
    min-width: 680px;
  }
}

.weekly-schedule-shell {
  display: grid;
  gap: 18px;
}

.planner-mode-panel {
  padding-bottom: 12px;
}

.planner-inline-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 48px;
}

.plan-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.plan-mode-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.plan-mode-button strong {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.plan-mode-button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--soft-hover-shadow);
}

.week-layout-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.week-layout-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.week-layout-button strong {
  font-size: 0.86rem;
  letter-spacing: -0.02em;
}

.week-layout-button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--soft-hover-shadow);
}

.employee-schedule-shell {
  display: grid;
  gap: 18px;
}

.weekly-planning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 18px;
  align-items: start;
}

.weekly-planning-main,
.weekly-capacity-panel {
  min-width: 0;
}

.weekly-capacity-panel {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 24px;
}

.weekly-capacity-card-shell {
  display: grid;
  gap: 16px;
}

.weekly-capacity-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.weekly-capacity-metric {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.weekly-capacity-metric span {
  color: var(--muted);
  font-size: 0.82rem;
}

.weekly-capacity-metric strong {
  font-size: 1.24rem;
  letter-spacing: -0.03em;
}

.weekly-capacity-metric.is-primary {
  background: color-mix(in srgb, var(--calendar-selected-bg) 88%, transparent);
}

.weekly-capacity-metric.is-success {
  background: color-mix(in srgb, #34d399 15%, var(--surface-soft));
}

.weekly-capacity-metric.is-warning {
  background: color-mix(in srgb, #f59e0b 14%, var(--surface-soft));
}

.weekly-task-assignment-form,
.weekly-capacity-list {
  display: grid;
  gap: 12px;
}

.weekly-capacity-open-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.weekly-task-assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.weekly-capacity-list-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.weekly-capacity-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.weekly-capacity-list-head div {
  display: grid;
  gap: 4px;
}

.weekly-capacity-list-head span,
.weekly-capacity-list-head em,
.weekly-capacity-list-values span {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
}

.weekly-capacity-list-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.weekly-planner-panel {
  display: grid;
  gap: 16px;
  padding-top: 18px;
}

.current-dashboard-shell {
  display: grid;
  gap: 16px;
}

.current-dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px;
  min-height: 178px;
  overflow: hidden;
  position: relative;
}

.current-dashboard-hero h2 {
  margin: 4px 0 8px;
  font-size: 3.6rem;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.current-dashboard-hero p {
  max-width: 56ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.current-live-clock {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 180px;
  position: relative;
  z-index: 1;
}

.current-live-clock span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.current-live-clock strong {
  color: var(--text);
  font-size: 3rem;
  letter-spacing: -0.07em;
  line-height: 1;
}

.current-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.current-kpi-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
}

.current-kpi-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.current-kpi-card strong {
  color: var(--text);
  font-size: 2.35rem;
  line-height: 1;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}

.current-kpi-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.current-kpi-card.is-success {
  border-color: rgba(22, 163, 74, 0.28);
}

.current-kpi-card.is-warning {
  border-color: rgba(245, 158, 11, 0.32);
}

.current-kpi-card.is-brand {
  border-color: var(--calendar-selected-border);
}

.current-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.current-focus-panel,
.current-done-panel,
.current-timeline-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.current-section-head,
.current-column-head div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.current-section-head h2,
.current-column-head h2 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
}

.current-section-head span,
.current-column-head span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 800;
}

.current-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.current-side-stack {
  display: grid;
  gap: 14px;
}

.current-dashboard-column {
  display: grid;
  gap: 14px;
  min-height: 260px;
  padding: 16px;
}

.current-person-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.current-person-list .empty-state {
  padding: 18px;
  min-height: 180px;
  align-content: center;
}

.current-person-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--planner-card-border, var(--line));
  background: var(--planner-card-bg, var(--surface-soft));
  box-shadow: var(--shadow);
  border-left: 4px solid var(--planner-card-accent, var(--brand));
  min-width: 0;
}

.current-person-card.is-success {
  border-left-color: #16a34a;
}

.current-person-card.is-warning {
  border-left-color: #f59e0b;
}

.current-person-card.is-muted {
  opacity: 0.82;
}

.current-person-card.is-live-only {
  border-style: dashed;
}

.current-person-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.current-person-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.current-person-copy strong,
.current-person-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.current-person-copy strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.current-person-copy span,
.current-person-details span,
.current-person-card em {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.current-person-details {
  display: grid;
  gap: 4px;
}

.current-person-details strong {
  color: var(--text);
}

.current-person-card em {
  display: inline-flex;
  justify-self: start;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font-style: normal;
  font-weight: 800;
}

:root[data-theme="ember"] .current-person-card em {
  background: rgba(255, 229, 204, 0.08);
}

.current-timeline-track {
  position: relative;
  min-height: 58px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 24.8%, var(--line) 25%, transparent 25.2%),
    linear-gradient(90deg, transparent 49.8%, var(--line) 50%, transparent 50.2%),
    linear-gradient(90deg, transparent 74.8%, var(--line) 75%, transparent 75.2%),
    var(--surface-soft);
  overflow: hidden;
}

.current-now-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text);
  z-index: 3;
}

.current-now-marker::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--text);
  transform: translateX(-50%);
}

.current-timeline-shift {
  position: absolute;
  top: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--planner-card-accent, var(--brand));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
}

.current-timeline-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.current-timeline-labels span:nth-child(n + 2) {
  text-align: center;
}

.current-timeline-labels span:last-child {
  text-align: right;
}

.current-done-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.weekly-planner-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.weekly-planner-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weekly-planner-nav strong {
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.weekly-planner-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weekly-planner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.week-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.week-plan-board,
.week-plan-side-panel {
  padding: 22px;
}

.week-plan-board {
  display: grid;
  gap: 18px;
}

.week-plan-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.week-plan-nav,
.week-plan-toolbar-right,
.week-plan-range {
  display: flex;
  align-items: center;
}

.week-plan-toolbar-right {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.week-plan-nav {
  gap: 10px;
}

.week-plan-range {
  gap: 12px;
  min-height: 48px;
  padding: 0 8px 0 4px;
}

.week-plan-range-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px solid var(--line);
}

.week-plan-range strong {
  font-size: 1.45rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.week-plan-week-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.week-plan-week-control input {
  min-width: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: none;
}

.week-plan-grid {
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: visible;
}

.week-plan-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.week-plan-summary-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
}

.week-plan-columns {
  display: grid;
  gap: 12px;
  align-items: start;
}

.week-day-card {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 680px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.week-day-card-head,
.week-day-card-title,
.week-day-card-pills,
.week-day-section-head,
.week-day-person-meta {
  display: flex;
}

.week-day-card-head,
.week-day-section-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.week-day-card-title {
  flex-direction: column;
  gap: 2px;
}

.week-day-card-title strong {
  font-size: 1.4rem;
  letter-spacing: -0.05em;
  line-height: 1;
}

.week-day-card-title span {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.week-day-card-title small {
  color: var(--muted);
  font-size: 0.82rem;
}

.week-day-card-pills {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.week-day-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.week-day-section {
  display: grid;
  gap: 12px;
}

.week-day-section.is-secondary {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.week-day-section-head h3 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.week-day-section-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.week-day-people-list {
  display: grid;
  gap: 9px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
  min-width: 0;
  align-content: start;
}

.week-day-person-row {
  display: grid;
  gap: 9px;
  padding: 11px;
  border-radius: 18px;
  border: 1px solid var(--planner-card-border, var(--line));
  background: var(--planner-card-bg, var(--surface-soft));
  box-shadow: var(--shadow);
  min-width: 0;
}

.week-day-person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--planner-card-border, var(--line));
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.week-day-person-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.week-day-person-copy strong {
  font-size: 0.96rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* In der Tagesspalte steht nur das Kuerzel – es darf nie umbrechen,
   sonst zieht ein langer Name die ganze Karte auseinander. */
.week-day-person-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--planner-card-border, var(--line));
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow-wrap: normal;
  justify-self: start;
}

:root[data-theme="ember"] .week-day-person-initials {
  background: rgba(255, 255, 255, 0.08);
}

.week-day-person-copy span,
.week-day-person-meta span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.week-day-person-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.week-day-person-meta {
  display: grid;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 3px;
  text-align: right;
  min-width: 72px;
}

.week-plan-board {
  max-width: none;
}

.week-plan-board .week-day-card {
  min-width: 0;
}

.week-plan-board-horizontal {
  min-width: 0;
}

.week-horizontal-shell {
  min-width: 0;
  max-height: min(72vh, 820px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-muted);
}

.week-horizontal-grid {
  display: grid;
  min-width: 1120px;
}

.week-horizontal-head,
.week-horizontal-person,
.week-horizontal-cell,
.week-horizontal-total {
  min-height: 72px;
  padding: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
}

.week-horizontal-person {
  padding-left: 16px;
}

:root[data-theme="ember"] .week-horizontal-head,
:root[data-theme="ember"] .week-horizontal-person,
:root[data-theme="ember"] .week-horizontal-cell,
:root[data-theme="ember"] .week-horizontal-total {
  background: rgba(44, 28, 19, 0.64);
}

.week-horizontal-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 64px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.week-horizontal-head strong {
  color: var(--text);
  font-size: 1.08rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.week-horizontal-head span {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}

.week-horizontal-head.is-person,
.week-horizontal-person {
  position: sticky;
  left: 0;
  z-index: 2;
  border-left: 0;
}

.week-horizontal-head.is-person {
  z-index: 4;
}

.week-horizontal-person {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: var(--planner-card-bg, var(--surface-strong));
}

.week-horizontal-person strong,
.week-horizontal-person span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-horizontal-person strong {
  font-size: 0.94rem;
  letter-spacing: -0.02em;
}

.week-horizontal-person span {
  color: var(--muted);
  font-size: 0.78rem;
}

.week-horizontal-cell {
  display: grid;
  align-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.45);
}

.week-horizontal-cell.has-shift {
  border-left: 4px solid var(--planner-card-accent, var(--brand));
  background: var(--planner-card-bg, var(--surface-soft));
}

.week-horizontal-cell.is-empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.week-horizontal-times {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.week-horizontal-times strong,
.week-horizontal-times span,
.week-horizontal-cell-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.week-horizontal-cell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.week-horizontal-cell-meta span {
  color: var(--muted);
  font-weight: 700;
}

.week-horizontal-total {
  display: grid;
  align-content: center;
  gap: 4px;
  background: var(--surface);
}

.week-horizontal-total strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.week-horizontal-total span {
  color: var(--muted);
  font-size: 0.78rem;
}

.week-horizontal-empty {
  grid-column: 1 / -1;
  padding: 18px;
}

.week-plan-board-compact {
  min-width: 0;
}

.week-compact-shell {
  min-width: 0;
  max-height: min(74vh, 860px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-muted);
}

.week-compact-grid {
  display: grid;
  min-width: 980px;
}

.week-compact-head,
.week-compact-person,
.week-compact-cell,
.week-compact-total {
  min-height: 36px;
  padding: 5px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
}

:root[data-theme="ember"] .week-compact-head,
:root[data-theme="ember"] .week-compact-person,
:root[data-theme="ember"] .week-compact-cell,
:root[data-theme="ember"] .week-compact-total {
  background: rgba(44, 28, 19, 0.62);
}

.week-compact-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.week-compact-head strong {
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: -0.04em;
}

.week-compact-head span {
  letter-spacing: 0;
  text-transform: none;
}

.week-compact-head.is-person,
.week-compact-person {
  position: sticky;
  left: 0;
  z-index: 2;
}

.week-compact-head.is-person {
  z-index: 4;
}

.week-compact-person {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  background: var(--planner-card-bg, var(--surface-strong));
}

.week-compact-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--planner-card-border, var(--line));
  background: rgba(255, 255, 255, 0.56);
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 800;
}

.week-compact-person strong,
.week-compact-person span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-compact-person strong {
  font-size: 0.76rem;
  letter-spacing: -0.02em;
}

.week-compact-person span {
  color: var(--muted);
  font-size: 0.62rem;
}

.week-compact-cell {
  display: grid;
  align-content: center;
  gap: 3px;
}

.week-compact-cell.has-shift {
  background: var(--planner-card-bg, var(--surface-soft));
}

.week-compact-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.week-compact-track span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--planner-card-accent, var(--brand));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32) inset;
}

.week-compact-cell small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-compact-cell.is-empty span {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
}

.week-compact-total {
  display: flex;
  align-items: center;
  background: var(--surface);
}

.week-compact-total strong {
  font-size: 0.72rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.week-day-person-meta strong {
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.week-day-person-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.week-day-person-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: var(--planner-card-accent, var(--brand));
}

.week-day-absent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.week-day-absent-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
}

button.week-day-absent-chip {
  cursor: pointer;
  font-family: inherit;
}

button.week-day-absent-chip:hover {
  border-color: rgba(96, 165, 250, 0.42);
  color: var(--text);
}

.week-day-absent-chip.is-more {
  font-weight: 700;
}

.week-missing-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(18px);
}

.week-missing-modal {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 44px));
  display: grid;
  gap: 18px;
  padding: 24px;
  overflow: auto;
}

.week-missing-head,
.week-missing-count,
.week-missing-person {
  display: flex;
  align-items: center;
}

.week-missing-head {
  justify-content: space-between;
  gap: 18px;
}

.week-missing-head h2 {
  margin: 4px 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.06em;
}

.week-missing-head p {
  margin: 0;
  color: var(--muted);
}

.week-missing-count {
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-soft);
}

.week-missing-count strong {
  font-size: 1.8rem;
  letter-spacing: -0.05em;
}

.week-missing-count span {
  color: var(--muted);
  font-weight: 800;
}

.week-missing-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.week-missing-person {
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--planner-card-border, var(--line));
  border-radius: 18px;
  background: var(--planner-card-bg, var(--accent));
}

.week-missing-person div {
  min-width: 0;
}

.week-missing-person strong,
.week-missing-person span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-missing-person span {
  color: var(--muted);
  font-size: 0.82rem;
}

.week-day-empty {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed var(--line-strong);
  background: rgba(148, 163, 184, 0.05);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.week-day-empty.is-small {
  padding: 10px 12px;
  font-size: 0.8rem;
}

.weekly-schedule-head {
  align-items: end;
}

.weekly-schedule-head-tools {
  display: flex;
  align-items: end;
  gap: 12px;
}

.weekly-schedule-week-picker {
  display: grid;
  gap: 6px;
  min-width: 200px;
}

.weekly-schedule-week-picker span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.weekly-schedule-summary-chips {
  flex-wrap: wrap;
}

.weekly-board-shell {
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.weekly-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.weekly-day-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 100%;
}

.weekly-day-header,
.weekly-block-head,
.weekly-person-head,
.weekly-task-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.weekly-day-header strong,
.weekly-block-head h3,
.weekly-person-head strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.weekly-day-header div,
.weekly-person-head div {
  display: grid;
  gap: 4px;
}

.weekly-day-header span,
.weekly-block-head span,
.weekly-person-head span,
.weekly-person-progress span,
.weekly-person-head em {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  font-style: normal;
}

.weekly-person-progress {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.08);
}

.weekly-person-progress strong {
  font-size: 0.84rem;
  letter-spacing: -0.02em;
}

.weekly-day-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
  border: 1px solid var(--line);
}

.weekly-unassigned-block,
.weekly-person-card,
.weekly-capacity-card {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 16px;
}

.weekly-person-card,
.weekly-unassigned-block {
  padding: 12px;
}

.weekly-task-dropzone,
.weekly-task-stack,
.weekly-people-stack,
.weekly-capacity-card {
  display: grid;
  gap: 10px;
}

.weekly-task-dropzone,
.weekly-person-card {
  min-height: 58px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.weekly-task-dropzone.is-drop-active,
.weekly-person-card.is-drop-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(90, 156, 248, 0.14);
}

:root[data-theme="ember"] .weekly-task-dropzone.is-drop-active,
:root[data-theme="ember"] .weekly-person-card.is-drop-active {
  box-shadow: 0 0 0 3px rgba(255, 156, 80, 0.16);
}

.weekly-capacity-card {
  padding: 10px;
}

.weekly-capacity-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.weekly-capacity-copy span,
.weekly-capacity-card small {
  color: var(--muted);
  font-size: 0.78rem;
}

.weekly-capacity-copy strong {
  font-size: 0.86rem;
}

.weekly-capacity-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.weekly-capacity-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.weekly-capacity-card.is-danger .weekly-capacity-bar span {
  background: #f97316;
}

.weekly-task-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--calendar-rule-bg, var(--surface));
  box-shadow: var(--shadow);
  cursor: grab;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.weekly-task-card[draggable="false"] {
  cursor: default;
}

.weekly-task-card:hover {
  box-shadow: var(--hover-shadow);
}

.weekly-task-card.is-dragging {
  opacity: 0.48;
}

.weekly-task-card strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.weekly-task-card-head {
  align-items: center;
}

.weekly-task-card-grip {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: -0.12em;
  flex: 0 0 auto;
  opacity: 0.7;
}

.weekly-task-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.weekly-task-card-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.weekly-task-card-duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.weekly-task-card span,
.weekly-task-card small {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.weekly-task-delete {
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  opacity: 0;
  transition: opacity 120ms;
}

.weekly-task-card:hover .weekly-task-delete,
.weekly-task-delete:focus-visible {
  opacity: 1;
}

.task-board-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 194px;
  gap: 12px;
  align-items: start;
}

.task-board-sidebar {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 20px;
}

.task-board-sidebar::-webkit-scrollbar {
  width: 8px;
}

.task-board-sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.task-board-card,
.task-board-main-card,
.task-board-pool-card {
  display: grid;
  gap: 12px;
}

.task-board-card {
  padding: 16px;
}

.task-board-section-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  flex-wrap: wrap;
}

.task-board-section-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-board-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.task-board-section-head h2 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
}

.task-board-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.task-capacity-chart-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  justify-items: center;
}

.task-capacity-donut {
  --task-utilization: 0;
  --task-free: 100;
  position: relative;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background:
    conic-gradient(
      #7f95ff 0 calc(var(--task-utilization) * 1%),
      #8dd9b3 calc(var(--task-utilization) * 1%) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.task-capacity-donut {
  margin-inline: 0;
}

.task-capacity-donut::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

:root[data-theme="ember"] .task-capacity-donut::after {
  background: rgba(43, 27, 17, 0.95);
}

.task-capacity-donut-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  z-index: 1;
}

.task-capacity-donut-inner strong {
  font-size: 1.95rem;
  letter-spacing: -0.06em;
}

.task-capacity-donut-inner span {
  color: var(--muted);
  font-size: 0.8rem;
}

.task-capacity-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}

.task-capacity-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.task-capacity-value span {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.3;
}

.task-capacity-value span.is-max {
  color: #5a9cf8;
}

.task-capacity-value span.is-planned {
  color: #7f95ff;
}

.task-capacity-value span.is-free {
  color: #47b881;
}

.task-capacity-value strong {
  font-size: 0.92rem;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.task-capacity-meter {
  display: grid;
  gap: 8px;
  padding-top: 0;
}

.task-capacity-meter-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.task-capacity-meter-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.task-capacity-meter-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.task-capacity-meter-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.task-capacity-meter-copy strong {
  font-size: 0.88rem;
}

.task-filters-stack {
  display: grid;
  gap: 14px;
}

.task-board-filter-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.task-filters-card {
  gap: 14px;
}

.task-board-inline-field,
.task-board-filter-group {
  display: grid;
  gap: 10px;
}

.task-board-inline-field span,
.task-board-filter-group > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.task-board-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-board-pill,
.task-board-view-button {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.task-board-pill.is-active,
.task-board-view-button.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--calendar-selected-bg) 92%, transparent);
  border-color: color-mix(in srgb, var(--calendar-selected-border) 75%, var(--line));
}

.task-board-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.task-board-status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, #34d399 10%, var(--surface-soft));
}

.task-board-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #47b881;
  box-shadow: 0 0 0 6px rgba(71, 184, 129, 0.12);
}

.task-board-status-pill strong {
  font-size: 0.82rem;
}

.task-board-main-card {
  min-width: 0;
  padding: 18px 20px;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - 112px);
  max-height: calc(100vh - 112px);
  overflow: hidden;
}

.task-employee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--planner-card-border, var(--line));
  background: rgba(255, 255, 255, 0.64);
  color: var(--text);
  font-size: 0.78rem;
  position: relative;
  overflow: hidden;
  font-weight: 700;
  flex: 0 0 auto;
}

.task-board-list-head {
  gap: 14px;
}

.task-board-list-head-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.task-board-search-inline {
  width: min(190px, 100%);
}

.task-board-list-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}

.task-board-table-head,
.task-board-row-main {
  display: grid;
  grid-template-columns: minmax(220px, 3.9fr) minmax(110px, 0.9fr) minmax(140px, 1.02fr) 76px;
  align-items: center;
  gap: 12px;
}

.task-board-table-head {
  padding: 0 16px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.task-board-list-rows {
  display: grid;
  gap: 12px;
  overflow-y: auto;
  align-content: start;
  min-height: 0;
}

.task-board-list-rows::-webkit-scrollbar {
  width: 8px;
}

.task-board-list-rows::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.task-board-row {
  display: grid;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.task-board-row.weekly-person-card {
  padding: 0;
  min-height: 104px;
}

.task-board-row.is-drop-active {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  box-shadow: 0 0 0 3px rgba(90, 156, 248, 0.12);
}

.task-board-row-main {
  min-height: 104px;
  padding: 18px 24px 18px 20px;
  align-items: center;
}

.task-board-row-person {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  align-self: center;
}

.task-board-row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: center;
  padding-top: 0;
}

.task-board-row-copy strong {
  font-size: 1.04rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.task-board-row-copy span,
.task-board-row-hours span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.34;
}

.task-board-row-utilization {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  align-self: center;
  padding-top: 0;
}

.task-board-row-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.task-board-row-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
}

.task-board-row.is-warm .task-board-row-progress span {
  background: #f59e0b;
}

.task-board-row.is-hot .task-board-row-progress span {
  background: var(--danger);
}

.task-board-row-utilization strong {
  font-size: 0.82rem;
  letter-spacing: -0.02em;
}

.task-board-row-hours {
  display: grid;
  gap: 5px;
  align-content: center;
  align-self: center;
  padding-top: 0;
}

.task-board-row-hours strong {
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.task-board-row-count {
  display: flex;
  justify-content: center;
}

.task-board-row-tail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  align-self: center;
  padding-top: 0;
}

.task-board-row-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.task-board-row-toggle {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  font-size: 0.82rem;
}

.task-board-row-detail {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.03);
}

.task-board-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(10px);
}

.task-board-detail-sheet {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.task-board-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.task-board-detail-person {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.task-board-detail-person-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-board-detail-person-copy strong {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.task-board-detail-person-copy span {
  color: var(--muted);
  font-size: 0.9rem;
}

.task-board-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.task-board-detail-metric {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.task-board-detail-metric span {
  color: var(--muted);
  font-size: 0.8rem;
}

.task-board-detail-metric strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.task-board-detail-progress {
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.task-board-detail-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
}

.task-board-row-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}

.task-board-row-detail-head strong {
  font-size: 0.88rem;
  letter-spacing: -0.02em;
}

.task-board-row-detail-head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.task-board-row-task-list {
  display: grid;
  gap: 8px;
}

.task-board-row-dropzone {
  margin-top: 4px;
}

.task-employee-empty {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  background: rgba(148, 163, 184, 0.04);
}

.task-employee-drop-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  margin-top: auto;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--line));
  color: var(--muted);
  background: rgba(90, 156, 248, 0.04);
  text-align: center;
  padding: 10px;
}

.task-employee-drop-hint span {
  font-size: 0.9rem;
  font-weight: 700;
}

.task-board-pool-card {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 20px;
  padding: 16px;
  max-height: calc(100vh - 112px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.task-board-pool-search {
  width: 100%;
}

.task-board-search {
  position: relative;
  display: block;
}

.task-board-search input {
  padding-right: 42px;
}

.task-board-search span {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.92rem;
}

.task-board-open-list {
  display: grid;
  gap: 8px;
  min-height: 150px;
  max-height: none;
  overflow-y: auto;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.task-board-create-toggle {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  font-size: 0.88rem;
}

.task-board-monday-sync-button {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  font-size: 0.82rem;
}

.task-board-composer {
  display: grid;
  gap: 14px;
}

.task-board-composer-head h3 {
  margin: 0;
  font-size: 1rem;
}

.task-board-composer-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.task-board-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-board-composer-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
}

.task-board-composer-modal {
  width: min(960px, calc(100vw - 40px));
  display: grid;
  gap: 16px;
  padding: 24px;
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.task-board-monday-overlay {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(14px);
}

.task-board-monday-modal {
  width: min(1040px, calc(100vw - 42px));
  max-height: calc(100vh - 54px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 24px;
}

.task-board-monday-head,
.task-board-monday-toolbar,
.task-board-monday-status-row,
.task-board-monday-actions,
.task-board-monday-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.task-board-monday-head h2,
.task-board-monday-preview-head h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
}

.task-board-monday-head p {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.task-board-monday-toolbar {
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-soft);
}

.task-board-monday-board-form,
.task-board-monday-filter-form {
  display: grid;
  gap: 10px;
  align-items: end;
}

.task-board-monday-board-form {
  grid-template-columns: minmax(190px, 240px) auto;
}

.task-board-monday-filter-form {
  grid-template-columns: minmax(170px, 210px) minmax(170px, 220px) auto;
}

.task-board-monday-board-form label,
.task-board-monday-filter-form label {
  display: grid;
  gap: 7px;
}

.task-board-monday-board-form span,
.task-board-monday-filter-form span,
.task-board-monday-summary-grid span,
.task-board-monday-preview-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-board-monday-status-row {
  justify-content: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(148, 163, 184, 0.06);
}

.task-board-monday-status-row strong {
  min-width: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.task-board-monday-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.task-board-monday-summary-grid article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
}

.task-board-monday-summary-grid strong {
  font-size: 1.15rem;
  letter-spacing: -0.04em;
}

.task-board-monday-actions {
  justify-content: flex-end;
}

.task-board-monday-preview {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-soft);
}

.task-board-monday-table-wrap {
  max-height: min(44vh, 460px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.task-board-monday-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

.task-board-monday-table th,
.task-board-monday-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 0.82rem;
}

.task-board-monday-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-board-monday-table tr:last-child td {
  border-bottom: 0;
}

.task-board-layout.is-day-mode {
  grid-template-columns: 268px minmax(0, 1fr) 246px;
}

.task-board-layout.is-day-mode .task-board-main-card {
  min-height: 100%;
}

.task-board-layout.is-day-mode .task-board-pool-card,
.task-board-layout.is-day-mode .task-board-sidebar {
  top: 20px;
}

.monday-sync-layout {
  display: grid;
  grid-template-columns: clamp(300px, 22vw, 360px) minmax(0, 1fr) clamp(280px, 20vw, 340px);
  gap: 22px;
  align-items: start;
}

.monday-sync-sidebar,
.monday-sync-sidebar-right,
.monday-sync-main {
  display: grid;
  gap: 18px;
}

.monday-sync-sidebar,
.monday-sync-sidebar-right {
  position: sticky;
  top: 24px;
}

.monday-sync-card {
  padding: 24px;
}

.monday-sync-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.monday-sync-card-head h2,
.monday-sync-structure-block h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.03em;
}

.monday-sync-card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.monday-sync-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.monday-sync-summary-card {
  padding: 18px 20px;
}

.monday-sync-summary-card span,
.monday-sync-summary-card small {
  display: block;
  color: var(--muted);
}

.monday-sync-summary-card span {
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.monday-sync-summary-card strong {
  display: block;
  font-size: 1.34rem;
  letter-spacing: -0.04em;
}

.monday-sync-summary-card small {
  margin-top: 8px;
  font-size: 0.78rem;
}

.monday-sync-connection-list {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.monday-sync-connection-list article {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.monday-sync-connection-list span,
.monday-sync-structure-item span {
  color: var(--muted);
  font-size: 0.82rem;
}

.monday-sync-connection-list strong,
.monday-sync-structure-item strong {
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.monday-sync-connection-message {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.monday-sync-board-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.monday-sync-board-form label {
  display: grid;
  gap: 8px;
}

.monday-sync-board-form span {
  color: var(--muted);
  font-size: 0.82rem;
}

.monday-sync-board-form small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.monday-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px);
  align-items: start;
  gap: 24px;
}

.monday-board-shell,
.monday-board-sidecard {
  padding: 24px;
}

.monday-board-shell {
  display: grid;
  gap: 20px;
}

.monday-board-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  flex-wrap: wrap;
}

.monday-board-title {
  display: grid;
  gap: 8px;
}

.monday-board-title h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: -0.04em;
}

.monday-board-title p {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  line-height: 1.55;
}

.monday-board-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.monday-board-toolbar-actions .monday-sync-open-board {
  width: auto;
}

.monday-board-meta-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.monday-board-meta-card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.monday-board-meta-card.is-wide {
  grid-column: span 2;
}

.monday-board-meta-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monday-board-meta-card strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.monday-board-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.monday-board-inline-form,
.monday-board-filter-form {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.monday-board-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.monday-board-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  border-top: 2px solid var(--accent, #3b82f6);
}

.monday-board-inline-form label,
.monday-board-filter-form label {
  display: grid;
  gap: 8px;
}

.monday-board-inline-form span,
.monday-board-filter-form span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monday-board-inline-form button,
.monday-board-filter-form button {
  align-self: end;
}

.monday-board-table-shell {
  display: grid;
  gap: 18px;
}

.monday-board-group {
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  overflow: hidden;
}

.monday-board-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.06);
}

.monday-board-group-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.monday-board-group-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.monday-board-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.monday-board-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
}

.monday-board-table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.04);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.monday-board-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 0.92rem;
}

.monday-board-table tbody tr:last-child td {
  border-bottom: 0;
}

.monday-board-table tbody tr:nth-child(even) td {
  background: rgba(148, 163, 184, 0.03);
}

.monday-board-table tbody tr:hover td {
  background: rgba(46, 155, 219, 0.06);
}

.monday-board-table tbody td strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.monday-board-sidecard {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 18px;
  align-self: start;
}

.monday-sync-open-board {
  width: 100%;
  justify-content: center;
}

.monday-sync-actions {
  margin-top: 6px;
}

.monday-sync-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.monday-sync-status-success {
  color: #1f5f48;
  background: rgba(71, 184, 129, 0.12);
  border-color: rgba(71, 184, 129, 0.28);
}

.monday-sync-status-warning {
  color: #8a5a00;
  background: rgba(249, 190, 74, 0.14);
  border-color: rgba(249, 190, 74, 0.28);
}

.monday-sync-status-error {
  color: var(--danger-text);
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}

.monday-sync-table-wrapper {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.monday-sync-table {
  min-width: 860px;
  border-collapse: collapse;
}

.monday-sync-table th {
  background: rgba(148, 163, 184, 0.06);
}

.monday-sync-table th,
.monday-sync-table td {
  padding: 14px 12px;
}

.monday-sync-loading {
  padding: 28px;
  border-radius: 18px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  text-align: center;
}

.monday-sync-structure-block + .monday-sync-structure-block {
  margin-top: 16px;
}

.monday-sync-structure-list {
  display: grid;
  gap: 10px;
}

.monday-sync-structure-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.monday-sync-structure-item > div {
  display: grid;
  gap: 4px;
}

@media (max-width: 1100px) {
  .weekly-planning-layout {
    grid-template-columns: 1fr;
  }

  .weekly-capacity-panel {
    position: static;
  }

  .monday-sync-layout,
  .monday-board-layout {
    grid-template-columns: 1fr;
  }

  .task-board-layout,
  .task-board-layout.is-day-mode {
    grid-template-columns: 224px minmax(0, 1fr) 196px;
  }

  .task-board-sidebar,
  .task-board-pool-card,
  .monday-sync-sidebar,
  .monday-sync-sidebar-right,
  .monday-board-sidecard {
    position: static;
  }

  .week-focus-filter-top {
    flex-direction: column;
    align-items: stretch;
  }

  .week-focus-filter-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .weekly-board {
    min-width: 1540px;
  }

  .monday-sync-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monday-board-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monday-board-meta-card.is-wide {
    grid-column: span 2;
  }

  .monday-board-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-board-table-head,
  .task-board-row-main {
    grid-template-columns: minmax(300px, 2.7fr) minmax(104px, 0.7fr) minmax(126px, 0.8fr) 60px;
    gap: 10px;
  }

  .task-capacity-chart-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .task-capacity-values {
    grid-template-columns: 1fr;
    width: min(100%, 360px);
  }

  .task-board-monday-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .task-board-monday-board-form,
  .task-board-monday-filter-form {
    grid-template-columns: 1fr;
  }

  .task-board-monday-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .plan-controls-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .plan-mode-switch {
    width: 100%;
  }

  .plan-mode-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .week-layout-switch {
    width: 100%;
  }

  .week-layout-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .planner-inline-toolbar,
  .weekly-planner-topbar {
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
  }

  .monday-board-toolbar,
  .monday-board-toolbar-actions,
  .monday-board-group-head {
    flex-direction: column;
    align-items: stretch;
  }

  .monday-board-meta-row,
  .monday-board-filter-form,
  .monday-board-inline-form {
    grid-template-columns: 1fr;
  }

  .monday-board-meta-card.is-wide {
    grid-column: span 1;
  }

  .task-board-monday-overlay {
    padding: 14px;
  }

  .task-board-monday-modal {
    width: calc(100vw - 24px);
    padding: 18px;
  }

  .task-board-monday-head,
  .task-board-monday-status-row,
  .task-board-monday-actions,
  .task-board-monday-preview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .task-board-monday-summary-grid {
    grid-template-columns: 1fr;
  }

  .task-board-list-head-tools {
    justify-content: stretch;
  }

  .task-board-search-inline {
    width: 100%;
  }

  .task-board-table-head {
    display: none;
  }

  .task-board-row-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .task-board-detail-metrics {
    grid-template-columns: 1fr;
  }

  .task-board-row-utilization,
  .task-board-row-hours {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .task-board-row-tail {
    justify-content: start;
  }

  .weekly-schedule-head {
    align-items: start;
  }

  .weekly-schedule-head-tools {
    width: 100%;
  }

  .weekly-schedule-week-picker {
    min-width: 0;
    width: 100%;
  }

  .weekly-board {
    min-width: 1260px;
    grid-template-columns: repeat(7, minmax(220px, 1fr));
  }

  .weekly-capacity-metrics,
  .weekly-task-assignment-grid {
    grid-template-columns: 1fr;
  }

  .task-capacity-chart-row,
  .task-board-composer-grid {
    grid-template-columns: 1fr;
  }

  .task-capacity-donut {
    width: 150px;
    height: 150px;
    margin-inline: auto;
  }

  .task-capacity-values {
    grid-template-columns: 1fr;
  }

  .task-board-composer-overlay {
    padding: 16px;
  }

  .utility-drawer-sheet.is-settings-drawer {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: none;
    transform: none;
  }

  .utility-drawer-sheet.is-settings-drawer .panel {
    max-height: none;
    height: 100%;
    padding: 22px;
  }
}

.employee-database-shell,
.absence-manager-shell,
.audit-log-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.employee-database-toolbar,
.audit-filter-card {
  padding: 22px;
}

.employee-database-filters,
.audit-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.employee-database-filters label,
.audit-filter-grid label {
  display: grid;
  gap: 8px;
}

.employee-database-filters span,
.audit-filter-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.employee-database-filters .full-width,
.audit-filter-grid .full-width {
  grid-column: 1 / -1;
}

.employee-database-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}

.lohnabrechnung-panel {
  padding: 22px;
  display: grid;
  gap: 18px;
}

.lohnabrechnung-panel h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.lohnabrechnung-panel p {
  margin: 0;
  font-size: 0.87rem;
  color: var(--muted);
}

.lohnabrechnung-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
  gap: 12px;
  align-items: end;
}

.lohnabrechnung-form label {
  display: grid;
  gap: 8px;
}

.lohnabrechnung-form label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-directory-search-bar {
  padding: 0 0 4px;
}

.team-directory-search-bar input {
  width: 100%;
  max-width: 380px;
}

.employee-record-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.employee-record-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.employee-record-head h3,
.employee-record-head p {
  margin: 0;
}

.employee-record-head p {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.employee-record-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.employee-record-meta span {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
}

.employee-record-meta strong {
  color: var(--text);
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.employee-record-notes {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  background: var(--surface-muted);
}

.employment-status-pill,
.absence-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.employment-status-pill.is-success,
.absence-type-pill.is-success {
  color: #0f8a4b;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.24);
}

.employment-status-pill.is-warning,
.absence-type-pill.is-warning {
  color: #b46907;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.24);
}

.employment-status-pill.is-muted,
.absence-type-pill.is-muted,
.absence-type-pill.is-neutral {
  color: var(--muted);
}

.absence-type-pill.is-brand {
  color: var(--brand);
  background: rgba(46, 155, 219, 0.1);
  border-color: rgba(46, 155, 219, 0.22);
}

.absence-type-pill.is-danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}

/* ── Abwesenheiten redesign ─────────────────────────── */

.absence-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.absence-page-header h2 {
  margin: 0 0 2px;
}

.absence-form-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.absence-form-details > summary::-webkit-details-marker { display: none; }

.absence-form-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 120;
  width: 540px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.absence-form-details {
  position: relative;
}

.absence-inline-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.absence-inline-form label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.absence-note-label {
  grid-column: 1 / -1;
}

.absence-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.absence-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.absence-list {
  display: flex;
  flex-direction: column;
}

.absence-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.absence-row:last-child {
  border-bottom: none;
}

.absence-row.has-conflict {
  background: rgba(239, 68, 68, 0.03);
}

.absence-row.is-pending {
  border-left: 3px solid rgba(245, 158, 11, 0.7);
  background: rgba(245, 158, 11, 0.04);
}

.absence-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.absence-type-badge.is-success { color: #0f8a4b; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.24); }
.absence-type-badge.is-warning { color: #b46907; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.24); }
.absence-type-badge.is-danger  { color: #b91c1c; background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.22);  }
.absence-type-badge.is-brand   { color: var(--brand); background: rgba(46,155,219,0.1); border-color: rgba(46,155,219,0.22); }
.absence-type-badge.is-muted,
.absence-type-badge.is-neutral { color: var(--muted); background: var(--surface-muted); border-color: var(--line); }

.absence-row-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  flex: 1;
}

.absence-row-who strong { font-size: 0.9rem; }

.absence-row-who span {
  font-size: 0.81rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.absence-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.absence-tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.78rem;
}

.absence-conflict-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.08);
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 600;
}

.absence-row-note {
  flex: 2;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absence-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.danger-button {
  color: var(--danger-text);
  border-color: rgba(239, 68, 68, 0.2);
  background: var(--danger-bg);
}

.audit-log-list {
  display: grid;
  gap: 12px;
}

.audit-log-item {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(260px, 0.8fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
}

.audit-log-main,
.audit-log-meta {
  display: grid;
  gap: 8px;
}

.audit-log-main h3,
.audit-log-main p {
  margin: 0;
}

.audit-log-main p {
  color: var(--muted);
}

.audit-log-meta span {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.audit-log-meta strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.audit-log-payload {
  max-height: 180px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ─── Besetzungskarte: wann ist wie viel Team da ───────────────────────
   Wochentage untereinander, Stunden nebeneinander, Farbtiefe = Anzahl.
   Die Statistik zeigte bisher nur Summen je Wochentag; wann tatsaechlich
   jemand erreichbar ist, stand nirgends. */
.occupancy-panel {
  margin-bottom: 18px;
}

.occupancy-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.occupancy-row {
  display: grid;
  grid-template-columns: 34px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.occupancy-day {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

.occupancy-cells {
  display: grid;
  gap: 3px;
}

.occupancy-cell {
  height: 22px;
  border-radius: 4px;
  background: var(--brand);
  display: block;
}

.occupancy-peak {
  font-size: 0.78rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.occupancy-head .occupancy-peak,
.occupancy-hour {
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
}

.occupancy-hour {
  display: block;
}

.occupancy-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--muted);
}

.occupancy-scale {
  display: inline-flex;
  gap: 2px;
}

.occupancy-scale i {
  width: 20px;
  height: 10px;
  border-radius: 3px;
  background: var(--brand);
}

@media (max-width: 640px) {
  .occupancy-row {
    grid-template-columns: 28px 1fr 34px;
    gap: 6px;
  }

  .occupancy-cell {
    height: 18px;
  }
}

/* Hinweis, dass die Liste an der Obergrenze endet. */
.audit-log-truncated {
  margin: 4px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 1260px) {
  .employee-database-filters,
  .absence-filter-grid,
  .audit-filter-grid,
  .audit-log-item,
  .lohnabrechnung-form {
    grid-template-columns: 1fr;
  }

  .absence-inline-form {
    grid-template-columns: 1fr;
  }

  .absence-form-dropdown {
    width: calc(100vw - 32px);
    right: auto;
    left: 0;
  }
}

@media (max-width: 720px) {
  .employee-database-grid,
  .employee-record-meta {
    grid-template-columns: 1fr;
  }

  .employee-record-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .employment-status-pill {
    grid-column: 1 / -1;
  }
}

.clock-shell {
  display: grid;
  gap: 20px;
}

.clock-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.clock-shell-copy {
  display: grid;
  gap: 6px;
}

.clock-shell-copy h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}

.clock-shell-copy p,
.clock-shell-copy span {
  margin: 0;
}

.clock-shell-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}

.clock-status-pill.is-success {
  color: #0f8a4b;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.24);
}

.clock-status-pill.is-warning {
  color: #b46907;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.24);
}

.clock-status-pill.is-muted,
.clock-status-pill.is-neutral {
  color: var(--muted);
}

.clock-status-pill.is-danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}

.clock-shell-employee .clock-employee-layout {
  display: grid;
  gap: 18px;
}

.clock-timer-card,
.clock-actions-card,
.clock-history-card,
.clock-admin-filter-card,
.clock-admin-table-card {
  padding: 22px;
}

.clock-detail-panel {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.clock-card-label {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock-live-value {
  display: block;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.clock-timer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.clock-timer-facts div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.clock-timer-facts span {
  color: var(--muted);
  font-size: 0.82rem;
}

.clock-timer-facts strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.clock-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.clock-action-button {
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.clock-action-button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.clock-action-button.primary {
  background: var(--brand);
  color: white;
  box-shadow: var(--shadow-sm);
}

.clock-action-button.secondary {
  background: rgba(90, 156, 248, 0.12);
  color: var(--brand-strong);
  border-color: rgba(90, 156, 248, 0.18);
}

.clock-action-button.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.18);
}

.clock-action-note {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}

.clock-warning-card {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.06);
}

.clock-warning-card strong {
  font-size: 0.94rem;
}

.clock-warning-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.clock-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.clock-timeline-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.clock-timeline-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.clock-timeline-time {
  color: var(--muted);
  font-weight: 700;
}

.clock-timeline-copy {
  display: grid;
  gap: 4px;
}

.clock-timeline-copy strong {
  font-size: 0.96rem;
}

.clock-timeline-copy span,
.clock-timeline-empty {
  color: var(--muted);
}

.clock-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.clock-kpi-card {
  display: grid;
  gap: 8px;
  min-height: 146px;
  padding: 18px;
}

.clock-kpi-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock-kpi-card strong {
  font-size: clamp(1.55rem, 2vw, 1.9rem);
  letter-spacing: -0.04em;
}

.clock-kpi-card p {
  margin: 0;
  color: var(--muted);
}

.clock-kpi-card.is-success {
  background: var(--success-bg);
}

.clock-kpi-card.is-warning {
  background: var(--warning-bg);
}

.clock-kpi-card.is-muted {
  background: var(--row-bg);
}

.clock-kpi-card.is-brand {
  background: var(--accent);
}

.clock-admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.clock-admin-filter-grid label {
  display: grid;
  gap: 8px;
}

.clock-admin-filter-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock-admin-table-head {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 0.8fr 0.8fr 0.8fr 0.8fr 0.7fr;
  gap: 14px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock-admin-table-body {
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.clock-admin-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 0.8fr 0.8fr 0.8fr 0.8fr 0.7fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.clock-admin-row-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.clock-admin-row-user > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.clock-admin-row-user strong,
.clock-admin-row-user span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.clock-admin-row-user strong {
  font-size: 0.98rem;
  white-space: nowrap;
}

.clock-admin-row-user span {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.clock-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.clock-admin-row-status,
.clock-admin-row-meta,
.clock-admin-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clock-warning-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
}

.clock-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.clock-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(8px);
}

.clock-detail-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(620px, calc(100vw - 24px));
  height: 100%;
  padding: 20px;
}

.clock-detail-panel,
.clock-detail-loading {
  height: 100%;
  overflow: auto;
}

.clock-detail-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.clock-detail-summary article {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.clock-detail-summary span {
  color: var(--muted);
  font-size: 0.82rem;
}

.clock-detail-summary strong {
  font-size: 1.1rem;
}

.clock-detail-timeline {
  margin-top: 0;
}

.clock-admin-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  margin-bottom: 0;
}

.clock-admin-edit-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.clock-admin-edit-row .clock-admin-edit-clockin {
  flex: 1;
  min-width: 220px;
}

.clock-detail-export {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clock-admin-export-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.clock-admin-export-row input[type="month"] {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.86rem;
}

.clock-admin-export-row a.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.clock-admin-edit-clockin {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.clock-admin-edit-clockin label {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 110px;
}

.clock-admin-edit-clockin button {
  white-space: nowrap;
  flex-shrink: 0;
}

.clock-admin-edit-clockin label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.danger-button.small-button {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 0.8rem;
}

/* Monthly clock view */
.clock-view-toggle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.clock-view-toggle .view-switch-button {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.clock-monthly-card {
  padding: 18px 20px;
}

.clock-monthly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.clock-monthly-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.clock-monthly-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clock-monthly-nav span {
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 130px;
  text-align: center;
}

.clock-monthly-table-head,
.clock-monthly-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) minmax(100px, 0.8fr);
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

.clock-monthly-table-head {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.clock-monthly-row {
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-subtle, var(--line));
}

.clock-monthly-row:last-child {
  border-bottom: none;
}

.clock-monthly-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clock-monthly-user strong {
  display: block;
  font-size: 0.88rem;
}

.clock-monthly-user span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.clock-monthly-total {
  font-weight: 700;
  font-size: 0.9rem;
}

.clock-monthly-days {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Absence dot in calendar */
.calendar-day-absence-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  position: absolute;
  top: 4px;
  right: 4px;
}

.calendar-day-button {
  position: relative;
}

.calendar-day-absence-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

.calendar-detail-absence {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  margin-bottom: 12px;
}

.calendar-detail-absence strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.calendar-detail-absence span {
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .clock-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clock-admin-filter-grid,
  .clock-admin-table-head,
  .clock-admin-row {
    grid-template-columns: 1fr;
  }

  .clock-admin-table-head {
    display: none;
  }

  .clock-admin-row {
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .clock-shell-head {
    flex-direction: column;
    align-items: stretch;
  }

  .clock-timer-facts,
  .clock-action-grid,
  .clock-detail-summary {
    grid-template-columns: 1fr;
  }

  .clock-detail-drawer {
    width: 100%;
    padding: 12px;
  }
}

/* ── Mitarbeiterdatenbank (neu) ──────────────────────────────────────────── */

.employee-db-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.employee-db-header h2 { margin: 0 0 2px; }

.employee-db-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.employee-db-search {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.87rem;
  min-width: 200px;
  flex: 1;
}

.employee-db-select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.87rem;
}

.employee-db-payroll {
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.employee-db-payroll summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.employee-db-payroll summary::-webkit-details-marker { display: none; }
.employee-db-payroll summary::before {
  content: "\e5cf";
  font-family: "tabler-icons";
  font-size: 16px;
  transition: transform 180ms ease;
}
.employee-db-payroll[open] summary::before { transform: rotate(180deg); }

.employee-db-payroll-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}

.employee-db-payroll-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 140px;
}

.employee-db-payroll-form input,
.employee-db-payroll-form select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.87rem;
}

.employee-db-table-wrap {
  overflow-x: auto;
  min-width: 0;
}

.employee-db-table {
  width: 100%;
  border-collapse: collapse;
}

.employee-db-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 12px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.employee-db-table td {
  padding: 0 12px;
  height: 54px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  vertical-align: middle;
  color: var(--text);
}

.employee-db-table tbody tr:last-child td { border-bottom: none; }

.employee-db-table tbody tr:hover td { background: var(--row-hover-bg); }

.employee-db-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.employee-db-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.employee-db-name-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.employee-db-name-info strong {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.employee-db-name-info strong:hover { color: var(--brand); }

.employee-db-name-info span {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.employee-db-actions { text-align: right; white-space: nowrap; }

.emp-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  white-space: nowrap;
}

.emp-status-badge.is-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.22);
  color: #0f8a4b;
}

.emp-status-badge.is-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.22);
  color: #92400e;
}

.emp-status-badge.is-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: #991b1b;
}

@media print {
  @page {
    margin: 14mm;
  }

  html,
  body {
    background: white !important;
  }

  body {
    min-height: auto;
    color: #0f172a;
  }

  .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .workspace-shell > :not(.print-sheet) {
    display: none !important;
  }

  .print-sheet {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: white;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
  }

  .print-header {
    padding-bottom: 14px;
  }

  .print-summary {
    gap: 10px;
    margin: 18px 0 20px;
  }

  .print-summary-card {
    break-inside: avoid;
    background: #f8fafc;
    box-shadow: none;
  }

  .print-table th,
  .print-table td {
    padding-left: 0;
    padding-right: 0;
  }

  .muted {
    color: #64748b !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Final week-view polish: keeps the dense planner readable and fixes the detail drawer
   if earlier layout rules try to pull it back into the document flow. */
.week-plan-toolbar-right {
  align-items: center;
}

.week-plan-week-control {
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
}

.week-plan-week-control input {
  height: 42px;
  line-height: 42px;
  padding: 0 2px;
  transform: translateY(1px);
}

.week-horizontal-head.is-person {
  align-content: center;
  align-items: center;
}

.week-horizontal-person {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 88px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.week-horizontal-person > div {
  align-self: center;
  padding-top: 2px;
}

.week-horizontal-person .week-day-person-avatar {
  width: 44px;
  height: 44px;
  align-self: center;
  justify-self: center;
  border-radius: 15px;
  transform: none;
}

body .week-missing-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw;
  min-height: 100vh;
  padding: 28px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(24px);
}

body .week-missing-modal {
  width: min(780px, calc(100vw - 42px));
  max-height: min(760px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 18px;
  padding: 28px;
  overflow: hidden;
  border-radius: 34px;
  background: var(--surface);
  box-shadow: var(--hover-shadow);
}

body .week-missing-head {
  align-items: flex-start;
}

body .week-missing-head h2 {
  margin: 2px 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.96;
}

body .week-missing-count {
  min-height: 72px;
  padding: 16px 18px;
  border-radius: 24px;
}

body .week-missing-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 2px 4px 2px 0;
}

body .week-missing-person {
  min-height: 76px;
  padding: 14px;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

body .week-missing-person .week-day-person-avatar {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

@media (max-width: 720px) {
  body .week-missing-overlay {
    padding: 16px;
  }

  body .week-missing-modal {
    width: 100%;
    padding: 22px;
    border-radius: 28px;
  }

  body .week-missing-head {
    flex-direction: column;
  }
}

/* ─── New topbar components ─── */

.topbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-logo {
  height: 26px;
  width: auto;
  display: block;
}

.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
  margin: 0 14px;
  flex-shrink: 0;
}

.topbar-nav {
  display: flex;
  align-items: center;
}

/* Page title chip shown inside manager content area */
.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0 8px;
}

.page-title-row h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.page-title-row p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Stat cards — tighter and sharper */
.stat-card {
  padding: 20px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

/* Calendar refinements */
.calendar-day {
  border-radius: var(--radius-md) !important;
}

.calendar-day.is-today {
  border-color: var(--brand) !important;
  background: var(--calendar-selected-bg) !important;
}

.calendar-day.is-today .calendar-day-number {
  color: var(--brand);
  font-weight: 700;
}

/* Action items — rounder, more refined */
.action-menu-item {
  border-radius: 9px;
  padding: 9px 13px;
}

/* Manager side stack */
.manager-side-stack {
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
}

/* Fix responsive topbar */
@media (max-width: 1080px) {
  .topbar-divider { display: none; }
  .topbar-nav { display: none; }
}

@media (max-width: 820px) {
  .app-shell {
    padding-top: calc(var(--topbar-h) + 14px);
  }

  .workspace-header {
    padding: 0 14px;
    gap: 10px;
  }

  .topbar-logo {
    height: 22px;
  }
}

/* ═══════════════════════════════════════════
   SIDEBAR LAYOUT SYSTEM
   ═══════════════════════════════════════════ */

html, body {
  height: 100%;
  overflow: hidden;
}

.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w, 220px) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 220ms ease;
}

.app-layout:has(.app-sidebar.is-collapsed) {
  --sidebar-w: 58px;
}

.app-content {
  overflow-y: auto;
  overflow-x: auto;
  padding: 28px 32px 60px;
  position: relative;
  background: var(--bg);
}

/* ─── Sidebar shell ─── */

.app-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 220px;
  background: #ffffff;
  border-right: 1px solid var(--line);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  flex-shrink: 0;
  transition: width 220ms ease;
}

.app-sidebar.is-collapsed {
  width: 58px;
}

:root[data-theme="ember"] .app-sidebar {
  background: var(--surface);
}

/* ─── Sidebar top: logo + nav ─── */

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
}

/* ─── Brand row: logo + collapse button ─── */

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  gap: 8px;
}

.sidebar-logo {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: opacity 180ms ease;
}

.app-sidebar.is-collapsed .sidebar-logo {
  display: none;
}

.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.sidebar-collapse-btn:hover {
  background: var(--surface-soft);
  color: var(--text);
  border-color: var(--line-strong);
  opacity: 1;
  transform: none;
}

.app-sidebar.is-collapsed .sidebar-brand {
  justify-content: center;
  padding: 14px 0 12px;
}

/* ─── Sidebar nav ─── */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 8px 3px;
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 180ms ease;
}

.app-sidebar.is-collapsed .sidebar-section-label {
  opacity: 0;
  height: 6px;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* Einklappbare Abschnitte in der Leitungs-Sidebar */
.sidebar-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm, 8px);
}

.sidebar-section-toggle:hover {
  opacity: 1;
  background: var(--row-hover-bg, rgba(0, 0, 0, 0.05));
}

.sidebar-section-chevron {
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 160ms ease;
}

.app-sidebar.is-collapsed .sidebar-section-chevron {
  display: none;
}

.sidebar-section-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.sidebar-section.is-section-collapsed .sidebar-section-items {
  display: none;
}

a.sidebar-nav-item {
  text-decoration: none;
}

.sidebar-nav-external {
  margin-left: auto;
  font-size: 13px;
  opacity: 0.5;
  flex-shrink: 0;
}

.app-sidebar.is-collapsed .sidebar-nav-external {
  display: none;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  border: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
  overflow: hidden;
}

.app-sidebar.is-collapsed .sidebar-nav-item {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}

.sidebar-nav-item:hover {
  background: var(--row-hover-bg);
  color: var(--text);
  opacity: 1;
  transform: none;
}

.sidebar-nav-item.is-active {
  background: var(--accent);
  color: var(--secondary-text);
  font-weight: 600;
}

.sidebar-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #DC2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  animation: badgePop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.app-sidebar.is-collapsed .sidebar-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
}

.sidebar-nav-item-danger {
  color: var(--danger-text);
}

.sidebar-nav-item-danger:hover {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.sidebar-nav-icon {
  font-size: 17px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.sidebar-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 180ms ease, max-width 220ms ease;
}

.app-sidebar.is-collapsed .sidebar-nav-label {
  display: none;
}

/* ─── Sidebar bottom: lang + user ─── */

.sidebar-bottom {
  padding: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-lang {
  padding: 2px 0;
}

.app-sidebar.is-collapsed .sidebar-lang {
  display: none;
}

.sidebar-lang .language-switch {
  width: 100%;
  justify-content: center;
}

.sidebar-lang .language-button {
  flex: 1;
  text-align: center;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  transition: background 140ms ease;
}

.sidebar-user-card:hover {
  background: var(--row-hover-bg);
}

.app-sidebar.is-collapsed .sidebar-user-card {
  justify-content: center;
  padding: 8px 0;
  background: transparent;
  border: none;
}

.sidebar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.app-sidebar.is-collapsed .sidebar-user-info {
  display: none;
}

.sidebar-user-info strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ─── Fix app-shell + workspace-shell inside app-content ─── */

.app-content .app-shell,
.app-content .workspace-shell {
  width: 100%;
  padding: 0;
  margin: 0;
}

.app-content .workspace-shell-manager {
  gap: 18px;
}

/* Remove old fixed topbar since we have sidebar now */
.app-content .workspace-header {
  display: none;
}

/* Fix action-menu-popover inside sidebar layout */
.app-content .action-menu-shell {
  position: relative;
}

/* Manager side-stack: sticky relative to app-content scroll */
.app-content .manager-side-stack {
  position: sticky;
  top: 0;
}

/* Tool-Seiten: Panel als Vollseite ohne Drawer-Breiten-Einschränkung */
.manager-main-stack-full > .panel.settings-panel,
.manager-main-stack-full > .panel.invite-panel,
.manager-main-stack-full > .panel.export-week-panel {
  max-width: 860px;
}

.manager-main-stack-full > .panel.user-form .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manager-main-stack-full > .panel.settings-panel {
  max-width: 980px;
}

/* ─── Responsive: collapse sidebar on small screens ─── */

@media (max-width: 900px) {
  .app-layout,
  .app-layout:has(.app-sidebar.is-collapsed) {
    /* minmax(0, 1fr) statt 1fr: eine Spalte "1fr" darf nicht schmaler werden
       als der schmalste Inhalt ihrer Felder. Hier liegen Navigationsleiste
       und Arbeitsbereich in derselben Spalte – die Leiste mit ihren 22
       Punkten nebeneinander zwang die Spalte auf 503 px, bei einem Fenster
       von 375 px. Alles darin lief nach rechts aus dem Bild und wurde
       abgeschnitten. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px 1fr;
    --sidebar-w: unset;
  }

  .app-sidebar,
  .app-sidebar.is-collapsed {
    width: 100%;
    /* Der eigentliche Hebel: ohne das rechnet das Raster weiter mit der
       vollen Breite aller Navigationspunkte. Die Leiste rollt ohnehin
       seitwaerts (.sidebar-top), sie braucht die Breite nicht. */
    min-width: 0;
    height: 56px;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .app-content {
    min-width: 0;
  }

  .sidebar-top {
    flex-direction: row;
    align-items: center;
    flex: 1 1 auto;
    overflow-x: auto;
  }

  .sidebar-brand {
    padding: 10px 14px;
    border-bottom: none;
    border-right: 1px solid var(--line);
    margin-bottom: 0;
    justify-content: flex-start;
  }

  .app-sidebar.is-collapsed .sidebar-logo,
  .sidebar-logo {
    display: block;
  }

  .sidebar-collapse-btn { display: none; }

  .sidebar-nav {
    flex-direction: row;
    gap: 2px;
    padding: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .sidebar-section-label,
  .app-sidebar.is-collapsed .sidebar-section-label { display: none; }

  .sidebar-nav-item,
  .app-sidebar.is-collapsed .sidebar-nav-item {
    padding: 7px 10px;
    border-radius: 8px;
    justify-content: flex-start;
    gap: 6px;
  }

  .sidebar-nav-label,
  .app-sidebar.is-collapsed .sidebar-nav-label { display: none; }

  .sidebar-bottom {
    border-top: none;
    border-left: 1px solid var(--line);
    flex-direction: row;
    padding: 8px;
    align-items: center;
  }

  .sidebar-lang,
  .app-sidebar.is-collapsed .sidebar-lang { display: none; }

  .sidebar-user-card,
  .app-sidebar.is-collapsed .sidebar-user-card {
    border: none;
    background: transparent;
    padding: 6px;
    justify-content: center;
  }

  .sidebar-user-info { display: none; }

  .app-content {
    padding: 16px 16px 40px;
  }
}

/* ─── Skeleton Loading ─────────────────────────────────────────────────── */

@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  pointer-events: none;
}

.skeleton-line {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--surface-muted) 25%,
    var(--surface-soft) 50%,
    var(--surface-muted) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line:first-child {
  height: 28px;
  width: 55% !important;
}

.skeleton-card:hover {
  transform: none;
  box-shadow: var(--shadow);
}

.clock-skeleton-shell {
  display: grid;
  gap: 16px;
}

.current-kpi-card.is-success {
  background: var(--success-bg);
}

.current-kpi-card.is-warning {
  background: var(--warning-bg);
}

.current-kpi-card.is-brand {
  background: var(--accent);
}

/* Live pulse dot */
.live-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Shift progress bar on person cards */
.shift-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

:root[data-theme="ember"] .shift-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

.shift-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.4s ease;
}

/* Audit log: icon in action pill */
.absence-type-pill i {
  font-size: 0.85em;
  margin-right: 4px;
  vertical-align: middle;
}

/* Audit log: entity icon */
.audit-entity-icon {
  font-size: 0.9em;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--muted);
}

/* Audit log action tone: danger for deleted */
.absence-type-pill.is-danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.22);
}

.absence-type-pill.is-success {
  color: #0f8a4b;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.22);
}

.absence-type-pill.is-warning {
  color: #b46907;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.22);
}

/* Employee record card: status left border */
.employee-record-card[data-status="active"] {
  border-left: 3px solid #16a34a;
}

.employee-record-card[data-status="inactive"] {
  border-left: 3px solid #f59e0b;
  opacity: 0.9;
}

.employee-record-card[data-status="archived"] {
  border-left: 3px solid var(--line-strong);
  opacity: 0.72;
}

/* Audit log: timeline connector line */
.audit-log-list {
  position: relative;
}

.audit-log-list::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
  border-radius: 999px;
  pointer-events: none;
}

.audit-log-item {
  position: relative;
}

/* Statistics bar track: slightly rounded labels */
.statistics-bar-value {
  min-width: 42px;
  text-align: right;
}

/* Absence card: date range badge */
.absence-card p {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Sidebar active item: stronger left indicator */
.sidebar-nav-item.is-active {
  position: relative;
}

.sidebar-nav-item.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

.app-sidebar.is-collapsed .sidebar-nav-item.is-active::after {
  left: 0;
  top: 25%;
  bottom: 25%;
}

/* Dark mode adjustments */
:root[data-theme="ember"] .live-pulse-dot {
  background: #4ade80;
  animation-name: live-pulse-dark;
}

@keyframes live-pulse-dark {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

:root[data-theme="ember"] .employee-record-card[data-status="active"] {
  border-left-color: #22c55e;
}

/* Absence conflict badge */
.absence-conflict-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  font-size: 0.88rem;
  margin-left: 8px;
  vertical-align: middle;
}

.absence-card.has-conflict {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.03);
}

.absence-note-text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-style: italic;
}

/* Manager preview chip icons */
.manager-preview-chip i {
  font-size: 0.85em;
  margin-right: 4px;
  vertical-align: middle;
  opacity: 0.7;
}

.manager-preview-chip strong {
  font-weight: 800;
}

/* Statistics intro panel-head subtitle */
.statistics-intro-card .panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Panel head: uniform subtitle sizing */
.panel-head p {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* ── Task Completion Badge ──────────────────────────────────────────────── */

.weekly-task-card.is-done {
  opacity: 0.72;
}

.task-done-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: #22c55e;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.task-complete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.task-complete-btn:hover {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}

.task-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.task-start-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.task-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.task-status-in-progress {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

:root[data-theme="ember"] .task-status-in-progress {
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
  border-color: rgba(59,130,246,0.25);
}

.weekly-task-card.is-in-progress {
  border-color: rgba(37, 99, 235, 0.35);
}

.task-recurrence-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Tasks Dashboard (manager) ──────────────────────────────────────────── */

.task-dashboard-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.task-dashboard-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.task-dashboard-tab.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.tasks-overview-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tasks-overview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.tasks-overview-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}

.tasks-overview-stat-card strong {
  font-size: 1.8rem;
  letter-spacing: -0.03em;
  color: var(--text);
}

.tasks-overview-stat-card span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.tasks-overview-stat-card.is-danger strong {
  color: #ef4444;
}

.tasks-overview-stat-card.is-warning strong {
  color: #f59e0b;
}

.tasks-overview-stat-card.is-success strong {
  color: #22c55e;
}

.tasks-overview-stat-card.is-brand strong {
  color: var(--brand);
}

@media (max-width: 960px) {
  .tasks-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Attention Report ───────────────────────────────────────────────────── */

.attention-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 1000px) {
  .attention-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.attention-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.attention-pending {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attention-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.attention-pending-head h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attention-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #b46907;
  font-size: 0.78rem;
  font-weight: 700;
}

.attention-pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attention-pending-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.attention-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.attention-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.attention-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attention-card {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attention-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.attention-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.attention-card-head-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.attention-card-head-info strong {
  font-size: 0.95rem;
}

.attention-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.attention-card-flags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.attention-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.attention-flag-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.attention-flag-warning {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

:root[data-theme="ember"] .attention-flag-danger {
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border-color: rgba(239,68,68,0.3);
}
:root[data-theme="ember"] .attention-flag-warning {
  background: rgba(249,115,22,0.12);
  color: #fb923c;
  border-color: rgba(249,115,22,0.25);
}

.attention-card-hours {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.attention-missing-dates summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--brand);
  font-weight: 600;
}

.attention-missing-dates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.attention-missing-date {
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-soft, var(--bg));
  border: 1px solid var(--line);
  color: var(--muted);
}

/* ── My Tasks (employee) ────────────────────────────────────────────────── */

.my-tasks-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}

.my-tasks-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.my-tasks-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.my-tasks-filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.my-tasks-filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--muted);
}

.my-tasks-filters select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.86rem;
  min-width: 160px;
}

.my-tasks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: start;
  gap: 10px;
}

/* ── Task Inbox ─────────────────────────────────────────────────────────── */

.task-inbox-card {
  padding: 28px 32px;
}

.task-inbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
}

.task-inbox-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.task-inbox-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.task-inbox-empty {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.task-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1100px) {
  .task-inbox-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.task-inbox-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.task-inbox-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.task-inbox-item-body strong {
  font-size: 0.95rem;
}

.task-inbox-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.task-inbox-note {
  margin: 4px 0 0;
  font-size: 0.83rem;
  color: var(--text);
  background: var(--bg);
  border-left: 3px solid var(--line);
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
}

.task-inbox-item-actions {
  flex-shrink: 0;
}

.task-inbox-reopen-btn {
  font-size: 0.8rem;
  padding: 4px 10px;
}

/* ── Task Professional Extensions ──────────────────────────────────────── */

/* Priority badges */
.task-priority-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.task-priority-low {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.task-priority-medium {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.task-priority-high {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.task-priority-urgent {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.task-priority-critical {
  background: #4c0519;
  color: #fff1f2;
  border: 1px solid #881337;
}

.task-project-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--line);
}

.task-project-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--project-color, var(--brand));
  flex-shrink: 0;
}

.task-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--line);
}

.task-status-pill.is-blocked {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.task-status-pill.is-in_review {
  background: #fefce8;
  color: #a16207;
  border-color: #fef08a;
}

.task-status-pill.is-waiting_feedback {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.task-status-pill.is-in_progress {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.task-status-pill.is-done,
.task-status-pill.is-accepted {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.task-status-pill.is-cancelled,
.task-status-pill.is-archived {
  background: var(--surface-muted);
  color: var(--muted);
}

:root[data-theme="ember"] .task-priority-low {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border-color: rgba(34,197,94,0.25);
}
:root[data-theme="ember"] .task-priority-medium {
  background: rgba(59,130,246,0.12);
  color: #60a5fa;
  border-color: rgba(59,130,246,0.25);
}
:root[data-theme="ember"] .task-priority-high {
  background: rgba(249,115,22,0.12);
  color: #fb923c;
  border-color: rgba(249,115,22,0.25);
}
:root[data-theme="ember"] .task-priority-urgent {
  background: rgba(239,68,68,0.15);
  color: #f87171;
  border-color: rgba(239,68,68,0.3);
}

/* Priority select in composer */
.task-priority-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Due date */
.task-due-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
}

.task-due-date.is-overdue {
  color: #ef4444;
  font-weight: 700;
}

.weekly-task-card.is-overdue {
  border-color: rgba(239, 68, 68, 0.4);
}

/* Title row inside card */
.weekly-task-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.weekly-task-card-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Subtask progress bar (on card) */
.task-subtask-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-subtask-progress-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.task-subtask-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #22c55e;
  transition: width 240ms ease;
}

.task-subtask-progress-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Dienstplan erstellen ───────────────────────────────────────────────── */

.roster-builder-panel {
  display: flex;
  flex-direction: column;
}

.roster-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.roster-builder-tabs {
  display: flex;
  gap: 6px;
  align-self: center;
}

.roster-builder-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}

.roster-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.roster-toolbar-field input {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  min-width: 180px;
}

.roster-toolbar-field-narrow input {
  min-width: 90px;
  width: 90px;
}

.roster-toolbar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.roster-builder-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 24px 22px;
}

.roster-employee-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--bg);
}

.roster-employee-hint {
  font-size: 0.76rem;
  margin: 0 0 6px;
}

.roster-employee-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roster-employee-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.84rem;
  cursor: grab;
}

.roster-employee-chip:active {
  cursor: grabbing;
}

.roster-employee-chip-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
}

.roster-grid-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  background: var(--bg);
  transition: background 120ms, border-color 120ms;
}

.roster-grid-wrap.is-drag-over {
  border-color: var(--brand);
  background: var(--surface-soft, var(--bg));
}

.roster-empty-dropzone {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.roster-grid-table {
  width: 100%;
  border-collapse: collapse;
}

.roster-grid-table {
  table-layout: fixed;
}

.roster-grid-table th,
.roster-grid-table td {
  border: 1px solid var(--line);
  padding: 12px;
  font-size: 0.86rem;
  white-space: nowrap;
  min-width: 130px;
}

.roster-grid-table th:first-child,
.roster-grid-table td:first-child {
  min-width: 200px;
  width: 220px;
}

.roster-grid-table th {
  background: var(--surface-soft, var(--bg));
  text-align: left;
}

.roster-row-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  position: relative;
}

.roster-row-remove {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.roster-row-remove:hover {
  color: #ef4444;
}

.roster-cell-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 0.86rem;
  color: var(--text);
  box-sizing: border-box;
}

.roster-cell-input:hover,
.roster-cell-input:focus {
  border-color: var(--line);
  background: var(--bg);
}

.roster-archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roster-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.roster-archive-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
}

.roster-archive-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Shift-Assistent ─────────────────────────────────────────────────────── */

.assistant-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  min-height: 480px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-xl, 16px);
}

.assistant-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.assistant-head > div {
  flex: 1;
  min-width: 0;
}

.assistant-head-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.assistant-head-orb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--brand);
  background: var(--accent);
}

.assistant-powered-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--surface-soft, var(--bg));
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
}

.assistant-thread {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.assistant-empty {
  display: grid;
  gap: 22px;
  align-content: start;
  padding: 4px 2px 8px;
}

.assistant-empty-intro {
  display: grid;
  gap: 12px;
}

.assistant-empty-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assistant-suggestion-btn {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.assistant-suggestion-btn:hover {
  opacity: 1;
  border-color: var(--line-strong);
  background: var(--row-hover-bg);
}

/* Faehigkeiten des Assistenten, gebuendelt statt als Chip-Wand. */
.assistant-capability-board {
  display: grid;
  gap: 18px;
}

.assistant-capability-group h3 {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.assistant-capability-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 8px;
}

.assistant-capability-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: left;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.assistant-capability-card:hover {
  opacity: 1;
  border-color: var(--calendar-selected-border);
  background: var(--calendar-selected-bg);
}

.assistant-capability-card:focus-visible {
  outline: 2px solid var(--focus-border);
  outline-offset: 2px;
}

.assistant-capability-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--brand-deep);
  font-size: 1.05rem;
}

.assistant-capability-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.assistant-capability-copy strong {
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

/* Der Beispielsatz erklaert die Faehigkeit – er darf die Karte aber nicht
   in die Hoehe ziehen. */
.assistant-capability-copy span {
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-capability-go {
  color: var(--muted);
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 140ms ease;
}

.assistant-capability-card:hover .assistant-capability-go,
.assistant-capability-card:focus-visible .assistant-capability-go {
  opacity: 1;
}

.assistant-quickactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft, var(--bg));
}

.assistant-quickaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.assistant-quickaction-chip i {
  font-size: 0.95rem;
  color: var(--brand);
}

.assistant-quickaction-chip:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  box-shadow: var(--soft-hover-shadow);
}

.assistant-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.assistant-bubble-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.assistant-bubble-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.assistant-bubble-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.assistant-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.assistant-bubble-row.is-user .assistant-avatar {
  background: var(--row-bg);
  color: var(--muted);
}

.assistant-avatar.is-thinking {
  animation: assistant-avatar-pulse 1.4s ease-in-out infinite;
}

@keyframes assistant-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1); }
}

.assistant-bubble {
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
}

.assistant-bubble-actions {
  display: flex;
  gap: 4px;
}

.assistant-bubble-actions .icon-button {
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.assistant-action-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.assistant-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  width: fit-content;
}

.assistant-action-chip.is-success {
  background: var(--success-bg);
  color: var(--success-text);
}

.assistant-action-chip.is-error {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.assistant-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
}

.assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
  animation: assistant-typing-bounce 1.2s ease-in-out infinite;
}

.assistant-typing span:nth-child(2) { animation-delay: 0.15s; }
.assistant-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes assistant-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.assistant-input-row {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}

.assistant-input-row input {
  flex: 1;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.9rem;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.assistant-input-row input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.assistant-input-row .icon-only-button {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.assistant-error-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px;
}

.assistant-error-row .form-error {
  flex: 1;
  margin: 0;
}

/* ── User Profile Popover ───────────────────────────────────────────────── */

.is-clickable {
  cursor: pointer;
}

.avatar-photo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.is-clickable:hover {
  text-decoration: underline;
}

.user-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.user-profile-modal {
  width: min(320px, 90vw);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: center;
}

.user-profile-close {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  font-size: 0.78rem;
}

.user-profile-avatar-wrap {
  position: relative;
  width: 64px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.user-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.user-profile-avatar-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.78rem;
  border: 2px solid var(--surface);
}

.user-profile-avatar-edit:hover {
  filter: brightness(1.1);
}

.user-profile-notes {
  display: block;
  white-space: pre-wrap;
  text-align: left;
}

.user-profile-edit-btn {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}

.user-profile-edit-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.user-profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-profile-edit-grid label,
.user-profile-edit-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.user-profile-edit-grid input,
.user-profile-edit-grid select,
.user-profile-edit-notes textarea {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.86rem;
}

.user-profile-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.user-profile-name {
  font-size: 1.05rem;
}

.user-profile-role {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.user-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.user-profile-meta-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--text);
  text-decoration: none;
}

.user-profile-meta-item i {
  color: var(--muted);
}

.user-profile-meta-item[href]:hover {
  color: var(--brand);
}

/* ── Task Detail Modal ───────────────────────────────────────────────────── */

.task-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
}

.task-detail-modal {
  width: min(520px, 95vw);
  height: 100dvh;
  overflow-y: auto;
  border-radius: 18px 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
  background: var(--surface);
}

.task-detail-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.task-detail-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.task-detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.35;
}

.task-detail-category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-soft, var(--bg));
  border: 1px solid var(--line);
  color: var(--muted);
}

.task-detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.task-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.task-detail-meta-item.is-overdue {
  color: #ef4444;
  font-weight: 600;
}

.task-detail-description {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
  margin: 10px 0 0;
  white-space: pre-wrap;
}

.task-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.task-detail-close {
  margin-left: auto;
}

.task-detail-body {
  flex: 1;
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
}

.task-detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-detail-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-detail-section-title-spaced {
  margin-top: 14px;
}

.task-file-list,
.task-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-file-empty {
  color: var(--muted);
  font-size: 0.86rem;
  padding: 4px 0;
}

.task-file-item,
.task-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.task-file-link,
.task-link-anchor {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
  font-size: 0.88rem;
}

.task-file-link i,
.task-link-anchor i {
  color: var(--brand);
  font-size: 1rem;
  flex-shrink: 0;
}

.task-file-name,
.task-link-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-link-anchor:hover .task-link-label,
.task-file-link:hover .task-file-name {
  text-decoration: underline;
}

.task-file-size {
  font-size: 0.76rem;
  color: var(--muted);
  flex-shrink: 0;
}

.task-file-delete {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 120ms, color 120ms;
}

.task-file-item:hover .task-file-delete,
.task-link-item:hover .task-file-delete {
  opacity: 1;
}

.task-file-delete:hover {
  color: #ef4444;
}

.task-file-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.task-file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.84rem;
}

.task-file-upload-hint {
  font-size: 0.76rem;
  color: var(--muted);
}

.task-link-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.task-link-form input[type="url"] {
  flex: 2;
  min-width: 180px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.86rem;
  color: var(--text);
}

.task-link-form input[type="text"] {
  flex: 1;
  min-width: 120px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.86rem;
  color: var(--text);
}

.task-link-form .primary-button {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.task-detail-count {
  font-size: 0.72rem;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
}

.task-detail-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.task-detail-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #22c55e;
  transition: width 300ms ease;
}

.task-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 48px;
}

/* Subtask list */
.task-subtask-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-subtask-empty {
  color: var(--muted);
  font-size: 0.86rem;
  padding: 8px 0;
}

.task-subtask-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  transition: background 120ms;
}

.task-subtask-item:hover {
  background: var(--surface-soft, var(--surface));
}

.task-subtask-item.is-done .task-subtask-title {
  text-decoration: line-through;
  color: var(--muted);
}

.task-subtask-check {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  transition: background 120ms, border-color 120ms, color 120ms;
  color: transparent;
}

.task-subtask-item.is-done .task-subtask-check {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.task-subtask-check:hover {
  border-color: #22c55e;
}

.task-subtask-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}

.task-subtask-delete {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms, color 120ms;
}

.task-subtask-item:hover .task-subtask-delete {
  opacity: 1;
}

.task-subtask-delete:hover {
  color: #ef4444;
}

.task-subtask-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.task-subtask-form input {
  flex: 1;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.88rem;
  color: var(--text);
}

.task-subtask-form .primary-button {
  padding: 7px 14px;
  font-size: 0.82rem;
}

/* Comment thread */
.task-comment-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-comment-empty {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0;
}

.task-comment-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.task-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.task-inbox-avatar,
.announcement-author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
}

.task-inbox-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.68rem;
  margin-right: 4px;
}

.task-comment-body {
  flex: 1;
  min-width: 0;
}

.task-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.task-comment-meta strong {
  font-size: 0.82rem;
}

.task-comment-time {
  font-size: 0.74rem;
  color: var(--muted);
}

.task-comment-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  padding: 8px 12px;
  border-radius: 4px 12px 12px 12px;
  border: 1px solid var(--line);
  white-space: pre-wrap;
  word-break: break-word;
}

.task-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.task-comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.88rem;
  color: var(--text);
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

/* ── Announcements ──────────────────────────────────────────────────────── */

.announcements-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.announcements-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.announcements-head h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.announcements-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.announcement-composer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.announcement-composer h3 {
  margin: 0;
  font-size: 1rem;
}

.announcement-composer label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.announcement-composer input,
.announcement-composer textarea {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

.announcements-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.announcements-empty i {
  font-size: 1.3rem;
  opacity: 0.45;
}

.announcements-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  align-items: start;
}

.announcement-card {
  padding: 20px 22px;
}

.announcement-card.is-unread {
  border-color: var(--brand);
}

.announcement-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.announcement-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-soft, var(--bg));
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.announcement-card-head-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.announcement-card-head-info strong {
  font-size: 0.98rem;
}

.announcement-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.announcement-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 5px;
}

.announcement-card-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

.announcement-card-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Messages / Chat ────────────────────────────────────────────────────── */

.messages-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - 80px);
  min-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.employee-messages-shell {
  padding: 16px;
  height: calc(100vh - 60px);
  box-sizing: border-box;
}

.employee-messages-shell .messages-shell {
  height: 100%;
}

.conv-list-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-soft, var(--surface));
}

.conv-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
  flex-shrink: 0;
}

.conv-list-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.conv-new-dm-btn {
  font-size: 0.78rem;
  padding: 6px 12px;
  white-space: nowrap;
  border-radius: 8px;
}

.conv-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.conv-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  background: transparent;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  position: relative;
}

.conv-list-item:hover {
  background: var(--surface);
}

.conv-list-item.is-active {
  background: var(--brand);
}

.conv-list-item.is-active .conv-list-name,
.conv-list-item.is-active .conv-list-preview {
  color: #fff;
}

.conv-list-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.conv-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.conv-list-name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.conv-list-preview {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-unread-badge {
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
}

.conv-list-item.is-active .conv-unread-badge {
  background: rgba(255, 255, 255, 0.28);
}

.msg-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.messages-select-hint,
.messages-loading,
.messages-empty-list,
.messages-no-msgs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 24px;
  text-align: center;
}

.messages-select-hint i,
.messages-no-msgs i {
  font-size: 1.6rem;
  opacity: 0.4;
}

.msg-panel-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
}

.msg-panel-head-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.msg-panel-head-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.msg-panel-head-info strong {
  font-size: 0.95rem;
}

.msg-panel-head-sub {
  font-size: 0.74rem;
  color: var(--muted);
}

.msg-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-bubble {
  max-width: 68%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.msg-bubble.is-mine {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-sender {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0 4px;
}

.msg-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 3px;
  padding: 10px 15px;
  font-size: 0.89rem;
  line-height: 1.48;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: var(--shadow);
}

.msg-bubble.is-mine .msg-body {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  border-radius: 14px 14px 3px 14px;
}

.msg-time {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0 4px;
}

.msg-panel-footer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}

.msg-compose-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.89rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.14s;
  line-height: 1.4;
  max-height: 120px;
}

.msg-compose-input:focus {
  border-color: var(--brand);
}

.msg-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--brand);
}

.msg-user-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

.msg-user-picker-modal {
  width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}

.msg-user-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.msg-user-picker-head strong {
  font-size: 1rem;
  font-weight: 700;
}

.msg-user-picker-search {
  margin: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.87rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  width: calc(100% - 28px);
  box-sizing: border-box;
  flex-shrink: 0;
  transition: border-color 0.14s;
}

.msg-user-picker-search:focus {
  border-color: var(--brand);
}

.msg-user-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 10px;
}

.msg-user-pick-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text);
  transition: background 0.12s;
  text-align: left;
}

.msg-user-pick-item:hover {
  background: var(--surface-soft, var(--bg));
}

.msg-user-picker-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}

/* ── Project Management: header zone ─────────────────────────────────────── */

.pm-header-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.pm-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pm-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.pm-header-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-header-copy h2 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pm-header-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.pm-header-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pm-global-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 220px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-global-search i {
  font-size: 1rem;
  color: var(--muted);
  transition: color 0.15s ease;
}

.pm-global-search:focus-within {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.pm-global-search:focus-within i {
  color: var(--brand);
}

.pm-global-search input {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  width: 100%;
  outline: none;
}

.pm-quick-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pm-quick-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pm-quick-filter-chip:hover {
  border-color: var(--brand);
  color: var(--text);
}

.pm-quick-filter-chip.is-active {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.pm-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 64px 24px;
  text-align: center;
}

/* ── Project Management: KPI dashboard ────────────────────────────────────── */

.pm-dashboard-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.pm-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px;
  min-height: 112px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pm-kpi-card:hover:not(:disabled) {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.pm-kpi-card:disabled {
  cursor: default;
  opacity: 0.85;
}

.pm-kpi-card strong {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pm-kpi-card span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.pm-kpi-icon {
  font-size: 1.1rem;
  color: var(--brand);
}

.pm-kpi-card.is-danger .pm-kpi-icon,
.pm-kpi-card.is-danger strong {
  color: #b91c1c;
}

.pm-kpi-card.is-warning .pm-kpi-icon,
.pm-kpi-card.is-warning strong {
  color: #c2410c;
}

.pm-kpi-card.is-success .pm-kpi-icon,
.pm-kpi-card.is-success strong {
  color: #15803d;
}

.pm-kpi-card.is-brand .pm-kpi-icon,
.pm-kpi-card.is-brand strong {
  color: var(--brand);
}

.pm-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pm-chart-card {
  padding: 22px;
}

.pm-chart-card h3 {
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.pm-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
}

.pm-bar-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}

.pm-bar-chart-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 6px 6px 0 0;
  background: var(--brand);
  min-height: 4px;
}

.pm-distribution-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-distribution-row {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.pm-distribution-label {
  color: var(--muted);
  font-weight: 600;
}

.pm-distribution-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.pm-distribution-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}

.pm-distribution-count {
  text-align: right;
  font-weight: 700;
}

.pm-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pm-mini-list-card {
  padding: 22px;
}

.pm-mini-list-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.95rem;
}

.pm-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-mini-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  flex-wrap: wrap;
}

.pm-mini-list li:hover {
  background: var(--surface-muted);
}

.pm-mini-list-title {
  font-weight: 600;
  flex: 1;
}

.pm-mini-list-meta {
  font-size: 0.76rem;
  color: var(--muted);
}

/* ── Project Management: list view ────────────────────────────────────────── */

.pm-list-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  min-width: 0;
}

.pm-list-shell .table-wrapper {
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.pm-bulk-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-muted);
  flex-wrap: wrap;
}

.pm-tasks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.pm-tasks-table th,
.pm-tasks-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.pm-tasks-table th.is-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.pm-tasks-table th.is-sorted-asc::after {
  content: " ▲";
}

.pm-tasks-table th.is-sorted-desc::after {
  content: " ▼";
}

.pm-list-title-cell {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-list-progress-track {
  width: 80px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.pm-list-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}

/* ── Task detail: inline editing, time tracking, activity ─────────────────── */

.task-detail-inline-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.task-detail-inline-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.task-detail-inline-controls select,
.task-detail-inline-controls input[type="range"] {
  width: 100%;
}

.task-detail-progress-control {
  grid-column: 1 / -1;
}

.task-time-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.task-time-summary div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}

.task-time-summary strong {
  font-size: 1rem;
  color: var(--text);
}

.task-time-log-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-time-log-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.task-time-log-note {
  color: var(--muted);
  flex: 1;
}

.task-time-log-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.task-time-log-form input[type="number"] {
  width: 100px;
}

.task-time-log-form input[type="text"] {
  flex: 1;
  min-width: 160px;
}

.task-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
}

.task-activity-item i {
  margin-top: 2px;
  color: var(--brand);
}

.task-activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-activity-body small {
  color: var(--muted);
  font-size: 0.74rem;
}

/* ── Project Management: Kanban board ─────────────────────────────────────── */

.kanban-layout-toggle {
  display: flex;
  gap: 8px;
  margin: 8px 0 20px;
}

.kanban-board {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}

.kanban-column {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  min-height: 220px;
  max-height: 78vh;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.kanban-column.is-drop-active {
  border-color: var(--brand);
  background: var(--surface-muted);
}

.kanban-column.is-over-limit .kanban-column-count {
  color: #b91c1c;
}

.kanban-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-column-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 1;
}

.kanban-column-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.kanban-wip-edit {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.kanban-wip-edit:hover {
  color: var(--brand);
}

.kanban-wip-warning {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 4px 8px;
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}

.kanban-column-empty {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  padding: 28px 0;
}

.kanban-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: grab;
}

.kanban-card.is-dragging {
  opacity: 0.5;
}

.kanban-card.is-overdue {
  border-color: #fecaca;
}

.kanban-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kanban-card-title {
  font-size: 0.86rem;
  font-weight: 600;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--muted);
}

.kanban-card-meta .is-overdue {
  color: #b91c1c;
  font-weight: 700;
}

.kanban-card-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}

.kanban-card-progress div {
  height: 100%;
  background: var(--brand);
}

/* ── Project Management: Timeline / Gantt ─────────────────────────────────── */

.timeline-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.timeline-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.timeline-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.timeline-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.timeline-grid {
  display: grid;
  grid-auto-rows: min-content;
  min-width: max-content;
}

.timeline-corner-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.timeline-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.timeline-day-head small {
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--muted);
}

.timeline-day-head.is-today {
  background: var(--surface-muted);
  color: var(--brand);
}

.timeline-day-head.is-weekend {
  background: rgba(0, 0, 0, 0.02);
}

.timeline-group-label {
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
}

.timeline-row-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 0.8rem;
  cursor: pointer;
  overflow: hidden;
}

.timeline-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-bar {
  align-self: center;
  margin: 4px 2px;
  height: 22px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.timeline-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-bar.is-done,
.timeline-bar.is-accepted {
  background: #15803d;
}

.timeline-bar.is-blocked {
  background: #b91c1c;
}

.timeline-bar.is-in_review,
.timeline-bar.is-waiting_feedback {
  background: #c2410c;
}

.timeline-bar.is-backlog,
.timeline-bar.is-planned {
  background: #64748b;
}

.timeline-bar.is-overdue {
  box-shadow: 0 0 0 2px #fecaca inset;
}

/* ── Project Management: Calendar ─────────────────────────────────────────── */

.pm-calendar-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.pm-calendar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pm-calendar-month-label {
  font-size: 0.95rem;
  text-transform: capitalize;
}

.pm-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.pm-calendar-weekday {
  background: var(--surface-muted);
  padding: 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}

.pm-calendar-day {
  background: var(--bg);
  min-height: 110px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-calendar-day.is-muted {
  background: var(--surface-muted);
  opacity: 0.6;
}

.pm-calendar-day.is-today {
  box-shadow: inset 0 0 0 2px var(--brand);
}

.pm-calendar-day-number {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

.pm-calendar-day-tasks {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.pm-calendar-task-chip {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.pm-calendar-task-chip.is-blocked {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.pm-calendar-task-chip.is-done,
.pm-calendar-task-chip.is-accepted {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

.pm-calendar-task-chip.is-in_progress {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.pm-calendar-task-chip.is-in_review,
.pm-calendar-task-chip.is-waiting_feedback {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.pm-calendar-more {
  border: none;
  background: transparent;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 720px) {
  .pm-calendar-day {
    min-height: 70px;
  }
}

/* ── Project Management: Reports ──────────────────────────────────────────── */

.pm-reports-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.pm-reports-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pm-reports-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.pm-reports-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.pm-reports-summary article {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.pm-reports-summary span {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}

.pm-reports-summary strong {
  font-size: 1.2rem;
}

/* ── Project Management: Teams & multi-assignee ───────────────────────────── */

.task-collaborators-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
}

.task-collaborators-fieldset legend {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 4px;
}

.task-collaborators-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.task-collaborator-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 400;
  cursor: pointer;
}

.teams-manager-modal {
  max-width: 640px;
}

.teams-manager-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.teams-manager-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
}

.team-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.teams-manager-item .muted {
  flex: 1;
  font-size: 0.8rem;
}

.task-collaborator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.task-collaborator-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 600;
}

.task-collaborator-chip.is-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.task-collaborator-chip button {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.task-collaborator-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-collaborator-add-row select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 0.84rem;
}

.kanban-card-collab-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}

/* ── Project Management: Analytics ────────────────────────────────────────── */

.pm-analytics-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pm-analytics-table-card {
  padding: 22px;
}

.pm-analytics-table-card h3 {
  margin: 0 0 14px;
  font-size: 0.95rem;
}

.pm-dual-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
}

.pm-dual-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--muted);
}

.pm-dual-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.pm-dual-bar {
  width: 10px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
}

.pm-dual-bar.is-planned {
  background: var(--brand);
  opacity: 0.55;
}

.pm-dual-bar.is-logged {
  background: var(--brand);
}

.pm-chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--muted);
}

.pm-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pm-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.pm-legend-dot.is-planned {
  background: var(--brand);
  opacity: 0.55;
}

.pm-legend-dot.is-logged {
  background: var(--brand);
}

.utilization-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.utilization-pill.is-success {
  background: #f0fdf4;
  color: #15803d;
}

.utilization-pill.is-brand {
  background: #eff6ff;
  color: #1d4ed8;
}

.utilization-pill.is-warning {
  background: #fff7ed;
  color: #c2410c;
}

.utilization-pill.is-danger {
  background: #fef2f2;
  color: #b91c1c;
}

/* ── Organigramm Editor ─────────────────────────────────────────────────── */

/* Make app-content a flat flex column, removing padding, so editor fills everything */
.app-content:has(.org-chart-editor) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-content:has(.org-chart-editor) .workspace-shell-manager {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* dissolve intermediate grid containers so editor fills the flex space */
.app-content:has(.org-chart-editor) .manager-dashboard-frame,
.app-content:has(.org-chart-editor) .manager-main-stack {
  display: contents;
}

/* ── Editor shell ── */
.org-chart-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* ── Toolbar ── */
.org-chart-toolbar {
  flex-shrink: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}

.org-chart-toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
  margin: 0 2px;
  flex-shrink: 0;
}

.org-chart-toolbar-hint {
  margin-left: auto;
  font-size: 0.81rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-chart-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.org-chart-tool-btn:hover {
  background: var(--surface-soft);
}

.org-chart-tool-btn.is-active {
  background: var(--accent);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}

.org-chart-tool-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.org-chart-tool-action:hover {
  background: var(--surface-soft);
  color: var(--text);
}

/* ── Stage (the canvas) ── */
.org-chart-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── SVG overlay for connection lines ── */
.org-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Node cards ── */
.org-chart-node-card {
  position: absolute;
  width: 200px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: grab;
  user-select: none;
  box-shadow: var(--shadow);
  transition: box-shadow 0.12s, border-color 0.12s, transform 0.08s;
  z-index: 1;
}

.org-chart-node-card:hover {
  box-shadow: var(--hover-shadow);
  border-color: var(--line-strong);
}

.org-chart-node-card.is-saving {
  opacity: 0.55;
  cursor: wait;
}

.org-chart-node-card.is-dragging {
  cursor: grabbing;
  box-shadow: var(--hover-shadow);
  z-index: 100;
}

.org-chart-node-card.is-connect-source {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow);
}

.org-chart-node-card.is-connect-hover {
  border-color: var(--brand);
  background: var(--accent);
}

/* ── Node header ── */
.org-chart-node-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.org-chart-node-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.org-chart-node-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  flex: 1;
}

.org-chart-node-info strong {
  font-size: 0.83rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.org-chart-node-info span {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Manager chips ── */
.org-chart-node-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.org-chart-node-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}

.org-chart-node-chip:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.org-chart-node-chip .ti-x {
  font-size: 0.64rem;
  opacity: 0.7;
}

/* ── Loading / empty shell ── */
.org-chart-loading-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 48px 24px;
  color: var(--muted);
}

/* connect mode: crosshair on stage */
.org-chart-editor[data-org-chart-mode="connect"] .org-chart-stage {
  cursor: crosshair;
}

.org-chart-editor[data-org-chart-mode="connect"] .org-chart-node-card {
  cursor: pointer;
}


/* ── Clock: month editor (Einstempelübersicht) ────────────────────────────── */

.clock-month-editor-drawer {
  width: min(720px, calc(100vw - 24px));
}

.clock-month-editor-panel {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.clock-month-editor-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.clock-month-editor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clock-month-editor-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.clock-month-editor-row.is-weekend {
  background: var(--surface-muted);
}

.clock-month-editor-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.84rem;
}

.clock-month-editor-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}

.clock-month-editor-row input[type="time"] {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}

.clock-month-editor-row-actions {
  display: flex;
  gap: 6px;
}

@media (max-width: 820px) {
  .clock-month-editor-drawer {
    width: 100%;
  }

  .clock-month-editor-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .clock-month-editor-row-actions {
    justify-content: flex-end;
  }
}

/* ---- Direkt bearbeitbare Planer-/Kalenderzellen ---- */
.is-plan-clickable {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.is-plan-clickable:hover {
  border-color: var(--focus-border);
  box-shadow: 0 6px 18px var(--focus-ring), var(--shadow);
  transform: translateY(-1px);
}

.is-plan-clickable:focus-visible {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Leere Zellen bekommen zusätzlich einen "hier klicken zum Anlegen"-Hinweis */
.week-horizontal-cell.is-empty.is-plan-clickable:hover,
.week-compact-cell.is-empty.is-plan-clickable:hover {
  border-style: dashed;
  border-color: var(--brand);
  background: var(--accent);
}

.week-day-absent-chip.is-plan-clickable {
  cursor: pointer;
  border: 1px dashed transparent;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.week-day-absent-chip.is-plan-clickable:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--accent);
}

.entry-form.is-draft {
  border-color: var(--focus-border);
}

/* Automatisch berechnete Pause – erkennbar read-only, kein Eingabefokus-Look */
input[data-auto-break-output] {
  background: var(--surface-soft, rgba(127, 127, 127, 0.08));
  color: var(--muted-text, inherit);
  cursor: default;
}

input[data-auto-break-output]::-webkit-outer-spin-button,
input[data-auto-break-output]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.entry-net-duration {
  margin: -6px 0 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
  width: fit-content;
}

/* Leitungsbereich / Auswertung-Filter unter dem Kalender – sanft & abgesetzt */
.plan-controls-below {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  animation: plan-controls-below-in 0.3s ease both;
}

.plan-controls-below > * {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@keyframes plan-controls-below-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Schicht bearbeiten/anlegen als zentriertes Popup ---- */
.entry-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(20px);
  animation: entry-form-overlay-in 0.16s ease;
}

.entry-form-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  display: grid;
  animation: entry-form-modal-in 0.18s ease;
}

/* Das Formular sitzt jetzt im Popup – interne Panel-Animation/Verzögerung aus. */
.entry-form-modal .entry-form {
  margin: 0;
  width: 100%;
  animation: none;
  opacity: 1;
  transform: none;
  box-shadow: var(--hover-shadow);
}

@keyframes entry-form-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes entry-form-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .entry-form-overlay {
    padding: 14px;
    place-items: end center;
  }

  .entry-form-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
  }
}

/* ============================================================
   NATIVE PWA-DESIGN (hell) – Shell, Header, Dashboard, Nav
   ============================================================ */
body[data-app-mode="employee-pwa"] {
  --pwa-brand: #2563EB;
  --pwa-brand-soft: rgba(37, 99, 235, 0.10);
  --pwa-ink: #0f172a;
  --pwa-muted: #64748b;
  --pwa-line: rgba(15, 23, 42, 0.08);
  --pwa-card: #ffffff;
  --pwa-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
  --pwa-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, #eef2f9 0%, #e5eaf3 100%);
  color: var(--pwa-ink);
}

/* Shell / Layout */
body[data-app-mode="employee-pwa"] .employee-pwa-shell,
body[data-app-mode="employee-pwa"] .employee-pwa-auth-shell {
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    20px
    calc(env(safe-area-inset-bottom, 0px) + 116px);
  gap: 20px;
}
body[data-app-mode="employee-pwa"] .employee-pwa-main {
  gap: 16px;
}

/* App-Header */
body[data-app-mode="employee-pwa"] .employee-pwa-topbar {
  margin-bottom: 2px;
}
body[data-app-mode="employee-pwa"] .employee-pwa-brand-icon,
body[data-app-mode="employee-pwa"] .employee-pwa-auth-brand-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  border: none;
  box-shadow: var(--pwa-shadow);
}
body[data-app-mode="employee-pwa"] .employee-pwa-branding .greet {
  font-size: 13px;
  color: var(--pwa-muted);
}
body[data-app-mode="employee-pwa"] .employee-pwa-branding strong {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* Die Kopfzeile ist eine Zeile und muss eine bleiben. Vorher umbrach ein
   zweiteiliger Name ("Maximilian Glock") auf zwei Zeilen und schob im
   Leitungsmodus das Namenskuerzel rechts aus dem Bild - auf 320 px stand
   es 7 px hinter dem Rand. Der Namensblock darf jetzt schrumpfen und
   kuerzt mit Auslassungspunkten, die Knoepfe rechts nicht. */
body[data-app-mode="employee-pwa"] .employee-pwa-branding {
  min-width: 0;
  flex: 1 1 auto;
}
body[data-app-mode="employee-pwa"] .employee-pwa-brand-icon {
  flex: 0 0 auto;
}
body[data-app-mode="employee-pwa"] .employee-pwa-branding > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}
body[data-app-mode="employee-pwa"] .employee-pwa-branding strong,
body[data-app-mode="employee-pwa"] .employee-pwa-branding .greet {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-app-mode="employee-pwa"] .employee-pwa-topbar-actions {
  flex: 0 0 auto;
}

/* In der Leitungs-App stehen neben dem Namen noch die beiden Modulknoepfe
   und das Namenskuerzel. Auf sehr schmalen Geraeten bleibt fuer den Namen
   dann "Maxi..." uebrig. Das Logo ist an dieser Stelle das Entbehrlichste -
   welche App gerade offen ist, sagt schon die untere Leiste. */
@media (max-width: 380px) {
  body[data-app-mode="employee-pwa"] .manager-pwa-shell .employee-pwa-brand-icon {
    display: none;
  }
}

/* Dashboard: Uhr-Hero */
.pwa-clock {
  background: #0f172a;
  color: #fff;
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--pwa-shadow-lg);
  position: relative;
  overflow: hidden;
}
.pwa-clock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.pwa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pwa-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}
.pwa-chip.is-active .dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25); }
.pwa-chip.is-break .dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25); }
.pwa-clock-date { font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.pwa-clock-time {
  font-size: clamp(52px, 16vw, 64px);
  font-weight: 760;
  letter-spacing: -0.05em;
  line-height: 1;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.pwa-clock-time small { font-size: 0.5em; color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.pwa-clock-sub { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.65); position: relative; z-index: 1; }
.pwa-clock-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 12px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}
.pwa-clock .clock-action-button {
  min-height: 54px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.pwa-clock .clock-action-button.primary { background: #fff; color: var(--pwa-ink); }
.pwa-clock .clock-action-button.secondary { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pwa-clock .clock-action-button.danger { background: #f87171; color: #fff; }
.pwa-clock-note {
  margin-top: 18px;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  text-align: center;
}

/* Abschnitts-Label */
.pwa-sec-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--pwa-muted);
  margin: 6px 4px -4px;
}

/* Statistik + Fortschritt */
.pwa-stat {
  background: var(--pwa-card);
  border-radius: 22px;
  padding: 18px 20px;
  box-shadow: var(--pwa-shadow);
}
/* Label und Wert standen nebeneinander. "Diese Woche" und "21 Std. 30 Min.
   / 20 h" brauchen zusammen mehr Platz, als ein 320-px-Geraet hergibt -
   beide brachen um und die Karte sah zerrissen aus. Untereinander bekommt
   die Zahl die ganze Breite und wird zur Hauptsache der Karte. */
.pwa-stat-head { display: flex; flex-direction: column; gap: 2px; }
.pwa-stat-head span { font-size: 14px; color: var(--pwa-muted); }
.pwa-stat-head strong {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pwa-stat-head em { font-style: normal; font-size: 13px; color: var(--pwa-muted); }
.pwa-progress { height: 8px; border-radius: 999px; background: #eef1f6; margin-top: 14px; overflow: hidden; }
.pwa-progress i { display: block; height: 100%; border-radius: 999px; background: #2563eb; }
/* Bei 100 % ist der Balken voll - ob 100 % oder 130 % erreicht sind, waere
   daran nicht zu erkennen. Ueber Soll wechselt er deshalb die Farbe. */
.pwa-progress.is-over i { background: #059669; }

/* Stundensaldo unter dem Wochenbalken. Vorzeichen steht immer davor, die
   Farbe ist nur Verstaerkung. */
.pwa-stat-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef1f6;
}
.pwa-stat-balance span { font-size: 14px; color: var(--pwa-muted); }
.pwa-stat-balance strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.pwa-stat-balance.is-positive strong { color: var(--saldo-plus); }
.pwa-stat-balance.is-negative strong { color: var(--danger); }

/* Schnellaktionen */
.pwa-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pwa-qa {
  background: var(--pwa-card);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--pwa-shadow);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: inherit;
}
.pwa-qa .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--pwa-brand-soft); color: var(--pwa-brand); flex-shrink: 0; }
.pwa-qa .lbl { font-weight: 700; font-size: 15px; color: var(--pwa-ink); }
.pwa-qa.is-green .ic { background: rgba(16, 185, 129, 0.12); color: #059669; }
.pwa-qa:active { transform: scale(0.98); }

/* Die Modulkacheln (Surveys, Convert) sind Links, keine Knoepfe - sie
   fuehren aus der App heraus. Optisch bleiben sie identisch, damit die
   Reihe nicht in zwei Sorten zerfaellt; nur die Farbe unterscheidet sie
   von den Zeiterfassungs-Einstiegen. */
.pwa-qa.is-module { text-decoration: none; justify-content: flex-start; }
.pwa-qa.is-module .ic { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.pwa-qa.is-module .lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Generische Karte */
.pwa-card {
  background: var(--pwa-card);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--pwa-shadow);
}
.pwa-card > h3 { font-size: 16px; margin: 0 0 2px; }
.pwa-card > .sub { font-size: 13px; color: var(--pwa-muted); margin: 0; }
.pwa-shift-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pwa-shift-row .cal { width: 46px; height: 46px; border-radius: 14px; background: var(--pwa-brand-soft); color: var(--pwa-brand); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.pwa-shift-row .info strong { display: block; font-size: 15px; }
.pwa-shift-row .info span { font-size: 13px; color: var(--pwa-muted); }
.pwa-tl { display: flex; gap: 14px; margin-top: 14px; align-items: baseline; }
.pwa-tl .time { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14px; width: 48px; color: var(--pwa-brand); flex-shrink: 0; }
.pwa-tl .what { font-size: 14px; color: var(--pwa-muted); }
.pwa-empty { color: var(--pwa-muted); font-size: 14px; margin-top: 12px; }

/* Untere Navigationsleiste – schwebend */
body[data-app-mode="employee-pwa"] .employee-pwa-bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: min(480px, calc(100% - 28px));
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 9px 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--pwa-line);
  box-shadow: var(--pwa-shadow-lg);
  backdrop-filter: blur(20px);
}
body[data-app-mode="employee-pwa"] .employee-pwa-nav-button {
  min-height: 52px;
  gap: 4px;
  padding: 8px 2px;
  border-radius: 16px;
  color: var(--pwa-muted);
}
body[data-app-mode="employee-pwa"] .employee-pwa-nav-button i { font-size: 22px; }
body[data-app-mode="employee-pwa"] .employee-pwa-nav-button strong { font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: none; white-space: nowrap; }
body[data-app-mode="employee-pwa"] .employee-pwa-nav-button.is-active { background: transparent; color: var(--pwa-brand); }

/* Karten in weiteren Views (Schichten, Abwesenheit, Profil, Manager) */
body[data-app-mode="employee-pwa"] .employee-pwa-hero-card,
body[data-app-mode="employee-pwa"] .employee-pwa-section-card,
body[data-app-mode="employee-pwa"] .employee-pwa-profile-card,
body[data-app-mode="employee-pwa"] .employee-pwa-timeline-card,
body[data-app-mode="employee-pwa"] .employee-pwa-compact-card,
body[data-app-mode="employee-pwa"] .employee-pwa-auth-card,
body[data-app-mode="employee-pwa"] .panel {
  background: var(--pwa-card);
  border: 1px solid var(--pwa-line);
  border-radius: 22px;
  box-shadow: var(--pwa-shadow);
}
body[data-app-mode="employee-pwa"] .employee-pwa-live-facts div,
body[data-app-mode="employee-pwa"] .employee-pwa-profile-grid article,
body[data-app-mode="employee-pwa"] .employee-pwa-shift-card,
body[data-app-mode="employee-pwa"] .employee-pwa-profile-note,
body[data-app-mode="employee-pwa"] .absence-row {
  background: #f4f6fb;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
}
body[data-app-mode="employee-pwa"] .manager-pwa-kpi { border-radius: 18px; }

/* Login hell + luftig */
body[data-app-mode="employee-pwa"] .employee-pwa-auth-copy h1 { font-size: 30px; letter-spacing: -0.04em; }
body[data-app-mode="employee-pwa"] .employee-pwa-auth-form input {
  background: #f4f6fb;
  border: 1px solid var(--pwa-line);
  border-radius: 14px;
  padding: 0 16px;
}
body[data-app-mode="employee-pwa"] .employee-pwa-auth-form .primary-button {
  border-radius: 16px;
}

/* App-Header: Begrüßung + Avatar */
body[data-app-mode="employee-pwa"] .employee-pwa-topbar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
body[data-app-mode="employee-pwa"] .employee-pwa-branding { gap: 12px; flex-direction: row; align-items: center; }
body[data-app-mode="employee-pwa"] .employee-pwa-avatar-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--pwa-shadow);
  color: var(--pwa-brand);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

body[data-app-mode="employee-pwa"] .employee-pwa-profile-lang {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ============================================================
   Statistik als PDF
   Der Browser-Druckdialog erzeugt die Datei. Alles ausser der
   Auswertung wird ausgeblendet, damit ein sauberes Blatt entsteht.
   ============================================================ */
@media print {
  body.is-printing-statistics {
    background: #ffffff;
    color: #111111;
  }

  /* Navigation, Filter und Bedienelemente gehoeren nicht aufs Blatt. */
  body.is-printing-statistics .app-sidebar,
  body.is-printing-statistics .app-topbar,
  body.is-printing-statistics .sidebar-backdrop,
  body.is-printing-statistics .statistics-filter-card,
  body.is-printing-statistics .utility-drawer-shell,
  body.is-printing-statistics .toast-stack,
  body.is-printing-statistics .bugfix-launcher,
  body.is-printing-statistics [data-statistics-print] {
    display: none !important;
  }

  /* Die Navigation auszublenden reicht nicht: das Raster behaelt ihre
     Spalte, und der Inhalt landet darin. Deshalb alle Huellen auf block. */
  body.is-printing-statistics .app-shell,
  body.is-printing-statistics .app-layout,
  body.is-printing-statistics .app-content,
  body.is-printing-statistics .workspace-shell,
  body.is-printing-statistics .manager-dashboard-frame,
  body.is-printing-statistics .manager-main-stack,
  body.is-printing-statistics .statistics-shell {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Kopfzeile aus den Datenattributen, damit das Blatt fuer sich steht. */
  body.is-printing-statistics .statistics-shell::before {
    content: attr(data-print-title);
    display: block;
    margin-bottom: 4px;
    font-size: 15pt;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  /* Die allgemeine Druckregel blendet alles ausser .print-sheet aus –
     fuer die Statistik muss sie zurueckgenommen werden. */
  body.is-printing-statistics .workspace-shell > *,
  body.is-printing-statistics .workspace-shell {
    display: block !important;
  }

  body.is-printing-statistics .panel {
    box-shadow: none !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin: 0 0 10px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.is-printing-statistics .statistics-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  body.is-printing-statistics .statistics-chart-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Balken drucken sonst als leere Kaesten – Flaechen erzwingen. */
  body.is-printing-statistics .statistics-bar-fill,
  body.is-printing-statistics .statistics-bar-track {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.is-printing-statistics h2 {
    font-size: 11pt !important;
  }

  @page {
    size: A4 portrait;
    margin: 14mm 12mm;
  }
}

/* ============================================================
   Ladebildschirm nach dem Anmelden
   Liegt als Schicht ueber der App, damit das Dashboard darunter
   fertig rendert und beim Ausblenden vollstaendig dasteht.
   ============================================================ */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 1;
  transition: opacity 320ms ease;
}

.boot-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.boot-overlay .loading-card {
  animation: bootOverlayRise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bootOverlayRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-overlay {
    transition-duration: 1ms;
  }

  .boot-overlay .loading-card {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Nachtrag: Anpassungen fuer schmale Bildschirme
   Diese Regeln stehen weiter oben schon einmal in ihren @media-Bloecken,
   dort aber VOR den zugehoerigen Basisregeln. Da ein @media die Spezifitaet
   nicht erhoeht, gewann die spaetere Basisregel und die Anpassung lief ins
   Leere - auf dem Telefon blieben "Aktuell" und die Wochenplanung im
   Desktop-Raster stecken. Inhaltlich unveraendert, nur an eine Stelle
   gerueckt, an der sie wirken.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .current-kpi-grid,
  .current-focus-grid,
  .current-done-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .current-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .week-plan-layout {
    grid-template-columns: 1fr;
  }

  .week-day-card {
    min-height: 640px;
  }

  .manager-side-stack {
    position: static;
  }
}

@media (max-width: 820px) {
  .current-dashboard-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .current-dashboard-hero h2,
  .current-live-clock strong {
    font-size: 2.4rem;
  }

  .current-live-clock {
    justify-items: start;
  }

  .current-kpi-grid,
  .current-focus-grid,
  .current-done-strip {
    grid-template-columns: 1fr;
  }

  .week-plan-board,
  .week-plan-side-panel {
    padding: 18px;
  }

  .week-plan-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .week-plan-toolbar-right {
    justify-content: flex-start;
  }

  .week-plan-range strong {
    font-size: 1.24rem;
  }

  .week-plan-week-control input {
    min-width: 0;
    width: 100%;
    text-align: right;
  }

  .week-day-card {
    min-height: auto;
  }

  .week-day-card-head,
  .week-day-person-top {
    flex-direction: column;
    align-items: stretch;
  }

  .week-day-card-pills {
    justify-content: flex-start;
  }

  .week-day-person-meta {
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   Weg zu Shiftora Surveys aus der mobilen Kopfzeile

   In der Seitenleiste steht Surveys unter "Weiteres"; die PWA hat
   keine Seitenleiste. Der Knopf sitzt deshalb oben rechts neben dem
   Avatar und sieht aus wie dieser - gleiche Groesse, gleiche Rundung,
   gleicher Schatten. Gilt fuer Mitarbeitende und Leitung, weil beide
   Ansichten dieselbe Huelle benutzen.
   ============================================================ */
body[data-app-mode="employee-pwa"] .pwa-module-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: var(--pwa-shadow);
  color: var(--pwa-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

body[data-app-mode="employee-pwa"] .pwa-module-btn:active {
  transform: scale(0.94);
}

/* Auf sehr schmalen Geraeten steht neben Begruessung und Name sonst
   nichts mehr; der Knopf darf dann etwas kleiner werden. */
@media (max-width: 360px) {
  body[data-app-mode="employee-pwa"] .pwa-module-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* ============================================================
   Lohnlauf

   Eine Tabelle, in der Zahlen zu Geld werden. Deshalb ruhig
   gehalten: keine Farbflaechen, die von den Werten ablenken, dafuer
   klare Zustaende (offen / festgeschrieben / exportiert) und
   Hinweise, die man nicht uebersieht.

   Zahlen laufen mit tabular-nums, damit die Spalten stehen.
   ============================================================ */

.payroll-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.payroll-tab {
  position: relative;
  padding: 10px 18px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
}

.payroll-tab:hover { color: var(--text, #111827); }
.payroll-tab.is-active { color: var(--text, #111827); }
.payroll-tab.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #4f46e5);
}

.payroll-loading,
.payroll-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 14px;
}

.payroll-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  font-size: 14px;
}

/* ---- Kopfleiste ---- */
.payroll-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.payroll-period {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.payroll-period strong {
  min-width: 10.5ch;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.payroll-step {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 9px;
  background: var(--surface, #fff);
  cursor: pointer;
  color: inherit;
}

.payroll-step:hover { border-color: var(--accent, #4f46e5); }

.payroll-state {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
}

.payroll-state-open { background: rgba(217, 119, 6, 0.12); color: #92400e; }
.payroll-state-locked { background: rgba(5, 150, 105, 0.12); color: #065f46; }
.payroll-state-exported { background: rgba(79, 70, 229, 0.12); color: #3730a3; }

.payroll-hint { font-size: 12.5px; color: var(--text-muted, #6b7280); }
.payroll-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.payroll-note,
.payroll-warn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.payroll-note { background: rgba(79, 70, 229, 0.07); color: var(--text, #1f2937); }
.payroll-warn { background: rgba(217, 119, 6, 0.1); color: #92400e; }

/* ---- Tabelle ---- */
.payroll-table-wrap { overflow-x: auto; }

.payroll-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

.payroll-table th,
.payroll-table td {
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
  vertical-align: top;
}

.payroll-table th + th,
.payroll-table td + td { padding-left: 20px; }

.payroll-table th {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

.payroll-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-table tbody tr.has-warning td { background: rgba(217, 119, 6, 0.04); }
.payroll-table tfoot td {
  border-top: 2px solid var(--text, #111827);
  border-bottom: none;
  padding-top: 13px;
  font-weight: 700;
}

.payroll-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
}

.payroll-missing { font-style: normal; color: #b45309; }

.payroll-warnbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}

.payroll-detail td { background: rgba(0, 0, 0, 0.02); }
.payroll-detail ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 5px; }
.payroll-detail li { font-size: 13px; color: #92400e; }

/* ---- Einstellungen ---- */
.payroll-settings { display: grid; gap: 18px; }

.payroll-card {
  padding: 22px 24px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  background: var(--surface, #fff);
}

.payroll-card h3 { margin: 0 0 4px; font-size: 16px; }
.payroll-card > .payroll-sub { margin-bottom: 18px; max-width: 68ch; }

.payroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 20px;
}

.payroll-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.payroll-field > span { font-weight: 600; color: var(--text-muted, #6b7280); }
.payroll-field select,
.payroll-field input,
.payroll-input {
  padding: 9px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.14));
  border-radius: 10px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 14px;
  color: inherit;
  width: 100%;
}

.payroll-input-num { font-variant-numeric: tabular-nums; max-width: 140px; }

.payroll-checks { display: grid; gap: 10px; }
.payroll-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.payroll-check input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent, #4f46e5); cursor: pointer; }

.payroll-wage-table { min-width: 520px; }
.payroll-save { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ---- Feiertage ---- */
.payroll-holidays {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 20px;
}

.payroll-holiday {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  font-size: 14px;
}

.payroll-holiday-date { font-variant-numeric: tabular-nums; color: var(--text-muted, #6b7280); min-width: 9ch; }
.payroll-holiday-name { flex: 1; }
.payroll-holiday-rate { font-size: 12px; font-weight: 650; color: var(--text-muted, #6b7280); }
.payroll-holiday.is-high .payroll-holiday-rate { color: #b45309; }

/* ---- Umbrueche ---- */
@media (max-width: 720px) {
  .payroll-actions { margin-left: 0; width: 100%; }
  .payroll-grid { grid-template-columns: 1fr; }
  .payroll-holidays { grid-template-columns: 1fr; }
}

/* ============================================================
   Name als Einstieg in den Monat

   Der Name war bisher nur Text; die Bearbeitung lag zwei Klicks
   tief hinter "Details". Jetzt fuehrt der Name selbst dorthin -
   sichtbar erst beim Zeigen, damit die Liste ruhig bleibt.
   ============================================================ */
.clock-name-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.clock-name-link:hover,
.clock-name-link:focus-visible {
  border-bottom-color: currentColor;
}

/* ---- Monat als Tabelle ----

   Ruhig gehalten: keine senkrechten Linien, nur Zeilentrenner. Der
   Warnhinweis sitzt als eine Kante am Zeilenanfang - in der ersten
   Fassung lag er auf jeder Zelle und sah aus wie ein zerbrochenes
   Raster. Die Kopfzeile klebt, weil man bei dreissig Zeilen sonst
   nicht mehr weiss, welche Spalte was ist.
   ---------------------------------------------------------------- */
.clock-month-table-wrap { overflow-x: auto; margin-top: 2px; }

.clock-month-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

.clock-month-table th,
.clock-month-table td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}

.clock-month-table th:first-child,
.clock-month-table td:first-child { padding-left: 4px; }
.clock-month-table th:last-child,
.clock-month-table td:last-child { padding-right: 4px; }

.clock-month-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #fff);
  padding-top: 10px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong, rgba(0, 0, 0, 0.14));
}

.clock-month-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.clock-month-table tbody tr:hover td { background: rgba(0, 0, 0, 0.018); }

.clock-month-table input[type="time"] {
  width: 92px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.035);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.clock-month-table input[type="time"]:hover { border-color: var(--border, rgba(0, 0, 0, 0.12)); }
.clock-month-table input[type="time"]:focus {
  outline: none;
  border-color: var(--accent, #4f46e5);
  background: var(--surface, #fff);
}

/* Tage ohne Eintrag treten zurueck - man soll die belegten finden. */
.clock-month-table tr.is-empty td { color: var(--text-muted, #9ca3af); }
.clock-month-table tr.is-empty input[type="time"] { background: transparent; }

.clock-month-day { white-space: nowrap; }
.clock-month-day strong { font-variant-numeric: tabular-nums; }
.clock-month-day span { margin-left: 6px; color: var(--text-muted, #9ca3af); font-size: 12px; }
.clock-month-day em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #b45309;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-month-table tr.is-weekend td { background: rgba(0, 0, 0, 0.022); }
.clock-month-table tr.is-holiday td { background: rgba(217, 119, 6, 0.05); }

/* Eine Kante am Zeilenanfang, nicht an jeder Zelle. */
.clock-month-table tr.has-warning td:first-child {
  box-shadow: inset 3px 0 0 #d97706;
}

.clock-month-table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border-strong, rgba(0, 0, 0, 0.18));
  border-bottom: none;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
}

/* Aktionen bleiben blass, bis man die Zeile anfasst. Dreissig
   schwarze Knoepfe untereinander sind das Erste, was auffaellt -
   und das Letzte, was auffallen sollte. */
.clock-month-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.clock-month-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text-muted, #9ca3af);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.clock-month-table tr:hover .clock-month-btn,
.clock-month-btn:focus-visible { opacity: 1; }

.clock-month-btn.is-save:hover { background: rgba(5, 150, 105, 0.12); color: #047857; }
.clock-month-btn.is-delete:hover { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }
.clock-month-btn[disabled] { opacity: 1; color: var(--accent, #4f46e5); cursor: default; }

.clock-month-warn { color: #d97706; display: inline-flex; align-items: center; margin-right: 2px; }

.clock-month-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.09);
  color: #92400e;
  font-size: 13px;
}

@media (max-width: 720px) {
  .clock-month-table input[type="time"] { width: 80px; }
  .clock-month-table th, .clock-month-table td { padding: 6px; }
}


/* ============================================================
   Monatsblatt als mittiges Fenster

   Vorher fuhr es als Schublade von rechts ein. Bei einer Tabelle
   mit elf Spalten ist das die falsche Form: Der Blick springt an
   den Rand, und die Breite ist durch die Bildschirmkante begrenzt.
   Mittig bekommt die Tabelle den Platz, den sie braucht.

   Kopf und Monatswechsel bleiben stehen, nur die Tage rollen.
   ============================================================ */
.clock-detail-overlay.is-centered {
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}

.clock-month-modal {
  position: relative;
  z-index: 1;
  /* Die Breite folgt der Zahl der Zuschlagsspalten. Fest auf 1080 px
     riss die Tabelle bei sechs Spalten auseinander und hinterliess eine
     Luecke zwischen den Zeitfeldern und den Zahlen. */
  width: min(calc(700px + var(--spalten, 0) * 118px), 100%);
  max-height: min(88vh, 940px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

/* Das Panel darin rollt, das Fenster selbst nicht. */
.clock-month-modal .clock-month-editor-panel {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 26px 26px;
  gap: 14px;
}

/* Kopfzeile und Monatswechsel bleiben beim Rollen sichtbar. */
.clock-month-modal .panel-head,
.clock-month-modal .clock-month-editor-nav {
  position: sticky;
  z-index: 2;
  background: var(--surface, #fff);
}

.clock-month-modal .panel-head {
  top: 0;
  padding-bottom: 12px;
  margin-bottom: 0;
}

.clock-month-modal .clock-month-editor-nav {
  top: 58px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.07));
}

@media (max-width: 720px) {
  .clock-detail-overlay.is-centered { padding: 8px; }
  .clock-month-modal { max-height: 94vh; border-radius: 14px; }
  .clock-month-modal .clock-month-editor-panel { padding: 16px; }
}

/* Export: das eingestellte Format als Hauptknopf, die uebrigen daneben.
   Excel, CSV und PDF brauchen keine DATEV-Nummern und sind deshalb
   immer erreichbar. */
.payroll-export-group { display: flex; gap: 6px; flex-wrap: wrap; }
.payroll-export-group .ghost-button { padding-inline: 12px; }

/* Folgezeilen eines Tages: Das Datum steht nur an der ersten Schicht,
   sonst liest sich ein geteilter Dienst wie mehrere Tage. */
.clock-month-table tr.is-follow td { border-top: 0; }
.clock-month-table tr.is-follow td:first-child { padding-left: 16px; }
.clock-month-weiter { font-size: 11.5px; color: var(--text-muted, #9ca3af); }
.clock-month-btn.is-add:hover { background: rgba(79, 70, 229, 0.1); color: #4338ca; }

/* ============================================================
   Stempeln: Zustand am Ort der Handlung

   Fehlende Verbindung und wartende Stempelungen gehoeren dorthin,
   wo gestempelt wird - nicht in eine Fussnote am Seitenende. Wer
   im Keller steht, soll sehen, dass seine Zeit trotzdem sicher
   ist.
   ============================================================ */
.clock-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
}

.clock-note i { flex-shrink: 0; font-size: 17px; }
.clock-note span { flex: 1; }

.clock-note.is-offline { background: rgba(217, 119, 6, 0.12); color: #92400e; }
.clock-note.is-queued { background: rgba(79, 70, 229, 0.1); color: #3730a3; }
.clock-note.is-sessions { background: rgba(5, 150, 105, 0.1); color: #065f46; }

.clock-note-action {
  flex-shrink: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.7);
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
}

.clock-note-action:hover { background: #fff; }

body[data-app-mode="employee-pwa"] .clock-note {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--pwa-shadow);
}

body[data-app-mode="employee-pwa"] .clock-note.is-offline { color: #92400e; }
body[data-app-mode="employee-pwa"] .clock-note.is-queued { color: #3730a3; }
body[data-app-mode="employee-pwa"] .clock-note.is-sessions { color: #065f46; }

/* ==================================================================== *
 *  Verwaltung: Modulzugriff
 *
 *  Eine Matrix, die breiter werden darf als der Bildschirm - Personen
 *  links festgestellt, Module scrollen darunter durch. Bei neun Modulen
 *  und vierzig Namen ist das die einzige Form, die auf einen Blick die
 *  Frage "wer hat Signora?" beantwortet.
 * ==================================================================== */

.module-access-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.module-access-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.module-access-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 62ch;
}

/* Der eigene Scrollbereich: nur die Tabelle wandert, nie die Seite. */
.module-access-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.module-access-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 14px;
}

.module-access-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  vertical-align: bottom;
  font-weight: 650;
}

/* Die Namensspalte bleibt beim Querscrollen stehen - ohne sie weiss
   niemand mehr, in wessen Zeile das Haekchen sitzt. */
.module-access-table .module-access-person {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  min-width: 190px;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
}

.module-access-table thead .module-access-person {
  z-index: 3;
}

.module-access-person strong {
  display: block;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.module-access-person span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.module-access-count {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.module-access-col {
  text-align: center;
  min-width: 88px;
}

.module-access-col .ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 6px;
  border-radius: 11px;
  font-size: 18px;
  color: var(--m, var(--brand));
  background: color-mix(in srgb, var(--m, var(--brand)) 12%, transparent);
}

.module-access-col .nm {
  display: block;
  font-size: 12.5px;
}

.module-access-col .tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
}

.module-access-col.is-planned .ic,
.module-access-col.is-planned .nm {
  opacity: 0.45;
}

.module-access-table tbody tr:not(:last-child) th,
.module-access-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.module-access-table tbody tr:hover .module-access-person,
.module-access-table tbody tr:hover .module-access-cell {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.module-access-cell {
  text-align: center;
  padding: 8px;
}

/* Waehrend eine Zeile gespeichert wird, bleibt sie sichtbar, aber
   unantastbar - zwei schnelle Klicks duerfen sich nicht ueberholen. */
.module-access-table tbody tr.is-saving {
  opacity: 0.55;
}

.module-access-cell.is-planned .dash {
  color: var(--muted);
  opacity: 0.5;
}

.module-access-cell.is-fixed {
  color: var(--muted);
  opacity: 0.7;
  font-size: 17px;
}

/* Eigene Kastenform statt des Systemhaekchens: Das Systemhaekchen ist auf
   40 Zellen nebeneinander kaum zu treffen und in dunkler Darstellung
   schlecht zu sehen. */
.module-access-box {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.module-access-box input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.module-access-box > span[aria-hidden] {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: transparent;
  display: grid;
  place-items: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.module-access-box > span[aria-hidden]::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}

.module-access-box input:checked + span[aria-hidden] {
  background: var(--brand);
  border-color: var(--brand);
}

.module-access-box input:checked + span[aria-hidden]::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.module-access-box input:focus-visible + span[aria-hidden] {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.module-access-box input:disabled + span[aria-hidden] {
  opacity: 0.4;
  cursor: not-allowed;
}

.module-access-empty {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* ==================================================================== *
 *  Desk Sharing – wer sitzt heute wo
 *
 *  Variablennamen: --line, --surface, --brand, --muted. NICHT --border
 *  oder --panel, die gibt es hier nicht – eine undefinierte var() macht
 *  die ganze Deklaration ungueltig, ohne eine Meldung zu hinterlassen.
 * ==================================================================== */

.desk-ask-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
}

.desk-ask {
  width: min(390px, 100%);
  background: var(--surface);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.desk-ask-ic {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 26px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.desk-ask h2 {
  margin: 0 0 6px;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.desk-ask p {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted);
}

.desk-ask label {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.desk-ask input {
  font: inherit;
  color: inherit;
  /* Die Nummer ist die Hauptsache des Dialogs – entsprechend gross und
     mittig, damit auf dem Handy nicht danebengetippt wird. */
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 16px;
}

.desk-ask input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.desk-ask .primary-button {
  width: 100%;
  justify-content: center;
}

/* Bewusst als schlichter Textknopf: "Nicht vor Ort" ist die Ausnahme,
   nicht die gleichwertige zweite Wahl. Zwei gleich starke Knoepfe
   liessen die Leute ueberlegen, statt eine Nummer zu tippen. */
.desk-remote {
  margin-top: 12px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.desk-remote:hover {
  color: var(--text);
  text-decoration: underline;
}

.desk-remote:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Uebersicht ---------------------------------------------------- */

.desk-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.desk-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.desk-overview-head h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.desk-mine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
  color: var(--text);
  cursor: pointer;
}

.desk-mine i {
  color: var(--brand);
  font-size: 16px;
}

.desk-mine em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
  border-left: 1px solid var(--line-strong);
  padding-left: 8px;
}

.desk-mine.is-empty {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

.desk-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.desk-room {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--surface);
}

.desk-room header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.desk-room .nr {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.desk-room .anz {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.desk-room ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.desk-room li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.desk-room .av {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.desk-room .nm {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die eigene Zeile hervorheben – man sucht sich beim Draufschauen
   zuerst selbst, um zu pruefen ob der Eintrag stimmt. */
.desk-room li.is-me .nm {
  font-weight: 650;
}

.desk-room li.is-me .av {
  color: #fff;
  background: var(--brand);
}

.desk-remote-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.desk-remote-list .lbl {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

.desk-remote-list .chip {
  font-size: 13px;
  color: var(--muted);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.desk-empty {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* In der Mitarbeiter-App setzt die PWA .panel auf padding: 0 – die
   Kacheln daneben (.pwa-card) bringen ihren Abstand selbst mit. Ohne
   das hier klebten Ueberschrift und "Nicht vor Ort" am linken Rand,
   waehrend die Nachbarkarten eingerueckt waren. */
body[data-app-mode="employee-pwa"] .desk-overview {
  padding: 20px;
  border-radius: 22px;
}

/* ---- Wer sitzt wo: eigene Ansicht ---------------------------------- */

.desk-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.desk-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.desk-page-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.desk-page-head p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 58ch;
}

.desk-zahlen {
  display: flex;
  gap: 22px;
  padding-bottom: 2px;
}

.desk-zahlen span {
  font-size: 13.5px;
  color: var(--muted);
}

.desk-zahlen strong {
  font-size: 19px;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-right: 5px;
}

/* Auf der eigenen Seite duerfen die Raumkarten groesser werden als in
   der Handy-Karte - hier ist Platz. */
.desk-rooms.is-page {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  /* Ohne das streckt das Raster jede Karte auf die Hoehe der vollsten -
     ein Raum mit einer Person haette dann eine handbreit Leere darunter. */
  align-items: start;
}

.desk-rooms.is-page .desk-room {
  padding: 16px 17px;
}

.desk-rooms.is-page .desk-room .nr {
  font-size: 20px;
}

/* Der Leerzustand war vorher eine graue Zeile in einem flachen
   Streifen - das sah nach Fehler aus statt nach "noch niemand da".
   Jetzt mittig, mit Symbol und dem Weg zur naechsten Handlung. */
.desk-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 46px 20px 50px;
}

.desk-leer .ic {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 28px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  margin-bottom: 4px;
}

.desk-leer strong {
  font-size: 17px;
  letter-spacing: -0.015em;
}

.desk-leer p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
  max-width: 42ch;
}

/* ==================================================================== *
 *  Wer sitzt wo – eckig und mit mehr Luft
 *
 *  Auf Wunsch: keine abgerundeten Ecken in dieser Ansicht. Das gilt
 *  durchgaengig – Karte, Raumkacheln, Knopf, Namensschilder und die
 *  Namenskuerzel. Ein einzelnes rundes Element zwischen lauter eckigen
 *  faellt staerker auf als vorher die Rundung selbst.
 *
 *  Steht bewusst am Dateiende: Spaeter genannte Regeln gewinnen bei
 *  gleicher Spezifitaet, und .panel weiter oben bringt sowohl Rundung
 *  als auch Abstaende mit.
 * ==================================================================== */

.desk-page,
body[data-app-mode="employee-pwa"] .desk-overview,
.desk-overview {
  border-radius: 0;
}

.desk-page .desk-room,
.desk-overview .desk-room,
.desk-page .desk-mine,
.desk-overview .desk-mine,
.desk-page .desk-room .av,
.desk-overview .desk-room .av,
.desk-page .desk-remote-list .chip,
.desk-overview .desk-remote-list .chip,
.desk-leer .ic {
  border-radius: 0;
}

/* ---- Luft ---------------------------------------------------------- */

.desk-page {
  gap: 30px;
  /* .panel bringt seinen eigenen Innenabstand mit; hier darf es mehr
     sein, weil die Ansicht sonst am Rand klebt. */
  padding: 26px 26px 30px;
}

.desk-page-head h2 {
  margin-bottom: 7px;
}

.desk-page-head p {
  line-height: 1.55;
}

/* Die Zahlen bekommen eine Trennlinie statt nur Abstand - sie gehoeren
   zur Uebersicht, nicht mehr zur Einleitung. */
.desk-page .desk-zahlen {
  gap: 30px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.desk-page .desk-rooms.is-page {
  margin-top: -8px;
  gap: 16px;
}

.desk-rooms.is-page .desk-room {
  padding: 18px 19px 19px;
}

.desk-room header {
  margin-bottom: 14px;
}

.desk-room ul {
  gap: 10px;
}

.desk-room .av {
  width: 27px;
  height: 27px;
}

/* Die Abwesenden stehen unter einer Linie: sie sind eine eigene Aussage,
   kein Anhaengsel der Raumliste. */
.desk-page .desk-remote-list {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  gap: 10px;
}

.desk-page .desk-remote-list .chip {
  padding: 6px 13px;
}

.desk-page .desk-mine {
  padding: 9px 15px;
}

.desk-leer {
  padding: 60px 20px 64px;
}

/* Der Dialog gehoert zum selben Merkmal und wird mit eckig. Ein rundes
   Fenster ueber einer eckigen Ansicht sieht aus wie zwei Bauteile aus
   verschiedenen Programmen. */
.desk-ask,
.desk-ask-ic,
.desk-ask input,
.desk-ask .primary-button,
.desk-remote {
  border-radius: 0;
}

/* Der Weg zurueck zum Hub – bewusst neben dem Logo, wie das Rastersymbol
   bei Microsoft. Von dort aus erreicht man jede App, auch die, die
   gerade nicht in der Leiste steht. */
.sidebar-hub-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: 6px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  transition: background-color 140ms ease, color 140ms ease;
}

.sidebar-hub-btn:hover {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.app-sidebar.is-collapsed .sidebar-hub-btn {
  margin: 0 auto 4px;
}

/* Zwei-Faktor: Hinweis unter dem Codefeld im Anmeldeformular. Das Feld
   selbst wird erst angelegt, wenn der Server danach fragt - deshalb
   steht hier nur, was sich nicht aus den Formularregeln ergibt. */
.login-totp-hint {
  margin: -6px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #616a78);
}

#login-form input[name="totpCode"] {
  letter-spacing: 0.28em;
  text-align: center;
}

/* Zwei-Faktor: das Häkchen "diesem Gerät vertrauen" unter dem Codefeld. */
.login-trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #616a78);
  cursor: pointer;
}

.login-trust input {
  flex: 0 0 auto;
  margin: 1px 0 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}