/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #0f1117;
  --surface:       #1a1d27;
  --surface2:      #22263a;
  --border:        #2e3350;
  --text:          #e2e8f0;
  --text-muted:    #8892a4;
  --accent:        #6366f1;
  --accent-hover:  #818cf8;

  --match-bg:      #1a472a; --match-fg:      #69db7c;
  --mismatch-bg:   #7c2d12; --mismatch-fg:   #fb923c;
  --excel-bg:      #1e3a5f; --excel-fg:      #93c5fd;
  --pdf-bg:        #4a1d96; --pdf-fg:        #c4b5fd;
  --accessory-bg:  #2d3748; --accessory-fg:  #a0aec0;
  --excluded-bg:   #1a202c; --excluded-fg:   #718096;
  --error-bg:      #7f1d1d; --error-fg:      #fca5a5;
}

html { font-size: 15px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: var(--accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.app-header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; }
.app-header .subtitle { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.header-logo { max-height: 40px; width: auto; display: block; }
.app-header nav a {
  font-size: .85rem;
  color: var(--text-muted);
  margin-left: 1.5rem;
}
.app-header nav a:hover { color: var(--text); text-decoration: none; }

main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

/* ===== Sections ===== */
.section { display: none; }
.section.active { display: block; }

/* ===== Upload ===== */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) { .upload-grid { grid-template-columns: 1fr; } }

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 2.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--surface);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--surface2);
}
.drop-zone .icon { font-size: 2rem; margin-bottom: .5rem; }
.drop-zone .label { font-size: .85rem; color: var(--text-muted); }
.drop-zone .file-name {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--accent-hover);
  font-weight: 500;
  word-break: break-all;
}
.drop-zone input[type=file] { display: none; }
.drop-zone.loaded {
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.10);
}
.drop-zone.loaded .file-name { color: #4ade80; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }

.upload-actions { display: flex; align-items: center; gap: 1rem; }
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.spinner.active { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.status-msg { font-size: .85rem; color: var(--text-muted); }

/* ===== Progress ===== */
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.25rem;
}
.progress-header h2 { font-size: 1rem; font-weight: 600; letter-spacing: .05em; }
.timer { font-size: .95rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.progress-bar-wrap {
  background: var(--surface2);
  border-radius: 6px;
  height: 10px;
  margin-bottom: .5rem;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width .4s ease;
}
.progress-label { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.5rem; }

.phase-list { list-style: none; margin-bottom: 1.5rem; }
.phase-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem 0;
  font-size: .875rem;
  color: var(--text-muted);
}
.phase-item.done   { color: var(--text); }
.phase-item.active { color: var(--accent-hover); }
.phase-icon { width: 1.1rem; text-align: center; font-size: .8rem; }

.partial-results h3 { font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .75rem; }
.goto-report-wrap { text-align: center; margin-top: 1.75rem; }
.partial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  font-size: .82rem;
}
.partial-card .sys-name { font-weight: 600; margin-bottom: .25rem; }
.partial-card .sys-stats { color: var(--text-muted); }
.partial-card .sys-stats span { margin-right: .75rem; }

/* ===== Report ===== */
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.report-header h2 { font-size: 1rem; font-weight: 600; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem;
  margin-bottom: 2rem;
}
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
.summary-card .val {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .25rem;
}
.summary-card .lbl { font-size: .75rem; color: var(--text-muted); }
.summary-card.c-match      { border-color: var(--match-bg); }
.summary-card.c-match .val { color: var(--match-fg); }
.summary-card.c-mismatch      { border-color: var(--mismatch-bg); }
.summary-card.c-mismatch .val { color: var(--mismatch-fg); }
.summary-card.c-excel      { border-color: var(--excel-bg); }
.summary-card.c-excel .val { color: var(--excel-fg); }
.summary-card.c-pdf        { border-color: var(--pdf-bg); }
.summary-card.c-pdf .val   { color: var(--pdf-fg); }

/* ===== Accordion SYS ===== */
.accordion { margin-bottom: 2rem; }
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .5rem;
  overflow: hidden;
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.accordion-header:hover { background: var(--surface2); }
.accordion-title { font-size: .9rem; font-weight: 600; }
.accordion-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 99px;
}
.badge-match      { background: var(--match-bg);      color: var(--match-fg); }
.badge-mismatch   { background: var(--mismatch-bg);   color: var(--mismatch-fg); }
.badge-excel      { background: var(--excel-bg);      color: var(--excel-fg); }
.badge-pdf        { background: var(--pdf-bg);        color: var(--pdf-fg); }
.badge-accessory  { background: var(--accessory-bg);  color: var(--accessory-fg); }
.badge-excluded   { background: var(--excluded-bg);   color: var(--excluded-fg); }
.accordion-chevron { color: var(--text-muted); transition: transform .2s; font-size: .75rem; }
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }

.accordion-body { display: none; padding: 0 1.1rem 1.1rem; }
.accordion-item.open .accordion-body { display: block; }

