:root {
  --pg-blue: #010d6e;
  --pg-cyan: #00b2fe;
  --pg-magenta: #d4004b;
  --pg-offwhite: #f6f3ee;

  --bg: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --card: rgba(246, 243, 238, 0.9);
  --border: rgba(1, 13, 110, 0.18);
  --shadow: 0 10px 25px rgba(1, 13, 110, 0.15);
  --site-max-width: 1900px;
}

* {
  box-sizing: border-box;
}

body.app-body {
  margin: 0.3rem;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-root {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 2px 32px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  padding: 0 5px 5px;
  flex: 1 0 auto;
}

.app-footer {
  margin-top: auto;
  padding: 0 14px 24px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.app-footer-link {
  color: inherit;
  text-decoration: none;
}

.app-footer-link:hover {
  color: var(--pg-blue);
  text-decoration: underline;
}

.top-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0.75rem auto 1rem;
  padding: 0.75rem 1rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 25px rgba(1, 13, 110, 0.18);
  backdrop-filter: blur(12px);
}

.top-nav-brand {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.75rem;
  text-decoration: none;
}

.top-nav-brand > div {
  min-width: 0;
}

.top-nav-logo {
  height: 2.85rem;
  width: auto;
}

.top-nav-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--pg-blue);
}

.top-nav-subtitle {
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--text-muted);
}

.top-nav-subtitle-line {
  display: block;
}

.top-nav-links {
  display: none;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.top-nav-link {
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  color: var(--pg-blue);
  text-decoration: none;
  border: 1px solid transparent;
}

.top-nav-link:hover {
  border-color: rgba(0, 178, 254, 0.4);
}

.top-nav-link--active {
  background: var(--pg-cyan);
  color: #ffffff;
  font-weight: 600;
}

.top-nav-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.user-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: rgba(0, 178, 254, 0.15);
  color: var(--pg-blue);
  font-size: 0.85rem;
  font-weight: 600;
}


.theme-toggle {
  min-width: 7.2rem;
}

body.dark .top-nav-toggle {
  background: rgba(15, 23, 42, 0.9);
  border-color: var(--pg-offwhite);
}

body.dark .top-nav-toggle-bar {
  background: var(--pg-offwhite);
}

/* Permanent hamburger/offcanvas navigation */
.top-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.35rem;
  width: 2.2rem;
  height: 2.2rem;
  background: #ffffff;
  border: 2px solid var(--pg-cyan);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.top-nav-toggle:hover {
  background-color: rgba(0, 178, 254, 0.1);
  border-color: var(--pg-cyan);
}

.top-nav-toggle-bar {
  width: 1.1rem;
  height: 0.12rem;
  background: var(--pg-cyan);
  border-radius: 999px;
  transition: all 0.3s linear;
  position: relative;
}

/* Permanent offcanvas navigation overlay */
.top-nav-mobile {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  transition: all 0.3s ease;
}

.top-nav-mobile[aria-hidden="false"] {
  pointer-events: auto;
}

body.menu-open {
  overflow: hidden;
}

.top-nav-mobile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 13, 110, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.top-nav-mobile[aria-hidden="false"] .top-nav-mobile-backdrop {
  opacity: 1;
}

.top-nav-mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  box-shadow: -4px 0 16px rgba(1, 13, 110, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.top-nav-mobile[aria-hidden="false"] .top-nav-mobile-panel {
  transform: translateX(0);
}

.top-nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(1, 13, 110, 0.1);
}

.top-nav-mobile-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pg-blue);
}

.top-nav-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 2px solid var(--pg-blue);
  border-radius: 50%;
  cursor: pointer;
  color: var(--pg-blue);
  transition: background-color 0.2s, border-color 0.2s;
}

.top-nav-mobile-close:hover {
  background-color: rgba(0, 178, 254, 0.1);
  border-color: var(--pg-cyan);
}

.top-nav-mobile-section {
  padding: 1.5rem 1.5rem 0;
}

.top-nav-mobile-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.top-nav-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.top-nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.top-nav-mobile-action-pill {
  justify-content: center;
  text-align: center;
  width: 100%;
}

.top-nav-mobile-action-form {
  width: 100%;
}

.top-nav-mobile-action-button {
  width: 100%;
}

.top-nav-mobile-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  color: var(--pg-blue);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  text-align: left;
}

.top-nav-mobile-link--button {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.top-nav-mobile-link:hover {
  border-color: rgba(0, 178, 254, 0.4);
  background: rgba(0, 178, 254, 0.05);
}

.top-nav-mobile-link--active {
  background: var(--pg-cyan);
  color: #ffffff;
  font-weight: 600;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--pg-blue);
}

.page-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.card {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  padding: 1rem 1rem;
  margin-bottom: 1.25rem;
  background: #ffffff;
}

.card-header {
  margin-bottom: 0.75rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--pg-blue);
}

.card-subtitle {
  font-size: 0.9rem;
  margin: 0;
  color: var(--text-muted);
}

.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--pg-blue);
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

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

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table thead tr {
  background: #e2ecf9;
}

.table th,
.table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.table th {
  font-weight: 600;
  color: var(--pg-blue);
}

.table tbody tr:nth-child(even) {
  background: rgba(246, 243, 238, 0.7);
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pg-blue);
  margin-bottom: 0.25rem;
}

.form-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.form-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--pg-magenta);
  font-size: 0.85rem;
  font-weight: 600;
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--pg-magenta);
  box-shadow: 0 0 0 3px rgba(212, 0, 75, 0.14);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.84rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: rgba(246, 243, 238, 0.95);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--pg-cyan);
  box-shadow: 0 0 0 2px rgba(0, 178, 254, 0.4);
}

.form-select {
  width: 100%;
  height: 46px;
  padding: 0.45rem 2.5rem 0.45rem 0.7rem;
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: var(--text);
  font-size: 0.95rem;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.change-filter-search-field {
  position: relative;
}

.change-filter-search-input {
  padding-right: 2.25rem;
}

.change-filter-search-clear {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #7b8794;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.change-filter-search-clear:hover {
  color: #364152;
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 8px;
  padding-top: 8px;
}

.user-overview {
  margin-top: 1.5rem;
}

.user-edit-card {
  margin: 1.5rem 0;
}

.user-edit-meta {
  margin-bottom: 1rem;
}

.user-edit-actions form {
  margin: 0;
}

.user-search {
  margin-top: 0.5rem;
}

.user-search-input {
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  border-radius: 1rem;
  background: #ffffff;
}

.import-card-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.import-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 300px);
  gap: 1.5rem;
  align-items: start;
}

.file-upload {
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: rgba(246, 243, 238, 0.95);
  cursor: pointer;
  flex-wrap: wrap;
}

.file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.file-upload__name {
  font-size: 0.9rem;
}

.import-requirements {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1rem;
  background: #ffffff;
}

.import-requirements h3 {
  margin-top: 0;
  color: var(--pg-blue);
}

.import-requirements ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.35rem;
}

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.elections-table td.changed {
  background: #fef3c7;
}

/* Draft change highlighting in dashboard */
.row-has-draft-change {
  background: transparent !important;
}

.dashboard-row--changed {
  background: rgba(0, 178, 254, 0.12) !important;
}

.form-select--draft {
  border-color: var(--pg-cyan);
  border-width: 2px;
}

/* Active term highlighting in Laufbahn */
.term-active {
  /*  background: transparent; */
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--pg-cyan), inset -4px 0 0 var(--pg-cyan), inset 0 4px 0 var(--pg-cyan);
}

.term-active-cell {
  /*background: transparent !important; */
  box-shadow: inset 4px 0 0 var(--pg-cyan), inset -4px 0 0 var(--pg-cyan);
}

.elections-table tbody tr:last-child .term-active-cell {
  box-shadow: inset 4px 0 0 var(--pg-cyan), inset -4px 0 0 var(--pg-cyan), inset 0 -4px 0 var(--pg-cyan);
}

.subject-row--count td {
  background: #e2ecf9;
  color: var(--pg-blue);
  font-weight: 700;
}

.table--laufbahn .subject-row--count td:first-child,
.table--kurswahlen .subject-row--count td:first-child {
  background: #e2ecf9;
  color: var(--pg-blue);
}

/* Change indicators in Laufbahn cells */
.cell-has-change {
  position: relative;
  font-weight: 600;
}

.cell-has-change::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.cell-change--approved::after {
  background: #16a34a;
}

.cell-change--rejected::after {
  background: #dc2626;
}

.cell-change--pending::after {
  background: var(--pg-cyan);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s, color 0.1s, border 0.1s;
}

.btn-primary {
  background: var(--pg-cyan);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 178, 254, 0.35);
}

.btn-primary:hover {
  background: #0195d6;
  box-shadow: 0 6px 16px rgba(0, 178, 254, 0.45);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 178, 254, 0.35);
}

.btn-secondary {
  background: var(--pg-blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(1, 13, 110, 0.3);
}

.btn-danger {
  background: var(--pg-magenta);
  color: #ffffff;
}

.btn-outline {
  background: transparent;
  color: var(--pg-blue);
  border: 1px solid rgba(1, 13, 110, 0.35);
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alert.error {
  background: rgba(212, 0, 75, 0.1);
  color: var(--pg-magenta);
}

.alert.success {
  background: rgba(0, 178, 254, 0.12);
  color: #00335a;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(212, 0, 75, 0.12);
  color: var(--pg-magenta);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Status badge variants */
.badge-status {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-status--draft {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-muted);
}

.badge-status--pending {
  background: rgba(0, 178, 254, 0.12);
  color: var(--pg-cyan);
}

.badge-status--approved {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.badge-status--rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.change-note-row td {
  padding-top: 0;
}

.change-note-controls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.change-note-controls .form-input {
  flex: 1;
}

/* Window status badges */
.badge-window-open {
  background: rgba(0, 178, 254, 0.12);
  color: var(--pg-cyan);
}

.badge-window-closed {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-muted);
}

/* Text utilities */
.text-muted {
  color: var(--text-muted);
}

.code-block {
  background: rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.85rem;
}

a {
  color: var(--pg-cyan);
}

/* Accordion Component */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.accordion-item {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.accordion-item:hover {
  box-shadow: 0 12px 30px rgba(1, 13, 110, 0.2);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  gap: 1rem;
  user-select: none;
  transition: background 0.2s;
  cursor: pointer;
  position: relative;
}

.accordion-header::after {
  content: '▼';
  font-size: 1rem;
  color: var(--pg-cyan);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-header[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.accordion-header:hover {
  background: rgba(0, 178, 254, 0.05);
}

.accordion-header-content {
  flex: 1;
  min-width: 0;
}

.accordion-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--pg-blue);
}

.accordion-description {
  font-size: 0.9rem;
  margin: 0;
  color: var(--text-muted);
}

.accordion-toggle {
  display: none;
}

.accordion-body {
  padding: 0 1.5rem 1.5rem;
}

.accordion-body[hidden] {
  display: none;
}

.accordion-subsection {
  border: 1px solid #e2e8f0;
  border-radius: 1.1rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
}

.accordion-subsection + .accordion-subsection {
  margin-top: 1rem;
}

.accordion-subsection-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--pg-blue);
  list-style: none;
}

.accordion-subsection-summary .section-title {
  margin: 0;
}

.accordion-subsection-summary::marker {
  content: "";
}

.accordion-subsection-summary::after {
  content: "▾";
  font-size: 0.9rem;
  color: var(--pg-blue);
  transition: transform 0.2s ease;
}

.accordion-subsection[open] .accordion-subsection-summary::after {
  transform: rotate(180deg);
}

.accordion-subsection-body {
  padding-top: 1rem;
}

/* Section titles and separators */
.section-title {
  margin-bottom: 1rem;
}

.section-separator {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}

/* ========================================
   Login Page Specific Styles
   ======================================== */

/* Login Page Layout */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* Login Card */
.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid rgba(1, 13, 110, 0.12);
  box-shadow: 0 20px 50px rgba(1, 13, 110, 0.15);
  padding: 2.5rem 2rem;
  backdrop-filter: blur(10px);
}

/* Login Header */
.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  height: 4rem;
  width: auto;
  margin-bottom: 1rem;
}

.login-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pg-blue);
  margin: 0;
}

/* Login Form */
.login-form {
  margin-bottom: 1.5rem;
}

.login-card .form-group {
  margin-bottom: 1.25rem;
}

.login-card .form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pg-blue);
  margin-bottom: 0.5rem;
}

.login-card .form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: all 0.2s ease;
}

.login-card .form-input:focus {
  border-color: var(--pg-cyan);
  box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.15);
  background: #ffffff;
}

/* Password Field with Toggle */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field .form-input {
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s ease;
  outline: none;
}

.password-toggle:hover {
  color: var(--pg-blue);
}

.password-toggle:focus {
  color: var(--pg-cyan);
}

.password-toggle-icon {
  width: 20px;
  height: 20px;
}

.password-toggle .eye-closed {
  display: none;
}

/* Alert Styles in Login Context */
.login-card .alert {
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.login-card .alert-error {
  background: rgba(212, 0, 75, 0.1);
  color: #b8003d;
  border: 1px solid rgba(212, 0, 75, 0.2);
}

.login-card .alert-success {
  background: rgba(0, 178, 254, 0.1);
  color: #006d94;
  border: 1px solid rgba(0, 178, 254, 0.2);
}

/* Button Styles in Login Context */
.login-card .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  outline: none;
}

.login-card .btn-primary {
  background: linear-gradient(135deg, var(--pg-cyan) 0%, #0195d6 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 178, 254, 0.4);
}

.login-card .btn-primary:hover {
  background: linear-gradient(135deg, #0195d6 0%, #017aae 100%);
  box-shadow: 0 6px 20px rgba(0, 178, 254, 0.5);
  transform: translateY(-1px);
}

.login-card .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 178, 254, 0.4);
}

.login-card .btn-full {
  width: 100%;
}

/* Login Links */
.login-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.login-link {
  font-size: 0.9rem;
  color: var(--pg-cyan);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.login-link:hover {
  color: #0195d6;
  text-decoration: underline;
}

.login-link-muted {
  color: var(--text-muted);
  font-weight: 400;
}

.login-link-muted:hover {
  color: var(--text);
}

/* Subject row coloring */
.subject-row {
  background-color: var(--subject-bg, transparent);
  color: var(--subject-text, inherit);
}

.subject-row td {
  background-color: var(--subject-bg, transparent);
  color: var(--subject-text, inherit);
}

.subject-row a {
  color: var(--subject-text, inherit);
  text-decoration: underline;
}

.subject-row .badge-status,
.subject-row .form-select {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--text);
  border: 1px solid var(--border);
}

.subject-row .text-muted {
  color: var(--subject-text, var(--text-muted));
  opacity: 0.7;
}

/* Forgot: Input + Button wie im Rest der App */
.forgot-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  gap: 1.25rem;
}

.forgot-row .form-input {
  flex: 1;
  min-width: 220px;
}

.combobox {
  position: relative;
}

.combobox-input-wrapper {
  position: relative;
}

.combobox-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #888;
}

.combobox-clear:hover {
  color: #000;
}

.combobox-list {
  position: absolute;
  z-index: 20;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  margin-top: 0.25rem;
  padding: 0;
  list-style: none;
}

.combobox-list li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.combobox-list li.is-active,
.combobox-list li:hover {
  background: #f0f0f0;
}

/* Scroll-Container für breite + hohe Tabellen */
.table-wrapper {
  width: 100%;
  overflow: auto; /* horizontal + vertikal */
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;

  max-height: 70vh; /* oder z.B. 520px */
}

/* Tabelle bleibt breit genug für horizontales Scrollen */
.table {
  min-width: 1100px; /* ggf. anpassen */
  border-collapse: collapse;
}

/* Standard: nicht umbrechen -> besser für horizontalen Scroll */
.table th,
.table td {
  white-space: nowrap;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2; /* über den Zellen */
}

/* Optional: E-Mail darf umbrechen, damit nicht ALLES extrem breit wird */
.user-overview-table td:nth-child(5) {
  white-space: normal;
  word-break: break-word;
}

.table thead th {
  background: #e2ecf9;
}

/* Umwahl-Übersicht: Tabelle horizontal scrollbar auf schmalen Screens */
.table-wrapper--umwahlen {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Erzeugt Überbreite -> Scrollbar */
.table--umwahlen {
  min-width: 980px; /* ggf. anpassen (900–1200 je nach Inhalt) */
}

/* Standard: helles Logo sichtbar */
.login-logo--dark {
  display: none;
}

/* Standard: helles Logo sichtbar */
.top-nav-logo--dark {
  display: none;
}

/* Dark Mode per body.dark class */
body.dark .login-page {
  background: #020617;
}

body.dark .login-card {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

body.dark .login-title {
  color: var(--pg-offwhite);
}

body.dark .login-card .form-label {
  color: var(--pg-offwhite);
}

body.dark .login-card .form-input {
  background: rgba(15, 23, 42, 0.8);
  border-color: #475569;
  color: #e2e8f0;
}

body.dark .login-card .form-input:focus {
  background: rgba(15, 23, 42, 0.9);
  border-color: var(--pg-cyan);
  box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.2);
}

body.dark .password-toggle {
  color: #94a3b8;
}

body.dark .password-toggle:hover {
  color: #e2e8f0;
}

body.dark .password-toggle:focus {
  color: var(--pg-cyan);
}

body.dark .login-card .alert-error {
  background: rgba(212, 0, 75, 0.15);
  color: #ff6b9d;
  border-color: rgba(212, 0, 75, 0.3);
}

body.dark .login-card .alert-success {
  background: rgba(0, 178, 254, 0.15);
  color: #7dd3fc;
  border-color: rgba(0, 178, 254, 0.3);
}

body.dark .login-links {
  border-top-color: #334155;
}

body.dark .login-link {
  color: #7dd3fc;
}

body.dark .login-link:hover {
  color: #bae6fd;
}

body.dark .login-link-muted {
  color: #94a3b8;
}

body.dark .login-link-muted:hover {
  color: #cbd5e1;
}

/* Dark Mode per body.dark (falls du den zusätzlich nutzt) */
body.dark .login-logo--light {
  display: none;
}

body.dark .login-logo--dark {
  display: inline-block;
}

/* Dark Mode per body.dark (falls du den zusätzlich nutzt) */
body.dark .top-nav-logo--light {
  display: none;
}

body.dark .top-nav-logo--dark {
  display: inline-block;
}

.card--danger {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
}



/* Laufbahn tables: horizontal scrolling up to tablet width */
.table-wrapper--laufbahn,
.table-wrapper--laufbahn-history {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  -webkit-overflow-scrolling: touch;
}

.table--laufbahn {
  min-width: 100%;
  width: max-content;
  table-layout: auto;
}

.table--laufbahn-history {
  min-width: 760px;
  width: max-content;
}

.table--laufbahn th:first-child,
.table--laufbahn td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--subject-bg, #ffffff);
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.08);
}

.table--laufbahn thead th:first-child {
  z-index: 3;
  background: #e2ecf9;
}

.table--laufbahn td:first-child {
  max-width: 16rem;
  white-space: normal;
}

@media (max-width: 760px) {
  .table--laufbahn {
    min-width: 100%;
    width: max-content;
    table-layout: auto;
  }

  .table--laufbahn th:first-child,
  .table--laufbahn td:first-child {
    width: clamp(7rem, 34vw, 9.5rem);
    min-width: clamp(7rem, 34vw, 9.5rem);
    max-width: clamp(7rem, 34vw, 9.5rem);
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .table--laufbahn th:not(:first-child),
  .table--laufbahn td:not(:first-child) {
    white-space: nowrap;
  }
}

.table--kurswahlen {
  min-width: 100%;
  width: max-content;
  table-layout: auto;
}

.table--kurswahlen th,
.table--kurswahlen td {
  white-space: nowrap;
}

.table--kurswahlen th:first-child,
.table--kurswahlen td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.08);
}

.table--kurswahlen thead th:first-child {
  z-index: 3;
  background: #e2ecf9;
}

.table--kurswahlen td:first-child {
  max-width: 16rem;
  white-space: normal;
}

/* Umwahl-Übersicht: scrollbar area */
.table-wrapper--umwahl-overview {
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}



.klausur-abiturjahr-badge {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}

.klausur-abiturjahr-badge--blue {
  background: #dbeafe;
  color: #1e3a8a;
}

.klausur-abiturjahr-badge--orange {
  background: #ffedd5;
  color: #7c2d12;
}

.klausur-abiturjahr-badge--green {
  background: #dcfce7;
  color: #14532d;
}

.klausur-abiturjahr-badge--neutral {
  color: #334155;
}

body.dark .klausur-abiturjahr-badge--blue {
  background: rgba(30, 58, 138, 0.4);
  color: #dbeafe;
}

body.dark .klausur-abiturjahr-badge--orange {
  background: rgba(124, 45, 18, 0.4);
  color: #ffedd5;
}

body.dark .klausur-abiturjahr-badge--green {
  background: rgba(20, 83, 45, 0.4);
  color: #dcfce7;
}

body.dark .klausur-abiturjahr-badge--neutral {
  color: #e2e8f0;
}

