/* Add your styles here */

.app-logo {
    border-radius: min(40%, var(--vaadin-radius-m));
    margin-inline-start: var(--vaadin-padding-inline-container);
}

.app-name {
    font-weight: var(--aura-font-weight-semibold);
    font-size: var(--aura-font-size-l);
}

.app-footer {
    color: var(--vaadin-text-color-secondary);
    font-size: var(--aura-font-size-s);
}

/* TODO: This is only for demo purposes. You can delete it. */
vaadin-side-nav:has(vaadin-side-nav-item:only-child)::after {
    display: block;
    content: "More menu items will appear here when you add more views.";
    font-size: var(--aura-font-size-s);
    color: var(--vaadin-text-color-secondary);
    box-sizing: border-box;
    padding: 1em;
    max-width: 14em;
    min-width: 100%;
    white-space: normal;
}

/* ---------- Landing page ---------- */

.landing-view {
    background: var(--aura-background-color, #fff);
}

.landing-top-bar {
    padding: var(--aura-space-m, 1rem);
}

.landing-login-button {
    font-size: var(--aura-font-size-s, 0.875rem);
    opacity: 0.75;
}

.landing-login-button:hover {
    opacity: 1;
}

.landing-hero {
    max-width: 640px;
    max-height: 480px;
    opacity: 0.95;
}

.landing-title-block {
    margin-top: var(--aura-space-l, 1.5rem);
    margin-bottom: var(--aura-space-xl, 2rem);
    text-align: center;
}

.landing-title {
    font-size: var(--aura-font-size-xxxl, 3rem);
    font-weight: var(--aura-font-weight-bold, 700);
    margin: 0;
    color: var(--aura-primary-text-color, var(--vaadin-text-color));
}

.landing-subtitle {
    font-size: var(--aura-font-size-l, 1.25rem);
    color: var(--vaadin-text-color-secondary);
    margin: 0;
}

.landing-tagline {
    font-size: var(--aura-font-size-xs, 0.75rem);
    color: var(--vaadin-text-color-tertiary);
    margin-top: var(--aura-space-s, 0.5rem);
}

/* ---------- Dashboard stat cards ---------- */

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aura-space-xs, 0.25rem);
    padding: var(--aura-space-l, 1.5rem);
    background: var(--aura-background-secondary-color, var(--aura-secondary-background-color, #f5f5f5));
    border: 1px solid var(--aura-border-color, rgba(0, 0, 0, 0.08));
    border-radius: var(--aura-radius-m, 8px);
    min-width: 160px;
    flex: 1 1 200px;
}

.stat-label {
    font-size: var(--aura-font-size-s, 0.875rem);
    font-weight: var(--aura-font-weight-semibold, 600);
    color: var(--vaadin-text-color-secondary);
    margin: 0;
}

.stat-value {
    font-size: var(--aura-font-size-xxl, 2rem);
    font-weight: var(--aura-font-weight-bold, 700);
    color: var(--aura-primary-text-color, var(--vaadin-text-color));
}