/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:    #f0f2f5;
  --card:  #ffffff;
  --entry: #e8ecf1;
  --or:    #e87722;
  --gr:    #2ea043;
  --rd:    #da3633;
  --pri:   #1a1a2e;
  --sec:   #4a4a6a;
  --navy:  #2a5298;
}
body { background: var(--bg); color: var(--pri); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; }

/* ── Topnav ───────────────────────────────────────────────────────── */
.topnav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #1a1a2e; padding: 8px 14px;
  border-bottom: 2px solid var(--or); position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--or); font-size: 14px; margin-right: 10px; white-space: nowrap; }
.brand .brand-sparkle { color: var(--or); font-size: 16px; line-height: 1; }
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-btn { padding: 5px 12px; border-radius: 6px; text-decoration: none; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; transition: background .15s; }
.nav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-btn.active { background: var(--or); color: #fff; }
.nav-date { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; }
/* ── CONVENZIONE NAVIGAZIONE UNIFICATA (allineata a pt_nav.css) ─── */
.nav-home-btn,.nav-menu-btn,.nav-back-btn,.nav-close-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid transparent;border-radius:6px;font-size:12px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;}
.nav-home-btn:hover,.nav-menu-btn:hover,.nav-back-btn:hover,.nav-close-btn:hover{opacity:.9}
.nav-home-btn,.nav-menu-btn{background:#e67800;color:#fff;border-color:#e67800;margin-left:auto;padding:6px 12px;min-width:40px;justify-content:center}
.nav-home-btn:hover,.nav-menu-btn:hover{background:#c96800}
.nav-back-btn{background:#eceff3;color:#1a1a2e;border-color:#d4d9e0}
.nav-back-btn:hover{background:#e0e4ea}
.nav-close-btn{background:#5a6072;color:#fff;border-color:#5a6072}
.nav-close-btn:hover{background:#4a4f5e}
.nav-back-btn .nav-ic,.nav-close-btn .nav-ic,.nav-home-btn .nav-ic,.nav-menu-btn .nav-ic{font-size:16px;font-weight:800;line-height:1}
.nav-ctrls{display:inline-flex;align-items:center;gap:8px;margin-left:auto}

/* ── Main ─────────────────────────────────────────────────────────── */
main { padding: 12px 16px; max-width: 1600px; margin: 0 auto; }

/* ── Hub ──────────────────────────────────────────────────────────── */
.hub-container { text-align: center; padding: 40px 20px; }
.hub-title { font-size: 24px; color: var(--pri); margin-bottom: 6px; }
.hub-sub   { color: var(--sec); margin-bottom: 32px; font-size: 13px; }
.hub-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; max-width: 960px; margin: 0 auto; }
.hub-card  { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 10px; text-decoration: none; color: #fff; transition: transform .15s, box-shadow .15s; }
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.hub-icon  { font-size: 28px; margin-bottom: 8px; }
.hub-label { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.hub-desc  { font-size: 11px; opacity: .85; }
.card-blue   { background: linear-gradient(135deg, #2a5298, #3a6ab0); }
.card-green  { background: linear-gradient(135deg, #1a4a1a, #256a25); }
.card-orange { background: linear-gradient(135deg, #8a3a00, #c55a00); }
.card-navy   { background: linear-gradient(135deg, #1a2a4a, #2a4a7a); }

/* ── View header & toolbar ────────────────────────────────────────── */
.view-header { background: var(--card); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.view-header h2 { font-size: 15px; color: var(--or); margin-bottom: 8px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-label { font-size: 12px; font-weight: 700; color: var(--sec); }
.mode-group, .action-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.radio-btn { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; padding: 4px 8px; border-radius: 5px; }
.radio-btn:hover { background: var(--entry); }
.radio-btn input { accent-color: var(--or); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn { padding: 6px 14px; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: filter .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); }
.btn:active { filter: brightness(.9); }
.btn-navy   { background: var(--navy);   color: #fff; }
.btn-orange { background: #5a2a00;       color: #fff; }
.btn-red    { background: #8a1a00;       color: #fff; }
.btn-green  { background: #1a4a1a;       color: #fff; }
.btn-grey   { background: #c5cad3;       color: var(--pri); }
.input-sm   { height: 30px; padding: 0 8px; border: 1px solid #ccd; border-radius: 6px; font-size: 12px; width: 130px; background: var(--entry); }

/* ── Status / Progress ────────────────────────────────────────────── */
.status-bar  { min-height: 20px; font-size: 11px; padding: 3px 6px; border-radius: 4px; margin: 4px 0; }
.status-info { color: var(--sec); }
.status-ok   { color: var(--gr); }
.status-warn { color: var(--or); }
.status-error{ color: var(--rd); }
.progress-wrap { height: 5px; background: var(--entry); border-radius: 3px; overflow: hidden; margin: 2px 0 6px; }
.progress-bar  { height: 100%; background: var(--or); transition: width .3s; }
.hidden { display: none !important; }

/* ── Note / YTD bar ───────────────────────────────────────────────── */
.note-bar { font-size: 11px; color: var(--sec); padding: 2px 6px; }
.ytd-bar  { background: var(--card); border-left: 3px solid var(--or); padding: 6px 12px; margin: 4px 0; border-radius: 0 6px 6px 0; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.ytd-line  { line-height: 1.35; }
.ytd-label { font-weight: 700; color: var(--sec); }
.ytd-val   { font-weight: 700; font-size: 15px; }
.ytd-delta { margin-left: 8px; font-weight: 700; }

/* ── Tables ───────────────────────────────────────────────────────── */
.scroll-x { overflow-x: auto; }
.report-table { border-collapse: collapse; width: 100%; background: var(--card); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); font-size: 12px; }
.report-table th { background: #d0d5dd; color: var(--pri); font-size: 11px; font-weight: 700; padding: 8px 6px; text-align: right; white-space: nowrap; }
.report-table th:first-child { text-align: left; }
.report-table td { padding: 6px 6px; border-bottom: 1px solid #eee; }
.report-table tr:last-child td { border-bottom: none; }
.report-table tr.alt td { background: #f4f6fb; }
.year-hdr  { text-align: center !important; color: #fff !important; }
.plus-table .year-hdr-prev { background: #4a7fb8 !important; }
.plus-table .year-hdr-cur  { background: #6a9fd8 !important; }
.plus-table .yr-start { border-left: 3px solid #6a9fd8; }
.plus-table .yr-end   { border-right: 4px solid #e87722; }
.plus-table .yr-prev  { background: rgba(74, 127, 184, 0.07); }
.plus-table .yr-cur   { background: rgba(106, 159, 216, 0.10); }
.plus-table tr.alt .yr-prev { background: rgba(74, 127, 184, 0.12); }
.plus-table tr.alt .yr-cur  { background: rgba(106, 159, 216, 0.15); }
.plus-table .totale-row .yr-prev,
.plus-table .totale-row .yr-cur { background: rgba(232, 119, 34, 0.08); }
.plus-table .yoy-hdr,
.plus-table .yoy-col { border-left: 3px solid #b8c5d6; background: #fafbfc; }
.plus-table th,
.plus-table td { padding: 5px 4px; font-size: 11px; }
.plus-table th { font-size: 10px; padding: 6px 4px; }
.plus-table .pct-col { text-align: center !important; min-width: 48px; max-width: 56px; }
.plus-table .mese-cell { max-width: 88px; font-size: 11px; }
.view-footer-bar {
  display: flex; gap: 8px; padding: 10px 14px; margin-top: 8px;
  background: var(--card); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.btn-green { background: #2a4a2a; color: #fff; border: none; }
.btn-green:hover { background: #3a6a2a; }
.plus-hdr  { background: #3a7a3a !important; color: #fff !important; }
.card-hdr  { background: var(--navy) !important; color: #fff !important; }
.diff-hdr  { background: #5a4a2a !important; color: #fff !important; }
.mese-cell { text-align: left; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mese-cell:hover { color: var(--or); }
.num    { text-align: right; font-variant-numeric: tabular-nums; }
.bold   { font-weight: 700; }
.totale-row td { font-weight: 700; border-top: 2px solid var(--or); }
.gr  { color: var(--gr); }
.or  { color: var(--or); }
.rd  { color: var(--rd); }
.no-data { color: var(--sec); padding: 20px; text-align: center; }

/* ── Ordini table specifics ───────────────────────────────────────── */
.ordini-table { font-size: 11px; }
.ordini-table td { padding: 5px 5px; }
.mg-good td:nth-child(9) { color: var(--gr); font-weight: 700; }
.mg-ok   td:nth-child(9) { color: #f39c12;   font-weight: 600; }
.mg-low  td:nth-child(9) { color: var(--rd);  font-weight: 600; }
.azienda { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artwork { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono    { font-family: monospace; font-size: 11px; }
.center  { text-align: center; }

/* ── Month tabs ───────────────────────────────────────────────────── */
.month-bar  { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; margin: 4px 0; }
.month-tab  { padding: 4px 10px; border: 1px solid #d0d5dd; border-radius: 5px; background: transparent; cursor: pointer; font-size: 11px; color: var(--sec); font-weight: 600; }
.month-tab:hover  { background: var(--entry); }
.month-tab.active { background: #dce1e8; color: var(--or); }

/* ── Stats row ────────────────────────────────────────────────────── */
.stats-row  { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.stat-card  { background: var(--card); border-radius: 8px; padding: 10px 14px; flex: 1; min-width: 120px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.stat-label { font-size: 10px; font-weight: 700; color: var(--sec); }
.stat-val   { font-size: 20px; font-weight: 700; color: var(--pri); }

/* ── Search ───────────────────────────────────────────────────────── */
.search-row   { margin: 4px 0 6px; }
.search-input { width: 420px; max-width: 100%; padding: 7px 12px; border: 1px solid #ccd; border-radius: 7px; font-size: 12px; background: var(--entry); }

/* ── Table area ───────────────────────────────────────────────────── */
.table-area { overflow: visible; }

/* ── Riepilogo grid ───────────────────────────────────────────────── */
.riepilogo-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.riep-card { background: var(--card); border-radius: 8px; padding: 12px 16px; min-width: 180px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.07); transition: box-shadow .15s; }
.riep-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.13); }
.riep-totale { background: var(--navy); color: #fff; }
.riep-title { font-size: 11px; font-weight: 700; color: var(--sec); margin-bottom: 4px; }
.riep-totale .riep-title { color: #aac; }
.riep-fat   { font-size: 18px; font-weight: 700; color: var(--pri); }
.riep-totale .riep-fat { color: #fff; }
.riep-mar   { font-size: 11px; margin-top: 2px; }
.riep-cnt   { font-size: 10px; color: var(--sec); }

/* ── Toast ────────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 20px; right: 20px; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 999; max-width: 360px; }
.toast.info  { background: var(--navy); color: #fff; }
.toast.ok    { background: var(--gr);   color: #fff; }
.toast.error { background: var(--rd);   color: #fff; }