/* Abiturjahrgänge + Klausur-Gesamtübersicht als Kacheln bis Tablet */
@media (max-width: 1024px) {
  .table-wrapper--graduation-terms,
  .table-wrapper--klausur-overview {
    overflow: visible;
    max-height: none;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table--graduation-terms,
  .table--klausur-overview {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table--graduation-terms thead,
  .table--klausur-overview thead {
    display: none;
  }

  .table--graduation-terms tbody,
  .table--klausur-overview tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem;
  }

  .table--graduation-terms tbody tr,
  .table--klausur-overview tbody tr {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem;
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(1, 13, 110, 0.08);
  }

  .table--klausur-overview tbody td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .table--klausur-overview tbody td:nth-child(1)::before,
  .table--klausur-overview tbody td:nth-child(2)::before {
    content: none;
    display: none;
  }

  .table--graduation-terms td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .table--graduation-terms .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .table--graduation-terms .form-select,
  .table--graduation-terms .form-input {
    min-width: 0 !important;
    width: 100%;
  }

  .table--graduation-terms .form-col > strong {
    display: inline-block;
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
  }

  .table--graduation-terms .form-col > label,
  .table--graduation-terms .form-col > div {
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .table-wrapper--klausur-overview {
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Klausuren: scrollbar area */
.table-wrapper--klausuren {
  max-height: 70vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Klausurplan as compact tiles up to 1024px */
@media (max-width: 1024px) {
  .table-wrapper--klausuren {
    overflow: visible;
    max-height: none;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table--klausuren {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table--klausuren thead {
    display: none;
  }

  .table--klausuren tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.35rem 0.55rem;
  }

  .table--klausuren tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    padding: 0.52rem 0.68rem;
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(1, 13, 110, 0.08);
  }

  .table--klausuren td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .table--klausuren td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.08rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .table--klausuren td[data-label="Fach / Kurs"],
  .table--klausuren td[data-label="Datum"] {
    font-weight: 700;
  }
}

@media (max-width: 1024px) {
  .table-wrapper--umwahl-antraege,
  .table-wrapper--umwahl-overview {
    overflow: visible;
    max-height: none;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table--umwahl-antraege,
  .table--umwahl-overview {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table--umwahl-antraege thead,
  .table--umwahl-overview thead {
    display: none;
  }

  .table--umwahl-antraege tbody,
  .table--umwahl-overview tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.5rem;
  }

  .table--umwahl-antraege tbody tr,
  .table--umwahl-overview tbody tr {
    display: grid;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(1, 13, 110, 0.08);
  }

  .table--umwahl-antraege td,
  .table--umwahl-overview td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .table--umwahl-antraege td::before,
  .table--umwahl-overview td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.08rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .table--umwahl-antraege td[colspan]::before,
  .table--umwahl-overview td[colspan]::before {
    content: none;
  }

  .table--umwahl-overview tbody tr.change-note-row {
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .table--umwahl-overview tbody tr.change-note-row td {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
  }
}

@media (max-width: 1024px) {
  .table-wrapper--user-overview {
        max-height: none !important;
        height: 48vH;
  }
}

@media (max-width: 1024px) {
  .table-wrapper--umwahl-antraege,
  .table-wrapper--umwahl-overview {
    overflow: visible;
    max-height: none;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .table--umwahl-antraege,
  .table--umwahl-overview {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .table--umwahl-antraege thead,
  .table--umwahl-overview thead {
    display: none;
  }

  .table--umwahl-antraege tbody,
  .table--umwahl-overview tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.5rem;
  }

  .table--umwahl-antraege tbody tr,
  .table--umwahl-overview tbody tr {
    display: grid;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(1, 13, 110, 0.08);
  }

  .table--umwahl-antraege td,
  .table--umwahl-overview td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .table--umwahl-antraege td::before,
  .table--umwahl-overview td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.08rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .table--umwahl-antraege td[colspan]::before,
  .table--umwahl-overview td[colspan]::before {
    content: none;
  }

  .table--umwahl-overview tbody tr.change-note-row {
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .table--umwahl-overview tbody tr.change-note-row td {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
  }
}

@media (max-width: 1024px) {
  .table-wrapper.table-wrapper--laufbahn,
  .table-wrapper.table-wrapper--kurswahlen,
  .table-wrapper.table-wrapper--laufbahn-history {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
  }
}

/* Explicit manual dark mode for all pages */
body.dark.app-body {
  background: #020617;
  color: #e2e8f0;
}

body.dark .app-footer {
  color: #94a3b8;
}

body.dark .top-nav {
  border-color: rgba(51, 65, 85, 0.6);
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
}

body.dark .top-nav-title,
body.dark .page-title,
body.dark .card-title,
body.dark .accordion-title {
  color: var(--pg-offwhite);
}

body.dark .top-nav-subtitle,
body.dark .page-subtitle,
body.dark .card-subtitle,
body.dark .stat-label,
body.dark .accordion-description,
body.dark .text-muted {
  color: #cbd5f5;
}

body.dark .top-nav-link,
body.dark .top-nav-mobile-link,
body.dark .form-label {
  color: #e2e8f0;
}

body.dark .form-hint {
  color: #cbd5f5;
}

body.dark .dashboard-security-accordion .accordion-item {
  background: rgba(14, 116, 144, 0.18);
  border-color: rgba(103, 232, 249, 0.26);
}

body.dark .dashboard-security-list code {
  background: rgba(226, 232, 240, 0.12);
  color: #e2e8f0;
}

body.dark .top-nav-mobile-panel,
body.dark .card,
body.dark .accordion-item,
body.dark .import-requirements,
body.dark .accordion-subsection,
body.dark .combobox-list {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  color: #e2e8f0;
}

body.dark .top-nav-mobile-header {
  border-bottom-color: rgba(51, 65, 85, 0.6);
}

body.dark .top-nav-mobile-title,
body.dark .top-nav-mobile-section-title,
body.dark .top-nav-mobile-close,
body.dark .top-nav-toggle-bar {
  color: var(--pg-offwhite);
}

body.dark .top-nav-toggle,
body.dark .top-nav-mobile-close,
body.dark .btn-outline {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
  color: #e2e8f0;
}

body.dark .user-pill {
  background: rgba(0, 178, 254, 0.2);
  color: #e2e8f0;
}

body.dark .form-input,
body.dark .form-select,
body.dark .form-textarea,
body.dark .file-upload,
body.dark .subject-row .form-select,
body.dark .subject-row .badge-status {
  border-color: #475569;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
}

body.dark .table-wrapper {
  border: 1px solid rgba(51, 65, 85, 0.7);
  background: rgba(15, 23, 42, 0.88);
}

body.dark .table,
body.dark .table th,
body.dark .table td {
  color: #e2e8f0;
  border-bottom-color: #334155;
}

body.dark .table thead tr,
body.dark .table thead th {
  background: rgba(2, 6, 23, 0.95);
}

body.dark .table--laufbahn thead tr,
body.dark .table--kurswahlen thead tr,
body.dark .table--laufbahn thead th,
body.dark .table--kurswahlen thead th,
body.dark .table--laufbahn .subject-row--count td,
body.dark .table--kurswahlen .subject-row--count td {
  background: rgba(30, 41, 59, 0.75);
  color: #e2e8f0;
}

body.dark .table--laufbahn thead th:first-child,
body.dark .table--kurswahlen thead th:first-child,
body.dark .table--laufbahn .subject-row--count td:first-child,
body.dark .table--kurswahlen .subject-row--count td:first-child {
  background: #16233d;
  color: #e2e8f0;
}

body.dark .table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.75);
}

/* dunkle Dropdowns / Inputs in Kurswahlen */
body.dark .elections-table select,
body.dark .elections-table .form-select,
body.dark .elections-table option,
body.dark .election-table select,
body.dark .election-table .form-select,
body.dark .election-table option {
  color: #ffffff !important;
}

body.dark .elections-table select,
body.dark .elections-table .form-select,
body.dark .election-table select,
body.dark .election-table .form-select {
  background: #56565f !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.dark .elections-table option,
body.dark .election-table option {
  background: #56565f !important;
}

@media (max-width: 1024px) {
  body.dark .table--klausuren tbody tr {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  }

  body.dark .table--klausuren td::before {
    color: #94a3b8;
  }
}

/* =========================
   Responsive: max-width
   ========================= */

@media (max-width: 900px) {
  .import-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .forgot-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .forgot-row .btn {
    width: 100%;
    margin-top: 0.5rem; /* mehr Platz oberhalb */
    margin-bottom: 0.25rem; /* mehr Platz unterhalb */
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 2rem 1.5rem;
  }

  .login-title {
    font-size: 1.5rem;
  }

  .login-logo {
    height: 3.5rem;
  }
}

@media (max-width: 900px) {
  .table--umwahlen th,
  .table--umwahlen td {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .table--umwahlen td:nth-child(3) {
    white-space: normal;
    min-width: 320px; /* sorgt für lesbare Zeilen im Änderungs-Text */
  }
}

@media (max-width: 900px) {
  .table-wrapper--umwahlen {
    max-height: 70vh; /* <= 70% der Bildschirmhöhe */
    overflow: auto; /* horizontal + vertikal */
    -webkit-overflow-scrolling: touch;
  }

  .table--umwahlen thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* =========================
   Dark mode: prefers-color-scheme
   ========================= */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --card: rgba(15, 23, 42, 0.88);
    --border: rgba(51, 65, 85, 0.7);
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  .dashboard-election-guide-accordion .accordion-item {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  }

  body.app-body {
    background: #020617;
    color: #e2e8f0;
  }

  .top-nav {
    border-color: rgba(51, 65, 85, 0.6);
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  .top-nav-title {
    color: var(--pg-offwhite);
  }

  .top-nav-subtitle {
    color: #cbd5f5;
  }

  .top-nav-link {
    color: #e2e8f0;
  }

  .top-nav-toggle-bar {
    background: var(--pg-offwhite);
  }

  .top-nav-toggle {
    background: rgba(15, 23, 42, 0.9); /* passend zur Top-Nav */
    border-color: var(--pg-offwhite);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }

  .top-nav-toggle:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: var(--pg-cyan);
  }

  .top-nav-mobile-panel {
    background: rgba(15, 23, 42, 0.98);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.55);
  }

  .top-nav-mobile-backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  .top-nav-mobile-header {
    border-bottom-color: rgba(51, 65, 85, 0.6);
  }

  .top-nav-mobile-title {
    color: var(--pg-offwhite);
  }

  .top-nav-mobile-close {
    border-color: var(--pg-offwhite);
    color: var(--pg-offwhite);
  }

  .top-nav-mobile-close:hover {
    border-color: var(--pg-cyan);
  }

  .top-nav-mobile-section-title {
    color: #cbd5f5;
  }

  .top-nav-mobile-link {
    color: #e2e8f0;
  }

  .top-nav-mobile-link:hover {
    background: rgba(0, 178, 254, 0.1);
  }

  .user-pill {
    background: rgba(0, 178, 254, 0.25);
    color: #e2e8f0;
  }

  .page-title {
    color: var(--pg-offwhite);
  }

  .page-subtitle {
    color: #cbd5f5;
  }

  .card {
    border-color: rgba(51, 65, 85, 0.7);
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  .card-title {
    color: var(--pg-offwhite);
  }

  .card-subtitle {
    color: #cbd5f5;
  }

  .stat-value {
    color: var(--pg-offwhite);
  }

  .stat-label {
    color: #cbd5f5;
  }

  .table thead tr {
    background: #020617;
  }

  .table--laufbahn thead th:first-child,
  .table--kurswahlen thead th:first-child {
    background: rgba(2, 6, 23, 0.95);
  }

  .table--laufbahn .subject-row--count td:first-child {
    background: #16233d;
    color: #e2e8f0;
  }

  .table th,
  .table td {
    border-bottom-color: #334155;
  }

  .table th {
    color: var(--pg-offwhite);
  }

  .table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.75);
  }

  .form-label {
    color: var(--pg-offwhite);
  }

  .form-input,
  .form-select,
  .form-textarea {
    border-color: #475569;
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
  }

  .form-select {
    background-color: #0f172a;
  }

  .form-select option,
  .form-select optgroup {
    background-color: #0f172a;
    color: #e2e8f0;
  }

  .subject-row .badge-status,
  .subject-row .form-select {
    background-color: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.5);
  }

  .elections-table td.changed {
    background: rgba(234, 179, 8, 0.2);
  }

  /* dunkle Dropdowns / Inputs in Kurswahlen */
  .elections-table select,
  .elections-table .form-select,
  .elections-table option,
  .election-table select,
  .election-table .form-select,
  .election-table option {
    color: #ffffff !important;
  }

  .elections-table select,
  .elections-table .form-select,
  .election-table select,
  .election-table .form-select {
    background: #56565f !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .elections-table option,
  .election-table option {
    background: #56565f !important;
  }

  .btn-outline {
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.5);
  }

  .code-block {
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
  }

  a {
    color: #7dd3fc;
  }

  .accordion-item {
    border-color: rgba(51, 65, 85, 0.7);
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  .accordion-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  }

  .accordion-header:hover {
    background: rgba(0, 178, 254, 0.1);
  }

  .accordion-title {
    color: var(--pg-offwhite);
  }

  .accordion-description {
    color: #cbd5f5;
  }

  .badge-status--approved {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
  }

  .badge-status--rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
  }

  .badge-status--draft {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
  }

  .badge-status--pending {
    background: rgba(0, 178, 254, 0.2);
    color: #7dd3fc;
  }

  .row-has-draft-change {
    background: transparent !important;
  }

  .dashboard-row--changed {
    background: rgba(0, 178, 254, 0.2) !important;
  }

  .term-active {
    background: rgba(0, 178, 254, 0.25);
  }

  /*.term-active-cell {
    background: rgba(0, 178, 254, 0.15) !important;
  }*/

  .cell-change--approved::after {
    background: #4ade80;
  }

  .cell-change--rejected::after {
    background: #f87171;
  }

  .cell-change--pending::after {
    background: #7dd3fc;
  }

  /* ========================================
     Dark Mode Support for Login Page
     ======================================== */

  .login-page {
    background: #020617;
  }

  .login-card {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(51, 65, 85, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }

  .login-title {
    color: var(--pg-offwhite);
  }

  .login-card .form-label {
    color: var(--pg-offwhite);
  }

  .login-card .form-input {
    background: rgba(15, 23, 42, 0.8);
    border-color: #475569;
    color: #e2e8f0;
  }

  .login-card .form-input:focus {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--pg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.2);
  }

  .password-toggle {
    color: #94a3b8;
  }

  .password-toggle:hover {
    color: #e2e8f0;
  }

  .password-toggle:focus {
    color: var(--pg-cyan);
  }

  .login-card .alert-error {
    background: rgba(212, 0, 75, 0.15);
    color: #ff6b9d;
    border-color: rgba(212, 0, 75, 0.3);
  }

  .login-card .alert-success {
    background: rgba(0, 178, 254, 0.15);
    color: #7dd3fc;
    border-color: rgba(0, 178, 254, 0.3);
  }

  .login-links {
    border-top-color: #334155;
  }

  .login-link {
    color: #7dd3fc;
  }

  .login-link:hover {
    color: #bae6fd;
  }

  .login-link-muted {
    color: #94a3b8;
  }

  .login-link-muted:hover {
    color: #cbd5e1;
  }

  /* ========================================
     Combobox – Dark Mode
     ======================================== */

  .combobox-clear {
    color: #94a3b8; /* slate-400 */
  }

  .combobox-clear:hover {
    color: #e2e8f0; /* slate-200 */
  }

  .combobox-list {
    background: rgba(15, 23, 42, 0.95); /* identisch zu Cards */
    border-color: #475569; /* slate-600 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  .combobox-list li {
    color: #e2e8f0; /* slate-200 */
  }

  .combobox-list li:hover,
  .combobox-list li.is-active {
    background: rgba(0, 178, 254, 0.18); /* pg-cyan soft */
    color: #ffffff;
  }

  .table-wrapper {
    border: 1px solid rgba(51, 65, 85, 0.7);
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  .table {
    color: #e2e8f0;
    border-collapse: collapse;
  }

  .table thead tr {
    background: rgba(2, 6, 23, 0.95);
  }

  .table th,
  .table td {
    border-bottom-color: #334155;
    color: #e2e8f0;
  }

  .table tbody tr {
    background: rgba(15, 23, 42, 0.88);
  }

  .table tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.75);
  }

  .table tbody tr:hover {
    background: rgba(0, 178, 254, 0.12);
  }

  .table a {
    color: #7dd3fc;
  }

  .table-wrapper::-webkit-scrollbar {
    height: 10px;
  }

  .table-wrapper::-webkit-scrollbar-track {
    background: rgba(51, 65, 85, 0.4);
    border-radius: 999px;
  }

  .table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.55);
    border-radius: 999px;
  }

  .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.75);
  }

  .table thead th {
    background: rgba(2, 6, 23, 0.95);
  }

  .accordion-subsection-body {
    background: rgba(51, 65, 85, 0.4);
  }

  .accordion-subsection {
    background: rgba(51, 65, 85, 0.4);
    color: #e2e8f0;
  }

  .accordion-subsection-summary {
    background: rgba(51, 65, 85, 0.4);
    color: #e2e8f0;
  }

  .table thead th {
    background: rgba(2, 6, 23, 0.95);
  }

  .subject-row td {
    color: var(--subject-text, #e2e8f0);
  }

  .subject-row count {
    color: var(--subject-text, #e2e8f0);
  }

  table.elections-table tr.subject-row td,
  table.elections-table tr.subject-row th {
    color: inherit;
  }

  .file-upload {
    background: transparent !important;
  }

  /* Dark Mode per OS/Browser */
  .login-logo--light {
    display: none;
  }

  .login-logo--dark {
    display: inline-block;
  }

  /* Dark Mode per OS/Browser */
  .top-nav-logo--light {
    display: none;
  }

  .top-nav-logo--dark {
    display: inline-block;
  }

  .card--danger {
    border-color: rgba(248, 113, 113, 0.75); /* rot, aber softer */
    background-color: rgba(239, 68, 68, 0.12); /* dunkler Hintergrund */
  }
}
@media (max-width: 1024px) {
  .table-wrapper--umwahlen {
    max-width: 100%;
    overflow-x: auto;          /* nur Tabelle scrollt */
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1024px) {
  .table--umwahlen {
    width: 100%;
    table-layout: fixed;   /* zwingt Spalten zum Schrumpfen */
  }

  .table--umwahlen th,
  .table--umwahlen td {
    word-wrap: break-word;
    white-space: normal;
  }
}
@media (max-width: 1024px) {
  .table--umwahlen td .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
  }
}
.btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;

  border-radius: 50%;
  cursor: pointer;
}
.btn-icon--approve {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgb(16, 185, 129);
  color: rgb(16, 185, 129);
}

.btn-icon--approve:hover {
  background: rgb(16, 185, 129);
  color: #fff;
}

.btn-icon--reject {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgb(220, 38, 38);
  color: rgb(220, 38, 38);
}

.btn-icon--reject:hover {
  background: rgb(220, 38, 38);
  color: #fff;
}


/* =========================================================
   Umwahl-Tabelle – Tablet & Mobile Optimierung
   ========================================================= */

/* ---------- Aktion (Icon-Buttons) ----------
   Icons dürfen NICHT umbrechen */
@media (max-width: 1400px) {
  .table--umwahlen td:last-child {
    white-space: nowrap;
  }  
}

/* ---------- Spalte 3: Änderung ----------
   Umbruch + kleinere Schrift */
.table--umwahlen th:nth-child(3),
.table--umwahlen td:nth-child(3) {
  white-space: normal;          /* überschreibt globales nowrap */
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 38vw;
}

.table--umwahlen td.change-col {
  font-size: 0.95rem;
  line-height: 1.25;
}

@media (max-width: 1400px) {
  .table--umwahlen td.change-col {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}

@media (max-width: 640px) {
  .table--umwahlen td.change-col {
    font-size: 0.65rem;
    line-height: 1.15;
  }
}

.change-main {
  font-weight: 600;
}

.change-sub {
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.9em;
}


/* ---------- Spalte 5: Datum ----------
   Datum + Uhrzeit untereinander, kompakt */
.table--umwahlen th:nth-child(5),
.table--umwahlen td:nth-child(5) {
  white-space: normal;
}

.table--umwahlen td.date-col {
  font-size: 0.92rem;
  line-height: 1.2;
}

@media (max-width: 1400px) {
  .table--umwahlen td.date-col {
    font-size: 0.7rem;
  }
}

@media (max-width: 640px) {
  .table--umwahlen td.date-col {
    font-size: 0.76rem;
  }
}

.date-main {
  font-weight: 600;
}

.date-sub {
  color: var(--text-muted);
  font-size: 0.9em;
}

.table--umwahlen {
  table-layout: fixed;
  width: 100%;
}
@media (max-width: 1400px) {
  .table--umwahlen th:nth-child(3),
  .table--umwahlen td:nth-child(3) {
    max-width: 40vw;
  }
  .table--umwahlen th:nth-child(1),
  .table--umwahlen td:nth-child(1) {
    max-width: 15vw;
  }
}

.table-wrapper--umwahlen {
  position: relative;
}

.table--umwahlen thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card); /* oder #fff */
  background-clip: padding-box;
}

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

@media (max-width: 640px) {
  .btn-icon {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }
}

