:root {
  color-scheme: dark;
  --bg-0: #06111f;
  --bg-1: #0a1730;
  --bg-2: #111f3d;
  --surface: rgba(255,255,255,0.085);
  --surface-strong: rgba(255,255,255,0.13);
  --surface-soft: rgba(255,255,255,0.055);
  --line: rgba(255,255,255,0.14);
  --line-strong: rgba(255,255,255,0.23);
  --text: #f8fbff;
  --muted: rgba(244,248,255,0.74);
  --muted-2: rgba(244,248,255,0.58);
  --danger: #ff5b7a;
  --danger-dark: #c92d4d;
  --success: #1dd1a1;
  --success-dark: #10ac84;
  --info: #54a0ff;
  --info-dark: #2e86de;
  --secondary: #8c7cff;
  --secondary-dark: #6c5ce7;
  --warning: #ffd166;
  --shadow-sm: 0 10px 26px rgba(0,0,0,0.18);
  --shadow-md: 0 18px 46px rgba(0,0,0,0.27);
  --shadow-lg: 0 26px 70px rgba(0,0,0,0.34);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(84,160,255,0.34), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(140,124,255,0.34), transparent 27%),
    radial-gradient(circle at 50% 100%, rgba(29,209,161,0.18), transparent 32%),
    linear-gradient(135deg, #071225 0%, #14244a 46%, #241752 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(8px);
  opacity: .65;
  animation: floatBlob 16s var(--ease) infinite alternate;
}

body::before {
  width: 430px;
  height: 430px;
  top: -150px;
  left: -130px;
  background: radial-gradient(circle, rgba(84,160,255,0.34), transparent 68%);
}

body::after {
  width: 520px;
  height: 520px;
  right: -190px;
  bottom: -210px;
  background: radial-gradient(circle, rgba(255,91,122,0.18), transparent 66%);
  animation-delay: -4s;
}

::selection {
  background: rgba(140,124,255,0.42);
  color: #fff;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border: 3px solid rgba(7,18,37,0.82);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); }

body.ui-ready .container,
body.ui-ready .auth-card {
  animation: pageEnter .62s var(--ease) both;
}

.container {
  max-width: 1280px;
  margin: 34px auto;
  padding: 26px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)),
    rgba(7, 14, 28, 0.58);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.container::before,
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.22), transparent 28%, transparent 72%, rgba(255,255,255,0.08)),
    radial-gradient(circle at top right, rgba(84,160,255,0.16), transparent 34%);
  opacity: .66;
  mix-blend-mode: screen;
}

.container > *,
.auth-card > * {
  position: relative;
  z-index: 1;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: 1.08fr 0.95fr;
  overflow: hidden;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)),
    rgba(7, 14, 28, 0.7);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.16);
  position: relative;
}

.auth-side {
  padding: clamp(28px, 4vw, 46px);
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.18), transparent 28%),
    radial-gradient(circle at 100% 78%, rgba(29,209,161,0.16), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 22px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.auth-hero {
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.03;
  margin: 0 0 16px;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.auth-copy {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 58ch;
}

.feature-list {
  display: grid;
  gap: 13px;
  margin-top: 28px;
}

.feature-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11);
  transform: translateZ(0);
  transition: transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
}

.feature-item:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}

.feature-icon,
.icon-bubble {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(0,0,0,0.16);
}

.auth-form-wrap {
  padding: clamp(28px, 4vw, 42px);
  background: rgba(5, 12, 26, 0.48);
  display: flex;
  align-items: center;
}

.auth-form { width: 100%; }

.auth-form h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3vw, 2.05rem);
  letter-spacing: -0.035em;
}

.auth-subtle {
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.55;
}

.auth-grid {
  display: grid;
  gap: 14px;
}

.auth-grid-2 { grid-template-columns: 1fr 1fr; }

input, button, select, textarea {
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid var(--line);
  outline: none;
  font-size: 1rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), filter .2s var(--ease), opacity .2s var(--ease);
}

input, select, textarea {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,243,255,0.94));
  color: #172033;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 20px rgba(0,0,0,0.08);
}

textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder { color: rgba(23,32,51,0.58); }

input:focus, select:focus, textarea:focus {
  border-color: rgba(140, 124, 255, 0.9);
  box-shadow:
    0 0 0 4px rgba(140, 124, 255, 0.18),
    0 16px 28px rgba(0,0,0,0.13);
  transform: translateY(-1px);
}

button,
.button-link {
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  color: #fff;
  background:
    linear-gradient(135deg, #ff7675, #fd79a8);
  font-weight: 750;
  letter-spacing: .005em;
  box-shadow: 0 13px 28px rgba(255,118,117,0.19);
  will-change: transform;
}

button:hover,
.button-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(1.05);
  text-decoration: none;
}

button:active,
.button-link:active { transform: translateY(0) scale(.985); }

button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(.2);
}

