/* Profilbezogener Dark Mode für die gesamte App. */

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #0b1220;
  --surface: #111c2e;
  --primary: #d6e9ff;
  --primary-light: #1b3350;
  --accent: #47d7a0;
  --accent-dark: #2dbb87;
  --text: #eef4ff;
  --muted: #a9b8cc;
  --border: #30435b;
  --danger: #ff8d85;
  --danger-light: #4a2023;
  --shadow:
    0 14px 34px
    rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] body {
  color: var(--text);
  background: var(--background);
}

html[data-theme="dark"]
  .site-header {
  background:
    radial-gradient(
      circle at top right,
      rgba(103, 183, 255, 0.16),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #0b1a2b,
      #153a5a
    );
}

html[data-theme="dark"]
  :is(
    .panel,
    .sport-selection,
    .referee-match-status-section,
    .home-action-card,
    .admin-item,
    .tournament-card,
    .personal-team-card,
    .personal-invitation-card,
    .registration-profile-card,
    .people-search-result,
    .bracket-match,
    .referee-schedule-match-card,
    .referee-progress-group-card,
    .scoreboard-panel,
    .team-alert-referee-panel,
    .referee-result-editor-card,
    .team-call-popup-card,
    .modal-card
  ) {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

html[data-theme="dark"]
  :is(
    input,
    select,
    textarea
  ) {
  color: var(--text);
  border-color: var(--border);
  background: #0d1727;
}

html[data-theme="dark"]
  :is(
    input,
    textarea
  )::placeholder {
  color: #8191a7;
}

html[data-theme="dark"]
  :is(
    .notice,
    .referee-status-empty,
    .empty-state,
    .qualification-lock-note,
    .referee-progress-note,
    .section-support-copy,
    .profile-overview-grid article,
    .profile-choice-card,
    .profile-switch-row,
    .personal-next-match-card,
    .personal-members-details,
    .personal-team-management,
    .volleyball-set-history-item,
    .ranking-table-wrapper
  ) {
  color: var(--text);
  border-color: var(--border);
  background: #101b2c;
}

html[data-theme="dark"]
  :is(
    table,
    thead,
    tbody,
    tr,
    th,
    td
  ) {
  border-color: var(--border);
}

html[data-theme="dark"]
  :is(
    th,
    .ranking-table thead
  ) {
  color: var(--text);
  background: #1a2a40;
}

html[data-theme="dark"]
  :is(
    td,
    .ranking-table tbody tr
  ) {
  color: var(--text);
  background: var(--surface);
}

html[data-theme="dark"]
  :is(
    .button-secondary,
    .button-danger-light
  ) {
  color: var(--text);
  border-color: var(--border);
  background: #1a2940;
}

html[data-theme="dark"]
  :is(
    .button-secondary,
    .button-danger-light
  ):hover {
  background: #243a58;
}

html[data-theme="dark"]
  :is(
    .counter,
    .sport-badge,
    .referee-match-field,
    .qualification-badge,
    .personal-team-role-badges span
  ) {
  color: var(--text);
  border-color: var(--border);
  background: #21344d;
}

html[data-theme="dark"]
  .profile-danger-section {
  border-color: #7a3437;
}

html[data-theme="dark"]
  .profile-section-nav {
  background:
    rgba(17, 28, 46, 0.94);
}

html[data-theme="dark"]
  a:not(.button):not(.home-action-card) {
  color: #8dc8ff;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}


/* Schritt 3.16 – Dark Mode für App-Einstellungsnavigation */

html[data-theme="dark"]
  :is(
    .profile-app-identity,
    .profile-settings-menu,
    .profile-app-detail
  ) {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

html[data-theme="dark"]
  .profile-settings-row {
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"]
  .profile-settings-row:hover,
html[data-theme="dark"]
  .profile-settings-row:focus-visible,
html[data-theme="dark"]
  .profile-settings-row.is-active {
  background: #1a2a40;
}

html[data-theme="dark"]
  .profile-settings-icon,
html[data-theme="dark"]
  .profile-settings-badge,
html[data-theme="dark"]
  .profile-app-back {
  color: var(--text);
  background: #21344d;
}

html[data-theme="dark"]
  .profile-settings-badge.has-invitations {
  color: #ffffff;
  background: #d92d20;
}

html[data-theme="dark"]
  .profile-app-detail-header {
  border-color: var(--border);
  background:
    rgba(17, 28, 46, 0.94);
}

html[data-theme="dark"]
  :is(
    .profile-team-subsection,
    .profile-overview-hint
  ) {
  color: var(--text);
  border-color: #7a5a20;
  background: #302817;
}

html[data-theme="dark"]
  :is(
    .profile-overview-hint strong,
    .profile-overview-hint span
  ) {
  color: #ffd58a;
}


/* =====================================================================
   Schritt 3.17 – Premium Dark Mode
   ===================================================================== */

html[data-theme="dark"]
  .personal-profile-page {
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(33, 132, 199, 0.14),
      transparent 30rem
    ),
    radial-gradient(
      circle at 92% 30%,
      rgba(24, 160, 107, 0.12),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #08111e 0,
      var(--background) 430px
    );
}

html[data-theme="dark"]
  .profile-app-header {
  background:
    radial-gradient(
      circle at 80% -40%,
      rgba(120, 205, 255, 0.2),
      transparent 46%
    ),
    radial-gradient(
      circle at 15% 130%,
      rgba(42, 201, 145, 0.24),
      transparent 48%
    ),
    linear-gradient(
      125deg,
      #071727 0%,
      #0c3552 48%,
      #075843 115%
    );
}

html[data-theme="dark"]
  .profile-app-identity {
  border-color:
    rgba(121, 215, 194, 0.18);
  background:
    linear-gradient(
      145deg,
      #0b253b,
      #0b5947
    );
  box-shadow:
    0 30px 65px
      rgba(0, 0, 0, 0.4),
    inset 0 1px 0
      rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"]
  .profile-avatar {
  color: #dffdf4;
  border-color:
    rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(
      145deg,
      #176b5a,
      #0f433d
    );
  box-shadow:
    0 14px 28px
      rgba(0, 0, 0, 0.32),
    inset 0 1px 0
      rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"]
  .profile-settings-menu,
html[data-theme="dark"]
  .profile-app-detail {
  border-color:
    rgba(127, 164, 198, 0.14);
  background:
    rgba(15, 26, 43, 0.94);
  box-shadow:
    0 28px 70px
      rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"]
  .profile-menu-group
  + .profile-menu-group,
html[data-theme="dark"]
  .profile-content-panel
  > .section-heading {
  border-color:
    rgba(127, 164, 198, 0.14);
}

html[data-theme="dark"]
  .profile-menu-group-label {
  color: #788aa1;
}

html[data-theme="dark"]
  .profile-settings-row:hover,
html[data-theme="dark"]
  .profile-settings-row:focus-visible {
  background: #172940;
  box-shadow:
    0 10px 24px
      rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"]
  .profile-settings-row.is-active {
  background:
    linear-gradient(
      125deg,
      #174c73,
      #087059
    );
}

html[data-theme="dark"]
  .profile-settings-copy small {
  color: #8799ae;
}

html[data-theme="dark"]
  .icon-overview {
  color: #87b8ff;
  background: #17335a;
}

html[data-theme="dark"]
  .icon-data {
  color: #b4a1ff;
  background: #30265c;
}

html[data-theme="dark"]
  .icon-appearance {
  color: #ffbb82;
  background: #4a2c18;
}

html[data-theme="dark"]
  .icon-notifications {
  color: #7de3bd;
  background: #153f34;
}

html[data-theme="dark"]
  .icon-teams {
  color: #8dd9ff;
  background: #153c52;
}

html[data-theme="dark"]
  .icon-management {
  color: #ff9c96;
  background: #4a2225;
}

html[data-theme="dark"]
  .profile-content-panel
  > .section-heading h2,
html[data-theme="dark"]
  .profile-stat-card
  > div strong,
html[data-theme="dark"]
  .profile-quick-actions button,
html[data-theme="dark"]
  .personal-team-heading h2,
html[data-theme="dark"]
  .team-card-facts strong,
html[data-theme="dark"]
  .personal-members-details
  summary strong {
  color: #eef5ff;
}

html[data-theme="dark"]
  .profile-next-spotlight {
  border-color:
    rgba(131, 222, 198, 0.14);
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(255, 255, 255, 0.12),
      transparent 28%
    ),
    linear-gradient(
      130deg,
      #0b253c,
      #0c506b 52%,
      #086148
    );
  box-shadow:
    0 26px 58px
      rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"]
  .profile-next-spotlight.is-running {
  background:
    linear-gradient(
      130deg,
      #4d2409,
      #94420d,
      #b66715
    );
}

html[data-theme="dark"]
  .profile-next-spotlight.is-next,
html[data-theme="dark"]
  .profile-next-spotlight.is-soon {
  background:
    linear-gradient(
      130deg,
      #0a342b,
      #07624d,
      #108f69
    );
}

html[data-theme="dark"]
  .profile-next-spotlight.is-finished,
html[data-theme="dark"]
  .profile-next-spotlight.is-eliminated {
  background:
    linear-gradient(
      130deg,
      #202a37,
      #3a485b
    );
}

html[data-theme="dark"]
  .profile-stat-card {
  border-color:
    rgba(127, 164, 198, 0.13) !important;
  background:
    #111f31 !important;
}

html[data-theme="dark"]
  .profile-stat-card:hover {
  box-shadow:
    0 14px 28px
      rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"]
  .stat-profile
  .profile-stat-icon {
  color: #8dbbff;
  background: #17345b;
}

html[data-theme="dark"]
  .stat-number
  .profile-stat-icon {
  color: #b9a6ff;
  background: #30275c;
}

html[data-theme="dark"]
  .stat-teams
  .profile-stat-icon {
  color: #78e3bc;
  background: #153e34;
}

html[data-theme="dark"]
  .stat-invitations
  .profile-stat-icon {
  color: #ffae83;
  background: #4c2b1d;
}

html[data-theme="dark"]
  .profile-quick-actions button {
  border-color:
    rgba(127, 164, 198, 0.13);
  background: #111f31;
}

html[data-theme="dark"]
  .profile-quick-actions button:hover {
  border-color:
    rgba(90, 210, 175, 0.28);
  box-shadow:
    0 14px 30px
      rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"]
  .profile-quick-actions
  button > span {
  color: #7de3bd;
  background: #153f34;
}

html[data-theme="dark"]
  .profile-form-grid label {
  color: #aebdd0;
}

html[data-theme="dark"]
  .profile-form-grid input,
html[data-theme="dark"]
  .personal-member-search input {
  color: #eef5ff;
  border-color: #30445c;
  background: #0d1929;
}

html[data-theme="dark"]
  .profile-form-grid input:focus,
html[data-theme="dark"]
  .personal-member-search input:focus {
  border-color: #48c79d;
  background: #101e30;
  box-shadow:
    0 0 0 4px
      rgba(72, 199, 157, 0.12);
}

html[data-theme="dark"]
  .profile-theme-choice,
html[data-theme="dark"]
  .profile-switch-row {
  color: #eef5ff;
  border-color: #30445c;
  background: #111f31;
}

html[data-theme="dark"]
  .profile-theme-choice:has(
    input:checked
  ),
html[data-theme="dark"]
  .profile-switch-row:has(
    input:checked
  ) {
  border-color:
    rgba(72, 199, 157, 0.42);
  background:
    linear-gradient(
      135deg,
      #102d29,
      #112237
    );
}

html[data-theme="dark"]
  .profile-switch-row
  > input[type="checkbox"] {
  background: #4b5c70;
}

html[data-theme="dark"]
  .profile-switch-row
  > input[type="checkbox"]:checked {
  background:
    linear-gradient(
      90deg,
      #13906e,
      #3bc69a
    );
}

html[data-theme="dark"]
  .personal-team-card {
  border-color:
    rgba(127, 164, 198, 0.14);
  background:
    linear-gradient(
      180deg,
      #111f31,
      #0e1a2a
    );
  box-shadow:
    0 20px 48px
      rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"]
  .team-card-sport-icon {
  border-color:
    rgba(127, 164, 198, 0.13);
  background:
    linear-gradient(
      145deg,
      #16344a,
      #153c34
    );
}

html[data-theme="dark"]
  .team-card-overline,
html[data-theme="dark"]
  .team-card-facts small,
html[data-theme="dark"]
  .personal-members-details
  summary small {
  color: #8497ad;
}

html[data-theme="dark"]
  .team-card-primary-role {
  color: #86e6c2;
  border-color:
    rgba(72, 199, 157, 0.2);
  background: #153e34;
}

html[data-theme="dark"]
  .team-card-facts {
  border-color:
    rgba(127, 164, 198, 0.13);
  background: #0d1929;
}

html[data-theme="dark"]
  .team-card-facts > div
  + div {
  border-color:
    rgba(127, 164, 198, 0.13);
}

html[data-theme="dark"]
  .personal-members-details {
  border-color:
    rgba(127, 164, 198, 0.13);
  background: #101d2e;
}

html[data-theme="dark"]
  .personal-team-management {
  border-color:
    rgba(164, 142, 255, 0.2);
  background:
    linear-gradient(
      145deg,
      #1b1832,
      #111d2d
    );
}

html[data-theme="dark"]
  .team-management-icon {
  color: #c1b1ff;
  background: #30265b;
}

html[data-theme="dark"]
  .team-management-heading h3 {
  color: #d8d0ff;
}

html[data-theme="dark"]
  .team-management-heading p {
  color: #9f96bb;
}

html[data-theme="dark"]
  .profile-team-subsection {
  background:
    linear-gradient(
      145deg,
      #302817,
      #1d1c18
    );
  box-shadow:
    inset 0 0 0 1px
      rgba(224, 151, 0, 0.2);
}

html[data-theme="dark"]
  .personal-invitation-card {
  border-color:
    rgba(224, 151, 0, 0.18);
  background: #151f2e;
  box-shadow:
    0 10px 24px
      rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"]
  .profile-overview-hint {
  background:
    linear-gradient(
      135deg,
      #302817,
      #211e18
    );
}

@media (max-width: 899px) {
  html[data-theme="dark"]
    .personal-profile-page {
    background:
      linear-gradient(
        180deg,
        #07131f 0,
        var(--background) 350px
      );
  }

  html[data-theme="dark"]
    .profile-settings-row.is-active {
    color: var(--text);
    background: transparent;
  }

  html[data-theme="dark"]
    .profile-settings-row.is-active
    .profile-settings-copy strong {
    color: var(--primary);
  }

  html[data-theme="dark"]
    .profile-settings-row.is-active
    .profile-settings-copy small,
  html[data-theme="dark"]
    .profile-settings-row.is-active
    .profile-settings-chevron {
    color: var(--muted);
  }
}