/* Dashborad Schüler Smartphone*/
@media (max-width: 768px) {

  /* ✅ Wrapper/„Zwischenraum“ weiß statt grau */
  .card,
  .table-wrapper {
    background: #ffffff;
  }

  /* beide Dashboard-Tabellen */
  .table--dashboard-changes,
  .table--dashboard-elections {
    min-width: 0;
    width: 100%;
  }

  .table--dashboard-changes thead,
  .table--dashboard-elections thead {
    display: none;
  }

  .table--dashboard-changes,
  .table--dashboard-changes tbody,
  .table--dashboard-changes tr,
  .table--dashboard-elections,
  .table--dashboard-elections tbody,
  .table--dashboard-elections tr {
    display: block;
    width: 100%;
  }

  /* ✅ Kacheln */
  .table--dashboard-changes tr,
  .table--dashboard-elections tr {
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border: 0;
  }

  /* ✅ Kurswahlen: Kachel komplett in Fachfarbe */
  .table--dashboard-elections tr {
    background: var(--subject-bg, #ffffff);
    color: var(--subject-text, var(--text));
  }

  /* ✅ Umwahlwünsche: neutral weiß */
  .table--dashboard-changes tr {
    background: #ffffff;
    color: var(--text);
  }

  /* ✅ Zellen: kein eigener Hintergrund, damit Kachelfarbe durchgeht */
  .table--dashboard-changes td,
  .table--dashboard-elections td {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border: none;
    background: transparent !important;

    /* ✅ Text soll umbrechen */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
  }

  /* ✅ Label-Spalte */
  .table--dashboard-changes td::before,
  .table--dashboard-elections td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);

    /* ✅ Labels dürfen umbrechen, wenn nötig */
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* ✅ Value-Spalte (alles außer Label) soll umbrechen */
  .table--dashboard-changes td > *,
  .table--dashboard-elections td > * {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* ✅ Aktionen kompakt (Buttons rechts), dürfen aber auch umbrechen */
  .table--dashboard-elections td:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;

    flex-wrap: wrap;      /* ✅ falls zu eng */
    white-space: normal;
  }

  /* Optional: Buttons nicht riesig */
  .table--dashboard-elections td:last-child .btn {
    width: auto;
    max-width: 100%;
    white-space: normal;      /* ✅ Button-Text umbrechen */
  }

  /* ✅ KEIN inneres Scrollen für diese beiden Tabellen */
  .table-wrapper,
  .table-wrapper--umwahlen,
  .table-wrapper--dashboard,
  .table-wrapper--dashboard-changes,
  .table-wrapper--dashboard-elections {
    max-height: none !important;
  }

  /* falls du den Scroll über die Tabelle selbst gesetzt hast */
  .table--dashboard-changes,
  .table--dashboard-elections {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

    /* ✅ Schatten der Kacheln entfernen */
  .table--dashboard-changes tr,
  .table--dashboard-elections tr {
    box-shadow: none !important;
  }

  /* optional: wenn du auch keinen „Glow“/Rand willst */
  .table--dashboard-elections tr {
    border: 0 !important;
  }
    /* ✅ Zebra-Striping für Kurswahlen deaktivieren */
  .table--dashboard-elections tbody tr:nth-child(odd),
  .table--dashboard-elections tbody tr:nth-child(even) {
    background: var(--subject-bg, #ffffff) !important;
  }

  /* ✅ falls irgendwo td zebra bekommt */
  .table--dashboard-elections td {
    background: transparent !important;
  }

  /* ✅ Sicherheit: Kachel selbst immer Fachfarbe */
  .table--dashboard-elections tr {
    background: var(--subject-bg, #ffffff) !important;
    color: var(--subject-text, var(--text));
  }

    /* ✅ Leere Abifach-Zeile vollständig ausblenden */
  .table--dashboard-elections td[data-label="Abifach"].is-empty {
    display: none;
  }

    /* Abifach-Zeile als zentrierter Badge */
  .table--dashboard-elections td[data-label="Abifach"] {
    display: flex;                 /* statt grid */
    justify-content: center;
    align-items: center;

    margin-top: 0.5rem;
  }

  /* eigentlicher "Button"-Look */
  .table--dashboard-elections td[data-label="Abifach"]::after {
    content: attr(data-label);
    display: none; /* Label nicht anzeigen */
  }

  .table--dashboard-elections td[data-label="Abifach"] {
    font-weight: 600;
  }

  .table--dashboard-elections td[data-label="Abifach"] {
    color: var(--subject-text, #1f2937);
  }

  .table--dashboard-elections td[data-label="Abifach"] {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;          /* pill */
    padding: 0.35rem 0.9rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  .table--dashboard-elections td[data-label="Abifach"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  }

  /* ✅ Nur obere Tabelle: Kachel-Rand */
  .table--dashboard-changes tr {
    border: 1px solid rgba(1, 13, 110, 0.14); /* passt zu deinem PG-Blau */
    background: #ffffff;                      /* bleibt neutral */
  }

  .page-title {
    font-size: 1.5rem;
  }





}

.dashboard-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.dashboard-section + .dashboard-section {
  margin-top: 1.25rem;
}

.planned-changes-card {
  margin-top: 1.5rem;
  margin-bottom: 0;
  box-shadow: 0 16px 36px rgba(1, 13, 110, 0.12);
}

.planned-changes-card .card-header {
  margin-bottom: 0.75rem;
}

.planned-changes-list {
  margin: 0;
  padding: 0 1.5rem 1.25rem 2.5rem;
}

.planned-changes-list li {
  margin: 0.35rem 0;
}

.signature-card {
  margin-bottom: 0;
}

.card > .card {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.signature-card button {
  margin-top: 0.75rem;
}

.signature-card .js-signature-toggle {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

.signature-fields {
  margin-top: 1.75rem;
}

.signature-fields label {
  display: block;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.signature-fields label:first-child {
  margin-top: 0.75rem;
}


.dashboard-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.signature-card--planned {
  padding: 0 1.5rem 1.25rem;
}

.form-actions--planned {
  padding: 0 1.5rem 1.5rem;
  margin-top: 0;
}

.signature-canvas-wrap {
  width: min(100%, 600px);
  height: 180px;
  margin-top: 0.25rem;
  border: 2px solid var(--pg-blue);
  border-radius: 0.75rem;
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(1, 13, 110, 0.2), 0 8px 18px rgba(1, 13, 110, 0.08);
  overflow: hidden;
}

.signature-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #f8fbff;
  touch-action: none;
}

@media (max-width: 640px) {
  .planned-changes-card {
    margin-top: 1rem;
  }

  .planned-changes-card .card-title {
    font-size: 1rem;
  }

  .planned-changes-list {
    padding: 0 1rem 1rem 1.25rem;
  }

  .planned-changes-list li {
    margin-bottom: 0.5rem;
    line-height: 1.35;
  }

  .signature-card--planned {
    padding: 0 1rem 1rem;
  }

  .form-actions--planned {
    padding: 0 1rem 1rem;
  }

  .form-actions--planned .btn {
    width: 100%;
  }

  .signature-canvas-wrap {
    height: 160px;
  }
}

.signature-status {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.signature-fields .btn-danger {
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.signature-fields .btn-danger:last-child {
  margin-bottom: 0;
}

.signature-status.is-ok {
  color: #16a34a;
  font-weight: 600;
}

.signature-status.is-error {
  color: #dc2626;
  font-weight: 600;
}

.error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.error-overlay[hidden] {
  display: none !important;
}

.error-modal {
  background: #fff;
  padding: 1.5rem;
  max-width: 420px;
  width: 90%;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.error-modal h3 {
  margin-top: 0;
  color: #dc2626;
}

.submission-block {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  background: #fff;
}

.submission-header {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.submission-header-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.submission-header-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.submission-user {
  font-size: 0.95rem;
  color: #475569;
}

.submission-withdrawn {
  padding: 0.75rem 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  margin-bottom: 1rem;
  color: #9a3412;
}

.audit-json {
  background: #0f172a;
  color: #e2e8f0;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  overflow-x: auto;
}

.signature-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  align-items: start;
}

.signature-image {
  max-width: 100%;
  border: 1px solid #cbd5f5;
  border-radius: 8px;
  background: #fff;
}

.filter-bar .form-row {
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .submission-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.signature-card label,
.signature-card canvas,
.signature-card .signature-status,
.signature-card button {
  display: block;
}

/* =========================================================
   Kurswahlen – identisch zu table-wrapper--laufbahn
   ========================================================= */

.table-wrapper--kurswahlen {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.table--kurswahlen {
  min-width: 100%;
  width: max-content;
  table-layout: auto;
}

/* kein Umbruch, kompakt wie Laufbahn */
.table--kurswahlen th,
.table--kurswahlen td {
  white-space: nowrap;
}
/* Kurswahlen – Wrapper IDENTISCH zu Laufbahn */
.table-wrapper--kurswahlen {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  -webkit-overflow-scrolling: touch;
}

/* Admin-Laufbahn: nur die erste Spalte darf mobil umbrechen; die restlichen Spalten bleiben scrollbar. */
@media (max-width: 760px) {
  .table--kurswahlen th:first-child,
  .table--kurswahlen td:first-child {
    width: clamp(8.5rem, 34vw, 13rem);
    min-width: 8.5rem;
    max-width: clamp(8.5rem, 34vw, 13rem);
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .table--kurswahlen th:not(:first-child),
  .table--kurswahlen td:not(:first-child) {
    white-space: nowrap;
  }
}

/* =========================================================
   System Dark Mode refinements (prefers-color-scheme)
   ========================================================= */

@media (prefers-color-scheme: dark) {
  .signature-image {
    border-color: rgba(51, 65, 85, 0.6);
    background: rgba(15, 23, 42, 0.9);
  }

  @media (max-width: 768px) {
    .card,
    .table-wrapper {
      background: rgba(15, 23, 42, 0.88);
    }

    .table--dashboard-changes tr {
      background: rgba(15, 23, 42, 0.88);
      color: #e2e8f0;
      border-color: rgba(51, 65, 85, 0.7);
    }

    .table--dashboard-elections tr {
      background: var(--subject-bg, rgba(15, 23, 42, 0.88)) !important;
      color: var(--subject-text, #e2e8f0);
      border: 1px solid rgba(51, 65, 85, 0.7);
    }

    .table--dashboard-changes td::before,
    .table--dashboard-elections td::before {
      color: #94a3b8;
    }

    .table--dashboard-elections td[data-label="Abifach"] {
      color: var(--subject-text, #e2e8f0);
      background: rgba(15, 23, 42, 0.65);
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
    }
  }
}

.legal-card {
  max-width: 920px;
  margin-inline: auto;
}

.legal-content {
  color: var(--text);
  line-height: 1.65;
  font-size: 0.98rem;
}

.legal-content section + section {
  margin-top: 1.35rem;
}

.legal-content h2 {
  margin: 0 0 0.6rem;
  color: var(--pg-blue);
  font-size: 1.25rem;
  font-weight: 700;
}

.legal-content p {
  margin: 0 0 0.8rem;
}

.legal-content ul {
  margin: 0.35rem 0 0.95rem;
  padding-left: 1.25rem;
}

.legal-content li + li {
  margin-top: 0.25rem;
}

.legal-content hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 1.25rem 0 0.9rem;
}

body.dark .legal-content h2 {
  color: #dbeafe;
}

body.dark .legal-content hr {
  border-top-color: rgba(148, 163, 184, 0.35);
}

.legal-card {
  max-width: 920px;
  margin-inline: auto;
}

.legal-content {
  color: var(--text);
  line-height: 1.65;
  font-size: 0.98rem;
}

.legal-content section + section {
  margin-top: 1.35rem;
}

.legal-content h2 {
  margin: 0 0 0.6rem;
  color: var(--pg-blue);
  font-size: 1.25rem;
  font-weight: 700;
}

.legal-content p {
  margin: 0 0 0.8rem;
}

.legal-content ul {
  margin: 0.35rem 0 0.95rem;
  padding-left: 1.25rem;
}

.legal-content li + li {
  margin-top: 0.25rem;
}

.legal-content hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 1.25rem 0 0.9rem;
}

body.dark .legal-content h2 {
  color: #dbeafe;
}

body.dark .legal-content hr {
  border-top-color: rgba(148, 163, 184, 0.35);
}

.admin-search-combobox {
  position: relative;
}

.admin-search-combobox__input {
  padding-right: 2.2rem;
}

.admin-search-combobox__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #1f3b73;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.admin-search-combobox__list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  max-height: 14rem;
  overflow-y: auto;
}

.admin-search-combobox__option {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.admin-search-combobox__option:hover,
.admin-search-combobox__option:focus {
  background: #e2ecf9;
}

.table--kurswahlen th,
.table--kurswahlen td {
  padding-top: 0.38rem;
  padding-bottom: 0.38rem;
  line-height: 1.2;
}

/* Dashboard-Umwahl: Dropdowns sollen die Tabelle nicht unnötig verbreitern */
.table--dashboard-elections .form-select {
  width: 100%;
  max-width: 12rem;
  min-width: 0;
}

/* Schüler-Dashboard: Kurswahlen auf Tablets kompakt ohne inneres Tabellen-Scrollen */
.table-wrapper--dashboard-elections {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
}

.table--dashboard-elections {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.table--dashboard-elections th,
.table--dashboard-elections td {
  padding: 0.38rem 0.55rem;
  line-height: 1.2;
  vertical-align: middle;
}

.table--dashboard-elections th:nth-child(1),
.table--dashboard-elections td:nth-child(1) {
  width: 44%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.table--dashboard-elections th:nth-child(2),
.table--dashboard-elections td:nth-child(2) {
  width: 11%;
}

.table--dashboard-elections th:nth-child(3),
.table--dashboard-elections td:nth-child(3) {
  width: 29%;
}

.table--dashboard-elections th:nth-child(4),
.table--dashboard-elections td:nth-child(4) {
  width: 16%;
}

.table--dashboard-elections .form-select {
  height: 36px;
  padding: 0.3rem 1.9rem 0.3rem 0.55rem;
  border-radius: 0.75rem;
  font-size: 0.88rem;
  max-width: 10.5rem;
}

.table--dashboard-elections .js-abi-select {
  max-width: 8.25rem;
}

.dashboard-election-guide-accordion {
  margin: 0 0 1.5rem;
}

.dashboard-election-guide-accordion .accordion-item {
  border-color: rgba(0, 178, 254, 0.24);
  background: rgba(0, 178, 254, 0.04);
  box-shadow: none;
}

.dashboard-election-guide-accordion .accordion-header {
  padding: 1.1rem 1.5rem;
}

.dashboard-election-guide-accordion__body {
  padding: 0 1.5rem 1.35rem;
  color: var(--text);
}

.dashboard-election-guide-accordion__body p {
  margin: 0 0 0.9rem;
}

.dashboard-election-guide-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.2rem;
}

.dashboard-election-guide-list li {
  line-height: 1.5;
}

.dashboard-election-guide-list li::marker {
  color: var(--pg-cyan);
}

/* Dark Mode wie dashboard-security-accordion */
body.dark .dashboard-election-guide-accordion .accordion-item {
  background: rgba(14, 116, 144, 0.18);
  border-color: rgba(103, 232, 249, 0.26);
  box-shadow: none;
}

body.dark .dashboard-election-guide-accordion__body {
  color: #e0f2fe;
}

body.dark .dashboard-election-guide-list li::marker {
  color: #38bdf8;
}

/* System-Dark-Mode ohne body.dark */
@media (prefers-color-scheme: dark) {
  .dashboard-election-guide-accordion .accordion-item {
    background: rgba(14, 116, 144, 0.18);
    border-color: rgba(103, 232, 249, 0.26);
    box-shadow: none;
  }

  .dashboard-election-guide-accordion__body {
    color: #e0f2fe;
  }

  .dashboard-election-guide-list li::marker {
    color: #38bdf8;
  }
}

.dashboard-security-accordion {
  margin: 1rem 1.5rem 1.25rem;
}

.dashboard-security-accordion .accordion-item {
  box-shadow: none;
  border-color: rgba(0, 178, 254, 0.24);
  background: rgba(0, 178, 254, 0.04);
}

.dashboard-security-accordion .accordion-header {
  padding: 1rem 1.15rem;
}

.dashboard-security-accordion .accordion-title {
  font-size: 1.05rem;
}

.dashboard-security-accordion__body {
  padding: 0 1.15rem 1.15rem;
}

.dashboard-security-accordion__body p {
  margin: 0 0 0.9rem;
}

.dashboard-security-list {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}

.dashboard-security-list li {
  line-height: 1.45;
}

.dashboard-security-list code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(1, 13, 110, 0.08);
}

.dashboard-security-note {
  font-size: 0.92rem;
}

@media (max-width: 768px) {
  .dashboard-election-guide-accordion {
    margin-bottom: 1rem;
  }

  .dashboard-election-guide-accordion .accordion-header,
  .dashboard-election-guide-accordion__body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dashboard-security-accordion {
    margin: 1rem;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .table--dashboard-elections {
    font-size: 0.82rem;
  }

  .table--dashboard-elections th,
  .table--dashboard-elections td {
    padding: 0.32rem 0.45rem;
  }

  .table--dashboard-elections th:nth-child(1),
  .table--dashboard-elections td:nth-child(1) {
    width: 42%;
  }

  .table--dashboard-elections th:nth-child(2),
  .table--dashboard-elections td:nth-child(2) {
    width: 10%;
  }

  .table--dashboard-elections th:nth-child(3),
  .table--dashboard-elections td:nth-child(3) {
    width: 31%;
  }

  .table--dashboard-elections th:nth-child(4),
  .table--dashboard-elections td:nth-child(4) {
    width: 17%;
  }

  .table--dashboard-elections .form-select {
    height: 34px;
    max-width: 9.75rem;
    font-size: 0.82rem;
  }

  .table--dashboard-elections .js-abi-select {
    max-width: 7.5rem;
  }
}

@media (max-width: 768px) {
  .table-wrapper--dashboard-elections {
    overflow: visible;
  }

  .table--dashboard-elections th,
  .table--dashboard-elections td,
  .table--dashboard-elections th:nth-child(1),
  .table--dashboard-elections td:nth-child(1),
  .table--dashboard-elections th:nth-child(2),
  .table--dashboard-elections td:nth-child(2),
  .table--dashboard-elections th:nth-child(3),
  .table--dashboard-elections td:nth-child(3),
  .table--dashboard-elections th:nth-child(4),
  .table--dashboard-elections td:nth-child(4) {
    width: 100%;
  }
}

/* Schüler-Dashboard: aktuelle Umwahlwünsche ohne horizontales Scrollen darstellen */
.table-wrapper--dashboard-changes {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
}

.table--dashboard-changes {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.table--dashboard-changes th,
.table--dashboard-changes td {
  white-space: normal;
  overflow-wrap: break-word;
}

.table--dashboard-changes th:nth-child(1),
.table--dashboard-changes td:nth-child(1) {
  width: 7%;
}

.table--dashboard-changes th:nth-child(2),
.table--dashboard-changes td:nth-child(2) {
  width: 46%;
  overflow-wrap: anywhere;
}

.table--dashboard-changes th:nth-child(3),
.table--dashboard-changes td:nth-child(3) {
  width: 15%;
}

.table--dashboard-changes th:nth-child(4),
.table--dashboard-changes td:nth-child(4) {
  width: 15%;
}

.table--dashboard-changes th:nth-child(5),
.table--dashboard-changes td:nth-child(5) {
  width: 17%;
}

.table--dashboard-changes .badge-status {
  white-space: normal;
}

.dashboard-change-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.dashboard-change-actions-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid var(--pg-magenta);
  color: var(--pg-magenta);
}

.btn-outline-danger:hover {
  background: var(--pg-magenta);
  color: #ffffff;
}

/* Consultation appointments overview */
.consultation-appointments-accordion .accordion-body {
  overflow: visible;
}

.consultation-past-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Äußere Jahrgangsgruppen wieder mit normalem Abstand */
.consultation-year-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.consultation-year-accordion .accordion-subsection {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.consultation-year-accordion .accordion-subsection + .accordion-subsection {
  margin-top: 0.5rem;
}

.consultation-year-accordion .accordion-subsection-summary {
  line-height: 1.2;
}

.consultation-year-group-body {
  padding-top: 0.45rem;
}

.consultation-year-group {
  background: #f8fbff;
}

.consultation-appointment-count,
.consultation-appointment-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.consultation-appointment-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.consultation-appointment {
  background: #ffffff;
}

.consultation-day-group {
  background: #ffffff;
}

/* Beratungstermine: Tabelle kompakt und nicht zu breit */
.consultation-appointments-table-wrapper.table-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

table.consultation-appointments-table {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
}

table.consultation-appointments-table th,
table.consultation-appointments-table td {
  padding: 0.28rem 0.35rem !important;
  line-height: 1.15 !important;
  height: auto !important;
  min-height: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal;
  vertical-align: middle !important;
}

/* 1. Checkbox-Spalte: wirklich minimal */
table.consultation-appointments-table th:nth-child(1),
table.consultation-appointments-table td:nth-child(1) {
  width: 1.6rem !important;
  min-width: 1.6rem !important;
  max-width: 1.6rem !important;
  padding-left: 0.12rem !important;
  padding-right: 0.12rem !important;
  text-align: center;
}

/* Zeit */
table.consultation-appointments-table th:nth-child(2),
table.consultation-appointments-table td:nth-child(2) {
  width: 9%;
}

/* Status */
table.consultation-appointments-table th:nth-child(3),
table.consultation-appointments-table td:nth-child(3) {
  width: 8%;
}

/* Gebucht von: darf umbrechen */
table.consultation-appointments-table th:nth-child(4),
table.consultation-appointments-table td:nth-child(4) {
  width: 18%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Thema: darf umbrechen */
table.consultation-appointments-table th:nth-child(5),
table.consultation-appointments-table td:nth-child(5) {
  width: 20%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Hinweis */
table.consultation-appointments-table th:nth-child(6),
table.consultation-appointments-table td:nth-child(6) {
  width: 18%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Aktionen */
table.consultation-appointments-table th:nth-child(7),
table.consultation-appointments-table td:nth-child(7) {
  width: 26%;
}

.consultation-appointment-select-column,
.consultation-appointment-select-cell {
  width: 1.6rem !important;
  min-width: 1.6rem !important;
  max-width: 1.6rem !important;
  padding-left: 0.12rem !important;
  padding-right: 0.12rem !important;
  text-align: center;
}

.consultation-appointment-select-cell input,
.consultation-appointment-select-column input {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 auto;
  cursor: pointer;
}

.consultation-appointments-table .badge-status {
  padding: 0.1rem 0.35rem !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.consultation-appointment-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.consultation-appointment-actions form {
  margin: 0;
}

.consultation-appointment-actions .btn {
  padding: 0.22rem 0.42rem !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.consultation-admin-cancel-booking-button {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

.consultation-admin-cancel-booking-button:hover {
  background: #d97706;
  border-color: #d97706;
}

.btn-delete-icon {
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;

  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: none;

  background: var(--pg-magenta);
  color: #ffffff;

  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;

  box-shadow: none !important;
}

.btn-delete-icon:hover {
  background: #b8003f;
  box-shadow: none !important;
  transform: none !important;
}

/* Beratungstermine: Filter nicht vollbreit */
.consultation-appointments-accordion form[action="/admin/beratungstermine"].form-row {
  display: flex !important;
  align-items: end !important;
  gap: 1rem;
  flex-wrap: wrap;
}

.consultation-appointments-accordion form[action="/admin/beratungstermine"] .form-group {
  width: min(100%, 15rem);
  flex: 0 1 15rem;
}

.consultation-appointments-accordion form[action="/admin/beratungstermine"] .form-select {
  width: 100%;
}

.consultation-appointments-accordion form[action="/admin/beratungstermine"] .form-actions {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .consultation-appointments-accordion form[action="/admin/beratungstermine"] .form-group,
  .consultation-appointments-accordion form[action="/admin/beratungstermine"] .form-actions,
  .consultation-appointments-accordion form[action="/admin/beratungstermine"] .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

.consultation-bulk-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color, #d8e3f0);
  border-radius: 0.9rem;
  background: #f8fbff;
}

.consultation-bulk-toolbar[hidden] {
  display: none;
}

.consultation-bulk-toolbar__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.consultation-bulk-toolbar__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  align-items: end;
}

.consultation-bulk-toolbar__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}

.consultation-appointment-select-column,
.consultation-appointment-select-cell {
  width: 1.75rem !important;
  min-width: 1.75rem;
  max-width: 1.75rem;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
  text-align: center;
}

.consultation-appointment-select-cell input,
.consultation-appointment-select-column input {
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0 auto;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .consultation-bulk-toolbar {
    grid-template-columns: 1fr;
  }

  .consultation-bulk-toolbar__summary {
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .consultation-bulk-toolbar__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .consultation-bulk-toolbar__controls {
    justify-content: stretch;
  }

  .consultation-bulk-toolbar__actions .btn {
    width: 100%;
  }
}

/* Student consultation booking */
.consultation-booking-card {
  overflow: visible;
}

.consultation-booking-card--active {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 0, 75, 0.16);
}

.consultation-booking-card--active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.35rem;
  background: linear-gradient(180deg, var(--pg-magenta), var(--pg-cyan));
}

.consultation-booking-active-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

.consultation-booking-active-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 1rem;
  background: rgba(212, 0, 75, 0.1);
  color: var(--pg-magenta);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(212, 0, 75, 0.12);
}

.consultation-booking-active-eyebrow {
  margin: 0 0 0.2rem;
  color: var(--pg-magenta);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.consultation-booking-details {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0.75rem;
  margin: 0;
}

.consultation-booking-details--active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consultation-booking-details div {
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(1, 13, 110, 0.1);
  border-radius: 0.8rem;
  background: #f8fbff;
}

.consultation-booking-details--active div {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(212, 0, 75, 0.14);
  box-shadow: 0 8px 22px rgba(1, 13, 110, 0.07);
}

.consultation-booking-detail--topic,
.consultation-booking-detail--note {
  grid-column: 1 / -1;
}

.consultation-booking-details dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.consultation-booking-details dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.consultation-booking-cancel-form {
  margin-top: 1rem;
}

.consultation-booking-cancel-button {
  box-shadow: 0 8px 18px rgba(212, 0, 75, 0.24);
}

.consultation-booking-cancel-button:hover {
  background: #b8003f;
  box-shadow: 0 10px 24px rgba(212, 0, 75, 0.3);
}

.consultation-booking-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.consultation-booking-day {
  border: 1px solid rgba(1, 13, 110, 0.1);
  border-radius: 0.9rem;
  padding: 0.65rem 0.8rem;
  background: #f8fbff;
}

.consultation-booking-day-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  color: var(--pg-blue);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.consultation-booking-day-title::marker {
  color: var(--pg-blue);
}

.consultation-booking-day-count {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.consultation-booking-slots {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.consultation-booking-slot {
  display: grid;
  grid-template-columns: minmax(8rem, 0.55fr) minmax(16rem, 1.8fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border-radius: 0.8rem;
  background: #ffffff;
}

.consultation-booking-slot-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text-muted);
}

.consultation-booking-slot-main strong {
  color: var(--pg-blue);
  font-size: 1rem;
}

.consultation-booking-form {
  display: grid;
  gap: 0.45rem;
}

.consultation-booking-form .form-label {
  margin-bottom: 0;
}

.consultation-booking-form .btn {
  justify-self: start;
}

@media (max-width: 760px) {
  .consultation-booking-day {
    padding: 1rem;
    border-radius: 1rem;
  }

  .consultation-booking-card--active {
    padding: 1.35rem;
    border-radius: 1.35rem;
  }

  .consultation-booking-active-header {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .consultation-booking-active-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
    font-size: 1.1rem;
  }

  .consultation-booking-card--active .card-title {
    font-size: 1.45rem;
    line-height: 1.12;
  }

  .consultation-booking-card--active .card-subtitle {
    font-size: 1rem;
    line-height: 1.35;
  }

  .consultation-booking-details {
    grid-template-columns: 1fr;
  }

  .consultation-booking-details--active {
    gap: 0.65rem;
  }

  .consultation-booking-details--active div {
    display: grid;
    grid-template-columns: minmax(4.6rem, auto) 1fr;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem;
  }

  .consultation-booking-details--active dt {
    margin-bottom: 0;
  }

  .consultation-booking-details--active dd {
    text-align: right;
    overflow-wrap: anywhere;
  }

  .consultation-booking-detail--topic,
  .consultation-booking-detail--note {
    grid-column: auto;
  }

  .consultation-booking-detail--topic dd,
  .consultation-booking-detail--note dd {
    text-align: left;
  }

  .consultation-booking-cancel-form {
    margin-top: 1.1rem;
  }

  .consultation-booking-cancel-button {
    width: 100%;
    padding-block: 0.75rem;
    font-size: 1rem;
  }

  .consultation-booking-day-title {
    font-size: 1.1rem;
  }

  .consultation-booking-slots {
    gap: 0.85rem;
    margin-top: 0.85rem;
  }

  .consultation-booking-slot {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
  }

  .consultation-booking-slot-main {
    gap: 0.35rem;
  }

  .consultation-booking-slot-main strong {
    font-size: 1.05rem;
  }

  .consultation-booking-form {
    gap: 0.55rem;
  }

  .consultation-booking-form .btn {
    width: 100%;
  }
}

/* Schüler-Dashboard: Umwahl-PDFs */
.dashboard-documents-card {
  scroll-margin-top: 1rem;
  margin-top: 1.6rem;
}

.dashboard-documents-empty {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
}

.table-wrapper--dashboard-documents {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
}

.table--dashboard-documents {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.table--dashboard-documents th,
.table--dashboard-documents td {
  white-space: normal;
  overflow-wrap: break-word;
}

.table--dashboard-documents th:nth-child(1),
.table--dashboard-documents td:nth-child(1) {
  width: 18%;
}

.table--dashboard-documents th:nth-child(2),
.table--dashboard-documents td:nth-child(2) {
  width: 18%;
}

.table--dashboard-documents th:nth-child(3),
.table--dashboard-documents td:nth-child(3) {
  width: 14%;
}

.table--dashboard-documents th:nth-child(4),
.table--dashboard-documents td:nth-child(4) {
  width: 30%;
  overflow-wrap: anywhere;
}

.table--dashboard-documents th:nth-child(5),
.table--dashboard-documents td:nth-child(5) {
  width: 20%;
}

@media (max-width: 768px) {
  .table-wrapper--dashboard-documents {
    max-height: none !important;
    overflow: visible !important;
  }

  .table--dashboard-documents {
    display: block;
    min-width: 0;
    width: 100%;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .table--dashboard-documents thead {
    display: none;
  }

  .table--dashboard-documents tbody,
  .table--dashboard-documents tr {
    display: block;
    width: 100%;
  }

  .table--dashboard-documents tr {
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border: 0;
    box-shadow: none !important;
    background: #ffffff;
    color: var(--text);
  }

  .table--dashboard-documents td {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border: none;
    background: transparent !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
    width: 100% !important;
  }

  .table--dashboard-documents td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .table--dashboard-documents td > * {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 640px) {
  .consultation-year-accordion {
    gap: 0.65rem;
  }

  .consultation-year-accordion .accordion-subsection {
    border-radius: 1rem;
    padding: 0.75rem;
  }

  .consultation-year-group > .accordion-subsection-summary,
  .consultation-day-summary {
    align-items: flex-start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .consultation-year-group > .accordion-subsection-summary .section-title,
  .consultation-day-summary .section-title {
    font-size: 1rem;
    line-height: 1.15;
  }

  .consultation-appointment-count {
    color: var(--pg-blue);
    font-size: 0.82rem;
    justify-content: flex-end;
    line-height: 1.15;
    text-align: right;
  }

  .consultation-year-group-body {
    padding-top: 0.6rem;
  }

  .consultation-day-body {
    padding-top: 0.55rem;
  }

  .consultation-appointments-table-wrapper.table-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  table.consultation-appointments-table {
    border-collapse: separate !important;
    display: block;
    font-size: 0.84rem !important;
  }

  table.consultation-appointments-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.consultation-appointments-table tbody {
    display: grid;
    gap: 0.5rem;
  }

  table.consultation-appointments-table tr.consultation-appointment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.65rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(1, 13, 110, 0.1);
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: 0 0.45rem 1rem rgba(1, 13, 110, 0.05);
  }

  table.consultation-appointments-table tr.consultation-appointment--past {
    background: #f8f8fb;
    opacity: 0.86;
  }

  table.consultation-appointments-table td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  table.consultation-appointments-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  table.consultation-appointments-table .consultation-appointment-time {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15 !important;
  }

  table.consultation-appointments-table .consultation-appointment-status {
    justify-self: end;
    text-align: right;
  }

  table.consultation-appointments-table .consultation-appointment-summary-meta {
    justify-content: flex-end;
  }

  table.consultation-appointments-table .consultation-appointment-booked-by,
  table.consultation-appointments-table .consultation-appointment-topic,
  table.consultation-appointments-table .consultation-appointment-note {
    grid-column: 1 / -1;
    color: var(--text-main);
    font-size: 0.8rem;
    line-height: 1.25 !important;
  }

  table.consultation-appointments-table .consultation-appointment-cell--empty {
    display: none;
  }

  table.consultation-appointments-table .consultation-appointment-action-cell {
    grid-column: 1 / -1;
    padding-top: 0.2rem !important;
  }

  table.consultation-appointments-table .consultation-appointment-action-cell::before {
    display: none;
  }

  .consultation-appointment-actions {
    justify-content: flex-end;
    gap: 0.45rem !important;
  }

  .consultation-appointment-actions .btn {
    padding: 0.38rem 0.7rem !important;
    font-size: 0.72rem !important;
  }

  .consultation-appointment-actions .btn-delete-icon {
    width: 1.7rem;
    height: 1.7rem;
    min-width: 1.7rem;
  }
}

.consultation-admin-booking-panel {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0, 120, 200, 0.16);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.consultation-admin-booking-panel__content {
  max-width: 42rem;
}

.consultation-admin-booking-panel .form-input {
  width: min(100%, 34rem);
}

.consultation-admin-assign-form {
  margin: 0;
}

.consultation-admin-assign-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none !important;
}

/* =========================================================
   Beratungstermine – iPad / Tablet Fix
   Verhindert abgeschnittene Aktionen und macht Termine zu Cards
   ========================================================= */

@media (max-width: 1180px) {
  .consultation-appointments-table-wrapper.table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  table.consultation-appointments-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
  }

  table.consultation-appointments-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  table.consultation-appointments-table tbody {
    display: grid !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  table.consultation-appointments-table tr.consultation-appointment-row {
    display: grid !important;
    grid-template-columns: 2.2rem minmax(7rem, 0.7fr) minmax(4.8rem, 0.45fr) minmax(14rem, 1fr);
    grid-template-areas:
      "select time status actions"
      "booked booked topic topic"
      "note note note note";
    gap: 0.45rem 0.8rem !important;
    align-items: center !important;

    width: 100% !important;
    padding: 0.75rem 0.85rem !important;
    border: 1px solid rgba(1, 13, 110, 0.12) !important;
    border-radius: 0.95rem !important;
    background: #ffffff !important;
    box-shadow: 0 0.45rem 1rem rgba(1, 13, 110, 0.05) !important;
  }

  table.consultation-appointments-table tr.consultation-appointment--past {
    background: #f8f8fb !important;
    opacity: 0.86;
  }

  table.consultation-appointments-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    vertical-align: initial !important;
  }

  table.consultation-appointments-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.12rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  table.consultation-appointments-table td:nth-child(1),
  table.consultation-appointments-table .consultation-appointment-select-cell {
    grid-area: select;
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    max-width: 2.2rem !important;
    align-self: center;
    justify-self: center;
  }

  table.consultation-appointments-table td:nth-child(2),
  table.consultation-appointments-table .consultation-appointment-time {
    grid-area: time;
    color: var(--text);
    font-size: 1rem !important;
    font-weight: 800;
    white-space: nowrap !important;
  }

  table.consultation-appointments-table td:nth-child(3),
  table.consultation-appointments-table .consultation-appointment-status {
    grid-area: status;
    justify-self: start;
    white-space: nowrap !important;
  }

  table.consultation-appointments-table td:nth-child(4),
  table.consultation-appointments-table .consultation-appointment-booked-by {
    grid-area: booked;
  }

  table.consultation-appointments-table td:nth-child(5),
  table.consultation-appointments-table .consultation-appointment-topic {
    grid-area: topic;
  }

  table.consultation-appointments-table td:nth-child(6),
  table.consultation-appointments-table .consultation-appointment-note {
    grid-area: note;
  }

  table.consultation-appointments-table td:nth-child(7),
  table.consultation-appointments-table .consultation-appointment-action-cell {
    grid-area: actions;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  table.consultation-appointments-table td:nth-child(1)::before,
  table.consultation-appointments-table td:nth-child(2)::before,
  table.consultation-appointments-table td:nth-child(3)::before,
  table.consultation-appointments-table td:nth-child(7)::before,
  table.consultation-appointments-table .consultation-appointment-select-cell::before,
  table.consultation-appointments-table .consultation-appointment-time::before,
  table.consultation-appointments-table .consultation-appointment-status::before,
  table.consultation-appointments-table .consultation-appointment-action-cell::before {
    display: none !important;
  }

  table.consultation-appointments-table .consultation-appointment-cell--empty {
    display: none !important;
  }

  .consultation-appointment-select-cell input,
  .consultation-appointment-select-column input {
    width: 1.05rem !important;
    height: 1.05rem !important;
    margin: 0 auto !important;
  }

  .consultation-appointments-table .badge-status {
    padding: 0.18rem 0.45rem !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .consultation-appointment-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .consultation-appointment-actions form {
    margin: 0 !important;
  }

  .consultation-appointment-actions .btn,
  table.consultation-appointments-table .consultation-appointment-action-cell .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0.38rem 0.72rem !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .consultation-appointment-actions .btn-delete-icon,
  table.consultation-appointments-table .consultation-appointment-action-cell .btn-delete-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }
}

/* Hochkant / kleinere Tablets und Smartphones */
@media (max-width: 760px) {
  table.consultation-appointments-table tr.consultation-appointment-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "select time status"
      "booked booked booked"
      "topic topic topic"
      "note note note"
      "actions actions actions";
    gap: 0.45rem 0.65rem !important;
    padding: 0.75rem !important;
  }

  table.consultation-appointments-table td:nth-child(7),
  table.consultation-appointments-table .consultation-appointment-action-cell {
    justify-content: stretch !important;
    padding-top: 0.15rem !important;
  }

  .consultation-appointment-actions {
    justify-content: flex-start !important;
  }

  .consultation-appointment-actions .btn,
  table.consultation-appointments-table .consultation-appointment-action-cell .btn {
    flex: 1 1 auto !important;
  }

  .consultation-appointment-actions .btn-delete-icon,
  table.consultation-appointments-table .consultation-appointment-action-cell .btn-delete-icon {
    flex: 0 0 1.85rem !important;
  }
}

/* Sehr schmale Smartphones */
@media (max-width: 520px) {
  table.consultation-appointments-table tr.consultation-appointment-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }

  .consultation-appointment-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.45rem !important;
  }

  .consultation-appointment-actions .btn,
  table.consultation-appointments-table .consultation-appointment-action-cell .btn {
    width: 100% !important;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.76rem !important;
  }

  .consultation-appointment-actions .btn-delete-icon,
  table.consultation-appointments-table .consultation-appointment-action-cell .btn-delete-icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 1.9rem !important;
  }
}

/* Dark Mode für die neuen Termin-Cards */
body.dark table.consultation-appointments-table tr.consultation-appointment-row {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35) !important;
}

body.dark table.consultation-appointments-table tr.consultation-appointment--past {
  background: rgba(30, 41, 59, 0.75) !important;
}

body.dark table.consultation-appointments-table td::before {
  color: #94a3b8;
}

body.dark table.consultation-appointments-table td:nth-child(2),
body.dark table.consultation-appointments-table .consultation-appointment-time {
  color: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  table.consultation-appointments-table tr.consultation-appointment-row {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35) !important;
  }

  table.consultation-appointments-table tr.consultation-appointment--past {
    background: rgba(30, 41, 59, 0.75) !important;
  }

  table.consultation-appointments-table td::before {
    color: #94a3b8;
  }

  table.consultation-appointments-table td:nth-child(2),
  table.consultation-appointments-table .consultation-appointment-time {
    color: #e2e8f0;
  }
}

/* =========================================================
   iPad Web-App / PWA Fix für Beratungstermine
   Muss ganz am Ende der CSS-Datei stehen
   ========================================================= */

@media (max-width: 1400px) {
  html.is-standalone-app .consultation-appointments-table-wrapper.table-wrapper,
  body.is-standalone-app .consultation-appointments-table-wrapper.table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.is-standalone-app table.consultation-appointments-table,
  body.is-standalone-app table.consultation-appointments-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  html.is-standalone-app table.consultation-appointments-table thead,
  body.is-standalone-app table.consultation-appointments-table thead {
    display: none !important;
  }

  html.is-standalone-app table.consultation-appointments-table tbody,
  body.is-standalone-app table.consultation-appointments-table tbody {
    display: grid !important;
    width: 100% !important;
    gap: 0.65rem !important;
  }

  html.is-standalone-app table.consultation-appointments-table tr.consultation-appointment-row,
  body.is-standalone-app table.consultation-appointments-table tr.consultation-appointment-row {
    display: grid !important;
    grid-template-columns: 2.2rem minmax(7rem, 0.75fr) minmax(5rem, 0.45fr) minmax(13rem, 1fr);
    grid-template-areas:
      "select time status actions"
      "booked booked topic topic"
      "note note note note";
    gap: 0.45rem 0.8rem !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 0.85rem !important;
    border: 1px solid rgba(1, 13, 110, 0.12) !important;
    border-radius: 0.95rem !important;
    background: #ffffff !important;
    box-shadow: 0 0.45rem 1rem rgba(1, 13, 110, 0.05) !important;
  }

  html.is-standalone-app table.consultation-appointments-table td,
  body.is-standalone-app table.consultation-appointments-table td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
  }

  html.is-standalone-app table.consultation-appointments-table td::before,
  body.is-standalone-app table.consultation-appointments-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.12rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(1),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(1),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-select-cell,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-select-cell {
    grid-area: select;
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    max-width: 2.2rem !important;
    justify-self: center;
    align-self: center;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(2),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(2),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-time,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-time {
    grid-area: time;
    font-size: 1rem !important;
    font-weight: 800;
    white-space: nowrap !important;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(3),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(3),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-status,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-status {
    grid-area: status;
    justify-self: start;
    white-space: nowrap !important;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(4),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(4),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-booked-by,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-booked-by {
    grid-area: booked;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(5),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(5),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-topic,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-topic {
    grid-area: topic;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(6),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(6),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-note,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-note {
    grid-area: note;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(7),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(7),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-action-cell,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-action-cell {
    grid-area: actions;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(1)::before,
  body.is-standalone-app table.consultation-appointments-table td:nth-child(1)::before,
  html.is-standalone-app table.consultation-appointments-table td:nth-child(2)::before,
  body.is-standalone-app table.consultation-appointments-table td:nth-child(2)::before,
  html.is-standalone-app table.consultation-appointments-table td:nth-child(3)::before,
  body.is-standalone-app table.consultation-appointments-table td:nth-child(3)::before,
  html.is-standalone-app table.consultation-appointments-table td:nth-child(7)::before,
  body.is-standalone-app table.consultation-appointments-table td:nth-child(7)::before {
    display: none !important;
  }

  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-cell--empty,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-cell--empty {
    display: none !important;
  }

  html.is-standalone-app .consultation-appointment-actions,
  body.is-standalone-app .consultation-appointment-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.is-standalone-app .consultation-appointment-actions form,
  body.is-standalone-app .consultation-appointment-actions form {
    margin: 0 !important;
  }

  html.is-standalone-app .consultation-appointment-actions .btn,
  body.is-standalone-app .consultation-appointment-actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0.38rem 0.72rem !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html.is-standalone-app .consultation-appointment-actions .btn-delete-icon,
  body.is-standalone-app .consultation-appointment-actions .btn-delete-icon {
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }
}

/* Schmalere iPads / Hochformat in der Web-App */
@media (max-width: 900px) {
  html.is-standalone-app table.consultation-appointments-table tr.consultation-appointment-row,
  body.is-standalone-app table.consultation-appointments-table tr.consultation-appointment-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "select time status"
      "booked booked booked"
      "topic topic topic"
      "note note note"
      "actions actions actions";
  }

  html.is-standalone-app table.consultation-appointments-table td:nth-child(7),
  body.is-standalone-app table.consultation-appointments-table td:nth-child(7),
  html.is-standalone-app table.consultation-appointments-table .consultation-appointment-action-cell,
  body.is-standalone-app table.consultation-appointments-table .consultation-appointment-action-cell {
    justify-content: stretch !important;
  }

  html.is-standalone-app .consultation-appointment-actions,
  body.is-standalone-app .consultation-appointment-actions {
    justify-content: flex-start !important;
  }

  html.is-standalone-app .consultation-appointment-actions .btn,
  body.is-standalone-app .consultation-appointment-actions .btn {
    flex: 1 1 auto !important;
  }

  html.is-standalone-app .consultation-appointment-actions .btn-delete-icon,
  body.is-standalone-app .consultation-appointment-actions .btn-delete-icon {
    flex: 0 0 1.85rem !important;
  }
}

/* Dark Mode */
body.dark.is-standalone-app table.consultation-appointments-table tr.consultation-appointment-row,
html.is-standalone-app body.dark table.consultation-appointments-table tr.consultation-appointment-row {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35) !important;
}

body.dark.is-standalone-app table.consultation-appointments-table td::before,
html.is-standalone-app body.dark table.consultation-appointments-table td::before {
  color: #94a3b8;
}

/* Dashboard Kurswahlen (Kachelansicht): immer schwarze Schrift auf hellen Fachfarben */
@media (max-width: 768px) {
  .table--dashboard-elections tr,
  .table--dashboard-elections td,
  .table--dashboard-elections td::before,
  .table--dashboard-elections .form-label,
  .table--dashboard-elections .text-muted,
  .table--dashboard-elections td[data-label="Abifach"] {
    color: #000000 !important;
  }

  .table--dashboard-elections td > * {
    color: #000000 !important;
  }

  .table--dashboard-elections .form-select {
    color: #000000 !important;
  }

  .table--dashboard-elections .form-select option {
    color: #000000 !important;
    background: #ffffff !important;
  }
}

/* Dunkle Kurswahl-Controls müssen auch nach den mobilen Kachelregeln lesbar bleiben. */
body.dark .table--dashboard-elections select,
body.dark .table--dashboard-elections .form-select,
body.dark .table--dashboard-elections option {
  color: #ffffff !important;
}

body.dark .table--dashboard-elections select,
body.dark .table--dashboard-elections .form-select {
  background: #56565f !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.dark .table--dashboard-elections option {
  background: #56565f !important;
}

@media (prefers-color-scheme: dark) {
  .table--dashboard-elections select,
  .table--dashboard-elections .form-select,
  .table--dashboard-elections option {
    color: #ffffff !important;
  }

  .table--dashboard-elections select,
  .table--dashboard-elections .form-select {
    background: #56565f !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .table--dashboard-elections option {
    background: #56565f !important;
  }
}

/* =========================================================
   Consultation Booking – vollständiger Dark Mode
   ========================================================= */

/* manueller Dark Mode */
body.dark .consultation-booking-card {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(51, 65, 85, 0.7);
  color: #e2e8f0;
}

body.dark .consultation-booking-card--active {
  border-color: rgba(212, 0, 75, 0.28);
}

body.dark .consultation-booking-active-icon {
  background: rgba(212, 0, 75, 0.18);
  color: #f9a8d4;
  box-shadow: inset 0 0 0 1px rgba(212, 0, 75, 0.22);
}

body.dark .consultation-booking-active-eyebrow {
  color: #f9a8d4;
}

body.dark .consultation-booking-details div,
body.dark .consultation-booking-details--active div {
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: none;
}

body.dark .consultation-booking-details dt {
  color: #94a3b8;
}

body.dark .consultation-booking-details dd {
  color: #e2e8f0;
}

body.dark .consultation-booking-day {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(51, 65, 85, 0.7);
}

body.dark .consultation-booking-day-title {
  color: #e2e8f0;
}

body.dark .consultation-booking-day-count {
  color: #94a3b8;
}

body.dark .consultation-booking-slot {
  background: rgba(30, 41, 59, 0.88);
  border: 1px solid rgba(51, 65, 85, 0.65);
}

body.dark .consultation-booking-slot-main {
  color: #94a3b8;
}

body.dark .consultation-booking-slot-main strong {
  color: #e2e8f0;
}

body.dark .consultation-booking-form .form-input,
body.dark .consultation-booking-form .form-textarea,
body.dark .consultation-booking-form textarea {
  background: rgba(15, 23, 42, 0.92);
  border-color: #475569;
  color: #e2e8f0;
}

body.dark .consultation-booking-form .form-input::placeholder,
body.dark .consultation-booking-form .form-textarea::placeholder,
body.dark .consultation-booking-form textarea::placeholder {
  color: #94a3b8;
}

body.dark .consultation-booking-form .form-label {
  color: #cbd5e1;
}

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
  .consultation-booking-card {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
  }

  .consultation-booking-card--active {
    border-color: rgba(212, 0, 75, 0.28);
  }

  .consultation-booking-active-icon {
    background: rgba(212, 0, 75, 0.18);
    color: #f9a8d4;
  }

  .consultation-booking-active-eyebrow {
    color: #f9a8d4;
  }

  .consultation-booking-details div,
  .consultation-booking-details--active div {
    background: rgba(30, 41, 59, 0.88);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: none;
  }

  .consultation-booking-details dt {
    color: #94a3b8;
  }

  .consultation-booking-details dd {
    color: #e2e8f0;
  }

  .consultation-booking-day {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(51, 65, 85, 0.7);
  }

  .consultation-booking-day-title {
    color: #e2e8f0;
  }

  .consultation-booking-day-count {
    color: #94a3b8;
  }

  .consultation-booking-slot {
    background: rgba(30, 41, 59, 0.88);
    border: 1px solid rgba(51, 65, 85, 0.65);
  }

  .consultation-booking-slot-main {
    color: #94a3b8;
  }

  .consultation-booking-slot-main strong {
    color: #e2e8f0;
  }

  .consultation-booking-form .form-input,
  .consultation-booking-form .form-textarea,
  .consultation-booking-form textarea {
    background: rgba(15, 23, 42, 0.92);
    border-color: #475569;
    color: #e2e8f0;
  }

  .consultation-booking-form .form-input::placeholder,
  .consultation-booking-form .form-textarea::placeholder,
  .consultation-booking-form textarea::placeholder {
    color: #94a3b8;
  }

  .consultation-booking-form .form-label {
    color: #cbd5e1;
  }
}
/* =========================================================
   Consultation Admin – vollständiger Dark Mode
   ========================================================= */

/* manueller Dark Mode */
body.dark .consultation-appointments-accordion,
body.dark .consultation-year-group,
body.dark .consultation-day-group,
body.dark .consultation-appointment,
body.dark .consultation-admin-booking-panel {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(51, 65, 85, 0.7);
  color: #e2e8f0;
}

body.dark .consultation-admin-booking-panel {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.92) 100%);
}

body.dark .consultation-year-group > .accordion-subsection-summary,
body.dark .consultation-day-summary,
body.dark .consultation-appointment-count,
body.dark .consultation-appointment-summary-meta {
  color: #cbd5e1;
}

body.dark .consultation-year-group > .accordion-subsection-summary .section-title,
body.dark .consultation-day-summary .section-title {
  color: #e2e8f0;
}

body.dark .consultation-appointments-table-wrapper.table-wrapper {
  background: transparent;
  border-color: rgba(51, 65, 85, 0.7);
}

body.dark table.consultation-appointments-table {
  color: #e2e8f0;
}

body.dark table.consultation-appointments-table th,
body.dark table.consultation-appointments-table td {
  color: #e2e8f0;
  border-bottom-color: rgba(51, 65, 85, 0.7);
}

body.dark table.consultation-appointments-table thead th {
  background: rgba(2, 6, 23, 0.95);
  color: #e2e8f0;
}

body.dark table.consultation-appointments-table tbody tr {
  background: rgba(15, 23, 42, 0.88);
}

body.dark table.consultation-appointments-table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.75);
}

body.dark table.consultation-appointments-table tbody tr:hover {
  background: rgba(0, 178, 254, 0.12);
}

body.dark table.consultation-appointments-table tr.consultation-appointment-row {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35) !important;
}

body.dark table.consultation-appointments-table tr.consultation-appointment--past {
  background: rgba(30, 41, 59, 0.75) !important;
}

body.dark table.consultation-appointments-table td::before {
  color: #94a3b8;
}

body.dark table.consultation-appointments-table .consultation-appointment-time,
body.dark table.consultation-appointments-table td:nth-child(2) {
  color: #e2e8f0;
}

body.dark .consultation-bulk-toolbar {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(51, 65, 85, 0.7);
  color: #e2e8f0;
}

body.dark .consultation-bulk-toolbar__summary,
body.dark .consultation-bulk-toolbar__summary strong,
body.dark .consultation-bulk-toolbar__summary span {
  color: #e2e8f0;
}

body.dark .consultation-bulk-toolbar .text-muted,
body.dark .consultation-bulk-toolbar__summary small {
  color: #94a3b8;
}

body.dark .consultation-admin-booking-panel .form-label {
  color: #cbd5e1;
}

body.dark .consultation-admin-booking-panel .form-input,
body.dark .consultation-admin-booking-panel .form-select,
body.dark .consultation-admin-booking-panel textarea {
  background: rgba(15, 23, 42, 0.92);
  border-color: #475569;
  color: #e2e8f0;
}

body.dark .consultation-admin-booking-panel .form-input::placeholder,
body.dark .consultation-admin-booking-panel textarea::placeholder {
  color: #94a3b8;
}

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
  .consultation-appointments-accordion,
  .consultation-year-group,
  .consultation-day-group,
  .consultation-appointment,
  .consultation-admin-booking-panel {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
  }

  .consultation-admin-booking-panel {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.92) 100%);
  }

  .consultation-year-group > .accordion-subsection-summary,
  .consultation-day-summary,
  .consultation-appointment-count,
  .consultation-appointment-summary-meta {
    color: #cbd5e1;
  }

  .consultation-year-group > .accordion-subsection-summary .section-title,
  .consultation-day-summary .section-title {
    color: #e2e8f0;
  }

  .consultation-appointments-table-wrapper.table-wrapper {
    background: transparent;
    border-color: rgba(51, 65, 85, 0.7);
  }

  table.consultation-appointments-table {
    color: #e2e8f0;
  }

  table.consultation-appointments-table th,
  table.consultation-appointments-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(51, 65, 85, 0.7);
  }

  table.consultation-appointments-table thead th {
    background: rgba(2, 6, 23, 0.95);
    color: #e2e8f0;
  }

  table.consultation-appointments-table tbody tr {
    background: rgba(15, 23, 42, 0.88);
  }

  table.consultation-appointments-table tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.75);
  }

  table.consultation-appointments-table tbody tr:hover {
    background: rgba(0, 178, 254, 0.12);
  }

  table.consultation-appointments-table tr.consultation-appointment-row {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.35) !important;
  }

  table.consultation-appointments-table tr.consultation-appointment--past {
    background: rgba(30, 41, 59, 0.75) !important;
  }

  table.consultation-appointments-table td::before {
    color: #94a3b8;
  }

  table.consultation-appointments-table .consultation-appointment-time,
  table.consultation-appointments-table td:nth-child(2) {
    color: #e2e8f0;
  }

  .consultation-bulk-toolbar {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
  }

  .consultation-bulk-toolbar__summary,
  .consultation-bulk-toolbar__summary strong,
  .consultation-bulk-toolbar__summary span {
    color: #e2e8f0;
  }

  .consultation-bulk-toolbar .text-muted,
  .consultation-bulk-toolbar__summary small {
    color: #94a3b8;
  }

  .consultation-admin-booking-panel .form-label {
    color: #cbd5e1;
  }

  .consultation-admin-booking-panel .form-input,
  .consultation-admin-booking-panel .form-select,
  .consultation-admin-booking-panel textarea {
    background: rgba(15, 23, 42, 0.92);
    border-color: #475569;
    color: #e2e8f0;
  }

  .consultation-admin-booking-panel .form-input::placeholder,
  .consultation-admin-booking-panel textarea::placeholder {
    color: #94a3b8;
  }
}
/* Admin Umwahlen: PDF-Auswahl je Schüler */
.link-button {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.link-button:hover,
.link-button:focus-visible {
  color: #00b2fe;
  text-decoration: underline;
}

.change-request-row {
  cursor: pointer;
}

.change-request-row.is-selected {
  background: rgba(0, 178, 254, 0.12);
  outline: 1px solid rgba(0, 178, 254, 0.45);
  outline-offset: -1px;
}

.student-pdf-panel {
  margin-top: 1.5rem;
}

.student-pdf-empty {
  padding: 1rem 1.25rem;
}

.table--student-pdfs code {
  display: inline-block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

/* =========================================================
   Kurswahlen (Admin) + Laufbahn (Schüler)
   Kopfzeile + letzte Zeile
   ========================================================= */

/* Heller Modus */
.table--kurswahlen thead th,
.table--laufbahn thead th,
.table--kurswahlen tbody tr:last-child td,
.table--laufbahn tbody tr:last-child td {
  background: #e2ecf9 !important;
}

/* Sticky erste Spalte konsistent */
.table--kurswahlen thead th:first-child,
.table--laufbahn thead th:first-child,
.table--kurswahlen tbody tr:last-child td:first-child,
.table--laufbahn tbody tr:last-child td:first-child {
  background: #e2ecf9 !important;
}

/* Manueller Dark Mode */
body.dark .table--kurswahlen thead th,
body.dark .table--laufbahn thead th,
body.dark .table--kurswahlen tbody tr:last-child td,
body.dark .table--laufbahn tbody tr:last-child td {
  background: rgba(30, 41, 59, 0.75) !important;
}

body.dark .table--kurswahlen thead th:first-child,
body.dark .table--laufbahn thead th:first-child,
body.dark .table--kurswahlen tbody tr:last-child td:first-child,
body.dark .table--laufbahn tbody tr:last-child td:first-child {
  background: rgba(30, 41, 59, 0.75) !important;
}

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
  .table--kurswahlen thead th,
  .table--laufbahn thead th,
  .table--kurswahlen tbody tr:last-child td,
  .table--laufbahn tbody tr:last-child td {
    background: rgba(30, 41, 59, 0.75) !important;
  }

  .table--kurswahlen thead th:first-child,
  .table--laufbahn thead th:first-child,
  .table--kurswahlen tbody tr:last-child td:first-child,
  .table--laufbahn tbody tr:last-child td:first-child {
    background: rgba(30, 41, 59, 0.75) !important;
  }
}

/* NRW-Sportschultreffen: simplified registration app */
.auth-hero,
.welcome-hero {
  display: flex;
  justify-content: center;
}

.auth-card,
.content-card {
  width: min(100%, 980px);
  background: var(--surface, #ffffff);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.auth-card {
  max-width: 720px;
}

.auth-card--wide {
  max-width: 1040px;
}

.narrow-card {
  max-width: 720px;
  margin: clamp(2rem, 5vw, 4rem) auto;
}

.eyebrow {
  margin: 0 0 .5rem;
  color: var(--accent, #1d4ed8);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-intro,
.lead {
  color: var(--muted, #475569);
  font-size: 1.05rem;
  line-height: 1.6;
}

.auth-choice-grid,
.event-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 1.5rem;
}

.signup-panel,
.event-tile,
.stat-card,
.info-box {
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 18px;
  background: rgba(37, 99, 235, .06);
  padding: 1.25rem;
}

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.stacked-form input,
.stacked-form select {
  width: 100%;
}

.form-hint {
  margin: -.35rem 0 .25rem;
  color: var(--muted, #64748b);
  font-size: .9rem;
}

.event-label {
  display: block;
  color: var(--muted, #64748b);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.page-header {
  align-items: start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.stat-card {
  min-width: 150px;
  text-align: center;
}

.stat-card strong {
  display: block;
  font-size: 2.5rem;
}

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

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

.data-table th,
.data-table td {
  border-bottom: 1px solid rgba(148, 163, 184, .35);
  padding: .85rem .75rem;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--muted, #475569);
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.top-nav-subtitle {
  font-size: .78rem;
  line-height: 1.25;
  opacity: .75;
}

@media (max-width: 760px) {
  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .top-nav {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }
}

/* Sportschultreffen login aligned with the Oberstufenapp login layout */
.registration-login-page {
  min-height: calc(100vh - 0.6rem);
}

.registration-login-card {
  max-width: 460px;
}

.registration-login-header {
  margin-bottom: 1.5rem;
}

.registration-login-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--pg-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.registration-login-date {
  margin: 0.45rem 0 0;
  color: var(--pg-blue);
  font-weight: 700;
}

.registration-login-intro {
  margin: 0.75rem auto 0;
  max-width: 22rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.registration-login-form {
  margin-bottom: 1.25rem;
}

.registration-login-info {
  margin-bottom: 1.25rem;
}

.registration-login-links {
  gap: 0.65rem;
}

.registration-login-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.15rem 0 0.25rem;
  background: #e2e8f0;
}

.registration-login-signup-text,
.registration-login-hint {
  margin: 0;
  text-align: center;
}

.registration-login-signup-text {
  color: var(--pg-blue);
  font-weight: 700;
}

.registration-login-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.login-card .registration-login-signup {
  width: 100%;
  margin-top: 0.35rem;
  border: 1px solid rgba(1, 13, 110, 0.14);
  background: #ffffff;
  color: var(--pg-blue);
  box-shadow: none;
}

.login-card .registration-login-signup:hover {
  border-color: rgba(0, 178, 254, 0.5);
  background: rgba(0, 178, 254, 0.08);
}

.login-card .alert-danger {
  background: rgba(212, 0, 75, 0.1);
  color: #b8003d;
  border: 1px solid rgba(212, 0, 75, 0.2);
}


body.dark .registration-login-date,
body.dark .registration-login-signup-text {
  color: var(--pg-offwhite);
}

body.dark .registration-login-intro,
body.dark .registration-login-hint {
  color: #94a3b8;
}

body.dark .registration-login-divider {
  background: rgba(148, 163, 184, 0.25);
}

body.dark .login-card .registration-login-signup {
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.8);
  color: var(--pg-offwhite);
}

body.dark .login-card .registration-login-signup:hover {
  border-color: rgba(0, 178, 254, 0.55);
  background: rgba(0, 178, 254, 0.14);
}

/* NRW-Sportschultreffen public registration and login page */
.registration-page {
  min-height: calc(100vh - 0.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1.25rem, 4vw, 3.5rem) 1rem;
  background: #ffffff;
}

.registration-card {
  width: min(100%, 980px);
  border-radius: 2rem;
  border: 1px solid rgba(1, 13, 110, 0.14);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(1, 13, 110, 0.14);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.registration-card--narrow {
  max-width: 760px;
}

.registration-header {
  text-align: center;
  margin-bottom: 1.7rem;
}

.registration-logo {
  display: block;
  width: min(100%, 340px);
  height: auto;
  margin: 0 auto 1.15rem;
}

.registration-logo--dark {
  display: none;
}

.registration-title {
  margin: 0;
  color: var(--pg-blue);
  font-size: clamp(1.75rem, 4.2vw, 2.55rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.registration-meta {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.registration-meta-line {
  display: block;
}

.registration-privacy-note {
  max-width: 38rem;
  margin: 0.85rem auto 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(0, 178, 254, 0.24);
  border-radius: 1rem;
  background: rgba(0, 178, 254, 0.08);
  color: #475569;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}

.registration-privacy-link {
  color: var(--pg-blue);
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.registration-privacy-link:hover {
  color: var(--pg-cyan);
}

.registration-privacy-footer {
  width: min(100%, 980px);
  margin: 0.9rem auto 0;
  text-align: center;
}

.registration-privacy-footer .registration-privacy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(1, 13, 110, 0.08);
  text-decoration-thickness: 0.08em;
}

.registration-section {
  padding-top: 1.35rem;
}

.registration-section + .registration-section {
  margin-top: 1.35rem;
  border-top: 1px solid #e2e8f0;
}

.registration-section-title {
  margin: 0 0 1rem;
  color: var(--pg-blue);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
}

.registration-section-title--small {
  font-size: 1rem;
  color: var(--text-muted);
}

.registration-section-intro {
  margin: -0.4rem 0 1rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.registration-form {
  margin: 0;
}

.registration-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1.25rem;
}

.registration-form-grid-full {
  grid-column: 1 / -1;
}

.registration-card .form-group {
  margin-bottom: 1rem;
}

.registration-form-grid .form-group {
  margin-bottom: 0;
}

.registration-card .form-label {
  display: block;
  margin-bottom: 0.4rem;
  color: #475569;
  font-size: 0.98rem;
  font-weight: 750;
}

.registration-card .form-input,
.registration-card .form-select {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  border: 1px solid #cbd5e1;
  background-color: #e9eef7;
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.registration-card .form-select {
  height: 52px;
  padding-right: 2.75rem;
}

.registration-card .form-input:focus,
.registration-card .form-select:focus {
  border-color: var(--pg-cyan);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.18);
}

.registration-form-hint {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.registration-field-hint {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
}

.registration-card .btn,
.registration-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 0.75rem;
  border-radius: 1rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.registration-card .btn-primary {
  background: var(--pg-cyan);
  color: #ffffff;
  box-shadow: none;
}

.registration-card .btn-primary:hover {
  background: #0195d6;
}

.registration-reset-link {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.65rem;
  border: 0;
  background: transparent;
  color: var(--pg-blue);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.registration-reset-link:hover {
  color: var(--pg-cyan);
  text-decoration: underline;
}

.registration-back-link {
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
  color: var(--pg-blue);
  font-weight: 800;
  text-decoration: none;
}

.registration-back-link:hover {
  color: var(--pg-cyan);
  text-decoration: underline;
}

.registration-info {
  margin-bottom: 1.25rem;
}

.registration-card .alert {
  border-radius: 1rem;
  margin-bottom: 1.25rem;
  padding: 0.95rem 1rem;
  font-weight: 700;
}

.registration-card .alert-danger,
.registration-card .alert.error {
  background: rgba(212, 0, 75, 0.1);
  color: #b8003d;
  border: 1px solid rgba(212, 0, 75, 0.2);
}

.registration-card .alert-success,
.registration-card .alert.success {
  background: rgba(0, 178, 254, 0.1);
  color: #006d94;
  border: 1px solid rgba(0, 178, 254, 0.2);
}

.password-field {
  position: relative;
}

.password-field .form-input {
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--pg-blue);
  background: rgba(1, 13, 110, 0.06);
}

body.dark .registration-page {
  background: #020617;
}

body.dark .registration-card {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

body.dark .registration-logo--light {
  display: none;
}

body.dark .registration-logo--dark {
  display: block;
}

body.dark .registration-title,
body.dark .registration-section-title {
  color: var(--pg-offwhite);
}

body.dark .registration-meta,
body.dark .registration-section-title--small,
body.dark .registration-section-intro,
body.dark .registration-form-hint,
body.dark .registration-card .form-label {
  color: #cbd5e1;
}

body.dark .registration-privacy-note {
  border-color: rgba(125, 211, 252, 0.28);
  background: rgba(14, 116, 144, 0.18);
  color: #cbd5e1;
}

body.dark .registration-privacy-footer .registration-privacy-link {
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

body.dark .registration-privacy-link {
  color: #7dd3fc;
}

body.dark .registration-privacy-link:hover {
  color: #bae6fd;
}

body.dark .registration-section + .registration-section {
  border-top-color: rgba(148, 163, 184, 0.25);
}

body.dark .registration-card .form-input,
body.dark .registration-card .form-select {
  background-color: rgba(15, 23, 42, 0.82);
  border-color: #475569;
  color: #e2e8f0;
}

body.dark .registration-card .form-input:focus,
body.dark .registration-card .form-select:focus {
  background-color: rgba(15, 23, 42, 0.95);
  border-color: var(--pg-cyan);
}

body.dark .registration-reset-link,
body.dark .registration-back-link {
  color: #7dd3fc;
}

@media (max-width: 760px) {
  .registration-page {
    align-items: flex-start;
    padding: 1rem;
  }

  .registration-card {
    border-radius: 1.5rem;
    padding: 1.25rem;
  }

  .registration-logo {
    width: min(100%, 240px);
  }

  .registration-form-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .registration-form-grid-full {
    grid-column: auto;
  }

  .registration-card .form-input,
  .registration-card .form-select {
    min-height: 50px;
  }

  .registration-card .btn,
  .registration-submit {
    min-height: 52px;
  }
}

/* ==========================================================================
   14. Sportschultreffen · 60 %-Layout mit zweispaltigem Desktop
   --------------------------------------------------------------------------
   Muss am Ende der Datei stehen, damit alle vorherigen Login- und
   Registrierungsvorgaben zuverlässig überschrieben werden.
   ========================================================================== */

/* Grundregel für diese öffentliche Maske:
   - auf breiten Bildschirmen ca. 60 % der Viewportbreite, hart gedeckelt
   - Registrierung links, Anmeldung/Passwort rechts
   - unterhalb Desktop bewusst wieder einspaltig
*/

.registration-page,
.registration-login-page {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Desktop und breite Notebooks */
@media (min-width: 1180px) {
  .registration-page,
  .registration-login-page {
    min-height: calc(100vh - 0.6rem) !important;
    padding: clamp(0.45rem, 1vw, 0.85rem) 1rem !important;
  }

  .registration-card,
  .registration-login-card {
    width: min(60vw, 820px) !important;
    max-width: 820px !important;
    padding: clamp(0.6rem, 1vw, 0.9rem) !important;
    border-radius: 1.1rem !important;
    box-shadow: 0 12px 34px rgba(1, 13, 110, 0.11) !important;
  }

  .registration-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(230px, 0.82fr) !important;
    grid-template-areas:
      "header header"
      "register login"
      "register forgot" !important;
    gap: 0.65rem 0.75rem !important;
    align-items: start !important;
  }

  .registration-card > .registration-header,
  .registration-card > .registration-login-header {
    grid-area: header !important;
  }

  .registration-card > .registration-section:first-of-type {
    grid-area: register !important;
  }

  .registration-card > .registration-section:nth-of-type(2) {
    grid-area: login !important;
  }

  .registration-card > .registration-section:nth-of-type(3) {
    grid-area: forgot !important;
  }

  .registration-card > .registration-section,
  .registration-login-card > .registration-section {
    margin: 0 !important;
    padding: 0.65rem !important;
    border: 1px solid rgba(1, 13, 110, 0.1) !important;
    border-radius: 0.9rem !important;
    background: rgba(248, 251, 255, 0.82) !important;
  }

  .registration-card > .registration-section + .registration-section,
  .registration-login-card > .registration-section + .registration-section {
    margin-top: 0 !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid rgba(1, 13, 110, 0.1) !important;
  }

  .registration-header,
  .registration-login-header {
    margin-bottom: 0.55rem !important;
  }

  .registration-logo {
    width: min(100%, 155px) !important;
    margin: 0 auto 0.35rem !important;
  }

  .registration-title,
  .registration-login-title {
    font-size: clamp(1.18rem, 2vw, 1.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
  }

  .registration-meta,
  .registration-login-date {
    margin-top: 0.32rem !important;
    font-size: clamp(0.68rem, 1.05vw, 0.78rem) !important;
    line-height: 1.2 !important;
  }

  .registration-privacy-footer {
    width: min(60vw, 820px) !important;
    max-width: 820px !important;
    margin-top: 0.45rem !important;
  }

  .registration-privacy-footer .registration-privacy-link {
    min-height: 2.2rem !important;
    padding: 0.28rem 0.65rem !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  .registration-login-intro,
  .registration-section-intro {
    max-width: 25rem !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.55rem !important;
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
  }

  .registration-section-title {
    margin: 0 0 0.48rem !important;
    font-size: clamp(0.95rem, 1.55vw, 1.12rem) !important;
    line-height: 1.12 !important;
  }

  .registration-section-title--small {
    margin-bottom: 0.42rem !important;
    font-size: 0.78rem !important;
  }

  .registration-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem 0.58rem !important;
  }

  .registration-form-grid-full {
    grid-column: 1 / -1 !important;
  }

  .registration-card .form-group,
  .registration-login-card .form-group {
    margin-bottom: 0.52rem !important;
  }

  .registration-form-grid .form-group {
    margin-bottom: 0 !important;
  }

  .registration-card .form-label,
  .registration-login-card .form-label,
  .registration-card label,
  .registration-login-card label {
    margin-bottom: 0.18rem !important;
    color: #475569 !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
  }

  .registration-card .form-input,
  .registration-card .form-select,
  .registration-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .registration-card select,
  .registration-login-card .form-input,
  .registration-login-card .form-select,
  .registration-login-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .registration-login-card select {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0.38rem 0.58rem !important;
    border-radius: 0.62rem !important;
    font-size: 0.76rem !important;
    line-height: 1.15 !important;
  }

  .registration-card .form-select,
  .registration-card select,
  .registration-login-card .form-select,
  .registration-login-card select {
    padding-right: 1.85rem !important;
  }

  .registration-card .password-field .form-input,
  .registration-card .password-field input,
  .registration-login-card .password-field .form-input,
  .registration-login-card .password-field input {
    padding-right: 2.25rem !important;
  }

  .registration-card .password-toggle,
  .registration-login-card .password-toggle {
    right: 0.34rem !important;
    width: 1.65rem !important;
    height: 1.65rem !important;
    padding: 0.25rem !important;
  }

  .registration-card .password-toggle-icon,
  .registration-login-card .password-toggle-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .registration-form-hint,
  .registration-login-hint,
  .form-hint {
    margin-top: 0.45rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }

  .registration-card .btn,
  .registration-login-card .btn,
  .registration-submit {
    min-height: 36px !important;
    margin-top: 0.36rem !important;
    padding: 0.42rem 0.7rem !important;
    border-radius: 0.66rem !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
  }

  .registration-reset-link,
  .registration-back-link,
  .login-card .registration-login-signup {
    min-height: 36px !important;
    margin-top: 0.36rem !important;
    padding: 0.42rem 0.65rem !important;
    border-radius: 0.66rem !important;
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
  }

  .registration-login-info,
  .registration-login-links {
    margin-top: 0.5rem !important;
    gap: 0.42rem !important;
  }

  .registration-login-divider {
    margin: 0.08rem 0 0.12rem !important;
  }

  .registration-card .alert,
  .registration-login-card .alert {
    margin-bottom: 0.55rem !important;
    padding: 0.52rem 0.65rem !important;
    border-radius: 0.66rem !important;
    font-size: 0.72rem !important;
  }
}

/* Normale Notebooks und Tablets: kompakt, aber einspaltig lesbar */
@media (min-width: 761px) and (max-width: 1179px) {
  .registration-page,
  .registration-login-page {
    padding: 0.85rem 1rem !important;
  }

  .registration-card,
  .registration-login-card {
    width: min(82vw, 680px) !important;
    max-width: 680px !important;
    padding: 1rem !important;
    border-radius: 1.25rem !important;
  }

  .registration-card {
    display: block !important;
  }

  .registration-section {
    padding: 0.8rem !important;
    border-radius: 1rem !important;
  }

  .registration-logo {
    width: min(100%, 180px) !important;
  }

  .registration-title,
  .registration-login-title {
    font-size: clamp(1.35rem, 3vw, 1.8rem) !important;
  }

  .registration-form-grid {
    gap: 0.65rem 0.75rem !important;
  }

  .registration-card .form-input,
  .registration-card .form-select,
  .registration-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .registration-card select,
  .registration-login-card .form-input,
  .registration-login-card .form-select,
  .registration-login-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .registration-login-card select {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 0.86rem !important;
  }

  .registration-card .btn,
  .registration-login-card .btn,
  .registration-submit,
  .registration-reset-link,
  .registration-back-link {
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }

  .registration-privacy-footer {
    width: min(82vw, 680px) !important;
    max-width: 680px !important;
    margin-top: 0.65rem !important;
  }

  .registration-privacy-footer .registration-privacy-link {
    font-size: 0.84rem !important;
  }
}

/* Smartphones bleiben einspaltig und touch-freundlich. */
@media (max-width: 760px) {
  .registration-page,
  .registration-login-page {
    padding: 0.8rem !important;
  }

  .registration-card,
  .registration-login-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    border-radius: 1.2rem !important;
  }

  .registration-card {
    display: block !important;
  }

  .registration-logo {
    width: min(100%, 210px) !important;
  }

  .registration-title,
  .registration-login-title {
    font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
  }

  .registration-form-grid {
    grid-template-columns: 1fr !important;
  }

  .registration-privacy-footer {
    width: 100% !important;
    margin-top: 0.75rem !important;
  }

  .registration-privacy-footer .registration-privacy-link {
    width: 100%;
    font-size: 0.86rem !important;
  }
}

/* Dark Mode für den kompakten Override */
body.dark .registration-card > .registration-section,
body.dark .registration-login-card > .registration-section {
  border-color: rgba(51, 65, 85, 0.7) !important;
  background: rgba(30, 41, 59, 0.6) !important;
}

body.dark .registration-card .form-label,
body.dark .registration-login-card .form-label,
body.dark .registration-card label,
body.dark .registration-login-card label {
  color: #cbd5e1 !important;
}

body.dark .registration-privacy-note {
  border-color: rgba(125, 211, 252, 0.28) !important;
  background: rgba(14, 116, 144, 0.18) !important;
  color: #cbd5e1 !important;
}

body.dark .registration-privacy-footer .registration-privacy-link {
  background: rgba(15, 23, 42, 0.72) !important;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .registration-card > .registration-section,
  body.app-body:not(.light) .registration-login-card > .registration-section {
    border-color: rgba(51, 65, 85, 0.7) !important;
    background: rgba(30, 41, 59, 0.6) !important;
  }

  body.app-body:not(.light) .registration-card .form-label,
  body.app-body:not(.light) .registration-login-card .form-label,
  body.app-body:not(.light) .registration-card label,
  body.app-body:not(.light) .registration-login-card label {
    color: #cbd5e1 !important;
  }

  body.app-body:not(.light) .registration-privacy-note {
    border-color: rgba(125, 211, 252, 0.28) !important;
    background: rgba(14, 116, 144, 0.18) !important;
    color: #cbd5e1 !important;
  }

  body.app-body:not(.light) .registration-privacy-footer .registration-privacy-link {
    background: rgba(15, 23, 42, 0.72) !important;
  }
}


/* User menu in the authenticated header */
.top-nav {
  position: relative;
}

.top-nav-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
}

.top-nav-toggle[aria-expanded="true"] {
  background-color: rgba(0, 178, 254, 0.14);
  box-shadow: 0 6px 18px rgba(0, 178, 254, 0.24);
}

.top-nav-mobile {
  display: block;
}

.top-nav-mobile-user {
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.top-nav-mobile-section--actions {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.top-nav-mobile-action-button {
  min-height: 2.8rem;
  border-radius: 0.9rem;
}

/* Password settings page */
.settings-card h1 {
  margin: 0 0 0.6rem;
  color: var(--pg-blue);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
}

.settings-form {
  margin-top: 1.4rem;
  gap: 0;
}

.settings-form .form-group {
  margin-bottom: 1rem;
}

.settings-form .form-label {
  color: #475569;
  font-size: 0.98rem;
  font-weight: 750;
}

.settings-form .form-input {
  min-height: 52px;
  border-radius: 1rem;
  background: #e9eef7;
  font-size: 1rem;
}

.settings-submit,
.btn-full {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.settings-submit {
  min-height: 56px;
  margin-top: 0.5rem;
  border-radius: 1rem;
  font-size: 1.05rem;
  font-weight: 800;
}

body.dark .top-nav-mobile-user {
  color: #cbd5e1;
}

body.dark .settings-card h1 {
  color: var(--pg-offwhite);
}

body.dark .settings-form .form-label {
  color: #cbd5e1;
}

body.dark .settings-form .form-input {
  background: rgba(15, 23, 42, 0.82);
  border-color: #475569;
  color: #e2e8f0;
}

body.dark .settings-form .form-input:focus {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--pg-cyan);
}

@media (max-width: 560px) {
  .top-nav {
    gap: 0.8rem;
  }

  .top-nav-brand {
    min-width: 0;
  }

  .top-nav-logo {
    height: 2.35rem;
  }

  .top-nav-title {
    font-size: 1rem;
  }

  .top-nav-subtitle {
    font-size: 0.72rem;
  }

  .top-nav-mobile-panel {
    max-width: min(100%, 340px);
  }
}


/* Keep the authenticated hamburger menu below the header and compact. */
.top-nav {
  z-index: 50;
}

.top-nav-mobile {
  top: var(--top-nav-mobile-offset, 0px);
}

.top-nav-mobile-header {
  padding: 1rem 1.25rem;
}

.top-nav-mobile-title {
  font-size: 1.05rem;
}

.top-nav-mobile-user {
  font-size: 0.78rem;
}

.top-nav-mobile-section {
  padding: 1.1rem 1.25rem 0;
}

.top-nav-mobile-section-title {
  font-size: 0.68rem;
  margin-bottom: 0.55rem;
}

.top-nav-mobile-list {
  gap: 0.35rem;
}

.top-nav-mobile-link {
  padding: 0.58rem 0.8rem;
  font-size: 0.9rem;
}

.top-nav-mobile-action-button {
  min-height: 2.5rem;
  font-size: 0.9rem;
}

@media (max-width: 560px) {
  .top-nav-mobile-panel {
    max-width: min(100%, 320px);
  }
}

/* =========================
   Globaler automatischer Dark Mode
   ========================= */
body.dark {
  --bg: #020617;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --card: rgba(15, 23, 42, 0.88);
  --border: rgba(51, 65, 85, 0.7);
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
}

body.dark.app-body {
  background: var(--bg);
  color: var(--text);
}

body.dark a:not(.btn):not(.top-nav-brand):not(.top-nav-link):not(.top-nav-mobile-link):not(.registration-back-link):not(.login-link) {
  color: #7dd3fc;
}

body.dark .app-footer,
body.dark .app-footer-link {
  color: var(--text-muted);
}

body.dark .app-footer-link:hover {
  color: #7dd3fc;
}

body.dark .top-nav {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: var(--shadow);
}

body.dark .top-nav-title,
body.dark .page-title,
body.dark .card-title,
body.dark .accordion-title,
body.dark .stat-value,
body.dark .login-title,
body.dark .settings-card h1 {
  color: var(--pg-offwhite);
}

body.dark .top-nav-subtitle,
body.dark .page-subtitle,
body.dark .card-subtitle,
body.dark .accordion-description,
body.dark .stat-label,
body.dark .text-muted,
body.dark .form-hint,
body.dark .top-nav-mobile-user {
  color: #cbd5f5;
}

body.dark .top-nav-link,
body.dark .top-nav-mobile-link,
body.dark .form-label,
body.dark .settings-form .form-label {
  color: var(--text);
}

body.dark .top-nav-toggle {
  background: rgba(15, 23, 42, 0.9);
  border-color: var(--pg-offwhite);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

body.dark .top-nav-toggle:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--pg-cyan);
}

body.dark .top-nav-toggle-bar {
  background: var(--pg-offwhite);
}

body.dark .top-nav-mobile-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

body.dark .top-nav-mobile-panel {
  background: rgba(15, 23, 42, 0.98);
  border-color: var(--border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.55);
  color: var(--text);
}

body.dark .top-nav-mobile-header {
  border-bottom-color: rgba(51, 65, 85, 0.6);
}

body.dark .top-nav-mobile-title,
body.dark .top-nav-mobile-section-title,
body.dark .top-nav-mobile-close {
  color: var(--pg-offwhite);
}

body.dark .top-nav-mobile-close {
  border-color: var(--pg-offwhite);
}

body.dark .user-pill {
  background: rgba(0, 178, 254, 0.25);
  color: var(--text);
}

body.dark .card,
body.dark .accordion-item,
body.dark .accordion-subsection,
body.dark .import-requirements,
body.dark .combobox-list,
body.dark .table-wrapper,
body.dark .login-card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
}

body.dark .accordion-item:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}

body.dark .accordion-header:hover,
body.dark .top-nav-mobile-link:hover {
  background: rgba(0, 178, 254, 0.1);
}

body.dark .accordion-subsection,
body.dark .accordion-subsection-summary,
body.dark .accordion-subsection-body {
  background: rgba(51, 65, 85, 0.4);
  color: var(--text);
}

body.dark .form-input,
body.dark .form-select,
body.dark .form-textarea,
body.dark textarea,
body.dark .settings-form .form-input,
body.dark .login-card .form-input {
  background: rgba(15, 23, 42, 0.92);
  border-color: #475569;
  color: var(--text);
}

body.dark .form-input::placeholder,
body.dark .form-textarea::placeholder,
body.dark textarea::placeholder {
  color: #94a3b8;
}

body.dark .form-input:focus,
body.dark .form-select:focus,
body.dark .form-textarea:focus,
body.dark .settings-form .form-input:focus,
body.dark .login-card .form-input:focus {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--pg-cyan);
  box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.2);
}

body.dark .form-select option,
body.dark .form-select optgroup {
  background: #0f172a;
  color: var(--text);
}

body.dark .btn-outline {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.5);
}

body.dark .table,
body.dark .table th,
body.dark .table td {
  color: var(--text);
  border-bottom-color: #334155;
}

body.dark .table thead tr,
body.dark .table thead th {
  background: rgba(2, 6, 23, 0.95);
}

body.dark .table th {
  color: var(--pg-offwhite);
}

body.dark .table tbody tr {
  background: rgba(15, 23, 42, 0.88);
}

body.dark .table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.75);
}

body.dark .table tbody tr:hover {
  background: rgba(0, 178, 254, 0.12);
}

body.dark .table--laufbahn thead th,
body.dark .table--kurswahlen thead th,
body.dark .table--laufbahn tbody tr:last-child td,
body.dark .table--kurswahlen tbody tr:last-child td,
body.dark .table--laufbahn .subject-row--count td,
body.dark .table--kurswahlen .subject-row--count td,
body.dark .table--laufbahn thead th:first-child,
body.dark .table--kurswahlen thead th:first-child,
body.dark .table--laufbahn tbody tr:last-child td:first-child,
body.dark .table--kurswahlen tbody tr:last-child td:first-child,
body.dark .table--laufbahn .subject-row--count td:first-child,
body.dark .table--kurswahlen .subject-row--count td:first-child {
  background: rgba(30, 41, 59, 0.75) !important;
  color: var(--text) !important;
}

body.dark .subject-row td {
  color: var(--subject-text, var(--text));
}

body.dark .subject-row .badge-status,
body.dark .subject-row .form-select {
  background-color: rgba(15, 23, 42, 0.7);
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.5);
}

body.dark .elections-table td.changed {
  background: rgba(234, 179, 8, 0.2);
}

body.dark .elections-table select,
body.dark .elections-table .form-select,
body.dark .elections-table option,
body.dark .election-table select,
body.dark .election-table .form-select,
body.dark .election-table option,
body.dark .table--dashboard-elections select,
body.dark .table--dashboard-elections .form-select,
body.dark .table--dashboard-elections option {
  color: #ffffff !important;
}

body.dark .elections-table select,
body.dark .elections-table .form-select,
body.dark .election-table select,
body.dark .election-table .form-select,
body.dark .table--dashboard-elections select,
body.dark .table--dashboard-elections .form-select {
  background: #56565f !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.dark .elections-table option,
body.dark .election-table option,
body.dark .table--dashboard-elections option {
  background: #56565f !important;
}

body.dark .badge-status--approved {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

body.dark .badge-status--rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

body.dark .badge-status--draft,
body.dark .badge-window-closed {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

body.dark .badge-status--pending,
body.dark .badge-window-open {
  background: rgba(0, 178, 254, 0.2);
  color: #7dd3fc;
}

body.dark .dashboard-row--changed,
body.dark .term-active {
  background: rgba(0, 178, 254, 0.2) !important;
}

body.dark .cell-change--approved::after {
  background: #4ade80;
}

body.dark .cell-change--rejected::after {
  background: #f87171;
}

body.dark .cell-change--pending::after {
  background: #7dd3fc;
}

body.dark .login-page,
body.dark .registration-login-page {
  background: var(--bg);
}

body.dark .password-toggle {
  color: #94a3b8;
}

body.dark .password-toggle:hover {
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
}

body.dark .password-toggle:focus {
  color: var(--pg-cyan);
}

body.dark .alert-error,
body.dark .login-card .alert-error,
body.dark .registration-card .alert-danger,
body.dark .registration-card .alert.error {
  background: rgba(212, 0, 75, 0.15);
  color: #ff6b9d;
  border-color: rgba(212, 0, 75, 0.3);
}

body.dark .alert-success,
body.dark .login-card .alert-success,
body.dark .registration-card .alert-success,
body.dark .registration-card .alert.success {
  background: rgba(0, 178, 254, 0.15);
  color: #7dd3fc;
  border-color: rgba(0, 178, 254, 0.3);
}

body.dark .login-links,
body.dark .registration-login-divider {
  border-top-color: #334155;
}

body.dark .login-link,
body.dark .registration-login-signup {
  color: #7dd3fc;
}

body.dark .login-link:hover,
body.dark .registration-login-signup:hover {
  color: #bae6fd;
}

body.dark .login-link-muted,
body.dark .registration-login-date,
body.dark .registration-login-signup-text,
body.dark .registration-login-intro,
body.dark .registration-login-hint {
  color: #94a3b8;
}

body.dark .login-link-muted:hover {
  color: #cbd5e1;
}

body.dark .login-logo--light,
body.dark .top-nav-logo--light,
body.dark .registration-logo--light {
  display: none;
}

body.dark .login-logo--dark,
body.dark .top-nav-logo--dark {
  display: inline-block;
}

body.dark .registration-logo--dark {
  display: block;
}

body.dark .combobox-clear {
  color: #94a3b8;
}

body.dark .combobox-clear:hover {
  color: var(--text);
}

body.dark .combobox-list li {
  color: var(--text);
}

body.dark .combobox-list li:hover,
body.dark .combobox-list li.is-active {
  background: rgba(0, 178, 254, 0.18);
  color: #ffffff;
}

body.dark .dashboard-election-guide-accordion .accordion-item,
body.dark .dashboard-security-accordion .accordion-item {
  background: rgba(14, 116, 144, 0.18);
  border-color: rgba(103, 232, 249, 0.26);
  box-shadow: none;
}

body.dark .dashboard-election-guide-accordion__body {
  color: #e0f2fe;
}

body.dark .dashboard-election-guide-list li::marker {
  color: #38bdf8;
}

body.dark .legal-content h2 {
  color: #dbeafe;
}

body.dark .legal-content hr {
  border-top-color: rgba(148, 163, 184, 0.35);
}

body.dark .card--danger {
  border-color: rgba(248, 113, 113, 0.75);
  background-color: rgba(239, 68, 68, 0.12);
}

body.dark .klausur-abiturjahr-badge--blue {
  background: rgba(30, 58, 138, 0.4);
  color: #dbeafe;
}

body.dark .klausur-abiturjahr-badge--orange {
  background: rgba(124, 45, 18, 0.4);
  color: #ffedd5;
}

body.dark .klausur-abiturjahr-badge--green {
  background: rgba(20, 83, 45, 0.4);
  color: #dcfce7;
}

body.dark .klausur-abiturjahr-badge--neutral {
  color: var(--text);
}

body.dark .registration-page {
  background: #020617;
}

body.dark .registration-card {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

body.dark .registration-title,
body.dark .registration-section-title {
  color: var(--pg-offwhite);
}

body.dark .registration-meta,
body.dark .registration-section-title--small,
body.dark .registration-section-intro,
body.dark .registration-form-hint,
body.dark .registration-card .form-label,
body.dark .registration-card label {
  color: #cbd5e1;
}

body.dark .registration-card > .registration-section,
body.dark .registration-login-card > .registration-section {
  border-color: rgba(51, 65, 85, 0.7) !important;
  background: rgba(30, 41, 59, 0.6) !important;
}

body.dark .registration-section + .registration-section {
  border-top-color: rgba(148, 163, 184, 0.25);
}

body.dark .registration-card .form-input,
body.dark .registration-card .form-select {
  background-color: rgba(15, 23, 42, 0.82);
  border-color: #475569;
  color: #e2e8f0;
}

body.dark .registration-card .form-input:focus,
body.dark .registration-card .form-select:focus {
  background-color: rgba(15, 23, 42, 0.95);
  border-color: var(--pg-cyan);
}

body.dark .registration-reset-link,
body.dark .registration-back-link {
  color: #7dd3fc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #020617;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --card: rgba(15, 23, 42, 0.88);
    --border: rgba(51, 65, 85, 0.7);
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
  }

  body.app-body:not(.light) {
    background: var(--bg);
    color: var(--text);
  }

  body.app-body:not(.light) a:not(.btn):not(.top-nav-brand):not(.top-nav-link):not(.top-nav-mobile-link):not(.registration-back-link):not(.login-link) {
    color: #7dd3fc;
  }

  body.app-body:not(.light) .app-footer,
  body.app-body:not(.light) .app-footer-link {
    color: var(--text-muted);
  }

  body.app-body:not(.light) .app-footer-link:hover {
    color: #7dd3fc;
  }

  body.app-body:not(.light) .top-nav {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(51, 65, 85, 0.6);
    box-shadow: var(--shadow);
  }

  body.app-body:not(.light) .top-nav-title,
  body.app-body:not(.light) .page-title,
  body.app-body:not(.light) .card-title,
  body.app-body:not(.light) .accordion-title,
  body.app-body:not(.light) .stat-value,
  body.app-body:not(.light) .login-title,
  body.app-body:not(.light) .settings-card h1 {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .top-nav-subtitle,
  body.app-body:not(.light) .page-subtitle,
  body.app-body:not(.light) .card-subtitle,
  body.app-body:not(.light) .accordion-description,
  body.app-body:not(.light) .stat-label,
  body.app-body:not(.light) .text-muted,
  body.app-body:not(.light) .form-hint,
  body.app-body:not(.light) .top-nav-mobile-user {
    color: #cbd5f5;
  }

  body.app-body:not(.light) .top-nav-link,
  body.app-body:not(.light) .top-nav-mobile-link,
  body.app-body:not(.light) .form-label,
  body.app-body:not(.light) .settings-form .form-label {
    color: var(--text);
  }

  body.app-body:not(.light) .top-nav-toggle {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--pg-offwhite);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }

  body.app-body:not(.light) .top-nav-toggle:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: var(--pg-cyan);
  }

  body.app-body:not(.light) .top-nav-toggle-bar {
    background: var(--pg-offwhite);
  }

  body.app-body:not(.light) .top-nav-mobile-backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

  body.app-body:not(.light) .top-nav-mobile-panel {
    background: rgba(15, 23, 42, 0.98);
    border-color: var(--border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.55);
    color: var(--text);
  }

  body.app-body:not(.light) .top-nav-mobile-header {
    border-bottom-color: rgba(51, 65, 85, 0.6);
  }

  body.app-body:not(.light) .top-nav-mobile-title,
  body.app-body:not(.light) .top-nav-mobile-section-title,
  body.app-body:not(.light) .top-nav-mobile-close {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .top-nav-mobile-close {
    border-color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .user-pill {
    background: rgba(0, 178, 254, 0.25);
    color: var(--text);
  }

  body.app-body:not(.light) .card,
  body.app-body:not(.light) .accordion-item,
  body.app-body:not(.light) .accordion-subsection,
  body.app-body:not(.light) .import-requirements,
  body.app-body:not(.light) .combobox-list,
  body.app-body:not(.light) .table-wrapper,
  body.app-body:not(.light) .login-card {
    background: var(--card);
    border-color: var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
  }

  body.app-body:not(.light) .accordion-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  }

  body.app-body:not(.light) .accordion-header:hover,
  body.app-body:not(.light) .top-nav-mobile-link:hover {
    background: rgba(0, 178, 254, 0.1);
  }

  body.app-body:not(.light) .accordion-subsection,
  body.app-body:not(.light) .accordion-subsection-summary,
  body.app-body:not(.light) .accordion-subsection-body {
    background: rgba(51, 65, 85, 0.4);
    color: var(--text);
  }

  body.app-body:not(.light) .form-input,
  body.app-body:not(.light) .form-select,
  body.app-body:not(.light) .form-textarea,
  body.app-body:not(.light) textarea,
  body.app-body:not(.light) .settings-form .form-input,
  body.app-body:not(.light) .login-card .form-input {
    background: rgba(15, 23, 42, 0.92);
    border-color: #475569;
    color: var(--text);
  }

  body.app-body:not(.light) .form-input::placeholder,
  body.app-body:not(.light) .form-textarea::placeholder,
  body.app-body:not(.light) textarea::placeholder {
    color: #94a3b8;
  }

  body.app-body:not(.light) .form-input:focus,
  body.app-body:not(.light) .form-select:focus,
  body.app-body:not(.light) .form-textarea:focus,
  body.app-body:not(.light) .settings-form .form-input:focus,
  body.app-body:not(.light) .login-card .form-input:focus {
    background: rgba(15, 23, 42, 0.95);
    border-color: var(--pg-cyan);
    box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.2);
  }

  body.app-body:not(.light) .form-select option,
  body.app-body:not(.light) .form-select optgroup {
    background: #0f172a;
    color: var(--text);
  }

  body.app-body:not(.light) .btn-outline {
    color: var(--text);
    border-color: rgba(148, 163, 184, 0.5);
  }

  body.app-body:not(.light) .table,
  body.app-body:not(.light) .table th,
  body.app-body:not(.light) .table td {
    color: var(--text);
    border-bottom-color: #334155;
  }

  body.app-body:not(.light) .table thead tr,
  body.app-body:not(.light) .table thead th {
    background: rgba(2, 6, 23, 0.95);
  }

  body.app-body:not(.light) .table th {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .table tbody tr {
    background: rgba(15, 23, 42, 0.88);
  }

  body.app-body:not(.light) .table tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.75);
  }

  body.app-body:not(.light) .table tbody tr:hover {
    background: rgba(0, 178, 254, 0.12);
  }

  body.app-body:not(.light) .table--laufbahn thead th,
  body.app-body:not(.light) .table--kurswahlen thead th,
  body.app-body:not(.light) .table--laufbahn tbody tr:last-child td,
  body.app-body:not(.light) .table--kurswahlen tbody tr:last-child td,
  body.app-body:not(.light) .table--laufbahn .subject-row--count td,
  body.app-body:not(.light) .table--kurswahlen .subject-row--count td,
  body.app-body:not(.light) .table--laufbahn thead th:first-child,
  body.app-body:not(.light) .table--kurswahlen thead th:first-child,
  body.app-body:not(.light) .table--laufbahn tbody tr:last-child td:first-child,
  body.app-body:not(.light) .table--kurswahlen tbody tr:last-child td:first-child,
  body.app-body:not(.light) .table--laufbahn .subject-row--count td:first-child,
  body.app-body:not(.light) .table--kurswahlen .subject-row--count td:first-child {
    background: rgba(30, 41, 59, 0.75) !important;
    color: var(--text) !important;
  }

  body.app-body:not(.light) .subject-row td {
    color: var(--subject-text, var(--text));
  }

  body.app-body:not(.light) .subject-row .badge-status,
  body.app-body:not(.light) .subject-row .form-select {
    background-color: rgba(15, 23, 42, 0.7);
    color: var(--text);
    border-color: rgba(148, 163, 184, 0.5);
  }

  body.app-body:not(.light) .elections-table td.changed {
    background: rgba(234, 179, 8, 0.2);
  }

  body.app-body:not(.light) .elections-table select,
  body.app-body:not(.light) .elections-table .form-select,
  body.app-body:not(.light) .elections-table option,
  body.app-body:not(.light) .election-table select,
  body.app-body:not(.light) .election-table .form-select,
  body.app-body:not(.light) .election-table option,
  body.app-body:not(.light) .table--dashboard-elections select,
  body.app-body:not(.light) .table--dashboard-elections .form-select,
  body.app-body:not(.light) .table--dashboard-elections option {
    color: #ffffff !important;
  }

  body.app-body:not(.light) .elections-table select,
  body.app-body:not(.light) .elections-table .form-select,
  body.app-body:not(.light) .election-table select,
  body.app-body:not(.light) .election-table .form-select,
  body.app-body:not(.light) .table--dashboard-elections select,
  body.app-body:not(.light) .table--dashboard-elections .form-select {
    background: #56565f !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.app-body:not(.light) .elections-table option,
  body.app-body:not(.light) .election-table option,
  body.app-body:not(.light) .table--dashboard-elections option {
    background: #56565f !important;
  }

  body.app-body:not(.light) .badge-status--approved {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
  }

  body.app-body:not(.light) .badge-status--rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
  }

  body.app-body:not(.light) .badge-status--draft,
  body.app-body:not(.light) .badge-window-closed {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
  }

  body.app-body:not(.light) .badge-status--pending,
  body.app-body:not(.light) .badge-window-open {
    background: rgba(0, 178, 254, 0.2);
    color: #7dd3fc;
  }

  body.app-body:not(.light) .dashboard-row--changed,
  body.app-body:not(.light) .term-active {
    background: rgba(0, 178, 254, 0.2) !important;
  }

  body.app-body:not(.light) .cell-change--approved::after {
    background: #4ade80;
  }

  body.app-body:not(.light) .cell-change--rejected::after {
    background: #f87171;
  }

  body.app-body:not(.light) .cell-change--pending::after {
    background: #7dd3fc;
  }

  body.app-body:not(.light) .login-page,
  body.app-body:not(.light) .registration-login-page {
    background: var(--bg);
  }

  body.app-body:not(.light) .password-toggle {
    color: #94a3b8;
  }

  body.app-body:not(.light) .password-toggle:hover {
    color: var(--text);
    background: rgba(148, 163, 184, 0.12);
  }

  body.app-body:not(.light) .password-toggle:focus {
    color: var(--pg-cyan);
  }

  body.app-body:not(.light) .alert-error,
  body.app-body:not(.light) .login-card .alert-error,
  body.app-body:not(.light) .registration-card .alert-danger,
  body.app-body:not(.light) .registration-card .alert.error {
    background: rgba(212, 0, 75, 0.15);
    color: #ff6b9d;
    border-color: rgba(212, 0, 75, 0.3);
  }

  body.app-body:not(.light) .alert-success,
  body.app-body:not(.light) .login-card .alert-success,
  body.app-body:not(.light) .registration-card .alert-success,
  body.app-body:not(.light) .registration-card .alert.success {
    background: rgba(0, 178, 254, 0.15);
    color: #7dd3fc;
    border-color: rgba(0, 178, 254, 0.3);
  }

  body.app-body:not(.light) .login-links,
  body.app-body:not(.light) .registration-login-divider {
    border-top-color: #334155;
  }

  body.app-body:not(.light) .login-link,
  body.app-body:not(.light) .registration-login-signup {
    color: #7dd3fc;
  }

  body.app-body:not(.light) .login-link:hover,
  body.app-body:not(.light) .registration-login-signup:hover {
    color: #bae6fd;
  }

  body.app-body:not(.light) .login-link-muted,
  body.app-body:not(.light) .registration-login-date,
  body.app-body:not(.light) .registration-login-signup-text,
  body.app-body:not(.light) .registration-login-intro,
  body.app-body:not(.light) .registration-login-hint {
    color: #94a3b8;
  }

  body.app-body:not(.light) .login-link-muted:hover {
    color: #cbd5e1;
  }

  body.app-body:not(.light) .login-logo--light,
  body.app-body:not(.light) .top-nav-logo--light,
  body.app-body:not(.light) .registration-logo--light {
    display: none;
  }

  body.app-body:not(.light) .login-logo--dark,
  body.app-body:not(.light) .top-nav-logo--dark {
    display: inline-block;
  }

  body.app-body:not(.light) .registration-logo--dark {
    display: block;
  }

  body.app-body:not(.light) .combobox-clear {
    color: #94a3b8;
  }

  body.app-body:not(.light) .combobox-clear:hover {
    color: var(--text);
  }

  body.app-body:not(.light) .combobox-list li {
    color: var(--text);
  }

  body.app-body:not(.light) .combobox-list li:hover,
  body.app-body:not(.light) .combobox-list li.is-active {
    background: rgba(0, 178, 254, 0.18);
    color: #ffffff;
  }

  body.app-body:not(.light) .dashboard-election-guide-accordion .accordion-item,
  body.app-body:not(.light) .dashboard-security-accordion .accordion-item {
    background: rgba(14, 116, 144, 0.18);
    border-color: rgba(103, 232, 249, 0.26);
    box-shadow: none;
  }

  body.app-body:not(.light) .dashboard-election-guide-accordion__body {
    color: #e0f2fe;
  }

  body.app-body:not(.light) .dashboard-election-guide-list li::marker {
    color: #38bdf8;
  }

  body.app-body:not(.light) .legal-content h2 {
    color: #dbeafe;
  }

  body.app-body:not(.light) .legal-content hr {
    border-top-color: rgba(148, 163, 184, 0.35);
  }

  body.app-body:not(.light) .card--danger {
    border-color: rgba(248, 113, 113, 0.75);
    background-color: rgba(239, 68, 68, 0.12);
  }

  body.app-body:not(.light) .klausur-abiturjahr-badge--blue {
    background: rgba(30, 58, 138, 0.4);
    color: #dbeafe;
  }

  body.app-body:not(.light) .klausur-abiturjahr-badge--orange {
    background: rgba(124, 45, 18, 0.4);
    color: #ffedd5;
  }

  body.app-body:not(.light) .klausur-abiturjahr-badge--green {
    background: rgba(20, 83, 45, 0.4);
    color: #dcfce7;
  }

  body.app-body:not(.light) .klausur-abiturjahr-badge--neutral {
    color: var(--text);
  }

  body.app-body:not(.light) .registration-page {
    background: #020617;
  }

  body.app-body:not(.light) .registration-card {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  }

  body.app-body:not(.light) .registration-title,
  body.app-body:not(.light) .registration-section-title {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .registration-meta,
  body.app-body:not(.light) .registration-section-title--small,
  body.app-body:not(.light) .registration-section-intro,
  body.app-body:not(.light) .registration-form-hint,
  body.app-body:not(.light) .registration-card .form-label,
  body.app-body:not(.light) .registration-card label {
    color: #cbd5e1;
  }

  body.app-body:not(.light) .registration-card > .registration-section,
  body.app-body:not(.light) .registration-login-card > .registration-section {
    border-color: rgba(51, 65, 85, 0.7) !important;
    background: rgba(30, 41, 59, 0.6) !important;
  }

  body.app-body:not(.light) .registration-section + .registration-section {
    border-top-color: rgba(148, 163, 184, 0.25);
  }

  body.app-body:not(.light) .registration-card .form-input,
  body.app-body:not(.light) .registration-card .form-select {
    background-color: rgba(15, 23, 42, 0.82);
    border-color: #475569;
    color: #e2e8f0;
  }

  body.app-body:not(.light) .registration-card .form-input:focus,
  body.app-body:not(.light) .registration-card .form-select:focus {
    background-color: rgba(15, 23, 42, 0.95);
    border-color: var(--pg-cyan);
  }

  body.app-body:not(.light) .registration-reset-link,
  body.app-body:not(.light) .registration-back-link {
    color: #7dd3fc;
  }
}

/* Admin user management and global width cap */
.app-root,
.top-nav,
.app-main,
.content-card,
.table-wrapper,
.table-responsive {
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
}

.top-nav,
.app-main {
  width: 100%;
}

.app-main,
.content-card,
.table-wrapper,
.table-responsive {
  min-width: 0;
}

.content-card--admin,
.profile-card {
  width: 100%;
}

.profile-card {
  max-width: var(--site-max-width);
}

.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(1, 13, 110, 0.14);
  border-radius: 1.15rem;
  background: rgba(233, 238, 247, 0.75);
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border-radius: 0.9rem;
  color: var(--pg-blue);
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.admin-tab:hover {
  background: rgba(0, 178, 254, 0.12);
  color: var(--pg-blue);
}

.admin-tab--active {
  background: var(--pg-cyan);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 178, 254, 0.22);
}

.admin-tab--active:hover {
  color: #ffffff;
}

.admin-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--pg-blue);
  font-size: 0.86rem;
}

.admin-tab-panel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.admin-tab-panel-header h2 {
  margin: 0;
  color: var(--pg-blue);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.admin-tab-panel-header p {
  margin: 0;
}

.admin-table-responsive {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1.15rem;
}

.admin-users-table {
  min-width: 980px;
}

.admin-users-table td .badge-status + .badge-status {
  margin-top: 0.35rem;
}

.alert-danger {
  background: rgba(212, 0, 75, 0.1);
  color: var(--pg-magenta);
}

.alert-success {
  background: rgba(0, 178, 254, 0.12);
  color: #00335a;
}

.password-requirements {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  padding: 0;
  color: #64748b;
  font-size: 0.95rem;
  list-style: none;
}

.password-requirements li {
  position: relative;
  min-height: 1.65rem;
  padding-left: 2.1rem;
  line-height: 1.65rem;
}

.password-requirements li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid #64748b;
  border-radius: 999px;
  background: #ffffff;
}

.password-requirements li::after {
  content: "";
  position: absolute;
  left: 0.54rem;
  top: 0.62rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 999px;
  background: #64748b;
}

.password-requirements li.is-valid {
  color: #16a34a;
  font-weight: 700;
}

.password-requirements li.is-valid::before {
  border-color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
}

.password-requirements li.is-valid::after {
  left: 0.45rem;
  top: 0.4rem;
  width: 0.42rem;
  height: 0.72rem;
  border: solid #16a34a;
  border-width: 0 0.16rem 0.16rem 0;
  border-radius: 0;
  background: transparent;
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  .admin-stats,
  .admin-tab-panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
}

body.dark .admin-tabs {
  border-color: rgba(51, 65, 85, 0.7);
  background: rgba(15, 23, 42, 0.82);
}

body.dark .admin-tab {
  color: #e2e8f0;
}

body.dark .admin-tab:hover {
  background: rgba(125, 211, 252, 0.12);
  color: #ffffff;
}

body.dark .admin-tab--active,
body.dark .admin-tab--active:hover {
  color: #ffffff;
}

body.dark .admin-tab-panel-header h2 {
  color: var(--pg-offwhite);
}

body.dark .admin-table-responsive {
  border-color: rgba(51, 65, 85, 0.7);
}

body.dark .password-requirements {
  color: #cbd5e1;
}

body.dark .password-requirements li::before {
  background: rgba(15, 23, 42, 0.82);
  border-color: #94a3b8;
}

body.dark .password-requirements li::after {
  background: #94a3b8;
}

body.dark .password-requirements li.is-valid {
  color: #86efac;
}

body.dark .password-requirements li.is-valid::before {
  border-color: #86efac;
  background: rgba(34, 197, 94, 0.16);
}

body.dark .password-requirements li.is-valid::after {
  border-color: #86efac;
  background: transparent;
}

table {
  max-width: var(--site-max-width);
}

/* Administration user management */
.admin-management-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 1.35rem 0 1.75rem;
}

.admin-management-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(1, 13, 110, 0.14);
  border-radius: 1.35rem;
  background: rgba(248, 250, 252, 0.88);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  box-shadow: 0 12px 30px rgba(1, 13, 110, 0.08);
}

.admin-management-panel h2 {
  margin: 0 0 0.35rem;
  color: var(--pg-blue);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.admin-account-form {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 1rem;
}

.admin-form-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.15rem;
}

.admin-form-grid .form-group {
  min-width: 0;
  margin-bottom: 0;
}

.admin-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 46px;
}

.admin-checkbox-group input[type="checkbox"],
.admin-row-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--pg-cyan);
}

.admin-checkbox-group .form-label {
  margin: 0;
}

.admin-invitation-option {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0, 178, 254, 0.22);
  border-radius: 1rem;
  background: rgba(0, 178, 254, 0.08);
}

.admin-form-actions,
.admin-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.admin-selection-actions {
  justify-content: flex-end;
  margin: 0 0 0.85rem;
}

.admin-selection-actions .btn,
.admin-form-actions .btn {
  min-height: 44px;
}

.admin-select-column {
  width: 1%;
  white-space: nowrap;
}

.admin-users-table code {
  border-radius: 0.45rem;
  background: rgba(1, 13, 110, 0.07);
  padding: 0.15rem 0.35rem;
}

.admin-invitations-panel {
  margin-top: 1.5rem;
}

body.dark .admin-management-panel {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
}

body.dark .admin-management-panel h2 {
  color: var(--pg-offwhite);
}

body.dark .admin-invitation-option {
  background: rgba(0, 178, 254, 0.12);
  border-color: rgba(0, 178, 254, 0.28);
}

body.dark .admin-users-table code {
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .admin-management-panel {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
  }

  body.app-body:not(.light) .admin-management-panel h2 {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .admin-invitation-option {
    background: rgba(0, 178, 254, 0.12);
    border-color: rgba(0, 178, 254, 0.28);
  }

  body.app-body:not(.light) .admin-users-table code {
    background: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
  }
}

@media (max-width: 760px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-selection-actions,
  .admin-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-selection-actions .btn,
  .admin-form-actions .btn {
    justify-content: center;
    width: 100%;
  }
}


.admin-list-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.9rem;
}

.admin-user-search {
  width: 100%;
  max-width: 200px;
  min-width: 0;
  margin: 0;
}

.admin-user-search-field {
  width: 100%;
}

.admin-table-empty-state {
  margin: 0 0 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0, 178, 254, 0.24);
  border-radius: 1rem;
  background: rgba(0, 178, 254, 0.08);
  color: var(--pg-blue);
  font-weight: 700;
}

.admin-card-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--pg-blue);
}

.admin-card-checkbox-label span {
  display: none;
}

body.dark .admin-table-empty-state {
  background: rgba(0, 178, 254, 0.12);
  border-color: rgba(0, 178, 254, 0.28);
  color: #dbeafe;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .admin-table-empty-state {
    background: rgba(0, 178, 254, 0.12);
    border-color: rgba(0, 178, 254, 0.28);
    color: #dbeafe;
  }
}

@media (max-width: 1100px) {
  .admin-list-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-user-search-input {
    min-height: 48px;
  }

  .admin-table-responsive {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .admin-users-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .admin-users-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-users-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .admin-users-table tr {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    border: 1px solid rgba(1, 13, 110, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 20px rgba(1, 13, 110, 0.08);
  }

  .admin-users-table tr[hidden] {
    display: none;
  }

  .admin-users-table td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    min-width: 0;
    padding: 0;
    border: 0;
    word-break: break-word;
  }

  .admin-users-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .admin-users-table .admin-select-column {
    width: auto;
    white-space: normal;
  }

  .admin-card-checkbox-label span {
    display: inline;
  }
}

@media (max-width: 480px) {
  .admin-users-table td {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }
}

body.dark .admin-card-checkbox-label {
  color: #dbeafe;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .admin-card-checkbox-label {
    color: #dbeafe;
  }
}

@media (max-width: 1100px) {
  body.dark .admin-users-table tr {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  }

  body.dark .admin-users-table td::before {
    color: #94a3b8;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 1100px) {
  body.app-body:not(.light) .admin-users-table tr {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
  }

  body.app-body:not(.light) .admin-users-table td::before {
    color: #94a3b8;
  }
}

/* Admin account form accordion refinements */
.admin-management-grid.accordion {
  gap: 0;
}

.admin-management-panel.accordion-item {
  padding: 0;
  background: rgba(248, 250, 252, 0.88);
  border-color: rgba(1, 13, 110, 0.14);
}

.admin-management-panel .admin-management-header {
  padding: clamp(1rem, 2.5vw, 1.35rem);
}

.admin-management-panel .admin-management-body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0 clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.35rem);
}

.admin-management-panel .accordion-title {
  margin: 0 0 0.35rem;
  color: var(--pg-blue);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.admin-management-panel .accordion-description {
  margin: 0;
}

.admin-management-panel .admin-account-form {
  margin-top: 0;
}

body.dark .admin-management-panel.accordion-item {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(148, 163, 184, 0.24);
}

body.dark .admin-management-panel .accordion-title {
  color: var(--pg-offwhite);
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .admin-management-panel.accordion-item {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.24);
  }

  body.app-body:not(.light) .admin-management-panel .accordion-title {
    color: var(--pg-offwhite);
  }
}

/* Admin settings */
.admin-header-aside {
  display: grid;
  gap: 0.75rem;
  justify-items: end;
}

.admin-settings-link {
  min-height: 42px;
}

.admin-settings-card .page-header {
  align-items: flex-start;
}

.admin-settings-accordion {
  display: grid;
  gap: 1rem;
  margin-top: 1.35rem;
}

.admin-settings-form {
  margin: 0;
}

.admin-settings-textarea {
  min-height: 210px;
  line-height: 1.5;
}

.admin-settings-preview {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(0, 178, 254, 0.2);
  border-radius: 1rem;
  background: rgba(0, 178, 254, 0.08);
}

.admin-settings-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.admin-settings-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--pg-blue);
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(1, 13, 110, 0.08);
}