/* ===== Comparison table ===== */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.comparison-table th {
  text-align: left;
  padding: .4rem .6rem;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.comparison-table td {
  padding: .45rem .6rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.comparison-table tr:last-child td { border-bottom: none; }

.row-match      td:first-child { border-left: 3px solid var(--match-fg); }
.row-mismatch   td:first-child { border-left: 3px solid var(--mismatch-fg); }
.row-solo-excel td:first-child { border-left: 3px solid var(--excel-fg); }
.row-solo-pdf   td:first-child { border-left: 3px solid var(--pdf-fg); }
.row-accessory  td:first-child { border-left: 3px solid var(--accessory-fg); }
.row-excluded   td:first-child { border-left: 3px solid var(--excluded-fg); }

.status-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}
.pill-match      { background: var(--match-bg);      color: var(--match-fg); }
.pill-mismatch   { background: var(--mismatch-bg);   color: var(--mismatch-fg); }
.pill-solo-excel { background: var(--excel-bg);      color: var(--excel-fg); }
.pill-solo-pdf   { background: var(--pdf-bg);        color: var(--pdf-fg); }
.pill-accessory  { background: var(--accessory-bg);  color: var(--accessory-fg); }
.pill-excluded   { background: var(--excluded-bg);   color: var(--excluded-fg); }

.disc-tag {
  display: inline-block;
  font-size: .65rem;
  padding: .1rem .35rem;
  border-radius: 3px;
  background: var(--mismatch-bg);
  color: var(--mismatch-fg);
  margin: .1rem .1rem 0 0;
  white-space: nowrap;
}
.conf-alta  { color: var(--match-fg); }
.conf-media { color: #fbbf24; }
.conf-bassa { color: var(--mismatch-fg); }

.notes-mismatch-cell {
  color: var(--mismatch-fg);
  font-size: .75rem;
  margin-top: .3rem;
  line-height: 1.4;
}
.notes-match-cell {
  color: var(--text-muted);
  font-size: .75rem;
  font-style: italic;
  line-height: 1.4;
}
.desc-excel { color: var(--text); }
.desc-pdf   { color: var(--text-muted); }
.qty-val    { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Mapping preview (modal-like panel) ===== */
.mapping-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.mapping-panel h3 { font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.mapping-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mapping-table th {
  text-align: left; padding: .35rem .6rem;
  color: var(--text-muted); font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.mapping-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.mapping-table tr:last-child td { border-bottom: none; }
.conf-badge {
  font-size: .7rem; font-weight: 600; padding: .12rem .4rem; border-radius: 3px;
}
.conf-badge.alta  { background: var(--match-bg);    color: var(--match-fg); }
.conf-badge.media { background: #78350f;             color: #fcd34d; }
.conf-badge.null  { background: var(--error-bg);     color: var(--error-fg); }

.mapping-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1rem;
}

/* ===== Stats page ===== */
.stats-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.stats-table th {
  text-align: left; padding: .5rem .75rem;
  color: var(--text-muted); font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.stats-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.stats-table tr:last-child td { border-bottom: none; }
.stats-table tr:hover td { background: var(--surface2); }

/* ===== Utility ===== */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.upload-title {
  font-size: 1.4rem;
  letter-spacing: .04em;
  text-align: center;
  margin-bottom: 1.5rem;
}
/* h2 nei pannelli progress/report — stessa dimensione di upload-title */
.section-h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-transform: uppercase;
}
/* Sottotitolo sistema nella tabella mapping */
.sys-sublabel {
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: .15rem;
}

/* ===== Stima tempi ===== */
.time-estimate-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.te-icon { font-size: 1rem; }

/* ===== Filtri report ===== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 .75rem;
}
.filter-label { font-size: .75rem; color: var(--text-muted); margin-right: .25rem; }
.filter-btn {
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-btn:hover  { border-color: var(--accent-hover); }

/* Righe nascoste dai filtri */
#section-report.hide-match       .row-match       { display: none; }
#section-report.hide-mismatch    .row-mismatch    { display: none; }
#section-report.hide-solo-excel  .row-solo-excel  { display: none; }
#section-report.hide-solo-pdf    .row-solo-pdf    { display: none; }
#section-report.hide-accessory   .row-accessory   { display: none; }
#section-report.hide-excluded    .row-excluded    { display: none; }

/* Colonna Note match nascosta di default */
#section-report.hide-notes-match .col-notes-match { display: none; }

/* Separatore nella filter-bar */
.filter-separator { flex-basis: 100%; height: 0; display: none; }
@media (max-width: 600px) { .filter-separator { display: block; } }

/* Stile distinto per il tasto Note match */
.filter-btn.notes-toggle {
  border-style: dashed;
  margin-left: .25rem;
}
.filter-btn.notes-toggle.active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--text-muted);
  border-style: solid;
}

/* ===== Pannello costi ===== */
.cost-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.cost-panel:empty { display: none; }
.cost-block { min-width: 140px; }
.cost-block .cost-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-hover);
  line-height: 1;
  margin-bottom: .2rem;
}
.cost-block .cost-lbl { font-size: .75rem; color: var(--text-muted); }
.cost-detail { font-size: .75rem; color: var(--text-muted); line-height: 1.7; }
.cost-detail strong { color: var(--text); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }