/* ============================================================
   NCR Angola - Login GLPI 11.0.8
   ============================================================ */

:root {
    --ncr-orange: #ff7d0b;
    --ncr-orange-light: #ff9b39;
    --ncr-navy: #06172f;
    --ncr-card: #061a36;
    --ncr-text: #f7f9fd;
    --ncr-soft: #c9d5e6;
    --ncr-line: rgba(255, 255, 255, .28);
}

/* ============================================================
   BASE
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body.ncr-login-page {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ncr-text);
    background: #071426;
    overflow-x: hidden;
    overflow-y: auto !important;
}

body.ncr-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;

    background:
        linear-gradient(
            90deg,
            rgba(1, 15, 37, .75) 0%,
            rgba(2, 20, 46, .55) 38%,
            rgba(3, 15, 30, .12) 100%
        ),
        url("../images/bg-login.jpg") center / cover no-repeat;

    background-color: #071a33;
}

body.ncr-login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 73, 153, .16),
            transparent 52%
        ),
        radial-gradient(
            circle at 18% 64%,
            rgba(0, 107, 210, .32),
            transparent 24%
        );

    pointer-events: none;
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */

.skip-link {
    position: absolute;
    top: -4rem;
    left: 1rem;
    z-index: 20;

    padding: .75rem 1rem;

    border-radius: .4rem;

    background: #fff;
    color: #000;
}

.skip-link:focus {
    top: 1rem;
}

/* ============================================================
   ESTRUTURA PRINCIPAL
   ============================================================ */

.ncr-login-shell {
    display: grid;
    grid-template-rows: auto;
    min-height: 100dvh;
}

.ncr-stage {
    position: relative;

    display: grid;
    grid-template-columns: 21rem 35rem;

    align-items: center;

    column-gap: 5rem;

    width: calc(100% - 8rem);
    max-width: 74rem;

    min-height: calc(100dvh - 7.65rem);

    margin: 0 auto;
    padding: 3rem 0;
}

.ncr-stage .ncr-left {
    position: relative;
    z-index: 1;
}

/* ============================================================
   BLOCO ESQUERDO
   ============================================================ */

.ncr-left h1 {
    margin: 0;

    font-size: 2.02rem;
    line-height: 1.27;

    letter-spacing: -.035em;

    font-weight: 750;
}

.ncr-left h1 span {
    display: block;
    color: var(--ncr-orange);
}

.ncr-left-message {
    display: flex;

    gap: 1rem;

    align-items: flex-start;

    margin-top: 2.2rem;

    color: #edf4ff;

    font-size: .93rem;
    line-height: 1.75;
}

.ncr-left-message i {
    margin-top: .3rem;

    color: #fff;

    font-size: 1.45rem;
}

.ncr-left-message p {
    margin: 0;
}

/* ============================================================
   AREA DE AUTENTICACAO
   ============================================================ */

.ncr-auth-area {
    position: relative;
    z-index: 1;
}

.ncr-auth-card {
    width: 100%;

    min-height: 37.35rem;

    padding: 3rem 2.55rem 2.4rem;

    border: 1px solid rgba(169, 197, 232, .12);

    border-radius: .75rem;

    background:
        linear-gradient(
            155deg,
            rgba(8, 30, 60, .96),
            rgba(3, 19, 42, .98)
        );

    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .28);
}

/* ============================================================
   CABECALHO DO CARTAO
   ============================================================ */

.ncr-card-header {
    margin-bottom: 2rem;
}

.ncr-card-header p {
    margin: 0 0 .35rem;

    color: var(--ncr-orange);

    font-size: 1.1rem;
    font-weight: 800;
}

.ncr-card-header h2 {
    margin: 0;

    color: #fff;

    font-size: 1.55rem;
    line-height: 1.2;

    letter-spacing: -.025em;
}

/* ============================================================
   CAMPOS
   ============================================================ */

.ncr-field {
    margin-top: 1.35rem;
}

.ncr-field label {
    display: block;

    margin-bottom: .48rem;

    color: #fff;

    font-size: .82rem;
    font-weight: 500;
}

.ncr-control {
    position: relative;
}

.ncr-control > i {
    position: absolute;

    top: 50%;
    left: .84rem;

    z-index: 2;

    transform: translateY(-50%);

    color: #7f8da6;

    font-size: 1.05rem;

    pointer-events: none;
}

/* ============================================================
   INPUTS E SELECT
   ============================================================ */

.ncr-control .form-control,
.ncr-control select,
.ncr-control .select2-selection {
    width: 100%;

    height: 2.62rem !important;
    min-height: 2.62rem;

    padding: .55rem 2.65rem .55rem 2.55rem !important;

    border: 1px solid #dae1eb !important;

    border-radius: .36rem !important;

    background: #f8f9fb !important;

    color: #576681 !important;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: .87rem;

    box-shadow: none !important;
}

