/*
 * Intensivtransport-Bereich: App-Shell.
 * Sidebar (md+) + Topbar; auf Mobil ein Drawer, der über den
 * Hamburger-Toggle in der Topbar geöffnet wird.
 * Pattern aus dem Claude-Design-Handoff (ui_kits/intensivtransport/_kit.css);
 * alle Werte über Tokens.
 */

/* === Layout-Grid ==================================================== */
.itn-layout {
  /* Sidebar-Breite zentral als Variable — Collapse-Modus überschreibt
     diese auf die Icon-Schmal-Breite, der Rest des Grids passt sich
     automatisch an. */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;

  display: grid;
  grid-template: "topbar" var(--header-height) "content" 1fr / 1fr;
  min-height: 100vh;
}

@media (width >= 768px) {
  .itn-layout {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar content";
    transition: grid-template-columns var(--duration-base, 200ms) var(--easing-standard);
  }

  .itn-layout.is-nav-collapsed,
  html[data-nav-collapsed] .itn-layout {
    --sidebar-w: var(--sidebar-w-collapsed);
  }
}

/* Smoother Collapse/Expand: das Grid animiert die Sidebar-Breite,
   Labels/Brand faden zusätzlich kurz aus/ein, damit der Übergang
   nicht „abgehackt" wirkt. */
.itn-nav__link-label,
.itn-sidebar__brand .itn-brand,
.itn-nav__group {
  transition: opacity var(--duration-fast, 120ms) var(--easing-standard);
}

.is-nav-collapsed .itn-nav__link-label,
.is-nav-collapsed .itn-sidebar__brand .itn-brand,
.is-nav-collapsed .itn-nav__group,
html[data-nav-collapsed] .itn-nav__link-label,
html[data-nav-collapsed] .itn-sidebar__brand .itn-brand,
html[data-nav-collapsed] .itn-nav__group {
  opacity: 0;
}

/* === Sidebar (md+) ================================================== */
.itn-sidebar {
  display: none;
  grid-area: sidebar;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: var(--z-header);
}

@media (width >= 768px) {
  .itn-sidebar { display: flex; }
}

.itn-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Toggle-Knopf zum Ein-/Ausklappen der Sidebar. Klein, sekundär,
   neben dem Brand-Wortmark. Im Collapsed-Modus zentriert (Brand ist
   ausgeblendet, also nimmt der Toggle die gesamte Breite ein). */
.itn-sidebar__nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.itn-sidebar__nav-toggle:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.itn-sidebar__nav-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ── Collapsed-Modus: nur Icons, Beschriftungen verstecken ──
   Reagiert auf .is-nav-collapsed auf .itn-layout (Blazor-Binding)
   ODER html[data-nav-collapsed] (Pre-Paint-Script aus App.razor).
   Tooltips zeigt der Browser via native title-Attribut auf den
   NavLinks. */
.is-nav-collapsed .itn-sidebar__brand .itn-brand,
.is-nav-collapsed .itn-nav__link-label,
.is-nav-collapsed .itn-nav__group,
.is-nav-collapsed .itn-sidebar__user-meta,
html[data-nav-collapsed] .itn-sidebar__brand .itn-brand,
html[data-nav-collapsed] .itn-nav__link-label,
html[data-nav-collapsed] .itn-nav__group,
html[data-nav-collapsed] .itn-sidebar__user-meta {
  display: none;
}

.is-nav-collapsed .itn-sidebar__brand,
html[data-nav-collapsed] .itn-sidebar__brand {
  justify-content: center;
  padding: 0;
}

.is-nav-collapsed .itn-nav__link,
html[data-nav-collapsed] .itn-nav__link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.is-nav-collapsed .itn-sidebar__footer,
html[data-nav-collapsed] .itn-sidebar__footer {
  /* Im Collapsed-Modus blenden wir den Footer komplett aus
     (Avatar + Logout). Abmelden geht weiter über das User-Menü oben
     rechts in der Topbar — der Footer wäre auf 64 px nur Platz-
     Verbrauch ohne Mehrwert. */
  display: none;
}

/* Badge rutscht im eingeklappten Modus klein nach oben rechts ans
   Icon — sonst hätten wir keinen Platz neben dem Icon. */
.is-nav-collapsed .itn-nav__link-badge,
html[data-nav-collapsed] .itn-nav__link-badge {
  position: absolute;
  top: 4px;
  right: 8px;
}

/* ── Eigene Tooltips für die Icon-Sidebar ───────────────────────────
   Native Browser-Title sind hässlich + kommen mit Delay. Im
   eingeklappten Modus zeigen wir stattdessen einen CSS-Tooltip
   rechts neben dem Icon, sobald die Maus drüber ist (oder das Item
   den Fokus hat). Inhalt kommt aus dem title-Attribut — keine extra
   DOM-Arbeit nötig. Im ausgeklappten Modus bleibt der Tooltip aus,
   weil das Label ohnehin sichtbar ist. */
.is-nav-collapsed .itn-nav__link[data-tooltip]::after,
html[data-nav-collapsed] .itn-nav__link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  background: var(--color-text);
  color: var(--color-surface);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-1, 0 2px 6px rgb(0 0 0 / 15%));
  pointer-events: none;
  z-index: calc(var(--z-popover) + 1);

  /* Versteckt im Default, sanft eingefadet bei Hover. */
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity var(--duration-fast, 120ms) var(--easing-standard),
              transform var(--duration-fast, 120ms) var(--easing-standard);
}

