/*
 * Great Minds CRM - custom styles
 * Linked with a ?v=<mtime> cache-buster by gm_auth_stylesheet() in application/helpers/my_functions_helper.php.
 * Everything here is scoped to the authentication screens so the rest of the CRM is untouched.
 * Markup lives in application/views/authentication/my_login_admin.php
 * and application/views/themes/perfex/views/my_login.php.
 */

/* Brand tokens taken from greatminds.consulting */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,700;1,700&family=Rubik:wght@300;400;500;600&display=swap");

:root {
    --gm-maroon: #76082e;      /* primary */
    --gm-crimson: #ad003c;     /* accent */
    --gm-maroon-dark: #50041e; /* deep */
    --gm-ink: #000000;
    --gm-text: #212121;
    --gm-muted: #69727d;
    --gm-line: #ededed;
    --gm-field: #f7f7f7;
}

/* ---------- Split-screen shell ---------- */

.gm-auth {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    min-height: 100vh;
    overflow-y: auto;
    background: #fff;
    font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--gm-text);
}

.gm-auth *,
.gm-auth *::before,
.gm-auth *::after {
    box-sizing: border-box;
}

/* Brand panel */
.gm-auth__brand {
    position: relative;
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(1200px 600px at -10% -10%, rgba(255, 255, 255, 0.10), transparent 60%),
        radial-gradient(900px 700px at 110% 110%, rgba(0, 0, 0, 0.55), transparent 60%),
        linear-gradient(150deg, var(--gm-crimson) -10%, var(--gm-maroon) 35%, var(--gm-maroon-dark) 75%, #1a0109 100%);
}

/* Background video - same YouTube clip as the greatminds.consulting hero.
   The brand gradient above shows while it loads or if YouTube is blocked. */
.gm-auth__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.gm-auth__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* cover the panel at 16:9 whatever its shape */
    width: max(100%, calc(100vh * 16 / 9));
    height: max(100%, calc(46vw * 9 / 16));
    transform: translate(-50%, -50%) scale(1.15); /* crop YouTube's edge chrome */
    border: 0;
    /* stays invisible until the player reports it is playing (see gm_brand_panel.php),
       so blocked autoplay shows the brand gradient, never YouTube's play button */
    opacity: 0;
    transition: opacity 0.8s ease;
}

.gm-auth__video.is-playing iframe {
    opacity: 1;
}

/* Brand tint over the video, keeps the white text legible */
.gm-auth__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(150deg, rgba(173, 0, 60, 0.55) 0%, rgba(118, 8, 46, 0.55) 45%, rgba(80, 4, 30, 0.7) 100%);
}

/* Subtle network-dot texture */
.gm-auth__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.9), transparent 70%);
    mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.9), transparent 70%);
    pointer-events: none;
}

.gm-auth__brand > *:not(.gm-auth__video) {
    position: relative;
    z-index: 2;
}

.gm-auth__logo img {
    max-height: 34px;
    width: auto;
    display: block;
}

.gm-auth__pitch {
    max-width: 460px;
}

.gm-auth__eyebrow {
    display: inline-block;
    margin: 0 0 20px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.gm-auth__headline {
    margin: 0 0 18px;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.gm-auth__headline em {
    font-style: italic;
}

.gm-auth__sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.gm-auth__legal {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Form panel */
.gm-auth__main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #fff;
}

.gm-auth__card {
    width: 100%;
    max-width: 400px;
}

.gm-auth__title {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--gm-ink);
}

.gm-auth__lead {
    margin: 0 0 32px;
    font-size: 15px;
    color: var(--gm-muted);
}

.gm-auth .form-group {
    margin-bottom: 20px;
}

.gm-auth label,
.gm-auth .control-label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gm-text);
}

.gm-auth .form-control {
    height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--gm-text);
    background: var(--gm-field);
    border: 1px solid var(--gm-line);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.gm-auth .form-control:focus {
    background: #fff;
    border-color: var(--gm-maroon);
    box-shadow: 0 0 0 4px rgba(118, 8, 46, 0.12);
    outline: none;
}

/* Perfex wraps the language <select> in a bootstrap-select widget that carries .form-control too -
   strip the outer box and style only the toggle, so there's one field, not a box in a box */
.gm-auth .bootstrap-select.form-control,
.gm-auth .bootstrap-select {
    width: 100% !important;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.gm-auth .bootstrap-select > .dropdown-toggle {
    height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--gm-text);
    background: var(--gm-field);
    border: 1px solid var(--gm-line);
    border-radius: 10px;
    box-shadow: none;
    outline: none !important;
}

.gm-auth .bootstrap-select.open > .dropdown-toggle,
.gm-auth .bootstrap-select > .dropdown-toggle:focus {
    background: #fff;
    border-color: var(--gm-maroon);
    box-shadow: 0 0 0 4px rgba(118, 8, 46, 0.12);
}

.gm-auth .bootstrap-select .dropdown-menu {
    border-radius: 10px;
    border-color: var(--gm-line);
}

.gm-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 24px;
}

.gm-auth__row .checkbox {
    margin: 0;
}

.gm-auth__row .checkbox label {
    margin: 0;
    font-weight: 500;
    color: var(--gm-muted);
}

