/*!
 * -------------------------------------------------------------------------
 * ReTech Portal plugin for GLPI
 * Copyright (C) 2026 ReTech / UASK.
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, either version 3 of the License, or (at your option)
 * any later version. See <https://www.gnu.org/licenses/gpl-3.0.html>.
 *
 * @license GPL-3.0-or-later
 * -------------------------------------------------------------------------
 */

:root {
    --accent: #147d92;   /* GLPI --tblr-primary */
    --bg: #123a46;       /* GLPI --glpi-mainmenu-bg */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    /* Match the GLPI/Tabler system font stack. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }
body {
    overflow: hidden;                 /* the landing fits the viewport, no scroll */
    font-family: var(--font);
    -webkit-text-size-adjust: 100%;
}
a { text-decoration: none; color: inherit; }

/* ---- theme --------------------------------------------------------------- */

body.portal-dark {
    color: #eaf3f1;
    background:
        radial-gradient(1100px 640px at 12% -12%, color-mix(in srgb, var(--accent) 34%, var(--bg)), transparent 60%),
        var(--bg);
}
body.portal-light {
    color: #14211f;
    background:
        radial-gradient(1000px 600px at 12% -10%, color-mix(in srgb, var(--accent) 14%, #ffffff), transparent 55%),
        #f4f7f9;
}

/* ---- full-height shell (no scroll) -------------------------------------- */

.portal {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto;
    padding:
        calc(16px + var(--safe-t))
        calc(clamp(16px, 5vw, 48px) + var(--safe-r))
        calc(14px + var(--safe-b))
        calc(clamp(16px, 5vw, 48px) + var(--safe-l));
}

/* ---- top bar ------------------------------------------------------------- */

.portal-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.portal-logo { height: clamp(26px, 4.4vh, 40px); width: auto; display: block; }
.portal-brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

.portal-top-right { display: flex; align-items: center; gap: 10px; }

.portal-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: color-mix(in srgb, var(--accent) 45%, #ffffff);
}
body.portal-light .portal-status { color: color-mix(in srgb, var(--accent) 75%, #000000); }

.portal-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #35d07f;
    animation: portal-pulse 2.4s infinite;
}
@keyframes portal-pulse {
    0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .5); }
    70% { box-shadow: 0 0 0 8px rgba(53, 208, 127, 0); }
    100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

.portal-signin {
    padding: 8px 18px;
    border-radius: 22px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    white-space: nowrap;
}
.portal-signin:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* ---- hero (fills remaining height) -------------------------------------- */

.portal-hero {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(12px, 3vh, 40px) 0;
    max-width: 900px;
}

.portal-eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: clamp(.72rem, 1.6vw, .82rem);
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 55%, #ffffff);
    margin-bottom: clamp(10px, 2vh, 18px);
}
body.portal-light .portal-eyebrow { color: color-mix(in srgb, var(--accent) 75%, #000000); }

.portal-heading {
    margin: 0;
    font-size: clamp(2rem, 6.4vw, 4.6rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.portal-subtext {
    margin: clamp(12px, 2.4vh, 22px) 0 0;
    max-width: 640px;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    opacity: .82;
}

.portal-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: clamp(18px, 3.4vh, 36px);
    padding: 14px 28px;
    border-radius: 15px;
    font-size: 1.03rem;
    font-weight: 700;
    cursor: pointer;
    color: #06120f;
    background: color-mix(in srgb, var(--accent) 78%, #7ee6c0);
    box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: transform .12s ease;
}
.portal-cta:hover { transform: translateY(-2px); }
.portal-cta-arrow { font-size: 1.2rem; }

/* ---- cards (horizontal strip -> never adds vertical scroll) ------------- */

/* ---- agent split button (desktop) --------------------------------------- */

.portal-agent {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    margin: clamp(14px, 3vh, 26px) 0 clamp(8px, 1.5vh, 14px);
}
.portal-agent-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    border: none;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
}
.portal-agent-main i { font-size: 1.2rem; }
.portal-agent-main:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.portal-agent-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    background: color-mix(in srgb, var(--accent) 78%, #000);
    color: #fff;
    border: none;
    border-left: 1px solid color-mix(in srgb, #000 22%, transparent);
    border-radius: 0 12px 12px 0;
    cursor: pointer;
}
.portal-agent-toggle:hover { background: color-mix(in srgb, var(--accent) 68%, #000); }
.portal-agent-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 300px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 92%, #000 8%);
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .35);
    z-index: 30;
}
body.portal-light .portal-agent-menu { background: #fff; }
.portal-agent-menu[hidden] { display: none; }
.portal-agent-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    color: inherit;
}
.portal-agent-item i { font-size: 1.25rem; color: color-mix(in srgb, var(--accent) 60%, currentColor); }
.portal-agent-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.portal-agent-item small { margin-left: auto; opacity: .55; font-size: .78rem; white-space: nowrap; }
.portal-agent-item.is-todo { opacity: .5; }

/* ---- mobile tiles (Windows-Phone / Metro) — hidden on desktop ----------- */

.portal-tiles { display: none; }

/* ---- footer -------------------------------------------------------------- */

.portal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: clamp(10px, 2vh, 18px);
    font-size: .82rem;
    opacity: .55;
}

/* ---- responsive visibility ---------------------------------------------- */

.portal-only-mobile { display: none !important; }
@media (max-width: 700px) {
    .portal-only-mobile { display: flex !important; }
    .portal-only-desktop { display: none !important; }

    /* Let the page scroll on small screens instead of clipping content. */
    body { overflow: auto; }
    .portal { height: auto; min-height: 100dvh; overflow: visible; }

    /* Keep the top bar within the viewport: drop the decorative status pill,
       leaving brand + Sign-in only. */
    .portal-status { display: none; }
    .portal-top { gap: 8px; }

    /* The desktop split button and secondary CTA give way to the tile grid. */
    .portal-agent { display: none; }
    .portal-hero .portal-cta { display: none; }
    .portal-hero { flex: 0 0 auto; }

    /* Windows-Phone-style flat tiles. */
    .portal-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: clamp(14px, 3vh, 24px);
        padding-bottom: 8px;
    }
    .portal-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 108px;
        padding: 14px;
        color: #fff;
        text-decoration: none;
        background: var(--accent);
        border-radius: 4px;
        transition: transform .08s ease, filter .12s ease;
    }
    .portal-tile i { font-size: 1.75rem; line-height: 1; }
    .portal-tile-label { margin-top: auto; font-weight: 700; font-size: 1.02rem; }
    .portal-tile small { font-size: .76rem; opacity: .82; margin-top: 2px; }
    .portal-tile:active { transform: scale(.97); }
    .portal-tile.is-todo { opacity: .55; }

    .portal-tile--wide { grid-column: 1 / -1; min-height: 128px; }
    .portal-tile--agent { background: var(--accent); }
    .portal-tile--alt   { background: color-mix(in srgb, var(--accent) 55%, #14a06e); }
    .portal-tile--signin {
        grid-column: 1 / -1;
        background: color-mix(in srgb, currentColor 12%, transparent);
        color: inherit;
        border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
        min-height: 64px;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .portal-tile--signin i { font-size: 1.3rem; }
    .portal-tile--signin .portal-tile-label { margin-top: 0; }
}

/* ---- short viewports (phones in landscape, small windows) ---------------- *
 * The "one screen, no scroll" shell assumes a tall viewport. When the height
 * is small (a landscape phone is wide but short, so the width breakpoint above
 * doesn't catch it), stop clipping: let the page scroll and rein in the giant
 * hero so nothing collides with the footer. */
@media (max-height: 640px) {
    body { overflow: auto; }
    .portal {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding-top: calc(12px + var(--safe-t));
        padding-bottom: calc(12px + var(--safe-b));
    }
    .portal-hero {
        flex: 0 0 auto;
        justify-content: flex-start;
        overflow: visible;
        padding: 12px 0;
    }
    .portal-eyebrow { margin-bottom: 8px; }
    .portal-heading { font-size: clamp(1.5rem, 5vw, 2.6rem); }
    .portal-subtext { margin-top: 8px; font-size: clamp(.95rem, 2vw, 1.1rem); }
    .portal-cta { margin-top: 14px; }
    .portal-agent { margin: 12px 0 8px; }
    .portal-status { display: none; }

    /* The login modal can be taller than a short landscape screen: scroll it
       from the top instead of clipping the centered card. */
    .portal-modal { align-items: flex-start; overflow-y: auto; }
    .portal-modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
}

/* ---- sign-in modal ------------------------------------------------------- */

.portal-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.portal-modal[hidden] { display: none; }
.portal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 11, .6);
    backdrop-filter: blur(4px);
}
.portal-modal-card {
    position: relative;
    z-index: 1;
    width: min(400px, 100%);
    background: #ffffff;
    color: #14211f;
    border-radius: 18px;
    padding: 30px 26px 26px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
    animation: portal-pop .16s ease;
}
@keyframes portal-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.portal-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 34px; height: 34px;
    border: none; background: none;
    font-size: 1.6rem; line-height: 1;
    color: #64748b; cursor: pointer; border-radius: 8px;
}
.portal-modal-close:hover { background: #f1f5f9; }
.portal-modal-brand { text-align: center; margin-bottom: 18px; }
.portal-modal-brand .portal-logo { height: 34px; margin: 0 auto; }
.portal-modal-brand .portal-brand { color: #14211f; font-size: 1.6rem; }

.portal-field { display: block; margin-bottom: 14px; }
.portal-field span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: #334155; }
.portal-field input {
    width: 100%;
    padding: 11px 13px;
    font-size: 1rem;
    border: 1px solid #cbd5df;
    border-radius: 10px;
    background: #fff;
    color: #14211f;
}
.portal-field input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }

.portal-remember {
    display: flex; align-items: center; gap: 8px;
    font-size: .9rem; color: #334155; margin: 4px 0 18px;
    cursor: pointer;
}
.portal-modal-submit {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    cursor: pointer;
}
.portal-modal-submit:hover { background: color-mix(in srgb, var(--accent) 85%, #000000); }

body.portal-modal-open { overflow: hidden; }