/* ==========================================================================
   Construmarket Theme - helpdesk.css
   Restyles the self-service portal home (templates/pages/helpdesk/index.html.twig)
   and the service catalog (templates/pages/self-service/service_catalog.html.twig).
   Selectors below are copied from GLPI 11.0.8 core markup - see docs/ARQUITECTURA.md.
   Pure CSS: the tile loop, the search input and its JS controller are the
   unmodified GLPI core behaviour.
   ========================================================================== */

/* ---- Hero / search banner ------------------------------------------------ */

/* No overflow:hidden here - the same mistake already caused two other real
   bugs in this theme (a dashboard KPI tile, the ticket search-results
   table) and now a third: #search-results is an absolutely-positioned
   child that grows downward past this section's own fixed min-height as
   soon as it has real content, and this section clipped it right at its
   own bottom edge (reproduced live, with a real user session: typing
   "Alta" correctly fetched a matching "Alta de Colaborador" result - only
   the very top sliver of the results panel, the "FORMS" heading, was
   visible, the actual list item was clipped away). background-size:cover
   already confines the decorative gradient/image to this element's own
   box on its own; overflow:hidden was never actually needed for that. */
.helpdesk-home-container .search-banner {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--cm-primary-vivid) 55%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--cm-accent) 22%, transparent) 0%, transparent 40%),
        linear-gradient(150deg, var(--cm-ink) 0%, var(--cm-primary-dark) 45%, var(--cm-primary) 100%),
        url("../pics/hero.svg") center center / cover no-repeat;
    padding: 3.5rem 1.5rem;
}

/* GLPI's default "scene" illustrations are cartoon-style undraw graphics -
   the brief explicitly rejects that visual language, so they are hidden
   in favor of the gradient-mesh treatment set as background above. */
.helpdesk-home-container .scene.scene-left,
.helpdesk-home-container .scene.scene-right {
    display: none !important;
}

.helpdesk-home-container .search-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    text-align: center;
}

.helpdesk-home-container .search-banner-content::before {
    content: "";
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.5rem;
    background: url("../pics/logo.png") center / contain no-repeat;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 10, 30, .35), 0 0 0 6px rgba(255, 255, 255, .08);
}

/* GLPI's own h1[data-testid="home-title"] renders Entity::getHelpdeskHomeTitle(),
   which - with no custom title configured on any entity here (verified:
   every glpi_entities row is empty or CONFIG_PARENT, none holds real
   text) - resolves to the core default __("How can we help you?"). That
   string's es_419 translation is empty upstream in GLPI itself (same gap
   as "Service catalog" elsewhere in this portal), so it silently falls
   back to English even in a Spanish session - and either way it says the
   same thing as this theme's own subtitle/tagline pair injected right
   below it by corporate.js::enhanceHelpdeskHero(), just in whichever
   language core happened to resolve. Reported live as a visible "double
   greeting" ("How can we help you?" / "Bienvenido a Grupo Construmarket" /
   "Cómo podemos ayudarte hoy?" all stacked). Rather than depend on a core
   translation file this plugin can't fix, the redundant core heading is
   visually hidden here and the theme's own (now language-aware, see
   corporate.js) subtitle/tagline stand alone as the hero message.
   display:none is avoided on purpose - this is a real <h1>, the page's
   only semantic heading, so it stays in the accessibility tree via the
   standard "visually-hidden" clip technique instead of display:none. */
.helpdesk-home-container h1[data-testid="home-title"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Promoted to look like the hero's main heading now that GLPI's own
   h1[data-testid="home-title"] is visually hidden above (it used to be a
   smaller secondary line under that h1's big bold treatment - this now
   carries that same weight/size since nothing else does). */
.cm-hero-subtitle {
    color: var(--cm-white);
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(0, 10, 30, .35);
    margin-bottom: .45rem;
    animation: cmFadeUp .6s ease both;
}

/* Tagline as a solid, high-contrast pill badge instead of colored text
   directly on a photographic/gradient background - guarantees legibility
   no matter how the hero background is customized from the config panel. */
.cm-hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, var(--cm-gold-soft), var(--cm-accent));
    color: var(--cm-ink);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 10, 30, .25);
    margin-bottom: 1.75rem;
    animation: cmFadeUp .6s .16s ease both;
}

@keyframes cmFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.helpdesk-home-container .search-bar-container,
.service-catalog .input-icon {
    animation: cmFadeUp .6s .22s ease both;
}

/* Glassmorphism search field - frosted, translucent, sits naturally on
   top of the gradient-mesh hero (Microsoft 365 / ServiceNow search look). */
.helpdesk-home-container #search-input.home-search,
.service-catalog input#search-input,
.service-catalog input.form-control[placeholder*="forms" i] {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    height: 56px;
    padding-left: 3.1rem;
    font-size: 1rem;
    color: var(--cm-ink);
    box-shadow: 0 16px 40px rgba(0, 10, 30, .35);
}

.helpdesk-home-container #search-input.home-search::placeholder,
.service-catalog input#search-input::placeholder {
    color: color-mix(in srgb, var(--cm-text) 65%, transparent);
}