.is-nav-collapsed .itn-nav__link[data-tooltip]:hover::after,
.is-nav-collapsed .itn-nav__link[data-tooltip]:focus-visible::after,
html[data-nav-collapsed] .itn-nav__link[data-tooltip]:hover::after,
html[data-nav-collapsed] .itn-nav__link[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Kleiner Pfeil-Anker (CSS-Triangle) als Verbindung zum Icon — macht
   klar, woher der Tooltip „kommt". */
.is-nav-collapsed .itn-nav__link[data-tooltip]::before,
html[data-nav-collapsed] .itn-nav__link[data-tooltip]::before {
  content: "";
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid var(--color-text);
  opacity: 0;
  transition: opacity var(--duration-fast, 120ms) var(--easing-standard);
  pointer-events: none;
  z-index: calc(var(--z-popover) + 1);
}

.is-nav-collapsed .itn-nav__link[data-tooltip]:hover::before,
.is-nav-collapsed .itn-nav__link[data-tooltip]:focus-visible::before,
html[data-nav-collapsed] .itn-nav__link[data-tooltip]:hover::before,
html[data-nav-collapsed] .itn-nav__link[data-tooltip]:focus-visible::before {
  opacity: 1;
}

/* Im Collapsed-Modus MUSS overflow visible bleiben — sonst clippt
   die Sidebar das Popover-Flyout-Menue (Einstellungen, Plan & Betrieb),
   das per position: absolute nach rechts aus der Sidebar rausragt.
   Trade-off: Scrolling im Collapsed-Modus ist deaktiviert. Im Praxis-
   Einsatz reicht die Hoehe (Icons ~44px, ~15 Items passen in 720px),
   und sobald Scroll noetig waere, expandiert der User die Sidebar. */
.is-nav-collapsed .itn-sidebar,
.is-nav-collapsed .itn-sidebar__nav,
html[data-nav-collapsed] .itn-sidebar,
html[data-nav-collapsed] .itn-sidebar__nav {
  overflow: visible;
}

/* Brand-Wordmark: zweizeilig, erste Zeile in Akzentfarbe.
   Akzentfarbe folgt --color-brand → automatisch theme-aware.
   line-height: 1.3 lässt Platz für Descender (g/p/q in
   „Neubrandenburg") in der zweiten Zeile. */
.itn-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.itn-brand__accent {
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-brand__rest {
  color: var(--color-text);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-brand--lg .itn-brand__accent,
.itn-brand--lg .itn-brand__rest {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.itn-sidebar__nav {
  flex: 1;

  /* min-height: 0 ist Pflicht in Flex-Children mit overflow-y: auto.
     Ohne diese Zeile expandiert der Container ueber den Viewport
     hinaus, statt zu scrollen — auf 13"-Geraeten mit voller
     Wachleiter-Rolle landen "Krankenhaeuser" und "Showcase" sonst
     unter dem unteren Bildschirmrand und sind unerreichbar. */
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2);

  /* Schmale, dezente Scrollbar — passt sich dem Theme an. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.itn-sidebar__nav::-webkit-scrollbar {
  width: 6px;
}

.itn-sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.itn-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

.itn-sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  min-height: 56px;
}

.itn-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.itn-sidebar__user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}

.itn-sidebar__user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-sidebar__user-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itn-sidebar__logout-form { margin: 0; }

.itn-sidebar__logout-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.itn-sidebar__logout-btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.itn-sidebar__logout-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.itn-sidebar__login-btn {
  flex: 1;
  gap: var(--space-2);
}

/* === Topbar (alle Breakpoints) ====================================== */
.itn-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
}

@media (width >= 768px) {
  .itn-topbar { padding: 0 var(--space-6); }
}

.itn-topbar__brand-mobile {
  display: flex;
  align-items: center;
  min-width: 0;
}

@media (width >= 768px) {
  .itn-topbar__brand-mobile { display: none; }
}

.itn-topbar__crumb {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  display: none;
}

@media (width >= 768px) {
  .itn-topbar__crumb { display: inline; }
}

.itn-topbar__spacer { flex: 1; }

.itn-topbar__user-chip {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
}

/* Tablet (≥ 600 px): Chip sichtbar, Name noch versteckt — kompakt. */
@media (width >= 600px) {
  .itn-topbar__user-chip {
    display: inline-flex;
  }
}

.itn-topbar__user-name-text {
  display: none;
}

/* Desktop (≥ 768 px): voller Name + Avatar. */
@media (width >= 768px) {
  .itn-topbar__user-name-text {
    display: inline;
  }
}

.itn-topbar__user-chip .itn-sidebar__avatar {
  width: 24px;
  height: 24px;
  font-size: var(--text-xs);
}

.itn-topbar__login-link {
  padding: var(--space-1) var(--space-4);
  min-height: 32px;
  font-size: var(--text-sm);
}

.itn-topbar__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.itn-topbar__menu-toggle:hover {
  background: var(--color-surface-3);
}

.itn-topbar__menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (width >= 768px) {
  .itn-topbar__menu-toggle {
    display: none;
  }
}

/* === Content ======================================================== */
.itn-content {
  grid-area: content;
  padding: var(--space-4);
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
}

@media (width >= 768px) {
  .itn-content { padding: var(--space-6); }
}

/* === Drawer (nur Mobil; auf md+ existiert die Sidebar) ============== */
.itn-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(15 23 42 / 50%);
  z-index: var(--z-modal);
  animation: itn-drawer-fade var(--duration-normal) var(--easing-standard);
}

.itn-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-3);
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  flex-direction: column;
  animation: itn-drawer-in var(--duration-normal) var(--easing-standard);
}

@media (width >= 768px) {
  .itn-drawer-backdrop,
  .itn-drawer { display: none; }
}

.itn-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  flex-shrink: 0;
}

.itn-drawer__header .itn-brand {
  flex: 1;
  min-width: 0;
}

.itn-drawer__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}

.itn-drawer__close:hover {
  background: var(--color-surface-3);
}

.itn-drawer__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.itn-drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

@keyframes itn-drawer-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes itn-drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .itn-drawer-backdrop,
  .itn-drawer { animation: none; }
}

/* === Sidebar/Drawer-Nav-Items ======================================= */
.itn-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.itn-nav__group {
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-bold);
}

.itn-nav__subgroup {
  padding: var(--space-2) var(--space-2) var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

/* ── Einstellungen-Flyout ───────────────────────────────────────────── */

/* Der Trigger ist als <button> realisiert (a11y). Wir setzen die nativen
   Button-Defaults zurück, damit das Item genau wie ein NavLink aussieht. */
button.itn-nav__link--trigger {
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.itn-nav__item--has-flyout {
  position: relative;
}

.itn-nav__flyout-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.itn-nav__item--has-flyout:hover .itn-nav__flyout-arrow,
.itn-nav__item--has-flyout.is-open .itn-nav__flyout-arrow {
  transform: rotate(180deg);
}

/* Expanded nav: Flyout klappt inline nach unten auf (kein overflow-Problem,
   da der Inhalt innerhalb der Sidebar-Breite bleibt). Geöffnet wird per
   Hover (Maus) ODER per Blazor-State .is-open (Tastatur/Touch). */
.itn-nav__flyout {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--easing-standard);
}

.itn-nav__item--has-flyout:hover .itn-nav__flyout,
.itn-nav__item--has-flyout.is-open .itn-nav__flyout {
  /* Genug Platz fuer alle Einstellungs-Sub-Items + Showcase, ohne
     dass das letzte Item abgeschnitten wird. Wenn die Sidebar selbst
     zu kurz wird (13"-Geraet), scrollt sie via .itn-sidebar__nav. */
  max-height: 560px;
}

/* Sub-Items einrücken */
.itn-nav__flyout .itn-nav__link {
  padding-left: var(--space-8);
}

/* Labels in Flyout-Items immer sichtbar — Collapsed-State versteckt
   .itn-nav__link-label global; das darf hier nicht greifen. */
.itn-nav__flyout .itn-nav__link-label {
  display: block !important;
  opacity: 1 !important;
}

/* Collapsed nav: Flyout geht nach rechts raus — Sidebar hat im
   Collapsed-State bereits overflow:visible, kein Zittern. */
html[data-nav-collapsed] .itn-nav__flyout,
.is-nav-collapsed .itn-nav__flyout {
  max-height: none;
  overflow: visible;
  padding: var(--space-1);
  position: absolute;
  left: calc(100% + var(--space-1));
  top: 0;
  min-width: 192px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  z-index: var(--z-popover);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard),
              visibility var(--duration-fast) var(--easing-standard);
}

html[data-nav-collapsed] .itn-nav__item--has-flyout:hover .itn-nav__flyout,
html[data-nav-collapsed] .itn-nav__item--has-flyout.is-open .itn-nav__flyout,
.is-nav-collapsed .itn-nav__item--has-flyout:hover .itn-nav__flyout,
.is-nav-collapsed .itn-nav__item--has-flyout.is-open .itn-nav__flyout {
  visibility: visible;
  opacity: 1;
}

/* Einrückung in der collapsed-Flyout-Card zurücksetzen */
html[data-nav-collapsed] .itn-nav__flyout .itn-nav__link,
.is-nav-collapsed .itn-nav__flyout .itn-nav__link {
  padding-left: var(--space-3);
}

/* Chevron im collapsed-Modus ausblenden (nur Icon sichtbar) */
html[data-nav-collapsed] .itn-nav__flyout-arrow,
.is-nav-collapsed .itn-nav__flyout-arrow {
  display: none;
}

.itn-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.itn-nav__link:hover {
  background: var(--color-surface-3);
  text-decoration: none;
}

.itn-nav__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.itn-nav__link .t-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.itn-nav__link.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.itn-nav__link.active .t-icon {
  color: var(--color-primary);
}

.itn-nav__link-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-nav__link-badge {
  margin-left: auto;
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
}

.itn-nav__link.active .itn-nav__link-badge {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

/* Punkt-Indikator am Nav-Link lebt jetzt im Design-System als
   <TNavIndicatorDot> (.t-indicator-dot). Hier nichts mehr. */

/* === Passwort-Reset (Wachleiter-Seite) ============================== */
.itn-pwreset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.itn-pwreset__loading { color: var(--color-text-muted); }

.itn-pwreset__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-pwreset__name {
  margin: 0;
}

.itn-pwreset__username {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.itn-pwreset__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 0 var(--space-3) 0;
}

.itn-pwreset__meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.itn-pwreset__meta dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itn-pwreset__meta dd {
  margin: 0;
  font-weight: var(--weight-bold);
}

.itn-pwreset__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3) 0;
}

.itn-pwreset__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.itn-pwreset__input { font-family: var(--font-mono); }

