/* login_page.css - Page specific styles for Login Page */
.login-wrapper {
    min-height: calc(100vh - 140px);
    /* approx header + footer height */
    display: grid;
    align-items: center
    }
.login-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass)
    }
/* Fine-tune input group button radius to match inputs */
#togglePassword {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
    }
/* Demo accounts table on small screens */
@media (max-width: 575.98px) {
    #demoAccountsTable thead {
        display: none
        }
    #demoAccountsTable tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3)
        }
    #demoAccountsTable tbody td {
        display: flex;
        justify-content: space-between;
        border: 0;
        padding: 0.25rem 0
        }
    #demoAccountsTable tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        margin-right: var(--space-3)
        }
    }
/* Alert spacing harmony with card */
#loginAlert {
    border-radius: var(--radius-lg)
    }
/* Hover affordance for table sort */
#demoAccountsTable thead th.sortable:hover {
    color: var(--on-primary);
    background: rgba(219, 188, 223, 0.18)
    }