/* ==========================================================================
   Vyapar-Doot — Authentication screens
   ========================================================================== */
.page-auth { background: var(--bg-page); }
.auth-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }

.auth-brandpanel { display: none; }

.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-4); }
.auth-card {
    width: 100%; max-width: 30rem; background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: var(--sp-6) var(--sp-5);
}
.auth-card__brand { justify-content: center; margin-bottom: var(--sp-5); }
.auth-card h1 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--sp-2); }
.auth-card .sub { text-align: center; color: var(--text-muted); margin-bottom: var(--sp-5); }
.auth-foot { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.auth-foot a { color: var(--text-muted); }

.auth-alt { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.form-row { display: grid; gap: var(--sp-3); }
@media (min-width: 520px) { .form-row.cols { grid-template-columns: 1fr 1fr; } }

/* Password field with toggle */
.pw-wrap { position: relative; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none;
    cursor: pointer; padding: 8px; color: var(--text-muted); min-height: 40px; min-width: 40px;
}
.pw-strength { height: 6px; border-radius: 999px; background: var(--bg-muted); margin-top: var(--sp-2); overflow: hidden; }
.pw-strength__bar { height: 100%; width: 0; background: var(--error); transition: width var(--transition), background var(--transition); }
.pw-strength__label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; display: block; }

.error-summary { background: var(--error-bg); color: var(--error); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.error-summary ul { margin: var(--sp-2) 0 0; padding-left: 1.2rem; }

.check-row { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.check-row input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }

/* Desktop split-screen */
@media (min-width: 992px) {
    .auth-wrap { grid-template-columns: 1fr 1fr; }
    .auth-brandpanel {
        display: flex; align-items: center; justify-content: center; padding: var(--sp-7);
        background: linear-gradient(150deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-primary-light));
        color: #fff; position: relative; overflow: hidden;
    }
    .auth-brandpanel::after {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(600px 300px at 100% 0%, rgba(245,158,11,0.25), transparent 60%);
    }
    .auth-brandpanel__inner { max-width: 26rem; position: relative; z-index: 1; }
    .auth-brandpanel__title { color: #fff; font-size: var(--fs-2xl); margin-top: var(--sp-6); }
    .auth-brandpanel__text { color: rgba(255,255,255,0.85); font-size: var(--fs-md); }
    .auth-brandpanel__list { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
    .auth-brandpanel__list li { color: #fff; font-weight: 600; }
}