/* ============================================================
   ESTADO ATIVO DOS INPUTS
   ============================================================ */

.ncr-control .form-control:focus {
    border-color: var(--ncr-orange) !important;

    outline: 2px solid rgba(255, 125, 11, .65);

    outline-offset: 0;
}

/* ============================================================
   ORIGEM DO LOGIN
   ============================================================ */

.ncr-select-control {
    position: relative;

    width: 100%;

    margin-bottom: 1rem;
}

.ncr-select-control select {
    display: block !important;

    width: 100% !important;

    height: 2.62rem !important;
    min-height: 2.62rem !important;

    margin: 0 !important;

    padding-top: .55rem !important;
    padding-right: 2.65rem !important;
    padding-bottom: .55rem !important;
    padding-left: 2.55rem !important;

    border: 1px solid #dae1eb !important;

    border-radius: .36rem !important;

    background-color: #f8f9fb !important;

    color: #576681 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;

    font-size: .87rem !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

    text-align: left !important;

    text-align-last: left !important;

    vertical-align: middle !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    box-shadow: none !important;

    outline: none !important;

    cursor: pointer;
}

.ncr-select-control select:focus {
    border-color: #dae1eb !important;

    outline: none !important;

    box-shadow: none !important;
}

.ncr-select-control > i {
    position: absolute !important;

    top: 50% !important;
    left: .84rem !important;

    z-index: 2 !important;

    transform: translateY(-50%) !important;

    color: #7f8da6 !important;

    font-size: 1.05rem !important;

    pointer-events: none !important;
}

.ncr-select-control::after {
    content: "";

    position: absolute;

    top: 50%;
    right: .72rem;

    z-index: 3;

    width: 0;
    height: 0;

    margin-top: -2px;

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #7f8794;

    pointer-events: none;
}

/* ============================================================
   SELECT2
   ============================================================ */

.ncr-select-control .select2-selection {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    height: 2.62rem !important;
    min-height: 2.62rem !important;

    padding: 0 2.65rem 0 2.55rem !important;

    border: 1px solid #dae1eb !important;

    border-radius: .36rem !important;

    background: #f8f9fb !important;

    box-shadow: none !important;
}

.ncr-select-control .select2-selection__rendered {
    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #576681 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;

    font-size: .87rem !important;

    font-weight: 400 !important;

    line-height: 2.62rem !important;

    text-align: left !important;
}

/* ============================================================
   PASSWORD
   ============================================================ */

.ncr-password-toggle {
    position: absolute;

    top: 50%;
    right: .45rem;

    z-index: 3;

    width: 2rem;
    height: 2rem;

    transform: translateY(-50%);

    border: 0;

    border-radius: .3rem;

    background: transparent;

    color: #8491a7;

    cursor: pointer;
}

.ncr-password-toggle:hover,
.ncr-password-toggle:focus {
    color: var(--ncr-orange);
}

/* ============================================================
   REMEMBER
   ============================================================ */

.ncr-remember {
    display: flex;

    align-items: center;

    gap: .48rem;

    margin: 1.25rem 0 1.35rem;

    color: #fff;

    font-size: .83rem;
}

.ncr-remember input {
    width: 1.08rem;
    height: 1.08rem;

    margin: 0;

    accent-color: var(--ncr-orange);
}

/* ============================================================
   BOTAO ENTRAR NO PORTAL
   ============================================================ */

.ncr-submit {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: .8rem;

    width: 82%;

    height: 2.72rem;

    margin-left: auto;
    margin-right: auto;

    border: 1px solid #ff9a42 !important;

    border-radius: .36rem !important;

    background:
        linear-gradient(
            90deg,
            var(--ncr-orange),
            #ff8920
        ) !important;

    color: #fff !important;

    font-size: .87rem;

    font-weight: 800;

    box-shadow: none !important;

    filter: brightness(1.06);

    transform: none;

    cursor: pointer;
}

.ncr-submit:hover {
    filter: brightness(1.1);
}

.ncr-submit:focus {
    outline: 2px solid rgba(255, 125, 11, .55);

    outline-offset: 2px;
}

.ncr-submit i {
    position: absolute;

    right: 1.05rem;

    font-size: 1.28rem;
}

/* ============================================================
   ACESSO RAPIDO
   ============================================================ */

.ncr-quick-access {
    display: flex;

    align-items: center;

    gap: 1rem;

    margin: 1.45rem 0 1.55rem;

    color: #bdc9d8;

    font-size: .73rem;

    text-align: center;
}

.ncr-quick-access::before,
.ncr-quick-access::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--ncr-line);
}

.ncr-quick-access span {
    white-space: nowrap;
}

/* ============================================================
   HELPDESK
   ============================================================ */

