/* ==========================================================================
   SITE CSS
   UI Bible V1

   Scopo:
   Contiene solo regole globali non gestite direttamente da Tailwind.

   Linea guida:
   - Tailwind resta la sorgente principale per layout e componenti.
   - Questo file gestisce token globali, shell behavior, utility minime
     e componenti JavaScript-driven.
   ========================================================================== */


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    /* Typography */
    --app-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Shell */
    --tenant-mobile-header-height: 56px;
    --tenant-sidebar-mobile-width: 256px;
    /* Colors */
    --app-white: #ffffff;
    --app-slate-50: #f8fafc;
    --app-slate-100: #f1f5f9;
    --app-slate-200: #e2e8f0;
    --app-slate-300: #cbd5e1;
    --app-slate-400: #94a3b8;
    --app-slate-700: #334155;
    --app-slate-900: #0f172a;
    /* Motion */
    --app-transition-fast: 180ms ease;
    --app-transition-normal: 280ms ease;
}


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

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
    /*scrollbar-gutter: stable;*/
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    font-family: var(--app-font-sans);
}

[x-cloak] {
    display: none !important;
}


/* ==========================================================================
   TENANT SHELL
   ========================================================================== */

/*
   Desktop:
   Da 1280px in su la sidebar è visibile, sticky e occupa spazio reale.
*/

.tenant-sidebar-shell {
    display: flex;
    flex: 0 0 auto;
    align-self: flex-start;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 50;
}

.tenant-mobile-header {
    display: none;
}

.tenant-mobile-backdrop {
    display: none;
}

/*
   Mobile / tablet:
   Sotto 1280px la sidebar diventa off-canvas.
*/

@media (max-width: 1279px) {
    .tenant-mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        height: var(--tenant-mobile-header-height);
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--app-slate-200);
        background: var(--app-white);
        padding: 0 16px;
    }

    .tenant-content-shell {
        padding-top: var(--tenant-mobile-header-height);
    }

    .tenant-sidebar-shell {
        position: fixed;
        top: var(--tenant-mobile-header-height);
        left: 0;
        z-index: 1000;
        display: flex;
        width: var(--tenant-sidebar-mobile-width);
        height: calc(100dvh - var(--tenant-mobile-header-height));
        align-self: auto;
        transform: translateX(-100%);
        transition: transform var(--app-transition-normal);
    }

        .tenant-sidebar-shell > aside {
            height: 100%;
            box-shadow: 0 10px 25px rgb(15 23 42 / 0.12);
        }

        .tenant-sidebar-shell.is-open {
            transform: translateX(0);
        }

    .tenant-mobile-backdrop {
        position: fixed;
        top: var(--tenant-mobile-header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: block;
        background: rgb(15 23 42 / 0.18);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--app-transition-fast);
    }

        .tenant-mobile-backdrop.is-open {
            opacity: 1;
            pointer-events: auto;
        }

    body.mobile-menu-open {
        overflow: hidden;
    }
}


/* ==========================================================================
   MICRO UTILITIES
   ========================================================================== */

/*
   Uso:
   Badge micro, micro-meta e testi secondari molto compatti.
*/

.text-xxs {
    font-size: 0.625rem;
    line-height: 0.875rem;
}

/*
   Icon mask:
   Permette di usare icone Heroicons esterne come maschere colorabili
   tramite currentColor.

   Uso:
   <span class="app-icon-mask h-5 w-5 text-emerald-600"
         style="--app-icon-url: url('/icons/heroicons/.../check-circle.svg')"
         aria-hidden="true"></span>

   Nota:
   Manteniamo Heroicons come file esterni, senza SVG inline.
*/

.app-icon-mask {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--app-icon-url);
    mask-image: var(--app-icon-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.app-meta-help {
    cursor: help;
    user-select: none;
}

    .app-meta-help:hover {
        cursor: help;
    }


/* ==========================================================================
   FORM NORMALIZATION
   ========================================================================== */

/*
   Autofill:
   Rimuove il colore azzurrino/giallo nativo del browser nei form giocatore.
*/

.player-form input:-webkit-autofill,
.player-form input:-webkit-autofill:hover,
.player-form input:-webkit-autofill:focus,
.player-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--app-white) inset !important;
    box-shadow: 0 0 0 1000px var(--app-white) inset !important;
    -webkit-text-fill-color: var(--app-slate-900) !important;
    caret-color: var(--app-slate-900);
}


