/* =========================================================================
   Nord Dark – Komponenten
   Gemeinsame Designsprache für Buttons, Karten, Formulare, Badges,
   Modals, Alerts, Listen und Pagination.

   Die vorhandenen Klassennamen bleiben unverändert erhalten; sie werden
   hier lediglich auf eine gemeinsame visuelle Sprache zurückgeführt.
   ========================================================================= */

/* =========================================================================
   1. Seitenüberschriften
   ========================================================================= */
.section-title,
.page-container .section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--nord-text-strong);
  text-align: center;
  margin: 60px 0 0;
  font-family: var(--nord-font);
  letter-spacing: -0.2px;
}

.section-description,
.page-container .section-description {
  font-size: 16px;
  color: var(--nord-text-muted);
  text-align: center;
  margin: 8px auto 30px;
  max-width: 700px;
  font-family: var(--nord-font);
  font-weight: 400;
}

/* =========================================================================
   2. Flächen / Karten
   Nord Dark: opaker Verlauf #2E3440 -> #3B4252, Ring statt Rahmen,
   Radius 16px, weicher Schatten.
   ========================================================================= */
.adm-card,
.adm-stat-box,
.gg-box,
.lt-box,
.sl-stat-box,
.intro-box,
.stats-box,
.discord-box,
.order-box,
.processing-container,
.completion-container,
.confirmation-container,
.rechtstexte-card,
.server-item,
.sl-user-item,
.gg-voucher-item,
.lt-text-item,
.ss-server-card,
.adm-user-row,
.adm-voucher-item,
.sl-loading,
.sl-empty,
.adm-loading,
.adm-empty {
  background: var(--nord-card-bg);
  border: 1px solid var(--nord-ring);
  border-radius: var(--nord-radius-lg);
  box-shadow: var(--nord-shadow);
  transition: border-color var(--nord-transition), box-shadow var(--nord-transition), transform 0.15s ease;
}

.adm-card:hover,
.gg-voucher-item:hover,
.lt-text-item:hover,
.ss-server-card:hover,
.adm-user-row:hover,
.adm-voucher-item:hover,
.sl-user-item:hover,
.rechtstexte-card:hover,
.server-item:hover {
  border-color: var(--nord-ring-hover);
}

.adm-card {
  padding: 24px;
  margin-bottom: 24px;
}

.adm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.adm-card-title {
  font-family: var(--nord-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--nord-text-strong);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-card-title i {
  color: var(--nord-primary);
}

.adm-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 60px;
  width: 100%;
  box-sizing: border-box;
}

.adm-grid {
  display: grid;
  gap: 24px;
}

.adm-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.adm-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.adm-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* =========================================================================
   3. Buttons
   Nord/Filament: vollständig abgerundet ("rounded-full"), flächige Farbe,
   keine Farbverläufe.
   ========================================================================= */
.adm-btn,
.gg-submit-btn,
.gg-btn-copy,
.gg-btn-sec,
.gg-action-btn,
.order-button,
.redeem-btn,
.status-btn,
.ss-action-btn,
.ss-wl-btn,
.ss-filter-btn,
.lt-btn-publish,
.lt-btn-withdraw,
.lt-submit-btn,
.checkout-confirm-btn,
.panel-button,
.new-order-button,
.profile-btn-save,
.profile-btn-cancel,
.profile-btn-danger,
.delete-cancel-btn,
.delete-confirm-btn,
.delete-modal-btn,
.legal-btn-accept,
.modal-redeem-btn,
.discord-button1,
.discord-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--nord-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--nord-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--nord-transition), border-color var(--nord-transition),
    color var(--nord-transition), box-shadow var(--nord-transition);
  padding: 10px 20px;
}

.adm-btn:focus-visible,
.gg-submit-btn:focus-visible,
.order-button:focus-visible,
.redeem-btn:focus-visible,
.checkout-confirm-btn:focus-visible,
.legal-btn-accept:focus-visible,
.modal-redeem-btn:focus-visible {
  outline: none;
  box-shadow: var(--nord-focus-ring);
}

/* -- Primärvariante ------------------------------------------------------ */
.adm-btn-primary,
.gg-submit-btn,
.gg-btn-copy,
.order-button,
.redeem-btn,
.lt-submit-btn,
.checkout-confirm-btn,
.panel-button,
.profile-btn-save,
.legal-btn-accept,
.modal-redeem-btn {
  background: var(--nord-primary);
  color: var(--nord-on-primary);
  border-color: transparent;
}

