@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ====================================================================
   Wai XAU theme — modern finance: slate primary + gold accent + Inter
   ==================================================================== */

html {
    /* Primary (slate-900-ish) */
    --lumo-primary-color: hsl(217, 33%, 17%);
    --lumo-primary-color-50pct: hsla(217, 33%, 17%, 0.5);
    --lumo-primary-color-10pct: hsla(217, 33%, 17%, 0.1);
    --lumo-primary-text-color: hsl(217, 33%, 14%);
    --lumo-primary-contrast-color: #fff;

    /* Surface */
    --lumo-base-color: hsl(220, 33%, 99%);
    --lumo-tint: #ffffff;
    --lumo-shade: hsl(217, 33%, 14%);

    /* Tighter, more professional radii */
    --lumo-border-radius-s: 4px;
    --lumo-border-radius-m: 6px;
    --lumo-border-radius-l: 10px;

    /* Typography */
    --lumo-font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --lumo-font-size-xxxl: 2rem;

    /* App accent token */
    --waixau-accent: hsl(40, 76%, 45%);
    --waixau-accent-soft: hsla(40, 76%, 45%, 0.15);
    --waixau-accent-strong: hsl(40, 76%, 30%);
    --waixau-card-shadow: 0 4px 16px hsla(217, 33%, 14%, 0.06);
}

/* ====================================================================
   App shell
   ==================================================================== */

vaadin-app-layout::part(navbar) {
    background: var(--lumo-base-color);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    box-shadow: 0 1px 2px hsla(217, 33%, 14%, 0.04);
}

vaadin-app-layout::part(drawer) {
    background: var(--lumo-contrast-5pct);
    border-right: 1px solid var(--lumo-contrast-10pct);
}

/* Brand mark inside the header */
.waixau-brand-icon {
    color: var(--waixau-accent);
    width: 1.5em;
    height: 1.5em;
}

.waixau-greeting {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    margin-right: var(--lumo-space-m);
}

/* ====================================================================
   Data grid: small, uppercase, muted header cells
   ==================================================================== */

vaadin-grid::part(header-cell) {
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
    text-transform: uppercase;
    font-size: var(--lumo-font-size-xs);
    letter-spacing: 0.04em;
}

/* ====================================================================
   List + editor screens
   ==================================================================== */

.entity-list-view .entity-list-toolbar {
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    background: var(--lumo-base-color);
}

.entity-editor-panel {
    border-left: 1px solid var(--lumo-contrast-10pct);
    background: var(--lumo-base-color);
    padding: var(--lumo-space-l);
    overflow-y: auto;
}

.entity-form-buttons {
    margin-top: var(--lumo-space-m);
    padding-top: var(--lumo-space-m);
    border-top: 1px solid var(--lumo-contrast-10pct);
    justify-content: flex-end;
    width: 100%;
}

.entity-form-audit {
    margin-top: var(--lumo-space-m);
    padding-top: var(--lumo-space-s);
    border-top: 1px solid var(--lumo-contrast-10pct);
}

.child-section {
    margin-top: var(--lumo-space-m);
    padding-top: var(--lumo-space-m);
    border-top: 1px solid var(--lumo-contrast-10pct);
}

.child-section-header h4 {
    margin: 0;
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ====================================================================
   Dashboard
   ==================================================================== */

.dashboard-view .kpi-card,
.dashboard-view .info-card {
    background: var(--lumo-base-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-l);
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-s);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.dashboard-view .kpi-card {
    min-width: 180px;
}

.dashboard-view .kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--waixau-card-shadow);
    border-color: var(--waixau-accent-soft);
}

.dashboard-view .kpi-card .kpi-label {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

.dashboard-view .kpi-card .kpi-count {
    font-size: var(--lumo-font-size-xxxl);
    font-weight: 700;
    color: var(--lumo-primary-text-color);
}

.dashboard-view .kpi-card .kpi-icon {
    color: var(--waixau-accent);
    --vaadin-icon-size: 1.5em;
}

.dashboard-view .info-card {
    min-width: 220px;
}

.dashboard-view .info-card h3 {
    margin: 0;
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-view .info-card .xau-price {
    font-size: var(--lumo-font-size-xxxl);
    font-weight: 700;
    color: var(--lumo-primary-text-color);
}

.dashboard-view .info-card .xau-when {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

/* ====================================================================
   Login
   ==================================================================== */

.login-view {
    background:
        radial-gradient(circle at 20% 20%, var(--waixau-accent-soft), transparent 40%),
        linear-gradient(180deg, var(--lumo-contrast-5pct), var(--lumo-base-color));
}

.login-view h1 {
    color: var(--lumo-primary-text-color);
    letter-spacing: -0.01em;
}

.login-view vaadin-login-form {
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--waixau-card-shadow);
    overflow: hidden;
}

/* ====================================================================
   Custom gold badge variant — for SysAdmin etc.
   Usage:  span.getElement().getThemeList().add("badge");
           span.getElement().getThemeList().add("gold");
   ==================================================================== */

[theme~="badge"][theme~="gold"] {
    background-color: var(--waixau-accent-soft);
    color: var(--waixau-accent-strong);
}