/* nkpt-identity — Razor stylesheet (NKPT Connect)
 * Brand: Nha Khoa Phương Thành  |  gold #BE8B43  |  maroon #5B2F39
 */

:root {
    --brand-gold:        #BE8B43;
    --brand-gold-light:  #CBA269;
    --brand-gold-dark:   #98692C;
    --brand-maroon:      #5B2F39;
    --brand-maroon-light:#7D4F58;
    --brand-maroon-dark: #3A0310;

    --page-bg:  #fbf7ec;
    --surface:  #FFFFFF;

    /* neutral ink scale (text + lines on light surfaces) */
    --ink-900: rgba(0,0,0,.87);
    --ink-700: rgba(0,0,0,.72);
    --ink-500: rgba(0,0,0,.60);
    --ink-400: rgba(0,0,0,.45);
    --ink-300: rgba(0,0,0,.23);
    --ink-200: rgba(0,0,0,.12);
    --ink-100: rgba(0,0,0,.05);

    --success-fg: #065F46; --success-bg: #D1FAE5;
    --danger-fg:  #991B1B; --danger-bg:  #FEE2E2;
    --warning-fg: #92400E; --warning-bg: #FEF3C7;
    --info-fg:    #075985; --info-bg:    #E0F2FE;

    --radius-card:   10px;
    --radius-input:  6px;
    --radius-button: 6px;
    --radius-chip:   999px;

    --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    --shadow-elev: 0 20px 48px -12px rgba(0,0,0,.18), 0 6px 16px -4px rgba(0,0,0,.10);

    --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --gap-1: 4px; --gap-2: 8px;  --gap-3: 12px; --gap-4: 16px;
    --gap-5: 20px; --gap-6: 24px; --gap-8: 32px; --gap-10: 40px;
}

/* Material Symbols Rounded — icon font */
.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-900);
    background: var(--page-bg);
    min-height: 100vh;
}

a { color: var(--brand-gold-dark); text-decoration: none; }
a:hover { color: var(--brand-gold); text-decoration: underline; }

h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.25; color: var(--ink-900); font-weight: 700; }
h1 { font-size: 1.625rem; letter-spacing: -.015em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
p  { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---- Auth shell — split panel --------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
}

/* LEFT — brand panel */
.auth-panel--brand {
    flex: 1.05;
    min-width: 0;
    background: linear-gradient(150deg, #3A0310 0%, #5B2F39 60%, #6E3A45 100%);
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px;
    overflow: hidden;
}

/* large decorative watermark mark, bottom-right */
.auth-brand-watermark {
    position: absolute;
    width: 420px;
    height: auto;
    bottom: -60px;
    right: -60px;
    opacity: .14;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    filter: brightness(0) invert(1);
}

.auth-brand-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-brand-top-mark {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.auth-brand-top-mark img {
    height: 34px;
    width: auto;
    display: block;
}

.auth-brand-top-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.auth-brand-top-title {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
}

.auth-brand-top-title--light {
    font-weight: 300;
    opacity: .85;
}

.auth-brand-top-sub {
    font-size: 11.5px;
    opacity: .7;
    margin-top: 2px;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
}

.auth-brand-name {
    font-size: clamp(28px, 2.6vw, 34px);
    font-weight: 300;
    color: #fff;
    line-height: 1.18;
    margin-bottom: var(--gap-5);
}

.auth-brand-sub {
    font-size: 0.9375rem;
    color: rgba(255,255,255,.82);
    font-weight: 300;
    line-height: 1.7;
    max-width: 440px;
}

/* feature chips (login-only, injected via BrandExtra section) */
.auth-brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--gap-8);
}

.auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    font-size: 0.8125rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}

.auth-chip .material-symbols-rounded {
    font-size: 18px;
    color: var(--brand-gold-light);
}

.auth-brand-bottom {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: rgba(255,255,255,.6);
    font-weight: 300;
}

/* RIGHT — form panel */
.auth-panel--form {
    flex: .95;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 56px;
    overflow-y: auto;
    background: var(--page-bg);
}

.auth-form-inner {
    width: 100%;
    max-width: 392px;
    background: transparent;
}

.auth-form-inner--wide { max-width: 460px; }

/* brand logo above the form */
.auth-card-brand {
    display: flex;
    align-items: center;
    margin-bottom: var(--gap-6);
}

.auth-card-brand__logo {
    height: 36px;
    width: auto;
    display: block;
}

/* card body — wraps @RenderBody() */
.auth-card-body {
    padding: 0;
}

/* ---- Login-only extras --------------------------------------------------- */
/* options row: remember checkbox + forgot link */
.form-options {
    margin-bottom: var(--gap-5);
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--ink-700);
    cursor: pointer;
    user-select: none;
}

.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-gold);
    cursor: pointer;
}

.link-gold {
    color: var(--brand-gold-dark);
    font-size: 0.875rem;
    font-weight: 500;
}
.link-gold:hover { color: var(--brand-gold); text-decoration: underline; }

/* "hoặc" divider */
.or-divider {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    margin: var(--gap-5) 0;
    color: var(--ink-400);
    font-size: 0.8125rem;
}
.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-200);
}

/* security note box */
.security-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: var(--gap-6);
    padding: 13px 14px;
    border-radius: 10px;
    background: rgba(190,139,67,.12);
    color: var(--brand-gold-dark);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.security-note .material-symbols-rounded {
    font-size: 20px;
    color: var(--brand-gold-dark);
    margin-top: 1px;
}

/* ---- Card title / subtitle (rendered inside @RenderBody()) --------------- */
.auth-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: var(--gap-1);
}

