/* BugTracker/login_modal.css — styles for the shared "Admin Login" modal
   (login_modal.php + login_modal.js).

   The .alm-* prefix is deliberate. index.php and ticket.php each define their
   OWN .modal-overlay with different show mechanics — index.php animates
   opacity + pointer-events, ticket.php toggles display:none/flex. Reusing that
   class name would make this modal behave differently depending on which page
   included it, so it carries its own namespace instead.

   The only outside classes it leans on are .form-control and .btn/.btn-neon,
   which both host pages already define. */

.alm-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 10, 18, 0.9);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    /* Above the page's own modals (z-index 1000), below the toast (2000). */
    z-index: 1500;
}
.alm-overlay.active { opacity: 1; pointer-events: auto; }

.alm-box {
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: 12px; padding: 30px;
    width: 90%; max-width: 400px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(-20px); transition: transform 0.25s ease;
}
.alm-overlay.active .alm-box { transform: translateY(0); }

.alm-close {
    position: absolute; top: 10px; right: 15px;
    background: transparent; border: none; padding: 0;
    font-size: 1.5rem; line-height: 1; color: #fff;
    cursor: pointer; transition: color 0.2s;
}
.alm-close:hover { color: #ff4444; }

.alm-title { margin: 0 0 20px; font-size: 1.4rem; color: var(--accent-primary); }

.alm-submit { width: 100%; margin-top: 15px; cursor: pointer; }

/* Inline error line. The modal reports failures here rather than through the
   host page's showToast() — a login form should keep the message next to the
   field, and it means the component has no dependency on page-level JS. */
.alm-error {
    display: none;
    margin-top: 12px;
    color: #ff4444; font-size: 0.85rem; line-height: 1.4;
}
.alm-error.show { display: block; }