body.dark .admin-settings-preview {
  background: rgba(0, 178, 254, 0.12);
  border-color: rgba(0, 178, 254, 0.28);
}

body.dark .admin-settings-chip {
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .admin-settings-preview {
    background: rgba(0, 178, 254, 0.12);
    border-color: rgba(0, 178, 254, 0.28);
  }

  body.app-body:not(.light) .admin-settings-chip {
    background: rgba(15, 23, 42, 0.88);
    color: #e2e8f0;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .admin-header-aside {
    justify-items: stretch;
  }

  .admin-settings-link,
  .admin-settings-card .page-header > .btn {
    justify-content: center;
    width: 100%;
  }
}

/* Participant account deletion */
.account-delete-page-header {
  align-items: center;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.account-delete-card {
  display: grid;
  gap: 1.2rem;
  max-width: 860px;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, rgba(255, 245, 245, 0.98), rgba(255, 255, 255, 0.96));
}

.account-delete-warning {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(212, 0, 75, 0.22);
  border-radius: 1rem;
  background: rgba(212, 0, 75, 0.08);
  color: #7f1d1d;
  line-height: 1.55;
}

.account-delete-form {
  gap: 1rem;
}

.account-delete-form .form-input {
  min-height: 52px;
  border-radius: 1rem;
}

