/* ============================================================
   Giorgia & Johns CRM — Custom Stylesheet
   Estende il tema Velmax Bootstrap 5 con il branding G&J.
   ============================================================ */

/* ─── Anti-flash: sidebar e topbar pre-render ─────────────────
   Prima che app.js inietti sidebar e topbar, i container
   assumono il colore di sfondo corretto eliminando il "blink"
   bianco al cambio pagina.
   .gj-app-ready viene aggiunto da app.js dopo l'init.
   ─────────────────────────────────────────────────────────── */
#sidebarContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: #000000;
  overflow: hidden;
  z-index: 14;           /* sotto sidebar-wrapper (z-index:16) */
}

#topbarContainer {
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  height: 65px;
  background: var(--bs-body-bg, #ffffff);
  border-bottom: 1px solid #e2e3e4;
  overflow: hidden;
  z-index: 14;
}

/* Quando la sidebar è ridotta, allineiamo anche il wrapper fisico
   per evitare lo “scia nera” residua del container fixed. */
.wrapper.toggled:not(.sidebar-hovered) #sidebarContainer {
  width: 80px;
}

.wrapper.toggled:not(.sidebar-hovered) #topbarContainer {
  left: 80px;
}

/* Nascondi il contenuto pagina finché app.js non ha iniettato
   sidebar e topbar, così non si vede mai uno stato parziale. */
html:not(.gj-app-ready) .page-content-wrapper {
  opacity: 0;
}
html.gj-app-ready .page-content-wrapper {
  opacity: 1;
  transition: opacity 0.12s ease-out;
}

/* Dark-theme: topbar placeholder scuro */
html.dark-theme #topbarContainer {
  background: var(--bs-dark, #212529);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* Mobile: su schermi ≤1024px la sidebar parte off-screen (come sidebar-wrapper) */
@media screen and (max-width: 1024px) {
  #sidebarContainer {
    left: -300px;
  }
  #topbarContainer {
    left: 0;
  }
}

/* ─── Pace loader — colore beige G&J ──────────────────────── */

.pace .pace-progress {
  background: #c9a96e !important;
}

.pace .pace-progress-inner {
  box-shadow: 0 0 10px #c9a96e, 0 0 5px #c9a96e !important;
}

/* Nasconde il cerchietto predefinito in alto a destra */
.pace .pace-activity {
  display: none !important;
}

/* Mini-spinner inline accanto alla sede */
.gj-pace-indicator {
  display: none;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(201,169,110,0.25);
  border-top-color: #c9a96e;
  border-radius: 50%;
  animation: gjSpin 0.65s linear infinite;
  flex-shrink: 0;
  align-self: center;
  margin-left: 8px;
}
body.pace-running .gj-pace-indicator {
  display: inline-flex;
}
@keyframes gjSpin {
  to { transform: rotate(360deg); }
}

/* ─── Brand Variables ──────────────────────────────────────── */
:root {
  --gj-primary:       #2c3e7a;
  --gj-primary-dark:  #000000;
  --gj-accent:        #c9a96e;
  --gj-accent-light:  #f5efe6;
  --gj-sidebar-bg:    #000000;
  --gj-sidebar-hover: rgba(201, 169, 110, 0.16);
}

/* ─── Sidebar ──────────────────────────────────────────────── */

