@font-face {
    font-family: "Muli";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("/plugins/cmdtekbranding/fonts/muli-latin.woff2") format("woff2");
}

:root {
    /* Brand tokens derived from the 2026-08-01 CMDTek vector master. */
    --cmdtek-green-bright: #00bf78;
    --cmdtek-green: #00ae70;
    --cmdtek-green-dark: #009e69;
    --cmdtek-green-text: #006b47;
    --cmdtek-panel: #18242d;
    --cmdtek-charcoal: #2a3136;
    --cmdtek-ink: #192229;
    --cmdtek-muted: #47545c;
    --cmdtek-surface: #f5f8f7;
    --cmdtek-border: #d3e1dc;
    --cmdtek-mint: #c8f8df;

    /* Exact, script-free vector masters selected for each surface. */
    --glpi-logo-light: url("/plugins/cmdtekbranding/pics/cmdtek-primary-white.svg");
    --glpi-logo-dark: url("/plugins/cmdtekbranding/pics/cmdtek-primary-full-color.svg");
    --glpi-logo-dark-login: url("/plugins/cmdtekbranding/pics/cmdtek-primary-full-color.svg");
    --glpi-logo-light-login: url("/plugins/cmdtekbranding/pics/cmdtek-primary-white.svg");

    /* Carry the new logo palette into GLPI's semantic theme variables. */
    --tblr-body-font-family: "Muli", Arial, sans-serif;
    --tblr-primary: var(--cmdtek-green);
    --tblr-primary-rgb: 0, 174, 112;
    --tblr-primary-fg: var(--cmdtek-panel);
    --tblr-primary-darken: var(--cmdtek-green-dark);
    --tblr-primary-lt: #e4f8ee;
    --tblr-primary-lt-rgb: 228, 248, 238;
    --tblr-link-color: var(--cmdtek-green-text);
    --tblr-link-color-rgb: 0, 107, 71;
    --tblr-link-hover-color: #005a3c;
    --tblr-link-hover-color-rgb: 0, 90, 60;
    --tblr-focus-ring-color: rgba(0, 174, 112, 0.24);
    --tblr-border-color: var(--cmdtek-border);
    --tblr-border-color-translucent: rgba(24, 36, 45, 0.12);
    --tblr-border-radius: 5px;
    --tblr-border-radius-lg: 10px;
    --tblr-muted: var(--cmdtek-muted);
    --tblr-muted-rgb: 71, 84, 92;

    --glpi-palette-color-1: var(--cmdtek-panel);
    --glpi-palette-color-2: #ffffff;
    --glpi-palette-color-3: var(--cmdtek-green-dark);
    --glpi-palette-color-4: var(--cmdtek-green);
    --glpi-mainmenu-bg: var(--cmdtek-panel);
    --glpi-mainmenu-active-bg: var(--cmdtek-green-text);
    --glpi-mainmenu-fg: #ffffff;
    --glpi-mainmenu-fg-muted: var(--cmdtek-mint);
    --glpi-form-header-bg: #e4f8ee;
    --glpi-form-header-border-color: #a6dec8;
    --glpi-form-header-fg: var(--cmdtek-green-text);
    --glpi-illustrations-primary: var(--cmdtek-green);
    --glpi-search-bg: #ffffff;
    --glpi-search-border-color: var(--cmdtek-border);
}

/* GLPI's named palettes use a more specific selector than :root. */
:root[data-glpi-theme] {
    --glpi-palette-color-1: var(--cmdtek-panel);
    --glpi-palette-color-2: #ffffff;
    --glpi-palette-color-3: var(--cmdtek-green-dark);
    --glpi-palette-color-4: var(--cmdtek-green);
    --glpi-mainmenu-bg: var(--cmdtek-panel);
    --glpi-mainmenu-active-bg: var(--cmdtek-green-text);
}

