/* ==========================================================================
   The Government of The Bahamas — Login Theme
   Split-screen layout. Left: white form area. Right: branded video panel.
   Colors and fonts matched to the VAT Stamp portal design system.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --ta-brand:       #005A9E;
    --ta-brand-hover: #004A82;
    --ta-brand-ring:  rgba(0, 90, 158, 0.10);
    --ta-brand-300:   #0A8EF8;
    --ta-panel-bg:    #0D0E14;
    --ta-text:        #0D0E14;
    --ta-text-muted:  #6B7280;
    --ta-label:       #344054;
    --ta-border:      #E5E7EB;
    --ta-placeholder: #98A2B3;
    --ta-input-bg:    #ffffff;
    --ta-radius:      0.5rem;
    --ta-radius-lg:   0.75rem;
    --ta-shadow-xs:   0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --ta-error:       #EF4444;

    /* override PF5 form spacing variables */
    --pf-v5-c-form--GridGap: 1rem;

    /* suppress keycloak.v2 defaults */
    --keycloak-card-top-color: transparent;
    --keycloak-bg-logo-url: none;
    --keycloak-logo-url: none;
}

/* ---------- Base reset ---------- */
html.login-pf {
    background: #ffffff !important;
}

body#keycloak-bg {
    background: #ffffff !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Open Sans', system-ui, sans-serif;
    color: var(--ta-text);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Neutralize PF5 login layout (replaced by split-screen) ---------- */
.kc-split-form-wrapper .pf-v5-c-login,
.kc-split-form-wrapper .pf-v5-c-login__container {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.kc-split-form-wrapper .pf-v5-c-login__header,
.kc-split-form-wrapper #kc-header {
    display: none !important;
}

