/* CyberVisible sign-in — Grafana's login page reskinned to the shared sign-in standard
   (cybernxt-design-system STANDARDS.md §7, auth-kit.html). nginx injects this file and
   grafana-login.js into Grafana's page; Grafana still owns the form and the sign-in.
   Selectors target Grafana's structure; values come from the shared tokens. */

@import url('/css/ds/design-system-865078d36d4254ceb513de1852766f01.css');
@import url('/css/ds/auth-e8ed183f43295ca539a771befd561824.css');

/* ── Page ─────────────────────────────────────────────────────────── */

/* Fixed overlay above Grafana's own (dark) background; the login card sits above it.
   Static brand backdrop: a faint accent wash top-left, an amber wash bottom-right and a fine dot grid.
   Nothing moves; it only paints our own overlay, so it does not depend on Grafana's layout. */
.cv-bg {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: var(--surface-sunken);
    background-image:
        radial-gradient(60rem 40rem at -10% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        radial-gradient(50rem 36rem at 110% 120%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%),
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--slate-400) 35%, transparent) 1px, transparent 0);
    background-size: auto, auto, 22px 22px;
}

html, body {
    min-height: 100% !important;
    background: transparent !important;
    font-family: var(--font-sans) !important;
    color: var(--text-primary) !important;
}

.login-outer-box,
.login-content,
[class*="login-page"],
[class*="LoginPage"] {
    min-height: 100vh !important;
    background: transparent !important;
    position: relative;
    z-index: 9999;
}

.login-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 48px 16px 24px !important;
}

/* ── Card ─────────────────────────────────────────────────────────── */

.login-content-box {
    width: min(400px, 100%) !important;
    max-width: 400px !important;
    box-sizing: border-box !important;
    padding: 32px 32px 28px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;   /* a step deeper than the kit so it sits on the backdrop */
    position: relative !important;
    z-index: 9999 !important;
    align-items: stretch !important;
    text-align: left !important;
}
.login-content-box::before { content: none !important; }

/* Grafana centres its logo-and-title block; the standard reads top-to-bottom from the left */
.login-content-box div:has(> h1),
.login-content-box div:has(> div > h1) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* ── Brand (injected) ─────────────────────────────────────────────── */

.cv-brand.ux-auth-brand { margin-bottom: 28px; }
.cv-brand .ux-auth-logo img { width: 26px; height: 26px; }

/* ── Grafana's own logo, footer and extras stay hidden ───────────── */

.login-logo,
[class*="login-logo"],
[class*="LoginLogo"],
img[src*="grafana_icon"],
img[alt*="Grafana"],
img[alt*="grafana"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

footer:not(.cv-foot),
[class*="footer"]:not(.cv-foot),
[data-testid*="footer"],
[class*="login-social"],
[class*="login-oauth"],
[class*="OAuthButtons"],
[class*="SignInWith"] {
    display: none !important;
}

/* ── Heading ──────────────────────────────────────────────────────── */

.login-content-box h1,
.login-content-box h2,
.login-content-box h3 {
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: 20px !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: var(--tracking-tight) !important;
    line-height: 1.25 !important;
    text-align: left !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.cv-sub.ux-auth-sub { margin: 0 0 20px; }

/* ── Fields: label above, sentence case ──────────────────────────── */

.login-content-box label {
    color: var(--text-secondary) !important;
    font-family: var(--font-sans) !important;
    font-size: 12.5px !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.login-form input,
input[name="user"],
input[name="password"],
.cv-ready .login-content-box input[type="text"],
.cv-ready .login-content-box input[type="password"],
.cv-ready .login-content-box input[type="email"] {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    height: 40px !important;
    padding: 0 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
input[name="password"] { padding-right: 44px !important; }

.login-form input:focus,
input[name="user"]:focus,
input[name="password"]:focus,
.cv-ready .login-content-box input:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none !important;
}

.login-content-box input::placeholder { color: var(--slate-400) !important; }

/* Grafana pads the boxes around its form; the standard keeps one left edge from brand to button.
   Only ancestors of the form inside the card match, never the fields themselves. */
.login-content-box div:has(form),
.login-content-box form {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

/* Browser autofill: Chrome paints its own background and Grafana's dark-theme rule tints it and sets
   light text. An inset shadow covers the paint; the focus ring is added on top of it when focused. */
.login-content-box input:-webkit-autofill,
.login-content-box input:-webkit-autofill:hover,
.login-content-box input:autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-card) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-card) inset !important;
    transition: background-color 600000s 0s, color 600000s 0s !important;
}
.login-content-box input:-webkit-autofill:focus,
.login-content-box input:autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-card) inset, var(--shadow-focus) !important;
    box-shadow: 0 0 0 1000px var(--surface-card) inset, var(--shadow-focus) !important;
}

