/* ============================================================================
   Minimal "app" shell for the Identity pages (Login, AccessDenied) --
   Components/Account/Shared/AccountLayout.razor. Kept as its own stylesheet
   rather than folded into staff-app.css because these pages render before a
   user is authenticated: StaffLayout's shell assumes a signed-in user
   (AuthorizeView-gated sidebar links, role/email in the top bar), which
   doesn't apply pre-login. This borrows the same teal/slate palette as
   staff-app.css so "Staff Login" reads as entering the same product family
   -- just a much simpler single-card layout: a slim teal brand bar and a
   centered white card on a light slate background, no yellow announce bar
   or marketing nav. Palette reference: teal-700 #0f766e, teal-600 #0d9488,
   slate-800 #1e293b, slate-200 #e2e8f0, slate-100 #f1f5f9 (matching
   staff-app.css's own header comment).
   ============================================================================ */

.auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f1f5f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.auth-topbar {
    display: flex;
    align-items: center;
    height: 56px;
    flex: 0 0 auto;
    padding: 0 1.25rem;
    background: #0f766e;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.auth-brand {
    font-size: 1.05rem;
    font-weight: 600;
}

.auth-content {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Login.razor's markup is plain Bootstrap grid (.row.justify-content-center > .col-md-4 > section).
   Bootstrap's own grid CSS still loads (bootstrap.min.css, unaffected by this file) and keeps it
   functional; these rules just constrain/center it as a single card instead of a 33%-wide column
   inside the page's overall content area, since .auth-content is now that whole page. */
.auth-content .row {
    width: 100%;
    max-width: 420px;
    margin: 0;
}

.auth-content .col-md-4 {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}

.auth-content section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-content h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.auth-content hr {
    border-color: #e2e8f0;
    margin-bottom: 1.25rem;
}

.auth-content .form-control {
    border-radius: 6px;
    border-color: #cbd5e1;
}

.auth-content .form-control:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}

.auth-content .btn-primary,
.auth-content .btn-primary:hover,
.auth-content .btn-primary:focus,
.auth-content .btn-primary:active {
    color: #fff !important;
}

.auth-content .btn-primary {
    background-color: #0d9488;
    border-color: #0d9488;
    border-radius: 6px;
}

.auth-content .btn-primary:hover,
.auth-content .btn-primary:focus {
    background-color: #0f766e;
    border-color: #0f766e;
}

.auth-content .text-danger {
    color: #dc2626 !important;
}

/* AccessDenied.razor renders a plain <header><h1><p></header> with no card wrapper -- center it too. */
.auth-content header {
    text-align: center;
}