.kc-split-form-wrapper .pf-v5-c-login__main {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.kc-split-form-wrapper .pf-v5-c-login__main-body,
.kc-split-form-wrapper .pf-v5-c-login__main-header,
.kc-split-form-wrapper .pf-v5-c-login__main-footer {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kc-split-form-wrapper .pf-v5-c-login__main-header {
    text-align: center !important;
}

/* ======================================================================
   SPLIT-SCREEN LAYOUT
   ====================================================================== */
.kc-split-layout {
    display: flex;
    min-height: 100vh;
}

/* ---------- LEFT: Form panel ---------- */
.kc-split-form-panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: #ffffff;
    overflow-y: auto;
}

.kc-split-form-wrapper {
    width: 100%;
    max-width: 28rem;
}

/* Mobile-only logo (hidden on desktop) */
.kc-split-mobile-logo {
    display: none;
}

/* Page title — TailAdmin: text-title-md = 36px/44px, font-semibold */
.kc-split-title {
    font-size: 1.875rem !important;
    font-weight: 600 !important;
    color: var(--ta-text) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.27 !important;
    margin: 0 0 1.5rem 0 !important;
}

@media (min-width: 640px) {
    .kc-split-title {
        font-size: 2.25rem !important;
        line-height: 1.22 !important;
    }
}

/* ======================================================================
   RIGHT: Brand panel
   ====================================================================== */
.kc-split-brand-panel {
    flex: 1 1 50%;
    position: relative;
    background: var(--ta-panel-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Video background */
.kc-split-brand-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark overlay on top of video so text/logo remain readable */
.kc-split-brand-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(22, 25, 80, 0.55);
    z-index: 0;
}

/* Grid decoration — TailAdmin: top-right + bottom-left rotated 180deg */
.kc-split-grid-svg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.kc-split-grid-tr {
    top: 0;
    right: 0;
    width: 100%;
    max-width: 450px;
    height: auto;
}

.kc-split-grid-bl {
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 450px;
    height: auto;
    transform: rotate(180deg);
}

/* Centered brand block */
.kc-split-brand-center {
    position: relative;
    z-index: 1;
    padding: 2rem;
}

.kc-split-brand-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none !important;
    color: #ffffff !important;
}

.kc-split-brand-link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.kc-split-brand-logo {
    width: 90px;
    height: auto;
    flex-shrink: 0;
}

.kc-split-brand-title {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.kc-split-brand-line1 {
    font-size: 1.8rem;
    font-weight: 200;
}

.kc-split-brand-line2 {
    font-size: 2.5rem;
}

/* ---------- Headings use Roboto ---------- */
h1, h2, h3, h4, h5, h6,
.kc-split-form-panel .pf-v5-c-title {
    font-family: 'Roboto', system-ui, sans-serif;
}

/* ======================================================================
   FORM ELEMENT STYLING — PF5 overrides
   ====================================================================== */

/* ---------- Form groups — spacing is controlled by --pf-v5-c-form--GridGap ---------- */

/* ---------- Form labels ---------- */
.pf-v5-c-form__label {
    margin-bottom: 0.375rem !important;
}

.pf-v5-c-form__label-text {
    font-family: 'Open Sans', system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--ta-label) !important;
}

/* ---------- Text inputs ---------- */
/* TailAdmin: h-11 rounded-lg border-gray-300 bg-transparent shadow-theme-xs
   focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 */
.pf-v5-c-form-control {
    display: block !important;
    border: 1px solid var(--ta-border) !important;
    border-radius: var(--ta-radius) !important;
    background-color: transparent !important;
    box-shadow: var(--ta-shadow-xs) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-size: 0.875rem !important;
    font-family: 'Open Sans', system-ui, sans-serif !important;
    padding: 0.625rem 1rem !important;
    min-height: 2.75rem !important;
    box-sizing: border-box !important;
}

.pf-v5-c-form-control:focus-within {
    border-color: var(--ta-brand-300) !important;
    box-shadow: 0 0 0 3px var(--ta-brand-ring) !important;
}

/* Hide PF5 pseudo-elements */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before {
    display: none !important;
}

/* Inner input resets */
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea {
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-family: 'Open Sans', system-ui, sans-serif !important;
    color: var(--ta-text) !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.pf-v5-c-form-control input::placeholder {
    color: var(--ta-placeholder) !important;
}

/* Remove all focus outlines — our border/shadow handles it */
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-visible,
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control input:focus-visible {
    outline: none !important;
}

/* ---------- Input group (password toggle) ---------- */
.pf-v5-c-input-group {
    display: flex !important;
    border: 1px solid var(--ta-border) !important;
    border-radius: var(--ta-radius) !important;
    background: transparent !important;
    box-shadow: var(--ta-shadow-xs) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    overflow: hidden;
}

.pf-v5-c-input-group .pf-v5-c-form-control {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1 !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
    box-shadow: none !important;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
    border: none !important;
    border-left: 1px solid var(--ta-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ta-text-muted) !important;
    transition: color 0.15s ease;
    padding: 0 0.75rem !important;
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
    color: var(--ta-brand) !important;
}

.pf-v5-c-input-group:focus-within {
    border-color: var(--ta-brand-300) !important;
    box-shadow: 0 0 0 3px var(--ta-brand-ring) !important;
}

.pf-v5-c-input-group:focus-within .pf-v5-c-button.pf-m-control {
    border-left-color: var(--ta-brand-300) !important;
}

/* ---------- Password toggle — hide PF5 accent line and FA icon ---------- */
.pf-v5-c-button.pf-m-control::after {
    display: none !important;
}

.pf-v5-c-button.pf-m-control i.fas {
    display: none !important;
}

.pf-v5-c-button.pf-m-control {
    position: relative;
}

.pf-v5-c-button.pf-m-control::before {
    content: '' !important;
    display: block !important;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ---------- Primary button ---------- */
/* TailAdmin: bg-brand-500 rounded-lg py-3 px-4 text-sm font-medium */
.pf-v5-c-button.pf-m-primary {
    background-color: var(--ta-brand) !important;
    border-color: var(--ta-brand) !important;
    border-radius: var(--ta-radius) !important;
    font-family: 'Open Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 2.75rem !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
    letter-spacing: 0;
    box-shadow: var(--ta-shadow-xs) !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
    background-color: var(--ta-brand-hover) !important;
    border-color: var(--ta-brand-hover) !important;
}

/* ---------- Secondary / social buttons ---------- */
.pf-v5-c-button.pf-m-secondary {
    border-radius: var(--ta-radius) !important;
    border-color: var(--ta-border) !important;
    font-family: 'Open Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
    background-color: #F9FAFB !important;
    border-color: #D0D5DD !important;
}

/* ---------- Links ---------- */
.kc-split-form-wrapper a {
    color: var(--ta-brand);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

.kc-split-form-wrapper a:hover {
    color: var(--ta-brand-hover);
}

/* ---------- Checkbox + label ---------- */
.pf-v5-c-check__label {
    font-family: 'Open Sans', system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    color: var(--ta-text) !important;
}

.pf-v5-c-check__input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 0.375rem !important;
    border-width: 1.25px !important;
}

.pf-v5-c-check__input:checked {
    background-color: var(--ta-brand) !important;
    border-color: var(--ta-brand) !important;
}

/* Helper text items (forgot password link etc) */
.pf-v5-c-helper-text__item-text {
    font-family: 'Open Sans', system-ui, sans-serif !important;
    font-size: 0.875rem !important;
}

/* ---------- Alerts / messages ---------- */
.pf-v5-c-alert {
    border-radius: var(--ta-radius) !important;
    margin-bottom: 1rem;
    font-family: 'Open Sans', system-ui, sans-serif !important;
}

/* ---------- Remember me + forgot password row ---------- */
.pf-v5-c-form__helper-text[aria-live] {
    margin-top: 1rem !important;
}

.pf-v5-c-form__helper-text .pf-v5-c-helper-text {
    width: 100% !important;
    flex: 1 !important;
}

/* Form submit button — full width */
.kc-split-form-wrapper .pf-v5-c-button.pf-m-primary.pf-m-block {
    width: 100% !important;
    margin-top: 0.25rem !important;
}

/* ---------- Registration link ---------- */
#kc-registration-container {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ta-text-muted);
}

/* ---------- Social providers ---------- */
#kc-social-providers {
    margin-top: 1.25rem;
}

#kc-social-providers svg:not(.google) {
    filter: invert(47%) sepia(88%) saturate(7486%) hue-rotate(199deg) brightness(91%) contrast(101%);
}