.adm-btn-primary:hover,
.gg-submit-btn:hover:not(:disabled),
.gg-btn-copy:hover,
.order-button:hover:not(:disabled),
.redeem-btn:hover:not(:disabled),
.lt-submit-btn:hover,
.checkout-confirm-btn:hover:not(:disabled),
.panel-button:hover,
.profile-btn-save:hover,
.legal-btn-accept:hover:not(:disabled),
.modal-redeem-btn:hover:not(:disabled) {
  background: var(--nord-primary-hover);
  color: var(--nord-on-primary);
}

/* -- Sekundärvariante (neutral, Ring) ------------------------------------ */
.adm-btn-secondary,
.gg-btn-sec,
.gg-action-btn,
.status-btn,
.ss-action-btn,
.ss-wl-btn,
.ss-filter-btn,
.new-order-button,
.profile-btn-cancel,
.delete-cancel-btn,
.discord-secondary-button {
  background: var(--nord-surface-2);
  border-color: var(--nord-ring);
  color: var(--nord-text-muted);
  font-weight: 500;
}

.adm-btn-secondary:hover,
.gg-btn-sec:hover,
.gg-action-btn:hover,
.status-btn:hover,
.ss-action-btn:hover:not(:disabled),
.ss-wl-btn:hover:not(:disabled),
.ss-filter-btn:hover,
.new-order-button:hover,
.profile-btn-cancel:hover,
.delete-cancel-btn:hover:not(:disabled),
.discord-secondary-button:hover {
  background: var(--nord-surface-3);
  border-color: var(--nord-ring-hover);
  color: var(--nord-text-strong);
}

/* -- Gefahrvariante ------------------------------------------------------ */
.adm-btn-danger,
.lt-btn-withdraw {
  background: var(--nord-danger-soft);
  border-color: var(--nord-danger-ring);
  color: var(--nord-danger);
}

.adm-btn-danger:hover,
.lt-btn-withdraw:hover {
  background: rgba(191, 97, 106, 0.24);
  border-color: var(--nord-danger);
  color: var(--nord-danger-hover);
}

.profile-btn-danger,
.delete-confirm-btn {
  background: var(--nord-danger);
  border-color: transparent;
  color: var(--nord-on-accent);
}

.profile-btn-danger:hover:not(:disabled),
.delete-confirm-btn:hover:not(:disabled) {
  background: var(--nord-danger-hover);
  color: var(--nord-on-accent);
}

.gg-action-btn.danger {
  color: var(--nord-danger);
  border-color: var(--nord-danger-ring);
  background: var(--nord-danger-soft);
}

.gg-action-btn.danger:hover {
  background: rgba(191, 97, 106, 0.24);
  border-color: var(--nord-danger);
  color: var(--nord-danger-hover);
}

/* -- Erfolgsvariante ----------------------------------------------------- */
.lt-btn-publish,
.ss-unsuspend-btn {
  background: var(--nord-success-soft);
  border-color: var(--nord-success-ring);
  color: var(--nord-success);
}

.lt-btn-publish:hover,
.ss-unsuspend-btn:hover {
  background: rgba(163, 190, 140, 0.24);
  border-color: var(--nord-success);
  color: var(--nord-success-hover);
}

/* -- Aktiv-Zustände ------------------------------------------------------ */
.ss-filter-btn.active {
  background: var(--nord-primary);
  border-color: transparent;
  color: var(--nord-on-primary);
  font-weight: 600;
}

.ss-wl-btn.active {
  background: var(--nord-primary-soft);
  border-color: var(--nord-primary);
  color: var(--nord-primary-text);
}

/* -- Größen / Zustände --------------------------------------------------- */
.adm-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.ss-action-btn,
.ss-wl-btn {
  padding: 6px 14px;
  font-size: 12px;
  gap: 5px;
}

.ss-filter-btn {
  padding: 8px 16px;
  font-size: 13px;
}

.gg-action-btn {
  padding: 7px 16px;
  font-size: 13px;
  gap: 6px;
}

.status-btn {
  margin-top: 18px;
  padding: 7px 16px;
  font-size: 13px;
  gap: 7px;
}

.status-btn i {
  font-size: 10px;
  color: var(--nord-success);
}