.itn-pwreset__error {
  margin: var(--space-2) 0 0 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* === Anonymous landing (vor Login) ================================== */
.itn-anonymous {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
  background: var(--color-surface-2);
}

.itn-anonymous__card {
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
  text-align: center;
}

.itn-anonymous__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.itn-anonymous__logo .itn-brand { align-items: center; }
.itn-anonymous__login { flex: 1; }

/* === Dashboard ====================================================== */
.itn-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.itn-dashboard__stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 168px;
}

/* Jede KPI-Zelle = Karte + (optionaler) Action-Slot.
   Der Slot existiert immer — auch wenn leer — damit alle Karten in
   derselben Zeile gleich groß werden und die Buttons exakt unter
   ihrer Karte stehen.
   Einheitliche Höhe über alle Reihen hinweg wird durch grid-auto-rows
   auf dem Stats-Grid erzwungen, nicht durch min-height hier. */
.itn-stat-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.itn-stat-cell > .t-stat,
.itn-stat-cell > .itn-map-stat {
  flex: 1;
  min-height: 0;
}

.itn-stat-cell__action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
}

/* === Status-Stepper (BOS-Status-Zyklus 1·2·3·4·7·8) ================ */
.itn-status-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.itn-status-stepper__step {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.itn-status-stepper__step.is-current {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* === Fahrzeug-Standort-Karte (Map-Stat) ============================ */
.itn-map-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}

.itn-map-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 var(--space-2);
}

.itn-map-stat__map {
  flex: 1;
  min-height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.itn-map-stat__map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.itn-map-stat__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-2);
}

/* SVG-Map-Layer (alle Werte über Tokens, theme-aware) */
.itn-map-svg__base {
  fill: var(--color-surface-2);
}

.itn-map-svg__block {
  fill: var(--color-surface);
}

.itn-map-svg__park {
  fill: var(--color-success-soft);
  opacity: 0.6;
}

.itn-map-svg__road {
  stroke: var(--color-border-strong);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.itn-map-svg__pulse {
  fill: var(--color-primary);
  transform-box: fill-box;
  transform-origin: center;
  animation: itn-map-pulse 2.4s ease-in-out infinite;
}

@keyframes itn-map-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }

  50% {
    transform: scale(2);
    opacity: 0;
  }
}

.itn-map-svg__pin-bg {
  fill: var(--color-primary);
}

.itn-map-svg__pin-dot {
  fill: var(--color-primary-fg);
}

@media (prefers-reduced-motion: reduce) {
  .itn-map-svg__pulse {
    animation: none;
    opacity: 0.4;
  }
}