.ncr-helpdesk {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .42rem;

    color: #fff;

    text-align: center;

    font-size: .72rem;

    font-weight: 600;

    line-height: 1.3;

    text-decoration: none;
}

.ncr-helpdesk i {
    font-size: 1.38rem;
}

.ncr-helpdesk:hover {
    color: var(--ncr-orange);
}

/* ============================================================
   MENSAGENS
   ============================================================ */

.ncr-login-message {
    margin-bottom: 1rem;

    padding: .7rem .85rem;

    border-left: 3px solid var(--ncr-orange);

    background: rgba(255, 255, 255, .08);

    font-size: .8rem;
}

.ncr-plugin-login-area {
    margin-top: 1rem;
}

/* ============================================================
   FOOTER - REFERENCIA DA IMAGEM
   ============================================================ */

.ncr-page-footer {
    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    grid-template-rows: 4.45rem 3.2rem;

    gap: 0;

    width: 100%;

    padding: 0 clamp(3.75rem, 5vw, 5rem);

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

    background:
        linear-gradient(
            90deg,
            #132c52 0%,
            #162f55 52%,
            #132b50 100%
        );

    color: #fff;
}

/* ============================================================
   INFORMACOES DA EMPRESA
   ============================================================ */

.ncr-company-details {
    grid-column: 1;

    grid-row: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    min-width: 0;

    padding: 0 2rem 0 0;

    font-size: .75rem;
}

.ncr-company-details span {
    display: inline-flex;

    align-items: center;

    gap: .62rem;

    min-width: 0;

    white-space: nowrap;

    line-height: 1;
}

.ncr-company-details i {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    width: 1.15rem;

    font-size: 1.05rem;

    line-height: 1;
}

/* ============================================================
   RELOGIO / LOCALIZACAO / DATA / HORA
   ============================================================ */

.ncr-clock {
    grid-column: 2;

    grid-row: 1;

    display: grid;

    grid-template-columns: auto auto auto;

    grid-template-rows: auto auto;

    align-items: center;

    column-gap: .9rem;

    min-width: 10.25rem;

    padding: 0 0 0 1.55rem;

    border-left: 1px solid rgba(255, 255, 255, .28);

    font-size: .72rem;

    font-weight: 600;

    line-height: 1.2;
}

.ncr-clock-place {
    grid-column: 1;

    grid-row: 1;

    white-space: nowrap;
}

.ncr-clock-date {
    grid-column: 1;

    grid-row: 2;

    white-space: nowrap;
}

.ncr-clock-time {
    grid-column: 2 / 4;

    grid-row: 1 / 3;

    align-self: center;

    margin-left: .55rem;

    font-size: 1.22rem;

    font-weight: 800;

    letter-spacing: .01em;

    white-space: nowrap;
}

/* ============================================================
   COPYRIGHT
   ============================================================ */

.ncr-copyright {
    grid-column: 1 / -1;

    grid-row: 2;

    display: grid;

    place-items: center;

    width: 100%;

    margin: 0;

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

    color: #fff;

    font-size: 0 !important;

    text-align: center;
}

.ncr-copyright::after {

    content: "\00A9 2026 Tiago Mota. Todos os direitos reservados.";

    display: block;

    color: #fff;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: .75rem;

    font-weight: 400;

    line-height: 1.3;

    text-align: center;
}

/* ============================================================
   TABLET - 1040px
   ============================================================ */

@media (max-width: 1040px) {

    .ncr-stage {
        grid-template-columns: 18rem minmax(0, 32rem);

        column-gap: 3rem;

        width: calc(100% - 3rem);

        max-width: 60rem;
    }

    .ncr-left h1 {
        font-size: 1.8rem;
    }

    .ncr-page-footer {
        padding: 0 2rem;
    }

    .ncr-company-details {
        gap: 1.5rem;

        padding-right: 1.25rem;

        font-size: .68rem;
    }

    .ncr-clock {
        font-size: .68rem;
    }

    .ncr-clock-time {
        font-size: 1.05rem;
    }
}

/* ============================================================
   TABLET / MOBILE - <= 820px
   ============================================================ */

