/* =============================================================
   Orbit · Digitalisierungshilfe — Design System
   Subtle glassmorphism · light theme · brand: deep blue
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand — derived from dh-white.png on its blue gradient: deep navy-cobalt → bright sky */
  --brand-900: #0b1f4d;
  --brand-800: #112d6e;
  --brand-700: #1e3a8a;
  --brand-600: #1d4ed8;
  --brand-500: #2f63ff;
  --brand-400: #4f86ff;
  --brand-300: #7da7ff;
  --brand-200: #b8d0ff;
  --brand-100: #dde9ff;
  --brand-50:  #eef3ff;

  --accent:    #06b6d4;     /* cyan accent for highlights */
  --accent-2:  #8b5cf6;     /* purple accent for variation */

  /* Neutrals */
  --ink-900: #0b1426;
  --ink-700: #1e293b;
  --ink-600: #334155;
  --ink-500: #475569;
  --ink-400: #64748b;
  --ink-300: #94a3b8;
  --ink-200: #cbd5e1;
  --ink-100: #e2e8f0;
  --ink-50:  #f1f5f9;

  /* Surface */
  --bg-base:    #eef2fb;     /* page background */
  --bg-soft:    #f6f8fd;
  --surface:    #ffffff;

  /* Glass */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-soft:   rgba(255, 255, 255, 0.42);
  --glass-border:    rgba(255, 255, 255, 0.85);
  --glass-edge:      rgba(29, 78, 216, 0.08);
  --glass-blur:      14px;
  --glass-blur-lg:   24px;

  /* Status colors (semantic) */
  --status-locked-bg:    #f1f5f9;
  --status-locked-fg:    #64748b;
  --status-open-bg:      #dbeafe;
  --status-open-fg:      #1d4ed8;
  --status-submit-bg:    #fef3c7;
  --status-submit-fg:    #b45309;
  --status-review-bg:    #ede9fe;
  --status-review-fg:    #6d28d9;
  --status-done-bg:      #d1fae5;
  --status-done-fg:      #047857;
  --status-overdue-bg:   #fee2e2;
  --status-overdue-fg:   #b91c1c;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 4px 12px -4px rgba(15, 23, 42, .08);
  --shadow-md: 0 12px 28px -12px rgba(15, 23, 42, .12);
  --shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, .18);
  --shadow-glass: 0 1px 0 0 rgba(255,255,255,.7) inset, 0 -1px 0 0 rgba(15, 23, 42, .04) inset, 0 12px 36px -16px rgba(29, 78, 216, .18);

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  /* Motion */
  --ease:        cubic-bezier(.2, .8, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --t-fast:      150ms;
  --t-base:      220ms;
  --t-slow:      400ms;

  /* Layout */
  --sidebar-w:   268px;
  --topbar-h:    72px;
  --max-content: 1280px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--bg-base);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: var(--brand-200); color: var(--brand-900); }

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 1.8vw, 1.65rem); }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; color: var(--ink-700); }
small, .text-xs { font-size: 0.78rem; color: var(--ink-500); }
.text-muted { color: var(--ink-500); }
.text-mono  { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- Aurora background ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: '';
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .55;
  will-change: transform;
}
.aurora::before {
  top: -25vmax; left: -15vmax;
  background: radial-gradient(circle, var(--brand-300) 0%, transparent 60%);
}
.aurora::after {
  bottom: -25vmax; right: -10vmax;
  background: radial-gradient(circle, #b3e1ff 0%, transparent 60%);
  opacity: .45;
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after { opacity: .35; }
}

/* ---------- Layout shell ---------- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }
.app-shell.is-public { grid-template-columns: 1fr; }
.app-main { min-width: 0; padding: var(--s-6) var(--s-7) var(--s-9); }
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-main  { padding: var(--s-5); padding-top: calc(var(--topbar-h) + var(--s-5)); }
}

/* ---------- Sidebar (glass) ---------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: var(--s-6) var(--s-5);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%);
  border-right: 1px solid var(--glass-border);
  box-shadow: 1px 0 0 0 var(--glass-edge);
  display: flex; flex-direction: column; gap: var(--s-6);
  z-index: 5;
}
.brand-row { display: flex; align-items: center; gap: var(--s-3); }
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 11px;
  box-shadow: 0 6px 18px -6px rgba(29,78,216,.45), 0 0 0 1px rgba(255,255,255,.5);
  flex-shrink: 0;
}
.brand-logo-sm { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 4px 12px -4px rgba(29,78,216,.4); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: .95rem; color: var(--ink-900); letter-spacing: -.01em; }
.brand-text span { font-size: .72rem; color: var(--ink-500); letter-spacing: .03em; text-transform: uppercase; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-section-title {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  color: var(--ink-400); text-transform: uppercase;
  padding: var(--s-2) var(--s-3); margin-top: var(--s-3);
}
.nav-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-700);
  font-weight: 500; font-size: .92rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  position: relative;
}
.nav-link:hover { background: var(--brand-50); color: var(--brand-700); }
.nav-link.is-active {
  background: linear-gradient(180deg, rgba(29,78,216,.08), rgba(29,78,216,.04));
  color: var(--brand-700);
  box-shadow: 0 0 0 1px rgba(29,78,216,.15) inset;
}
.nav-link.is-active::before {
  content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
  background: var(--brand-600); border-radius: 0 3px 3px 0;
}
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }

.sidebar-foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--ink-100); }
.user-chip {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--accent));
  color: white; font-weight: 600; font-size: .85rem;
  box-shadow: 0 2px 6px -2px rgba(29,78,216,.4);
}
.user-chip-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-chip-name strong { font-size: .88rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-name small { font-size: .72rem; color: var(--ink-500); }
.user-chip a { font-size: .75rem; color: var(--ink-500); }
.user-chip a:hover { color: var(--brand-600); }

/* ---------- Topbar (mobile) ---------- */
.topbar-mobile {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  border-bottom: 1px solid var(--glass-border);
  z-index: 20;
  align-items: center; justify-content: space-between;
  padding: 0 var(--s-5);
}
@media (max-width: 960px) {
  .topbar-mobile { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    z-index: 50;
  }
  .sidebar.is-open { transform: translateX(0); }
  .scrim { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 40; backdrop-filter: blur(2px); }
}
.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
  transition: background var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--brand-50); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- Page header ---------- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.page-head-titles { display: flex; flex-direction: column; gap: 4px; }