.itn-dashboard__cols {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (width >= 1000px) {
  .itn-dashboard__cols {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.itn-dashboard__col-main,
.itn-dashboard__col-side {
  min-width: 0;
}

.itn-dashboard__col-main,
.itn-dashboard__col-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* === Sauerstoffdepot — Zusammenfassungs-Band ========================== */
.itn-depot-summary {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;

  /* stretch (nicht start): beide Karten werden gleich hoch, egal wie viel
     Inhalt sie haben — sonst wirkt das Band „kreuz und quer". */
  align-items: stretch;
}

@media (width >= 768px) {
  .itn-depot-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Karten füllen die (durch stretch) zugewiesene Zellenhöhe komplett aus. */
.itn-depot-summary > .t-card {
  height: 100%;
}

/* === Sauerstoffdepot — Aufmerksamkeit-Panel =========================== */
.itn-attention {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-attention__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.itn-attention__count {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* === Sauerstoffdepot — Bestand je Größe =============================== */
.itn-bestand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-bestand__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.itn-bestand__name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-bestand__metrics {
  display: flex;
  gap: var(--space-4);
}

.itn-bestand__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.itn-bestand__metric-value {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.itn-bestand__metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* === Sauerstoffdepot — KPI-Streifen ================================= */
.itn-depot-kpi {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width >= 900px) {
  .itn-depot-kpi {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Farbige Akzent-Linie oben — signalisiert sofort die Bedeutung jeder Zahl */
.itn-depot-kpi .t-stat {
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-fast) var(--easing-standard);
}

.itn-depot-kpi .t-stat--accent-success  { border-top-color: var(--color-success); }
.itn-depot-kpi .t-stat--accent-primary  { border-top-color: var(--color-primary); }
.itn-depot-kpi .t-stat--accent-danger   { border-top-color: var(--color-danger); }
.itn-depot-kpi .t-stat--accent-warning  { border-top-color: var(--color-warning); }
.itn-depot-kpi .t-stat--accent-info     { border-top-color: var(--color-info); }

/* Warnfarbe nur wenn belegt — ruhig grau im Normalzustand */
.itn-depot-kpi .t-stat--accent-danger.is-alert  .t-stat__value { color: var(--color-danger-strong); }
.itn-depot-kpi .t-stat--accent-warning.is-alert .t-stat__value { color: var(--color-warning-strong); }

/* Danger-Kachel visuell alarmieren wenn belegt */
.itn-depot-kpi .t-stat--accent-danger.is-alert {
  background: var(--color-danger-soft);
  box-shadow: 0 0 0 1px var(--color-danger);
}

/* === Sauerstoffdepot — Größen-Breakdown-Tiles ======================= */
.itn-groessen-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.itn-groesse-tile {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-groesse-tile__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.itn-groesse-tile__metrics {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.itn-groesse-tile__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
}

.itn-groesse-tile__value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  line-height: 1.1;
}

.itn-groesse-tile__value--voll     { color: var(--color-success-strong); }
.itn-groesse-tile__value--fahrzeug { color: var(--color-primary-strong); }

.itn-groesse-tile__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itn-groesse-tile__sep {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* === Sauerstoffdepot — Filter-Leiste ================================ */
.itn-depot-filter {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.itn-depot-filter__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  min-height: 36px;
}

.itn-depot-filter__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* === Sauerstoffdepot — Tabellen-Aktions-Buttons ==================== */
.itn-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Icon-only Ghost-Buttons: quadratisch, kompakt */
.itn-row-actions__icon {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Primäre Aktions-Buttons (Aufs Fahrzeug / Zurück ins Depot / An Lieferant)
   bekommen eine feste Breite, die am längsten Label „Zurück ins Depot"
   bemessen ist (icon 14 + gap 8 + text ~125 + pad 24 ≈ 171 px → 182 px
   mit Puffer). white-space:nowrap verhindert Umbruch bei schmalem Viewport. */
.itn-row-actions .t-btn:not(.itn-row-actions__icon) {
  min-width: 182px;
  justify-content: center;
  white-space: nowrap;
}

/* Barcode in Monospace — von Fließtext optisch abgesetzt */
.itn-barcode {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* === Sauerstoffdepot — Bestandsübersicht (Depot + Fahrzeuge) ======== */
.itn-bestand-uebersicht {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (width >= 800px) {
  .itn-bestand-uebersicht {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

/* Depot-Spalte: feste Mindestbreite */
.itn-bestand-depot {
  flex-shrink: 0;
}

/* Vertikaler Trenner — nur auf md+ sichtbar */
.itn-bestand-vsep {
  display: none;
}

@media (width >= 800px) {
  .itn-bestand-vsep {
    display: block;
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
    flex-shrink: 0;
  }
}

/* Abschnitts-Überschriften (DEPOT / FAHRZEUGE) */
.itn-bestand-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

/* Depot-Zeilen */
.itn-bestand-depot-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 220px;
}

.itn-bestand-depot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.itn-bestand-depot-row__name {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  min-width: 32px;
}

.itn-bestand-depot-row__vals {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.itn-bestand-depot-row__voll {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-success-strong);
  white-space: nowrap;
}

.itn-bestand-depot-row__leer {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.itn-bestand-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Fahrzeug-Spalte: mehrere Blöcke nebeneinander, gleiches Muster wie Depot */
.itn-bestand-fahrzeuge {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.itn-bestand-fzg-block {
  flex-shrink: 0;
}

/* Aufgaben-Liste (gruppiert nach Zeithorizont) */
.itn-todos {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.itn-todos__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-todos__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.itn-todos__group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.itn-todos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --- Aufgaben- & News-Feed ---------------------------------------
   Items sind in Sektionen gegliedert: „Aufgaben" oben (Priorität #1
   sticht hervor), dann News nach Zeit-Buckets. Aufgaben (Aktion
   nötig) bekommen einen farbigen linken Rand, News einen neutralen. */
.itn-feed-section + .itn-feed-section {
  margin-top: var(--space-4);
}

.itn-feed-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-1);
}

.itn-feed-section__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.itn-feed-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-surface-3);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.itn-feed-section__count--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
}

.itn-feed-section__count--info {
  background: var(--color-info-soft);
  color: var(--color-info-strong);
}

/* --- Schichtaufträge --------------------------------------------- */

/* CTA-Button im Footer der „Nächste Schicht"-Card auf volle Breite
   ziehen, damit er optisch zu den Auftrags-Items darüber passt. */
.itn-shift__footer-cta {
  width: 100%;
  justify-content: center;
}

.itn-shift__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-2) 0;
}

.itn-schichtauftraege {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.itn-schichtauftraege__head {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.itn-schichtauftrag {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.itn-schichtauftrag__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.itn-schichtauftrag__summary::-webkit-details-marker { display: none; }

.itn-schichtauftrag__urgency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itn-schichtauftrag__urgency--sofort {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
}

.itn-schichtauftrag__urgency--tag {
  background: var(--color-info-soft);
  color: var(--color-info-strong);
}

.itn-schichtauftrag__title {
  flex: 1;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.itn-schichtauftrag__status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.itn-schichtauftrag__body {
  padding: 0 var(--space-3) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border);
}

.itn-schichtauftrag__desc {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.itn-schichtauftrag__doks {
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-schichtauftrag__dok {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.itn-schichtauftrag__dok-check {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-muted);
}

.itn-schichtauftrag__dok-check:disabled {
  cursor: default;
  color: var(--color-success-strong);
}
.itn-schichtauftrag__dok-title { flex: 1; }

.itn-schichtauftrag__dok-by {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.itn-schichtauftrag__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-2);
}

.itn-schichtauftrag__ack-mine {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-success-strong);
}

.itn-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-feed__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.itn-feed__item:hover { background: var(--color-surface-2); }

.itn-feed__item--clickable {
  cursor: pointer;
}

.itn-feed__item--clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.itn-feed__item--aufgabe { border-left-color: var(--color-danger); }
.itn-feed__item--news    { border-left-color: var(--color-info); }

.itn-feed__item--top {
  box-shadow: 0 0 0 2px var(--color-primary-soft, var(--color-surface-2));
}

.itn-feed__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itn-feed__body {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.itn-feed__title {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-feed__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-feed__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 2px 8px;
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
}

.itn-feed__source-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-feed-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.itn-feed-detail__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.itn-feed-detail__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.itn-feed-detail__body {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.itn-feed__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.itn-feed__dismiss {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.itn-feed__dismiss:hover {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  border-color: var(--color-success);
}

.itn-todos__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.itn-todos__item:hover { background: var(--color-surface-2); }

.itn-todos__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itn-todos__body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.itn-todos__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.itn-todos__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-todos__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

@media (width <= 599px) {
  .itn-todos__meta { white-space: normal; }
}

/* Segmented-Control (Modal-Form, Zeitraum/Priorität) ================
   Bereich-lokal in Phase 0 — wird zu einer Design-System-Primitive
   `<TSegmented>`, sobald ein zweites Modul es braucht. */
.itn-segmented {
  display: inline-flex;
  background: var(--color-surface-3);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
  flex-wrap: wrap;
}

.itn-segmented__option {
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: inherit;
  cursor: pointer;
  min-height: 32px;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}
.itn-segmented__option:hover { color: var(--color-text); }

.itn-segmented__option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.itn-segmented__option.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
}

/* Dienstwünsche-Übersicht (offene Wunschphase).
   Theme-bewusst: Icon-Container, Progress-Bar, Avatare und „ausstehend"
   folgen dem aktiven Akzent (data-accent). „abgegeben" bleibt
   semantisch grün — Erfolg ist universell, keine Brand-Frage. */
.itn-wishes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.itn-wishes__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.itn-wishes__title-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itn-wishes__title-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.itn-wishes__period {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  margin-top: 2px;
}

.itn-wishes__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.itn-wishes__progress-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-bold);
}

.itn-wishes__count-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.itn-wishes__count-total strong {
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.itn-wishes__count-sep {
  color: var(--color-text-disabled);
}

.itn-wishes__bar {
  width: 100%;
  height: 6px;
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.itn-wishes__bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width var(--duration-normal) var(--easing-standard),
              background-color var(--duration-fast) var(--easing-standard);
}

.itn-wishes__counts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  gap: var(--space-3);
}
.itn-wishes__count strong { font-weight: var(--weight-bold); }
.itn-wishes__count--submitted { color: var(--color-text-muted); }
.itn-wishes__count--submitted strong { color: var(--color-text); }
.itn-wishes__count--pending { color: var(--color-primary-strong); }
.itn-wishes__count--pending strong { color: var(--color-primary-strong); }

.itn-wishes__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}

.itn-wishes__person {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
}

.itn-wishes__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.itn-wishes__person-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.itn-wishes__person-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-wishes__person-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.itn-wishes__person-status--pending { color: var(--color-primary-strong); }
.itn-wishes__person-status--submitted { color: var(--color-success-strong); }

.itn-wishes__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-1) calc(var(--space-3) * -1) 0;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  width: fit-content;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.itn-wishes__more:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.itn-wishes__more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.itn-wishes__more .t-icon { transition: transform var(--duration-fast) var(--easing-standard); }
.itn-wishes__more .t-icon.is-rotated { transform: rotate(180deg); }

.itn-wishes__more-pending {
  color: var(--color-primary-strong);
  font-weight: var(--weight-medium);
}

/* Nächste Schicht — Anruf-Widget für die Folgeschicht.
   Mo–Do + So zeigen die Schicht von morgen, Fr/Sa die Schicht für Montag.
   Theme-bewusst: Title-Icon, Avatare und Phone-Hover folgen dem Akzent. */
.itn-shift__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.itn-shift__title-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itn-shift__title-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.itn-shift__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  margin-top: 2px;
}

.itn-shift__people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-shift__person {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
  transition: border-color var(--duration-fast) var(--easing-standard),
              background-color var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}

.itn-shift__person:hover {
  border-color: var(--color-border-strong, var(--color-primary-soft));
  background: var(--color-surface-2);
}

.itn-shift__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  flex-shrink: 0;

  /* Dezenter Ring — gibt dem Avatar visuelle Tiefe ohne aufdringlich
     zu sein. */
  box-shadow: inset 0 0 0 1px var(--color-primary-soft);
}

.itn-shift__person-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.itn-shift__person-name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}

.itn-shift__person-qualification {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
}

.itn-shift__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.itn-shift__phone:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.itn-shift__phone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* Aktivitäts-Timeline (Letzte Aktivität) */
.itn-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.itn-activity__item {
  display: grid;
  grid-template-columns: 90px 28px 1fr;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.itn-activity__item:last-child { border-bottom: 0; }

.itn-activity__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-align: right;
  padding-top: 4px;
}

.itn-activity__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itn-activity__body {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  min-width: 0;
}

.itn-activity__title {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.itn-activity__actor {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (width <= 599px) {
  .itn-activity__item {
    grid-template-columns: 80px 24px 1fr;
  }
}

/* === Dienstplan-Kontext-Menü =====================================
   Erscheint bei Rechtsklick auf eine Schicht-Zelle (Werktage only).
   Backdrop schließt das Menü bei Klick außerhalb. */
.itn-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-popover);
}

.itn-ctx-menu {
  position: fixed;

  /* Horizontal: clamp hält das Menü innerhalb des Viewports. */
  left: clamp(8px, var(--ctx-x), max(8px, calc(100vw - 248px)));

  /* Vertikal: default öffnet nach UNTEN ab dem Klick-Punkt. Die
     max-height schneidet exakt am Viewport-Boden ab, overflow-y:auto
     bringt einen internen Scrollbalken, falls das Menü länger ist
     als der Platz unter dem Klick. */
  top: var(--ctx-y);
  bottom: auto;
  max-height: calc(100vh - var(--ctx-y) - 8px);
  z-index: calc(var(--z-popover) + 1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  min-width: 200px;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: itn-ctx-in var(--duration-fast) var(--easing-standard);
}

/* Flip nach OBEN: bei Klicks in der unteren Hälfte des Viewports wird
   der Menü-Anker an die Unterkante geschoben — sonst wäre der letzte
   Eintrag („Eintrag entfernen") gar nicht erreichbar. C# setzt die
   Klasse anhand der Klick-Y-Position vs window.innerHeight. */
.itn-ctx-menu--flip-up {
  top: auto;
  bottom: calc(100vh - var(--ctx-y));
  max-height: calc(var(--ctx-y) - 8px);
}

@keyframes itn-ctx-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .itn-ctx-menu {
    animation: none;
  }
}

.itn-ctx-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: inherit;
  line-height: inherit;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.itn-ctx-menu__item:hover {
  background: var(--color-surface-3);
}

.itn-ctx-menu__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.itn-ctx-menu__item--remove {
  color: var(--color-danger-strong);
}

.itn-ctx-menu__item--remove:hover {
  background: var(--color-danger-soft);
}

.itn-ctx-menu__sep {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}

/* Header in der zweiten Menü-Stufe (Vertretung-Auswahl). */
.itn-ctx-menu__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
}

.itn-ctx-menu__back {
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}

.itn-ctx-menu__back:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.itn-ctx-menu__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Hover-Cursor auf klickbaren Zellen */
.itn-dienstplan__cell--shift.is-interactive {
  cursor: pointer;
}

.itn-dienstplan__cell--shift.is-interactive:hover {
  background: var(--color-surface-3);
}

/* Resize-Handle zwischen Mitarbeiter-Spalte und Tagesspalten */
.itn-col-resize-handle {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.itn-col-resize-handle::after {
  content: '';
  display: block;
  width: 3px;
  height: 55%;
  background: var(--color-border-strong);
  border-radius: 2px;
  transition: background-color var(--duration-fast),
              height var(--duration-fast);
}

.itn-col-resize-handle:hover::after,
.itn-col-resize-handle.is-dragging::after {
  background: var(--color-primary);
  height: 75%;
}

.itn-col-resize-handle:focus-visible {
  outline: none;
}

.itn-col-resize-handle:focus-visible::after {
  background: var(--color-primary);
  height: 75%;
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

/* === Dienstplan-Matrix ============================================
   Zeilen = Mitarbeiter, Spalten = Tage einer 2-Wochen-Periode.
   Linke 3 Spalten (Mitarbeiter, Soll, Plan) sind sticky beim
   horizontalen Scroll; die Kopfzeile sticky beim vertikalen Scroll
   innerhalb der Matrix-Hülle. Tag-Spalte mit `is-today` bekommt eine
   Akzent-Tönung. */

.itn-dienstplan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Header + Toolbar -------------------------------------------- */
.itn-dienstplan__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (width >= 1100px) {
  .itn-dienstplan__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.itn-dienstplan__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Monats-Navigation: [<] Monat Jahr [>]  [Heute] */
.itn-dienstplan__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.itn-dienstplan__nav-title {
  margin: 0;
  min-width: 0;
}

.itn-dienstplan__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}

.itn-dienstplan__nav-btn:hover {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

.itn-dienstplan__nav-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.itn-dienstplan__nav-today {
  margin-left: var(--space-1);
  padding: 0 var(--space-3);
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.itn-dienstplan__nav-today:hover {
  background: var(--color-surface-3);
}

.itn-dienstplan__nav-today:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Status-Pill im Untertitel */
.itn-dienstplan__status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itn-dienstplan__status--entwurf {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

.itn-dienstplan__status--in-arbeit {
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.itn-dienstplan__status--freigegeben {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.itn-dienstplan__status--archiv {
  background: var(--color-info-soft);
  color: var(--color-info-strong);
}

.itn-dienstplan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* --- Legende ----------------------------------------------------- */
.itn-dienstplan__legend {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.itn-dienstplan__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Matrix-Hülle (scroll-container) -----------------------------
   Nur horizontal scrollen; vertikal fließt die Seite normal weiter,
   damit auch auf kleinen Bildschirmen alles ohne Sticky-Stauchung
   bedienbar bleibt. */
.itn-dienstplan__matrix-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: auto visible;
}

.itn-dienstplan__matrix {
  display: grid;
  grid-template-columns:
    var(--name-col, 280px)
    repeat(var(--days), minmax(56px, 1fr))
    repeat(3, minmax(56px, max-content));
  min-width: max-content;
}

/* Große Monitore (≥ 1400 px): Tagesspalten kompakter, damit der
   komplette Monat ohne horizontales Scrollen sichtbar wird. */
@media (width >= 1400px) {
  .itn-dienstplan__matrix {
    grid-template-columns:
      var(--name-col, 280px)
      repeat(var(--days), minmax(40px, 1fr))
      repeat(3, minmax(48px, max-content));
  }

  .itn-dienstplan__cell--shift {
    padding: 2px;
  }

  .itn-dienstplan__cell--day {
    padding: var(--space-1) 2px;
  }

  .itn-dienstplan__cell--coverage {
    padding: var(--space-1) 2px;
    font-size: var(--text-xs);
  }

  .itn-shift-cell {
    height: 24px;
    min-width: 30px;
    padding: 0 var(--space-1);
    font-size: 11px;
  }

  .itn-dienstplan__day-num {
    font-size: var(--text-sm);
  }
}

/* Sehr breite Monitore (≥ 1800 px): noch enger gepackt. */
@media (width >= 1800px) {
  .itn-dienstplan__matrix {
    grid-template-columns:
      var(--name-col, 280px)
      repeat(var(--days), minmax(36px, 1fr))
      repeat(3, minmax(44px, max-content));
  }

  .itn-shift-cell {
    min-width: 28px;
  }
}

/* --- Zellen-Basis ------------------------------------------------- */
.itn-dienstplan__cell {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  min-width: 0;
}

/* Letzte Spalte: kein Right-Border, sieht sonst doppelt aus mit dem
   Card-Border. Die letzte Zeile ist via :nth-last-child schwer zu
   treffen in display:grid; akzeptiert. */
.itn-dienstplan__matrix > .itn-dienstplan__cell:last-child {
  border-right: 0;
}

/* --- Kopfzeile (sticky top) -------------------------------------- */
.itn-dienstplan__cell--head {
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* --- Mitarbeiter-Spalte (sticky left) ---------------------------- */
.itn-dienstplan__cell--name {
  position: sticky;
  left: 0;
  z-index: 2;
  gap: var(--space-3);
  background: var(--color-surface);

  /* Schatten als visuelle Trennung beim horizontalen Scroll */
  box-shadow: 1px 0 0 0 var(--color-border);
}

.itn-dienstplan__cell--head.itn-dienstplan__cell--name {
  z-index: 3;
  background: var(--color-surface-2);
}

.itn-dienstplan__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.itn-dienstplan__name-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
  gap: 2px;
}

.itn-dienstplan__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-dienstplan__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.itn-dienstplan__qual {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- Tagesspalten ------------------------------------------------ */
.itn-dienstplan__cell--day {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.itn-dienstplan__day-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itn-dienstplan__day-num {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-family: var(--font-mono);
}

.itn-dienstplan__cell--shift {
  justify-content: center;
  padding: var(--space-1);
  position: relative;
}

/* Vorschlag-Statusleiste zwischen Legende und Grid. Zeigt Slot-Anzahl
   und Konflikte; im Fehlerfall rot eingefärbt. */
.itn-dienstplan__vorschlag-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: rgb(234 179 8 / 8%);
  border: 1px solid rgb(202 138 4 / 30%);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm);
  color: var(--color-warning-strong);
}

.itn-dienstplan__vorschlag-bar.is-error {
  background: var(--color-danger-soft, rgb(239 68 68 / 8%));
  border-color: var(--color-danger-soft, rgb(239 68 68 / 30%));
  color: var(--color-danger-strong);
}

.itn-dienstplan__vorschlag-bar__warn {
  color: var(--color-warning-strong);
  font-weight: var(--weight-medium);
}

/* Konflikt-Badge im Vorschlag-Bar — ein einzelner Badge mit Hover-Popup. */

/* Matrix-Reload-Spinner: erscheint während LoadMonthDataAsync nach Vorschlag-Übernahme */
.itn-dienstplan__reload-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) 0;
  min-height: 200px;
}

.itn-dienstplan__reload-ring {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: itn-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.itn-dienstplan__reload-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .itn-dienstplan__reload-ring {
    animation: none;
    border-top-color: var(--color-primary);
    opacity: 0.6;
  }
}

.itn-dienstplan__konflikte-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.itn-dienstplan__konflikte-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgb(202 138 4 / 15%);
  border-radius: 99px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-warning-strong);
  cursor: default;
  white-space: nowrap;
}

/* Popup — erscheint beim Hover auf das Badge */
.itn-dienstplan__konflikte-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  min-width: 300px;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 8%);
  padding: var(--space-3);
}

.itn-dienstplan__konflikte-wrap:hover .itn-dienstplan__konflikte-popup {
  display: block;
}

.itn-dienstplan__konflikte-popup__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.itn-dienstplan__konflikte-popup__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}

.itn-dienstplan__konflikte-popup__item:first-of-type {
  border-top: none;
}

.itn-dienstplan__konflikte-popup__date {
  flex-shrink: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  color: var(--color-warning-strong);
  background: rgb(202 138 4 / 12%);
  padding: 1px 5px;
  border-radius: 4px;
}

.itn-dienstplan__konflikte-popup__text {
  color: var(--color-text);
}

/* Konflikt-Badge am Tageskopf (Vorschlag-Modus) — Wrapper mit Popup. */
.itn-dienstplan__konflikt-wrap {
  position: absolute;
  bottom: 1px;
  right: 2px;
}

.itn-dienstplan__konflikt-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--color-warning);
  color: var(--color-warning-fg);
  border-radius: 99px;
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: default;
}

/* Konflikt-Tooltip: position:fixed — unabhängig von overflow:auto-Containern */
.itn-konflikt-tooltip {
  position: fixed;
  z-index: 9999;
  transform: translateY(-100%);
  min-width: 220px;
  max-width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 8px);
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  padding: var(--space-2) var(--space-3);
  pointer-events: none;
}

.itn-konflikt-tooltip__text {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text);
  line-height: 1.5;
  white-space: normal;
}

.itn-konflikt-tooltip__text + .itn-konflikt-tooltip__text {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}

/* Kleiner „W"-Marker in der Ecke einer Zelle, in der der Wachleiter
   schon einen Plan-Eintrag (D/U/K/FB/X) gesetzt hat, der Mitarbeiter
   aber ursprünglich einen Wunsch für diesen Tag abgegeben hatte.
   Hilft beim Vertretungs-Blick: wer wollte den Tag eigentlich? */
.itn-dienstplan__wish-marker {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-warning-strong, var(--color-text-muted));
  pointer-events: none;
}

/* Heute-Hervorhebung — Kopfzeile und Zellen der Spalte. */
.itn-dienstplan__cell.is-today {
  background: var(--color-primary-soft);
}

.itn-dienstplan__cell--head.is-today {
  background: var(--color-primary-soft);
}

.itn-dienstplan__cell--head.is-today .itn-dienstplan__day-name,
.itn-dienstplan__cell--head.is-today .itn-dienstplan__day-num {
  color: var(--color-primary-strong);
}

/* Wochenende — gegrayed sichtbar. */
.itn-dienstplan__cell--shift.is-off {
  background: var(--color-surface-2);
}

.itn-dienstplan__cell--head.is-weekend {
  background: var(--color-surface-3);
}

.itn-dienstplan__cell--head.is-weekend .itn-dienstplan__day-name,
.itn-dienstplan__cell--head.is-weekend .itn-dienstplan__day-num {
  color: var(--color-text-muted);
}

/* Feiertag — diagonales Streifenmuster, klar abgesetzt von Werktagen,
   Wochenenden und den farbigen Besetzungs-Status. Text gedimmt wie
   Wochenenden, aber das Muster signalisiert eindeutig "kein Planungstag". */
.itn-dienstplan__cell--shift.is-holiday,
.itn-dienstplan__cell--head.is-holiday {
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-surface-3) 0 4px,
      var(--color-surface-2) 4px 8px
    );
}

