/*-
 * ***LICENSE_START***
 * Elicit Survey
 * %%
 * Copyright (C) 2025 The Regents of the University of Michigan - Rogel Cancer Center
 * %%
 * PolyForm Noncommercial License 1.0.0
 * <https://polyformproject.org/licenses/noncommercial/1.0.0>
 * ***LICENSE_END***
 */

/*
   Elicit Survey Application Theme - Vaadin 25 with Lumo Theme

   This is the master stylesheet loaded via @StyleSheet annotation.
   It imports the Lumo theme for consistency with Vaadin 24 look and feel.

   This theme provides:
   - Application-specific component styling
   - Brand integration architecture via CSS custom properties
   - Base Vaadin Lumo theme integration (Vaadin 24 compatible styling)

   Brand colors and typography are provided by:
   - Default: ./brand/ directory (copied into Docker image)
   - External: Mounted brand directories (e.g., um-brand, test-brand)

   Visit https://vaadin.com/docs/latest/styling/application-theme for more information.
*/

/* Import Vaadin Lumo theme (Vaadin 24 compatible) */
@import 'lumo/lumo.css';

/* Import Lumo utility classes (optional, but recommended) */
@import 'lumo/lumo-utility.css';

/* Brand theme integration */
/* Note: Brand CSS is loaded dynamically via AppConfig during runtime */
/* This avoids build-time dependency issues while maintaining runtime flexibility */

/* Import local fonts as fallback */
@import 'fonts/fonts.css';

/* Import component styles */
@import 'components/branded-header.css';

/* Brand Integration Architecture */
/* These CSS custom properties provide the contract between brands and the application */
html {
    /* Brand variables are populated by brand CSS files */
    /* Mapping brand variables to Lumo theme properties */
    --lumo-font-family: var(--brand-font-primary, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif);

    /* Primary color mapping */
    --lumo-primary-color: var(--brand-primary, hsl(214, 90%, 52%));
    --lumo-primary-text-color: var(--brand-primary, hsl(214, 90%, 52%));
    --lumo-primary-contrast-color: var(--brand-primary-contrast, hsl(0, 0%, 100%));
    --lumo-base-color: var(--brand-base, hsl(0, 0%, 100%));

    /* Primary color variants */
    --lumo-primary-color-50pct: var(--brand-primary-50pct, hsla(214, 90%, 52%, 0.5));
    --lumo-primary-color-10pct: var(--brand-primary-10pct, hsla(214, 90%, 52%, 0.1));

    /* Status color mapping */
    --lumo-error-color: var(--brand-error, hsl(3, 85%, 48%));
    --lumo-error-text-color: var(--brand-error, hsl(3, 85%, 48%));
    --lumo-error-color-50pct: var(--brand-error-50pct, hsla(3, 85%, 48%, 0.5));
    --lumo-error-color-10pct: var(--brand-error-10pct, hsla(3, 85%, 48%, 0.1));

    --lumo-success-color: var(--brand-success, hsl(145, 72%, 30%));
    --lumo-success-text-color: var(--brand-success, hsl(145, 72%, 30%));
    --lumo-success-color-50pct: var(--brand-success-50pct, hsla(145, 72%, 30%, 0.5));
    --lumo-success-color-10pct: var(--brand-success-10pct, hsla(145, 72%, 30%, 0.1));

    --lumo-warning-color: var(--brand-warning, hsl(43, 100%, 48%));
    --lumo-warning-text-color: var(--brand-warning, hsl(43, 100%, 48%));
    --lumo-warning-color-50pct: var(--brand-warning-50pct, hsla(43, 100%, 48%, 0.5));
    --lumo-warning-color-10pct: var(--brand-warning-10pct, hsla(43, 100%, 48%, 0.1));
}

/* ============================================================================ */
/* APPLICATION-SPECIFIC STYLING                                                */
/* ============================================================================ */
/* The following styles are specific to the Elicit Survey application          */
/* and are not related to branding. These remain constant across all brands.   */

/* Elicit Input Field Customization */
.elicit-input-field::part(label) {
    word-wrap: unset;
    white-space: unset;
    overflow: unset;
}

/* Survey Review Components */
.review-section {
    white-space: pre-line;
}

.review-item-question {
    font-weight: bolder;
    padding-left: 10px;
}

/* Application Animations */
@keyframes flash {
    0% { background-color: var(--lumo-base-color, white); }
    10% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.1)); }
    20% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.15)); }
    30% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.2)); }
    40% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.25)); }
    50% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.3)); }
    60% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.25)); }
    70% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.2)); }
    80% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.15)); }
    90% { background-color: var(--brand-interactive-light, rgba(22, 118, 243, 0.1)); }
    100% { background-color: var(--lumo-base-color, white); }
}

.flash {
    animation: flash 1.5s ease-in-out;
}

/* Layout Utilities */
.scroller {
    overflow: auto;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
}

.reviewCard {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--lumo-contrast-20pct, #e0e0e0);
    border-radius: var(--lumo-border-radius-m, 4px);
    padding: var(--lumo-space-m, 16px);
    background-color: var(--lumo-base-color, #fff);
}

.review-item-question {
    font-weight: bold;
}