/* Login / project-picker chrome — ported 1:1 from the React app
   (devtrac-ui/src/pages/login/LoginPage.css + project-picker/ProjectPickerPage.css).
   Shared by LoginChoice.razor (category select), Login.razor (credentials) and
   ProjectSelect.razor (project picker). Hero background = ONE-Central.png.
   React's `var(--accent-color)` on the login screens resolves to the Landmark
   blue #5b9bd5 (no project env is active there), so it's inlined here. */

/* ── Page shell / hero ─────────────────────────────────────────────────── */
.login-page,
.ppk-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
}

.login-hero,
.ppk-hero {
    flex: 1;
    background: url('/images/ONE-Central.png') center/cover no-repeat;
    position: relative;
    min-height: 0;
}

.login-overlay,
.ppk-overlay {
    width: 100%;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── Top bar (DevTRAC logo) ────────────────────────────────────────────── */
.login-topbar,
.ppk-topbar {
    width: 100%;
    background-color: #111;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-bottom: 1.6px solid #5b9bd5;
    position: relative;
    z-index: 2;
}

.login-devtrac-logo,
.ppk-devtrac-logo {
    height: 16px;
    object-fit: contain;
}

/* ── Landmark logo pinned to the bottom ────────────────────────────────── */
.login-landmark-logo,
.ppk-landmark-logo {
    height: 48px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Footer version note ───────────────────────────────────────────────── */
.login-footer {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
}

.version-text {
    color: rgba(255, 255, 255, 0.3);
    font-size: 8.8px;
}

/* ── Category-selection card (glass) — LoginChoice ─────────────────────── */
.login-card {
    width: 480px;
    min-height: 580.8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(9.6px);
    -webkit-backdrop-filter: blur(9.6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 6.4px 6.4px;
    padding: 88px 40px 32px;
    position: relative;
    z-index: 1;
}

.login-title {
    color: white;
    font-size: 33.6px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* FocusOnNavigate focuses the first <h1> after each route change; kill the
   UA outline so the title doesn't render "selected". */
.login-title:focus,
.login-title:focus-visible,
.ppk-title:focus,
.ppk-title:focus-visible {
    outline: none;
}

.login-role-btn {
    display: block;
    width: 80%;
    margin: 0 auto;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 14.4px 4px;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

    .login-role-btn:hover {
        color: #5b9bd5;
        background-color: rgba(255, 255, 255, 0.05);
        font-weight: 500;
    }

.login-register {
    margin-top: 112px;
    text-align: center;
}

    .login-register p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 11.2px;
        font-weight: 600;
        margin-bottom: 8px;
    }

.request-access-btn {
    background-color: #5b9bd5;
    color: white;
    border: none;
    padding: 8px 32px;
    font-family: inherit;
    font-size: 11.2px;
    border-radius: 2.4px;
    cursor: pointer;
    width: 160px;
}

    .request-access-btn:hover {
        background-color: #4a8bc4;
    }

/* ── Credentials card (white) — Login ──────────────────────────────────── */
.login-card-credentials {
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    height: 580.8px;
    overflow: hidden;
}

.credentials-title {
    color: #1a2332;
}

.credentials-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 80%;
    margin: 4px auto 0;
}

.credentials-input {
    width: 100%;
    padding: 9.6px 12px;
    font-size: 11.2px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border: 1px solid #ccc;
    border-radius: 3.2px;
    outline: none;
}

    .credentials-input:focus {
        border-color: #5b9bd5;
    }

.credentials-login-btn {
    width: 100%;
    padding: 9.6px;
    background-color: #5b9bd5;
    color: white;
    border: none;
    border-radius: 3.2px;
    font-family: inherit;
    font-size: 11.2px;
    font-weight: 400;
    cursor: pointer;
    margin-top: 8px;
}

    .credentials-login-btn:hover:not(:disabled) {
        background-color: #4a8bc4;
    }

.credentials-login-btn-disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.credentials-back-btn {
    background: none;
    border: none;
    color: #888;
    font-family: inherit;
    font-size: 10.4px;
    cursor: pointer;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}

    .credentials-back-btn:hover {
        color: #333;
    }

.login-error {
    color: #a02e2e;
    text-align: center;
    font-size: 10.4px;
}

/* ── Project-picker card (white) — ProjectSelect ───────────────────────── */
.ppk-card {
    width: 480px;
    height: 580.8px;
    background: white;
    padding: 88px 40px 32px;
    border-radius: 0 0 6.4px 6.4px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ppk-title {
    color: #1a2332;
    font-size: 33.6px;
    font-weight: 700;
    margin: 0 0 6.4px 0;
}

.ppk-subtitle {
    color: #555;
    margin: 0 0 20px 0;
    font-size: 11.2px;
}

.ppk-loading,
.ppk-error {
    padding: 19.2px;
    color: #666;
    font-size: 10.4px;
}

.ppk-error {
    color: #a02e2e;
}

.ppk-project-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 19.2px;
    max-height: 340px;
    overflow-y: auto;
}

.ppk-project-btn {
    display: block;
    width: 80%;
    margin: 0 auto;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: #1a2332;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 14.4px 4px;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

    .ppk-project-btn:hover {
        color: #5b9bd5;
        background-color: rgba(0, 0, 0, 0.03);
        font-weight: 500;
    }

.ppk-switch-btn {
    background: none;
    border: none;
    color: #888;
    font-family: inherit;
    font-size: 10.4px;
    cursor: pointer;
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
}

    .ppk-switch-btn:hover {
        color: #333;
    }