.itn-dienstplan__cell--head.is-holiday .itn-dienstplan__day-name,
.itn-dienstplan__cell--head.is-holiday .itn-dienstplan__day-num {
  color: var(--color-text-muted);
}

/* === Schicht-Zellen (Letter-Pills) ==================================
   Werden sowohl in der Matrix als auch in der Legende verwendet —
   gleicher Look, gleiche Größe. */
.itn-shift-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Dienst: gefüllt, Akzentfarbe — der "gesetzte" Zustand. */
.itn-shift-cell--d {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}

/* Drag-Cursor und kleines Heben beim Drag, damit der Wachleiter
   sofort sieht: dieses D kann ich anfassen und woandershin ziehen. */
.itn-shift-cell.is-draggable { cursor: grab; }
.itn-shift-cell.is-draggable:active { cursor: grabbing; }

/* Bemerkungs-Marker — kleiner Punkt links oben in einer Zelle, der
   anzeigt: hier hängt eine Notiz dran. Tooltip kommt über das title-
   Attribut der Zelle. */
.itn-dienstplan__note-marker {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 10px;
  line-height: 1;
  color: var(--color-warning-strong, var(--color-text-muted));
  pointer-events: none;
}

/* Gastarzt-Chip in der Arzt-Coverage-Zelle: kleines Initialen-Pill,
   visuell vom Coverage-Count separiert. */