.gm-auth__link,
.gm-auth__link:focus {
    font-size: 13px;
    font-weight: 600;
    color: var(--gm-maroon);
    text-decoration: none;
}

.gm-auth__link:hover {
    color: var(--gm-maroon-dark);
    text-decoration: underline;
}

.gm-auth .btn-gm {
    display: block;
    width: 100%;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--gm-maroon);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px -8px rgba(118, 8, 46, 0.55);
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.gm-auth .btn-gm:hover,
.gm-auth .btn-gm:focus {
    color: #fff;
    background: var(--gm-maroon-dark);
}

.gm-auth .btn-gm:active {
    transform: translateY(1px);
}

.gm-auth .btn-gm-outline {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 12px;
    line-height: 46px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--gm-text);
    background: #fff;
    border: 1px solid var(--gm-line);
    border-radius: 10px;
}

.gm-auth .btn-gm-outline:hover {
    color: var(--gm-maroon);
    border-color: var(--gm-maroon);
    text-decoration: none;
}

.gm-auth .g-recaptcha {
    display: block;
    margin: 0 0 20px;
    text-align: left;
}

/* the client theme centres the widget; keep it aligned with the fields */
.gm-auth .g-recaptcha > div {
    margin: 0 !important;
}

.gm-auth .alert {
    border-radius: 10px;
    font-size: 14px;
}

.gm-auth__foot {
    margin-top: 32px;
    font-size: 13px;
    text-align: center;
    color: var(--gm-muted);
}

.gm-auth__mobile-logo {
    display: none;
}

/* Brand panel stays put while a long form (register) scrolls beside it */
.gm-auth__brand {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

/* ---------- Wide variant: client registration ---------- */

.gm-auth--wide .gm-auth__brand {
    flex-basis: 38%;
}

.gm-auth--wide .gm-auth__main {
    align-items: flex-start;
    padding: 56px 40px 64px;
}

.gm-auth__card--wide {
    max-width: 760px;
}

.gm-auth__head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.gm-auth__lang {
    flex: 0 0 180px;
}

.gm-auth__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
}

.gm-auth__section {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gm-line);
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gm-maroon);
}

.gm-auth__terms {
    margin: 4px 0 20px;
}

.gm-auth__terms .checkbox label {
    font-weight: 500;
    color: var(--gm-muted);
}

.gm-auth .text-danger {
    color: var(--gm-crimson);
}

/* Perfex's register honeypot (spam trap) fields must never be visible */
.gm-auth .honey-element {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

@media (max-width: 1199px) {
    .gm-auth__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .gm-auth__head-row {
        flex-direction: column;
        gap: 0;
    }

    .gm-auth__lang {
        flex-basis: auto;
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Tablet / phone: brand panel collapses to a slim band */
@media (max-width: 991px) {
    .gm-auth {
        flex-direction: column;
    }

    .gm-auth__brand,
    .gm-auth--wide .gm-auth__brand {
        position: relative;
        flex: 0 0 auto;
        height: auto;
        align-self: stretch;
        padding: 20px 24px;
    }

    .gm-auth--wide .gm-auth__main {
        padding: 32px 20px 48px;
    }

    .gm-auth__pitch,
    .gm-auth__legal {
        display: none;
    }

    .gm-auth__logo img {
        max-height: 22px;
    }

    /* slim band on small screens - skip the video to save mobile data */
    .gm-auth__video {
        display: none;
    }

    .gm-auth__main {
        align-items: flex-start;
        padding: 40px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-auth__video {
        display: none;
    }
}

@media (max-width: 380px) {
    .gm-auth .g-recaptcha {
        transform: scale(0.88);
        transform-origin: 0 0;
    }
}

/* Client portal auth pages (login, forgot password): hide the portal header/footer
   behind the full-screen layout. :has() covers pages without a specific body class. */
body.customers_login #header,
body.customers_login .navbar,
body.customers_login footer,
body.customers_login .footer,
body:has(.gm-auth) #header,
body:has(.gm-auth) .navbar,
body:has(.gm-auth) footer,
body:has(.gm-auth) .footer {
    display: none;
}

/* Fields rendered by Perfex's render_input() helper */
.gm-auth .form-group .control-label + .form-control,
.gm-auth .form-group label + .form-control {
    margin-top: 0;
}

/* ---------- Other staff auth screens (forgot / reset password, 2FA code) ---------- */

body.authentication {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(118, 8, 46, 0.08), transparent 60%),
        #f5f5f7 !important;
}

body.authentication .authentication-form-wrapper .btn-primary {
    background: var(--gm-maroon);
    border-color: var(--gm-maroon);
    border-radius: 10px;
    font-weight: 600;
}

body.authentication .authentication-form-wrapper .btn-primary:hover {
    background: var(--gm-maroon-dark);
    border-color: var(--gm-maroon-dark);
}

body.authentication .authentication-form-wrapper .form-control {
    height: 44px;
    border-radius: 10px;
}

body.authentication .authentication-form-wrapper .form-control:focus {
    border-color: var(--gm-maroon);
    box-shadow: 0 0 0 4px rgba(118, 8, 46, 0.12);
}

body.authentication .authentication-form-wrapper > div[class*="tw-bg-white"] {
    border-radius: 16px;
    box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.25);
}