/*
   Search input:
   Nasconde i controlli nativi del browser per type="search"
   perché usiamo una X custom coerente con il design system.
*/

input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }


/* ==========================================================================
   TOAST HOST
   ========================================================================== */

.app-toast-host {
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 99999;
    display: flex;
    width: min(26rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    transform: translateX(-50%);
}

@media (max-width: 640px) {
    .app-toast-host {
        top: 0.75rem;
        width: calc(100vw - 2rem);
    }
}


/* ==========================================================================
   APP SCROLLBAR
   ========================================================================== */

/*
   Scrollbar minimale per aree operative scrollabili.

   Uso previsto:
   - main workspace;
   - liste lunghe;
   - pannelli interni con overflow-y-auto.

   Non è globale di proposito:
   evitiamo di modificare textarea, dropdown piccoli e controlli nativi.
*/

.app-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(226 232 240 / 0.75) transparent;
}

    .app-scrollbar::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .app-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgb(226 232 240 / 0.78);
        border: 3px solid transparent;
        border-radius: 9999px;
        background-clip: content-box;
    }

        .app-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: rgb(203 213 225 / 0.90);
        }

    .app-scrollbar::-webkit-scrollbar-corner {
        background: transparent;
    }


/* ==========================================================================
   PAGE TRANSITIONS
   ========================================================================== */

/*
   Transizione soft per navigazioni full-page interne.

   Nota:
   La classe app-page-transition-preload viene aggiunta prima del rendering
   completo tramite page-transition-preload.js.
*/

html.app-page-transition-preload body {
    opacity: 0;
}

html.app-page-transition-ready body {
    opacity: 1;
    transition: opacity 450ms ease-out;
}

html.app-page-leaving body {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    html.app-page-transition-ready body,
    html.app-page-leaving body {
        transition: none;
        opacity: 1;
    }
}

