/* ============================================
   VitalHeld - Custom Theme
   Senioren-freundlich, Bento-Layout, Warm & Einladend
   ============================================ */

/* Grundlagen */
html {
    --vitalheld-primary: #2B6CB0;
    --vitalheld-secondary: #F5A623;
    --vitalheld-accent: #5CB85C;
    --vitalheld-bg: #F7F7F7;
    --vitalheld-text: #2D3748;
    --vitalheld-text-light: #718096;
    --vitalheld-card-bg: #FFFFFF;
    --vitalheld-border: #E2E8F0;

    /* Lumo Overrides für Senioren-Freundlichkeit */
    --lumo-font-size-m: 18px;
    --lumo-font-size-l: 22px;
    --lumo-font-size-xl: 28px;
    --lumo-font-size-xxl: 36px;
    --lumo-font-size-s: 16px;
    --lumo-font-size-xs: 14px;
    --lumo-body-text-color: var(--vitalheld-text);
    --lumo-primary-color: var(--vitalheld-primary);
    --lumo-primary-text-color: var(--vitalheld-primary);
    --lumo-success-color: var(--vitalheld-accent);
    --lumo-border-radius-m: 12px;
    --lumo-border-radius-l: 16px;
    --lumo-space-m: 16px;
    --lumo-space-l: 24px;
    --lumo-space-xl: 32px;
    font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--vitalheld-bg);
    color: var(--vitalheld-text);
}

/* App Layout */
vaadin-app-layout {
    --vaadin-app-layout-navbar-background: white;
    --vaadin-app-layout-drawer-background: white;
}

/* Seniorenfreundliche Buttons */
vaadin-button {
    min-height: 48px;
    font-size: 18px !important;
    border-radius: 12px;
    cursor: pointer;
}

vaadin-button[theme~="primary"] {
    background-color: var(--vitalheld-primary);
}

vaadin-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Seniorenfreundliche Eingabefelder */
vaadin-text-field,
vaadin-email-field,
vaadin-password-field,
vaadin-integer-field,
vaadin-combo-box {
    --vaadin-input-field-height: 52px;
    font-size: 18px !important;
}

vaadin-text-field input,
vaadin-email-field input,
vaadin-password-field input {
    font-size: 18px !important;
}

/* Seniorenfreundliche Labels */
vaadin-text-field label,
vaadin-email-field label,
vaadin-password-field label,
vaadin-combo-box label,
vaadin-radio-group label,
vaadin-checkbox-group label {
    font-size: 18px !important;
    color: var(--vitalheld-text) !important;
    font-weight: 600;
}

/* Radio Buttons & Checkboxes grösser */
vaadin-radio-button,
vaadin-checkbox {
    font-size: 18px !important;
    min-height: 40px;
}

/* Tabs grösser */
vaadin-tab {
    font-size: 18px !important;
    min-height: 48px;
    padding: 8px 16px;
}

/* Side Navigation grösser */
vaadin-side-nav-item {
    font-size: 18px !important;
    min-height: 48px;
}

/* Notifications */
vaadin-notification-card {
    font-size: 18px !important;
}

/* Bento Grid Basis */
.bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Challenge Cards */
.challenge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Konfetti Animation */
@keyframes bounce {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.konfetti {
    animation: bounce 0.6s ease-out;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    html {
        --lumo-font-size-m: 16px;
        --lumo-font-size-l: 20px;
    }

    .bento-card, .challenge-card {
        margin: 0 !important;
    }
}

/* Fortschrittsbalken */
vaadin-progress-bar {
    --vaadin-progress-bar-indicator-color: var(--vitalheld-primary);
    height: 8px;
    border-radius: 4px;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--vitalheld-bg);
}

::-webkit-scrollbar-thumb {
    background: #CBD5E0;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A0AEC0;
}

/* Login/Register spezifisch */
.login-view, .register-view {
    background: var(--vitalheld-bg);
}

/* Landing Page */
.landing-view {
    background: linear-gradient(180deg, #EBF8FF 0%, var(--vitalheld-bg) 100%);
}