.account-delete-actions {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.account-delete-submit {
  min-height: 54px;
  border-radius: 1rem;
  font-weight: 800;
}

body.dark .account-delete-card {
  background: linear-gradient(135deg, rgba(69, 10, 10, 0.88), rgba(15, 23, 42, 0.96));
  border-color: rgba(248, 113, 113, 0.45);
}

body.dark .account-delete-warning {
  background: rgba(127, 29, 29, 0.34);
  border-color: rgba(248, 113, 113, 0.38);
  color: #fecaca;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .account-delete-card {
    background: linear-gradient(135deg, rgba(69, 10, 10, 0.88), rgba(15, 23, 42, 0.96));
    border-color: rgba(248, 113, 113, 0.45);
  }

  body.app-body:not(.light) .account-delete-warning {
    background: rgba(127, 29, 29, 0.34);
    border-color: rgba(248, 113, 113, 0.38);
    color: #fecaca;
  }
}

@media (max-width: 720px) {
  .account-delete-page-header {
    align-items: stretch;
  }

  .account-delete-back,
  .account-delete-actions {
    width: 100%;
  }

  .account-delete-actions {
    grid-template-columns: 1fr;
  }
}

/* Participant pages use the same full-width shell as the welcome dashboard. */
.participant-page,
.participant-page-header,
.participant-page-card {
  width: 100%;
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

.participant-page-card {
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.settings-card.participant-page-card,
.legal-card.participant-page-card,
.account-delete-card.participant-page-card {
  max-width: var(--site-max-width);
}

@media (max-width: 768px) {
  .participant-page-card {
    border-radius: 1.25rem;
  }
}

/* =========================================================
   Authenticated areas: complete card dark-mode coverage
   ========================================================= */
body.dark {
  --surface: rgba(15, 23, 42, 0.9);
}

body.dark .content-card,
body.dark .profile-card,
body.dark .participant-page-card,
body.dark .auth-card,
body.dark .event-tile,
body.dark .stat-card,
body.dark .info-box,
body.dark .dashboard-section,
body.dark .submission-block,
body.dark .error-modal,
body.dark .admin-tab-panel,
body.dark .admin-table-responsive,
body.dark .table-responsive {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.34);
  color: #e2e8f0;
}

body.dark .event-tile,
body.dark .stat-card,
body.dark .info-box,
body.dark .dashboard-section,
body.dark .submission-block {
  background: rgba(30, 41, 59, 0.72);
}

body.dark .content-card h1,
body.dark .profile-card h1,
body.dark .participant-page-card h1,
body.dark .content-card h2,
body.dark .profile-card h2,
body.dark .participant-page-card h2,
body.dark .stat-card strong,
body.dark .event-tile strong,
body.dark .admin-tab-panel-header h2 {
  color: var(--pg-offwhite);
}

body.dark .lead,
body.dark .auth-intro,
body.dark .event-label,
body.dark .submission-user,
body.dark .password-requirements,
body.dark .data-table th,
body.dark .admin-users-table td::before {
  color: #cbd5e1;
}

body.dark .admin-tabs {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(51, 65, 85, 0.7);
}

body.dark .admin-tab {
  color: #e2e8f0;
}

body.dark .admin-tab:hover {
  background: rgba(125, 211, 252, 0.12);
  color: #ffffff;
}

body.dark .admin-tab-count {
  background: rgba(15, 23, 42, 0.78);
  color: #e2e8f0;
}

body.dark .admin-tab--active .admin-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body.dark .data-table th,
body.dark .data-table td {
  border-bottom-color: rgba(51, 65, 85, 0.7);
}

body.dark .data-table tbody tr:nth-child(even) {
  background: rgba(30, 41, 59, 0.55);
}

body.dark .data-table tbody tr:hover {
  background: rgba(0, 178, 254, 0.12);
}

body.dark .admin-users-table code {
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
}

body.dark .alert.success,
body.dark .alert-success {
  background: rgba(0, 178, 254, 0.15);
  border-color: rgba(0, 178, 254, 0.3);
  color: #7dd3fc;
}

body.dark .alert.error,
body.dark .alert-danger,
body.dark .alert-error {
  background: rgba(212, 0, 75, 0.15);
  border-color: rgba(212, 0, 75, 0.3);
  color: #ff6b9d;
}

body.dark .password-requirements li::before {
  background: rgba(15, 23, 42, 0.82);
  border-color: #94a3b8;
}

body.dark .password-requirements li::after {
  background: #94a3b8;
}

body.dark .password-requirements li.is-valid {
  color: #86efac;
}

body.dark .password-requirements li.is-valid::before {
  background: rgba(34, 197, 94, 0.16);
  border-color: #86efac;
}

body.dark .password-requirements li.is-valid::after {
  background: transparent;
  border-color: #86efac;
}

body.dark .signature-canvas-wrap {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(125, 211, 252, 0.75);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.2), 0 8px 18px rgba(0, 0, 0, 0.28);
}