.secondary-btn { background: linear-gradient(135deg, var(--secondary), #a29bfe); box-shadow: 0 13px 28px rgba(140,124,255,.22); }
.info-btn { background: linear-gradient(135deg, var(--info), #48dbfb); box-shadow: 0 13px 28px rgba(84,160,255,.2); }
.success-btn { background: linear-gradient(135deg, var(--success), #55efc4); box-shadow: 0 13px 28px rgba(29,209,161,.18); color: #07231d; }
.danger-btn { background: linear-gradient(135deg, var(--danger), #ff7675); box-shadow: 0 13px 28px rgba(255,91,122,.22); }
.dark-btn { background: linear-gradient(135deg, #3b4252, #222a3a); box-shadow: 0 13px 28px rgba(0,0,0,.18); }
.warning-btn { background: linear-gradient(135deg, var(--warning), #ffeaa7); color: #1d2330; box-shadow: 0 13px 28px rgba(255,209,102,.18); }
.link-btn { background: rgba(255,255,255,0.075); border: 1px solid var(--line); box-shadow: none; }

.ui-ripple {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,0.42);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .65s var(--ease) forwards;
}

.subtle, .muted { color: var(--muted); }
.center { text-align: center; }

.header-row,
.top-actions,
.upload-card,
.modal-actions,
.profile-grid,
.section-header,
.portal-header,
.portal-actions,
.auth-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.compact { flex-wrap: wrap; }

.portal-header {
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 8px 4px 0;
}

.portal-title,
.header-row h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.055em;
}

.portal-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
}

.portal-actions button,
.top-actions button,
.modal-actions button,
.inline-actions button,
.btn-group button {
  min-height: 42px;
}

.portal-nav,
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 22px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.nav-pill,
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--muted);
  padding: 11px 15px;
  border-radius: 16px;
}

.nav-pill:hover,
.tab-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateY(-1px);
}

.nav-pill.active,
.tab-btn.active {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(140,124,255,0.96), rgba(84,160,255,0.86));
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 14px 28px rgba(84,160,255,0.17);
}

.panel,
.tab-panel { display: none; }

.panel.active,
.tab-panel.active {
  display: block;
  animation: panelEnter .38s var(--ease) both;
}

.upload-card,
.info-card,
.shared-card,
.stat-card,
.portal-card,
.split-card,
.empty-state,
.auth-note,
.recommendation-category-card,
.recommendation-card,
.summary-item,
.timeline-item,
.task-card,
.appointment-card,
.report-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.055));
  border: 1px solid rgba(255,255,255,0.115);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.upload-card,
.info-card,
.shared-card,
.stat-card,
.portal-card,
.split-card,
.empty-state,
.auth-note,
.recommendation-category-card,
.recommendation-card {
  padding: 18px;
}

.portal-card,
.shared-card,
.stat-card,
.summary-item,
.task-card,
.appointment-card,
.report-card,
.recommendation-card,
.recommendation-category-card,
.feature-item,
li.file-row {
  transform: translateZ(0);
  transition: transform .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}

.portal-card:hover,
.shared-card:hover,
.stat-card:hover,
.summary-item:hover,
.task-card:hover,
.appointment-card:hover,
.report-card:hover,
.recommendation-card:hover,
.recommendation-category-card:hover,
li.file-row:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.2);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.145), rgba(255,255,255,0.07));
  box-shadow: var(--shadow-md);
}

.portal-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
}

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.stats-grid,
.shared-grid,
.cards-grid,
.report-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-card {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -70px auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(84,160,255,0.16);
  pointer-events: none;
}

