/* ==========================================================================
   aif-login.css
   Standalone styles for the Qualivigilance sign-in page.
   Replaces the Tailwind CDN. Every class is prefixed "aif-login-".

   Place at: static/css/aif-login.css
   The background image is referenced relative to this file:
   ../img/base/login_bg.png  ->  static/img/base/login_bg.png

   Breakpoints use the data-bp attribute that the counter-zoom script sets on
   <html> (sm >= 640, lg >= 1024, xl >= 1280 at the real, un-zoomed width),
   so the layout stays the same at any browser zoom level.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Scoped reset (replaces Tailwind preflight; :where keeps specificity 0)
   -------------------------------------------------------------------------- */
.aif-login-body,
.aif-login-body *,
.aif-login-body ::before,
.aif-login-body ::after {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
}

:where(.aif-login-body) :where(h1, h2, h3, p) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

:where(.aif-login-body) :where(svg) {
    display: block;
    vertical-align: middle;
}

:where(.aif-login-body) :where(button, input) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

:where(.aif-login-body) :where(button) {
    background-color: transparent;
    background-image: none;
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
}

:where(.aif-login-body) :where(a) {
    color: inherit;
    text-decoration: inherit;
}


/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
.aif-login-body {
    position: relative;
    margin: 0;
    /* Keep the page filling the real window after counter-zoom */
    min-height: calc(100vh * var(--z, 1));
    overflow-x: hidden;
    background-color: #150f33;
    color: #e2e8f0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Background image: fixed to the real window, immune to zoom */
/* Background image: fixed to the real window, immune to zoom */
.aif-login-body {
    --aif-login-bg: url("../img/base/login_bg_lightblue.371dfe8b3cba.png");
}

@media (prefers-color-scheme: dark) {
    .aif-login-body {
        --aif-login-bg: url("../img/base/login_bg_darkblue.74766920d466.png");
    }
}

.aif-login-body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw * var(--z, 1));
    height: calc(100vh * var(--z, 1));
    background: var(--aif-login-bg) center / cover no-repeat;
    z-index: -1;
    pointer-events: none;
}

.aif-login-body::selection,
.aif-login-body *::selection {
    background-color: #8b5cf6;
    color: #fff;
}

.aif-login-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh * var(--z, 1));
    padding: 1rem;
}

.aif-login-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 1320px;
}

.aif-login-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.aif-login-hidden {
    display: none !important;
}


/* --------------------------------------------------------------------------
   3. Left: brand tagline (desktop only)
   -------------------------------------------------------------------------- */
.aif-login-brand {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    min-height: 620px;
    padding-left: .5rem;
    padding-right: .5rem;
}

.aif-login-brand-inner {
    padding-bottom: 1rem;
}

.aif-login-headline {
    font-size: 2.25rem;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: gold;
    background: linear-gradient(4deg, #ccf6ffab, transparent);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

.aif-login-headline-accent {
    color: gold;
}

.aif-login-pillars {
    margin-top: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: black;
}

.aif-login-rule {
    margin-top: 1.5rem;
    width: 3.5rem;
    height: 3px;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, .9);
}


/* --------------------------------------------------------------------------
   4. Right: sign-in card
   -------------------------------------------------------------------------- */
.aif-login-card-col {
    display: flex;
    justify-content: center;
    width: 100%;
}

.aif-login-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    background-color: white;
}

.aif-login-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.aif-login-logo {
    width: 6rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.aif-login-title {
    margin-top: 1rem;
    font-size: 1.875rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: black;
}

.aif-login-subtitle {
    margin-top: .25rem;
    padding-left: .5em;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    letter-spacing: .5em;
    color: #a78bfa;
}

.aif-login-tagline {
    margin-top: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: black;
}

/* Sign in, register and verify (OTP) share one card. data-aif-panel on the card picks the one shown. */
.aif-login-card[data-aif-panel="login"] .aif-login-panel--register,
.aif-login-card[data-aif-panel="login"] .aif-login-panel--verify,
.aif-login-card[data-aif-panel="register"] .aif-login-panel--login,
.aif-login-card[data-aif-panel="register"] .aif-login-panel--verify,
.aif-login-card[data-aif-panel="verify"] .aif-login-panel--login,
.aif-login-card[data-aif-panel="verify"] .aif-login-panel--register {
    display: none;
}

.aif-login-panel-head {
    margin-bottom: 1.25rem;
    text-align: center;
}

.aif-login-panel-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: black;
}

