/* ── 1. Manrope from Google Fonts ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ── 2. Colour palette & light-mode design tokens ──────────────── */
:root {
    /* Raw palette */
    --dt-900: #09111C;
    --dt-800: #01182F;
    --dt-700: #032453;
    --dt-primary: #4D94FF;
    --dt-primary-lt: #8EC1FF;
    --dt-accent: #A5EB17;
    --dt-border: #C4CDDB;

    /* Semantic tokens (reassigned in dark mode) */
    --dt-page-bg: #EEF2F8;
    --dt-card-bg: #ffffff;
    --dt-text: var(--dt-900);
    --dt-text-2: #4a5e72;
    --dt-input-bg: #ffffff;
    --dt-input-bd: var(--dt-border);

    /* Keycloak logo CSS variables (consumed by keycloak.v2 styles.css) */
    --keycloak-logo-url: url('../img/dronetag-logo.svg');
    --keycloak-logo-height: 40px;
    --keycloak-logo-width: 210px;
    --keycloak-card-top-color: var(--dt-primary);

    /* ── PatternFly 5 global overrides ──────────────────────────── */
    --pf-v5-global--FontFamily--text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pf-v5-global--FontFamily--heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --pf-v5-global--primary-color--100: var(--dt-primary);
    --pf-v5-global--primary-color--200: #3a7ee8;
    --pf-v5-global--active-color--100: var(--dt-primary);

    --pf-v5-global--link--Color: var(--dt-primary);
    --pf-v5-global--link--Color--hover: #3a7ee8;
    --pf-v5-global--link--Color--dark: var(--dt-primary);

    /* Button – primary */
    --pf-v5-c-button--m-primary--BackgroundColor: var(--dt-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: #3a7ee8;
    --pf-v5-c-button--m-primary--active--BackgroundColor: #2a6ed4;
    --pf-v5-c-button--m-primary--Color: #ffffff;
    --pf-v5-c-button--m-primary--hover--Color: #ffffff;
    --pf-v5-c-button--m-primary--focus--Color: #ffffff;

    /* Button – secondary */
    --pf-v5-c-button--m-secondary--Color: var(--dt-primary);
    --pf-v5-c-button--m-secondary--BorderColor: var(--dt-primary);

    /* Form controls — only override the focus-active underline colour */
    --pf-v5-c-form-control--after--BorderBottomColor: var(--dt-primary);
}

/* ── 3. Font ────────────────────────────────────────────────────── */
/* Set on body and let it inherit naturally. Do NOT use * — that would
   override FontAwesome's explicit font-family rules and break icon glyphs. */
body.login-pf {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 4. Light page background with subtle gradient ──────────────── */
html.login-pf {
    background-color: #EEF2F8;
}

.login-pf body {
    background-image:
        radial-gradient(ellipse at 68% 18%, rgba(77, 148, 255, 0.13) 0%, transparent 52%),
        radial-gradient(ellipse at 22% 78%, rgba(77, 148, 255, 0.07) 0%, transparent 44%),
        linear-gradient(158deg, #EEF2F8 0%, #dae5f5 100%) !important;
    background-color: #EEF2F8 !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: 100%;
}

/* ── 5. Login card ──────────────────────────────────────────────── */
.pf-v5-c-login__main {
    box-shadow:
        0 1px 4px rgba(9, 17, 28, 0.06),
        0 4px 20px rgba(9, 17, 28, 0.10);
    border-radius: 10px;
    overflow: hidden;
}

/* ── 6. Card top accent stripe ──────────────────────────────────── */
/* --keycloak-card-top-color is already read by keycloak.v2/styles.css,
   so the border-top colour updates automatically via the variable override
   in :root above. This rule reinforces it for specificity. */
.pf-v5-c-login__main-header {
    border-top: 4px solid var(--dt-primary);
}

/* ── 7. Header / logo area ──────────────────────────────────────── */
#kc-header {
    padding-block-end: 8px;
}

/* The logo link that wraps .kc-logo-text */
#kc-header-wrapper a,
.pf-v5-c-brand>a {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
    border: none;
    outline-offset: 4px;
    outline-color: var(--dt-primary);
}

/* ── 7b. Logo colour via CSS mask ──────────────────────────────── */
/* The SVG uses currentColor, but background-image can't inherit CSS color.
   mask-image lets us apply the exact brand colour to the logo shape. */
div.kc-logo-text {
    background-image: none;
    background-color: var(--dt-700);
    -webkit-mask-image: var(--keycloak-logo-url);
    mask-image: var(--keycloak-logo-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── 8. Labels ──────────────────────────────────────────────────── */
.pf-v5-c-form__label-text {
    font-weight: 600;
}

/* ── 9. Primary button ──────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary {
    background-color: var(--dt-primary);
    color: #ffffff;
    font-weight: 700;
}

.pf-v5-c-button.pf-m-primary:hover {
    background-color: #3a7ee8;
    color: #ffffff;
}

.pf-v5-c-button.pf-m-primary:active {
    background-color: #2a6ed4;
}

/* ── 10. Secondary button ───────────────────────────────────────── */
.pf-v5-c-button.pf-m-secondary {
    color: var(--dt-primary);
    border-color: var(--dt-primary);
}

.pf-v5-c-button.pf-m-secondary:hover {
    background-color: rgba(77, 148, 255, 0.08);
}

/* ── 11. Focus rings ────────────────────────────────────────────── */
*:focus-visible {
    outline-color: var(--dt-primary);
}

/* ── 12. Register/info link – subtle accent on hover ────────────── */
#kc-registration a:hover,
#kc-registration-container a:hover {
    color: var(--dt-accent);
    text-decoration-color: var(--dt-accent);
}

/* ── 13. Horizontal rules ───────────────────────────────────────── */
hr {
    border-color: var(--dt-border);
    opacity: 1;
}

/* ── 14. Alert icon colours ─────────────────────────────────────── */
.pf-v5-c-alert.pf-m-danger {
    --pf-v5-c-alert__icon--Color: #c01d1d;
}

.pf-v5-c-alert.pf-m-success {
    --pf-v5-c-alert__icon--Color: #1f8a16;
}

.pf-v5-c-alert.pf-m-info {
    --pf-v5-c-alert__icon--Color: var(--dt-primary);
}

.pf-v5-c-alert.pf-m-warning {
    --pf-v5-c-alert__icon--Color: #8a5d0a;
}

/* ── 15. Social provider icons ──────────────────────────────────── */
#kc-social-providers svg:not(.google) {
    color: var(--dt-primary);
    filter: none;
}

/* ── 16. Responsive card width ──────────────────────────────────── */
@media (min-width: 768px) {
    .pf-v5-c-login__container {
        grid-template-columns: 36rem;
    }
}

/* =============================================================
   Dark mode backgrounds — @media for zero flash before JS runs
   ============================================================= */
@media (prefers-color-scheme: dark) {

    html.login-pf,
    .login-pf body {
        background-image:
            radial-gradient(ellipse at 30% 15%, rgba(77, 148, 255, 0.14) 0%, transparent 50%),
            linear-gradient(150deg, #09111C 0%, #01182F 65%, #032453 100%) !important;
        background-color: #09111C !important;
        background-size: cover !important;
        background-attachment: fixed !important;
    }
}

/* =============================================================
   Dark mode brand overrides — scoped to html.pf-v5-theme-dark
   which Keycloak adds via JS when darkMode=true.
   PatternFly's built-in theme handles all component colours
   (inputs, borders, text, buttons). We only tweak branding here.
   ============================================================= */

/* Card — use our specific dark shade */
html.pf-v5-theme-dark .pf-v5-c-login__main {
    background-color: #01182F;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
}

/* Card top stripe — keep brand primary */
html.pf-v5-theme-dark .pf-v5-c-login__main-header {
    border-top-color: var(--dt-primary);
}

/* Logo — brighter against the dark card */
html.pf-v5-theme-dark div.kc-logo-text {
    background-color: var(--dt-primary-lt);
}

/* Secondary button — lighter primary in dark context */
html.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary {
    color: var(--dt-primary-lt);
    border-color: var(--dt-primary-lt);
}

html.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:hover {
    background-color: rgba(142, 193, 255, 0.08);
}

/* Social provider icons */
html.pf-v5-theme-dark #kc-social-providers svg:not(.google) {
    color: var(--dt-primary-lt);
}

/* Restart-login tooltip */
html.pf-v5-theme-dark .kc-login-tooltip .kc-tooltip-text {
    background-color: #032453;
    color: var(--dt-border);
}