.stat-value {
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.stat-label {
  margin-top: 5px;
  color: var(--muted);
}

.split-card {
  display: grid;
  gap: 16px;
}

.profile-grid { flex-wrap: wrap; }

.profile-title {
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.summary-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.summary-item,
.timeline-item,
.task-card,
.appointment-card,
.report-card {
  list-style: none;
  padding: 14px 16px;
}

.task-card,
.appointment-card,
.report-card,
.recommendation-card {
  display: grid;
  gap: 12px;
}

.card-head,
.task-head,
.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.9rem;
  font-weight: 650;
  color: rgba(255,255,255,0.92);
}

.role-admin,
.status-reviewed,
.status-freigegeben { background: rgba(255,91,122,0.22); border-color: rgba(255,91,122,0.22); }
.role-trainer,
.status-active,
.status-open,
.status-entwurf { background: rgba(29,209,161,0.2); border-color: rgba(29,209,161,0.2); }
.role-azubi,
.status-in_progress,
.status-eingereicht,
.status-submitted { background: rgba(84,160,255,0.22); border-color: rgba(84,160,255,0.22); }
.role-viewer,
.status-pending { background: rgba(140,124,255,0.22); border-color: rgba(140,124,255,0.22); }
.status-blocked,
.status-returned,
.status-zur_überarbeitung { background: rgba(255,91,122,0.22); border-color: rgba(255,91,122,0.22); }
.status-done,
.status-approved { background: rgba(29,209,161,0.22); border-color: rgba(29,209,161,0.22); }
.status-overdue { background: rgba(255,209,102,0.25); border-color: rgba(255,209,102,0.25); color: #fff; }

.role-color,
.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 18px currentColor;
}

.color-dot {
  width: 18px;
  height: 18px;
}

.shared-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.shared-file-row,
.meta-row,
.inline-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.meta-row { flex-wrap: wrap; }

.inline-actions,
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.message-box,
.small-msg,
.error-msg,
.success-msg {
  min-height: 22px;
  margin-top: 10px;
}

.error-msg { color: #ffb4c2; }
.success-msg { color: #b8ffd8; }
.small-msg,
.message-box { color: #ffeaa7; }

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1dd1a1, #54a0ff, #8c7cff);
  background-size: 180% 100%;
  animation: progressGlow 3.8s linear infinite;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border-radius: var(--radius-md);
}

.admin-table {
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
}

.admin-table th,
.admin-table td {
  padding: 13px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.admin-table th {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font-size: .92rem;
  letter-spacing: .02em;
}

.admin-table tbody tr {
  transition: background .18s var(--ease);
}

.admin-table tbody tr:hover {
  background: rgba(255,255,255,0.06);
}

.inline-input,
.inline-select,
.inline-color { margin: 0; }

.inline-color {
  width: 54px;
  min-width: 54px;
  padding: 4px;
  background: rgba(255,255,255,0.11);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li.file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
}

.admin-grid {
  display: grid;
  gap: 11px;
  margin-bottom: 16px;
}

.admin-grid-5 { grid-template-columns: repeat(5, 1fr); }
.admin-grid-4 { grid-template-columns: repeat(4, 1fr); }
.admin-grid-3 { grid-template-columns: repeat(3, 1fr); }
.admin-grid-2 { grid-template-columns: repeat(2, 1fr); }

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.permission-item {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.085);
  padding: 10px 12px;
  border-radius: 14px;
  transition: background .18s var(--ease), transform .18s var(--ease);
}

.permission-item:hover {
  background: rgba(255,255,255,0.11);
  transform: translateY(-1px);
}

.permission-item input,
.checkbox-row input {
  width: auto;
  box-shadow: none;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-note {
  margin-top: 18px;
  color: var(--muted);
}

.input-with-action { position: relative; }

.input-with-action input { padding-right: 110px; }

.input-with-action button {
  position: absolute;
  right: 8px;
  top: 7px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 0.88rem;
  background: rgba(29,35,48,0.9);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
  animation: fadeIn .22s var(--ease) both;
}

.modal.hidden { display: none; }

.modal-content {
  width: 100%;
  max-width: 480px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055)),
    #13213e;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  animation: modalPop .28s var(--ease) both;
}

.modal-content input + input,
.modal-content input + .modal-actions,
.modal-content .modal-actions {
  margin-top: 12px;
}

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

a:hover {
  opacity: .86;
  text-decoration: none;
}

.recommendation-category-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--secondary), var(--info));
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.ui-reveal {
  opacity: 0;
  transform: translateY(12px) scale(.992);
}

.ui-reveal.is-visible {
  animation: revealUp .55s var(--ease) forwards;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes panelEnter {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

@keyframes floatBlob {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(34px,26px,0) scale(1.08); }
}

@keyframes progressGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 180% 50%; }
}

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

@media (max-width: 1080px) {
  .auth-card { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: repeat(1, 1fr); }
  .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: span 1; }
}

@media (max-width: 920px) {
  .admin-grid-5,
  .admin-grid-4,
  .admin-grid-3,
  .admin-grid-2,
  .auth-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { background-attachment: scroll; }
  .container {
    margin: 14px;
    padding: 18px;
    border-radius: 24px;
  }
  .auth-shell { padding: 14px; }
  .auth-card { border-radius: 24px; }
  .portal-header,
  .header-row,
  .upload-card,
  .profile-grid,
  .section-header,
  .top-actions,
  .modal-actions,
  .shared-head,
  .shared-file-row,
  .card-head,
  .task-head,
  .report-head,
  li.file-row,
  .auth-footer,
  .meta-row,
  .inline-row {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-actions,
  .top-actions,
  .inline-actions,
  .btn-group { width: 100%; }
  .portal-actions button,
  .top-actions button,
  .inline-actions button,
  .btn-group button,
  .button-link { width: 100%; }
  .auth-side,
  .auth-form-wrap { padding: 25px; }
  .portal-nav,
  .admin-tabs { border-radius: 18px; }
  .nav-pill,
  .tab-btn { flex: 1 1 auto; }
}

/* Benachrichtigungs-Glocke und abhakbare Hinweise */
.notification-widget {
  position: relative;
  display: inline-flex;
  z-index: 60;
}

.notification-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,209,102,0.98), rgba(255,91,122,0.88));
  color: #13213e;
  box-shadow: 0 16px 36px rgba(255,91,122,0.18);
  overflow: visible;
}

.notification-bell-btn:hover {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.04);
}

.notification-bell-btn.has-unread .bell-icon {
  transform-origin: 50% 0;
  animation: bellWiggle 1.45s var(--ease) infinite;
}

.bell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.notification-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 23px;
  height: 23px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ff2f68;
  color: #fff;
  border: 2px solid rgba(19,33,62,0.96);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(255,47,104,0.32);
}

