@import url("design-tokens.css");

* {
  scrollbar-color: var(--color-border-strong) transparent;
}

html {
  color-scheme: light;
  background: var(--color-bg);
  letter-spacing: 0;
  /* Safari laesst die Seite bei einer Wischgeste federn, auch wenn es gar
     nichts zu scrollen gibt: Alles rutscht ein Stueck weg und schnappt
     zurueck. Der Standardwert auto erlaubt das, "none" schaltet es ab — quer
     wie hoch.

     Die Zwei-Finger-Geste fuer Vor und Zurueck bleibt: In Safari haengt sie
     nicht am overscroll-behavior der Seite, sondern ist eine Geste des
     Browsers selbst — am 06.09.2026 in Safari nachgeprueft. In Chromium-
     Browsern kann dieselbe Regel die Geste dagegen mit abschalten.

     Innere Scrollbereiche wie das Kanban-Board sind nicht betroffen, die
     regeln ihr Verhalten selbst. */
  overscroll-behavior: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 34rem),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-subtle) 100%);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base-line);
}

html[data-theme="dark"] body {
  background: #000000;
}

h1,
h2,
h3,
.font-semibold.text-slate-900,
.text-2xl.font-semibold,
.text-xl.font-semibold {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

a {
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

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

button:active,
a.inline-flex:active,
.sidebar-link:active {
  transform: scale(0.97);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 15rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.mobile-menu-backdrop {
  display: none;
}

.icon-button.mobile-menu-close {
  display: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  min-height: 5rem;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.brand-logo {
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.brand-logo-full {
  display: block;
  width: 100%;
  max-width: 12.25rem;
  height: 3.25rem;
  object-position: left center;
}

.brand-logo-icon {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
}

.brand-logo-fallback {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  font-family: var(--font-heading);
  color: #ffffff;
  background: #1A56DB;
}

.sidebar-nav {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.sidebar-link:hover {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: inset 3px 0 0 var(--color-border-strong);
}

.sidebar-link.is-active {
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.ui-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.sidebar-bottom {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.locale-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  padding: var(--space-1);
}

.locale-switch a {
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.locale-switch a.is-active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

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

.user-avatar {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 800;
  overflow: hidden;
}

.user-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.user-avatar.user-avatar-with-image,
.user-avatar.user-avatar-with-image img {
  border-radius: 9999px;
}

.user-avatar.user-avatar-with-image img {
  clip-path: inset(0 round 9999px);
}

.user-copy {
  min-width: 0;
  display: grid;
}

.user-copy strong,
.user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-copy strong {
  font-size: var(--text-sm);
  line-height: var(--text-sm-line);
}

.user-copy span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--text-xs-line);
}

.app-frame {
  grid-column: 2;
  min-width: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  padding: var(--space-3) clamp(1rem, 3vw, 2rem);
  backdrop-filter: blur(18px);
}

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

.topbar-title p {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: var(--text-xs-line);
  text-transform: uppercase;
}

.topbar-title h1 {
  color: var(--color-text-primary);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--text-xl-line);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-button {
  position: relative;
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.icon-button:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.has-badge > span {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 0.65rem;
  font-weight: 900;
}

.notification-center {
  position: relative;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 70;
  width: min(28rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.notification-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
}

.notification-panel-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--text-lg-line);
}

.notification-panel-title-row,
.notification-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Mit ungelesenen Meldungen steht "Alle gelesen" neben der Ueberschrift — ohne
   Umbruch schob das die Seite auf dem Handy seitlich hinaus. */
.notification-page-heading {
  flex-wrap: wrap;
}

.notification-panel-header p,
.notification-empty span,
.notification-body,
.notification-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--text-xs-line);
}

.notification-read-button,
.notification-mark-read-button {
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  padding: 0.35rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 800;
}

.notification-read-button:hover,
.notification-mark-read-button:hover {
  background: color-mix(in srgb, var(--color-bg-subtle) 88%, var(--color-text-primary));
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.feed-action-button {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-info-text) !important;
  box-shadow: var(--shadow-sm);
}

.feed-action-button:hover {
  background: color-mix(in srgb, var(--color-surface-raised) 92%, var(--color-info-text)) !important;
  color: var(--color-info-text) !important;
  border-color: var(--color-info-text) !important;
}

.notification-list {
  display: grid;
  max-height: 28rem;
  overflow-y: auto;
}

.notification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item:hover {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--color-border-strong);
  color: var(--color-text-primary);
}

.notification-item.is-unread {
  background: color-mix(in srgb, var(--color-info-bg) 56%, var(--color-surface));
}

.notification-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.42rem;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}

.notification-item.is-unread .notification-dot {
  background: var(--color-info-text);
  box-shadow: 0 0 0 3px var(--color-info-bg);
}

.notification-copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.notification-title {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: var(--text-sm-line);
}

.notification-title:hover {
  text-decoration: underline;
}

.notification-title strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--text-xs);
}

