/*
 * Izenga theme for Vaadin apps: shadcn/ui's look on top of Aura.
 *
 * Hosted by the Izenga server as /lib/izenga-vaadin.css, next to /lib/izenga-tokens.css and /lib/fonts/.
 * Vaadin apps reference both URLs; they keep no copy. Colours, radius, fonts and shadows come from the tokens;
 * this file only maps them onto Aura and the Vaadin base style properties, plus a few component rules.
 *
 * Load order in the app: Aura → izenga-tokens.css → izenga-vaadin.css → the app's own styles.
 */

/* Google Sans Flex (SIL Open Font License), weight axis only, served from /lib/fonts/ beside this file. */
@font-face {
    font-family: "Google Sans Flex";
    font-style: normal;
    font-display: swap;
    font-weight: 1 1000;
    src: url(fonts/google-sans-flex-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Google Sans Flex";
    font-style: normal;
    font-display: swap;
    font-weight: 1 1000;
    src: url(fonts/google-sans-flex-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                   U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
                   U+A720-A7FF;
}

/* ── Tokens → Aura & base styles ─────────────────────────────────────────── */

html {
    /* Aura inputs: Aura derives text, borders and surfaces from these. */
    --aura-background-color-light: var(--background-light);
    --aura-background-color-dark: var(--background-dark);
    --aura-neutral-light: var(--foreground-light);
    --aura-neutral-dark: var(--foreground-dark);
    --aura-accent-color-light: var(--primary-light);
    --aura-accent-color-dark: var(--primary-dark);
    --aura-accent-contrast-color-light: var(--primary-foreground-light);
    --aura-accent-contrast-color-dark: var(--primary-foreground-dark);
    --aura-accent-text-color-light: var(--primary-light);
    --aura-accent-text-color-dark: var(--primary-dark);
    --aura-red: var(--destructive-light);
    --aura-app-background: var(--background);

    /* Flat, white surfaces like shadcn cards; no translucent "glass". */
    --aura-surface-opacity: 1;
    --aura-overlay-surface-opacity: 1;
    --aura-overlay-backdrop-filter: none;

    /* Base styles, set directly so they match shadcn exactly rather than Aura's computed values. */
    --vaadin-background-color: var(--background);
    --vaadin-text-color: var(--foreground);
    --vaadin-text-color-secondary: var(--muted-foreground);
    --vaadin-border-color: var(--input);
    --vaadin-border-color-secondary: var(--border);
    --vaadin-background-container: var(--muted);
    --vaadin-background-container-strong: var(--accent);
    --vaadin-focus-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    --vaadin-focus-ring-width: 3px;

    /* Radius: shadcn's scale from one --radius. */
    --vaadin-radius-s: calc(var(--radius) - 4px);
    --vaadin-radius-m: var(--radius);
    --vaadin-radius-l: calc(var(--radius) + 4px);

    /* Type */
    --aura-font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
    --aura-base-font-size: 14;

    /* Shadows */
    --aura-shadow-xs: var(--shadow-xs);
    --aura-shadow-s: var(--shadow-sm);
    --aura-shadow-m: var(--shadow-lg);
    --aura-overlay-outline-color: var(--border);

    /* App layout: flush, like a shadcn dashboard. */
    --aura-app-layout-inset: 0px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Default = shadcn "outline", primary = "default", tertiary = "ghost", error = "destructive". */

vaadin-button,
vaadin-menu-bar-button,
vaadin-upload-button {
    --vaadin-button-height: 2rem;
    --vaadin-button-border-radius: var(--radius);
    --vaadin-button-font-weight: 500;
    --vaadin-button-padding: 0 0.625rem;
    --vaadin-button-background: var(--background);
    --vaadin-button-border-color: var(--border);
    --vaadin-button-text-color: var(--foreground);
    --vaadin-button-shadow: var(--aura-shadow-xs);
}

vaadin-button:hover:not([disabled]) {
    --vaadin-button-background: var(--muted);
}

vaadin-button[theme~="primary"] {
    --vaadin-button-background: var(--primary);
    --vaadin-button-text-color: var(--primary-foreground);
    --vaadin-button-border-color: transparent;
}

vaadin-button[theme~="primary"]:hover:not([disabled]) {
    --vaadin-button-background: color-mix(in oklab, var(--primary) 80%, transparent);
}

vaadin-button[theme~="tertiary"],
vaadin-button[theme~="tertiary-inline"] {
    --vaadin-button-background: transparent;
    --vaadin-button-border-color: transparent;
    --vaadin-button-shadow: none;
}

vaadin-button[theme~="tertiary"]:hover:not([disabled]) {
    --vaadin-button-background: var(--muted);
}

vaadin-button[theme~="error"] {
    --vaadin-button-background: color-mix(in oklab, var(--destructive) 10%, transparent);
    --vaadin-button-text-color: var(--destructive);
    --vaadin-button-border-color: transparent;
    --vaadin-button-shadow: none;
}

vaadin-button[theme~="error"]:hover:not([disabled]) {
    --vaadin-button-background: color-mix(in oklab, var(--destructive) 20%, transparent);
}

vaadin-button[theme~="error"][theme~="primary"] {
    --vaadin-button-background: var(--destructive);
    --vaadin-button-text-color: var(--destructive-foreground);
}

vaadin-button[theme~="small"] {
    --vaadin-button-height: 1.75rem;
    --vaadin-button-padding: 0 0.5rem;
}

vaadin-button[theme~="large"] {
    --vaadin-button-height: 2.25rem;
}

vaadin-button:active:not([disabled]) {
    translate: 0 1px;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

:where(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field,
       vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-multi-select-combo-box,
       vaadin-select, vaadin-date-picker, vaadin-time-picker, vaadin-date-time-picker) {
    /* Transparent in light; a faint fill in dark, as in shadcn. */
    --vaadin-input-field-background: light-dark(transparent, color-mix(in oklab, var(--input-dark) 30%, transparent));
    --vaadin-input-field-border-color: var(--input);
    --vaadin-input-field-border-width: 1px;
    --vaadin-input-field-border-radius: var(--radius);
    --vaadin-input-field-padding: 0.25rem 0.625rem;
    --vaadin-input-field-placeholder-color: var(--muted-foreground);
    --vaadin-input-field-value-color: var(--foreground);
}

::part(input-field) {
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

[focus-ring]::part(input-field),
[focused]::part(input-field) {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
    outline: none;
}

[invalid]::part(input-field) {
    border-color: var(--destructive);
}

[invalid][focused]::part(input-field) {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
}

[disabled]::part(input-field) {
    background: color-mix(in oklab, var(--input) 50%, transparent);
    opacity: 0.5;
}

/* Field parts only: buttons also have a "label" part. */
:not(vaadin-button, vaadin-menu-bar-button, vaadin-upload-button)::part(label) {
    color: var(--foreground);
    font-weight: 500;
}

::part(helper-text) {
    color: var(--muted-foreground);
}

::part(error-message) {
    color: var(--destructive);
}

/* ── Checkbox & switch-like controls ─────────────────────────────────────── */

vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio) {
    border: 1px solid var(--input);
    box-shadow: var(--aura-shadow-xs);
}

vaadin-checkbox[checked]::part(checkbox),
vaadin-checkbox[indeterminate]::part(checkbox),
vaadin-radio-button[checked]::part(radio) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

vaadin-checkbox::part(checkbox) {
    border-radius: 4px;
}

/* ── Containers ──────────────────────────────────────────────────────────── */

vaadin-card {
    --vaadin-card-background: var(--card);
    --vaadin-card-border-color: color-mix(in oklab, var(--foreground) 10%, transparent);
    --vaadin-card-border-radius: calc(var(--radius) + 4px);
    --vaadin-card-shadow: none;
    color: var(--card-foreground);
}

vaadin-dialog::part(overlay),
vaadin-confirm-dialog::part(overlay) {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
    border-radius: calc(var(--radius) + 4px);
}

vaadin-dialog::part(backdrop),
vaadin-confirm-dialog::part(backdrop) {
    background: oklch(0 0 0 / 0.1);
    backdrop-filter: blur(4px);
}

::part(overlay) {
    --aura-surface-level: 0;
}

vaadin-notification-card::part(overlay) {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
}

vaadin-tooltip-overlay::part(overlay),
vaadin-tooltip::part(overlay) {
    background: var(--foreground);
    color: var(--background);
    font-size: 0.75rem;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

vaadin-app-layout::part(drawer) {
    background: var(--sidebar);
    color: var(--sidebar-foreground);
    border-inline-end: 1px solid var(--sidebar-border);
}

vaadin-app-layout::part(navbar) {
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

vaadin-side-nav-item::part(content) {
    border-radius: calc(var(--radius) - 2px);
}

vaadin-side-nav-item:hover::part(content) {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
}

vaadin-side-nav-item[current]::part(content) {
    background: var(--sidebar-accent);
    color: var(--sidebar-accent-foreground);
    font-weight: 500;
}

/* Tabs: shadcn's segmented "pill" list. */
vaadin-tabs {
    background: var(--muted);
    border-radius: var(--radius);
    padding: 3px;
    width: fit-content;
    box-shadow: none;
}

vaadin-tab {
    border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground);
    font-weight: 500;
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    background: transparent;
    box-shadow: none;
}

vaadin-tab[selected] {
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--aura-shadow-xs);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

vaadin-grid {
    --vaadin-grid-border-color: var(--border);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    box-shadow: none;
}

/* Inside a card the card already draws the frame (shadcn puts tables straight into cards). */
:is(vaadin-card, .iz-card, .admin-card) vaadin-grid {
    border: 0;
    border-radius: 0;
}

vaadin-grid::part(header-cell) {
    color: var(--muted-foreground);
    font-weight: 500;
}

vaadin-grid::part(row):hover {
    background: color-mix(in oklab, var(--muted) 50%, transparent);
}

vaadin-grid::part(selected-row-cell) {
    background: var(--muted);
}

/* ── Utility classes (use from Java with addClassName) ───────────────────── */

/* Card: new Div() with addClassName("iz-card"); children iz-card-title / iz-card-description. */
.iz-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
    box-sizing: border-box;
}

.iz-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375;
}

.iz-card-description {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Badge: Span with "iz-badge" plus an optional iz-badge-secondary / -outline / -destructive. */
.iz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    box-sizing: border-box;
}

.iz-badge-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.iz-badge-outline {
    background: transparent;
    color: var(--foreground);
    border-color: var(--border);
}

.iz-badge-destructive {
    background: color-mix(in oklab, var(--destructive) 10%, transparent);
    color: var(--destructive);
}

/* Alert: Div with "iz-alert" (+ iz-alert-destructive); title in .iz-alert-title. */
.iz-alert {
    display: grid;
    gap: 0.125rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--card-foreground);
    font-size: 0.875rem;
}

.iz-alert-title {
    font-weight: 500;
}

.iz-alert > :not(.iz-alert-title) {
    color: var(--muted-foreground);
}

.iz-alert-destructive,
.iz-alert-destructive > :not(.iz-alert-title) {
    color: var(--destructive);
}

.iz-muted {
    color: var(--muted-foreground);
}

.iz-separator {
    height: 1px;
    width: 100%;
    background: var(--border);
    border: 0;
    margin: 0;
}