/* ==========================================================
   JPMS Italia — Design System condiviso
   ----------------------------------------------------------
   Palette nuova (Taupe/Beige/Brown/Charcoal/Lilla)
   Typography: Helvetica Neue LT Std (75 Bold, 55 Roman)
   Header unificato (Home, Lingua, Logout)
   ----------------------------------------------------------
   Caricato da TUTTE le pagine via:
   <link rel="stylesheet" href="assets/jpms-theme.css">
   ========================================================== */

/* ---------- FONT FACE (Helvetica Neue LT Std) ----------
   I file font sono commerciali (Linotype). Per attivarli:
     1) Procurati i file .woff2 / .woff / .otf
     2) Caricali in assets/fonts/
     3) Decommenta i blocchi qui sotto
   FALLBACK: system stack (sempre attivo)
*/
/*
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2'),
       url('fonts/HelveticaNeueLTStd-Roman.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2'),
       url('fonts/HelveticaNeueLTStd-Bd.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

:root {
  /* ============ PALETTE OFFICIALE JPMS ============ */
  /* Backgrounds */
  --jpms-taupe:        #B7A99A;   /* PMS 7529 C */
  --jpms-beige:        #E8E6DF;   /* PMS 9043 C */
  --jpms-beige-soft:   #F2F1EC;   /* Beige più chiaro (derivato) */
  --jpms-brown:        #7B6756;   /* PMS 7531 C */

  /* Testi */
  --jpms-charcoal:     #25282A;   /* PMS 426 C */
  --jpms-charcoal-soft:#4A4D4F;   /* Charcoal più chiaro (derivato) */

  /* Lilla & affini (CTA / card / accent) */
  --jpms-lilla:        #B3B0C4;   /* PMS 5295 C */
  --jpms-lilla-med:    #8D89A5;   /* PMS 5285 C */
  --jpms-lilla-dark:   #6C6A81;   /* PMS 2362 C */
  --jpms-ciano:        #9EB5CB;   /* PMS 2155 C */
  --jpms-ocra:         #D5AC67;   /* PMS 4024 C */
  --jpms-magenta:      #A56E87;   /* PMS 7646 C */
  --jpms-light-green:  #D0DEBB;   /* PMS 7485 C */
  --jpms-croissant:    #C58B68;   /* PMS 7515 C */
  --jpms-red:          #AF272F;   /* PMS 1805 C */
  --jpms-silver:       #C7C9C7;   /* PMS 420 C */
  --jpms-smoked:       #D7D1CB;   /* Warm Gray 1 C */
  --jpms-titanium:     #768387;   /* PMS 6220 C */
  --jpms-glacier:      #7EB6B6;   /* PMS 6151 C */
  --jpms-chartreuse:   #F5D34E;   /* PMS 128 C (corretto) */
  --jpms-green:        #8DAC81;   /* PMS 4206 C */

  /* ============ ALIAS SEMANTICI (usati dalle pagine) ============ */
  --bg:                var(--jpms-beige);
  --bg-soft:           var(--jpms-beige-soft);
  --surface:           #FFFFFF;
  --surface-alt:       #FBFAF7;
  --ink:               var(--jpms-charcoal);
  --ink-soft:          var(--jpms-charcoal-soft);
  --muted:             #7C7A82;
  --line:              #D9D5CC;
  --line-soft:         #E6E1D5;

  --accent:            var(--jpms-lilla-med);
  --accent-dark:       var(--jpms-lilla-dark);
  --accent-soft:       #E8E6EF;       /* Lilla molto chiaro */
  --accent-strong:     var(--jpms-brown);

  --pos:               var(--jpms-green);
  --pos-soft:          #E8F0E1;
  --neg:               var(--jpms-red);
  --neg-soft:          #F7DCDE;
  --warn:              var(--jpms-ocra);
  --warn-soft:         #FBEFD8;
  --info:              var(--jpms-ciano);
  --info-soft:         #E6EEF6;

  --shadow:            0 1px 2px rgba(37,40,42,.05), 0 6px 18px rgba(123,103,86,.07);
  --shadow-hover:      0 4px 8px rgba(37,40,42,.06), 0 18px 38px rgba(123,103,86,.16);
  --radius:            12px;

  /* ============ Typography ============ */
  --font-headline:     'Helvetica Neue LT Std', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:         'Helvetica Neue LT Std', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Pesi font:
     - 75 Bold  → font-weight 700 (titoli, headline)
     - 55 Roman → font-weight 400 (body, label, tabelle)
  */
}

/* ============================================================
   RESET MINIMO + TIPOGRAFIA BASE
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400; /* 55 Roman */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700; /* 75 Bold */
  letter-spacing: -.01em;
  color: var(--ink);
}
button, input, select, textarea {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
}

/* ============================================================
   HEADER UNIFICATO JPMS
   (renderizzato dinamicamente da assets/jpms-header.js)
   ============================================================ */
.jpms-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(232, 230, 223, 0.92); /* beige semi-trasparente */
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.jpms-topbar__left,
.jpms-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jpms-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 13px;
  color: var(--jpms-brown);
  letter-spacing: .02em;
}
.jpms-topbar__brand .logo {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--jpms-brown), var(--jpms-lilla-dark));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