.aif-login-panel-sub {
    margin-top: .125rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: #475569;
}

.aif-login-strong {
    font-weight: 600;
    color: #0f172a;
}

.aif-login-label {
    display: block;
    margin-bottom: .375rem;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #334155;
}


/* --------------------------------------------------------------------------
   5. Notices (maintenance banner + Django messages / errors)
   -------------------------------------------------------------------------- */
.aif-login-maintenance {
    margin-bottom: 1rem;
    padding: .625rem .875rem;
    border: 1px solid #fde68a;
    border-radius: .75rem;
    background-color: #fffbeb;
    font-size: .875rem;
    line-height: 1.25rem;
    color: #92400e;
}

.aif-login-messages {
    margin-bottom: 1rem;
}

.aif-login-messages > * + * {
    margin-top: .5rem;
}

.aif-login-notice {
    padding: .625rem .875rem;
    border: 1px solid #fecaca;
    border-radius: .75rem;
    background-color: #fef2f2;
    font-size: .875rem;
    line-height: 1.25rem;
    color: #b91c1c;
}

.aif-login-notice--success { background-color: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.aif-login-notice--warning { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.aif-login-notice--info    { background-color: #f0f9ff; border-color: #bae6fd; color: #075985; }
.aif-login-notice--error   { background-color: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.aif-login-notice-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}


/* --------------------------------------------------------------------------
   6. Form
   -------------------------------------------------------------------------- */
.aif-login-form > * + * {
    margin-top: 1rem;
}

/* Input wrapper on the white card */
.aif-login-field {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.aif-login-field:focus-within {
    border-color: #8b5cf6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22);
}

.aif-login-field-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .75rem;
    fill: black;
}

.aif-login-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.aif-login-field .aif-login-input {
    color: #0f172a;
}

/* Hint under a field (e.g. client code) */
.aif-login-help {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    margin-top: .375rem;
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
}

.aif-login-help-icon {
    flex-shrink: 0;
    width: .875rem;
    height: .875rem;
    margin-top: 1px;
    fill: #64748b;
}

.aif-login-field .aif-login-input::placeholder {
    color: #64748b;
    opacity: 1;
}

.aif-login-input--pw {
    padding-right: .5rem;
}

/* 6-digit OTP box: centered, monospaced, spaced out */
.aif-login-input--otp {
    padding-left: 4px; /* balances the trailing letter-spacing so the digits look centered */
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: 4px;
}

/* Keep browser autofill from restyling the inputs */
.aif-login-field .aif-login-input:-webkit-autofill,
.aif-login-field .aif-login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a;
    caret-color: #0f172a;
    transition: background-color 99999s ease-in-out 0s;
}

/* Show / hide password */
.aif-login-toggle {
    padding: .25rem;
    color: #475569;
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}

.aif-login-toggle:hover {
    color: black;
}

.aif-login-toggle:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.aif-login-eye {
    width: 1.25rem;
    height: 1.25rem;
}

/* Remember me / forgot password row */
.aif-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.aif-login-remember {
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.aif-login-remember-text {
    margin-left: .625rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: black;
}

/* Checkboxes (replaces the Tailwind forms plugin styling) */
.aif-login-checkbox {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: .25rem;
    background-color: transparent;
    background-origin: border-box;
    color: #8b5cf6;
    -webkit-user-select: none;
    user-select: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.aif-login-checkbox:checked {
    border-color: transparent;
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.aif-login-checkbox:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.aif-login-checkbox--remember,
.aif-login-checkbox--remember:checked {
    width: 18px;
    height: 18px;
    background-color: #1f97ca;
}

.aif-login-checkbox--remember:focus {
    box-shadow: 0 0 0 2px #8b5cf6;
}

.aif-login-checkbox--modal {
    width: 1rem;
    height: 1rem;
    margin-top: .125rem;
}

.aif-login-checkbox--modal:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b5cf6;
}

/* Links */
.aif-login-link {
    font-weight: 500;
    color: #57b0d8;
}

.aif-login-link:hover {
    text-decoration: underline;
}

.aif-login-link--sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

/* Submit button */
.aif-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .875rem 1.5rem;
    border: 1px solid rgba(196, 181, 253, .4);
    border-radius: .75rem;
    background: #5bcff0;
    color: #683ec5;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    box-shadow: 0 10px 26px -6px rgba(139, 92, 246, .6);
    transition: filter .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.aif-login-submit:hover {
    filter: brightness(1.05);
}

.aif-login-submit:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a78bfa, 0 10px 26px -6px rgba(139, 92, 246, .6);
}

.aif-login-submit-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* "Signing in..." spinner (injected by JS) */
@keyframes aif-login-spin {
    to { transform: rotate(360deg); }
}

.aif-login-spinner {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -.25rem;
    margin-right: .5rem;
    animation: aif-login-spin 1s linear infinite;
}

.aif-login-spinner-track { opacity: .25; }
.aif-login-spinner-arc   { opacity: .75; }

.aif-login-register {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
    color: black;
}

.aif-login-register--tight {
    margin-top: .5rem;
}


/* --------------------------------------------------------------------------
   7. Feature row
   -------------------------------------------------------------------------- */
.aif-login-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.aif-login-features > * + * {
    border-left: 1px solid #e2e8f0;
}

.aif-login-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

.aif-login-feature-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #7c3aed;
}

.aif-login-feature-label {
    font-size: .75rem;
    line-height: 1.375;
    color: #334155;
}


/* --------------------------------------------------------------------------
   8. Data privacy modal
   -------------------------------------------------------------------------- */
.aif-login-dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(8, 4, 30, .75);
}

.aif-login-dp-modal {
    width: 100%;
    max-width: 560px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: #1a1442;
    color: #e2e8f0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.aif-login-dp-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.aif-login-dp-body {
    max-height: 45vh;
    overflow-y: auto;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    font-size: 14px;
    line-height: 1.55;
}

.aif-login-dp-para + .aif-login-dp-para {
    margin-top: 8px;
}

.aif-login-dp-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
}