.adm-btn:active,
.gg-submit-btn:active,
.order-button:active:not(:disabled),
.redeem-btn:active:not(:disabled),
.checkout-confirm-btn:active:not(:disabled),
.profile-btn-danger:active:not(:disabled),
.legal-btn-accept:active:not(:disabled) {
  transform: translateY(1px);
}

.adm-btn:disabled,
.gg-submit-btn:disabled,
.order-button:disabled,
.redeem-btn:disabled,
.checkout-confirm-btn:disabled,
.profile-btn-danger:disabled,
.delete-cancel-btn:disabled,
.delete-confirm-btn:disabled,
.delete-modal-btn:disabled,
.legal-btn-accept:disabled,
.modal-redeem-btn:disabled,
.ss-action-btn:disabled,
.ss-wl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.order-button:disabled,
.checkout-confirm-btn:disabled,
.modal-redeem-btn:disabled,
.redeem-btn:disabled {
  background: var(--nord-surface-3);
  color: var(--nord-text-faint);
}

/* Voll­breite Buttons */
.gg-submit-btn,
.order-button,
.redeem-btn,
.checkout-confirm-btn,
.profile-btn-danger,
.legal-btn-accept,
.modal-redeem-btn {
  width: 100%;
}

.lt-submit-btn {
  align-self: flex-start;
}

/* Icon-Buttons (rund) */
.adm-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--nord-transition), opacity var(--nord-transition);
}

.adm-btn-icon.btn-inc {
  background: var(--nord-primary);
  color: var(--nord-on-primary);
}

.adm-btn-icon.btn-inc:hover:not(:disabled) {
  background: var(--nord-primary-hover);
}

.adm-btn-icon.btn-dec {
  background: var(--nord-danger-soft);
  border-color: var(--nord-danger-ring);
  color: var(--nord-danger);
}

.adm-btn-icon.btn-dec:hover:not(:disabled) {
  background: rgba(191, 97, 106, 0.24);
}

.adm-btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.adm-btn-icon:active:not(:disabled) {
  transform: scale(0.93);
}

/* Discord-Call-to-Action – bewusst in der Fremdmarkenfarbe belassen. */
.discord-button1 {
  background: var(--brand-discord);
  border-color: var(--brand-discord);
  color: var(--nord-text-strong);
  padding: 7px 16px;
  font-size: 13px;
  min-height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
}

.discord-button1:hover {
  background: var(--brand-discord-hover);
  border-color: var(--brand-discord-hover);
  color: var(--nord-text-strong);
}

.discord-secondary-button {
  padding: 7px 16px;
  font-size: 13px;
  min-height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* =========================================================================
   4. Formulare
   ========================================================================= */
.adm-input,
.adm-select,
.adm-search-input,
.gg-input,
.gg-filter-select,
.lt-input,
.lt-textarea,
.sl-search-input,
.csm-input,
.form-group input,
.form-group select,
.delete-confirm-input-wrap input {
  width: 100%;
  padding: 11px 14px;
  background: var(--nord-surface);
  border: 1px solid var(--nord-ring);
  border-radius: var(--nord-radius-sm);
  color: var(--nord-text);
  font-family: var(--nord-font);
  font-size: 14px;
  outline: none;
  transition: border-color var(--nord-transition), box-shadow var(--nord-transition), background var(--nord-transition);
  box-sizing: border-box;
}

.adm-input:hover,
.adm-select:hover,
.gg-input:hover,
.lt-input:hover,
.sl-search-input:hover,
.form-group input:hover,
.form-group select:hover {
  border-color: var(--nord-ring-hover);
}

.adm-input:focus,
.adm-select:focus,
.adm-search-input:focus,
.gg-input:focus,
.gg-filter-select:focus,
.lt-input:focus,
.lt-textarea:focus,
.sl-search-input:focus,
.csm-input:focus,
.form-group input:focus,
.form-group select:focus,
.delete-confirm-input-wrap input:focus {
  border-color: var(--nord-primary);
  box-shadow: var(--nord-focus-ring);
  background: var(--nord-surface-2);
}

.adm-input::placeholder,
.gg-input::placeholder,
.lt-input::placeholder,
.sl-search-input::placeholder,
.form-group input::placeholder {
  color: var(--nord-text-faint);
}

.adm-input:disabled,
.adm-select:disabled,
.gg-input:disabled,
.lt-input:disabled,
.form-group input:disabled,
.form-group select:disabled {
  background: var(--nord-surface-sunken);
  color: var(--nord-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

.adm-select,
.gg-filter-select,
.form-group select {
  cursor: pointer;
}

.lt-textarea {
  min-height: 200px;
  resize: vertical;
  font-family: var(--nord-font-mono);
  line-height: 1.6;
}

.delete-confirm-input-wrap input.invalid {
  border-color: var(--nord-danger);
  box-shadow: var(--nord-focus-ring-danger);
}

/* Labels & Hilfetexte */
.adm-label,
.gg-label,
.lt-label,
.form-group label,
.delete-confirm-input-wrap label,
.csm-label {
  display: block;
  color: var(--nord-text-subtle);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--nord-font);
}

.adm-hint,
.gg-hint {
  display: block;
  color: var(--nord-text-faint);
  font-size: 12px;
  margin-top: 5px;
  font-weight: 400;
}

.adm-form-group {
  margin-bottom: 18px;
}

.gg-field,
.lt-field {
  margin-bottom: 18px;
}

.lt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.lt-field .lt-label {
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  margin-bottom: 0;
}

/* Suchfelder – Nord: vollständig abgerundet */
.adm-search {
  position: relative;
  max-width: 400px;
  margin-bottom: 24px;
}

.adm-search-input,
.sl-search-input {
  border-radius: var(--nord-radius-pill);
  padding: 13px 50px 13px 20px;
}

.adm-search-icon,
.sl-search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nord-text-faint);
  font-size: 14px;
  pointer-events: none;
}

