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

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

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