/* Match the website's light surfaces without overriding GLPI's dark mode. */
:root[data-glpi-theme][data-glpi-theme-dark="0"] {
    --tblr-body-bg: var(--cmdtek-surface);
    --tblr-body-bg-rgb: 245, 248, 247;
    --tblr-body-color: var(--cmdtek-ink);
    --tblr-body-color-rgb: 25, 34, 41;
    --tblr-emphasis-color: var(--cmdtek-ink);
    --tblr-bg-surface-secondary: #f7faf8;
    --tblr-bg-surface-tertiary: var(--cmdtek-surface);
    --tblr-navbar-color: var(--cmdtek-panel);
    --glpi-hover-bg: rgba(0, 174, 112, 0.08);
    --glpi-badge-bg: #e4f8ee;
    --glpi-scrollbar-thumb-color: rgba(0, 158, 105, 0.55);
    --glpi-tabs-border-color: var(--cmdtek-border);
    --glpi-tabs-active-border-color: var(--cmdtek-border);
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Muli", Arial, sans-serif;
}

/* Full company wordmark in expanded authenticated navigation. */
.page .navbar-brand .glpi-logo {
    background-position: center;
    background-size: contain;
    width: 180px;
    height: 52px;
}

/* Keep GLPI's compact navigation behavior when the sidebar is collapsed. */
body.navbar-collapsed .navbar-brand .glpi-logo {
    background-position: center;
    background-size: contain;
    background-image: url("/plugins/cmdtekbranding/pics/cmdtek-terminal-icon-full-color.svg") !important;
    width: 52px;
}

/* Green is the primary action throughout the authenticated application. */
.btn-primary {
    --tblr-btn-bg: var(--cmdtek-green);
    --tblr-btn-border-color: var(--cmdtek-green);
    --tblr-btn-color: var(--cmdtek-panel);
    --tblr-btn-hover-bg: var(--cmdtek-green-dark);
    --tblr-btn-hover-border-color: var(--cmdtek-green-dark);
    --tblr-btn-hover-color: var(--cmdtek-panel);
    --tblr-btn-active-bg: var(--cmdtek-panel);
    --tblr-btn-active-border-color: var(--cmdtek-panel);
    --tblr-btn-active-color: #ffffff;
}

.form-control:focus,
.form-select:focus,
.ts-control.focus,
.form-check-input:focus {
    border-color: var(--cmdtek-green);
    box-shadow: 0 0 0 0.25rem rgba(0, 174, 112, 0.16);
}

.form-check-input:checked {
    background-color: var(--cmdtek-green);
    border-color: var(--cmdtek-green);
}

body:not(.welcome-anonymous) .card {
    border-color: var(--cmdtek-border);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(24, 36, 45, 0.05);
}

/* Anonymous and login pages mirror the green website hero and card system. */
body.welcome-anonymous {
    min-height: 100vh;
    background: linear-gradient(125deg, var(--cmdtek-panel) 0%, var(--cmdtek-charcoal) 54%, var(--cmdtek-green) 100%);
    color: var(--cmdtek-ink);
    overflow-x: hidden;
    position: relative;
}

