/* ==========================================================
   NEWCO GLPI LOGIN
   Phase 3B - Production Base

   Scope:
     Anonymous GLPI pages only.

   Design system:
     Newco Green   #0F4D3A
     Forest Green  #0B2F24
     Cream/Ivory   #F8F6EF
     Charcoal      #2D2D2D
     Stainless     #9AA0A6
     Copper/Tan    #C68F63
   ========================================================== */

:root {
    --newco-green: #0f4d3a;
    --newco-forest: #0b2f24;
    --newco-cream: #f8f6ef;
    --newco-charcoal: #2d2d2d;
    --newco-stainless: #9aa0a6;
    --newco-copper: #c68f63;
    --newco-white: #ffffff;

    --newco-shadow:
        0 28px 70px rgba(11, 47, 36, 0.16),
        0 6px 18px rgba(11, 47, 36, 0.08);
}

/* ----------------------------------------------------------
   PAGE FOUNDATION
   ---------------------------------------------------------- */

html {
    min-height: 100%;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(198, 143, 99, 0.11) 0,
            rgba(198, 143, 99, 0) 28%
        ),
        radial-gradient(
            circle at 87% 80%,
            rgba(15, 77, 58, 0.09) 0,
            rgba(15, 77, 58, 0) 32%
        ),
        var(--newco-cream);
}

body {
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            rgba(248, 246, 239, 0.98),
            rgba(255, 255, 255, 0.96)
        ) !important;
    color: var(--newco-charcoal);
}

/* Remove Phase 3A marker if a stale browser cache has old rules. */
body::after {
    content: none !important;
}

/* ----------------------------------------------------------
   MAIN LOGIN SURFACE
   ---------------------------------------------------------- */

body form:has(#login_name) {
    position: relative;
}

body form:has(#login_name) > .row {
    width: min(1060px, calc(100vw - 44px));
    margin-left: auto !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns:
        minmax(340px, 430px)
        minmax(360px, 1fr);

    align-items: stretch !important;

    background: var(--newco-white);
    border: 1px solid rgba(11, 47, 36, 0.10);
    border-radius: 22px;
    overflow: hidden;

    box-shadow: var(--newco-shadow);
}

/*
 * GLPI login form column.
 */
body form:has(#login_name) > .row > .col-md-5 {
    width: auto !important;
    max-width: none !important;

    padding:
        clamp(32px, 4.2vw, 56px)
        clamp(28px, 4vw, 52px) !important;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfbf7 100%
        );
}

/*
 * GLPI hook column containing .newco-login-panel.
 */
