/*
 * IR Helpdesk login page redesign - white/minimal "support portal" layout:
 * Knowledge Hub (left, wider) + Login (right, narrower) as two even panels,
 * instead of the default lopsided col-md-5 + col-auto row.
 *
 * Every selector here is scoped under .page-anonymous (the login page's own
 * body wrapper) so nothing bleeds into the Self-Service or Central UI.
 * The Knowledge Hub content itself (search/articles/categories) is real
 * output from the "helloworld" plugin reading GLPI's own Knowbase - this
 * file only restyles/repositions it, it doesn't fabricate content.
 */

.page-anonymous .container-tight {
    max-width: 68rem !important;
}

/* Full-page retail-tech illustration (POS terminal, storefront, dashboard,
   network/commerce icons) instead of a flat grid texture - already a very
   pale blue-on-white illustration by design, so the white card on top
   stays fully readable without needing a dimming overlay. */
body.welcome-anonymous {
    background-color: #EDF2F9;
    background-image: url("/plugins/irtheme/img/login-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Tagline block (GLPI's own "login page text" field, text_login) - sits
   between the logo and the Login/Knowledge Hub row. Native GLPI content,
   not a fabricated banner: this is the same field admins edit under
   Setup > General > Login page. */
.page-anonymous .rich_text_container {
    text-align: left !important;
    max-width: 42rem;
    padding: 0 2.25rem;
    margin: 0 0 1.75rem !important;
}
.page-anonymous .rich_text_container h1 {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0B4A8B;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
}
.page-anonymous .rich_text_container p {
    font-size: 0.96rem;
    color: #5B6B82;
    line-height: 1.55;
    margin: 0;
}

/* Logo row -> centered strip with a bottom rule. */
.page-anonymous .container-tight > .text-center {
    text-align: center !important;
    border-bottom: 1px solid #E1E7EF;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.page-anonymous .glpi-logo {
    /* GLPI renders the login-page logo via `content: url(...)`, not a CSS
       background - so without object-fit, a fixed width+height stretches
       the image to fill the box exactly, distorting its real aspect
       ratio. object-fit: contain keeps the artwork's true proportions.
       The artwork (logo-navy-v2) is a flat wordmark (~3.4:1) - box is
       matched to that ratio so "contain" fills it with zero dead space,
       at a moderate size proportional to the card instead of maxed out. */
    width: 520px !important;
    height: 154px !important;
    object-fit: contain;
    object-position: center center;
}

/* Card: flatten (thin border, no shadow, modest radius). */
.page-anonymous .main-content-card {
    border: 1px solid #E1E7EF !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.page-anonymous .main-content-card > .card-header:empty {
    display: none !important;
}

/* Two-panel row: Knowledge Hub (left, wider) + Login (right, narrower). */
.page-anonymous .row.justify-content-center {
    margin: 0 !important;
}
.page-anonymous .row.justify-content-center > .col-md-5 {
    order: 2;
    flex: 0 0 38% !important;
    max-width: 38% !important;
    /* Tinted fill + a colored (not just grey) divider so the Login panel
       reads as its own distinct module next to the white Knowledge Hub.
       A soft inset-facing shadow (only on the divider edge, not floating
       all around) adds a little premium depth without turning this into
       a "card melayang" - the effect earlier feedback explicitly rejected. */
    background: #F7FAFD;
    border-left: 2px solid #0B4A8B;
    box-shadow: -10px 0 22px -16px rgba(11, 74, 139, 0.28) !important;
    padding: 2.25rem 2.25rem 2.25rem 2.5rem !important;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}
.page-anonymous .row.justify-content-center > .col-auto.px-2.text-center {
    order: 1;
    flex: 1 1 auto !important;
    max-width: 62% !important;
    width: 62% !important;
    text-align: left !important;
    padding: 2rem 2.25rem !important;
}

/* Login column */
.page-anonymous .col-md-5 .card-header.mb-4 {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 1.4rem !important;
}
.page-anonymous .col-md-5 .card-header.mb-4 h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    margin: 0 !important;
}
.page-anonymous .col-md-5 .form-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5B6B82 !important;
    margin-bottom: 0.4rem !important;
}
.page-anonymous .form-control {
    border: 1.5px solid #E1E7EF !important;
    border-radius: 8px !important;
    padding: 0.7rem 0.9rem !important;
    background: #fff !important;
    box-shadow: none !important;
}
.page-anonymous .form-control:focus {
    border-color: #1F6CB5 !important;
    box-shadow: 0 0 0 3px rgba(31, 108, 181, 0.15) !important;
}
.page-anonymous .btn-primary {
    background: #0B4A8B !important;
    border-color: #0B4A8B !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 0.65rem 1rem !important;
    /* A little lift on just the CTA button (not the whole card) so it
       reads as the one clearly clickable action in the panel. */
    box-shadow: 0 6px 16px -4px rgba(11, 74, 139, 0.35) !important;
}
.page-anonymous .btn-primary:hover {
    background: #082F5C !important;
    border-color: #082F5C !important;
    box-shadow: 0 8px 20px -4px rgba(11, 74, 139, 0.45) !important;
}