body.dark .signature-canvas-wrap canvas {
  background: #f8fbff;
}

body.dark .signature-status {
  color: #cbd5e1;
}

body.dark .signature-status.is-ok {
  color: #86efac;
}

body.dark .signature-status.is-error,
body.dark .error-modal h3 {
  color: #fda4af;
}

body.dark .submission-withdrawn {
  background: rgba(251, 146, 60, 0.14);
  border-color: rgba(251, 146, 60, 0.32);
  color: #fed7aa;
}

body.dark .admin-card-checkbox-label {
  color: #dbeafe;
}

@media (max-width: 768px) {
  body.dark .table--dashboard-changes tr,
  body.dark .table--dashboard-documents tr {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    color: #e2e8f0 !important;
  }

  body.dark .table--dashboard-changes td::before,
  body.dark .table--dashboard-documents td::before {
    color: #94a3b8 !important;
  }

  body.dark .table--dashboard-changes td,
  body.dark .table--dashboard-documents td {
    color: #e2e8f0 !important;
  }

  body.dark .admin-users-table tr {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) {
    --surface: rgba(15, 23, 42, 0.9);
  }

  body.app-body:not(.light) .content-card,
  body.app-body:not(.light) .profile-card,
  body.app-body:not(.light) .participant-page-card,
  body.app-body:not(.light) .auth-card,
  body.app-body:not(.light) .event-tile,
  body.app-body:not(.light) .stat-card,
  body.app-body:not(.light) .info-box,
  body.app-body:not(.light) .dashboard-section,
  body.app-body:not(.light) .submission-block,
  body.app-body:not(.light) .error-modal,
  body.app-body:not(.light) .admin-tab-panel,
  body.app-body:not(.light) .admin-table-responsive,
  body.app-body:not(.light) .table-responsive {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.34);
    color: #e2e8f0;
  }

  body.app-body:not(.light) .event-tile,
  body.app-body:not(.light) .stat-card,
  body.app-body:not(.light) .info-box,
  body.app-body:not(.light) .dashboard-section,
  body.app-body:not(.light) .submission-block {
    background: rgba(30, 41, 59, 0.72);
  }

  body.app-body:not(.light) .content-card h1,
  body.app-body:not(.light) .profile-card h1,
  body.app-body:not(.light) .participant-page-card h1,
  body.app-body:not(.light) .content-card h2,
  body.app-body:not(.light) .profile-card h2,
  body.app-body:not(.light) .participant-page-card h2,
  body.app-body:not(.light) .stat-card strong,
  body.app-body:not(.light) .event-tile strong,
  body.app-body:not(.light) .admin-tab-panel-header h2 {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .lead,
  body.app-body:not(.light) .auth-intro,
  body.app-body:not(.light) .event-label,
  body.app-body:not(.light) .submission-user,
  body.app-body:not(.light) .password-requirements,
  body.app-body:not(.light) .data-table th,
  body.app-body:not(.light) .admin-users-table td::before {
    color: #cbd5e1;
  }

  body.app-body:not(.light) .admin-tabs {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(51, 65, 85, 0.7);
  }

  body.app-body:not(.light) .admin-tab {
    color: #e2e8f0;
  }

  body.app-body:not(.light) .admin-tab:hover {
    background: rgba(125, 211, 252, 0.12);
    color: #ffffff;
  }

  body.app-body:not(.light) .admin-tab-count {
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
  }

  body.app-body:not(.light) .admin-tab--active .admin-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }

  body.app-body:not(.light) .data-table th,
  body.app-body:not(.light) .data-table td {
    border-bottom-color: rgba(51, 65, 85, 0.7);
  }

  body.app-body:not(.light) .data-table tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.55);
  }

  body.app-body:not(.light) .data-table tbody tr:hover {
    background: rgba(0, 178, 254, 0.12);
  }

  body.app-body:not(.light) .admin-users-table code {
    background: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
  }

  body.app-body:not(.light) .alert.success,
  body.app-body:not(.light) .alert-success {
    background: rgba(0, 178, 254, 0.15);
    border-color: rgba(0, 178, 254, 0.3);
    color: #7dd3fc;
  }

  body.app-body:not(.light) .alert.error,
  body.app-body:not(.light) .alert-danger,
  body.app-body:not(.light) .alert-error {
    background: rgba(212, 0, 75, 0.15);
    border-color: rgba(212, 0, 75, 0.3);
    color: #ff6b9d;
  }

  body.app-body:not(.light) .password-requirements li::before {
    background: rgba(15, 23, 42, 0.82);
    border-color: #94a3b8;
  }

  body.app-body:not(.light) .password-requirements li::after {
    background: #94a3b8;
  }

  body.app-body:not(.light) .password-requirements li.is-valid {
    color: #86efac;
  }

  body.app-body:not(.light) .password-requirements li.is-valid::before {
    background: rgba(34, 197, 94, 0.16);
    border-color: #86efac;
  }

  body.app-body:not(.light) .password-requirements li.is-valid::after {
    background: transparent;
    border-color: #86efac;
  }

  body.app-body:not(.light) .signature-canvas-wrap {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(125, 211, 252, 0.75);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.2), 0 8px 18px rgba(0, 0, 0, 0.28);
  }

  body.app-body:not(.light) .signature-canvas-wrap canvas {
    background: #f8fbff;
  }

  body.app-body:not(.light) .signature-status {
    color: #cbd5e1;
  }

  body.app-body:not(.light) .signature-status.is-ok {
    color: #86efac;
  }

  body.app-body:not(.light) .signature-status.is-error,
  body.app-body:not(.light) .error-modal h3 {
    color: #fda4af;
  }

  body.app-body:not(.light) .submission-withdrawn {
    background: rgba(251, 146, 60, 0.14);
    border-color: rgba(251, 146, 60, 0.32);
    color: #fed7aa;
  }

  body.app-body:not(.light) .admin-card-checkbox-label {
    color: #dbeafe;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 768px) {
  body.app-body:not(.light) .table--dashboard-changes tr,
  body.app-body:not(.light) .table--dashboard-documents tr {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    color: #e2e8f0 !important;
  }

  body.app-body:not(.light) .table--dashboard-changes td::before,
  body.app-body:not(.light) .table--dashboard-documents td::before {
    color: #94a3b8 !important;
  }

  body.app-body:not(.light) .table--dashboard-changes td,
  body.app-body:not(.light) .table--dashboard-documents td {
    color: #e2e8f0 !important;
  }

  body.app-body:not(.light) .admin-users-table tr {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  }
}