.adm-search-clear,
.sl-search-clear {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--nord-text-faint);
  cursor: pointer;
  padding: 4px;
  display: none;
  transition: color var(--nord-transition);
}

.adm-search-clear.visible,
.sl-search-clear.active {
  display: block;
}

.adm-search-clear:hover,
.sl-search-clear:hover {
  color: var(--nord-text-strong);
}

.adm-search-info,
.sl-search-info {
  text-align: center;
  color: var(--nord-text-subtle);
  font-size: 13px;
  margin-top: 10px;
  display: none;
}

.adm-search-info.visible,
.sl-search-info.active {
  display: block;
}

/* =========================================================================
   5. Badges – Nord: rounded-xl, weicher Farbton + kräftiger Text
   ========================================================================= */
.adm-badge,
.gg-badge,
.ss-badge,
.legal-item-badge,
.plan-badge,
.tier-badge-label,
.server-status-badge,
.gg-type-tag,
.adm-type-tag,
.lt-version,
.sl-tier-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nord-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--nord-radius);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

/* Neutral */
.adm-badge,
.gg-badge.redeemed,
.gg-type-tag,
.adm-type-tag,
.lt-version,
.sl-tier-label,
.plan-badge-standard,
.tier-badge-label.free,
.ss-badge.offline,
.ss-badge.unknown {
  background: var(--nord-surface-3);
  border-color: var(--nord-ring);
  color: var(--nord-text-muted);
}

/* Primär / Info */
.adm-badge.primary,
.gg-badge.unlimited,
.ss-badge.whitelisted-badge,
.plan-badge-premium,
.tier-badge-label.sub-premium {
  background: var(--nord-primary-soft);
  border-color: var(--nord-primary-soft-strong);
  color: var(--nord-primary-text);
}

/* Erfolg */
.gg-badge.active,
.ss-badge.online,
.badge-accepted,
.server-status-badge.active {
  background: var(--nord-success-soft);
  border-color: var(--nord-success-ring);
  color: var(--nord-success);
}

/* Warnung */
.adm-badge.warning,
.ss-badge.starting,
.ss-badge.root-admin,
.badge-pending,
.plan-badge-ultimate,
.tier-badge-label.sub-ultimate,
.server-status-badge.suspended {
  background: var(--nord-warning-soft);
  border-color: var(--nord-warning-ring);
  color: var(--nord-warning);
}

/* Orange / Übergang */
.ss-badge.stopping {
  background: rgba(208, 135, 112, 0.14);
  border-color: rgba(208, 135, 112, 0.3);
  color: var(--nord-danger-text);
}

/* Gefahr */
.adm-badge.danger,
.gg-badge.expired,
.ss-badge.suspended {
  background: var(--nord-danger-soft);
  border-color: var(--nord-danger-ring);
  color: var(--nord-danger);
}

/* Nicht mehr verfügbar */
.gg-badge.fully-used {
  background: var(--nord-surface-3);
  border-color: var(--nord-ring);
  color: var(--nord-text-faint);
}

