/* app.css — eigene CSS-Regeln über Tailwind hinaus.
 *
 * Tailwind via CDN deckt 99% ab. Hier nur Sachen, die mit Utility-Klassen
 * unschön werden: Scrollbar, Fokus-Outlines, Übergänge, Print-Styles.
 */

:root {
  --color-accent: #2563eb;       /* blue-600 */
  --color-accent-hover: #1d4ed8; /* blue-700 */
  --color-border: #e5e7eb;       /* gray-200 */
  --color-text-muted: #6b7280;   /* gray-500 */
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Initial-Hide: Layout-Slot wird erst sichtbar, wenn JS gerendert hat —
 * verhindert Flash of Unstyled Content. */
[data-app-shell]:not([data-rendered]),
[data-auth-shell]:not([data-rendered]) {
  visibility: hidden;
}

/* Sanfte Scrollbar (Webkit only — okay für v1). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
::-webkit-scrollbar-track { background: transparent; }

/* Konsistenter Fokus-Ring. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Active Nav Link */
.nav-link-active {
  background-color: rgb(243 244 246); /* gray-100 */
  color: rgb(17 24 39);                /* gray-900 */
  font-weight: 500;
}