/* Login page component refined to match provided design */
:root {
    --ab-login-bg: #f5f7fa; /* very light background */
    --ab-login-card-bg: #ffffff;
    --ab-login-border: #e5e7eb; /* input + subtle separators */
    --ab-login-radius: 1rem; /* card radius */
    --ab-login-input-radius: .5rem; /* input radius */
    --ab-login-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 32px -4px rgba(0,0,0,.06);
    --ab-login-title: #111827; /* near black */
    --ab-login-subtitle: #6b7280; /* gray-500 */
    --ab-login-link: #0a61ff; /* primary */
    --ab-login-link-hover: #004bcc;
    --ab-login-btn: #0563f6; /* button base */
    --ab-login-btn-hover: #0456d6;
    --ab-login-btn-active: #0349b6;
    --ab-login-input-bg: #ffffff;
    --ab-login-input-placeholder: #6b7280;
    --ab-login-focus-ring: 0 0 0 4px rgba(10,97,255,.15);
    --ab-login-font-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Hide navbar login button when on login page */
body.ab-is-login-page .navbar .nav-item a[href*="Login"],
body.ab-is-login-page .navbar .nav-item a[href*="login"],
body.ab-is-login-page .navbar .navbar-nav a[href*="Login"],
body.ab-is-login-page .navbar .navbar-nav a[href*="login"],
body.ab-is-login-page .navbar a.nav-link[href*="Login"],
body.ab-is-login-page .navbar a.nav-link[href*="login"],
body.ab-is-login-page .navbar-nav .nav-item:has(a[href*="Login"]),
body.ab-is-login-page .navbar-nav .nav-item:has(a[href*="login"]) {
    display: none !important;
}

/* Prevent scroll on login page - lock everything */
html.ab-is-login-page,
body.ab-is-login-page {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

body.ab-is-login-page #ab-main.ab-login-page {
    height: calc(100vh - var(--ab-header-offset, 56px));
    max-height: calc(100vh - var(--ab-header-offset, 56px));
    min-height: 0;
    overflow: hidden !important;
}

.ab-login-page { background: var(--ab-login-bg); font-family: var(--ab-login-font-stack); }

/* Full height flex center - no scroll */
.ab-login-section { 
    min-height: 0;
    height: 100%;
    padding: clamp(0.5rem, 2vh, 2rem) 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

.ab-login-card-wrapper { max-width: 30rem; margin:0 auto; width:100%; }

.ab-login-card { background: var(--ab-login-card-bg); border: 1px solid #f2f3f5; box-shadow: var(--ab-login-shadow); border-radius: var(--ab-login-radius); padding: 2.5rem 3rem 2.25rem; width:100%; }

/* Title + subtitle */
.ab-login-title { font-size: 1.75rem; font-weight:600; line-height:1.25; margin:0 0 0.75rem; color: var(--ab-login-title); letter-spacing:.01em; }
.ab-login-subtitle { font-size:0.95rem; margin:0 0 .25rem; color: var(--ab-login-subtitle); font-weight:400; }

/* Labels */
.ab-login-form label { font-size:.82rem; font-weight:600; letter-spacing:.01em; color:#111827; text-transform:none; margin-bottom:.3rem; }

/* Inputs - slightly more compact */
.ab-login-form .form-control { font-size:.9rem; line-height:1.4; padding: .75rem 1rem; height:auto; border:1px solid var(--ab-login-border); border-radius: var(--ab-login-input-radius); background: var(--ab-login-input-bg) !important; color:#111827 !important; box-shadow:none; transition: border-color .15s ease, box-shadow .15s ease; }
.ab-login-form .form-control::placeholder { color: var(--ab-login-input-placeholder); opacity:1; }
.ab-login-form .form-control:focus { border-color: var(--ab-login-link); box-shadow: var(--ab-login-focus-ring); background: var(--ab-login-input-bg); color:#111827; outline:0; }

/* Form fields - reduce spacing */
.ab-login-form .mb-3 { margin-bottom: 1rem !important; }

/* Autofill */
.ab-login-form input.form-control:-webkit-autofill,
.ab-login-form input.form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--ab-login-input-bg) inset !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827; }

/* Meta row - Checkbox styling with explicit white background to override dark system themes */
.ab-login-meta { margin-top:.3rem; }

/* Checkbox styling for login form - force white background regardless of system theme */
.ab-login-form .ab-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; }
.ab-login-form .ab-checkbox input[type="checkbox"] { 
    width: 16px; 
    height: 16px; 
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    border: 1px solid var(--ab-login-border);
    border-radius: 0.25rem;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checked state */
.ab-login-form .ab-checkbox input[type="checkbox"]:checked {
    background-color: var(--ab-login-link);
    border-color: var(--ab-login-link);
}

/* Checkmark icon */
.ab-login-form .ab-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Focus state */
.ab-login-form .ab-checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--ab-login-focus-ring);
}

/* Hover state */
.ab-login-form .ab-checkbox input[type="checkbox"]:hover:not(:checked) {
    border-color: #c9cdd4;
}

.ab-login-form .ab-checkbox span { 
    color: #374151; 
    font-size: 0.875rem; 
    font-weight: 500;
    cursor: pointer;
}

/* Link styles - blue like the login button */
.ab-link-primary { 
    text-decoration: none; 
    color: var(--ab-login-btn); 
    font-size: 0.875rem; 
    font-weight: 500; 
}
.ab-link-primary:hover { 
    color: var(--ab-login-btn-hover); 
    text-decoration: underline; 
}

/* Forgot password link - same blue as button */
.ab-forgot { 
    text-decoration: none; 
    color: var(--ab-login-btn); 
    font-size: 0.78rem; 
    font-weight: 500; 
}
.ab-forgot:hover { 
    color: var(--ab-login-btn-hover); 
    text-decoration: underline; 
}

/* Validation summary for login errors */
.ab-login-form .alert-danger,
.ab-login-card .alert-danger { 
    background: #fef2f2; 
    border: 1px solid #fecaca; 
    color: #dc2626; 
    padding: 0.6rem 0.9rem; 
    margin-bottom: 1rem;
    border-radius: var(--ab-login-input-radius); 
    font-size: 0.8rem; 
    font-weight: 500;
    text-align: center;
}
.ab-login-form .alert-danger ul,
.ab-login-card .alert-danger ul { 
    margin: 0; 
    padding-left: 1.25rem; 
    list-style-type: disc;
}
.ab-login-form .alert-danger li,
.ab-login-card .alert-danger li { 
    margin-bottom: 0.15rem; 
}

/* Warning alert - light style for spam warnings */
.ab-login-card .alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 0.75rem 1rem;
    border-radius: var(--ab-login-input-radius);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
}
.ab-login-card .alert-warning i {
    color: #d97706;
    flex-shrink: 0;
}

/* Success alert - light style */
.ab-login-card .alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 0.75rem 1rem;
    border-radius: var(--ab-login-input-radius);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Disabled button state - light style */
.ab-login-card .ab-btn-disabled {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    box-shadow: none !important;
}
.ab-login-card .ab-btn-disabled:hover {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
}

/* Outline primary button - light style */
.ab-login-card .btn-outline-primary {
    background: transparent;
    border: 1px solid var(--ab-login-btn);
    color: var(--ab-login-btn);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.ab-login-card .btn-outline-primary:hover {
    background: var(--ab-login-btn);
    color: #fff;
}

/* Light button style */
.ab-login-card .btn-light {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
}

/* Password wrapper */
.ab-password-wrapper { position:relative; }
.ab-password-wrapper .form-control { padding-right:2.75rem; }
.ab-password-toggle { position:absolute; top:50%; right:.85rem; transform:translateY(-50%); background:transparent; border:0; padding:.35rem .45rem; border-radius:.375rem; cursor:pointer; color:#6b7280; font-size:1.05rem; display:flex; align-items:center; justify-content:center; transition: background .15s ease, color .15s ease; }
.ab-password-toggle:hover { color:#374151; background:rgba(0,0,0,.04); }
.ab-password-toggle:active { background:rgba(0,0,0,.07); }

/* Primary button - slightly more compact */
.ab-login-btn { font-size:0.95rem; font-weight:600; letter-spacing:.015em; padding:.85rem 1rem; border-radius:.6rem; background: var(--ab-login-btn); border:1px solid var(--ab-login-btn); color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.04),0 3px 10px -2px rgba(5,99,246,.3); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.ab-login-btn:hover { background: var(--ab-login-btn-hover); border-color: var(--ab-login-btn-hover); }
.ab-login-btn:active { background: var(--ab-login-btn-active); border-color: var(--ab-login-btn-active); transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.ab-login-btn:focus-visible { outline:0; box-shadow: var(--ab-login-focus-ring),0 2px 4px rgba(0,0,0,.04); }

/* Validation messages - larger font */
.ab-login-form span.field-validation-error, 
.ab-login-form .text-danger { 
    font-size: 0.85rem; 
    margin-top: 0.4rem; 
    display: block;
    font-weight: 500;
}

@media (max-width: 40rem) { /* 640px */
  .ab-login-card { padding:2rem 1.5rem 1.75rem; }
  .ab-login-title { font-size:1.5rem; }
}