/* Knowledge Hub column - let it fill the wider space instead of the
   plugin's own fixed 260px width, and re-tint its accents to match the
   IR Helpdesk palette instead of the plugin's default teal. */
.page-anonymous .hub-login-panel {
    width: 100% !important;
    max-width: none !important;
}
.page-anonymous .hub-login-panel h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.1rem !important;
}
.page-anonymous .hub-login-panel h5 i {
    color: #1F6CB5;
}
.page-anonymous .hub-login-search {
    max-width: 100% !important;
    border: 1.5px solid #E1E7EF !important;
    border-radius: 8px !important;
    padding: 0.55rem 0.9rem !important;
}
.page-anonymous .hub-login-search input[type="text"] {
    font-size: 0.92rem !important;
}
.page-anonymous .hub-search-form button {
    background: #0B4A8B !important;
}
.page-anonymous .hub-search-form button:hover {
    background: #082F5C !important;
}
.page-anonymous .hub-login-list {
    margin: 0 !important;
}
.page-anonymous .hub-login-list a {
    font-size: 0.92rem !important;
    padding: 0.55rem 0.1rem !important;
    color: #16233A !important;
    border-bottom: 1px solid #EEF2F7;
}
.page-anonymous .hub-login-list li:last-child a {
    border-bottom: none;
}
.page-anonymous .hub-login-list a:hover {
    color: #1F6CB5 !important;
}
.page-anonymous .hub-login-viewall {
    color: #1F6CB5 !important;
    font-size: 0.85rem !important;
}
.page-anonymous .hub-login-empty {
    font-size: 0.88rem !important;
}

/* Popular Articles / Categories - each a labelled section instead of one
   undifferentiated block, so the panel reads as a structured part of the
   portal rather than "just a search box with a list under it". */
.page-anonymous .hub-login-section {
    margin: 1.5rem 0;
}
.page-anonymous .hub-login-section-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8592A6;
    margin-bottom: 0.6rem;
}
.page-anonymous .hub-login-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.page-anonymous .hub-login-cat-chip {
    display: inline-block;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: #0B4A8B !important;
    background: #EAF1FA;
    border: 1px solid #D7E5F3;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    text-decoration: none !important;
}
.page-anonymous .hub-login-cat-chip:hover {
    background: #0B4A8B;
    border-color: #0B4A8B;
    color: #fff !important;
}

/* FAQ link, below both panels - plain text link instead of an outline
   button, matching the rest of the minimal styling. */
.page-anonymous .text-center.mt-4.border-top {
    border-top: 1px solid #E1E7EF !important;
    text-align: left !important;
    padding: 1.25rem 2.25rem 0 !important;
}
.page-anonymous .text-center.mt-4.border-top .btn-outline-secondary {
    border: none !important;
    background: transparent !important;
    color: #1F6CB5 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0 !important;
}
.page-anonymous .text-center.mt-4.border-top .btn-outline-secondary:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .page-anonymous .row.justify-content-center > .col-md-5,
    .page-anonymous .row.justify-content-center > .col-auto.px-2.text-center {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        border-left: none !important;
    }
    .page-anonymous .row.justify-content-center > .col-md-5 {
        border-top: 2px solid #0B4A8B;
        border-radius: 0 0 9px 9px;
    }
}