@media (max-width: 820px) {

    html,
    body {
        overflow-x: hidden;
    }

    .ncr-login-shell {
        min-height: 100vh;
        min-height: 100dvh;

        display: flex;

        flex-direction: column;
    }

    .ncr-stage {
        flex: 1;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        width: 100%;
        max-width: 100%;

        min-height: 0;

        padding: 2rem 1rem;

        gap: 2rem;

        margin: 0;
    }

    .ncr-stage .ncr-left {
        width: 100%;

        max-width: 32rem;

        text-align: center;
    }

    .ncr-left h1 {
        font-size: 1.55rem;
    }

    .ncr-left-message {
        justify-content: center;

        margin-top: 1.2rem;
    }

    .ncr-auth-area {
        width: 100%;

        max-width: 32rem;
    }

    .ncr-auth-card {
        min-height: 0;

        padding: 2rem 1.5rem;

        width: 100%;
    }

    .ncr-page-footer {
        flex-shrink: 0;

        grid-template-columns: 1fr;

        grid-template-rows: auto auto;

        padding: 1rem 1rem .5rem;
    }

    .ncr-company-details {
        grid-column: 1;

        grid-row: 1;

        display: grid;

        grid-template-columns: 1fr 1fr;

        justify-items: center;

        align-items: center;

        padding: 0;

        gap: .55rem .5rem;

        min-height: 0;
    }

    .ncr-clock {
        grid-column: 1;

        grid-row: 2;

        justify-self: center;

        margin: 1rem 0 0;

        padding-left: 0;

        border-left: 0;
    }

    .ncr-copyright {
        grid-column: 1;

        grid-row: 3;

        margin-top: 1rem;

        min-height: 2.7rem;
    }
}

/* ============================================================
   MOBILE - <= 520px
   ============================================================ */

@media (max-width: 520px) {

    .ncr-stage {
        padding: 1.5rem .75rem;

        gap: 1.5rem;
    }

    .ncr-left {
        max-width: 100%;
    }

    .ncr-left h1 {
        font-size: 1.3rem;
    }

    .ncr-left-message {
        font-size: .82rem;

        margin-top: 1rem;
    }

    .ncr-auth-area {
        max-width: 100%;
    }

    .ncr-auth-card {
        padding: 1.5rem 1rem;
    }

    .ncr-card-header h2 {
        font-size: 1.2rem;
    }

    .ncr-control .form-control,
    .ncr-control select,
    .ncr-control .select2-selection {
        font-size: .84rem;
    }

    .ncr-select-control .select2-selection__rendered {
        font-size: .84rem !important;

        line-height: 2.62rem !important;
    }

    .ncr-company-details {
        font-size: .62rem;

        gap: .45rem .5rem;
    }

    .ncr-clock {
        display: none;
    }

    .ncr-copyright {
        font-size: 0 !important;
    }

    .ncr-copyright::after {
        font-size: .64rem;
    }
}

/* ============================================================
   MOBILE PEQUENO - <= 380px
   ============================================================ */

@media (max-width: 380px) {

    .ncr-stage {
        padding: 1.25rem .5rem;

        gap: 1.25rem;
    }

    .ncr-left h1 {
        font-size: 1.1rem;
    }

    .ncr-auth-card {
        padding: 1.25rem .85rem;
    }

    .ncr-card-header p {
        font-size: .9rem;
    }

    .ncr-card-header h2 {
        font-size: 1.05rem;
    }

    .ncr-control .form-control,
    .ncr-control select {
        font-size: .8rem;

        height: 2.4rem !important;
    }

    .ncr-select-control .select2-selection__rendered {
        font-size: .8rem !important;

        line-height: 2.4rem !important;
    }

    .ncr-submit {
        height: 2.45rem;

        font-size: .82rem;
    }

    .ncr-company-details {
        font-size: .6rem;
    }

    .ncr-copyright {
        font-size: 0 !important;
    }

    .ncr-copyright::after {
        font-size: .6rem;
    }
}

/* ============================================================
   ALTURA PEQUENA - MOBILE LANDSCAPE
   ============================================================ */

@media (max-height: 500px) and (max-width: 820px) {

    .ncr-left {
        display: none;
    }

    .ncr-stage {
        padding: .75rem;

        justify-content: center;
    }

    .ncr-auth-card {
        padding: 1.1rem 1rem;
    }

    .ncr-card-header {
        margin-bottom: .9rem;
    }

    .ncr-field {
        margin-top: .7rem;
    }

    .ncr-remember {
        margin: .7rem 0 .75rem;
    }

    .ncr-quick-access {
        margin: .75rem 0 .6rem;
    }
}

/* ============================================================
   ALTURA PEQUENA - DESKTOP LANDSCAPE
   ============================================================ */

@media (max-height: 850px) and (min-width: 821px) {

    .ncr-stage {
        min-height: calc(100dvh - 7.65rem);

        padding: 1.3rem 0;
    }

    .ncr-auth-card {
        min-height: 0;

        padding: 1.75rem 2.55rem 1.45rem;
    }

    .ncr-card-header {
        margin-bottom: 1.15rem;
    }

    .ncr-field {
        margin-top: .85rem;
    }

    .ncr-remember {
        margin: .85rem 0 .95rem;
    }

    .ncr-quick-access {
        margin: .9rem 0;
    }

    .ncr-helpdesk {
        gap: .2rem;
    }

    .ncr-left-message {
        margin-top: 1.35rem;
    }
}

/* ============================================================
   REDUCAO DE MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}