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

/* 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; }

/* =========================================================
   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;
}
.gc-info > svg,
.gc-info > i {
    width: .9em;
    height: .9em;
}
.gc-info:hover,
.gc-info:focus-visible {
    opacity: .9;
}