.notification-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  max-height: 70vh;
  overflow: auto;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)),
    rgba(10, 18, 36, 0.96);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--shadow-lg);
  animation: notificationPop .24s var(--ease) both;
}

.notification-popover[hidden] {
  display: none;
}

.notification-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.11);
}

.notification-list {
  display: grid;
  gap: 12px;
}

.compact-list .notification-item {
  padding: 12px;
}

.notification-item {
  position: relative;
}

.notification-item.is-read {
  opacity: 0.68;
}

.notification-item.is-read .notification-content {
  filter: saturate(0.75);
}

.notification-item-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
}

.notification-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.notification-check:hover {
  transform: scale(1.06);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
}

.notification-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.notification-checkmark {
  width: 19px;
  height: 19px;
  border-radius: 7px;
  border: 2px solid rgba(255,255,255,0.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .18s var(--ease);
}

.notification-check input:checked + .notification-checkmark {
  background: linear-gradient(135deg, var(--success), var(--info));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(29,209,161,0.25);
}

.notification-check input:checked + .notification-checkmark::after {
  content: "✓";
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  transform: translateY(-1px);
}

.notification-content {
  min-width: 0;
}

.notification-title-row {
  align-items: flex-start;
  margin-bottom: 6px;
}

.notification-home-card {
  border-color: rgba(255,209,102,0.2);
  box-shadow: 0 18px 45px rgba(255,209,102,0.08), var(--shadow-sm);
}

.mini-empty {
  padding: 14px;
  text-align: center;
}

@keyframes bellWiggle {
  0%, 72%, 100% { transform: rotate(0deg); }
  78% { transform: rotate(13deg); }
  84% { transform: rotate(-10deg); }
  90% { transform: rotate(7deg); }
  96% { transform: rotate(-4deg); }
}

@keyframes notificationPop {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .notification-widget,
  .notification-bell-btn {
    width: 100%;
  }

  .notification-bell-btn {
    justify-content: center;
  }

  .notification-popover {
    position: fixed;
    top: 86px;
    left: 14px;
    right: 14px;
    width: auto;
  }
}

/* Stabilere Benachrichtigungen: nur Glocke, feste Lesbarkeit, kein transparenter Startseiten-Kasten */
.notification-home-card {
  display: none !important;
}

.notification-widget {
  z-index: 9999;
}

.notification-popover {
  background: #101a33 !important;
  background-image: linear-gradient(145deg, #152241, #0c1428) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.48) !important;
  color: #fff !important;
}

.notification-popover .subtle,
.notification-popover .muted {
  color: rgba(255,255,255,0.78) !important;
}

.notification-popover .empty-state,
.notification-popover .notification-item,
.notification-popover .summary-item {
  background: #172442 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important;
}

.notification-popover .notification-item.is-unread {
  background: #1d315b !important;
  border-color: rgba(255,209,102,0.34) !important;
}

.notification-popover .notification-item.is-read {
  background: #121e38 !important;
  opacity: 0.72;
}

.notification-popover-head .link-btn {
  background: #263a68 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
}

/* Header-Icons, Profil und stabile Benachrichtigungen */
.icon-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.header-widget,
.notification-widget,
.profile-widget,
.settings-widget {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  z-index: 10000 !important;
}

.icon-action-btn,
.notification-bell-btn,
.admin-icon-btn,
.profile-btn,
.settings-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 1.22rem !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: #172442 !important;
  background-image: linear-gradient(145deg, #20345f, #111c35) !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(0,0,0,0.26) !important;
  overflow: visible !important;
}

.notification-bell-btn {
  background-image: linear-gradient(145deg, #ffd166, #ff4f73) !important;
  color: #111a2e !important;
}

.admin-icon-btn { background-image: linear-gradient(145deg, #7c5cff, #263a68) !important; }
.profile-btn { background-image: linear-gradient(145deg, #28d7a3, #116149) !important; }
.settings-btn { background-image: linear-gradient(145deg, #4f6cff, #263a68) !important; }

.icon-action-btn:hover,
.notification-bell-btn:hover,
.admin-icon-btn:hover,
.profile-btn:hover,
.settings-btn:hover {
  transform: translateY(-2px) scale(1.04) !important;
  filter: brightness(1.06) !important;
}

.notification-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  min-width: 23px !important;
  height: 23px !important;
  padding: 0 7px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #ff174f !important;
  color: #fff !important;
  border: 2px solid #0c1428 !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 20px rgba(255,23,79,0.45) !important;
}

.header-popover,
.notification-popover,
.profile-popover,
.settings-popover {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: min(410px, calc(100vw - 28px)) !important;
  max-height: 72vh !important;
  overflow: auto !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background: #0d1529 !important;
  background-image: linear-gradient(145deg, #172442 0%, #0d1529 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  z-index: 10001 !important;
  animation: notificationPop .2s var(--ease) both;
}

.header-popover[hidden],
.notification-popover[hidden],
.profile-popover[hidden],
.settings-popover[hidden] {
  display: none !important;
}

.settings-popover {
  width: 240px !important;
  display: grid;
  gap: 8px;
}

.profile-popover {
  width: min(340px, calc(100vw - 28px)) !important;
}

.notification-popover-head,
.profile-popover-head {
  display: grid !important;
  gap: 4px !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}

.notification-popover-head {
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
}

.notification-popover .notification-item,
.notification-popover .summary-item,
.notification-popover .empty-state {
  background: #16233f !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.notification-popover .notification-item.is-unread {
  background: #203761 !important;
  border-color: rgba(255,23,79,0.44) !important;
}

.notification-popover .notification-item.is-read {
  background: #121d35 !important;
  opacity: 1 !important;
}

.notification-popover .notification-item.is-read .notification-content {
  opacity: .66 !important;
  filter: none !important;
}

.notification-check input:disabled + .notification-checkmark {
  opacity: .55;
  cursor: wait;
}

.settings-menu-item {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 13px !important;
  border-radius: 14px !important;
  background: #1a2a4d !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  text-align: left;
}

.settings-menu-item:hover { background: #263a68 !important; }
.danger-menu-item { background: #5b1d2b !important; }
.danger-menu-item:hover { background: #7a2337 !important; }

.profile-card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: #182743;
  border: 1px solid rgba(255,255,255,0.12);
}

.profile-avatar-large {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #28d7a3, #116149);
  box-shadow: 0 12px 28px rgba(40,215,163,0.16);
}

.profile-data-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.profile-data-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #121f39;
  border: 1px solid rgba(255,255,255,0.1);
}

.profile-data-row span { color: rgba(255,255,255,0.72); }
.profile-data-row strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-align: right;
}

#userInfoBox[hidden] { display: none !important; }

@media (max-width: 760px) {
  .portal-header {
    gap: 14px;
  }
  .icon-toolbar {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .notification-widget,
  .profile-widget,
  .settings-widget {
    width: auto !important;
  }
  .notification-bell-btn,
  .icon-action-btn {
    width: 46px !important;
    min-width: 46px !important;
  }
  .header-popover,
  .notification-popover,
  .profile-popover,
  .settings-popover {
    position: fixed !important;
    top: 82px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
  }
}


/* =========================================================
   ScheduleAI Big Fix: deckende Oberflächen, stabile Header-Menüs
   ========================================================= */
:root {
  --solid-page: #071022;
  --solid-shell: #0b1428;
  --solid-card: #111d36;
  --solid-card-2: #16243f;
  --solid-popup: #081226;
  --solid-input: #f7f9ff;
  --solid-border: #324568;
}
body { background: linear-gradient(135deg, #071022 0%, #0d1d3a 48%, #172a52 100%) !important; }
.container, .auth-card, .auth-form-wrap, .info-card, .portal-card, .stat-card, .shared-card, .split-card, .empty-state, .auth-note, .summary-item, .timeline-item, .task-card, .appointment-card, .report-card, .recommendation-card, .recommendation-category-card, .table-wrap, .admin-table, .modal-content, .upload-card, .file-row, .admin-tabs, .feature-item {
  background: var(--solid-card) !important; border-color: var(--solid-border) !important; box-shadow: 0 18px 45px rgba(0,0,0,.28) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.container, .auth-card { background: var(--solid-shell) !important; }
.portal-header, .header-row, .portal-nav, .admin-tabs { background: var(--solid-shell) !important; border: 1px solid var(--solid-border) !important; border-radius: 22px !important; padding: 14px !important; }
input, select, textarea { background: var(--solid-input) !important; color: #111827 !important; border: 1px solid #c8d2e5 !important; }
input[type="color"] { background: transparent !important; border: 1px solid var(--solid-border) !important; }
.badge, .nav-pill, .tab-btn, .link-btn { background: var(--solid-card-2) !important; border: 1px solid var(--solid-border) !important; color: #fff !important; }
.nav-pill.active, .tab-btn.active { background: linear-gradient(135deg, #5168ff, #7b3ff3) !important; border-color: rgba(255,255,255,.35) !important; }
.header-widget { position: relative !important; z-index: 3000 !important; }
.icon-action-btn, .notification-bell-btn, .profile-btn, .settings-btn, .admin-icon-btn { width: 46px !important; height: 46px !important; min-width: 46px !important; display: inline-grid !important; place-items: center !important; border-radius: 16px !important; background: #182849 !important; border: 1px solid var(--solid-border) !important; box-shadow: 0 14px 32px rgba(0,0,0,.24) !important; color: #fff !important; line-height: 1 !important; }
.admin-icon-btn { background: linear-gradient(145deg, #e85d75, #8c2d48) !important; }
.notification-bell-btn { background: linear-gradient(145deg, #ffd166, #c77800) !important; }
.profile-btn { background: linear-gradient(145deg, #55efc4, #087f6f) !important; }
.settings-btn { background: linear-gradient(145deg, #5d7cff, #263a68) !important; }
.notification-badge { position: absolute !important; top: -8px !important; right: -8px !important; min-width: 23px !important; height: 23px !important; padding: 0 7px !important; border-radius: 999px !important; background: #ff1f3d !important; color: #fff !important; border: 2px solid #071022 !important; display: inline-flex; align-items: center !important; justify-content: center !important; font-size: .76rem !important; font-weight: 900 !important; box-shadow: 0 0 0 4px rgba(255,31,61,.18), 0 10px 20px rgba(0,0,0,.25) !important; }
.header-popover, .notification-popover, .profile-popover, .settings-popover { position: absolute !important; top: calc(100% + 12px) !important; right: 0 !important; background: var(--solid-popup) !important; color: #fff !important; border: 1px solid #42577f !important; border-radius: 22px !important; box-shadow: 0 26px 80px rgba(0,0,0,.62) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 9999 !important; opacity: 1 !important; }
.notification-popover, .profile-popover { width: min(420px, calc(100vw - 28px)) !important; max-height: 70vh !important; overflow: auto !important; }
.settings-popover { min-width: 230px !important; padding: 10px !important; }
.header-popover[hidden], .notification-popover[hidden], .profile-popover[hidden], .settings-popover[hidden] { display: none !important; }
.notification-popover-head, .profile-popover-head { background: #101d36 !important; border-bottom: 1px solid var(--solid-border) !important; border-radius: 20px 20px 0 0 !important; }
.notification-popover .notification-item, .notification-popover .summary-item, .notification-popover .empty-state, .profile-popover .profile-data-row, .profile-card-mini { background: #111d36 !important; border: 1px solid var(--solid-border) !important; }
.notification-popover .notification-item.is-unread { background: #18284a !important; border-color: #ff3151 !important; }
.notification-popover .notification-item.is-read { background: #0f1a31 !important; opacity: 1 !important; }
.notification-popover .notification-item.is-read .notification-content { opacity: .72 !important; }
.notification-check input:disabled + .notification-checkmark { opacity: .7 !important; cursor: wait !important; }
.settings-menu-item { width: 100% !important; display: flex !important; align-items: center !important; gap: 10px !important; background: #142442 !important; color: #fff !important; border: 1px solid var(--solid-border) !important; border-radius: 14px !important; margin: 6px 0 !important; text-align: left !important; }
.settings-menu-item:hover { background: #203963 !important; }
.danger-menu-item { background: #492033 !important; }
.modal { z-index: 20000 !important; background: rgba(2, 6, 16, .82) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.modal-content { background: #0b1428 !important; border: 1px solid #42577f !important; color: #fff !important; z-index: 20001 !important; }
.recommendation-admin-editor { background: linear-gradient(145deg, #101d36, #13294d) !important; border: 1px solid #4f68a0 !important; }
.file-picker-label { display: grid; gap: 8px; color: #fff; font-weight: 700; background: #16243f !important; border: 1px dashed #6f86bd !important; border-radius: 16px !important; padding: 14px !important; }
.file-picker-label input[type="file"] { background: #f7f9ff !important; color: #111827 !important; }
.recommendation-active-toggle { align-self: stretch; justify-content: flex-start; background: #16243f !important; border: 1px solid var(--solid-border) !important; border-radius: 16px !important; padding: 14px !important; }
.button-link, .mini-button-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 12px !important; padding: 10px 13px !important; background: linear-gradient(135deg, #5168ff, #7b3ff3) !important; color: #fff !important; text-decoration: none !important; font-weight: 800 !important; border: 1px solid rgba(255,255,255,.18) !important; }
.secondary-link { background: linear-gradient(135deg, #00b894, #087f6f) !important; }
@media (max-width: 720px) { .portal-header, .header-row { align-items: stretch !important; } .icon-toolbar { justify-content: flex-start !important; } .notification-popover, .profile-popover, .settings-popover { right: auto !important; left: 0 !important; } }


/* Fix: Header-Popups dürfen nicht hinter Übersicht/Aufgaben-Reitern verschwinden */
.container { overflow: visible !important; }
.portal-header { position: relative !important; z-index: 60000 !important; overflow: visible !important; isolation: isolate !important; }
.portal-actions.icon-toolbar, .icon-toolbar { position: relative !important; z-index: 60010 !important; overflow: visible !important; }
.header-widget, .notification-widget, .profile-widget, .settings-widget { position: relative !important; z-index: 60020 !important; overflow: visible !important; }
.header-popover, .notification-popover, .profile-popover, .settings-popover { z-index: 70000 !important; pointer-events: auto !important; }
.portal-nav, .admin-tabs { position: relative !important; z-index: 1 !important; }
.panel, .tab-panel { position: relative !important; z-index: 0 !important; }
.recommendation-admin-editor.always-visible-form { display: block !important; }
.recommendation-admin-editor input, .recommendation-admin-editor select, .recommendation-admin-editor textarea { min-height: 48px; }
.recommendation-admin-editor .success-btn, #portalCreateRecommendationBtn { min-height: 48px; font-weight: 900; }

/* Stabiler Benachrichtigungs-Toggle ohne springenden Checkbox-Haken */
.notification-item-main {
  align-items: flex-start !important;
}
.notification-status-dot {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
  margin-top: 7px !important;
  border-radius: 999px !important;
  background: #ff3151 !important;
  box-shadow: 0 0 0 4px rgba(255,49,81,.16), 0 0 18px rgba(255,49,81,.35) !important;
}
.notification-item.is-read .notification-status-dot {
  background: #6b7894 !important;
  box-shadow: none !important;
}
.notification-actions {
  margin-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
.notification-toggle-btn {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: .84rem !important;
  background: #25406f !important;
  border: 1px solid #4d6590 !important;
}
.notification-toggle-btn:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}
.notification-item.is-pending {
  outline: 2px solid rgba(255,209,102,.45) !important;
}


/* Fix: Benachrichtigungen wieder mit sichtbarem Haken, alle-gelesen nur unten */
.notification-popover-head .link-btn,
#markNotificationsReadTopBtn {
  display: none !important;
}
.notification-popover-foot {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 12px 14px 14px !important;
  background: #101d36 !important;
  border-top: 1px solid var(--solid-border) !important;
  border-radius: 0 0 20px 20px !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
}
#markNotificationsReadBtn {
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #5168ff, #7b3ff3) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.notification-check {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  margin-top: 2px !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  position: relative !important;
}
.notification-check input {
  position: absolute !important;
  opacity: 0 !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  cursor: pointer !important;
}
.notification-checkmark {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: #0b1428 !important;
  border: 2px solid #ff3151 !important;
  box-shadow: 0 0 0 4px rgba(255,49,81,.13) !important;
}
.notification-check input:checked + .notification-checkmark {
  background: linear-gradient(135deg, #00b894, #0a806f) !important;
  border-color: #55efc4 !important;
  box-shadow: 0 0 0 4px rgba(0,184,148,.16) !important;
}
.notification-check input:checked + .notification-checkmark::after {
  content: "✓" !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}
.notification-check input:focus-visible + .notification-checkmark {
  outline: 3px solid rgba(255,255,255,.45) !important;
  outline-offset: 2px !important;
}
.notification-check input:disabled + .notification-checkmark {
  opacity: .65 !important;
  cursor: wait !important;
}
.notification-toggle-btn,
.notification-actions {
  display: none !important;
}
.notification-status-dot {
  display: none !important;
}
.notification-item.is-read .notification-content {
  opacity: .78 !important;
}
.notification-item.is-unread .notification-content {
  opacity: 1 !important;
}
\n
/* Finaler Fix: Benachrichtigungs-Haken zuverlässig klickbar */
.notification-check {
  position: relative !important;
  user-select: none !important;
}

.notification-check input[data-notification-checkbox] {
  pointer-events: auto !important;
  z-index: 2 !important;
}

.notification-checkmark {
  pointer-events: none !important;
  z-index: 1 !important;
}

/* === ScheduleAI Task Overview Refresh === */
.task-layout-modern .portal-card { overflow: hidden; }
.task-create-modern {
  position: sticky;
  top: 16px;
  align-self: start;
}
.compact-head { margin-bottom: 10px; }
.sai-field-label {
  display: block;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.task-create-actions { margin-top: 12px; }
.task-board {
  display: grid;
  gap: 14px;
}
.task-empty-modern {
  display: grid;
  gap: 6px;
}
.task-empty-modern strong { font-size: 1.05rem; }
.task-empty-modern span { color: var(--muted); }
.task-modern-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}
.task-modern-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadow-md);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.07));
}
.task-modern-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--accent);
}
.task-modern-top,
.task-title-wrap,
.task-modern-badges,
.task-modern-meta,
.task-action-buttons,
.task-recipient-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.task-modern-top {
  justify-content: space-between;
  padding-left: 4px;
}
.task-title-wrap { min-width: 0; }
.task-title-wrap .card-title { font-size: 1.12rem; }
.task-title-wrap p { margin-top: 4px; }
.task-priority-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,255,255,.07);
  flex: 0 0 auto;
}
.task-modern-badges {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.task-priority-pill,
.task-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
}
.task-modern-description {
  margin: 0;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
}
.task-modern-meta {
  flex-wrap: wrap;
}
.task-modern-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
}
.task-progress-track {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
}
.task-progress-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(116,185,255,.95), rgba(85,239,196,.9));
}
.task-action-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.task-action-buttons {
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  height: 100%;
}
.task-feedback-box {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(85,239,196,.1);
  border: 1px solid rgba(85,239,196,.22);
}
.task-review-details {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}
.task-review-details summary {
  cursor: pointer;
  font-weight: 850;
}
.task-recipient-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.task-recipient-row {
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.13);
  border: 1px solid rgba(255,255,255,.075);
}
.task-recipient-row div {
  display: grid;
  gap: 2px;
}
.task-recipient-row small { color: var(--muted); }
.task-review-controls { margin-top: 12px; }
.task-priority-niedrig::before,
.task-priority-pill-niedrig,
.task-card.task-priority-niedrig { border-color: rgba(85,239,196,.38); }
.task-priority-niedrig::before,
.task-priority-niedrig .task-priority-dot { background: #55efc4; }
.task-priority-normal::before,
.task-priority-normal .task-priority-dot { background: #fdcb6e; }
.task-priority-hoch::before,
.task-priority-hoch .task-priority-dot { background: #ff9f43; }
.task-priority-dringend::before,
.task-priority-dringend .task-priority-dot { background: #ff4d4f; }
.task-priority-pill-niedrig { background: rgba(85,239,196,.12); border-color: rgba(85,239,196,.35); }
.task-priority-pill-normal { background: rgba(253,203,110,.12); border-color: rgba(253,203,110,.35); }
.task-priority-pill-hoch { background: rgba(255,159,67,.12); border-color: rgba(255,159,67,.35); }
.task-priority-pill-dringend { background: rgba(255,77,79,.14); border-color: rgba(255,77,79,.4); }
.task-status-open { background: rgba(255,255,255,.08); }
.task-status-in_progress { background: rgba(116,185,255,.12); border-color: rgba(116,185,255,.35); }
.task-status-submitted { background: rgba(253,203,110,.12); border-color: rgba(253,203,110,.35); }
.task-status-done,
.task-status-reviewed,
.task-status-approved { background: rgba(85,239,196,.12); border-color: rgba(85,239,196,.35); }
.task-status-returned { background: rgba(255,118,117,.13); border-color: rgba(255,118,117,.35); }
@media (max-width: 900px) {
  .task-create-modern { position: static; }
  .task-layout-modern .span-5,
  .task-layout-modern .span-7 { grid-column: span 12; }
  .task-modern-top { flex-direction: column; }
  .task-modern-badges { justify-content: flex-start; }
  .task-action-buttons { justify-content: flex-start; }
}

/* === ScheduleAI task assignment + priority polish === */
.task-create-modern,
.task-overview-modern,
.task-layout-modern .portal-card {
  overflow: visible;
}
.task-create-modern select,
.sai-task-creator-v2 select,
#taskPriority {
  min-height: 48px;
  line-height: 1.25;
  padding-top: 10px;
  padding-bottom: 10px;
}
.task-modern-badges {
  min-width: min(260px, 100%);
}
.task-priority-pill,
.task-status-pill {
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.2;
}
@media (max-width: 720px) {
  .task-modern-badges { width: 100%; justify-content: flex-start; }
  .task-priority-pill, .task-status-pill { white-space: normal; justify-content: flex-start; }
}

/* Admin-Dashboard darf bei Nicht-Admins niemals durch globale Icon-Styles sichtbar werden. */
#adminBtn[hidden],
#adminBtn.admin-hidden {
  display: none !important;
}

/* Feinschliff: Upload-Ziel über @Suche statt Nutzer-Dropdown */
.upload-target-picker {
  flex: 1 1 420px;
  min-width: min(100%, 320px);
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--solid-border, rgba(255,255,255,.16));
  background: rgba(14, 25, 47, .82);
}
.upload-target-picker .sai-picker-head span,
.sai-plan-target-picker .sai-picker-head span {
  display: block;
  margin-top: 2px;
  font-size: .84rem;
  opacity: .78;
}
.upload-target-picker .sai-search-row,
.sai-plan-target-picker .sai-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.upload-target-picker .sai-search-row input,
.sai-plan-target-picker .sai-search-row input {
  min-width: 0;
  flex: 1 1 auto;
}
.upload-target-picker .sai-chip-row,
.sai-plan-target-picker .sai-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sai-selected-target {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.sai-search-results {
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
}
.sai-plan-self-only .sai-selected-target {
  background: rgba(85,239,196,.12);
  border-color: rgba(85,239,196,.32);
}

/* Aufgaben-Feedback ohne freie Nutzerauswahl */
.task-review-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.task-review-target {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
}
.task-review-target-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.task-review-target-head small,
.task-review-comment {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
.task-review-controls-fixed {
  align-items: end;
  margin-bottom: 10px;
}
.readonly-recipients {
  opacity: .9;
}
@media (max-width: 720px) {
  .task-review-target-head { flex-direction: column; }
  .task-review-controls-fixed { grid-template-columns: 1fr !important; }
}


/* ScheduleAI Fix: Aufgabenstatus sauber ausrichten + Dateien an Aufgaben */
.task-modern-card,
.task-action-panel {
  overflow: visible;
}
.task-action-panel > .admin-grid.admin-grid-2 {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) max-content;
  align-items: end;
  gap: 12px;
}
.task-action-panel select[data-task-status] {
  width: 100%;
  min-width: 0;
}
.task-action-buttons {
  min-width: max-content;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}
.task-action-buttons button {
  white-space: nowrap;
}
.task-linked-file-picker {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.task-linked-file-picker select {
  width: 100%;
}
.task-linked-files {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(116,185,255,.10);
  border: 1px solid rgba(116,185,255,.20);
}
.task-linked-files > strong {
  color: rgba(245,250,255,.96);
  font-size: .9rem;
}
.task-linked-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.task-linked-file-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(235,245,255,.90);
  font-weight: 750;
}
.task-linked-file-row div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mini-task-file-btn {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
}
@media (max-width: 760px) {
  .task-action-panel > .admin-grid.admin-grid-2,
  .task-linked-file-row {
    grid-template-columns: 1fr;
  }
  .task-action-buttons,
  .task-linked-file-row div {
    justify-content: flex-start;
    min-width: 0;
  }
}