/*
  ============================================================
  Club OS
  Datei: design-system.css
  Zweck: UI Polish & Design System Finalization
  Version: 1.0
  Stand: Phase 19.6
  ============================================================
*/

:root {
  /* Neutrale Oberflächen bleiben unabhängig vom Vereinsbranding stabil. */
  --surface-0: #0d1016;
  --surface-1: #151922;
  --surface-2: #1d222d;
  --surface-3: #252b37;
  --surface-overlay: rgba(21, 25, 34, 0.94);

  --text-primary: #f7f8fb;
  --text-secondary: #d6dae3;
  --text-muted: #aab1bf;
  --text-disabled: #747d8d;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.28);
  --shadow-floating: 0 22px 54px rgba(0, 0, 0, 0.42);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--club-accent) 24%, transparent);

  --motion-fast: 160ms ease;
  --motion-normal: 240ms ease;
}

html {
  color-scheme: dark;
}

body {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 12% -8%, var(--club-glow-soft), transparent 32rem),
    radial-gradient(circle at 96% 110%, rgba(255, 255, 255, 0.025), transparent 30rem),
    var(--surface-0);
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  color: var(--text-primary);
}

p,
small,
.hint,
.intro,
.home-card-label,
.eyebrow {
  color: var(--text-secondary);
}

/* Vereinsfarben sind Akzente – nie Fließtext. */
.home-card-value,
.home-card-number,
.stat-value,
.metric-value,
.dashboard-stat-value,
.role-metrics strong,
.calendar-participant-summary strong,
.event-duty-summary strong {
  color: var(--text-primary) !important;
}

.view-card,
.card,
.module-card,
.event-card,
.termin-card,
.member-card,
.login-card,
.profile-card,
.duty-card,
.empty-info,
.slot,
.task-block,
.branding-theme-card,
.appearance-theme-option {
  border: 1px solid var(--border-default);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

.view-card,
.card,
.module-card,
.event-card,
.termin-card,
.member-card,
.profile-card,
.duty-card,
.slot,
.task-block,
.branding-theme-card,
.appearance-theme-option {
  transition:
    transform var(--motion-fast),
    border-color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast);
}

@media (hover: hover) and (pointer: fine) {
  .module-card:hover,
  .event-card:hover,
  .termin-card:hover,
  .member-card:hover,
  .branding-theme-card:hover,
  .appearance-theme-option:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
      var(--surface-2);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  }
}

/* Dashboard-Kennzahlen: klare visuelle Hierarchie. */
.dashboard-grid,
.home-grid,
.home-stats,
.dashboard-metrics {
  gap: 12px;
}

.home-card,
.stat-card,
.metric-card,
.dashboard-stat-card {
  min-height: 126px;
  border: 1px solid var(--border-default);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--surface-1);
  box-shadow: var(--shadow-card);
}

.home-card-icon,
.stat-icon,
.metric-icon,
.dashboard-stat-icon {
  color: var(--club-accent);
  filter: drop-shadow(0 0 12px var(--club-glow-soft));
}

.home-card-value,
.home-card-number,
.stat-value,
.metric-value,
.dashboard-stat-value {
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

.home-card-label,
.stat-label,
.metric-label,
.dashboard-stat-label {
  color: var(--text-secondary) !important;
  font-size: 0.86rem;
  font-weight: 650;
}

/* Buttons */
.btn {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--club-primary-light) 55%, transparent);
  color: #fff;
  background: linear-gradient(135deg, var(--club-primary-light), var(--club-primary));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--club-primary) 24%, transparent);
  transition:
    transform var(--motion-fast),
    filter var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    opacity var(--motion-fast);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 11px 28px color-mix(in srgb, var(--club-primary) 32%, transparent);
  }
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-secondary,
.secondary-button {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--surface-2);
  box-shadow: none;
}

.btn-ghost {
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.055);
}

.btn-danger {
  border-color: rgba(255, 107, 107, 0.34);
  background: linear-gradient(135deg, #e85d68, #b72f3d);
}

.btn:disabled,
.btn-disabled {
  color: var(--text-disabled);
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
  opacity: 0.72;
}

/* Formulare */
label {
  color: var(--text-secondary);
}

input,
select,
textarea {
  min-height: 46px;
  border-color: var(--border-default);
  color: var(--text-primary);
  background: var(--surface-2);
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast),
    box-shadow var(--motion-fast);
}

textarea {
  min-height: 120px;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--club-accent);
  background: var(--surface-3);
  box-shadow: var(--shadow-focus);
}

select option {
  color: var(--text-primary);
  background: var(--surface-2);
}

/* Navigation */
.app-nav-mobile,
.bottom-nav {
  border-color: var(--border-default);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-floating);
}

.app-nav-item,
.bottom-nav-item {
  color: var(--text-muted);
}

.app-nav-item:hover,
.bottom-nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.app-nav-item.active,
.bottom-nav-item.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--club-accent) 28%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--club-primary-light) 68%, transparent), color-mix(in srgb, var(--club-primary) 54%, transparent)),
    var(--surface-2);
  box-shadow: 0 8px 22px var(--club-glow-soft);
}

.app-nav-item.active .nav-icon {
  color: #fff;
  background: color-mix(in srgb, var(--club-primary-light) 75%, var(--surface-2));
  box-shadow: 0 0 16px var(--club-glow-soft);
}

/* Modals, Drawer und Header */
.modal-content,
.notification-center,
.notification-center-panel,
.app-header-panel,
.club-switcher-menu {
  border-color: var(--border-default);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-floating);
}

/* Einheitliche Fokusdarstellung für Tastaturbedienung. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--club-accent);
  outline-offset: 3px;
}

/* Branding/Theme-Auswahl: lesbare Texte unabhängig von der Palette. */
[data-theme-source="club"] body,
[data-theme-source="club"] h1,
[data-theme-source="club"] h2,
[data-theme-source="club"] h3,
[data-theme-source="club"] h4,
[data-theme-source="club"] strong,
[data-theme-source="club"] .home-card-value,
[data-theme-source="club"] .home-card-number,
[data-theme-source="club"] .stat-value,
[data-theme-source="club"] .metric-value {
  color: var(--text-primary) !important;
}

[data-theme-source="club"] p,
[data-theme-source="club"] small,
[data-theme-source="club"] .home-card-label,
[data-theme-source="club"] .eyebrow,
[data-theme-source="club"] .hint {
  color: var(--text-secondary) !important;
}

@media (max-width: 650px) {
  .view-card,
  .profile-card,
  .duty-card,
  .empty-info {
    border-radius: 20px;
  }

  .home-card,
  .stat-card,
  .metric-card,
  .dashboard-stat-card {
    min-height: 112px;
  }
}

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