/* Participant pre-evening programme and profile accordion */
.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;
}

.profile-section {
  margin-top: 1.6rem;
}

.participant-profile-accordion .profile-accordion-item,
.pre-evening-section {
  border: 1px solid rgba(1, 13, 110, 0.14);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(1, 13, 110, 0.08);
  overflow: hidden;
}

.profile-accordion-header {
  padding: clamp(1rem, 2.5vw, 1.35rem);
}

.profile-accordion-body {
  padding: 0 clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.35rem);
}

.pre-evening-section {
  padding: clamp(1rem, 2.8vw, 1.5rem);
}

.pre-evening-section h2 {
  margin: 0 0 0.35rem;
  color: var(--pg-blue);
}

.pre-evening-intro {
  max-width: 72rem;
  line-height: 1.55;
}

.pre-evening-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}

.pre-evening-program-description {
  max-width: 72rem;
  margin-top: 0.55rem;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.pre-evening-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pre-evening-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid rgba(0, 178, 254, 0.22);
  border-radius: 1rem;
  background: rgba(0, 178, 254, 0.07);
  color: var(--text);
  cursor: pointer;
}

.pre-evening-option--declined {
  border-color: rgba(212, 0, 75, 0.18);
  background: rgba(212, 0, 75, 0.06);
}

