/* ============================================
   VoiceBoard — App Base Styles
   Minimal overrides (most styles in design system)
   ============================================ */

html, body {
    font-family: var(--font-family);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

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

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

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

.validation-message {
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    margin-top: 4px;
}

.blazor-error-boundary {
    background: var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius-md);
    margin: var(--spacing-md);
}

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

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-strong);
}

/* Global Pro Landing Styles (for Impressum, Datenschutz, etc.) */
.pro-landing {
    --bg-dark: #030014;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
    min-height: 100vh;
}

html[data-theme="light"] .pro-landing {
    --bg-dark: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #475569;
}

.pro-landing .glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    color: var(--text-main);
}

html[data-theme="light"] .pro-landing .glass-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 1);
    color: var(--text-main);
}

/* Custom Date Picker Styles to hide native icon and make entire input clickable */
.date-picker-modern {
    position: relative;
}

.date-picker-modern::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    cursor: pointer;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}