/* One gap between fields, whatever margin Grafana's own field gives */
.login-content-box form > div:has(input) { margin: 0 0 14px !important; }

/* Grafana's show-password eye inside the field */
.login-content-box [class*="suffix"] button,
.login-content-box button[aria-label*="password" i] {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.login-content-box [class*="suffix"] button:hover,
.login-content-box button[aria-label*="password" i]:hover { color: var(--text-primary) !important; }

/* Caps Lock warning (injected under the password field) */
.cv-caps { margin: -6px 0 12px; }

/* ── Submit: full width, accent; busy keeps full strength with a spinner ── */

.login-content-box button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 40px !important;
    margin-top: 8px !important;
    background: var(--accent-fill) !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-on-brand) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.login-content-box button[type="submit"]:hover:not(:disabled) {
    background: var(--accent-fill-hover) !important;
    border-color: var(--accent-hover) !important;
}
.login-content-box button[type="submit"]:focus-visible { outline: none !important; box-shadow: var(--shadow-focus) !important; }
.login-content-box button[type="submit"]:disabled { opacity: 1 !important; cursor: progress !important; }
.login-content-box button[type="submit"]:disabled::before {
    content: '';
    width: 14px; height: 14px; box-sizing: border-box; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ux-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .login-content-box button[type="submit"]:disabled::before { animation-duration: 2s; }
}

/* ── Sign in with CyberNxt (Grafana's generic OAuth button): a secondary button the size of Submit ── */

.login-content-box a[href$="login/generic_oauth"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 40px !important;
    background: var(--surface-card) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.login-content-box a[href$="login/generic_oauth"]:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-brand) !important;
    text-decoration: none !important;
}
.login-content-box a[href$="login/generic_oauth"]:focus-visible { outline: none !important; box-shadow: var(--shadow-focus) !important; }
.login-content-box a[href$="login/generic_oauth"] * { color: inherit !important; }

/* ── Message above the form (Grafana's alert) ────────────────────── */

.login-content-box [role="alert"],
.login-content-box [data-testid*="Alert"] {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, var(--critical-500) 30%, transparent) !important;
    border-radius: var(--radius-md) !important;
    background: var(--critical-50) !important;
    color: var(--critical-600) !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.login-content-box [role="alert"] *,
.login-content-box [data-testid*="Alert"] * {
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
.login-content-box [role="alert"].cv-alert-warning,
.login-content-box [data-testid*="Alert"].cv-alert-warning {
    border-color: color-mix(in srgb, var(--warning-500) 35%, transparent) !important;
    background: var(--warning-50) !important;
    color: var(--warning-text) !important;
}

/* ── Links ───────────────────────────────────────────────────────── */

.login-content-box a {
    color: var(--text-brand) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
}
.login-content-box a:hover { text-decoration: underline !important; }

/* ── Help line and legal line (injected) ─────────────────────────── */

.cv-help.ux-auth-help { margin-bottom: 0; }
.cv-foot.ux-auth-foot { position: relative; z-index: 9999; }

/* ── Phone width ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .login-content { justify-content: flex-start !important; padding: 24px 16px !important; }
    .login-content-box { padding: 24px 20px 22px !important; }
}