.aif-login-dp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.aif-login-dp-btn {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.aif-login-dp-btn--primary {
    border-color: rgba(167, 139, 250, .6);
    background: linear-gradient(180deg, #8b5cf6, #6d4aeb);
    color: #fff;
}

.aif-login-dp-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   9. Responsive overrides (order matters: sm, then lg, then xl)
   -------------------------------------------------------------------------- */

/* sm  >= 640px */
:root[data-bp~="sm"] .aif-login-main          { padding: 1.5rem; }
:root[data-bp~="sm"] .aif-login-card          { padding: 2.5rem; }
:root[data-bp~="sm"] .aif-login-logo          { width: 7rem; }
:root[data-bp~="sm"] .aif-login-title         { font-size: 38px; }
:root[data-bp~="sm"] .aif-login-subtitle      { font-size: 1rem; line-height: 1.5rem; }
:root[data-bp~="sm"] .aif-login-input         { font-size: 1rem; line-height: 1.5rem; }
:root[data-bp~="sm"] .aif-login-input--otp    { font-size: 1.25rem; line-height: 1.75rem; }  /* keeps the OTP size above the sm input rule */
:root[data-bp~="sm"] .aif-login-feature-label { font-size: 13px; }

/* lg  >= 1024px */
:root[data-bp~="lg"] .aif-login-main     { padding: 2.5rem; }
:root[data-bp~="lg"] .aif-login-grid     { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
:root[data-bp~="lg"] .aif-login-brand    { display: flex; grid-column: span 7 / span 7; }
:root[data-bp~="lg"] .aif-login-card-col { grid-column: span 5 / span 5; }

/* xl  >= 1280px */
:root[data-bp~="xl"] .aif-login-main     { padding: 1.5rem; }
:root[data-bp~="xl"] .aif-login-headline { font-size: 44px; }