body form:has(#login_name)
    > .row
    > .col-auto:has(.newco-login-panel) {

    width: auto !important;
    max-width: none !important;
    padding: 0 !important;

    text-align: left !important;

    display: flex;
}

/* ----------------------------------------------------------
   LOGIN FORM TYPOGRAPHY
   ---------------------------------------------------------- */

body form:has(#login_name) .card-header {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    margin-bottom: 30px !important;
}

body form:has(#login_name) .card-header h2 {
    color: transparent !important;
    font-size: 0 !important;
    margin: 0 !important;
}

body form:has(#login_name) .card-header h2::before {
    content: "Welcome to the Newco Helpdesk";

    display: block;

    color: var(--newco-forest);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

body form:has(#login_name) .card-header h2::after {
    content: "Sign in to submit a request or check your tickets.";

    display: block;
    margin-top: 10px;

    color: #5e6762;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
}

/* ----------------------------------------------------------
   FORM LABELS + FIELDS
   ---------------------------------------------------------- */

body form:has(#login_name) .form-label {
    color: #34423c;
    font-size: 13px;
    font-weight: 650;
}

body form:has(#login_name) .form-control,
body form:has(#login_name) .form-select,
body form:has(#login_name) .select2-selection {

    min-height: 46px;

    border: 1px solid #cfd6d2 !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    box-shadow:
        0 1px 2px rgba(11, 47, 36, 0.025) !important;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

body form:has(#login_name) .form-control:hover,
body form:has(#login_name) .form-select:hover {
    border-color: #9eaaa4 !important;
}

body form:has(#login_name) .form-control:focus,
body form:has(#login_name) .form-select:focus {

    border-color: var(--newco-green) !important;

    box-shadow:
        0 0 0 3px rgba(15, 77, 58, 0.12) !important;
}

/* Remember me */
body form:has(#login_name) .form-check-input:checked {
    background-color: var(--newco-green) !important;
    border-color: var(--newco-green) !important;
}

/* ----------------------------------------------------------
   PRIMARY SIGN-IN BUTTON
   ---------------------------------------------------------- */

body form:has(#login_name) button.btn-primary {

    min-height: 48px;

    border: 1px solid var(--newco-green) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            #146448 0%,
            var(--newco-green) 100%
        ) !important;

    color: #ffffff !important;

    font-weight: 700;
    letter-spacing: 0.01em;

    box-shadow:
        0 8px 18px rgba(15, 77, 58, 0.17);

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}

body form:has(#login_name) button.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #175f47 0%,
            #0b3f30 100%
        ) !important;

    transform: translateY(-1px);

    box-shadow:
        0 11px 22px rgba(15, 77, 58, 0.22);
}

body form:has(#login_name) button.btn-primary:active {
    transform: translateY(0);
}

/* Forgot password */
body form:has(#login_name) .forgot_password a {
    color: var(--newco-green) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration-color: rgba(15, 77, 58, 0.32);
}

body form:has(#login_name) .forgot_password a:hover {
    color: var(--newco-forest) !important;
}

/* ----------------------------------------------------------
   NEWCO BRAND PANEL
   ---------------------------------------------------------- */

.newco-login-panel {
    position: relative;

    width: 100%;
    min-height: 570px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(198, 143, 99, 0.30) 0,
            rgba(198, 143, 99, 0) 28%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(255, 255, 255, 0.08) 0,
            rgba(255, 255, 255, 0) 28%
        ),
        linear-gradient(
            145deg,
            #123d30 0%,
            var(--newco-forest) 43%,
            #061d17 100%
        );

    color: #ffffff;
}

.newco-login-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background-image:
        radial-gradient(
            ellipse at 18% 28%,
            transparent 0 11px,
            rgba(255, 255, 255, 0.28) 12px,
            transparent 13px
        ),
        radial-gradient(
            ellipse at 78% 67%,
            transparent 0 15px,
            rgba(198, 143, 99, 0.38) 16px,
            transparent 17px
        );

    background-size:
        98px 82px,
        136px 116px;

    transform: rotate(-7deg) scale(1.1);
}

.newco-login-panel::after {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    right: -105px;
    bottom: -110px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 34px rgba(255, 255, 255, 0.025),
        0 0 0 70px rgba(255, 255, 255, 0.018);
}

.newco-login-panel__inner {
    position: relative;
    z-index: 2;

    height: 100%;

    padding:
        clamp(34px, 4vw, 52px)
        clamp(32px, 4.2vw, 56px);

    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------
   WORDMARK
   ---------------------------------------------------------- */

.newco-wordmark {
    width: max-content;
    max-width: 100%;
}

.newco-wordmark__newco {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 0.88;

    font-weight: 700;
    letter-spacing: 0.075em;

    color: #ffffff;
}

.newco-wordmark__coffee {
    margin-top: 7px;
    padding-left: 3px;

    font-size: 11px;
    line-height: 1;

    font-weight: 750;
    letter-spacing: 0.51em;

    color: rgba(255, 255, 255, 0.91);
}

.newco-brand-rule {
    width: 54px;
    height: 2px;

    margin-top: 22px;

    background: var(--newco-copper);
}

.newco-brand-kicker {
    margin-top: 14px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.newco-brand-kicker span {
    margin: 0 4px;
    color: var(--newco-copper);
}

/* ----------------------------------------------------------
   HEADLINE
   ---------------------------------------------------------- */

.newco-login-message {
    margin-top: clamp(48px, 7vh, 82px);
}

.newco-login-message__eyebrow {
    margin-bottom: 11px;

    color: #d1a47e;

    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.18em;
}

.newco-login-message h1 {
    margin: 0;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(34px, 3.8vw, 50px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.newco-login-message p {
    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.83);

    font-size: 15px;
    line-height: 1.55;
}

/* ----------------------------------------------------------
   VALUES
   ---------------------------------------------------------- */

.newco-support-values {
    margin-top: auto;
    padding-top: 44px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 13px;
}

.newco-support-value {
    min-width: 0;

    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.newco-support-value__icon {
    width: 24px;
    height: 24px;

    margin-bottom: 10px;

    color: #d5a177;
}

.newco-support-value__icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.newco-support-value__icon--bean svg path:first-child {
    fill: none;
}

.newco-support-value strong {
    display: block;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}

.newco-support-value span {
    display: block;

    margin-top: 3px;

    color: rgba(255, 255, 255, 0.59);

    font-size: 9px;
    line-height: 1.3;
}

/* ----------------------------------------------------------
   PANEL FOOTER
   ---------------------------------------------------------- */

.newco-login-panel__footer {
    margin-top: 26px;
    padding-top: 15px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    color: rgba(255, 255, 255, 0.48);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.newco-login-panel__footer-dot {
    padding: 0 7px;
    color: var(--newco-copper);
}

/* ----------------------------------------------------------
   GLPI FOOTER
   ---------------------------------------------------------- */

body footer,
body .footer {
    color: #707972 !important;
    font-size: 11px;
}

body footer a,
body .footer a {
    color: var(--newco-green) !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    body form:has(#login_name) > .row {
        grid-template-columns: 1fr;

        width: min(580px, calc(100vw - 28px));
    }

    body form:has(#login_name)
        > .row
        > .col-auto:has(.newco-login-panel) {

        grid-row: 1;
    }

    .newco-login-panel {
        min-height: 300px;
    }

    .newco-login-panel__inner {
        padding: 30px 32px;
    }

    .newco-login-message {
        margin-top: 32px;
    }

    .newco-login-message h1 {
        font-size: 34px;
    }

    .newco-login-message p {
        margin-top: 14px;
    }

    .newco-support-values {
        padding-top: 30px;
    }

    .newco-login-panel__footer {
        display: none;
    }
}

@media (max-width: 520px) {

    body {
        background: var(--newco-cream) !important;
    }

    body form:has(#login_name) > .row {
        width: calc(100vw - 18px);
        border-radius: 16px;
    }

    body form:has(#login_name) > .row > .col-md-5 {
        padding: 30px 24px !important;
    }

    .newco-login-panel {
        min-height: 245px;
    }

    .newco-login-panel__inner {
        padding: 25px 24px;
    }

    .newco-login-message {
        margin-top: 27px;
    }

    .newco-login-message h1 {
        font-size: 29px;
    }

    .newco-login-message p {
        display: none;
    }

    .newco-support-values {
        padding-top: 24px;
        gap: 8px;
    }

    .newco-support-value {
        padding-top: 10px;
    }

    .newco-support-value__icon {
        width: 21px;
        height: 21px;
        margin-bottom: 6px;
    }

    .newco-support-value strong {
        font-size: 9px;
    }

    .newco-support-value span {
        display: none;
    }

    .newco-brand-kicker {
        white-space: normal;
        line-height: 1.6;
    }
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    body form:has(#login_name) button.btn-primary,
    body form:has(#login_name) .form-control,
    body form:has(#login_name) .form-select {
        transition: none !important;
    }
}

/* ==========================================================
   PHASE 3B.1
   GLPI 11 ANONYMOUS SHELL REFINEMENT
   ========================================================== */

/*
 * GLPI 11 renders anonymous pages inside:
 *
 * body.welcome-anonymous
 *   main.page-anonymous
 *     .flex-fill...
 *       .container-tight
 *         stock GLPI logo
 *         .main-content-card
 *
 * Keep the structure, but visually neutralize the stock shell.
 */

/* Full anonymous viewport */
body.welcome-anonymous {
    min-height: 100vh !important;
    overflow-x: hidden;
}

body.welcome-anonymous .page-anonymous {
    min-height: 100vh !important;
}

/* Remove GLPI's large stock logo above the login card. */
body.welcome-anonymous .glpi-logo {
    display: none !important;
}

/*
 * Remove the otherwise empty logo wrapper from layout flow.
 */
body.welcome-anonymous
.page-anonymous
.container-tight
> .text-center:first-child {
    display: none !important;
}

/*
 * GLPI's anonymous layout adds large py/mt spacing.
 * Let our branded surface control its own spacing.
 */
body.welcome-anonymous
.page-anonymous
> .flex-fill {
    min-height: 100vh !important;

    margin-top: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;

    justify-content: center !important;
}

/*
 * GLPI applies an inline max-width to this container.
 * Override it so our two-column layout has enough room and
 * cannot generate the horizontal scrollbar seen in Phase 3B.
 */
body.welcome-anonymous
.page-anonymous
.container-tight {
    width: min(1120px, calc(100vw - 40px)) !important;
    max-width: 1120px !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

/*
 * Neutralize GLPI's outer anonymous card.
 * Our inner login/support surface is the actual visual card.
 */
body.welcome-anonymous
.page-anonymous
.main-content-card {
    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}

/*
 * Anonymous layout has a header block that is empty on login.
 * Make absolutely sure it contributes no space.
 */
body.welcome-anonymous
.page-anonymous
.main-content-card
> .card-header:empty {
    display: none !important;
}

/* Strip outer GLPI card-body padding. */
body.welcome-anonymous
.page-anonymous
.main-content-card
> .card-body {
    padding: 0 !important;
}

/*
 * Our branded row should now fit entirely inside the corrected
 * 1120px anonymous container.
 */
body.welcome-anonymous
form:has(#login_name)
> .row {
    width: 100% !important;
    max-width: 1060px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Slightly refine card proportions now that the outer shell is gone.
 */
body.welcome-anonymous
form:has(#login_name)
> .row {
    min-height: 560px;

    border-radius: 20px;

    box-shadow:
        0 30px 75px rgba(11, 47, 36, 0.14),
        0 8px 24px rgba(11, 47, 36, 0.07);
}

/*
 * Keep GLPI copyright present but make it subordinate rather
 * than part of the visual composition.
 */
body.welcome-anonymous
.page-anonymous
.container-tight
> .text-center.text-muted.mt-3 {
    margin-top: 14px !important;

    color: #7b817d !important;

    font-size: 10px !important;
    opacity: 0.72;
}

body.welcome-anonymous
.page-anonymous
.container-tight
> .text-center.text-muted.mt-3 a {
    color: #65706a !important;
}

/*
 * Make the login-side width slightly more deliberate.
 */
body.welcome-anonymous
form:has(#login_name)
> .row
> .col-md-5 {
    min-width: 0 !important;
}

/*
 * On large screens, let the support panel dominate slightly.
 */
@media (min-width: 901px) {

    body.welcome-anonymous
    form:has(#login_name)
    > .row {
        grid-template-columns:
            minmax(360px, 0.92fr)
            minmax(430px, 1.08fr);
    }

    .newco-login-panel {
        min-height: 560px;
    }
}

/* Tablet */
@media (max-width: 900px) {

    body.welcome-anonymous
    .page-anonymous
    > .flex-fill {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    body.welcome-anonymous
    .page-anonymous
    .container-tight {
        width: min(600px, calc(100vw - 24px)) !important;
    }

    body.welcome-anonymous
    form:has(#login_name)
    > .row {
        min-height: 0;
    }
}

/* Phone */
@media (max-width: 520px) {

    body.welcome-anonymous
    .page-anonymous
    > .flex-fill {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    body.welcome-anonymous
    .page-anonymous
    .container-tight {
        width: calc(100vw - 12px) !important;
    }

    body.welcome-anonymous
    .page-anonymous
    .container-tight
    > .text-center.text-muted.mt-3 {
        margin-top: 8px !important;
        font-size: 9px !important;
    }
}

/* NEWCO LOGIN FLIP - START */

/* ==========================================================
   NEWCO LOGIN DESKTOP COLUMN FLIP

   LEFT:
     Newco branded welcome panel

   RIGHT:
     Native GLPI authentication form

   DOM order remains untouched.
   ========================================================== */

@media (min-width: 901px) {

    /*
     * Keep the same overall proportions, but assign the branded
     * panel to column 1 and the authentication form to column 2.
     */
    body.welcome-anonymous
    form:has(#login_name)
    > .row {

        grid-template-columns:
            minmax(430px, 1.08fr)
            minmax(360px, 0.92fr) !important;
    }

    /*
     * Newco branded panel -> LEFT
     */
    body.welcome-anonymous
    form:has(#login_name)
    > .row
    > .col-auto:has(.newco-login-panel) {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /*
     * Native GLPI login form -> RIGHT
     */
    body.welcome-anonymous
    form:has(#login_name)
    > .row
    > .col-md-5 {

        grid-column: 2 !important;
        grid-row: 1 !important;
    }
}

/*
 * Below desktop width, retain the existing responsive behavior:
 * Newco panel first, login form beneath it.
 */
@media (max-width: 900px) {

    body.welcome-anonymous
    form:has(#login_name)
    > .row
    > .col-auto:has(.newco-login-panel) {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.welcome-anonymous
    form:has(#login_name)
    > .row
    > .col-md-5 {

        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* NEWCO LOGIN FLIP - END */

/* NEWCO OFFICIAL LOGO - LOGIN START */

/* ==========================================================
   OFFICIAL NEWCO WORDMARK
   Localized first-party asset.
   ========================================================== */

.newco-wordmark {
    width: 225px !important;
    height: 66px !important;

    position: relative;

    overflow: visible;
}

.newco-wordmark__newco,
.newco-wordmark__coffee {

    display: none !important;
}

.newco-wordmark::before {

    content: "";

    display: block;

    width: 100%;
    height: 100%;

    background-image:
        url("/plugins/newcobranding/assets/brand/newco-official-logo.png");

    background-repeat:
        no-repeat;

    background-position:
        left center;

    background-size:
        contain;

    /*
     * Login artwork sits on dark forest green.
     * Normalize the official artwork into a clean white mark
     * without altering the source asset on disk.
     */
    filter:
        brightness(0)
        invert(1);
}

@media (max-width: 520px) {

    .newco-wordmark {

        width: 190px !important;
        height: 54px !important;
    }
}

/* NEWCO OFFICIAL LOGO - LOGIN END */