/* Coral, Cream, Navy Theme Extensions */

:root {
  /* Cream Backgrounds */
  --color-bg: hsl(44, 30%, 94%);
  --color-surface: hsl(43, 36%, 98%);
  --color-surface-soft: hsl(42, 22%, 89%);
  --color-surface-muted: hsl(44, 30%, 94%);

  /* Borders */
  --color-border: hsl(40, 19%, 83%);
  --color-border-strong: hsl(40, 19%, 78%);
  --color-border-accent: hsl(13, 69%, 75%);

  /* Text */
  --color-text: hsl(197, 25%, 17%);
  --color-text-muted: hsl(198, 10%, 42%);
  --color-text-soft: hsl(198, 10%, 42%);
  --color-text-inverse: hsl(43, 36%, 98%);

  /* Navy (Sidebar & Secondary text) */
  --color-navy: hsl(195, 32%, 20%);
  --color-navy-soft: hsl(197, 34%, 23%);
  --color-secondary: hsl(195, 32%, 20%);
  --color-secondary-hover: hsl(197, 34%, 23%);

  /* Coral (Primary / Accent) */
  --color-primary: hsl(13, 69%, 60%);
  --color-primary-hover: hsl(13, 69%, 55%);
  --color-primary-soft: hsl(13, 69%, 95%);
  
  --color-accent: hsl(13, 69%, 60%);
  --color-accent-strong: hsl(13, 69%, 40%);
  --color-accent-soft: hsl(13, 69%, 95%);

  /* Feedback Colors (matched to calm palette) */
  --color-success: hsl(161, 35%, 48%);
  --color-success-hover: hsl(161, 35%, 40%);
  --color-success-text: hsl(163, 35%, 26%);
  --color-success-soft: hsl(161, 34%, 84%);

  --color-warning: hsl(37, 76%, 50%);
  --color-warning-text: hsl(29, 60%, 31%);
  --color-warning-soft: hsl(37, 76%, 84%);

  --color-danger: hsl(2, 64%, 48%);
  --color-danger-hover: hsl(2, 64%, 40%);
  --color-danger-text: hsl(2, 64%, 48%);
  --color-danger-soft: hsl(2, 64%, 94%);

  --color-info-soft: hsl(42, 22%, 89%);

  /* Softened Geometry */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  
  --shadow-focus: 0 0 0 2px hsl(44, 30%, 94%), 0 0 0 4px hsl(13, 69%, 60%);
}

/* Sidebar Navy Overrides */
body.app-shell .app-sidebar {
  background: var(--color-navy);
  color: hsl(43, 29%, 91%);
  border: none;
  box-shadow: 0 16px 38px rgba(11, 31, 51, 0.18);
}
body.app-shell .app-sidebar .sidebar-label,
body.app-shell .app-sidebar .sidebar-nav-title,
body.app-shell .app-sidebar .project-current span {
  color: hsl(43, 29%, 91%);
}
body.app-shell .app-sidebar .sidebar-link {
  color: hsla(43, 29%, 91%, 0.7);
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
body.app-shell .app-sidebar .sidebar-link:hover {
  background: hsla(43, 29%, 91%, 0.08);
  color: hsl(43, 29%, 91%);
  transform: translateX(2px);
}
body.app-shell .app-sidebar .sidebar-link.is-active,
body.app-shell .app-sidebar .sidebar-link.active {
  background: hsla(43, 29%, 91%, 0.12);
  color: hsl(43, 29%, 91%);
}
body.app-shell .app-sidebar .site-footer .version,
body.app-shell .app-sidebar .site-footer .live-pill {
  color: hsla(43, 29%, 91%, 0.6);
}

/* Cards & Panels */
body.app-shell .panel, 
body.app-shell .source-card,
body.app-shell .workflow-step-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
body.app-shell .topbar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
body.app-shell .project-bar {
  border-top-color: hsla(40, 19%, 83%, 0.2);
}

/* Forms & Controls */
body.app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
body.app-shell :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
body.app-shell :is(button, .btn):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-color: var(--color-primary);
}

/* Dialogs */
body.app-shell dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(11, 31, 51, 0.2);
  color: var(--color-text);
}
body.app-shell dialog::backdrop {
  background: rgba(11, 31, 51, 0.45);
}