.notification-subject {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--text-xs-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item-action {
  margin-top: var(--space-2);
}

.notification-mark-read-button {
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  padding: 0.28rem 0.5rem;
}

.notification-item.is-unread .notification-body,
.notification-item.is-unread .notification-meta {
  color: var(--color-text-secondary);
}

.notification-empty {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.notification-empty strong {
  color: var(--color-text-primary);
}

.notifications-page {
  display: grid;
  gap: var(--space-4);
}

.notification-page-list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.notification-page-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
}

.notification-page-item:last-child {
  border-bottom: 0;
}

.notification-page-item.is-unread {
  background: color-mix(in srgb, var(--color-info-bg) 42%, var(--color-surface));
}

.notification-page-item.is-read {
  background: var(--color-surface);
}

.notification-page-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.notification-status {
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  padding: 0.18rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: var(--text-xs-line);
}

.notification-status.is-new {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.theme-moon,
html[data-theme="dark"] .theme-sun {
  display: none;
}

html[data-theme="dark"] .theme-moon {
  display: block;
}

.global-search {
  display: grid;
  grid-template-columns: auto minmax(8rem, 18rem) auto;
  align-items: center;
  gap: var(--space-2);
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
}

.global-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  outline: 0;
}

.global-search kbd {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.35rem;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.back-strip {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-2) clamp(1rem, 3vw, 2rem);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.back-button {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.back-button:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}

.page-content {
  width: 100%;
  max-width: none;
  flex: 1;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  animation: fadeInUp 150ms var(--ease-out);
}

.page-heading {
  margin-bottom: var(--space-4);
}

.page-heading h1 {
  color: var(--color-text-primary);
  font-family: var(--font-page-title);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--text-3xl-line);
}

.page-heading p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm-line);
}

.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.alert {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-3);
}

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

.alert-info {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

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

[data-tooltip]::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 60;
  max-width: 14rem;
  transform: translateX(-50%) translateY(0.2rem);
  border-radius: var(--radius-md);
  background: #111614;
  color: #fff;
  content: attr(data-tooltip);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--text-xs-line);
  opacity: 0;
  padding: 0.35rem 0.5rem;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-sidebar [data-tooltip]::after {
  left: calc(100% + 0.45rem);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-0.2rem);
}

.app-sidebar [data-tooltip]:hover::after,
.app-sidebar [data-tooltip]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

.app-topbar [data-tooltip]::after {
  top: calc(100% + 0.45rem);
  bottom: auto;
  transform: translateX(-50%) translateY(-0.2rem);
}

.app-topbar [data-tooltip]:hover::after,
.app-topbar [data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.topbar-title [data-tooltip]::after {
  left: 0;
  transform: translateY(-0.2rem);
}

.topbar-title [data-tooltip]:hover::after,
.topbar-title [data-tooltip]:focus-visible::after {
  transform: translateY(0);
}

.topbar-actions [data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translateY(-0.2rem);
}

.topbar-actions [data-tooltip]:hover::after,
.topbar-actions [data-tooltip]:focus-visible::after {
  transform: translateY(0);
}

.toast-stack {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 80;
  display: grid;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - 2rem));
}

/* Unter dem Toast-Stack (z-index 80): Toasts duerfen den Knopf kurz
   ueberdecken, das stoert nicht, da sie von selbst verschwinden. */
.scroll-top-btn {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 45;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.scroll-top-btn:hover {
  transform: translateY(-2px);
}

.scroll-top-btn[hidden] {
  display: none;
}

.app-toast {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
}

.app-toast.success {
  border-color: var(--color-success-border);
}

.app-toast i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--color-accent);
  animation: toastProgress 4s linear forwards;
}

.app-toast.error {
  border-color: var(--color-danger-border);
}

.app-toast.error i {
  background: var(--color-danger-text);
}

/* Formular wird im Hintergrund gespeichert (Absende-Skript in layouts/app.blade.php). */
form[aria-busy="true"] {
  cursor: progress;
}

form[aria-busy="true"] :is(button, input[type="submit"]) {
  cursor: progress;
  opacity: 0.6;
}

.skeleton,
.loading-skeleton {
  overflow: hidden;
  position: relative;
  background: var(--color-bg-subtle);
}

.priority-segment:has(input:checked) {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-subtle) !important;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

[data-submit-button]:disabled {
  cursor: not-allowed;
}

.skeleton::after,
.loading-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 65%, transparent), transparent);
  content: "";
  transform: translateX(-100%);
  animation: shimmer 1.25s infinite;
}

.bg-white,
.bg-slate-50,
.bg-slate-50\/60,
.bg-slate-50\/70 {
  background-color: var(--color-surface) !important;
}

.bg-slate-100,
.bg-slate-200 {
  background-color: var(--color-bg-subtle) !important;
}

.bg-blue-50,
.bg-blue-100,
.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover {
  background-color: var(--color-info-bg) !important;
  color: var(--color-info-text) !important;
}

.bg-emerald-50,
.bg-emerald-100,
.bg-green-50,
.bg-green-100,
.hover\:bg-emerald-50:hover,
.hover\:bg-emerald-100:hover,
.hover\:bg-green-50:hover,
.hover\:bg-green-100:hover {
  background-color: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
}

.bg-amber-50,
.bg-amber-100,
.bg-yellow-50,
.bg-yellow-100,
.bg-orange-50,
.bg-orange-100,
.hover\:bg-amber-50:hover,
.hover\:bg-amber-100:hover,
.hover\:bg-yellow-50:hover,
.hover\:bg-yellow-100:hover,
.hover\:bg-orange-50:hover,
.hover\:bg-orange-100:hover {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning-text) !important;
}

.bg-red-50,
.bg-red-100,
.bg-rose-50,
.bg-rose-100,
.hover\:bg-red-50:hover,
.hover\:bg-red-100:hover,
.hover\:bg-rose-50:hover,
.hover\:bg-rose-100:hover {
  background-color: var(--color-danger-bg) !important;
  color: var(--color-danger-text) !important;
}

.bg-red-600,
.bg-red-700,
.bg-red-800,
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover,
.hover\:bg-red-800:hover {
  background-color: var(--color-danger) !important;
  color: #ffffff !important;
}

.bg-amber-600,
.bg-amber-700,
.hover\:bg-amber-600:hover,
.hover\:bg-amber-700:hover {
  background-color: var(--color-warning) !important;
  color: #ffffff !important;
}

.bg-emerald-600,
.bg-emerald-700,
.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: var(--color-success) !important;
  color: #ffffff !important;
}