.helpdesk-home-container #search-input.home-search:focus,
.service-catalog input#search-input:focus {
    background: var(--cm-white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-accent) 55%, transparent), 0 16px 40px rgba(0, 10, 30, .3);
}

.helpdesk-home-container .search-bar-container .input-icon-addon {
    left: 1.1rem;
    color: var(--cm-primary);
}

/* No overflow:hidden here on purpose - the exact same mistake already
   caused two real bugs elsewhere in this theme (a dashboard KPI tile and
   the ticket search-results table): GLPI populates this container
   asynchronously as suggestions arrive, and clipping a box whose height
   was measured before that content settles hides real, correctly-styled
   results instead of just rounding a corner. Reported live as "el buscar
   no busca" (typing works, but no suggestions ever appear) - this was the
   likely cause. Rounded corners on a dynamically-sized, JS-populated list
   aren't worth that risk. */
.helpdesk-home-container #search-results.search-result-container,
.service-catalog #search-results {
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 10, 30, .28);
    border: none;
    margin-top: .6rem;
}

/* ---- Quick access tiles --------------------------------------------------- */

.tiles-banner {
    background: var(--cm-gray-bg);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.tiles-banner table.central {
    display: none; /* legacy DISPLAY_CENTRAL hook table, empty in the new UI */
}

.tiles-banner .row > div > a.card {
    position: relative;
    /* Flat resting state (no shadow) requested to match a reference
       design - border strengthened slightly to keep the tile legible
       without it, same trade-off as .card in corporate.css. */
    border: 1px solid rgba(0, 58, 112, .12);
    border-radius: var(--cm-radius-lg);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    height: 100%;
    min-height: 132px;
    overflow: hidden;
}

.tiles-banner .row > div > a.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cm-primary), var(--cm-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}

.tiles-banner .row > div > a.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 58, 112, .16);
    border-color: transparent;
}

.tiles-banner .row > div > a.card:hover::before {
    transform: scaleX(1);
}

.tiles-banner .card .card-body .aspect-ratio-1 {
    background: linear-gradient(135deg, var(--cm-primary-light), color-mix(in srgb, var(--cm-primary-light) 60%, white));
    border-radius: var(--cm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-primary);
    transition: background .24s ease, color .24s ease;
}

.tiles-banner .card:hover .aspect-ratio-1 {
    background: linear-gradient(135deg, var(--cm-primary-vivid), var(--cm-primary));
    color: var(--cm-white);
}

.tiles-banner .card .card-title {
    color: var(--cm-ink);
    font-weight: 700;
    font-size: 1.02rem;
}

.tiles-banner .card .text-secondary {
    color: color-mix(in srgb, var(--cm-text) 78%, transparent) !important;
}

.tiles-banner .card::after {
    content: "\2192";
    position: absolute;
    right: 1rem;
    bottom: .85rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cm-primary-light);
    color: var(--cm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .22s ease, transform .22s ease, background .22s ease, color .22s ease;
}

.tiles-banner .card:hover::after {
    opacity: 1;
    transform: translateX(0);
    background: var(--cm-accent);
    color: var(--cm-ink);
}

/* ---- Service catalog page (templates/pages/self-service/service_catalog.html.twig) ---- */

.service-catalog .breadcrumb,
main:has(#glpi-service-catalog) .breadcrumb {
    --tblr-breadcrumb-item-active-color: var(--cm-primary);
}

/* ---- News / banner strip injected by js/corporate.js --------------------- */

.cm-news-banner {
    background: linear-gradient(90deg, var(--cm-gold-deep), var(--cm-accent));
    color: var(--cm-ink);
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    padding: .6rem 1rem;
}

/* ---- Ongoing/Solved tickets table: no hover-preview bubble ---------------- */

/* GLPI's classic Search-result "content preview" tooltip (Html::showToolTip(),
   src/Html.php - built on the qtip2 library, hence the `.qtip` class it
   stamps on the floating box it appends to <body> on hover) fires on the
   Ongoing/Solved tickets tables of this Helpdesk home page, popping up the
   ticket's raw requirement-detail fields over the list. Reported live as
   clutter that doesn't add value for a requester just scanning their own
   ticket list (the same detail is one click away on the ticket itself, now
   nicely translated too - see translated_requirement.php). Scoped to
   `body.cm-helpdesk-page` (stamped by corporate.js::markHelpdeskPage() only
   on this portal) rather than hidden globally, so Central keeps the same
   preview for agents, who do rely on it there. */
body.cm-helpdesk-page .qtip {
    display: none !important;
}

/* ---- Responsive tightening ------------------------------------------------ */

@media (max-width: 768px) {
    .helpdesk-home-container .search-banner {
        min-height: 340px;
        padding: 2.5rem 1rem;
    }

    .helpdesk-home-container h1[data-testid="home-title"] {
        font-size: 1.65rem;
    }

    /* This theme's own decorative logo mark above the hero title
       (.search-banner-content::before, ~50 lines up) - requested removed
       on mobile now that the mobile header itself also shows the icon,
       making this second copy right below it redundant. Desktop keeps it
       (this file's own note on that rule still applies there - no header
       icon competing with it at that width). */
    .helpdesk-home-container .search-banner-content::before {
        display: none;
    }
}