.lt-version,
.sl-tier-label,
.gg-type-tag,
.adm-type-tag {
  text-transform: uppercase;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--nord-radius-sm);
}

/* Codes / Gutscheincodes */
.gg-voucher-code,
.adm-voucher-code,
.gg-code-text,
.ss-server-id {
  font-family: var(--nord-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--nord-primary-text);
  background: var(--nord-primary-soft);
  padding: 6px 12px;
  border-radius: var(--nord-radius-sm);
  border: 1px solid var(--nord-primary-soft-strong);
  display: inline-block;
  letter-spacing: 0.5px;
}

.ss-server-id {
  font-size: 12px;
  padding: 2px 8px;
  font-weight: 600;
}

/* =========================================================================
   6. Statuswerte / Kennzahlen
   ========================================================================= */
.adm-stat-box,
.sl-stat-box,
.gg-stat-box {
  padding: 20px;
  text-align: center;
}

.adm-stat-value,
.sl-stat-value,
.gg-stat-value,
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--nord-primary);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.adm-stat-value.success,
.gg-stat-value.is-success,
.sl-stat-value.is-success {
  color: var(--nord-success);
}

.adm-stat-value.danger,
.gg-stat-value.is-danger,
.sl-stat-value.is-danger {
  color: var(--nord-danger);
}

.adm-stat-value.warning,
.gg-stat-value.is-warning,
.sl-stat-value.is-warning {
  color: var(--nord-warning);
}

.adm-stat-label,
.sl-stat-label,
.gg-stat-label,
.stat-label {
  font-size: 12px;
  color: var(--nord-text-subtle);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* .main-content erbt word-break: break-word – lange Labels wie
     "ZURÜCKGENOMMEN" wurden dadurch mitten im Wort umbrochen. */
  word-break: normal;
  overflow-wrap: normal;
}

.adm-limit-value,
.sl-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--nord-primary);
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   7. Alerts / Hinweise / Notifications
   ========================================================================= */
.adm-error,
.sl-error,
.checkout-canceled-notice,
.payment-disabled-notice,
.completion-note,
.delete-warning,
.legal-notice {
  border-radius: var(--nord-radius);
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--nord-font);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
  border: 1px solid transparent;
}

.adm-error,
.sl-error,
.payment-disabled-notice {
  background: var(--nord-danger-soft);
  border-color: var(--nord-danger-ring);
  color: var(--nord-danger-text);
  text-align: left;
  margin: 10px 0;
}

.checkout-canceled-notice,
.completion-note,
.delete-warning,
.legal-notice {
  background: var(--nord-warning-soft);
  border-color: var(--nord-warning-ring);
  color: var(--nord-warning);
}

.legal-notice {
  color: var(--nord-text-muted);
}

.legal-notice i,
.delete-warning i {
  color: var(--nord-warning);
  flex-shrink: 0;
  margin-top: 2px;
}

.completion-note.paid-note {
  background: var(--nord-primary-soft);
  border-color: var(--nord-primary-soft-strong);
  color: var(--nord-primary-text);
}

/* Notifications (fixed, oben rechts) */
#notification {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10001;
  max-width: 380px;
}

.adm-notification,
.gg-notification {
  padding: 14px 20px;
  border-radius: var(--nord-radius);
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--nord-font);
  box-shadow: var(--nord-shadow-lg);
  border: 1px solid transparent;
  animation: slideIn 0.3s ease;
}

.adm-notification {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 10001;
  max-width: 380px;
}

.adm-notification.success,
.gg-notification.success {
  background: var(--nord-success);
  border-color: var(--nord-success);
  color: var(--nord-on-accent);
}

.adm-notification.error,
.gg-notification.error {
  background: var(--nord-danger);
  border-color: var(--nord-danger);
  color: var(--nord-on-accent);
}

/* =========================================================================
   8. Lade- und Leerzustände
   ========================================================================= */
.sl-loading,
.sl-empty,
.adm-loading,
.adm-empty,
.no-servers,
.loading-spinner {
  padding: 60px 20px;
  text-align: center;
  color: var(--nord-text-muted);
}