.auth-card__subtitle {
    color: var(--ink-500);
    font-size: 0.875rem;
    margin-bottom: var(--gap-6);
    line-height: 1.5;
}

/* ---- Forms --------------------------------------------------------------- */
.form-row { margin-bottom: var(--gap-4); }
.form-row:last-of-type { margin-bottom: var(--gap-6); }

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--ink-700);
    font-size: 0.8125rem;
}

.form-input,
.form-textarea,
.form-select {
    display: block;
    width: 100%;
    padding: 11px 13px;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.4;
    color: var(--ink-900);
    background: var(--surface);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-input);
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
}

.form-input::placeholder { color: var(--ink-400); }

.form-input:hover:not(:disabled),
.form-textarea:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: var(--ink-300); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px var(--brand-gold);
}

.form-input:disabled {
    background: var(--ink-100);
    color: var(--ink-500);
    cursor: not-allowed;
}

.form-input.is-invalid { border-color: #DC2626; }
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

.form-error {
    display: block;
    margin-top: 5px;
    color: #DC2626;
    font-size: 0.8125rem;
}

.form-help {
    display: block;
    margin-top: 5px;
    color: var(--ink-500);
    font-size: 0.8125rem;
}

.form-readonly {
    display: block;
    padding: 11px 13px;
    background: var(--ink-100);
    border: 1.5px dashed var(--ink-200);
    border-radius: var(--radius-input);
    color: var(--ink-700);
    font-size: 0.9375rem;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    padding: 10px 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    text-decoration: none;
    user-select: none;
    font-family: inherit;
}

.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primary {
    background: var(--brand-gold);
    color: #fff;
    border-color: var(--brand-gold);
}
.btn--primary:hover:not(:disabled) {
    background: var(--brand-gold-dark);
    border-color: var(--brand-gold-dark);
    box-shadow: 0 4px 14px rgba(190,139,67,.40);
    text-decoration: none;
    color: #fff;
}
.btn--primary:focus { outline: none; box-shadow: 0 0 0 3px rgba(190,139,67,.30); }

.btn--secondary {
    background: var(--surface);
    color: var(--ink-700);
    border-color: var(--ink-200);
}
.btn--secondary:hover:not(:disabled) {
    background: var(--ink-100);
    border-color: var(--ink-300);
    text-decoration: none;
    color: var(--ink-900);
}

.btn--ghost {
    background: transparent;
    color: var(--brand-gold);
    border-color: transparent;
    padding: 8px 12px;
}
.btn--ghost:hover:not(:disabled) {
    color: var(--brand-maroon);
    background: rgba(187,138,76,.08);
    text-decoration: none;
}

.btn--block { width: 100%; }
.btn--lg { padding: 13px 20px; font-size: 1rem; border-radius: var(--radius-button); }
.btn--sm { padding: 6px 12px; font-size: 0.8125rem; }
.btn .material-symbols-rounded { font-size: 20px; }

/* ---- Alerts -------------------------------------------------------------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-input);
    margin-bottom: var(--gap-4);
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid transparent;
}
.alert--success { background: var(--success-bg); color: var(--success-fg); border-color: rgba(6,95,70,.15); }
.alert--danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: rgba(153,27,27,.15); }
.alert--warning { background: var(--warning-bg); color: var(--warning-fg); border-color: rgba(146,64,14,.15); }
.alert--info    { background: var(--info-bg);    color: var(--info-fg);    border-color: rgba(7,89,133,.15); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.alert ul li { margin-bottom: 2px; }

/* ---- Utility ------------------------------------------------------------- */
.text-muted  { color: var(--ink-500); }
.text-small  { font-size: 0.8125rem; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--gap-2); }
.mt-4 { margin-top: var(--gap-4); }
.mt-6 { margin-top: var(--gap-6); }
.mb-2 { margin-bottom: var(--gap-2); }
.mb-4 { margin-bottom: var(--gap-4); }
.mb-6 { margin-bottom: var(--gap-6); }

.row-actions { display: flex; gap: var(--gap-3); justify-content: space-between; align-items: center; }
.row-actions--right { justify-content: flex-end; }
.divider { height: 1px; background: var(--ink-200); margin: var(--gap-5) 0; border: none; }

/* ---- MFA-specific -------------------------------------------------------- */
.mfa-qr {
    display: grid;
    place-items: center;
    padding: var(--gap-5);
    background: var(--ink-100);
    border-radius: var(--radius-input);
    margin-bottom: var(--gap-4);
}
.mfa-qr img {
    width: 200px; height: 200px;
    background: #fff; padding: 8px;
    border-radius: 8px; box-shadow: var(--shadow-card);
}

.mfa-secret {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: var(--ink-100);
    padding: 8px 12px;
    border-radius: var(--radius-chip);
    font-size: 0.8125rem;
    color: var(--ink-700);
    word-break: break-all;
    user-select: all;
}

.mfa-code-input {
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    padding: 14px;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-2);
    padding: var(--gap-4);
    background: var(--ink-100);
    border-radius: var(--radius-input);
    margin-bottom: var(--gap-4);
}
.recovery-codes__code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    background: var(--surface);
    padding: 8px 12px;
    border-radius: var(--radius-chip);
    font-size: 0.875rem;
    color: var(--ink-900);
    border: 1px solid var(--ink-200);
    text-align: center;
    user-select: all;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
    .auth-shell { flex-direction: column; }
    .auth-panel--brand { display: none; }
    .auth-panel--form  { padding: var(--gap-8) var(--gap-6); min-height: 100vh; }
}

@media print {
    body { background: #fff; }
    .auth-panel--brand { display: none; }
    .auth-panel--form  { padding: 0; }
    .auth-form-footer  { display: none; }
}