@layer base {
    html {
        font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
}

@layer components {
    /*
     * ==========================================================================
     * COMPONENT: Operational Hint
     *
     * Gestisce solo le transizioni visive.
     * La logica di stato vive in operational-hint.js.
     * ==========================================================================
     */

    [data-operational-hint] {
        isolation: isolate;
    }

    .app-operational-hint__compact {
        opacity: 1;
        transition: opacity 200ms ease-out;
    }

    .app-operational-hint__panel {
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease-in-out;
    }

    [data-operational-hint-state="closed"] .app-operational-hint__compact {
        opacity: 1;
        pointer-events: auto;
    }

    [data-operational-hint-state="opening"] .app-operational-hint__compact,
    [data-operational-hint-state="open"] .app-operational-hint__compact,
    [data-operational-hint-state="closing"] .app-operational-hint__compact {
        opacity: 0;
        pointer-events: none;
    }

    [data-operational-hint-state="open"] .app-operational-hint__panel {
        opacity: 1;
        pointer-events: auto;
    }

    [data-operational-hint-state="opening"] .app-operational-hint__panel,
    [data-operational-hint-state="closing"] .app-operational-hint__panel,
    [data-operational-hint-state="closed"] .app-operational-hint__panel {
        opacity: 0;
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .app-operational-hint__compact,
        .app-operational-hint__panel {
            transition-duration: 1ms;
        }
    }
}

/* ACCOUNT FLOW */
.account-layout,
.account-layout__main,
.account-split-page,
.account-single-page {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

.account-layout {
    overflow-x: clip;
}

.account-split-page,
.account-single-page {
    position: relative;
    overflow-x: clip;
    isolation: isolate;
}

.account-split-page {
    background: #f8fafc;
}

.account-single-page {
    background: #f8fafc;
}

.account-split-page__viewport,
.account-single-page__viewport {
    position: relative;
    z-index: 1;
    width: 100%;
}

.account-split-card,
.account-single-card {
    min-height: 34.5rem;
    height: auto;
}

.account-split-card {
    box-shadow: none;
}

@media (max-width: 639px) {
    .account-split-page__viewport,
    .account-single-page__viewport,
    .account-split-card,
    .account-single-card {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .account-split-panel--primary {
        padding-top: max(1.5rem, env(safe-area-inset-top));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .account-single-card {
        max-width: none;
        padding-top: max(1.5rem, env(safe-area-inset-top));
        padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
        border-radius: 0;
        box-shadow: none;
    }
}

@media (min-width: 640px) {
    .account-split-page,
    .account-single-page {
        padding: 1.25rem;
    }

    .account-split-page__viewport,
    .account-single-page__viewport {
        min-height: calc(100vh - 2.5rem);
        min-height: calc(100svh - 2.5rem);
        min-height: calc(100dvh - 2.5rem);
        align-items: center;
    }

    .account-single-page {
        background: radial-gradient( circle at 50% 0, rgb(13 148 136 / 0.18) 0, transparent 30rem ), radial-gradient( circle at 100% 100%, rgb(6 78 59 / 0.24) 0, transparent 32rem ), #020617;
    }

    .account-single-card {
        max-width: 28rem;
        border-radius: 0.375rem;
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
    }
}

@media (min-width: 1024px) {
    .account-split-page {
        padding: 0;
    }

        .account-split-page::before,
        .account-split-page::after {
            position: absolute;
            inset-block: 0;
            z-index: 0;
            width: 50%;
            content: "";
            pointer-events: none;
        }

        .account-split-page::before {
            left: 0;
            background: #f8fafc;
        }

        .account-split-page::after {
            right: 0;
            background: radial-gradient( circle at 22% 16%, rgb(94 234 212 / 0.12) 0, transparent 34% ), radial-gradient( circle at 78% 82%, rgb(255 255 255 / 0.06) 0, transparent 40% ), linear-gradient( 135deg, #042f2e 0%, #134e4a 55%, #115e59 100% );
        }

    .account-split-page__viewport {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        align-items: center;
    }

    .account-split-card {
        background: transparent;
    }

    .account-split-panel--primary,
    .account-split-panel--promo {
        background: transparent;
    }

    .account-split-promo-content {
        padding-top: 8rem;
    }
}

@media (min-width: 1024px) and (min-height: 821px) {
    .account-split-card {
        min-height: 50rem;
    }
}

@media (min-width: 1024px) and (max-height: 820px) {
    .account-split-page__viewport {
        align-items: stretch;
    }

    .account-split-card {
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .account-split-panel--primary,
    .account-split-panel--promo {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .account-split-promo-content {
        padding-top: 7rem;
    }
}

@media (min-width: 1536px) {
    .account-split-page__viewport,
    .account-split-card {
        max-width: 76rem;
    }

    .account-split-panel--primary {
        padding-right: 4.5rem;
    }

    .account-split-panel--promo {
        padding-left: 4.5rem;
    }
}

@media (max-width: 1023px) {
    .account-auth-card.account-auth-card--mobile-fill {
        min-height: calc(100svh - 2.5rem);
    }
}

@media (max-width: 639px) {
    .account-auth-card.account-auth-card--mobile-fill {
        min-height: 100svh;
    }
}

/* BG-COLORE - MEEPLE */
.match-participant-row {
    --participant-piece-color: #94a3b8;
    border-left-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
}

    .match-participant-row:hover {
        background-color: color-mix( in srgb, var(--participant-piece-color) 7%, white );
        border-left-color: color-mix( in srgb, var(--participant-piece-color) 72%, white );
    }


/* IDENTITÀ PARTECIPANTE
   Sagoma piatta con profilo leggero.
   Il profilo mantiene visibile anche il colore bianco. */
.participant-identity-piece svg {
    fill: currentColor;
    stroke: rgb(15 23 42 / 0.24);
    stroke-width: 10;
    stroke-linejoin: round;
    stroke-linecap: round;
    paint-order: stroke fill;
    filter: none;
}