.no-servers,
.loading-spinner {
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sl-loading-icon,
.adm-loading-icon,
.adm-empty-icon,
.sl-empty i {
  font-size: 32px;
  color: var(--nord-text-faint);
  margin-bottom: 14px;
  display: block;
}

.sl-loading-icon,
.adm-loading-icon.spin {
  animation: spin 2s linear infinite;
}

.sl-loading p,
.sl-empty p,
.adm-loading p,
.adm-empty p {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
}

.spinner-icon {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(41, 58, 61, 0.35);
  border-top-color: var(--nord-on-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* =========================================================================
   9. Pagination
   ========================================================================= */
.adm-pagination,
.sl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.adm-page-btn,
.sl-page-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 8px 14px;
  background: var(--nord-surface-2);
  border: 1px solid var(--nord-ring);
  border-radius: var(--nord-radius-pill);
  color: var(--nord-text-muted);
  cursor: pointer;
  font-family: var(--nord-font);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nord-transition), border-color var(--nord-transition), color var(--nord-transition);
}

.adm-page-btn:hover:not(:disabled),
.sl-page-btn:hover:not(:disabled) {
  background: var(--nord-surface-3);
  border-color: var(--nord-ring-hover);
  color: var(--nord-text-strong);
}

.adm-page-btn.active,
.sl-page-btn.active {
  background: var(--nord-primary);
  border-color: transparent;
  color: var(--nord-on-primary);
  font-weight: 600;
}

.adm-page-btn:disabled,
.sl-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.adm-page-info,
.sl-page-info {
  color: var(--nord-text-subtle);
  font-size: 13px;
  margin: 0 8px;
  white-space: nowrap;
}

.adm-page-dots,
.sl-page-dots {
  color: var(--nord-text-faint);
  padding: 0 4px;
}

/* =========================================================================
   10. Modal-Grundformen
   ========================================================================= */
.adm-modal,
.gg-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--nord-overlay);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.adm-modal.show,
.gg-modal.show {
  display: flex;
}

.adm-modal-box,
.gg-modal-box {
  background: var(--nord-card-bg);
  border: 1px solid var(--nord-ring);
  border-radius: var(--nord-radius-lg);
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--nord-shadow-xl);
  overflow: hidden;
}

.adm-modal-head,
.gg-modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--nord-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adm-modal-head h3,
.gg-modal-head h3 {
  margin: 0;
  color: var(--nord-text-strong);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-modal-head h3 i,
.gg-modal-head h3 i {
  color: var(--nord-primary);
  font-size: 15px;
}

.adm-modal-head h3 i.is-success,
.gg-modal-head h3 i.is-success {
  color: var(--nord-success);
}

.adm-modal-close,
.gg-modal-close,
.voucher-modal-close,
.delete-confirm-close,
.delete-modal-close,
.profile-modal-close {
  background: var(--nord-surface-2);
  border: 1px solid var(--nord-ring);
  color: var(--nord-text-subtle);
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--nord-transition), color var(--nord-transition), border-color var(--nord-transition);
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.adm-modal-close:hover,
.gg-modal-close:hover,
.voucher-modal-close:hover,
.delete-confirm-close:hover,
.delete-modal-close:hover,
.profile-modal-close:hover {
  background: var(--nord-surface-3);
  border-color: var(--nord-ring-hover);
  color: var(--nord-text-strong);
}

.adm-modal-body,
.gg-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  color: var(--nord-text);
}

.adm-modal-foot,
.gg-modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--nord-divider);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* =========================================================================
   11. Listeneinträge (Nutzer, Gutscheine, Rechtstexte)
   ========================================================================= */
.adm-user-row,
.sl-user-item,
.lt-text-item {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.adm-user-info,
.sl-user-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.adm-user-name,
.sl-user-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--nord-text-strong);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-email,
.sl-user-email {
  font-size: 12px;
  color: var(--nord-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-user-actions,
.sl-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Avatar-Kreis in Listen */
.sl-avatar,
.adm-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--nord-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nord-on-primary);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

.adm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Meta-Zeilen */
.gg-meta-item,
.adm-meta-item,
.ss-meta-item,
.ss-owner-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--nord-text-subtle);
  font-weight: 400;
}

.gg-meta-item i,
.adm-meta-item i,
.ss-meta-item i,
.ss-owner-info i {
  color: var(--nord-text-faint);
  font-size: 12px;
}

/* =========================================================================
   12. Cookie-Banner
   Zuvor als helles Panel gestaltet – jetzt konsequent Nord Dark.
   ========================================================================= */
