/* ============================================================
   Transport Booking System — Auth Pages Stylesheet
   Covers: login, register, verify, verified, password reset,
           2FA enable/setup/verify pages.
   Shares the same design tokens as booking-admin.css.
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
    --primary:        #2563eb;
    --primary-dark:   #1d4ed8;
    --primary-light:  #eff6ff;
    --secondary:      #64748b;
    --success:        #16a34a;
    --success-light:  #f0fdf4;
    --danger:         #dc2626;
    --danger-light:   #fef2f2;
    --warning:        #d97706;
    --warning-light:  #fffbeb;
    --info:           #0891b2;
    --info-light:     #ecfeff;
    --purple:         #7c3aed;
    --purple-light:   #f5f3ff;
    --surface:        #f1f5f9;
    --surface-alt:    #e8edf3;
    --border:         #d1d9e0;
    --border-focus:   #93c5fd;
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --white:          #ffffff;
    --shadow-sm:      0 1px 2px rgba(0,0,0,.07);
    --shadow-md:      0 3px 8px rgba(0,0,0,.09);
    --shadow-lg:      0 8px 20px rgba(0,0,0,.12);
    --radius-sm:      5px;
    --radius-md:      8px;
    --radius-lg:      11px;
    --transition:     all .18s ease;

    /* Sizing tokens */
    --input-h:        38px;
    --input-pad-y:    .5rem;
    --input-pad-x:    .75rem;
    --input-fs:       .875rem;
    --form-gap:       .85rem;
}

/* ════════════════════════════════════════════════════════════
   AUTH PAGE WRAPPER  (layouts.auth — container-scroller)
   ════════════════════════════════════════════════════════════ */
.full-page-wrapper.auth-pages {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
}

/* ════════════════════════════════════════════════════════════
   AUTH CARD  (the centred white card on login/register etc.)
   ════════════════════════════════════════════════════════════ */
.auth-pages .card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--white);
    padding: 0;
}

.auth-pages .card-body {
    padding: 2rem 2rem 1.5rem;
    background: var(--white);
}

/* Card title (Sign In, Register, Reset Password) */
.auth-pages .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    letter-spacing: -.01em;
}

/* Logo image container */
.auth-pages .card-body > p:first-child {
    margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════
   FORM GROUPS & INPUTS
   ════════════════════════════════════════════════════════════ */
.auth-pages .form-group {
    margin-bottom: var(--form-gap);
}

.auth-pages .form-group label,
.auth-pages .control-label {
    font-weight: 600;
    font-size: .75rem;
    color: var(--text-secondary);
    margin-bottom: .3rem;
    display: block;
    letter-spacing: .02em;
}

.auth-pages .form-group label.sr-only,
.auth-pages .control-label.sr-only {
    display: none;
}

/* Text / email / password inputs */
.auth-pages .form-control,
.auth-pages input.p_input {
    width: 100%;
    height: var(--input-h);
    padding: var(--input-pad-y) var(--input-pad-x);
    font-size: var(--input-fs);
    color: var(--text-primary) !important;
    background: var(--white) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
    line-height: 1;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.auth-pages .form-control:hover,
.auth-pages input.p_input:hover {
    border-color: #b0bec5 !important;
}

.auth-pages .form-control:focus,
.auth-pages input.p_input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.13), inset 0 1px 2px rgba(0,0,0,.04) !important;
    background: var(--white) !important;
}

.auth-pages .form-control::placeholder,
.auth-pages input.p_input::placeholder {
    color: var(--text-muted);
    font-size: .82rem;
}

/* ── Validation error state ── */
.auth-pages .has-error .form-control,
.auth-pages .has-error input.p_input {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important;
}

.auth-pages .help-block {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--danger);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   REMEMBER ME / FORGOT PASSWORD ROW
   ════════════════════════════════════════════════════════════ */
.auth-pages .form-check {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.auth-pages .form-check label {
    font-size: .82rem;
    color: var(--text-secondary);
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}

.auth-pages .form-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary);
    margin: 0;
}

