/*
 * Global App-CSS.
 *
 * Reduziert auf:
 *  - Globaler Reset (box-sizing, margin/padding 0)
 *  - Body / Html mit Theme-Tokens
 *  - iOS-Notch-Safe-Areas
 *  - Globaler Button-Reset (kein user-select)
 *  - Initial-Loader (vor Blazor-Boot sichtbar)
 *  - Blazor-Error-UI Theming
 *
 * Komponenten-spezifisches CSS lebt isoliert in den jeweiligen *.razor.css
 * Dateien (Blazor CSS-Isolation), damit Selector-Konflikte
 * konstruktionsbedingt unmoeglich sind.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    /* iOS-Notch / Geste-Bereich beruecksichtigen */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#app {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Default-Style fuer Buttons (kein Browser-Default-Look). */
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Initial Loader (zeigt sich bis Blazor sein erstes Render macht) --- */
.initial-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-7);
    background: var(--color-bg);
    color: var(--color-text);
    z-index: 9999;
}

.initial-loader-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid var(--color-surface-light);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-circle);
    animation: fotodoku-spin 0.9s linear infinite;
}

.initial-loader-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

@keyframes fotodoku-spin {
    to { transform: rotate(360deg); }
}

/* --- Blazor Error UI --- */
#blazor-error-ui {
    background: var(--color-error);
    color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    padding: var(--space-5) var(--space-8);
    position: fixed;
    z-index: 10000;
    font-weight: var(--font-weight-semibold);
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
    margin-left: var(--space-5);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--space-5);
    top: var(--space-3);
    font-size: 1.25rem;
}

.blazor-error-boundary {
    background: var(--color-error);
    color: #fff;
    padding: var(--space-7);
    border-radius: var(--radius-card);
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten.";
}

/* --- Validation visuals (Blazor-Default-Klassen) --- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
    font-size: var(--font-size-hint);
    margin-top: var(--space-1);
}

/* --- Auth (Authorizing / Redirect-Slots in App.razor) ---
 * Diese Selektoren liegen bewusst global (nicht in App.razor.css), weil
 * App.razor keine eigene CSS-Isolation hat und CascadingAuthenticationState
 * sonst in einem leeren Slot landet. */
.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-9);
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.auth-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-surface-light);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-circle);
    animation: fotodoku-spin 0.9s linear infinite;
}

.auth-redirect {
    padding: var(--space-9);
    text-align: center;
    color: var(--color-text-muted);
}