.page-head-titles .crumbs { font-size: .8rem; color: var(--ink-500); display: flex; gap: 6px; align-items: center; }
.page-head-titles h1 { margin: 0; }
.page-head-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ---------- Glass card ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glass);
}
.glass--soft  { background: var(--glass-bg-soft); }
.glass--strong{ background: var(--glass-bg-strong); }
.card { padding: var(--s-6); }
.card-tight { padding: var(--s-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-head h2, .card-head h3 { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 42px; padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-weight: 600; font-size: .92rem; line-height: 1;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(29,78,216,.55), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(29,78,216,.65), 0 0 0 1px rgba(255,255,255,.35) inset; color: #fff; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink-700);
  backdrop-filter: blur(var(--glass-blur));
}
.btn-ghost:hover { background: var(--surface); color: var(--brand-700); }

.btn-danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(185,28,28,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.btn-danger:hover { color: #fff; transform: translateY(-1px); }

.btn-success {
  background: linear-gradient(180deg, #10b981, #047857);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(4,120,87,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.btn-success:hover { color: #fff; transform: translateY(-1px); }

.btn-sm { height: 34px; padding: 0 var(--s-4); font-size: .82rem; border-radius: var(--r-sm); }
.btn-icon-only { width: 42px; padding: 0; }
.btn-icon-only.btn-sm { width: 34px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.label { font-size: .82rem; font-weight: 600; color: var(--ink-700); }
.label-help { font-size: .76rem; color: var(--ink-500); font-weight: 400; margin-left: 4px; }
.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: .92rem;
  color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  backdrop-filter: blur(8px);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(47, 99, 255, .14);
  background: var(--surface);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input[readonly], .input:disabled { background: var(--ink-50); color: var(--ink-500); }
.helper { font-size: .76rem; color: var(--ink-500); }
.error  { font-size: .8rem; color: #b91c1c; }

/* Checkbox */
.check { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; user-select: none; font-size: .92rem; }
.check input { width: 18px; height: 18px; accent-color: var(--brand-600); }
.check-card {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--ink-200); border-radius: var(--r-md);
  background: var(--glass-bg-soft);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.check-card:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.table thead th {
  background: var(--glass-bg-soft);
  text-align: left; font-weight: 600; color: var(--ink-600);
  padding: 12px 16px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink-100);
}
.table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: rgba(29,78,216,.04); }
.table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- Badges / Pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .02em;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge-locked  { background: var(--status-locked-bg);  color: var(--status-locked-fg); }
.badge-open    { background: var(--status-open-bg);    color: var(--status-open-fg); }
.badge-submit  { background: var(--status-submit-bg);  color: var(--status-submit-fg); }
.badge-review  { background: var(--status-review-bg);  color: var(--status-review-fg); }
.badge-done    { background: var(--status-done-bg);    color: var(--status-done-fg); }
.badge-overdue { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }
.badge-info    { background: var(--brand-50);          color: var(--brand-700); }
.badge-neutral { background: var(--ink-50);            color: var(--ink-600); }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--s-6); }
.stat {
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.stat-label { font-size: .78rem; color: var(--ink-500); font-weight: 500; }
.stat-value { font-size: 1.85rem; font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; line-height: 1; }
.stat-sub   { font-size: .78rem; color: var(--ink-500); margin-top: 2px; }
.stat-icon {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700);
}

/* ---------- Toast / Flash ---------- */
.flash {
  position: fixed; top: var(--s-5); right: var(--s-5);
  z-index: 100;
  display: flex; flex-direction: column; gap: var(--s-2);
  max-width: 380px;
}
.flash-item {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--brand-500);
  font-size: .88rem;
  animation: slideIn var(--t-base) var(--ease);
}
.flash-item.success { border-left-color: #10b981; }
.flash-item.error   { border-left-color: #ef4444; }
.flash-item.info    { border-left-color: var(--brand-500); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(11, 31, 77, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 90; display: grid; place-items: center;
  padding: var(--s-5);
  animation: fadeIn var(--t-fast) var(--ease);
}
.modal {
  width: min(640px, 100%);
  max-height: 90dvh; overflow: auto;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2xl);
  padding: var(--s-7);
  box-shadow: var(--shadow-lg);
  animation: zoomIn var(--t-base) var(--ease-out);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.modal-head h2 { margin: 0; }
.modal-foot { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-6); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* ---------- Progress ring ---------- */
.ring-wrap { position: relative; display: inline-grid; place-items: center; }
.ring-wrap .ring-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 700; color: var(--ink-900);
}
.ring-wrap.ring-sm .ring-text { font-size: 1rem; }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: grid; grid-template-columns: 36px 1fr; gap: var(--s-4);
  position: relative; padding: var(--s-4) 0;
}
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute; left: 17px; top: 36px; bottom: -4px;
  width: 2px;
  background: linear-gradient(180deg, var(--ink-200), var(--ink-100));
}
.timeline-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-100); color: var(--ink-500);
  font-weight: 700; font-size: .85rem;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--ink-200);
  z-index: 1;
}
.timeline-item.is-done .timeline-dot { background: var(--status-done-fg); color: #fff; box-shadow: 0 0 0 1px var(--status-done-fg); }
.timeline-item.is-active .timeline-dot { background: var(--brand-600); color: #fff; box-shadow: 0 0 0 4px rgba(29,78,216,.18); }
.timeline-item.is-overdue .timeline-dot { background: var(--status-overdue-fg); color: #fff; box-shadow: 0 0 0 1px var(--status-overdue-fg); }
.timeline-body { padding-top: 4px; min-width: 0; }
.timeline-body h4 { margin: 0 0 4px; font-size: .95rem; color: var(--ink-900); }
.timeline-body p { font-size: .85rem; color: var(--ink-600); margin: 0; }
.timeline-meta { font-size: .76rem; color: var(--ink-500); display: flex; gap: var(--s-3); align-items: center; margin-top: 6px; flex-wrap: wrap; }

/* ---------- Drag handles ---------- */
.handle {
  cursor: grab; color: var(--ink-300);
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 6px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.handle:hover { color: var(--brand-600); background: var(--brand-50); }
.is-dragging { opacity: .55; }
.drop-target { outline: 2px dashed var(--brand-500); outline-offset: 2px; border-radius: var(--r-md); }

/* ---------- Helper utilities ---------- */
.row { display: flex; gap: var(--s-3); align-items: center; }
.row-tight { display: flex; gap: var(--s-2); align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.gap-2 { gap: var(--s-2); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.grid-2 { display: grid; gap: var(--s-5); grid-template-columns: 2fr 1fr; }
@media (max-width: 1024px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s-3);
  padding: var(--s-9) var(--s-5);
  color: var(--ink-500);
}
.empty .empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-600);
  display: grid; place-items: center;
}
.empty h3 { color: var(--ink-700); }

/* Login-specific decorative panel */
.auth-shell {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }
.auth-hero {
  position: relative;
  padding: var(--s-9);
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #0b1f4d 0%, #1d4ed8 50%, #2f63ff 100%);
  color: #fff;
  overflow: hidden;
}
.auth-hero::before, .auth-hero::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .55;
}
.auth-hero::before { top: -10%; right: -10%; width: 60%; height: 60%; background: #38bdf8; }
.auth-hero::after  { bottom: -20%; left: -10%; width: 70%; height: 70%; background: #8b5cf6; opacity: .35; }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero-logo { display: flex; align-items: center; gap: var(--s-3); }
.auth-hero-logo img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.25); }
.auth-hero-logo strong { font-size: 1.05rem; letter-spacing: -.01em; }
.auth-hero-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  max-width: 26ch;
}
.auth-hero-sub { color: rgba(255,255,255,.78); margin-top: var(--s-3); max-width: 38ch; }
.auth-hero-foot { display: flex; gap: var(--s-5); font-size: .82rem; color: rgba(255,255,255,.7); }
.auth-hero-foot strong { color: #fff; display: block; font-size: 1.05rem; }

.auth-form-wrap { display: grid; place-items: center; padding: var(--s-7); }
.auth-form { width: 100%; max-width: 420px; }
.auth-form h1 { margin-bottom: var(--s-2); }
.auth-form .text-muted { margin-bottom: var(--s-6); }
@media (max-width: 900px) { .auth-hero { padding: var(--s-6); min-height: 240px; } }

/* Action card on client dashboard */
.action-card {
  position: relative; overflow: hidden;
  padding: var(--s-7);
}
.action-card::before {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(29,78,216,.18), transparent 70%);
  pointer-events: none;
}
.action-card .action-eyebrow { font-size: .78rem; color: var(--brand-700); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.action-card .action-title { font-size: 1.6rem; font-weight: 600; color: var(--ink-900); margin-top: var(--s-2); letter-spacing: -.02em; line-height: 1.2; }
.action-card .action-desc  { color: var(--ink-600); margin-top: var(--s-3); max-width: 60ch; }
.action-card .action-cta   { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.action-card .action-meta  { display: flex; gap: var(--s-4); margin-top: var(--s-5); flex-wrap: wrap; font-size: .82rem; color: var(--ink-500); }

/* Visually-hidden (a11y) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-link */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s-3); top: var(--s-3); padding: 8px 12px; background: var(--brand-700); color: #fff; border-radius: 6px; z-index: 200; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0ms !important; }
}

/* ── Nachrichten / Messaging ───────────────────────────────── */
.nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #dc2626; color: #fff;
  font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
.msg-row { display: flex; }
.msg-row.msg-mine { justify-content: flex-end; }
.msg-row.msg-them { justify-content: flex-start; }
.msg-bubble {
  max-width: 78%; padding: 10px 13px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ink-100, #e2e8f0);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.msg-mine .msg-bubble { background: #1d4ed8; color: #fff; border-color: transparent; }
.msg-meta { font-size: .72rem; opacity: .75; margin-bottom: 3px; }
.msg-mine .msg-meta { color: #dbeafe; opacity: .9; }
.msg-body { font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg-compose .textarea { width: 100%; }
/* Admin-Inbox-Liste */
.inbox-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ink-100, #e2e8f0); text-decoration: none; color: inherit; }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item:hover { background: rgba(29,78,216,.04); }
.inbox-preview { flex: 1; min-width: 0; }
.inbox-preview .inbox-last { color: var(--ink-600, #475569); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zahlungs-Meilenstein */
.pay-admin { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(29,78,216,.05); border: 1px solid rgba(29,78,216,.12); }
.pay-block .pay-amount { font-size: .95rem; }

/* ── Dashboard-Hero-Banner ─────────────────────────────────── */
.dash-hero {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  border-radius: var(--r-2xl);
  padding: var(--s-7) var(--s-8);
  margin-bottom: var(--s-6);
  min-height: 172px;
  display: flex; flex-direction: column; justify-content: center;
  background:
    url('/assets/img/dashboard-hero.webp?v=2') center 40% / cover no-repeat,
    linear-gradient(135deg, #0b1f4d 0%, #1d4ed8 55%, #2f63ff 100%);
  box-shadow: var(--shadow-lg);
}
/* Lesbarkeits-Overlay: dunkel links -> transparent rechts */
.dash-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(11,31,77,.92) 0%, rgba(11,31,77,.60) 42%, rgba(11,31,77,.18) 78%, rgba(11,31,77,.04) 100%),
    linear-gradient(0deg, rgba(11,31,77,.32), rgba(11,31,77,0) 62%);
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .dh-eyebrow {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.78);
}
.dash-hero h1 {
  margin: .3rem 0 .4rem; color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  text-shadow: 0 2px 18px rgba(11,31,77,.45);
}
.dash-hero .dh-sub {
  color: rgba(255,255,255,.88); font-size: .98rem; max-width: 56ch;
  text-shadow: 0 1px 12px rgba(11,31,77,.4);
}
.dash-hero .dh-actions { margin-top: var(--s-5); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.dash-hero .dh-actions .btn-ghost {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.30);
}
.dash-hero .dh-actions .btn-ghost:hover { background: rgba(255,255,255,.24); }
@media (max-width: 640px) {
  .dash-hero { padding: var(--s-6); min-height: 148px; border-radius: var(--r-xl); }
  .dash-hero::before { background: linear-gradient(90deg, rgba(11,31,77,.9) 0%, rgba(11,31,77,.72) 60%, rgba(11,31,77,.45) 100%); }
}