.auth-pages .forgot-pass {
    font-size: .8rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.auth-pages .forgot-pass:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   CAPTCHA WIDGET
   ════════════════════════════════════════════════════════════ */
.auth-pages .captcha {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.auth-pages .captcha img,
.auth-pages .captcha span img {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    height: 44px;
    display: block;
}

.auth-pages .btn-refresh {
    background: var(--surface-alt);
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: .4rem .75rem;
    font-size: .8rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.auth-pages .btn-refresh:hover {
    background: var(--border);
    color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.auth-pages .btn {
    font-size: .875rem;
    font-weight: 600;
    padding: .6rem 1.25rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: var(--transition);
    letter-spacing: .01em;
    white-space: nowrap;
    line-height: 1;
}

.auth-pages .btn:hover {
    transform: translateY(-1px);
    opacity: .9;
    text-decoration: none;
}

.auth-pages .btn:active { transform: translateY(0); }

.auth-pages .btn-primary {
    background: var(--primary);
    color: var(--white);
}
.auth-pages .btn-primary:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.auth-pages .btn-danger {
    background: var(--danger);
    color: var(--white);
}
.auth-pages .btn-danger:hover {
    background: #b91c1c;
    color: var(--white);
}

.auth-pages .btn-success {
    background: var(--success);
    color: var(--white);
}
.auth-pages .btn-success:hover {
    background: #15803d;
    color: var(--white);
}

.auth-pages .btn-info {
    background: var(--info);
    color: var(--white);
}
.auth-pages .btn-info:hover {
    background: #0e7490;
    color: var(--white);
}

.auth-pages .btn-warning {
    background: var(--warning);
    color: var(--white);
}
.auth-pages .btn-warning:hover {
    background: #b45309;
    color: var(--white);
}

.auth-pages .btn-block {
    width: 100%;
    justify-content: center;
}

.auth-pages .btn-lg {
    padding: .75rem 1.5rem;
    font-size: .95rem;
    border-radius: var(--radius-md);
}

/* ── "Sign in" / submit button — slightly bolder appearance ── */
.auth-pages .btn.btn-lg.btn-block {
    margin-top: .25rem;
    letter-spacing: .02em;
}

/* ── "Back to sign in" / existing user links ── */
.auth-pages .existing-user {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: .75rem;
}

.auth-pages .existing-user a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-pages .existing-user a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════
   ALERT MESSAGES  (inside auth card)
   ════════════════════════════════════════════════════════════ */
.auth-pages .alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .875rem;
    border-radius: var(--radius-md);
    margin-bottom: .75rem;
    font-size: .82rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.auth-pages .alert-success {
    background: var(--success-light);
    border-color: #bbf7d0;
    color: #166534;
    border-left: 3px solid var(--success);
}

.auth-pages .alert-danger {
    background: var(--danger-light);
    border-color: #fecaca;
    color: #991b1b;
    border-left: 3px solid var(--danger);
}

.auth-pages .alert-warning {
    background: var(--warning-light);
    border-color: #fde68a;
    color: #92400e;
    border-left: 3px solid var(--warning);
}

.auth-pages .alert-info {
    background: var(--info-light);
    border-color: #a5f3fc;
    color: #164e63;
    border-left: 3px solid var(--info);
}

/* ════════════════════════════════════════════════════════════
   2FA VERIFY PAGE — centred card
   ════════════════════════════════════════════════════════════ */
.auth-pages h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.auth-pages small {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   htsDisplay PAGES  (layouts.app / layouts.form)
   — verified, verify email, 2fa enable, 2fa setup
   ════════════════════════════════════════════════════════════ */
.htsDisplay {
    max-width: 100%;
    padding: .5rem .5rem 2rem;
}

/* Card */
.htsDisplay .card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: .6rem;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow var(--transition);
}
.htsDisplay .card:hover { box-shadow: var(--shadow-md); }

.htsDisplay .card-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: var(--white);
    padding: .5rem 1rem;
    border-bottom: none;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    line-height: 1.4;
}

.htsDisplay .navbar-brand {
    font-size: .9rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    letter-spacing: .01em;
}

.htsDisplay .card-body {
    padding: .75rem;
    background: var(--surface);
}

/* Inner cards (e.g. 2FA QR code card, recovery codes card) */
.htsDisplay .card-body > .card {
    background: var(--white);
    border: 1px solid var(--border);
}

.htsDisplay .card-body > .card .card-header {
    background: var(--surface-alt);
    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 700;
    padding: .45rem .875rem;
}

.htsDisplay .card-body > .card .card-body {
    background: var(--white);
    padding: 1rem;
    font-size: .875rem;
    color: var(--text-primary);
}

/* Headings inside card-body */
.htsDisplay h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: .5rem;
}

/* Alert messages */
.htsDisplay .alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .875rem;
    border-radius: var(--radius-md);
    margin-bottom: .75rem;
    font-size: .82rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.htsDisplay .alert-success {
    background: var(--success-light);
    border-color: #bbf7d0;
    color: #166534;
    border-left: 3px solid var(--success);
}

.htsDisplay .alert-danger {
    background: var(--danger-light);
    border-color: #fecaca;
    color: #991b1b;
    border-left: 3px solid var(--danger);
}

.htsDisplay .alert-info {
    background: var(--info-light);
    border-color: #a5f3fc;
    color: #164e63;
    border-left: 3px solid var(--info);
}

/* Buttons in htsDisplay */
.htsDisplay .btn {
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: var(--transition);
    letter-spacing: .01em;
    white-space: nowrap;
    line-height: 1;
}
.htsDisplay .btn:hover { transform: translateY(-1px); opacity: .88; text-decoration: none; }
.htsDisplay .btn:active { transform: translateY(0); }

.htsDisplay .btn-primary  { background: var(--primary);  color: var(--white); }
.htsDisplay .btn-primary:hover  { background: var(--primary-dark); color: var(--white); }
.htsDisplay .btn-success  { background: var(--success);  color: var(--white); }
.htsDisplay .btn-success:hover  { background: #15803d; color: var(--white); }
.htsDisplay .btn-danger   { background: var(--danger);   color: var(--white); }
.htsDisplay .btn-danger:hover   { background: #b91c1c; color: var(--white); }
.htsDisplay .btn-warning  { background: var(--warning);  color: var(--white); }
.htsDisplay .btn-warning:hover  { background: #b45309; color: var(--white); }
.htsDisplay .btn-info     { background: var(--info);     color: var(--white); }
.htsDisplay .btn-info:hover     { background: #0e7490; color: var(--white); }

.htsDisplay .btn-lg { padding: .6rem 1.35rem; font-size: .92rem; border-radius: var(--radius-md); }
.htsDisplay .btn-block { width: 100%; justify-content: center; }

/* Form controls */
.htsDisplay .form-group { margin-bottom: .6rem; }

.htsDisplay .form-group label,
.htsDisplay .control-label {
    font-weight: 600;
    font-size: .72rem;
    color: var(--text-secondary);
    margin-bottom: .2rem;
    display: block;
    letter-spacing: .02em;
}

.htsDisplay .form-control {
    width: 100%;
    padding: .38rem .7rem;
    font-size: .85rem;
    color: var(--text-primary) !important;
    background: var(--white) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.03) !important;
    height: 32px;
    line-height: 1;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.htsDisplay .form-control:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,.12), inset 0 1px 2px rgba(0,0,0,.03) !important;
}

/* 2FA secret key & recovery codes */
.htsDisplay .font-weight-bold {
    font-weight: 700 !important;
}

.htsDisplay ul {
    padding-left: 1.25rem;
    margin-bottom: .5rem;
}

.htsDisplay ul li {
    font-size: .875rem;
    color: var(--text-primary);
    margin-bottom: .25rem;
    font-family: monospace;
    letter-spacing: .04em;
}

/* QR code image */
.htsDisplay img[src*="svg"],
.htsDisplay canvas {
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    padding: .4rem;
    background: var(--white);
}

/* hr divider */
.htsDisplay hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: .75rem 0;
}

/* ════════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════════ */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.mb-4 { margin-bottom: .875rem; }
.mb-3 { margin-bottom: .6rem; }
.mb-2 { margin-bottom: .4rem; }
.mt-2 { margin-top: .4rem; }
.mt-3 { margin-top: .6rem; }
.mt-4 { margin-top: .875rem; }
.my-3 { margin-top: .6rem; margin-bottom: .6rem; }
.pt-4 { padding-top: .875rem; }
.p-3  { padding: .6rem; }
.col-lg-6 { max-width: 100%; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }

@media print {
    .btn, .dropdown { display: none !important; }
}