.sidebar-wrapper {
  background: var(--gj-sidebar-bg) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sidebar-wrapper::-webkit-scrollbar {
  width: 4px;
}

.sidebar-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.sidebar-header {
  background: #000000 !important;
  border-bottom: none !important;
  padding: 0;
  display: block;
  line-height: 0;
  overflow: hidden;
}

.sidebar-header .logo-icon {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
}

/* Dark mode: mantiene sidebar e logo con sfondo nero */
html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header {
  background-color: #000000 !important;
  background: #000000 !important;
}

html.dark-theme .sidebar-wrapper .sidebar-header img {
  filter: none !important;
}

/* Store info strip */
.sidebar-store-info {
  padding: 8px 16px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── Metismenu navigation ─────────────────────────────────── */

.metismenu a {
  color: rgba(255, 255, 255, 0.68) !important;
  transition: color 0.15s, background 0.15s, border-left 0.15s;
}

.metismenu a:hover {
  color: #ffffff !important;
  background: var(--gj-sidebar-hover) !important;
  border-left: 3px solid var(--gj-accent) !important;
}

.metismenu .mm-active > a,
.metismenu li.mm-active > a {
  color: #ffffff !important;
  background: var(--gj-sidebar-hover) !important;
  border-left: 3px solid var(--gj-accent) !important;
}

.metismenu .menu-label {
  color: rgba(201, 169, 110, 0.55) !important;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 16px 4px;
  font-weight: 600;
}

/* ─── Avatars ──────────────────────────────────────────────── */

.gj-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.gj-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}

/* ─── Login page ───────────────────────────────────────────── */

body.gj-login-body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--gj-sidebar-bg) 0%, var(--gj-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gj-login-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.gj-login-brand img {
  max-height: 58px;
  width: auto;
}

/* ─── Notification badge in sidebar ───────────────────────── */

.gj-notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #dc3545;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

/* ─── KPI Cards ────────────────────────────────────────────── */

.gj-kpi-card {
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gj-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13) !important;
}

/* ─── Tables ───────────────────────────────────────────────── */

.table thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6c757d;
  font-weight: 600;
  border-top: none;
  white-space: nowrap;
}

/* ─── Topbar store name ────────────────────────────────────── */

.gj-topbar-store {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000000;
  line-height: 1;
  white-space: nowrap;
}

html.dark-theme .gj-topbar-store {
  color: #ffffff;
}

/* ─── Customer detail header ───────────────────────────────── */