/* General Layout adjustments */
body.app-shell {
  background: var(--color-bg);
  color: var(--color-text);
}

    /* ── Design-Verbesserungen (aktives Turnier & Schritte) ───────────────── */

    /* Aktives Turnier-Karte: dunkler Navy-Hintergrund wie der Hero-Banner */
    body.app-shell .overview-status-card[data-status="active"] {
    background: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
    color: hsl(43, 36%, 98%);
    }
    body.app-shell .overview-status-card[data-status="active"] .overview-status-head strong {
    color: hsl(43, 36%, 98%);
    }
    body.app-shell .overview-status-card[data-status="active"] .overview-status-head span {
    background: hsla(43, 36%, 98%, 0.18);
    color: hsl(43, 36%, 98%);
    }
    body.app-shell .overview-status-card[data-status="active"] .overview-status-meta,
    body.app-shell .overview-status-card[data-status="active"] p,
    body.app-shell .overview-status-card[data-status="active"] time {
    color: hsla(43, 36%, 98%, 0.65);
    }

    /* Aktiver Planungsschritt: Korall-Linksrand statt blauem Rahmen */
    body.app-shell .workflow-step-button.is-current {
    border-color: var(--color-accent) !important;
    border-left-width: 3px !important;
    background: var(--color-surface) !important;
    box-shadow: none !important;
    padding-left: calc(var(--step-pad, 13px) - 2px);
    }
    body.app-shell .workflow-step-button.is-current .workflow-step-index {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    }
    body.app-shell .workflow-step-button.is-current .workflow-step-status {
    color: var(--color-accent);
    }

    /* ── Login/Registrierung: Crème-Hintergrund, zentrierte Card ─────────── */

    body.auth-required {
    background: var(--color-bg) !important;
    }

    body.auth-required > .auth-panel:not([hidden]) {
    background: var(--color-bg) !important;
    place-items: center !important;
    padding-top: 0 !important;
    }

    /* Auth-Card: weicher Schatten, border passend zur Crème-Palette */
    .auth-card {
    border-color: var(--color-border) !important;
    box-shadow: 0 8px 24px rgba(11, 31, 51, 0.10) !important;
    margin: auto;
    }

    /* Beschriftungen */
    .auth-card h2 {
    color: var(--color-navy) !important;
    }

    .auth-card p {
    color: var(--color-text-muted) !important;
    }

    .auth-card label {
    color: var(--color-text-muted) !important;
    }

    /* Eingabefelder: Crème-Hintergrund, Korall-Fokus */
    .auth-card input {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text) !important;
    }

    .auth-card input:focus-visible {
    border-color: var(--color-accent) !important;
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 2px;
    }

    /* Trust-badges */
    .auth-trust-list span {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-navy) !important;
    }

/* Markenzeichen „Ballwechsel" — ersetzt die alte Textkachel. */
.brand-mark-img {
  display: block;
  width: 34px;
  height: 34px;
}
body.app-shell .app-sidebar .sidebar-logo-img {
  display: block;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
}

/* Aktive Navigation: Korall statt des violetten Alt-Akzents (#7f8cff)
   aus der Vorgaengerrunde. Der Rand traegt die Markierung (3,8:1 auf
   Petrol); die Schrittnummer bleibt cremefarben, weil Korall auf
   dunklem Grund als kleiner Text zu wenig Kontrast haette. */
:root {
  --color-accent-on-dark: hsl(13, 69%, 60%);
}

body.app-shell .app-sidebar .sidebar-link:hover,
body.app-shell .app-sidebar .sidebar-link:focus-visible {
  border-left-color: var(--color-primary);
}

body.app-shell .app-sidebar .sidebar-link.is-active,
body.app-shell .app-sidebar .sidebar-link.is-step-active {
  border-left-color: var(--color-primary);
  background: hsla(43, 29%, 91%, 0.12);
  color: hsl(43, 29%, 91%);
}

body.app-shell .app-sidebar .sidebar-link.is-active .sidebar-label::before,
body.app-shell .app-sidebar .sidebar-link.is-step-active .sidebar-label::before {
  color: hsl(43, 29%, 91%);
}

/* Willkommensbereich als Petrol-Hero. Inhalt unveraendert, nur Gestalt. */
body.app-shell .welcome-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 32px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-navy);
  color: hsl(43, 36%, 98%);
}
body.app-shell .welcome-banner::after {
  content: "";
  position: absolute;
  top: -130px;
  right: -90px;
  width: 340px;
  height: 340px;
  border: 1px solid hsla(43, 36%, 98%, 0.1);
  border-radius: 50%;
  pointer-events: none;
}
body.app-shell .welcome-banner .step-number {
  color: hsla(43, 36%, 98%, 0.55);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.app-shell .welcome-banner h2 {
  margin: 6px 0 0;
  max-width: 20ch;
  color: hsl(43, 36%, 98%);
  font-family: var(--font-family-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
body.app-shell .welcome-banner p,
body.app-shell .welcome-banner .welcome-list {
  max-width: 62ch;
  color: hsla(43, 36%, 98%, 0.65);
}
body.app-shell .welcome-banner .welcome-list li::marker {
  color: var(--color-primary);
}
body.app-shell .welcome-banner .welcome-dismiss {
  justify-self: start;
  border-color: hsla(43, 36%, 98%, 0.28);
  background: transparent;
  color: hsl(43, 36%, 98%);
}
body.app-shell .welcome-banner .welcome-dismiss:hover:not(:disabled) {
  border-color: hsl(43, 36%, 98%);
  background: hsla(43, 36%, 98%, 0.08);
  color: hsl(43, 36%, 98%);
}