.itn-dienstplan__gastarzt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  margin-left: var(--space-1);
  padding: 0 4px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  background: var(--color-info-strong, var(--color-primary));
  color: var(--color-surface);
  border-radius: var(--radius-sm);
}
.itn-dienstplan__cell--coverage.is-interactive { cursor: pointer; }
.itn-dienstplan__cell--coverage.is-interactive:hover { filter: brightness(0.97); }

/* Gastarzt-Pille in der Matrix-Zelle: gleicher Stil wie ein
   Initialen-Avatar, dezent abgesetzt vom Dienst-Pillen-Stil. */
.itn-shift-cell--gastarzt {
  background: var(--color-info-strong, var(--color-primary));
  color: var(--color-surface);
  border-color: transparent;
  font-weight: var(--weight-bold);
}

/* Gastarzt-Popover: schwebendes kleines Panel; ähnlicher Stil wie
   das Kontextmenü, aber breiter und mit Listen-Optik. */
.itn-gastarzt-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  max-width: 420px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  z-index: 1100;
}

.itn-gastarzt-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.itn-gastarzt-popover__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
}
.itn-gastarzt-popover__close:hover { color: var(--color-text); }
.itn-gastarzt-popover__search { padding: var(--space-2) var(--space-3); }

.itn-gastarzt-popover__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-2);
  overflow-y: auto;
  flex: 1;
}

.itn-gastarzt-popover__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.itn-gastarzt-popover__item:hover { background: var(--color-surface-2); }
.itn-gastarzt-popover__item.is-current { background: var(--color-primary-soft); }

.itn-gastarzt-popover__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-surface-3);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.itn-gastarzt-popover__name {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.itn-gastarzt-popover__vermittlung {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.itn-gastarzt-popover__check { color: var(--color-success-strong); }

.itn-gastarzt-popover__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.itn-gastarzt-popover__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}

.itn-gastarzt-popover__foot-row {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.itn-gastarzt-popover__foot-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

.itn-gastarzt-popover__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}
.itn-gastarzt-popover__form .t-input-label { margin-top: var(--space-2); }

.itn-gastarzt-popover__error {
  margin: var(--space-2) 0 0 0;
  color: var(--color-danger-strong);
  font-size: var(--text-sm);
}

/* Dienstwunsch: weicher Akzent + gestrichelte Border — signalisiert
   "noch nicht entschieden". Wachleiter kann via Rechtsklick zu D machen. */
.itn-shift-cell--w {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border: 1px dashed var(--color-primary);
}

/* Algorithmus-Vorschlag: gelb, gestrichelte Border — "Maschine empfiehlt,
   Wachleiter entscheidet". Wachleiter klickt "Alle übernehmen" oder "Verwerfen". */
.itn-shift-cell--a {
  background: rgb(234 179 8 / 12%);
  color: var(--color-warning-strong);
  border: 1.5px dashed var(--color-warning);
  font-weight: var(--weight-semibold);
}

/* Blockiert: Diagonalstrich von links unten nach rechts oben.
   Kein Buchstabe — der Strich ist die Information. */
.itn-shift-cell--x {
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 1px),
      var(--color-text-muted) calc(50% - 1px),
      var(--color-text-muted) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  border: 1px solid var(--color-border);
  color: transparent;
}

