/* ============================================================
   PosGen AdminWeb — Design tokens (mirror of PosGen.Admin)
   ============================================================ */
:root {
    --pos-bg:        #0f1117;
    --pos-surface:   #1a1d27;
    --pos-border:    #2a2d3e;
    --pos-accent:    #6c63ff;
    --pos-accent-h:  #857dff;
    --pos-success:   #22c55e;
    --pos-error:     #ef4444;
    --pos-text:      #e8eaf0;
    --pos-muted:     #6b7280;
    --pos-radius:    14px;
    --pos-shadow:    0 8px 32px rgba(0,0,0,.45);
}

html, body {
    margin: 0;
    padding: 0;
    background: #0f1117;
    color: #e8eaf0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    height: 100%;
}

a { color: var(--pos-accent); }

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui {
    background: #1a1d27;
    border-top: 1px solid var(--pos-border);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--pos-text);
    font-size: .875rem;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Auth pages shared styles ── */
.pg-login-bg {
    min-height: 100vh;
    background: var(--pos-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.pg-login-card {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius);
    box-shadow: var(--pos-shadow);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    animation: pg-fadein .35s ease;
}

@keyframes pg-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}