#kc-social-providers svg {
    height: 1.25rem;
}

/* ======================================================================
   EMPLOYEE LOGIN (Kerberos/Windows Auth)
   ====================================================================== */
.kc-employee-login {
    margin-top: 1.5rem;
    text-align: center;
}

.kc-employee-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--ta-text-muted);
    font-size: 0.8125rem;
}

.kc-employee-login-divider::before,
.kc-employee-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ta-border);
}

a.kc-employee-login-link {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ta-text) !important;
    text-decoration: none !important;
    background: transparent;
    box-shadow: var(--ta-shadow-xs);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

a.kc-employee-login-link:hover {
    background-color: #F9FAFB;
    border-color: var(--ta-brand-300);
    color: var(--ta-brand) !important;
}

.kc-employee-login-help {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--ta-text-muted);
    line-height: 1.4;
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 991px) {
    .kc-split-layout {
        flex-direction: column;
    }

    .kc-split-brand-panel {
        display: none;
    }

    .kc-split-form-panel {
        padding: 2rem 1.25rem;
        min-height: 100vh;
        background: #ffffff;
    }

    .kc-split-form-wrapper {
        max-width: 28rem;
    }

    .kc-split-mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .kc-split-mobile-logo-img {
        height: 56px;
        width: auto;
        flex-shrink: 0;
    }

    .kc-split-mobile-logo-title {
        font-family: 'Roboto', system-ui, sans-serif;
        font-weight: 700;
        color: var(--ta-text);
        letter-spacing: -0.01em;
        line-height: 1.2;
    }

    .kc-split-mobile-logo-title .kc-split-brand-line1 {
        font-size: 1.1rem;
        font-weight: 200;
    }

    .kc-split-mobile-logo-title .kc-split-brand-line2 {
        font-size: 1.55rem;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .kc-split-form-panel {
        padding: 2rem 2rem;
    }
}

@media (min-width: 1400px) {
    .kc-split-form-panel {
        padding: 2rem 4rem;
    }
}