/*
 * The look shared by the pages outside the panel: sign-in, invitation and error pages, and the docs' logo.
 * A brand change (colour, logo, button) is made here once. A page keeps only its own rules in its view.
 *
 * A page tints its glow, card line and status badge with --kl-tint (hex) and --kl-tint-rgb ("r, g, b"), and its logo
 * badge with --kl-logo-tint and --kl-logo-tint-rgb; amber when not set (an error page uses its status colour).
 */

:root {
    --kl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --kl-font-mono: 'JetBrains Mono', monospace;
}

/* ─── Dark page: the body of a standalone page, or the sign-in page's wrapper inside the panel ─── */

html:has(> body.kl-dark-page) {
    background-color: #090d16;
    color-scheme: dark;
}

/* :where() keeps the reset at zero specificity, so every page rule wins over it. */
:where(body.kl-dark-page),
:where(body.kl-dark-page) * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--kl-font-sans);
}

.kl-dark-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    color: #f1f5f9;
    font-family: var(--kl-font-sans);
    color-scheme: dark;
    background-color: #090d16;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(var(--kl-tint-rgb, 245, 158, 11), 0.12) 0%, transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(30, 58, 138, 0.08) 0%, transparent 50%),
        linear-gradient(to bottom, #090d16, #060911);
}

/* ─── Top bar and logo ─── */

.kl-topbar {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    position: relative;
    z-index: 100;
}

.kl-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: #f8fafc;
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

.kl-logo-mark {
    color: #f59e0b;
}

.kl-logo-badge {
    background: rgba(var(--kl-logo-tint-rgb, 245, 158, 11), 0.15);
    color: var(--kl-logo-tint, #f59e0b);
    border: 1px solid rgba(var(--kl-logo-tint-rgb, 245, 158, 11), 0.3);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Card: a page sets its own max-width, padding and text alignment ─── */

.kl-container {
    width: 100%;
    margin: 2rem auto;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    color: #f1f5f9;
    position: relative;
    overflow: hidden;
}

.kl-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--kl-tint, #f59e0b), transparent);
}

.kl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(var(--kl-tint-rgb, 245, 158, 11), 0.12);
    border: 1px solid rgba(var(--kl-tint-rgb, 245, 158, 11), 0.25);
    color: var(--kl-tint, #f59e0b);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kl-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    text-align: center;
}

.kl-desc {
    font-size: 0.9375rem;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 auto 2rem;
    text-align: center;
}

/* Browser autofill would paint the dark inputs white. */
.kl-container input:-webkit-autofill,
.kl-container input:-webkit-autofill:hover,
.kl-container input:-webkit-autofill:focus,
.kl-container input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
    -webkit-text-fill-color: #f8fafc !important;
    box-shadow: 0 0 0 1000px #1e293b inset !important;
    color: #f8fafc !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #f8fafc;
    border-color: #334155;
}

/* ─── Buttons ─── */

.kl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.kl-btn-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

.kl-btn-primary:active {
    transform: translateY(0);
}

.kl-btn-block {
    display: flex;
    width: 100%;
}

/* ─── Footer ─── */

.kl-footer {
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
    padding: 1rem 0;
}