body.welcome-anonymous::before,
body.welcome-anonymous::after {
    content: "";
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body.welcome-anonymous::before {
    width: 570px;
    height: 570px;
    right: -190px;
    top: -250px;
}

body.welcome-anonymous::after {
    width: 360px;
    height: 360px;
    left: -170px;
    bottom: -220px;
}

.page-anonymous {
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.page-anonymous > .flex-fill {
    justify-content: center;
    margin-top: 0 !important;
    padding: 32px 0 !important;
}

.page-anonymous .container-tight {
    width: min(1080px, calc(100% - 40px));
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* The logo is rendered in the branded panel instead of floating above the card. */
.page-anonymous .container-tight > .text-center {
    display: none;
}

.page-anonymous .main-content-card {
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(430px, 1.1fr);
    min-height: 610px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(24, 36, 45, 0.16);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(8, 35, 22, 0.28);
}

.page-anonymous .main-content-card > .card-header:empty {
    display: none;
}

.cmdtek-login-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 54px 50px;
    position: relative;
    isolation: isolate;
    background: linear-gradient(145deg, var(--cmdtek-panel) 0%, var(--cmdtek-charcoal) 68%, var(--cmdtek-green-dark) 100%);
    color: #ffffff;
}

.cmdtek-login-intro::before,
.cmdtek-login-intro::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.cmdtek-login-intro::before {
    width: 360px;
    height: 360px;
    right: -210px;
    top: -190px;
}

.cmdtek-login-intro::after {
    width: 250px;
    height: 250px;
    left: -145px;
    bottom: -145px;
}

.cmdtek-login-logo {
    display: block;
    width: min(270px, 100%);
    height: auto;
    margin: 0 0 56px;
    object-fit: contain;
}

.cmdtek-login-eyebrow,
.page-anonymous .cmdtek-form-eyebrow {
    margin: 0 0 16px;
    color: var(--cmdtek-mint);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-transform: uppercase;
}

.cmdtek-login-intro h1 {
    max-width: 430px;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
}

.cmdtek-login-copy {
    max-width: 430px;
    margin: 0;
    color: #edfdf3;
    font-size: 1.03rem;
    line-height: 1.7;
}

.cmdtek-login-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 34px;
}

.cmdtek-login-services span {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
}

.page-anonymous .main-content-card > .card-body {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 54px 58px;
    background: #ffffff;
}

.page-anonymous .main-content-card form {
    width: 100%;
}

.page-anonymous .main-content-card form > .row {
    display: block;
    margin: 0;
}

.page-anonymous .main-content-card form > .row > [class*="col-"] {
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
    padding: 0;
}

.page-anonymous .main-content-card form .card-header {
    display: block;
    min-height: 0;
    margin: 0 0 30px !important;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--cmdtek-border);
    text-align: left;
}

.page-anonymous .main-content-card h2 {
    width: auto;
    margin: 0 !important;
    color: var(--cmdtek-ink);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.2;
}

.page-anonymous .cmdtek-form-eyebrow {
    margin-bottom: 9px;
    color: var(--cmdtek-green-dark);
}

.page-anonymous .form-label {
    color: var(--cmdtek-ink);
    font-weight: 700;
}

.page-anonymous .form-control,
.page-anonymous .form-select,
.page-anonymous .ts-control {
    min-height: 44px;
    border: 1px solid var(--cmdtek-border);
    border-radius: 4px;
    color: var(--cmdtek-ink);
    background: #ffffff;
}

.page-anonymous .btn-primary {
    min-height: 46px;
    border-radius: 5px;
    font-weight: 800;
    box-shadow: none;
}

.page-anonymous a {
    color: var(--cmdtek-green-dark);
    font-weight: 700;
}

.page-anonymous .container-tight > .text-center.text-muted {
    display: block;
    margin-top: 18px !important;
    color: #e9f2ec !important;
}

.page-anonymous .container-tight > .text-center.text-muted a,
.page-anonymous .copyright {
    color: #e9f2ec !important;
    font-weight: 600;
}

.page-anonymous .container-tight > .text-center.text-muted a:hover {
    color: #ffffff !important;
}

@media (max-width: 800px) {
    .page-anonymous > .flex-fill {
        padding: 24px 0 !important;
    }

    .page-anonymous .container-tight {
        width: min(680px, calc(100% - 32px));
    }

    .page-anonymous .main-content-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .cmdtek-login-intro {
        padding: 38px 42px;
    }

    .cmdtek-login-logo {
        width: 230px;
        margin-bottom: 32px;
    }

    .cmdtek-login-intro h1 {
        max-width: 560px;
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .cmdtek-login-copy {
        max-width: 560px;
    }

    .cmdtek-login-services {
        margin-top: 24px;
    }

    .page-anonymous .main-content-card > .card-body {
        padding: 42px;
    }
}

@media (max-width: 520px) {
    .page-anonymous .container-tight {
        width: calc(100% - 24px);
    }

    .cmdtek-login-intro,
    .page-anonymous .main-content-card > .card-body {
        padding: 30px 25px;
    }

    .cmdtek-login-logo {
        width: 205px;
        margin-bottom: 26px;
    }

    .cmdtek-login-services {
        display: none;
    }

    .page-anonymous .main-content-card form .card-header {
        margin-bottom: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}