/* Urlaub: gestreift, neutral — sieht "ausgeplant" aus. */
.itn-shift-cell--u {
  background:
    repeating-linear-gradient(
      45deg,
      var(--color-surface-3) 0 5px,
      var(--color-surface-2) 5px 9px
    );
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* Krank: weicher danger mit gestrichelter Border. */
.itn-shift-cell--k {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border: 1px dashed var(--color-danger);
}

/* Fortbildung: weicher Info-Ton. */
.itn-shift-cell--fb {
  background: var(--color-info-soft);
  color: var(--color-info-strong);
  border-color: var(--color-info-soft);
}

/* Vertretung: kräftiger Akzent (lila/violett-Ton) — visuell deutlich
   vom regulären Dienst unterschieden, damit der Wachleiter auf einen
   Blick erkennt, dass dieser Eintrag ein Sprung-In ist. */
.itn-shift-cell--v {
  background: var(--color-warning-strong, var(--color-primary));
  color: var(--color-surface);
  border-color: transparent;
}

/* Sondereintrag: dezenter, „neutraler" Grau-Ton — analog zum
   gräulichen Hintergrund in der Excel-Vorlage. Custom-Code (1–3
   Zeichen) wird zentriert in der Zelle angezeigt; volle Bedeutung
   steht im Tooltip + in der Legende. */
.itn-shift-cell--s {
  background: var(--color-surface-3);
  color: var(--color-text);
  border-color: var(--color-border);
  font-weight: var(--weight-bold);
}

/* Sondereintrag-Modal: Autosuggest-Chips für zuletzt verwendete Codes */
.itn-sondereintrag__recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.itn-sondereintrag__recent-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.itn-sondereintrag__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.itn-sondereintrag__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px 4px 4px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}

.itn-sondereintrag__chip:hover {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong, var(--color-border));
}

.itn-sondereintrag__chip-label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itn-sondereintrag__code-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-bold);
  max-width: 8ch;
}

/* === Besetzungs-Summary ============================================
   Zwei Zeilen am unteren Rand der Matrix: NFS und Arzt.
   Pro Werktag wird Ist/Soll als gefärbte Pille gezeigt. */

/* --- Rechte Hilfsspalten (Will / Wunsch / Geplant) --------------- */

/* Drei Zähl-Spalten rechts neben den Tageszellen. Optisch leicht
   abgesetzt vom Kalender: dezent grauer Hintergrund und mono-Font für
   die Zahlen. Die erste der drei bekommt eine kräftigere linke
   Trennlinie, damit der Übergang vom Monat zu den Summen klar ist. */
.itn-dienstplan__cell--summary {
  justify-content: center;
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);

  /* Schmaler als zuvor (56 → 40 px) — die Kurzlabels W / GW / GP
     brauchen keine breite Spalte mehr, der Plan passt damit eher
     auf eine Seite. */
  min-width: 40px;
}

.itn-dienstplan__cell--summary.itn-dienstplan__cell--head {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Erste Summary-Spalte (Will) bekommt eine starke linke Trennlinie. */
.itn-dienstplan__cell--summary.is-first-summary {
  border-left: 2px solid var(--color-border-strong);
}

/* GP-Spalte im Vorschlag-Modus: gelber Akzent signalisiert dass
   A-Slots mitgezählt werden. */
.itn-dienstplan__cell--summary.is-vorschlag {
  color: var(--color-warning-strong);
  font-weight: var(--weight-semibold);
}

/* Linke Spalte (Label + Soll-Hinweis) — sticky wie die Mitarbeiter-Spalte. */
.itn-dienstplan__cell--coverage-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--color-surface-2);
}

.itn-dienstplan__coverage-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.itn-dienstplan__coverage-target {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* Erste Coverage-Zeile bekommt eine kräftige Trennlinie nach oben,
   damit die Summary visuell vom Mitarbeiter-Block abgesetzt ist. */
.itn-dienstplan__cell.is-first-coverage {
  border-top: 2px solid var(--color-border-strong);
}

/* Coverage-Zellen: zentrierter Ist/Soll-Text auf Status-Hintergrund. */
.itn-dienstplan__cell--coverage {
  justify-content: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.itn-dienstplan__coverage-count {
  display: inline-flex;
  align-items: baseline;
}

.itn-dienstplan__coverage-slash {
  color: inherit;
  opacity: 0.6;
  font-weight: var(--weight-regular);
}

/* Vier Status-Farben — überschreiben Default-bg + Color. Reihenfolge
   ist nicht zufällig: nach allen anderen Coverage-Regeln, damit sie bei
   gleicher Specificity gewinnen (auch über is-today und is-holiday). */
.itn-dienstplan__cell--coverage.is-ok {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.itn-dienstplan__cell--coverage.is-wishes {
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
}

.itn-dienstplan__cell--coverage.is-short {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
}

.itn-dienstplan__cell--coverage.is-over {
  background: var(--color-info-soft);
  color: var(--color-info-strong);
}

/* Frei-Tage (Wochenende + Feiertag) in Coverage-Zeilen: immer neutral,
   nie Status-Farbe. Drei-Klassen-Spezifität (0,3,0) schlägt alle
   Zwei-Klassen-Status-Regeln oben — steht bewusst ganz am Ende. */
.itn-dienstplan__cell--coverage.is-off {
  background: var(--color-surface-2);
  color: var(--color-text-disabled);
}

.itn-dienstplan__cell--coverage.is-off.is-holiday {
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-surface-3) 0 4px,
      var(--color-surface-2) 4px 8px
    );
  color: var(--color-text-disabled);
}

.itn-activity__empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
}

/* ── Mein Urlaub (Mitarbeiter-Seite) ───────────────────────────────── */
.itn-urlaub {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.itn-urlaub__loading {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-6);
}

.itn-urlaub__anspruch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
}

.itn-urlaub__anspruch-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  min-width: 0;
}

.itn-urlaub__anspruch-num {
  font-size: 2.5rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-primary-strong);
}

.itn-urlaub__anspruch-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.itn-urlaub__anspruch-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.itn-urlaub__anspruch-meta > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-urlaub__anspruch-meta dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.itn-urlaub__anspruch-meta dd {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0;
  color: var(--color-text);
}

