:root{
  --bg-forest: #1b3b1a;    /* verde bosco */
  --red-dark: #8b0000;     /* rosso scuro per tabella principale */
  --white: #ffffff;
  --muted: rgba(255,255,255,0.08);
  --accent: #f5d142;       /* giallo chiaro */
  --btn-border: #4a2500;   /* bordo marrone scuro */
}

/* Layout generale */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Poppins", Arial, sans-serif;
  background: var(--bg-forest);
  color: var(--white);
  padding:18px;
}
/* Titolo principale della pagina */
header h1 {
  color: var(--accent);
  margin: 0 0 16px 0;
  text-align: center;
  font-size: 3rem;   /* pił grande e dominante */
  font-weight: 900;  /* molto in grassetto */
}

/* Titoli delle tabelle principali */
.table-container.main-table h3 {
  color: var(--accent);
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 2rem;    /* pił grande per evidenziare */
  font-weight: 900;
}

/* Titoli delle tabelle piccole (TIPO, MARCA) */
.table-container.small h3 {
  color: var(--accent);
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.6rem;  /* leggermente pił piccolo rispetto alla tabella principale */
  font-weight: 800;
}

header h1,
.table-container h2 {
  color: var(--accent);   /* giallo chiaro */
  text-align: center;
  font-weight: 800;
}

#contatore-articoli {
  color: white !important;       /* forza il colore bianco */
  font-weight: bold !important;  /* forza il grassetto */
  font-size: 25px !important;  
  text-align: center;  /* forza la dimensione 25px */
  margin-top: 10px;              /* distanza dalla tabella */
}

header h1{
  color: var(--accent);
  margin: 0 0 16px 0;
  text-align: center;
  font-size: 40px;   /* aumenta la dimensione del font */
  font-weight: 800;    /* rende il titolo in grassetto */
}
.table-container h3 {
  color: var(--accent); /* giallo */
  text-align: center;
  margin-top: 0;
  margin-bottom: 8px;
}
 /* rende il titolo in grassetto */
}
.title-line {
  border: none;
  height: 4px;           /* spessore linea */
  background-color: var(--accent); /* giallo */
  margin: 12px 0;        /* spazio sopra e sotto */
  width: 100%;           /* tutta la larghezza della pagina */
}
/* Controls */
.controls{
  margin-bottom: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}

/* Export controls */
.export-controls{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

/* filtro container */
.filtro-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background: rgba(255,255,255,0.06);
  border-radius:8px;
}

.filtro-sinistra{
  display:flex;
  align-items:center;
  gap:10px;
}

.filtro-sinistra label{
  color:#000;
  font-weight:700;
  background: var(--accent);
  padding:6px 8px;
  border-radius:6px;
}

.filtro-sinistra input, .filtro-sinistra select{
  background: rgba(255,255,255,0.95);
  color:#000;
  border:2px solid var(--btn-border);
  padding:6px 8px;
  border-radius:6px;
  min-width:140px;
}

.filtro-destra{
  display:flex;
  gap:10px;
  
}

/* Bottoni */
button{
  background: var(--accent);
  color: #000;
  border:2px solid var(--btn-border);
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}

button:hover{ background:#ffea6b; transform:translateY(-1px); }
#btn-carica{ background:var(--accent); }
#btn-reset{ background:#ff6f61; color:#fff; border-color:#b33a2a; }

/* Table containers */
.table-container{
  padding:12px;
  border-radius:10px;
  margin: 10px 0;
}

/* Main table styling (rosso scuro) */
.table-container.main-table{
  background: var(--red-dark);
  color: var(--white);
}

.table-container.main-table h2{
  margin-top:0;
  font-size:22px;
  color: var(--white);
}

/* small tables */
.table-small-row{
  display:flex;
  gap:14px;
  margin-top:12px;
  flex-wrap:wrap;
}

.table-container.small{
  background: rgba(0,0,0,0.12);
  width: 100%;
  max-width: 420px;
  color: var(--white);
}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
}

thead th{
  text-align:center;
  padding:8px;
  font-weight:800; /* intestazioni in grassetto */
}

tbody td{
  padding:6px;
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;
}

/* inputs/selects inside tables */
table input[type="text"],
table input[type="date"],
table select{
  width:100%;
  padding:6px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.1);
  background: #fff;
  color:#000;
  box-sizing:border-box;
}

/* small icon buttons */
.info-btn, .del-btn {
  background: transparent;
  border: none;
  font-size:18px;
  cursor:pointer;
  color:var(--white);
}

.info-btn:hover{ color: #ffea6b; }
.del-btn{ color:#ffdede; }

/* responsive */
@media (max-width:900px){
  .filtro-sinistra{flex-wrap:wrap;}
  .table-small-row{flex-direction:column;}
  .table-container.small{max-width:100%;}
}
/* Riquadro verde bosco per le tabelle piccole */
.table-container.small {
  background-color: #1f4d1f; /* verde bosco leggermente pił chiaro */
  border: 2px solid #356635; /* bordo verde pił scuro per evidenziare il riquadro */
  border-radius: 10px;        /* angoli arrotondati */
  padding: 12px;              /* spazio interno per "distanziare" la tabella dal bordo */
}
/* Input e select nelle tabelle: font pił grande e in grassetto */
table input[type="text"],
table input[type="date"],
table select {
  font-size: 22px;       /* aumenta la dimensione del font */
  font-weight: 700;      /* grassetto */
  padding: 8px;          /* un po pił di spazio interno */
}

/* Intestazioni tabelle: leggermente pił grandi e spesse */
thead th {
  font-size: 16px;       /* aumenta dimensione font */
  font-weight: 800;      /* grassetto extra */
  padding: 10px;         /* pił spazio verticale */
}
/* Pulsanti INFO e ELIMINA pił visibili */
.info-btn, .del-btn {
  background: var(--accent); /* giallo chiaro */
  color: #000;               /* testo scuro */
  font-weight: 700;          /* grassetto */
  border-radius: 4px;        /* leggermente arrotondati */
  padding: 4px 6px;          /* pił visibili */
}

.info-btn:hover, .del-btn:hover {
  background: #ffea6b;       /* leggero cambio colore al passaggio del mouse */
  transform: translateY(-1px);
}