/* Bottone "← Home" */
.jpms-btn-home {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.jpms-btn-home:hover {
  background: var(--jpms-lilla);
  color: #fff;
  border-color: var(--jpms-lilla);
  transform: translateX(-2px);
}
.jpms-btn-home .arrow { font-weight: 700; }

/* Selettore lingua */
.jpms-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.jpms-lang select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 30px 7px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s, background .15s;
}
.jpms-lang select:hover { border-color: var(--jpms-lilla-med); }
.jpms-lang::before {
  content: "🌐";
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}
.jpms-lang::after {
  content: "▾";
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--ink-soft);
  pointer-events: none;
}

/* Bottone "Logout" */
.jpms-btn-logout {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s, border-color .15s;
}
.jpms-btn-logout:hover {
  background: var(--neg-soft);
  color: var(--neg);
  border-color: var(--neg);
}
.jpms-btn-logout svg { width: 13px; height: 13px; }

/* User chip (email visibile) */
.jpms-user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.jpms-user-chip .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--jpms-lilla);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}

/* ============================================================
   COMPONENTI RIUSABILI
   ============================================================ */
.jpms-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.jpms-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--jpms-lilla-med);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.jpms-btn:hover { background: var(--jpms-lilla-dark); }
.jpms-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.jpms-btn--ghost:hover { background: var(--jpms-beige-soft); }

.jpms-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--jpms-lilla-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jpms-badge.brown   { background: #EFE7DE; color: var(--jpms-brown); }
.jpms-badge.taupe   { background: #E8E0D5; color: var(--jpms-brown); }
.jpms-badge.pos     { background: var(--pos-soft); color: var(--pos); }
.jpms-badge.neg     { background: var(--neg-soft); color: var(--neg); }
.jpms-badge.warn    { background: var(--warn-soft); color: var(--warn); }
.jpms-badge.info    { background: var(--info-soft); color: var(--info); }
.jpms-badge.muted   { background: var(--jpms-smoked); color: var(--jpms-charcoal-soft); }

/* ============================================================
   RESPONSIVE — Topbar JPMS + override globali dashboard
   ============================================================ */
@media (max-width: 900px) {
  /* Container generici delle dashboard più compatti */
  .container, .app { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 768px) {
  /* Topbar JPMS più compatta */
  .jpms-topbar { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .jpms-topbar__left, .jpms-topbar__right { gap: 8px; flex-wrap: wrap; }
  .jpms-user-chip { display: none; }
  .jpms-topbar__brand { font-size: 12px; }
  .jpms-btn-home, .jpms-btn-logout { padding: 6px 10px; font-size: 12px; }
  .jpms-lang select { padding: 6px 26px; font-size: 12px; }

  /* Pannelli e card più compatti */
  .panel, .jpms-card, .card { padding: 14px 14px !important; }
  .panel h2 { font-size: 16px !important; }

  /* Grid generali → 1 colonna su mobile */
  .charts-grid, .leader-grid, .totals-grid, .sales-grid,
  .grid.c2, .grid.c3, .grid.c4, .leader-grid { grid-template-columns: 1fr !important; }

  /* KPI grid (SingleBrand) → 2 colonne */
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Filter / period selector → wrap verticale */
  .period-selector { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar button { font-size: 12px; padding: 6px 10px; }

  /* Heros / header card dashboard */
  header.dash-hero, .container > header,
  header.topbar { padding: 16px 18px !important; }
  header h1, header.topbar h1 { font-size: 20px !important; }

  /* Tabelle scrollabili orizzontalmente */
  .table-wrap, .heatmap-table, .detail-table,
  table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl, table.detail-table, .heatmap-table { min-width: 600px; }

  /* Chart canvas → altezza ridotta */
  .chart-canvas-wrapper { height: 240px !important; }
  .chart-canvas-wrapper.tall { height: 320px !important; }
  .chart-wrap.tall, .chart-wrap { min-height: 220px; }

  /* Hub: card grid → 1 col */
  body .grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Topbar: solo icone */
  .jpms-topbar__brand span:not(.logo) { display: none; }
  .jpms-btn-home { padding: 6px 9px; }

  /* KPI → 1 colonna su smartphone piccoli */
  .kpis { grid-template-columns: 1fr !important; }

  /* Container ulteriormente ridotto */
  .container, .app { padding-left: 10px !important; padding-right: 10px !important; }
  .panel, .jpms-card, .card { padding: 12px !important; }

  /* Hero header molto compatto */
  header.dash-hero, .container > header { padding: 12px 14px !important; }
  header h1, header.topbar h1 { font-size: 18px !important; }
  header .subtitle { font-size: 12px !important; }

  /* Chart più bassi */
  .chart-canvas-wrapper { height: 200px !important; }
  .chart-canvas-wrapper.tall { height: 260px !important; }
}

/* ============================================================
   OVERRIDE PER LE DASHBOARD ESISTENTI
   (per non riscriverle, le loro vecchie variabili puntano alle nuove)
   ============================================================ */
:root {
  /* Override variabili usate in Hub / SingleBrand / BrandDashboard */
  --primary:           var(--accent);
  --primary-dark:      var(--accent-dark);
  --primary-soft:      var(--accent-soft);
  --text:              var(--ink);
  --text-2:            var(--ink-soft);
  --border:            var(--line);
  --success:           var(--pos);
  --success-soft:      var(--pos-soft);
  --danger:            var(--neg);
  --danger-soft:       var(--neg-soft);
  --warning:           var(--warn);
  --warning-soft:      var(--warn-soft);
}