.gj-customer-header {
  background: linear-gradient(135deg, var(--gj-primary) 0%, #3d5294 100%);
  border-radius: 12px 12px 0 0;
  padding: 24px;
  color: #fff;
}

/* ─── Notification items ───────────────────────────────────── */

.notify {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-size: 17px;
  flex-shrink: 0;
}

/* ─── Tendina notifiche (campanella topbar) ────────────────
   Bootstrap imposta white-space:nowrap sui .dropdown-item: i testi
   lunghi delle notifiche sforavano il riquadro da 320px. Qui il
   testo va a capo e il messaggio è limitato a 2 righe. */
.dropdown-large .dropdown-item { white-space: normal; }
.dropdown-large .dropdown-item .flex-grow-1 { min-width: 0; }
.dropdown-large .notify { margin-right: 10px; }
.dropdown-large .msg-name {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.dropdown-large .msg-time {
  float: none !important;   /* vince su .float-end (float:right!important) */
  display: block;
  white-space: nowrap;
}
.dropdown-large .msg-info {
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ─── Toast container ──────────────────────────────────────── */

#toastContainer {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  min-width: 280px;
}

/* ─── Utility ──────────────────────────────────────────────── */

.fw-500      { font-weight: 500; }
.fw-600      { font-weight: 600; }
.text-gj-accent { color: var(--gj-accent) !important; }
.bg-gj-accent   { background-color: var(--gj-accent) !important; }
.border-gj-accent { border-color: var(--gj-accent) !important; }

/* ─── Typography ──────────────────────────────────────────── */

body, p, span, label, input, select, textarea, button,
.form-control, .form-select, .btn, .table, small, .small,
.text-muted, .dropdown-item, .nav-link, .breadcrumb-item {
  font-family: 'Catamaran', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.modal-title, .card-title, .page-title,
.logo-text, .sidebar-header {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.02em;
}

.menu-title {
  font-family: 'Catamaran', sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-breadcrumb {
    display: none !important;
  }

  .gj-kpi-card h4 {
    font-size: 1.4rem;
  }

  #toastContainer {
    right: 10px;
    min-width: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGE CONTENT — Palette  #c9a96e / #FFFFFF / #45290C
   Scoped a .page-content-wrapper: sidebar e header invariati.
   ═══════════════════════════════════════════════════════════ */

/* Variabili scoped: sovrascrivono solo dentro il content */
.page-content-wrapper {
  --gj-primary:        #c9a96e;
  --gj-accent:         #45290C;
  --gj-accent-light:   rgba(201, 169, 110, 0.12);
  --bs-primary:        #c9a96e;
  --bs-primary-rgb:    201, 169, 110;
  --bs-link-color:     #c9a96e;
  --bs-link-color-rgb: 201, 169, 110;
}

/* ─── Sfondo light mode ─────────────────────────────────── */

.page-content-wrapper {
  background-color: #ffffff !important;
}

/* ─── Sfondo dark mode ──────────────────────────────────── */

html.dark-theme body {
  background-color: #000000 !important;
}

html.dark-theme .page-content-wrapper {
  background-color: #000000 !important;
}

html.dark-theme .page-content-wrapper .card {
  background-color: #111111 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .page-content-wrapper .card-header,
html.dark-theme .page-content-wrapper .card-footer {
  background-color: #111111 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .page-content-wrapper .table-light {
  --bs-table-bg: rgba(255, 255, 255, 0.04);
  --bs-table-color: #cecece;
}

/* ─── Modal Foto Vetrina / viewport safety ─────────────── */
.gj-vetrina-modal-dialog {
  max-height: 95vh;
}

.gj-vetrina-modal-dialog .modal-content {
  max-height: 95vh;
}

.gj-vetrina-modal-dialog .modal-body {
  max-height: calc(95vh - 130px);
  overflow-y: auto;
}

@media (max-width: 576px) {
  .gj-vetrina-modal-dialog {
    margin: 0.5rem;
    max-height: 100vh;
  }

  .gj-vetrina-modal-dialog .modal-content,
  .gj-vetrina-modal-dialog .modal-body {
    max-height: 100vh;
  }
}

/* ─── Bootstrap primary → #0074CC ──────────────────────── */

.page-content-wrapper .btn-primary {
  background-color: #c9a96e !important;
  border-color: #c9a96e !important;
  color: #1a1a1a !important;
}

.page-content-wrapper .btn-primary:hover,
.page-content-wrapper .btn-primary:focus {
  background-color: #b8924d !important;
  border-color: #b8924d !important;
  color: #1a1a1a !important;
}

.page-content-wrapper .btn-outline-primary {
  color: #c9a96e !important;
  border-color: #c9a96e !important;
}

.page-content-wrapper .btn-outline-primary:hover {
  background-color: #c9a96e !important;
  color: #1a1a1a !important;
}

.page-content-wrapper .text-primary {
  color: #c9a96e !important;
}

.page-content-wrapper .bg-primary,
.page-content-wrapper .badge.bg-primary {
  background-color: #c9a96e !important;
  color: #1a1a1a !important;
}

/* ─── Widget KPI icon backgrounds ──────────────────────── */

.page-content-wrapper .widget-icon-small.bg-gradient-purple {
  background: linear-gradient(135deg, #c9a96e 0%, #8a6430 100%) !important;
}

.page-content-wrapper .widget-icon-small.bg-gradient-warning {
  background: linear-gradient(135deg, #7a4a15 0%, #45290C 100%) !important;
}

.page-content-wrapper .widget-icon-small.bg-gradient-info {
  background: linear-gradient(135deg, #e8d5b0 0%, #c9a96e 100%) !important;
}

.page-content-wrapper .widget-icon-small.bg-gradient-danger {
  background: linear-gradient(135deg, #c0392b 0%, #962d22 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX SIDEBAR — sincronizzazione collasso / hover-peek
   -----------------------------------------------------------
   Problema: i placeholder #sidebarContainer / #topbarContainer non
   avevano transizione (scattavano istantaneamente) mentre i layer
   del tema Velmax animavano, e con durate diverse (.2s la sidebar,
   .3s la topbar; il contenuto, per via della regola anti-flash che
   imposta transition:opacity, non animava affatto il margine).
   Inoltre in hover-peek il placeholder topbar tornava a 260px mentre
   .top-header e il contenuto restavano a 80px → "si apre solo la
   parte bassa". Qui uniformiamo tutte le durate a .2s e rendiamo
   coerente l'hover-peek. Nessuna modifica ai file del tema Velmax.
   ═══════════════════════════════════════════════════════════ */

/* 1. Stessa durata (.2s) per tutti gli elementi che si muovono al toggle.
      .sidebar-wrapper e .sidebar-header sono già a .2s nel tema. */
#sidebarContainer { transition: width .2s ease; }
#topbarContainer  { transition: left  .2s ease; }
.top-header       { transition: all   .2s ease !important; }

/* 2. Il contenuto deve scorrere in sincrono con la sidebar
      (oltre al fade anti-flash dell'opacità). */
html.gj-app-ready .page-content-wrapper {
  transition: opacity .12s ease-out, margin-left .2s ease;
}

/* 3. Hover-peek = espansione "push": passando il mouse sulla sidebar
      ridotta, sidebar, topbar e contenuto si espandono INSIEME a 260px,
      esattamente come a sidebar aperta. Così il logo non finisce sotto
      l'hamburger e la "Sede": questi scorrono a destra e restano visibili
      (niente sovrapposizione / conflitto di z-index).
      Il placeholder #topbarContainer torna a 260px in hover grazie alla
      regola esistente :not(.sidebar-hovered). Qui sovrascriviamo le regole
      base del tema che terrebbero topbar e contenuto fermi a 80px. */
.wrapper.toggled.sidebar-hovered .top-header           { left: 260px; }
.wrapper.toggled.sidebar-hovered .page-content-wrapper { margin-left: 260px; }

/* ═══════════════════════════════════════════════════════════
   TABELLA BUDGET GIORNALIERO — layout compatto (12 colonne)
   I valori derivati (scontrino medio, prezzo medio, anno prec.,
   conversione, scostamenti %) sono sotto-righe .gj-sub dentro le
   celle: tutti i dati del prospetto Excel senza scroll laterale.
   ═══════════════════════════════════════════════════════════ */

.gj-budget-table {
  font-size: 0.8rem;
  table-layout: auto;
}

.gj-budget-table th,
.gj-budget-table td {
  padding: 0.3rem 0.35rem;
  white-space: nowrap;
}

.gj-budget-table thead th {
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Sotto-riga con valore derivato/calcolato */
.gj-budget-table .gj-sub {
  font-size: 10.5px;
  line-height: 1.25;
  color: #8a8f98;
  margin-top: 2px;
  white-space: nowrap;
}

.gj-budget-table .gj-sub .fw-semibold {
  font-size: 10.5px;
}

/* Input consuntivo stretti */
.gj-budget-table input.gj-num {
  min-width: 62px;
  max-width: 96px;
  padding: 0.12rem 0.3rem;
  font-size: 0.78rem;
}

/* Bottone salva compatto */
.gj-budget-table .gj-save-day {
  padding: 0.15rem 0.45rem;
}

/* Riga totale settimana ben distinguibile */
.gj-budget-table .gj-week-total td {
  background: rgba(201, 169, 110, 0.10);
  border-top: 2px solid rgba(201, 169, 110, 0.45);
  font-weight: 600;
}

/* ─── Avatar utente (navbar top-right + dropdown) ───────── */

.gj-avatar.bg-gradient-purple,
.gj-avatar-sm.bg-gradient-purple {
  background: linear-gradient(135deg, #c9a96e 0%, #8a6430 100%) !important;
}

/* ─── Customer detail header ────────────────────────────── */

.gj-customer-header {
  background: linear-gradient(135deg, #c9a96e 0%, #8a6430 100%) !important;
  color: #1a1a1a !important;
}

/* ─── Bronze accent utilities ───────────────────────────── */

.page-content-wrapper .text-gj-accent    { color: #45290C !important; }
.page-content-wrapper .bg-gj-accent      { background-color: #45290C !important; }
.page-content-wrapper .border-gj-accent  { border-color: #45290C !important; }

/* ============================================================
   MODULO BUDGET GIORNALIERO STORE
   Tabella stile calendario/report commerciale (web-friendly).
   ============================================================ */

.gj-budget-table {
  font-size: 0.85rem;
}

.gj-budget-table thead th {
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 600;
}

.gj-budget-table td,
.gj-budget-table th {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
}

/* Riga weekend evidenziata */
.gj-budget-table tr.gj-weekend td {
  background-color: #faf6ee;
}

/* Input numerici compatti nella griglia */
.gj-budget-table .gj-num {
  min-width: 88px;
  text-align: right;
}

.gj-budget-table .gj-num:focus {
  border-color: #c9a96e;
  box-shadow: 0 0 0 0.15rem rgba(201, 169, 110, 0.25);
}

.gj-budget-table .gj-upt-cell {
  font-weight: 600;
  color: #45290C;
  text-align: right;
}

/* Scostamenti: verde sopra/uguale target, rosso sotto */
.gj-var-up   { color: #1e7e34 !important; }
.gj-var-down { color: #c0392b !important; }

/* Sub-header colorato (target vs consuntivo) */
.gj-budget-table thead .bg-light-subtle {
  background-color: #f5efe3 !important;
  color: #45290C;
}

/* Riga totali sticky in fondo */
.gj-budget-table tfoot td {
  background-color: #f8f9fa;
  border-top: 2px solid #c9a96e;
}

/* Riga totale settimanale */
.gj-budget-table tr.gj-week-total td {
  background-color: #efe7d6;
  font-weight: 600;
  color: #45290C;
  border-top: 1px solid #c9a96e;
  border-bottom: 1px solid #c9a96e;
  text-align: right;
}

.gj-budget-table tr.gj-week-total td:first-child {
  text-align: right;
  font-style: italic;
}

/* Responsive: su tablet riduce ulteriormente padding */
@media (max-width: 991.98px) {
  .gj-budget-table { font-size: 0.8rem; }
  .gj-budget-table .gj-num { min-width: 72px; }
}

/* ═══════════════════════════════════════════════════
   MANUALE OPERATIVO — stili condivisi delle sezioni
   ═══════════════════════════════════════════════════ */

/* Intestazione pagina manuale */
.gj-man-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9a96e;
}

/* Corpo documento trascritto */
.gj-doc { font-size: 14px; line-height: 1.65; color: #3d3d3d; }
.gj-doc p { margin-bottom: 0.65rem; }
.gj-doc h2, .gj-doc h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #45290C;
  font-size: 1.02rem;
  margin: 1.6rem 0 0.6rem;
  padding-left: 10px;
  border-left: 3px solid #c9a96e;
  scroll-margin-top: 90px;
}
.gj-doc h2:first-child, .gj-doc h3:first-child { margin-top: 0; }
.gj-doc ul, .gj-doc ol { padding-left: 22px; margin-bottom: 0.75rem; }
.gj-doc li { margin-bottom: 4px; }
.gj-doc table {
  width: 100%;
  font-size: 13px;
  margin: 10px 0;
  border-collapse: collapse;
}
.gj-doc table td, .gj-doc table th {
  border: 1px solid #e8e0d0;
  padding: 7px 10px;
  vertical-align: top;
}
.gj-doc table th, .gj-doc table tr:first-child td { background: #f4efe6; font-weight: 600; }

/* Figure / screenshot dei documenti */
.gj-doc-fig { margin: 14px 0 18px; text-align: center; }
.gj-doc-fig img {
  max-width: 100%;
  height: auto;
  border: 1px solid #e4ddcf;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(69, 41, 12, 0.08);
}
.gj-doc-fig figcaption {
  font-size: 12px;
  color: #8d8d8d;
  margin-top: 6px;
  font-style: italic;
}

/* Callout / note operative */
.gj-man-note {
  border-left: 3px solid #c9a96e;
  background: rgba(201, 169, 110, 0.10);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  font-size: 13.5px;
  color: #45290C;
}
.gj-man-danger {
  border-left: 3px solid #c0392b;
  background: rgba(192, 57, 43, 0.07);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  font-size: 13.5px;
  color: #7a2318;
  font-weight: 600;
}

/* Passi numerati (stesso pattern della Guida) */
.gj-man-step { display: flex; gap: 12px; margin-bottom: 12px; }
.gj-man-step .num {
  flex: 0 0 26px; height: 26px; width: 26px; border-radius: 50%;
  background: #000; color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.gj-man-step .txt { font-size: 14px; line-height: 1.5; }

/* Indice laterale */
.gj-man-toc a {
  display: block; padding: 5px 10px; border-radius: 8px;
  font-size: 13px; color: #5f5e5a; text-decoration: none;
}
.gj-man-toc a:hover { background: rgba(201, 169, 110, 0.14); color: #45290C; }
.gj-man-toc .toc-chapter {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #c9a96e; font-weight: 700; margin: 12px 0 4px; padding-left: 10px;
}
.gj-man-toc .toc-chapter:first-child { margin-top: 0; }

/* Card video tutorial */
.gj-video-card video {
  width: 100%;
  border-radius: 10px 10px 0 0;
  background: #000;
  aspect-ratio: 16 / 10;
  display: block;
}
.gj-video-card .gj-video-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #45290C;
}
.gj-video-card .gj-video-len { font-size: 12px; color: #999; }

/* Video verticali (girati da smartphone) */
.gj-video-card video.gj-video-portrait { aspect-ratio: 9 / 16; max-height: 420px; }

/* Embed YouTube responsive */
.gj-yt-embed {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 10px; overflow: hidden; background: #000;
}
.gj-yt-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Sezioni ancorabili */
.gj-man-section { scroll-margin-top: 90px; }

@media (max-width: 767.98px) {
  .gj-doc { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════
   FORMAZIONE — visualizzatore slide locale
   ═══════════════════════════════════════════════════ */

.gj-slide-viewer {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
}
.gj-slide-viewer .gj-slide-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;   /* le presentazioni G&J sono 720x540 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.gj-slide-viewer .gj-slide-stage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.gj-slide-viewer:fullscreen { border-radius: 0; }
.gj-slide-viewer:fullscreen .gj-slide-stage { height: 100%; aspect-ratio: auto; }

/* Frecce */
.gj-slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .15s ease, background .15s ease;
  z-index: 2;
}
.gj-slide-nav:hover { opacity: 1; background: rgba(201,169,110,0.9); }
.gj-slide-nav:disabled { opacity: 0.25; cursor: default; }
.gj-slide-nav:disabled:hover { background: rgba(0,0,0,0.55); }
.gj-slide-nav.prev { left: 12px; }
.gj-slide-nav.next { right: 12px; }

/* Barra inferiore: contatore + fullscreen */
.gj-slide-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  z-index: 2;
}
.gj-slide-bar .gj-slide-counter {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1px;
}
.gj-slide-bar .gj-slide-fs {
  margin-left: auto;
  border: none; background: transparent; color: #fff;
  font-size: 19px; cursor: pointer; opacity: 0.85;
  display: flex; align-items: center;
}
.gj-slide-bar .gj-slide-fs:hover { opacity: 1; color: #c9a96e; }

/* Barra progresso slide */
.gj-slide-progress {
  position: absolute;
  top: 0; left: 0; height: 3px;
  background: #c9a96e;
  transition: width .2s ease;
  z-index: 3;
}

/* ═══════════════════════════════════════════════════
   VISUAL — gallerie fotografiche, lightbox, documenti
   ═══════════════════════════════════════════════════ */

/* Griglia miniature */
.gj-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.gj-gallery .gj-g-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  background: #f4efe6;
}
.gj-gallery .gj-g-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}
.gj-gallery .gj-g-item:hover img { transform: scale(1.05); }
.gj-gallery .gj-g-item::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(69,41,12,0.08);
  border-radius: 10px;
  pointer-events: none;
}

/* Documenti impaginati (pagine A4 impilate) */
.gj-doc-pages img {
  width: 100%; height: auto; display: block;
  border: 1px solid #e4ddcf; border-radius: 8px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(69,41,12,0.06);
}

/* Browser file (Grafica di base) */
.gj-files-folder .card-header {
  background: #f9f6f0;
  border-bottom: 1px solid #eee5d4;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; color: #45290C;
}
.gj-files-folder .card-header .badge { background: #c9a96e; }
.gj-files-folder .card-header ion-icon.chev { margin-left: auto; transition: transform .15s ease; }
.gj-files-folder.open .card-header ion-icon.chev { transform: rotate(90deg); }
.gj-files-folder .gj-files-body { display: none; }
.gj-files-folder.open .gj-files-body { display: block; }

.gj-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.gj-file-card {
  border: 1px solid #eee5d4; border-radius: 10px;
  overflow: hidden; text-decoration: none;
  background: #fff;
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease;
}
.gj-file-card:hover { box-shadow: 0 4px 14px rgba(69,41,12,0.12); }
.gj-file-card .gj-f-preview {
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  background: #f4efe6;
  overflow: hidden;
}
.gj-file-card .gj-f-preview img { width: 100%; height: 100%; object-fit: cover; }
.gj-file-card .gj-f-preview ion-icon { font-size: 40px; color: #c9a96e; }
.gj-file-card .gj-f-name {
  padding: 8px 10px 2px;
  font-size: 12px; font-weight: 600; color: #45290C;
  word-break: break-word; line-height: 1.3;
}
.gj-file-card .gj-f-meta {
  padding: 0 10px 8px;
  font-size: 11px; color: #999;
}

/* Video card dentro le gallerie */
.gj-gallery-video video {
  width: 100%; border-radius: 10px; background: #000; display: block;
}

/* ─── Overlay avanzamento upload foto ───────────────────────
   Mostrato automaticamente da GJAPI.uploadFiles in basso a destra. */
#gjUploadOverlay {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  width: 320px;
  background: #fff;
  border: 1px solid #e4ddcf;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
#gjUploadOverlay.show { opacity: 1; }
#gjUploadOverlay .gj-up-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #45290C;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
#gjUploadOverlay .progress { background: #f1ece1; }
#gjUploadOverlay .progress-bar {
  background: #c9a96e;
  transition: width .15s ease;
}
#gjUploadOverlay small {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: #8d8d8d;
}

/* ═══════════════════════════════════════════════════
   BUDGET DETAIL — intestazioni tabella sempre visibili
   Vale sia per la Sede sia per i negozi: scorrendo la pagina
   le intestazioni restano agganciate sotto la barra superiore.
   Attivo solo dove il contenitore ha la classe .gj-budget-sticky.
   ═══════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  /* Il contenitore non deve creare una propria area di scorrimento,
     altrimenti l'intestazione si aggancia a QUELLA invece che alla
     pagina e finisce per coprire le prime righe. */
  .gj-budget-sticky {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Tutta l'intestazione si muove come un blocco unico: nessun
     calcolo di altezze, quindi funziona con una o due righe di
     intestazione e anche con le sotto-diciture. */
  .gj-budget-sticky .gj-budget-table thead {
    position: sticky;
    top: 65px;                      /* subito sotto la barra superiore */
    z-index: 4;                     /* sotto la topbar (z-index 5) */
  }

  /* Sfondo pieno: senza questo le righe scorrerebbero in trasparenza
     sotto l'intestazione. I bordi vengono ridisegnati come ombre
     perche' con border-collapse non seguono le celle agganciate. */
  .gj-budget-sticky .gj-budget-table thead th {
    background-color: #f8f9fa;
    box-shadow: inset -1px -1px 0 #dee2e6;
  }

  html.dark-theme .gj-budget-sticky .gj-budget-table thead th {
    background-color: #2b2c40;
  }
}

/* ═══════════════════════════════════════════════════
   LIGHTBOX GLOBALE — scorrimento foto in ogni raccolta
   Attivato automaticamente da js/lightbox.js.
   ═══════════════════════════════════════════════════ */
.gj-lb {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(12, 10, 8, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 72px;
}
.gj-lb.open { display: flex; }

.gj-lb-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gj-lb-stage img {
  max-width: min(1400px, 92vw);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  background: #1a1815;
}
.gj-lb-caption {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  text-align: center;
  max-width: 80vw;
  word-break: break-word;
}

/* Frecce di navigazione */
.gj-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gj-lb-nav:hover { background: #c9a96e; }
.gj-lb-prev { left: 18px; }
.gj-lb-next { right: 18px; }

/* Pulsanti in alto a destra */
.gj-lb-btn {
  position: absolute;
  top: 16px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.gj-lb-btn:hover { background: #c9a96e; color: #fff; }
.gj-lb-close { right: 18px; }
.gj-lb-open  { right: 70px; }

/* Contatore in basso */
.gj-lb-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 16px;
  border-radius: 20px;
}

/* Le miniature cliccabili mostrano che sono interattive */
a[href] > img { cursor: zoom-in; }

@media (max-width: 575.98px) {
  .gj-lb { padding: 52px 8px 64px; }
  .gj-lb-nav { width: 42px; height: 42px; font-size: 21px; }
  .gj-lb-prev { left: 6px; }
  .gj-lb-next { right: 6px; }
  .gj-lb-stage img { max-height: 68vh; }
}