/* Rechts unten verankert: links liegt auf Dashboard und Adminbereich die
   320px breite Sidebar – dort saß das Banner vorher mitten auf der Navigation.
   max-height verhindert, dass es auf niedrigen Fenstern die halbe Seite
   einnimmt oder oben aus dem Bild läuft. */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  left: auto;
  width: calc(100% - 40px);
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--nord-card-bg);
  border-radius: var(--nord-radius-lg);
  box-shadow: var(--nord-shadow-xl);
  padding: 24px;
  /* unter allen Dialogen (Legal-Popup 9999, Modals 10000+), damit das
     Banner nie über einem blockierenden Fenster schwebt */
  z-index: 9998;
  font-family: var(--nord-font);
  border: 1px solid var(--nord-ring);
  transform: translateY(calc(100% + 40px));
  transition: transform 0.3s ease;
}

.cookie-banner.show {
  transform: translateY(0);
}

.cookie-banner.hide {
  transform: translateY(calc(100% + 40px));
}

.cookie-content {
  color: var(--nord-text);
}

.cookie-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.cookie-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-icon {
  font-size: 22px;
  line-height: 1;
}

.cookie-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--nord-text-strong);
  line-height: 1.3;
}

.cookie-close {
  background: var(--nord-surface-2);
  border: 1px solid var(--nord-ring);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--nord-text-subtle);
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--nord-transition), color var(--nord-transition);
}

.cookie-close:hover {
  background: var(--nord-surface-3);
  color: var(--nord-text-strong);
}

.cookie-text {
  margin: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nord-text-muted);
}

.cookie-details {
  margin: 18px 0;
  padding: 16px;
  background: var(--nord-surface-sunken);
  border-radius: var(--nord-radius);
  border: 1px solid var(--nord-ring);
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookie-category {
  margin-bottom: 16px;
}

.cookie-category:last-child {
  margin-bottom: 0;
}

.cookie-category-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.cookie-category-header input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--nord-primary);
}

.cookie-category-header input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cookie-category-header label {
  flex: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cookie-category-header label strong {
  font-size: 14px;
  color: var(--nord-text-strong);
  font-weight: 600;
}

.cookie-category-header label span {
  font-size: 12px;
  color: var(--nord-text-subtle);
}

.cookie-category-description {
  margin: 0 0 0 28px;
  font-size: 13px;
  color: var(--nord-text-subtle);
  line-height: 1.5;
}

.cookie-buttons {
  display: flex;
  gap: 8px;
  margin: 18px 0 0 0;
}

.cookie-buttons button {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: var(--nord-radius-pill);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--nord-transition), border-color var(--nord-transition), color var(--nord-transition);
  font-family: var(--nord-font);
  white-space: nowrap;
}

#cookie-banner .btn-primary {
  background: var(--nord-primary);
  color: var(--nord-on-primary);
}

#cookie-banner .btn-primary:hover {
  background: var(--nord-primary-hover);
}

#cookie-banner .btn-secondary {
  background: var(--nord-surface-2);
  border-color: var(--nord-ring);
  color: var(--nord-text-muted);
}

#cookie-banner .btn-secondary:hover {
  background: var(--nord-surface-3);
  border-color: var(--nord-ring-hover);
  color: var(--nord-text-strong);
}

.btn-settings {
  background: transparent;
  color: var(--nord-text-muted);
  border: 1px solid var(--nord-ring) !important;
}

.btn-settings:hover {
  background: var(--nord-surface-2);
  border-color: var(--nord-ring-hover) !important;
  color: var(--nord-text-strong);
}

.cookie-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--nord-divider);
  display: flex;
  gap: 16px;
  justify-content: center;
}

.cookie-footer a {
  color: var(--nord-primary-text);
  text-decoration: none;
  font-size: 13px;
}

.cookie-footer a:hover {
  text-decoration: underline;
  color: var(--nord-primary);
}

.cookie-settings-btn {
  display: none !important;
}

#cookie-settings-btn.footer-link,
#cookie-settings-footer.footer-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--nord-text-subtle);
  text-decoration: none;
  margin: 0 10px;
  cursor: pointer;
  transition: color var(--nord-transition);
}

#cookie-settings-btn.footer-link:hover,
#cookie-settings-footer.footer-link:hover {
  color: var(--nord-primary);
  background: none;
}

/* Der Cookie-Einstellungen-Eintrag in der Sidebar bleibt ein Nav-Button. */
.sidebar-nav-item #cookie-settings-btn.button {
  color: var(--nord-text-muted);
  font-size: 14px;
  margin: 0 0 -15px;
}