.disabled\:bg-slate-300:disabled {
  background-color: var(--color-bg-subtle) !important;
  color: var(--color-text-muted) !important;
}

.text-slate-900,
.text-slate-800,
.text-slate-700,
.text-\[\#1F3A5F\] {
  color: var(--color-text-primary) !important;
}

.text-slate-600,
.text-slate-500 {
  color: var(--color-text-secondary) !important;
}

.text-slate-400 {
  color: var(--color-text-muted) !important;
}

.text-blue-800,
.text-blue-800\/70 {
  color: #2f6fb6 !important;
}

.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-blue-950,
.text-blue-800\/70 {
  color: var(--color-info-text) !important;
}

.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-emerald-950,
.text-green-700,
.text-green-800,
.text-green-900,
.text-green-950 {
  color: var(--color-success-text) !important;
}

.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-amber-950,
.text-yellow-600,
.text-yellow-700,
.text-yellow-800,
.text-yellow-900,
.text-yellow-950,
.text-orange-600,
.text-orange-700,
.text-orange-800,
.text-orange-900,
.text-orange-950 {
  color: var(--color-warning-text) !important;
}

.text-red-400,
.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800,
.text-red-900,
.text-red-950,
.text-rose-600,
.text-rose-700,
.text-rose-800,
.text-rose-900,
.text-rose-950 {
  color: var(--color-danger-text) !important;
}

.border-slate-100,
.border-slate-200,
.border-slate-300,
.ring-slate-200 {
  border-color: var(--color-border) !important;
}

.border-blue-100,
.border-blue-200,
.border-blue-300,
.ring-blue-100,
.ring-blue-200 {
  border-color: var(--color-info-border) !important;
}

.border-emerald-100,
.border-emerald-200,
.border-emerald-300,
.ring-emerald-100,
.ring-emerald-200 {
  border-color: var(--color-success-border) !important;
}

.border-amber-100,
.border-amber-200,
.border-amber-300,
.border-yellow-100,
.border-yellow-200,
.border-yellow-300,
.ring-amber-100,
.ring-amber-200,
.ring-yellow-100,
.ring-yellow-200 {
  border-color: var(--color-warning-border) !important;
}

.border-red-100,
.border-red-200,
.border-red-300,
.border-red-400,
.border-rose-100,
.border-rose-200,
.border-rose-300,
.ring-red-100,
.ring-red-200,
.ring-red-300,
.ring-rose-100,
.ring-rose-200 {
  border-color: var(--color-danger-border) !important;
}

