@charset "utf-8";
.cursor-pointer {
    cursor: pointer;
}

/* Utility .w-auto di Bootstrap: il build del tema (app.min.css) non include le
   width utilities, quindi tutti i `<select class="form-select ... w-auto">`
   ereditavano il width:100% di .form-select e si prendevano l'intera riga
   (label e bottoni accanto finivano a capo). Ripristinata qui col medesimo
   comportamento di Bootstrap 5. */
.w-auto {
    width: auto !important;
}

/* Offcanvas con larghezza media (dettagli entità) — usato in cliente, movimenti. */
.gc-offcanvas-md {
    width: 600px;
    max-width: 100%;
}

/* Timeline esposizione cliente (partite aperte, DDT, RI.BA).
   Riempie l'altezza disponibile della card (h-100 vs sibling) e scrolla
   internamente: il card-body deve essere flex column per propagare l'altezza. */
.card-body:has(> .gc-timeline-scroll) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.gc-timeline-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* Cifre tabellari: previene shift orizzontale su colonne valuta/numeriche.
   Applicato sia via utility (.tabular-nums) sia su tutte le celle .text-end
   di tabelle marcate .gc-tabular. */
.tabular-nums,
table.gc-tabular td.text-end,
table.gc-tabular th.text-end,
table.gc-tabular td[data-num],
table.gc-tabular .fw-bold,
table.gc-tabular .fw-semibold.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Rispetta reduced-motion: disattiva quasi tutte le animazioni UI. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   TomSelect — override per integrazione con tema Hyper/Tabler
   (il tema applica sfondi trasparenti a .form-select via CSS vars).
   ========================================================= */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper .ts-dropdown {
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #1e2a4a);
    border-color: var(--bs-border-color, #dee2e6);
    box-shadow: none;
}

.ts-wrapper .ts-control {
    min-height: calc(1.5em + 0.94rem + 2px); /* ~ form-control standard */
    padding: 0.47rem 0.9rem;
    font-size: 0.9375rem; /* 15px, allineato al body */
    border-radius: 0.375rem;
}

.ts-wrapper.form-select .ts-control {
    padding-right: 2.25rem;
    background-image: none; /* rimuove chevron duplicato */
}

.ts-wrapper .ts-control input {
    color: inherit;
}

.ts-wrapper .ts-dropdown {
    background-color: #ffffff !important;
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 0.5rem 1rem rgba(24, 30, 45, .08);
    z-index: 2000; /* sopra offcanvas (1045) e modal (1055) */
}

.ts-wrapper .ts-dropdown .option {
    padding: 0.5rem 0.9rem;
    color: var(--bs-body-color, #1e2a4a);
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .active {
    background-color: var(--bs-primary-bg-subtle, #e8ecfb);
    color: var(--bs-primary, #3e60d5);
}

/* Dentro modal: TomSelect dropdown deve overfloware il body */
.modal .ts-wrapper .ts-dropdown { z-index: 1070; }

/* Single-mode: mentre l'utente digita, nascondi l'item selezionato
   per evitare che il testo della vecchia opzione resti visibile dietro l'input.
   NB: .input-active da solo significa "controllo a fuoco", non "sto digitando":
   dopo una selezione il controllo resta a fuoco e l'item sparirebbe (box vuoto).
   Serve anche .dropdown-active, che TomSelect toglie alla chiusura del menu. */
.ts-wrapper.single.input-active.dropdown-active .ts-control > .item { display: none !important; }
.ts-wrapper.single.input-active .ts-control > input { opacity: 1 !important; }

/* Filtro agente delle card della sezione Alert: larghezza fissa e generosa.
   Serve una classe dedicata invece di uno style inline perché TomSelect copia
   sul proprio wrapper le CLASSI del <select> originale ma non l'attributo
   style: un `style="max-width:..."` sul select non arriva al controllo reso e
   non ha alcun effetto. Per lo stesso motivo il select NON deve portare
   `w-auto`, che è `width: auto !important` e vincerebbe su questa regola.
   Larghezza fissa e non `auto`: col contenuto le ragioni sociali lunghe
   toccavano il bordo e il controllo cambiava larghezza a ogni scelta, facendo
   ballare l'intestazione della card.
   La regola vale sia per il wrapper di TomSelect sia per il select nativo, che
   resta in uso quando il plugin non c'è. */
.ts-wrapper.gc-filtro-agente,
select.gc-filtro-agente {
    width: 270px;
    max-width: 100%;
    flex: 0 0 auto; /* dentro l'header flex: non si comprime sotto i 270px */
}

/* Il dropdown erediterebbe la larghezza del controllo: qui la si lascia
   crescere quando serve, così un nome lungo col badge del conteggio non va a
   capo dentro l'opzione. */
.ts-wrapper.gc-filtro-agente .ts-dropdown {
    width: auto;
    min-width: 100%;
}

/* =========================================================
   Fix font-size: tema Tabler ha molte utility fs-xs / fs-xxs
   che vengono fuori a ~10–11px — illeggibili per uso quotidiano.
   Rialzo in modo assoluto (rem, non em) per evitare la cascata
   di .small dentro .small.
   ========================================================= */
.fs-xxs { font-size: 0.8125rem !important; } /* 13px (era ~10px) */
.fs-xs  { font-size: 0.8125rem !important; } /* 13px */
.fs-sm  { font-size: 0.875rem  !important; } /* 14px */
.fs-md  { font-size: 1rem      !important; } /* 16px */

/* .small in Bootstrap è em, quindi si comprime se nidificato.
   La forzo in rem per avere un pavimento leggibile (13px). */
.small, small { font-size: 0.8125rem !important; }

/* Evita la doppia compressione quando .small è nidificata */
.small .small, small small { font-size: 1em !important; }

/* Tabelle GC: base più leggibile */
table.gc-tabular { font-size: 0.9375rem; } /* 15px */
table.gc-tabular thead th { font-size: 0.8125rem; }

/* KPI: etichetta uppercase fs-xxs era troppo piccola */
.card .text-uppercase.fs-xxs,
.card .text-uppercase.fs-xs { letter-spacing: 0.04em; }

/* Badge: portiamoli a 12.5px minimo */
.badge { font-size: 0.78125rem; font-weight: 500; }

/* Card body base: alziamo a 15px per dashboard/cliente */
.card .card-body,
.card .card-footer { font-size: 0.9375rem; }

/* Scheda cliente: forzo leggibilità pannello sinistro */
.gc-cliente-side .small,
.gc-cliente-side small { font-size: 0.875rem !important; } /* 14px */

/* DataTables info / length / filter: 13px */
div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dataTables_filter,
div.dataTables_wrapper .dataTables_paginate { font-size: 0.8125rem; }

/* DataTable body leggibile */
div.dataTables_wrapper table.dataTable,
table.dataTable tbody td,
table.dataTable thead th { font-size: 0.9375rem; }
table.dataTable thead th { font-size: 0.8125rem; }

/* =========================================================
   Skeleton loader per le tabelle DataTables delle card dashboard.
   Mostra barre shimmer al posto dei dati durante il fetch e riserva
   l'altezza (min-height inline) per evitare il salto layout (bounce).
   Attivato da window.GcTableLoader(dt, host) sull'evento processing.dt.
   ========================================================= */
.gc-table-host { position: relative; }
.gc-table-host .dataTables_processing { display: none !important; } /* nascondo il loader default "…" */

.gc-skeleton {
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 2.5rem; /* top reimpostato a runtime sotto la thead */
    z-index: 6;
    display: none;
    flex-direction: column;
    gap: 1.5rem;           /* + height riga = PITCH 3.4rem≈54px (= riga tabella, coerente col JS) */
    padding: .75rem .25rem 0;
    overflow: hidden;
    background: var(--bs-card-bg, #fff);
}
.gc-table-host.is-loading .gc-skeleton { display: flex; }

.gc-skeleton-row {
    flex: 0 0 auto;
    height: 1.9rem;        /* aspetto "riga di tabella" */
    border-radius: .25rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: gc-shimmer 1.3s ease-in-out infinite;
}
@keyframes gc-shimmer {
    0%   { background-position: -150% 0; }
    100% { background-position: 150% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gc-skeleton-row { animation: none; }
}

/* Righe ad altezza uniforme (≈ 2 linee di testo) sulle tabelle dashboard
   Solleciti e Anomalie: i nomi cliente su 1 o 2 righe rendevano le righe di
   altezza diversa, facendo variare l'altezza totale della tabella tra un fetch
   e l'altro (salto layout). Fissando l'altezza riga il totale è deterministico.
   Il combinatore `>` evita di toccare le righe di dettaglio annidate. */
#dash-tbl-solleciti > tbody > tr > td,
#dash-tbl-anomalie  > tbody > tr > td {
    height: 3.4rem;
    vertical-align: middle;
}

/* Riserva d'altezza (≈ pagina piena) sui contenitori tabella di Solleciti/Anomalie,
   già dal primo paint (in HTML, non da JS): evita lo scatto iniziale quando lo
   skeleton/min-height verrebbe applicato dopo il render. */
.gc-card-tbl { min-height: 32rem; }

/* =========================================================
   Righe e card cliccabili (apertura dettaglio).
   Un elemento con [data-href] si comporta come link:
   cursore pointer, hover marcato e indicatore "›" a destra.
   Il JS delegato in gc-helpers.js naviga al click,
   lasciando passare i click su <a>/<button> interni.
   ========================================================= */
.gc-tabular tbody tr[data-href],
tr[data-href] {
    cursor: pointer;
    transition: background-color .12s ease;
}
.gc-tabular tbody tr[data-href]:hover,
tr[data-href]:hover {
    background-color: var(--bs-primary-bg-subtle, #e8ecfb) !important;
}
.gc-tabular tbody tr[data-href]:focus-visible,
tr[data-href]:focus-visible {
    outline: 2px solid var(--bs-primary, #3e60d5);
    outline-offset: -2px;
}
/* Chevron a destra: visibile sempre come affordance, più marcato su hover */
tr[data-href] td:last-child {
    position: relative;
    padding-right: 1.75rem !important;
}
tr[data-href] td:last-child::after {
    content: "\203A"; /* › U+203A — escape ASCII: immune all'encoding con cui il server serve il .css */
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #98a6ad);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    opacity: .45;
    transition: opacity .12s ease, transform .12s ease, color .12s ease;
    pointer-events: none;
}
tr[data-href]:hover td:last-child::after {
    opacity: 1;
    color: var(--bs-primary, #3e60d5);
    transform: translateY(-50%) translateX(3px);
}
/* Celle con bottoni azione finali: nascondiamo il chevron di affordance
   per evitare overlap con i bottoni stessi (es. anteprima partita). */
tr[data-href] td.gc-actions-cell {
    padding-right: 0.5rem !important;
}
tr[data-href] td.gc-actions-cell::after {
    content: none;
}

/* Link interni alle tabelle GC: visibilmente cliccabili.
   Default neutro (eredita), underline su hover, colore primary
   anche quando hover è sulla riga (per indicare il target). */
.gc-tabular tbody a[href] {
    text-decoration: none;
}
.gc-tabular tbody a[href]:hover,
.gc-tabular tbody a[href]:focus-visible,
.gc-tabular tbody tr[data-href]:hover a[href].fw-medium,
.gc-tabular tbody tr[data-href]:hover a[href].link-reset {
    color: var(--bs-primary, #3e60d5);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Code/badge dentro link: ereditano il colore al hover riga */
.gc-tabular tbody tr[data-href]:hover a[href] code {
    color: var(--bs-primary, #3e60d5);
}

/* Link "promosso": affordance esplicita di cliccabilità.
   Nessuna sottolineatura a riposo (per non rumoreggiare con <code>/badge),
   ma underline + colore primary su hover/focus. Usabile fuori da
   .gc-tabular (es. header dettaglio partita). */
a.gc-link,
a.gc-link:visited {
    color: inherit;
    text-decoration: none;
}
a.gc-link:hover,
a.gc-link:focus-visible,
.gc-tabular tbody tr[data-href]:hover a.gc-link {
    color: var(--bs-primary, #3e60d5);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.gc-link:hover code,
a.gc-link:focus-visible code,
.gc-tabular tbody tr[data-href]:hover a.gc-link code {
    color: var(--bs-primary, #3e60d5);
}

/* Card cliccabile (es. grid clienti) */
.card[data-href] {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card[data-href]:hover {
    border-color: var(--bs-primary, #3e60d5);
    box-shadow: 0 0.5rem 1.25rem rgba(62, 96, 213, 0.08);
}
.card[data-href]:focus-visible {
    outline: 2px solid var(--bs-primary, #3e60d5);
    outline-offset: 2px;
}

/* ============================================================
   Topbar search dropdown
   ============================================================ */
#gc-search-wrap { width: 640px; max-width: 100%; }
#gc-search-wrap .topbar-search { width: 640px; max-width: 100%; padding-right: 2.25rem; }

.gc-search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1080;
    width: 640px;
    max-width: calc(100vw - 32px);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .6rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    max-height: 75vh;
    overflow-y: auto;
    padding: .35rem 0;
}
.gc-search-panel .gc-search-group-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color, #6b7280);
    padding: .55rem .95rem .3rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    border-top: 1px solid var(--bs-border-color, #f1f3f5);
}
.gc-search-panel .gc-search-group-label:first-child { border-top: 0; }

.gc-search-panel .gc-search-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: .25rem 1rem;
    padding: .55rem .95rem;
    color: var(--bs-body-color, #111);
    text-decoration: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    line-height: 1.25;
}
.gc-search-panel .gc-search-item:hover,
.gc-search-panel .gc-search-item.is-active {
    background: var(--bs-tertiary-bg, #f3f4f6);
    border-left-color: var(--bs-primary, #3e60d5);
}

.gc-search-panel .gc-search-main { min-width: 0; }
.gc-search-panel .gc-search-title {
    font-weight: 500;
    font-size: .9375rem;
    color: var(--bs-body-color, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gc-search-panel .gc-search-sub {
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6b7280);
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Colonna meta: allineata alla baseline del titolo, due livelli */
.gc-search-panel .gc-search-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    white-space: nowrap;
    padding-top: 1px; /* allinea visivamente al titolo */
}
.gc-search-panel .gc-search-chip {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 999px;
    letter-spacing: .01em;
    background: var(--bs-secondary-bg, #eef0f3);
    color: var(--bs-secondary-color, #4b5563);
    border: 1px solid transparent;
}
.gc-search-panel .gc-chip-primary {
    background: rgba(62, 96, 213, .12);
    color: var(--bs-primary, #3e60d5);
}
.gc-search-panel .gc-chip-mono {
    background: transparent;
    color: var(--bs-body-color, #111827);
    border-color: var(--bs-border-color, #e5e7eb);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 600;
}
.gc-search-panel .gc-chip-neutral {
    background: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-secondary-color, #6b7280);
}
.gc-search-panel .gc-search-meta-sub {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
    font-variant-numeric: tabular-nums;
}

.gc-search-panel .gc-search-empty,
.gc-search-panel .gc-search-loading {
    padding: .95rem;
    text-align: center;
    color: var(--bs-secondary-color, #6b7280);
    font-size: .9rem;
}
.gc-search-panel mark {
    background: rgba(62, 96, 213, .18);
    color: inherit;
    padding: 0 .1rem;
    border-radius: .15rem;
    font-weight: 600;
}

/* Iconcina info per tooltip metriche (componente gc/metric-info) */
.gc-info {
    display: inline-flex;
    align-items: center;
    cursor: help;
    opacity: .55;
    vertical-align: -.1em;
    margin-left: .3em; /* respiro rispetto alla scritta accanto */
}
.gc-info > svg,
.gc-info > i {
    width: .9em;
    height: .9em;
}
.gc-info:hover,
.gc-info:focus-visible {
    opacity: .9;
}

/* ------------------------------------------------------------------
   Banner demo sintetica (resources/views/partials/demo-banner.php)

   Vive dentro .app-topbar, che è sticky con min-height: il contenuto
   della pagina viene spinto giù da solo. La sidenav invece è
   `position: fixed; top: var(--ins-topbar-height)`, cioè ancorata a
   60px fissi: senza lo scostamento qui sotto la sua prima voce (la
   card utente) resta nascosta sotto l'header, e per tutta la pagina,
   non solo con lo scroll in cima.

   Per questo l'altezza della striscia è dichiarata invece che lasciata
   al contenuto: --gc-demo-banner-h è l'unica fonte di verità, usata sia
   per disegnarla sia per scostare la sidenav. Se cambia il testo o il
   padding, si aggiorna qui e le due cose restano allineate.
   I colori passano dalle variabili del tema, così la striscia segue
   anche il dark mode.
   ------------------------------------------------------------------ */
:root {
    --gc-demo-banner-h: 30px;
}

/* Sotto md il testo va a capo su due righe (vedi demo-banner.php). */
@media (max-width: 767.98px) {
    :root {
        --gc-demo-banner-h: 50px;
    }
}

.gc-demo-banner {
    height: var(--gc-demo-banner-h); /* box-sizing: border-box → include il bordo */
    background-color: var(--ins-warning-bg-subtle);
    color: var(--ins-warning-text-emphasis);
    border-bottom: 1px solid var(--ins-warning-border-subtle);
    font-size: .8125rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gc-demo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .2rem .5rem;
    padding: 0 1.25rem;
    text-align: center;
}

/* .gc-demo sul <body> quando DEMO_MODE=1 (resources/views/layouts/app.php).
   L'1px è il border-bottom di .topbar-menu, che fa parte dell'header. */
.gc-demo .sidenav-menu {
    top: calc(var(--ins-topbar-height) + var(--gc-demo-banner-h) + 1px);
}

/* Senza questo la pagina supera il viewport esattamente dell'altezza della
   striscia, e ogni schermata corta si ritrova una barra di scorrimento. */
.gc-demo .content-page {
    min-height: calc(100vh - var(--ins-topbar-height) - var(--gc-demo-banner-h) - 1px);
}

.gc-demo-banner-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.gc-demo-banner-sep {
    opacity: .5;
}