/* Identity UI pages (login, set password, 2FA, account management) in the platform look. Loaded after theme.css by
   Areas/Identity/Pages/_Layout.cshtml only; uses the theme.css tokens, .btn, .input and .brand-logo. Login and ResetPassword
   are own localized pages; the other Identity UI pages keep their Bootstrap markup, whose classes are styled at the bottom. */

.auth-body { min-height: 100vh; line-height: 1.5;
    background: radial-gradient(900px 480px at 50% -10%, var(--accent-glow), transparent 70%), var(--bg-app); }
.auth-body a { color: var(--accent-hi); }
.auth-body a:hover { color: var(--accent); text-decoration: underline; }
.auth-shell { max-width: 400px; margin: 0 auto; padding: 72px 16px 48px; display: flex; flex-direction: column; gap: 18px; }
.auth-shell.wide { max-width: 760px; }
.auth-brand { display: flex; align-items: center; gap: 9px; padding: 0 2px; font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }

/* The card looks like a .modal: panel, 1px border, radius 10px, floating shadow. */
.auth-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-title, .auth-card h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.auth-card h2 { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.auth-card h3, .auth-card h4 { margin: 4px 0 0; font-size: var(--font-body); font-weight: 600; }
.auth-lead, .auth-card p { margin: 0; color: var(--text-secondary); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: var(--font-small); color: var(--text-secondary); cursor: pointer; }
.auth-check .check { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.auth-submit { width: 100%; height: 34px; text-align: center; text-decoration: none; }
a.auth-submit:hover { color: #fff; text-decoration: none; }
.auth-foot { margin: 0; font-size: var(--font-small); color: var(--text-tertiary); text-align: center; }

.auth-card .field { display: flex; flex-direction: column; gap: 5px; }
.auth-card .field > span:first-child { font-size: var(--font-small); font-weight: 500; color: var(--text-secondary); }
.auth-card .input { height: 34px; font-size: var(--font-body); }
.auth-card .input::placeholder { color: var(--text-dim); }
.field-error, .auth-card .text-danger { font-size: var(--font-small); color: var(--err); }
.field-error:empty { display: none; }
.auth-card .input-validation-error { border-color: var(--err); }
.notice { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: var(--font-small);
    color: var(--text-secondary); }
.notice.error { background: var(--err-bg); border-color: rgba(239, 68, 68, 0.3); color: var(--err); }
.notice.ok { background: var(--ok-bg); border-color: rgba(16, 185, 129, 0.3); color: var(--ok); }

/* Bootstrap classes used by the remaining Identity UI pages (2FA, account management, logout). */
.auth-card .form-floating, .auth-card .mb-3, .auth-card .form-group { display: flex; flex-direction: column-reverse; gap: 5px; margin: 0; }
.auth-card .form-floating > label, .auth-card .form-label, .auth-card .control-label { font-size: var(--font-small); font-weight: 500; color: var(--text-secondary); }
.auth-card .form-control, .auth-card .form-select { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); height: 34px;
    padding: 0 10px; font: var(--font-body) var(--font-sans); color: var(--text-primary); outline: none; width: 100%; }
.auth-card textarea.form-control { height: auto; padding: 8px 10px; }
.auth-card .form-control:focus, .auth-card .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.auth-card .form-control::placeholder { color: transparent; }
.auth-card .btn { text-decoration: none; }
.auth-card .btn:hover { text-decoration: none; }
.auth-card .btn-primary:hover { color: #fff; }
.auth-card .btn-lg { height: 34px; font-size: var(--font-body); }
.auth-card .btn-link { background: none; border-color: transparent; color: var(--accent-hi); padding: 0; height: auto; }
.auth-card .w-100 { width: 100%; }
.auth-card .alert { border-radius: var(--radius); padding: 10px 12px; font-size: var(--font-small); background: var(--bg-base); border: 1px solid var(--border);
    color: var(--text-secondary); }
.auth-card .alert-danger { background: var(--err-bg); border-color: rgba(239, 68, 68, 0.3); color: var(--err); }
.auth-card .alert-success { background: var(--ok-bg); border-color: rgba(16, 185, 129, 0.3); color: var(--ok); }
.auth-card .alert-warning { background: var(--warn-bg); border-color: rgba(245, 158, 11, 0.3); color: var(--warn); }
/* theme.css .row is a centred flex row; the Bootstrap grid rows need top alignment and wrapping. */
.auth-card .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.auth-card .col-md-3 { flex: 0 0 180px; }
.auth-card .col-md-9, .auth-card .col-md-6, .auth-card .col-md-4, .auth-card .col-12 { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-card .nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.auth-card .nav-link { display: block; padding: 6px 10px; border-radius: var(--radius); color: var(--text-secondary); text-decoration: none; }
.auth-card .nav-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.auth-card .nav-link.active { background: var(--accent-glow); color: var(--accent-hi); font-weight: 500; }
.auth-card hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 4px 0; }
.auth-card kbd, .auth-card code { font-family: var(--font-mono); font-size: var(--font-small); background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px; color: var(--accent-hi); }
.auth-card .form-check { display: flex; align-items: center; gap: 8px; }
.auth-card .form-check-input { width: 14px; height: 14px; accent-color: var(--accent); }
.auth-card .list-inline, .auth-card ul { margin: 0; padding-left: 20px; }
.auth-card .text-center { text-align: center; }