.itn-urlaub__freelancer-hint {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.itn-urlaub__antraege-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.itn-urlaub__antraege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.itn-urlaub__antrag {
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
}
.itn-urlaub__antrag--pending   { border-left-color: var(--color-warning); }
.itn-urlaub__antrag--approved  { border-left-color: var(--color-success); }
.itn-urlaub__antrag--rejected  { border-left-color: var(--color-danger); }
.itn-urlaub__antrag--withdrawn { border-left-color: var(--color-border-strong); }

.itn-urlaub__antrag-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.itn-urlaub__antrag-range {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.itn-urlaub__antrag-days {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.itn-urlaub__antrag-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.itn-urlaub__antrag-eingereicht {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.itn-urlaub__antrag-begruendung {
  font-size: var(--text-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.itn-urlaub__antrag-actions {
  display: flex;
  justify-content: flex-end;
}

.itn-urlaub__modal-hint {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.itn-urlaub__modal-summary {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.itn-urlaub__modal-error {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

@media (width <= 640px) {
  .itn-urlaub__anspruch {
    grid-template-columns: 1fr;
  }
}

/* ── Urlaubsantraege (Wachleiter-Seite) ───────────────────────────── */
.itn-urlauba {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.itn-urlauba__loading {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-6);
}

.itn-urlauba__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
}

.itn-urlauba__name {
  margin: 0;
}

.itn-urlauba__range {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.itn-urlauba__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-3) 0;
}

.itn-urlauba__meta > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-urlauba__meta dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.itn-urlauba__meta dd {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0;
  color: var(--color-text);
}

.itn-urlauba__konflikte {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-soft);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
}

.itn-urlauba__konflikte-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-warning-strong);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.itn-urlauba__konflikte-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-urlauba__konflikte-more {
  list-style: none;
  margin-left: calc(var(--space-5) * -1);
  color: var(--color-text-muted);
  font-style: italic;
}

.itn-urlauba__modal-hint {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.itn-urlauba__modal-context {
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.itn-urlauba__modal-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.itn-urlauba__modal-textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 80px;
}

.itn-urlauba__modal-textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
  border-color: var(--color-primary);
}

.itn-urlauba__error {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ─── Dienstplan-Einstellungen (/einstellungen/dienstplan) ──────────────── */

/* Seitenfehler */
.itn-einst__page-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* Card-Beschreibungstext unterhalb des Titels */
.itn-einst__card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Karten-Abstand */
.itn-einst__card--mt { margin-top: var(--space-5); }

/* Felder-Gruppe (Karte 1) */
.itn-einst__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.itn-einst__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-einst__num-input {
  width: 120px;
}

/* Kombinationen-Sektion */
.itn-einst__section {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.itn-einst__section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-einst__section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.itn-einst__kombis {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-einst__kombi-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.itn-einst__kombi-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-einst__kombi-label {
  font-size: var(--text-xs);
}

.itn-einst__kombi-abbr {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.itn-einst__kombi-input {
  width: 72px;
}

.itn-einst__kombi-remove {
  margin-bottom: 2px;
}

.itn-einst__add-btn {
  align-self: flex-start;
}

/* Leerer Zustand */
.itn-einst__empty-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0 0 var(--space-3);
}

/* Item-Liste (Paare + Arzt-Wochentage) */
.itn-einst__item-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.itn-einst__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.itn-einst__item--arzt {
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.itn-einst__item-name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  min-width: 120px;
}

.itn-einst__item-chip {
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
}

.itn-einst__item-sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.itn-einst__item-remove {
  margin-left: auto;
  flex-shrink: 0;
}

.itn-einst__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1;
}

/* Tages-Tag (Arzt-Wochentage Anzeige) */
.itn-einst__day-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--color-primary);
}

.itn-einst__day-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary-strong);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.itn-einst__day-tag-remove:hover { opacity: 1; }

/* Picker-Gruppe (Paare + Arzt) */
.itn-einst__picker-group {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.itn-einst__picker-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 160px;
  max-width: 260px;
}

.itn-einst__picker-field--narrow {
  flex: 0 0 auto;
  min-width: 90px;
  max-width: 110px;
}

.itn-einst__picker {
  width: 100%;
}

.itn-einst__picker-sep {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.itn-einst__picker-add {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Aktionszeile für Hinzufügen-Button — eigene Zeile unter den Eingabefeldern */
.itn-einst__picker-actions {
  display: flex;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
}

/* Arzt-Picker-Bereich */
.itn-einst__arzt-picker {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.itn-einst__wt-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-einst__wt-picker {
  display: flex;
  gap: var(--space-1);
}

.itn-einst__wt-btn {
  min-width: 40px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.itn-einst__wt-btn:hover {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.itn-einst__wt-btn.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  font-weight: var(--weight-semibold);
}

/* Feedback (Fehler + Erfolg) */
.itn-einst__feedback {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.itn-einst__feedback--error {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
}

.itn-einst__feedback--success {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

/* ===== Fahrzeuge ===================================================== */

/* Fahrzeug-Listen-Karte (Mobile: Card-Grid, Desktop: Tabellenzeile) */
.itn-fzg__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.itn-fzg__list-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}

.itn-fzg__list-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-1);
}

.itn-fzg__list-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.itn-fzg__list-card-kennzeichen {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text);
}

.itn-fzg__list-card-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itn-fzg__list-card-km {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  text-align: right;
}

@media (width >= 768px) {
  .itn-fzg__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Ampel-Grid (Fristen-Übersicht) */
.itn-fzg__ampel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.itn-fzg__ampel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  height: 100%;
}

.itn-fzg__ampel-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: 0.01em;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
}

.itn-fzg__ampel-card-tage {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.itn-fzg__ampel-card-actions {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.itn-fzg__ampel-card-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.itn-fzg__ampel-card-edit-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-1);
}

.t-btn--icon-only {
  padding-inline: var(--space-2);
  flex-shrink: 0;
}

.t-btn--stretch {
  flex: 1;
  min-width: 0;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Schaden-Formular */
.itn-fzg__schaden-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 600px;
}

.itn-fzg__schaden-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
  color: var(--color-success-strong);
}

/* UTA-Wizard */
.itn-fzg__uta-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.itn-fzg__uta-steps {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.itn-fzg__uta-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.itn-fzg__uta-step--active {
  font-weight: var(--weight-bold);
  color: var(--color-primary-strong);
}
.itn-fzg__uta-step--done { color: var(--color-success-strong); }

.itn-fzg__uta-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 2px solid currentcolor;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.itn-fzg__uta-sep {
  height: 1px;
  width: 24px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Verbrauchs-Diagramm-Platzhalter */
.itn-fzg__chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface-2);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
  min-height: 200px;
  font-size: var(--text-sm);
}

/* Monats-Navigation (Fahrtenbuch) */
.itn-fzg__monat-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.itn-fzg__monat-label {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  min-width: 120px;
  text-align: center;
}

/* Km-Stand-Balken */
.itn-fzg__km-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.itn-fzg__km-bar-track {
  width: 100%;
  height: 8px;
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.itn-fzg__km-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.itn-fzg__km-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ── Tracker-Diagnose ─────────────────────────────────────────────── */

/* Aus TrackerDiagnosePage.razor extrahiert (Code-Review 2026-05-25 FE-6). */

@keyframes itn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.itn-spin {
  animation: itn-spin 0.8s linear infinite;
}

@keyframes itn-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}

.itn-tracker-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.itn-tracker-status-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.itn-tracker-status-tile--live   { border-left-color: var(--color-success); }
.itn-tracker-status-tile--idle   { border-left-color: var(--color-warning); }
.itn-tracker-status-tile--silent { border-left-color: var(--color-danger); }
.itn-tracker-status-tile--never  { border-left-color: var(--color-border-strong); }

.itn-tracker-status-tile__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.itn-tracker-status-tile__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.itn-tracker-status-tile--live .itn-tracker-status-tile__dot {
  background: var(--color-success);
  animation: itn-pulse 1.5s ease-in-out infinite;
}
.itn-tracker-status-tile--idle .itn-tracker-status-tile__dot   { background: var(--color-warning); }
.itn-tracker-status-tile--silent .itn-tracker-status-tile__dot { background: var(--color-danger); }

.itn-tracker-status-tile__big {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.itn-tracker-status-tile__time {
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.itn-tracker-status-tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.itn-tracker-status-tile__chip {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

/* Event-Tabelle: kleine Helfer fuer Mono-Font und gedaempften Text. */
.itn-tracker-diag__mono {
  font-family: var(--font-mono, monospace);
}

.itn-tracker-diag__muted {
  color: var(--color-text-muted);
}

.itn-tracker-diag__raw {
  display: inline-block;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ── Sauerstoffdepot-Flaschen-Tabelle: Button-Ausrichtung ──────────── */

/* Bewegungs-Buttons ("Aufs Fahrzeug", "Zurück ins Depot", "An Lieferant"):
   Einheitliche Mindestbreite, damit alle drei Buttons in Zeilen, in denen sie
   erscheinen, gleich breit sind. Das längste Label ("Zurück ins Depot") bestimmt
   die Breite; die kürzeren erhalten Zentrierung, damit das Label symmetrisch sitzt. */
.itn-flaschen-action {
  min-width: 10rem;
  justify-content: center;
}

/* Tertiäre Ghost-Buttons ("Historie", "Korrigieren"): schmaler als Bewegungs-Buttons,
   aber untereinander/nebeneinander einheitlich breit. */
.itn-flaschen-action--minor {
  min-width: 8rem;
}

/* ── Inline-Fehlerbanner (Sauerstoffdepot + Archiv) ────────────────── */

/* Wiederkehrendes Banner für Lade-/Speicher-Fehler oberhalb des
   Seiteninhalts. Ersetzt verstreute Inline-Styles; nutzt nur Tokens. */
.itn-error-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}