.pre-evening-option input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.12rem;
  accent-color: var(--pg-cyan);
}

.pre-evening-option strong,
.pre-evening-option small {
  display: block;
}

.pre-evening-option small {
  margin-top: 0.25rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.pre-evening-option:focus-within,
.pre-evening-option:hover {
  border-color: rgba(0, 178, 254, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 178, 254, 0.12);
}

.pre-evening-submit {
  width: min(100%, 200px);
  max-width: 200px;
  justify-self: center;
  margin-right: auto;
  margin-left: auto;
}

.pre-evening-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}

.pre-evening-description-card,
.pre-evening-self-card {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pre-evening-self-card .pre-evening-submit {
  width: min(100%, 260px);
  max-width: 260px;
}

.pre-evening-description-form {
  display: grid;
  gap: 1rem;
}

.pre-evening-description-textarea {
  min-height: 150px;
  line-height: 1.55;
}

.pre-evening-description-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.pre-evening-evaluation-page,
.pre-evening-evaluation {
  width: 100%;
  max-width: var(--site-max-width);
}

.pre-evening-summary-card {
  min-width: 0;
}

.pre-evening-summary-card strong {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.pre-evening-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.pre-evening-filter-link {
  min-height: 2.4rem;
  padding: 0.55rem 0.85rem;
}

.pre-evening-table {
  min-width: 1000px;
}

.pre-evening-admin-accordion {
  width: 100%;
  max-width: var(--site-max-width);
}

.pre-evening-admin-accordion .pre-evening-section {
  padding: 0;
  margin-block: 0;
}

.pre-evening-accordion-header.admin-tab-panel-header {
  align-items: center;
  margin-bottom: 0;
}

.pre-evening-accordion-header .eyebrow {
  margin-bottom: 0.35rem;
}

.pre-evening-accordion-body {
  padding: 0 clamp(1rem, 2.8vw, 1.5rem) clamp(1rem, 2.8vw, 1.5rem);
}

body.dark .participant-profile-accordion .profile-accordion-item,
body.dark .pre-evening-section {
  background: rgba(15, 23, 42, 0.86);
  border-color: rgba(51, 65, 85, 0.7);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.32);
}

body.dark .pre-evening-section h2,
body.dark .pre-evening-option strong {
  color: var(--pg-offwhite);
}

body.dark .pre-evening-option {
  background: rgba(14, 116, 144, 0.18);
  border-color: rgba(103, 232, 249, 0.26);
  color: #e2e8f0;
}

body.dark .pre-evening-option--declined {
  background: rgba(212, 0, 75, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
}

body.dark .pre-evening-option small,
body.dark .pre-evening-intro {
  color: #cbd5e1;
}

body.dark .pre-evening-program-description {
  color: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  body.app-body:not(.light) .participant-profile-accordion .profile-accordion-item,
  body.app-body:not(.light) .pre-evening-section {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.32);
  }

  body.app-body:not(.light) .pre-evening-section h2,
  body.app-body:not(.light) .pre-evening-option strong {
    color: var(--pg-offwhite);
  }

  body.app-body:not(.light) .pre-evening-option {
    background: rgba(14, 116, 144, 0.18);
    border-color: rgba(103, 232, 249, 0.26);
    color: #e2e8f0;
  }

  body.app-body:not(.light) .pre-evening-option--declined {
    background: rgba(212, 0, 75, 0.12);
    border-color: rgba(248, 113, 113, 0.28);
  }

  body.app-body:not(.light) .pre-evening-option small,
  body.app-body:not(.light) .pre-evening-intro {
    color: #cbd5e1;
  }

  body.app-body:not(.light) .pre-evening-program-description {
    color: #e2e8f0;
  }
}

@media (max-width: 1100px) {
  .pre-evening-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pre-evening-table {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .pre-evening-section,
  .profile-accordion-body,
  .profile-accordion-header {
    padding: 1rem;
  }

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

  .pre-evening-option {
    grid-template-columns: 1fr;
  }

  .pre-evening-filter .admin-tab,
  .pre-evening-description-actions .btn {
    width: 100%;
  }
}