.bg-\[\#1F3A5F\],
.hover\:bg-\[\#172d49\]:hover,
.hover\:bg-\[\#172f50\]:hover,
.hover\:bg-\[\#17304f\]:hover,
.file\:bg-\[\#1F3A5F\]::file-selector-button {
  background-color: var(--color-text-primary) !important;
  color: var(--color-surface) !important;
}

.focus\:border-\[\#1F3A5F\]:focus,
.hover\:border-\[\#1F3A5F\]:hover {
  border-color: var(--color-info-text) !important;
}

.hover\:bg-slate-50:hover,
.hover\:bg-slate-50\/60:hover,
.hover\:bg-slate-50\/70:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-white\/10:hover,
.hover\:bg-white\/20:hover {
  background-color: color-mix(in srgb, var(--color-surface) 94%, var(--color-text-primary)) !important;
  color: var(--color-text-primary) !important;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.hover\:bg-\[\#172d49\]:hover,
.hover\:bg-\[\#172f50\]:hover,
.hover\:bg-\[\#17304f\]:hover,
.hover\:bg-black:hover {
  background-color: var(--color-text-primary) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 32%, transparent), var(--shadow-sm);
}

.focus\:ring-\[\#1F3A5F\]\/10:focus,
.focus\:ring-\[\#1F3A5F\]\/15:focus,
.focus\:ring-\[\#1F3A5F\]\/20:focus,
.focus\:ring-\[\#1F3A5F\]\/30:focus {
  --tw-ring-color: color-mix(in srgb, var(--color-info-text) 28%, transparent) !important;
}

.shadow,
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-lg,
.shadow-xl {
  box-shadow: var(--shadow-lg) !important;
}

.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl {
  border-radius: var(--radius-lg) !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 28%, transparent) !important;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

tr,
.kb-card,
article,
section.bg-white,
.rounded-lg.border,
.rounded.border {
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}

.kb-card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-strong) 45%, transparent), var(--shadow-sm) !important;
}

html[data-theme="dark"] .text-white,
html[data-theme="dark"] .text-white\/70,
html[data-theme="dark"] .text-white\/80 {
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] .bg-\[\#1F3A5F\].text-white,
html[data-theme="dark"] button.bg-\[\#1F3A5F\],
html[data-theme="dark"] a.bg-\[\#1F3A5F\],
html[data-theme="dark"] .hover\:bg-\[\#172d49\]:hover,
html[data-theme="dark"] .hover\:bg-\[\#172f50\]:hover,
html[data-theme="dark"] .hover\:bg-\[\#17304f\]:hover,
html[data-theme="dark"] .file\:bg-\[\#1F3A5F\]::file-selector-button {
  color: var(--color-surface) !important;
}

html[data-theme="dark"] .notification-read-button,
html[data-theme="dark"] .notification-mark-read-button,
html[data-theme="dark"] .feed-action-button {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #64748b !important;
}

html[data-theme="dark"] .notification-read-button:hover,
html[data-theme="dark"] .notification-mark-read-button:hover,
html[data-theme="dark"] .feed-action-button:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #93c5fd !important;
}

.microsoft-login-button,
.microsoft-login-button:hover,
html[data-theme="dark"] .microsoft-login-button,
html[data-theme="dark"] .microsoft-login-button:hover {
  background-color: #111827 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .bg-gradient-to-r,
html[data-theme="dark"] .from-\[\#1F3A5F\],
html[data-theme="dark"] .to-\[\#2A5788\] {
  background-image: none !important;
  background-color: var(--color-surface-raised) !important;
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-100 {
  background-color: var(--color-info-bg) !important;
  color: var(--color-info-text) !important;
}

html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-800\/70 {
  color: #8fc8ff !important;
}

html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-100 {
  background-color: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-yellow-50 {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning-text) !important;
}

html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-100,
html[data-theme="dark"] .bg-rose-100 {
  background-color: var(--color-danger-bg) !important;
  color: var(--color-danger-text) !important;
}

html[data-sidebar="collapsed"] .app-shell {
  grid-template-columns: 5rem minmax(0, 1fr);
}

html[data-sidebar="collapsed"] .app-sidebar {
  width: 5rem;
}

html[data-sidebar="collapsed"] .sidebar-link span,
html[data-sidebar="collapsed"] .user-copy,
html[data-sidebar="collapsed"] .locale-switch {
  display: none;
}

html[data-sidebar="collapsed"] .brand-lockup,
html[data-sidebar="collapsed"] .sidebar-link {
  justify-content: center;
}

html[data-sidebar="collapsed"] .brand-logo-full {
  display: none !important;
}

html[data-sidebar="collapsed"] .brand-logo-icon {
  display: block !important;
}

html[data-sidebar="collapsed"] .user-card {
  grid-template-columns: 1fr;
  justify-items: center;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes toastProgress {
  to {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 900px) {
  .app-shell,
  html[data-sidebar="collapsed"] .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    width: 5rem;
  }

  .sidebar-link span,
  .user-copy,
  .locale-switch {
    display: none;
  }

  .brand-lockup,
  .sidebar-link {
    justify-content: center;
  }

  .app-frame {
    grid-column: 1;
    padding-left: 5rem;
  }

  .global-search {
    display: none;
  }

  .notification-panel {
    right: -3.25rem;
  }

  .topbar-title h1 {
    font-size: var(--text-xl);
    line-height: var(--text-xl-line);
  }

  .brand-logo-full {
    display: none !important;
  }

  .brand-logo-icon {
    display: block !important;
  }
}

@media (max-width: 520px) {
  html[data-mobile-menu="open"],
  html[data-mobile-menu="open"] body {
    overflow: hidden;
  }

  .app-frame {
    padding-left: 0;
  }

  .app-sidebar {
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(20rem, calc(100vw - 2rem));
    min-height: 100dvh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    border-top: 0;
    border-right: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
    transform: translateX(-105%);
    transition: transform var(--duration-normal) var(--ease-out);
  }

  html[data-mobile-menu="open"] .app-sidebar {
    transform: translateX(0);
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;
    border: 0;
    border-radius: 0;
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-out);
  }

  html[data-mobile-menu="open"] .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .brand-lockup {
    justify-content: flex-start;
    min-height: 4.75rem;
  }

  .icon-button.mobile-menu-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-grid;
  }

  .sidebar-bottom {
    display: grid;
  }

  .locale-switch {
    display: grid;
  }

  .user-copy {
    display: grid;
  }

  .sidebar-nav {
    width: auto;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    overflow-y: auto;
    padding: var(--space-3);
  }

  .sidebar-link {
    justify-content: flex-start;
    min-height: 2.9rem;
  }

  .sidebar-link span {
    display: inline;
  }

  html[data-sidebar="collapsed"] .app-sidebar {
    width: min(20rem, calc(100vw - 2rem));
  }

  html[data-sidebar="collapsed"] .sidebar-link span,
  html[data-sidebar="collapsed"] .user-copy,
  html[data-sidebar="collapsed"] .locale-switch {
    display: revert;
  }

  html[data-sidebar="collapsed"] .user-copy,
  html[data-sidebar="collapsed"] .locale-switch {
    display: grid;
  }

  html[data-sidebar="collapsed"] .brand-lockup,
  html[data-sidebar="collapsed"] .sidebar-link {
    justify-content: flex-start;
  }

  html[data-sidebar="collapsed"] .user-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: stretch;
  }

  html[data-mobile-menu="open"] .brand-logo-full {
    display: block !important;
  }

  html[data-mobile-menu="open"] .brand-logo-icon {
    display: none !important;
  }

  .page-content {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  .app-topbar {
    align-items: flex-start;
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  }
}

/* ---------- Dashboard-Ticketlisten ---------- */
/* Feste Badge-Spalte (statt auto/1fr-Flex), damit die Badges bei jeder Zeile an
   derselben Position stehen, egal wie lang der Titel ist - nur linksbuendig statt
   der urspruenglichen justify-end-Ausrichtung. justify-start liegt (wie
   grid-cols-[...]) nicht kompiliert vor, daher als echte CSS-Regel statt
   Tailwind-Arbitrary-Value/-Utility. */
.dash-ticket-row {
  align-items: center;
}

@media (min-width: 640px) {
  .dash-ticket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem 5.75rem;
    gap: var(--space-3, 0.75rem);
  }
}

.dash-ticket-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-ticket-badges {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2, 0.5rem);
}

.dash-ticket-time {
  text-align: left;
  white-space: nowrap;
}

/* ---------- Kontoantrags-Liste ---------- */
/* Feste Spalten als echte CSS-Regel: fuer neu erfundene Tailwind-Arbitrary-Values
   (grid-cols-[...]) gibt es keinen Build-Schritt, sie landen nie in app.css. */
.acc-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-1, 0.25rem) var(--space-4, 1rem);
}

.acc-head {
  display: none;
}

@media (min-width: 768px) {
  /* Organisationsspalte: 5rem waren schmaler als die Ueberschrift "ORGANISATION",
     die lief deshalb in die Nachbarspalte. */
  .acc-row {
    grid-template-columns: 8.5rem minmax(0, 1fr) 7rem minmax(0, 1.2fr) 6.5rem 5.5rem;
  }

  .acc-head {
    display: grid;
  }

  /* Datumsspalte rechtsbuendig */
  .acc-row > :last-child {
    text-align: right;
  }
}

/* ---------- Filterleiste der Antragsliste ---------- */
/* Die Beschriftungen stehen ueber den Feldern, daher Ausrichtung an der
   Unterkante — items-end liegt nicht kompiliert vor. */
.acc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 0.75rem);
}

/* ---------- Beschriftung/Wert-Listen (Ticket-Eigenschaften, Antrags-Panel) ---------- */
/* Schmale Beschriftungsspalte als echte CSS-Regel: arbitrary grid-cols-[...] werden
   ohne Build-Schritt nie kompiliert und wirken still nicht — Label und Wert stuenden
   dann untereinander statt nebeneinander. */
.prop-list {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  /* baseline statt center: Bricht eine lange Beschriftung um, stuende der Wert bei
     center auf ihrer MITTE — man sucht dann, was zu was gehoert. So liegt er neben
     der ersten Zeile. */
  align-items: baseline;
  gap: 0.375rem 0.75rem;
}

/* Keine feste Breite: Der Browser macht ein datetime-local genau so breit, wie sein
   Inhalt braucht. Als Flex-Element schrumpft es dank min-width:auto nicht darunter —
   die Uhrzeit kann also nicht abschneiden, und dahinter bleibt keine Luft. Jeder
   geratene rem-Wert war entweder zu breit oder zu schmal.
   color-scheme:light erzwingen: Das Feld ist mit border-slate-200/text-slate-900
   fuer eine helle Darstellung gestylt. Im Dark Theme setzt html[data-theme="dark"]
   color-scheme:dark, dann rendert der Browser das native Kalender-/Uhrzeit-Widget
   in seinen dunklen Systemfarben — passt nicht mehr zum hellen Rahmen/Text und
   wirkt wie ein Fremdkoerper. */
.prop-list input[type="datetime-local"] {
  width: auto;
  color-scheme: light;
}

/* Die 1fr-Wertspalte (siehe .prop-list oben) ist schmaler als 9rem — nicht breit
   genug fuer ein datetime-local, das ragte ueber den Kartenrand hinaus. Diese
   Zeile bekommt daher die volle Kartenbreite; die Beschriftung "Fällig am"
   steht dafuer allein in ihrer Zeile statt neben dem Wert. */
.prop-list .due-at-cell {
  grid-column: 1 / -1;
}

/* Badges (Status, Typ, Prioritaet) tragen px-2 Innenabstand. Ohne Ausgleich beginnt
   ihr Text 0.5rem rechts von dem der Klartext-Werte daneben ("Philipp") — die
   Wertespalte wirkt dann ausgefranst. Der negative Rand zieht den Text auf eine Linie,
   der farbige Hintergrund ragt bewusst leicht nach links. */
.prop-list > dd > .inline-flex {
  margin-left: -0.5rem;
}

/* ---------- Dashboard-Kachelreihe ---------- */
/* Sechs Kacheln: md:grid-cols-6 ist nicht kompiliert und haette still nicht
   gewirkt. Gestaffelt, weil sechs Kacheln auf Tablet-Breite zu schmal wuerden. */
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .dash-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .dash-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------- Kontoantrags-Formular ---------- */
/* Innenabstaende als echte Regel statt p-6/md:p-8: Ein pt-* daneben wuerde auf
   Desktop verlieren (md:p-8 steht spaeter in app.css), und md:pt-* ist gar nicht
   kompiliert. */
.account-request-form {
  padding: 1rem 1.5rem 1.5rem;
}

@media (min-width: 768px) {
  .account-request-form {
    padding: 1.25rem 2rem 2rem;
  }
}

/* @csrf rendert ein <input type="hidden"> — das traegt aber kein hidden-ATTRIBUT.
   Tailwinds space-y-* zaehlt es als Geschwister und gibt dem ersten sichtbaren
   Element 1.25rem Abstand nach oben, die im Markup nirgends stehen. */
.account-request-form > input[type="hidden"] + * {
  margin-top: 0;
}

/* ---------- Abteilungs-Zeile im Admin ---------- */
/* md:grid-cols-[minmax(0,1fr)_auto] liegt nicht kompiliert vor und haette still
   nicht gewirkt — genau deshalb standen Name, "Aktiv" und "Speichern" zuvor
   untereinander statt nebeneinander. */
.dept-fields {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .dept-fields {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ---------- Kategorien- und Abteilungs-Formulare im Admin ---------- */
/* Beide nutzten Arbitrary-Grids (lg:grid-cols-[...], md:grid-cols-[...]), die es
   ohne Build-Schritt nie in app.css gab: Es existiert nicht eine einzige
   lg:grid-cols-[...]-Regel. Die Felder standen deshalb allesamt untereinander,
   jedes ueber die volle Breite. */
.cat-fields,
.cat-add-form,
.dept-add-form {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .cat-fields {
    grid-template-columns: minmax(0, 1fr) 220px 220px auto;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .dept-add-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
  }

  /* Anlegen-Formular der Kategorien: Labels stehen ueber den Feldern, daher end. */
  .cat-add-form {
    grid-template-columns: minmax(0, 1fr) 220px 220px auto auto;
    align-items: end;
  }
}

/* Fehlermeldung ueber die ganze Breite — sonst quetscht sie sich in eine Spalte. */
.dept-add-form > [data-department-add-error] {
  grid-column: 1 / -1;
}

/* Zugangsdaten-Liste im Antrags-Panel. grid-cols-[auto_1fr] liegt nicht
   kompiliert vor — die Werte waeren unter ihre Beschriftung gerutscht. */
.creds-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
}

/* KB-Editor: Hauptspalte + Seitenleiste. xl:grid-cols-[minmax(0,1fr)_22rem] liegt
   nicht kompiliert vor — die Seitenleiste rutschte unter den Editor. */
.kb-edit-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1280px) {
  .kb-edit-grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }
}

/* Durchgestrichene Null (0 vs. O unterscheidbar machen).
   Wichtig: San Francisco/Segoe (system-ui, unsere Body-Schrift) kennen den
   OpenType-"zero"-Feature NICHT — die Regel wuerde dort still wirkungslos
   bleiben. Das bereits gebuendelte "Open Sans Local" beherrscht ihn, daher
   rendern wir Zahlen ueber diese Klasse gezielt in Open Sans.
   Referenzen/IDs laufen ohnehin ueber .font-mono; Monospace-Schriften slashen
   die Null von Haus aus, wir erzwingen es hier nur zusaetzlich. */
.slashed-zero {
  font-family: "Open Sans Local", var(--font-body);
  font-variant-numeric: slashed-zero;
  font-feature-settings: "zero" 1;
}

.font-mono {
  font-variant-numeric: slashed-zero;
  font-feature-settings: "zero" 1;
}

/* Datei-Anhang per Drag & Drop: Container als Dropzone, Highlight beim Ziehen. */
.attachment-dropzone {
  border: 1px dashed #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.attachment-dropzone.is-dragover {
  border-color: #1F3A5F;
  background: color-mix(in srgb, #1F3A5F 7%, transparent);
}

/* Ticket-Detailansicht: Hauptspalte flexibel, Eigenschaften-Sidebar schmaler und
   mit fester Breite (statt 1/3-Grid). minmax(0,1fr) verhindert Overflow langer Inhalte. */
.ticket-detail-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .ticket-detail-grid {
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
  }
}

/* Automations-Editor: Regelkarten mit WENN/UND/DANN. Handgeschrieben, weil die
   ausgelieferte app.css nur die bereits verwendeten Tailwind-Klassen enthaelt. */
.automation-card {
  display: block;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--color-surface, #fff);
  padding: 0.875rem 1rem;
}
.automation-card.is-dragging { opacity: .5; }
.automation-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.automation-drag { cursor: grab; color: var(--color-text-muted, #94a3b8); font-size: 1.1rem; user-select: none; }
.automation-name {
  flex: 1 1 14rem;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #0f172a);
}
.automation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary, #475569);
  white-space: nowrap;
}
.automation-stop { margin-top: 0.5rem; }
.automation-row, .automation-kw-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary, #475569);
}
.automation-kw {
  display: inline-block;
  min-width: 3.2rem;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: .06em;
  color: #1F3A5F;
}
.automation-block { margin: 0.75rem 0; padding-left: 0.25rem; border-left: 2px solid var(--color-border, #e2e8f0); padding-left: 0.75rem; }
.automation-list { display: flex; flex-direction: column; gap: 0.4rem; }
.automation-line { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.automation-select, .automation-input {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #0f172a);
  max-width: 100%;
}
.automation-select-sm { max-width: 9rem; }
.automation-input-sm { max-width: 6rem; }
.automation-value { display: inline-flex; gap: 0.4rem; min-width: 0; }
.automation-value [hidden] { display: none !important; }
.automation-remove {
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-muted, #94a3b8);
  font-size: 1.1rem; line-height: 1; padding: 0 0.35rem;
}
.automation-remove:hover { color: #b91c1c; }
.automation-add {
  margin-top: 0.4rem;
  border: 1px dashed var(--color-border-strong, #cbd5e1);
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary, #475569);
  cursor: pointer;
}
.automation-add:hover { border-color: #1F3A5F; color: #1F3A5F; }
.automation-hint { margin-top: 0.35rem; font-size: 0.7rem; color: var(--color-text-muted, #94a3b8); }
.automation-actions-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.85rem; padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.automation-spacer { flex: 1 1 auto; }
.automation-btn {
  border: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #0f172a);
  border-radius: 0.375rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}
.automation-btn:hover { border-color: var(--color-border-strong, #cbd5e1); }
.automation-btn-primary { background: #1F3A5F; border-color: #1F3A5F; color: #fff; }
.automation-btn-primary:hover { background: #172f50; }
.automation-btn-warn { border-color: #D97706; color: #92400e; }
.automation-btn-danger { border-color: #fca5a5; color: #b91c1c; }
.automation-preview { font-size: 0.75rem; color: var(--color-text-secondary, #475569); }
.automation-card-footer {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin: -0.5rem 0 0.25rem; padding: 0 1rem 0.75rem;
}
.automation-new > summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #1F3A5F;
  padding: 0.5rem 0;
}
.automation-new[open] > summary { margin-bottom: 0.5rem; }

/* Nutzer-Auswahl "Ticket für Nutzer": Die Trefferliste lag rechts und war nur so
   breit wie ihr Inhalt — die Tailwind-Klassen left-0/z-20/max-h-64 sind in der
   ausgelieferten app.css nicht enthalten (kein Build-Schritt) und wirkten still
   nicht. Deshalb hier als echtes CSS, inklusive Zeilen-Layout mit Avatar. */
.requester-results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 0.25rem;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--color-surface, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  padding: 0.25rem 0;
}
.requester-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.requester-option:hover,
.requester-option:focus-visible {
  background: color-mix(in srgb, var(--color-border, #e2e8f0) 35%, transparent);
  outline: none;
}
.requester-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #ffffff;
  background: #1F3A5F;
  text-transform: uppercase;
}
.requester-option-text {
  min-width: 0;
  flex: 1 1 auto;
}
.requester-option-name {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary, #0f172a);
  overflow-wrap: anywhere;
}
.requester-option-mail {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  overflow-wrap: anywhere;
}

/* Kommentar-Editor (Rich-Text, wie in News/KB): Toolbar + contenteditable.
   Theme-Variablen decken Hell/Dunkel ab; kein Tailwind-Build noetig. Bilder
   laufen weiter ueber die Anhang-/Paste-Pipeline, nicht als Inline-Bilder. */
.comment-rte {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--color-surface, #ffffff);
  overflow: hidden;
}
.comment-rte:focus-within {
  border-color: #1F3A5F;
  box-shadow: 0 0 0 3px color-mix(in srgb, #1F3A5F 15%, transparent);
}
.comment-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  background: color-mix(in srgb, var(--color-border, #e2e8f0) 18%, transparent);
}
.comment-rte-btn {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--color-text-secondary, #475569);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.comment-rte-btn:hover {
  background: var(--color-surface, #ffffff);
  color: var(--color-text-primary, #0f172a);
  border-color: var(--color-border, #e2e8f0);
}
.comment-rte-btn:focus-visible {
  outline: none;
  border-color: #1F3A5F;
  box-shadow: 0 0 0 2px color-mix(in srgb, #1F3A5F 20%, transparent);
}
.comment-rte-sep {
  width: 1px;
  align-self: stretch;
  margin: 0.15rem 0.2rem;
  background: var(--color-border, #e2e8f0);
}
.comment-rte-area {
  min-height: 7rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-primary, #0f172a);
  outline: none;
  overflow-wrap: anywhere;
}
.comment-rte-area.is-empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted, #94a3b8);
  pointer-events: none;
}
.comment-rte-area p { margin: 0 0 0.5rem; }
.comment-rte-area p:last-child { margin-bottom: 0; }
.comment-rte-area ul { list-style: disc; padding-left: 1.4rem; margin: 0.35rem 0; }
.comment-rte-area ol { list-style: decimal; padding-left: 1.4rem; margin: 0.35rem 0; }
.comment-rte-area blockquote {
  margin: 0.5rem 0;
  padding: 0.35rem 0.75rem;
  border-left: 3px solid var(--color-border-strong, #cbd5e1);
  color: var(--color-text-secondary, #475569);
}
.comment-rte-area a { color: #1F3A5F; text-decoration: underline; }

/* @-Erwaehnen-Dropdown im Kommentar-Editor: an document.body gehaengt und
   position:fixed (Viewport-Koordinaten aus getBoundingClientRect direkt
   uebernehmbar), weil .comment-rte selbst overflow:hidden hat und ein
   absolut positioniertes Kind darin abgeschnitten wuerde. Optik an
   .requester-results/-option angelehnt. */
.mention-results {
  position: fixed;
  z-index: 60;
  min-width: 14rem;
  max-width: 20rem;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--color-surface, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  padding: 0.25rem 0;
}
.mention-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.mention-option:hover,
.mention-option.is-active {
  background: color-mix(in srgb, var(--color-border, #e2e8f0) 35%, transparent);
  outline: none;
}
.mention-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #ffffff;
  background: #1F3A5F;
  text-transform: uppercase;
}
.mention-option-text {
  min-width: 0;
  flex: 1 1 auto;
}
.mention-option-name {
  display: block;
  font-weight: 500;
  color: var(--color-text-primary, #0f172a);
  overflow-wrap: anywhere;
}
.mention-option-mail {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  overflow-wrap: anywhere;
}
.mention-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
}

/* E-Mail-Einstellungen auf der Benachrichtigungsseite: zugeklappt, damit die
   Liste der Meldungen die Seite bestimmt. */
.notification-settings {
  margin: 0 0 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--color-surface, #fff);
}
.notification-settings > summary {
  cursor: pointer;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
}
.notification-settings-body {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  padding-top: 0.9rem;
}

/* Je Ereignis ein Haken fuer die Mail und einer fuer die Benachrichtigung. Die
   Haken-Spalten bleiben so schmal wie ihre Ueberschrift, der Text bricht um. */
.notification-channel-table {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.notification-channel-table th,
.notification-channel-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  vertical-align: middle;
}
.notification-channel-table th:first-child {
  padding-left: 0;
}
.notification-channel-table tbody tr:last-child > * {
  border-bottom: 0;
}
.notification-channel-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  white-space: nowrap;
}
.notification-channel-table thead th:not(:first-child),
.notification-channel-table td {
  width: 1%;
  text-align: center;
}
.notification-channel-table tbody th {
  font-weight: 400;
  text-align: left;
  color: var(--color-text-primary, #0f172a);
}

/* Automations-Regeln: eingeklappte Karte mit Zusammenfassung. Die Regeln lagen
   vorher alle offen — bei vier Regeln war die Seite eine Wand aus Auswahlfeldern. */
.automation-details > summary::-webkit-details-marker { display: none; }
.automation-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
  border-radius: 0.5rem;
}
.automation-summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--color-text-muted, #94a3b8);
  transition: transform .12s ease;
}
.automation-details[open] > .automation-summary::before { transform: rotate(90deg); }
.automation-summary:hover { background: color-mix(in srgb, var(--color-border, #e2e8f0) 25%, transparent); }
.automation-summary-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .1rem; }
.automation-summary-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-text-primary, #0f172a);
  overflow-wrap: anywhere;
}
.automation-summary-meta { font-size: .72rem; color: var(--color-text-muted, #94a3b8); }
.automation-badge {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .18rem .5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}
.automation-badge.is-on { background: #dcfce7; color: #166534; }
.automation-badge.is-off { background: color-mix(in srgb, var(--color-border, #e2e8f0) 60%, transparent); color: var(--color-text-muted, #64748b); }
html[data-theme="dark"] .automation-badge.is-on { background: #14532d; color: #bbf7d0; }
.automation-body {
  padding: 0.25rem 0.9rem 0.9rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  margin-top: .1rem;
  padding-top: .8rem;
}
/* Die Karte selbst traegt kein Innenabstand mehr — den setzen summary/body. */
.automation-card { padding: 0; }

/* --- Bilder in Ticket- und Kommentartexten -------------------------------
   Eingefuegte Screenshots kamen in Originalgroesse und schoben den Text weit
   auseinander — ein Bild fuellte den halben Vorgang. Sie erscheinen jetzt als
   Vorschau und gehen erst auf Klick gross auf. Die Begrenzung laeuft ueber die
   Hoehe, nicht die Breite: Screenshots sind meist breiter als hoch, und eine
   Breitenbegrenzung liesse hohe Bilder trotzdem den Verlauf sprengen. */
.ticket-richtext img {
  display: block;
  max-width: 100%;
  max-height: 18rem;
  width: auto;
  height: auto;
  margin: 0.75rem 0;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  cursor: zoom-in;
}

/* Auch verlinkte Bilder oeffnen die Vergroesserung. Eingefuegte Screenshots
   bringen ihren eigenen <a target="_blank"> mit — der Sanitizer laesst ihn
   stehen —, und ein Klick landete dann in einem neuen Tab statt im Overlay.
   Der Link zeigt in aller Regel ohnehin auf dasselbe Bild. */
.ticket-richtext a img { cursor: zoom-in; }

/* Eingefuegter Text bringt die Farben seiner Quelle mit, Mails ebenso: aus einer
   dunklen App weisse Schrift, aus Outlook schwarze auf weissem Grund. Der
   Sanitizer laesst color/background-color auf Absaetzen und Ueberschriften
   stehen, auf Listenpunkten nicht — in einer internen Notiz stand so weisse neben
   gelber Schrift, und im hellen Schema war die weisse kaum zu lesen. Text folgt
   hier deshalb immer dem Farbschema und der Karte, in der er steht. */
.ticket-richtext [style*="color"],
.ticket-richtext font[color] {
  color: inherit !important;
  background-color: transparent !important;
}

/* Interne Notizen heben sich durch ihre Karte ab, nicht durch die Schrift. Die
   Warnfarbe, die .bg-yellow-50 sonst mitgibt, faerbte den ganzen Text gelb bzw.
   braun; jetzt steht er wie in jeder anderen Kommentarkarte. Das Label "Interne
   Notiz" behaelt seine eigene Farbe. Muss nach den Kartenregeln stehen: gleiche
   Spezifitaet, also entscheidet die Reihenfolge. */
.comment-internal,
html[data-theme="dark"] .comment-internal {
  color: inherit !important;
}

/* Anhang-Vorschauen stehen unter dem Verlauf in einer Liste, oft mehrere
   untereinander. Sie duerfen kleiner ausfallen als Bilder im Fliesstext: Dort
   gehoert das Bild zum Satz, hier ist es ein Griff zum Aufklappen. Gross geht
   es per Klick im selben Overlay auf. */
.attachment-preview {
  max-width: 100%;
  max-height: 7rem;
  cursor: zoom-in;
}

/* Das Zitat ueber dem Antwortfeld soll zeigen, worauf man antwortet, und nicht
   das Antwortfeld aus dem Bild schieben. Serverseitig sind es hoechstens 500
   Zeichen; hier bleiben davon rund vier Zeilen stehen, den Rest holt der
   "Mehr anzeigen"-Knopf. Der Knopf blendet sich selbst aus, wenn nichts
   abgeschnitten ist — dafuer misst das Skript scrollHeight gegen clientHeight,
   was ein max-height voraussetzt und eine feste height ausschliesst. */
.quote-preview-body {
  max-height: 6rem;
  overflow: hidden;
}

.quote-preview-body.is-expanded {
  max-height: none;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: rgba(15, 23, 42, 0.85);
}
.image-lightbox[hidden] { display: none; }
.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}
.image-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.image-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }
.image-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Nachgereichte Tailwind-Utilities ----------
   public/css/app.css ist ein vorkompilierter Bundle und ohne package.json hier
   nicht neu baubar. Eine Utility, die dort fehlt, steht zwar im Markup, tut aber
   nichts — still und ohne Fehlermeldung. Die folgenden Klassen waren genau so
   wirkungslos; sie stehen hier als echtes CSS, mit denselben Werten, die Tailwind
   erzeugt haette. */

/* Zwei-Spalten-Layouts: Formular plus Seitenspalte. Ohne die Regel stand das
   <aside> voller Breite unter dem Formular — und zog trotzdem seinen linken Rand,
   weil lg:border-l im Bundle vorhanden ist. */
@media (min-width: 1024px) {
  .lg\:grid-cols-\[minmax\(0\,1fr\)_340px\] {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-\[minmax\(0\,1fr\)_280px\] {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

/* Die Hoch/Runter-Knoepfe zum Umsortieren sind fuer Touch gedacht; am Desktop
   uebernimmt der Ziehgriff. md:inline und lg:hidden liegen im Bundle, md:hidden
   fehlte — die Knoepfe standen dadurch auch am grossen Bildschirm doppelt da. */
@media (min-width: 768px) {
  .md\:hidden { display: none; }
}

/* Ladeanzeige beim Absenden des Portal-Formulars. Ohne die Keyframes stand das
   eingeblendete Symbol still und las sich wie eine haengende Seite. */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }