/* Inter — self-hosted (CSP: style-src/script-src 'self', no CDN fonts). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/inter-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.app-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #0D009D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    margin-left: 8px;
}

/* ---- /Account pages (static SSR, outside the Mud shell) ---- */

.account-shell {
    min-height: 100vh;
    background: #F6F7FB;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #1A1C29;
    font-size: .875rem;
}

.account-card {
    background: #fff;
    border: 1px solid #E9EBF0;
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.account-card h1 { font-size: 1.25rem; font-weight: 500; margin: 0 0 4px; }
.account-card h2 { font-size: .875rem; font-weight: 400; color: #6B7280; margin: 0 0 16px; }
.account-card h3 { font-size: 1rem; font-weight: 500; }
.account-card hr { border: 0; border-top: 1px solid #E9EBF0; margin: 16px 0; }
.account-card section { margin: 0; }

.account-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 24px;
}

.account-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #0D009D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.account-card .form-floating {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column-reverse;
}

.account-card .form-label {
    display: block;
    font-size: .8125rem;
    color: #6B7280;
    margin: 0 0 4px;
}

.account-card .form-check-input { accent-color: #0D009D; }

.account-card input.form-control {
    width: 100%;
    border: 1px solid #E9EBF0;
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    color: #1A1C29;
    background: #fff;
    box-sizing: border-box;
}

.account-card input.form-control:focus {
    outline: 2px solid #0D009D;
    outline-offset: -1px;
    border-color: #0D009D;
}

.account-card .btn {
    display: inline-block;
    border: 1px solid #E9EBF0;
    border-radius: 8px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: #1A1C29;
}

.account-card .btn-primary {
    background: #0D009D;
    border-color: #0D009D;
    color: #fff;
}

.account-card .btn-primary:hover { background: #0A0078; }
.account-card .btn-link { border: 0; background: none; color: #0D009D; padding: 4px 0; }
.account-card .w-100 { width: 100%; }
.account-card .text-danger { color: #E5484D; font-size: .8125rem; }
.account-card .checkbox { margin: 12px 0; }
.account-card ul { padding-left: 18px; }
.account-card .nav { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.account-card .nav-link { color: #6B7280; text-decoration: none; padding: 6px 10px; border-radius: 8px; display: block; }
.account-card .nav-link:hover { background: #F6F7FB; }
.account-card .nav-link.active { background: #EAE9F5; color: #0D009D; font-weight: 500; }
.account-card a { color: #0D009D; }

.account-card .alert { border: 1px solid #E9EBF0; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.account-card .alert-danger { border-color: #E5484D; color: #E5484D; }
.account-card .alert-success { border-color: #12A150; color: #12A150; }

/* ---- Blazor error UI ---- */

#blazor-error-ui {
    color-scheme: light only;
    background: #F5A524;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}