/* =========================================================================
   13. Legal-Popup (blockierendes Rechtstexte-Modal)
   ========================================================================= */
.legal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--nord-overlay);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: legalFadeIn 0.25s ease-out;
}

.legal-modal {
  background: var(--nord-card-bg);
  border: 1px solid var(--nord-ring);
  border-radius: var(--nord-radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--nord-shadow-xl);
  animation: legalSlideUp 0.3s ease-out;
  overflow: hidden;
}

.legal-modal-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--nord-divider);
  flex-shrink: 0;
}

.legal-modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--nord-text-strong);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.legal-modal-header p {
  font-size: 13px;
  color: var(--nord-text-subtle);
  margin: 0;
  line-height: 1.5;
}

.legal-modal-body {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-item {
  background: var(--nord-surface);
  border: 1px solid var(--nord-ring);
  border-radius: var(--nord-radius);
  overflow: hidden;
  transition: border-color var(--nord-transition), background var(--nord-transition);
}

.legal-item.accepted {
  border-color: var(--nord-success-ring);
  background: var(--nord-success-soft);
}

.legal-item-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.legal-item-header:hover .legal-item-title {
  color: var(--nord-text-strong);
}

.legal-item-info {
  flex: 1;
  min-width: 0;
}

.legal-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--nord-text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--nord-transition);
}

.legal-item-meta {
  font-size: 12px;
  color: var(--nord-text-faint);
}

.legal-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.legal-item-chevron {
  color: var(--nord-text-faint);
  font-size: 11px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.legal-item.open .legal-item-chevron {
  transform: rotate(180deg);
}

.legal-item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.legal-item.open .legal-item-content {
  max-height: 300px;
}

.legal-item-content-inner {
  margin: 0 16px 16px;
  padding: 14px;
  font-size: 12.5px;
  color: var(--nord-text-muted);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-y: auto;
  max-height: 220px;
  background: var(--nord-surface-sunken);
  border-radius: var(--nord-radius-sm);
  border: 1px solid var(--nord-ring);
}

.legal-modal-footer {
  padding: 18px 28px 24px;
  border-top: 1px solid var(--nord-divider);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.legal-btn-accept {
  padding: 13px;
}

.legal-btn-accept.loading i.btn-icon {
  display: none;
}

.legal-btn-accept .spinner {
  display: none;
}

.legal-btn-accept.loading .spinner {
  display: block;
}

.legal-btn-accept.is-error {
  background: var(--nord-danger);
  color: var(--nord-on-accent);
}

.legal-footer-link {
  color: var(--nord-primary-text);
  text-decoration: none;
}

.legal-footer-link:hover {
  color: var(--nord-primary);
  text-decoration: underline;
}

.legal-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--nord-text-faint);
}

.legal-progress-dots {
  display: flex;
  gap: 5px;
}

.legal-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nord-surface-3);
  transition: background 0.3s;
}

.legal-progress-dot.done {
  background: var(--nord-success);
}

.legal-progress-dot.current {
  background: var(--nord-primary);
}

/* =========================================================================
   14. Breakpoints
   ========================================================================= */
@media (max-width: 1100px) {
  .adm-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .adm-container {
    padding: 0 16px 40px;
  }

  .adm-card {
    padding: 20px;
  }

  .adm-grid-2,
  .adm-grid-3,
  .adm-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .adm-grid-2,
  .adm-grid-3,
  .adm-grid-4 {
    grid-template-columns: 1fr;
  }

  .cookie-banner {
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 20px);
    padding: 20px;
  }

  .cookie-buttons {
    flex-direction: column;
  }

  .lt-text-item,
  .adm-user-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .section-title,
  .page-container .section-title {
    font-size: 22px;
    margin-top: 30px;
  }
}

@media (max-width: 500px) {
  .legal-modal-header {
    padding: 20px 20px 16px;
  }

  .legal-modal-body {
    padding: 16px 20px;
  }

  .legal-modal-footer {
    padding: 14px 20px 20px;
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    max-width: 100%;
    padding: 16px;
  }

  .cookie-header h3 {
    font-size: 16px;
  }

  .cookie-text {
    font-size: 13px;
  }

  .cookie-footer {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .cookie-buttons button {
    font-size: 13px;
    padding: 10px 12px;
  }
}