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

:root {
  --bg-0: #0a0a0c;
  --bg-1: #111116;
  --bg-2: #18181f;
  --bg-3: #22222c;
  --border: #2a2a36;
  --border-light: #35354a;
  --violet: #7c5cfc;
  --violet-dim: #5a3fd4;
  --violet-glow: rgba(124,92,252,0.18);
  --white: #f0f0f4;
  --muted: #7a7a96;
  --muted-light: #a0a0b8;
  --green: #3de89e;
  --green-dim: rgba(61,232,158,0.12);
  --red: #f05b6e;
  --red-dim: rgba(240,91,110,0.12);
  --font: 'Plus Jakarta Sans', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 230px;
}

html, body { height: 100%; background: var(--bg-0); color: var(--white); font-family: var(--font); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 32px 16px 24px;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}

.logo { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; padding: 0 8px; }
.logo-icon { font-size: 20px; color: var(--violet); }
.logo-text { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--muted); text-decoration: none;
  font-size: 13.5px; font-weight: 500; transition: all 0.18s ease;
}
.nav-item:hover { color: var(--white); background: var(--bg-3); }
.nav-item.active { color: var(--white); background: var(--violet-glow); border: 1px solid rgba(124,92,252,0.22); }
.nav-item svg { flex-shrink: 0; }

/* Link Home nella sidebar */
.nav-back { color: var(--muted); font-size: 12px; opacity: 0.7; margin-bottom: 2px; }
.nav-back:hover { opacity: 1; color: var(--white); }
.nav-divider { height: 1px; background: var(--border); margin: 6px 4px 8px; }

.sidebar-bottom { padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }

.upload-btn-side {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg-3); border: 1px solid var(--border-light);
  color: var(--muted-light); padding: 10px 14px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 0.18s; text-align: center;
}
.upload-btn-side:hover { color: var(--white); border-color: var(--violet); background: var(--violet-glow); }

/* Pulsante CSV secondario (più discreto) */
.upload-btn-secondary { opacity: 0.55; font-size: 12px; padding: 8px 14px; }
.upload-btn-secondary:hover { opacity: 1; }

/* Animazione rotazione icona aggiorna */
@keyframes spin { to { transform: rotate(360deg); } }
.upload-btn-side.spinning svg { animation: spin 0.7s linear infinite; }

.sidebar-footer { font-size: 11px; color: var(--border-light); text-align: center; margin-top: 4px; }

/* ===== MAIN ===== */
.main { margin-left: var(--sidebar-w); flex: 1; position: relative; min-height: 100vh; }

/* ===== PAGES ===== */
.page { display: none; padding: 40px 48px; }
.page.active { display: block; }

/* ===== HEADER ===== */
.header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 36px; gap: 20px; flex-wrap: wrap; }
.header-title h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.subtitle { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

.selectors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selector {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--white);
  padding: 9px 32px 9px 14px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7a96' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.18s;
}
.selector:hover, .selector:focus { border-color: var(--violet); }
.selector option { background: var(--bg-2); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--violet); color: white;
  padding: 12px 24px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.18s, transform 0.1s; border: none; text-decoration: none;
}
.btn-primary:hover { background: var(--violet-dim); transform: translateY(-1px); }

/* ===== KPI CARDS ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.kpi-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 26px 22px; position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.kpi-income::before { background: var(--green); }
.kpi-expenses::before { background: var(--red); }
.kpi-year::before { background: var(--violet); }
.kpi-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -0.8px; }
.kpi-badge {
  position: absolute; top: 22px; right: 22px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.income-badge { background: var(--green-dim); color: var(--green); }
.expense-badge { background: var(--red-dim); color: var(--red); }
.year-badge { background: var(--violet-glow); color: var(--violet); }

/* ===== SECTION LABEL ===== */
.section-label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 32px 0 14px; padding-left: 2px; }

/* ===== CHARTS ===== */
.charts-row { display: flex; gap: 16px; margin-bottom: 8px; }
.charts-row.two-col { display: grid; grid-template-columns: 1fr 1fr; }
.chart-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; flex: 1; transition: border-color 0.2s; }
.chart-card:hover { border-color: var(--border-light); }
.chart-wide { width: 100%; }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.chart-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.chart-subtitle { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.chart-wrap { position: relative; height: 220px; }
.chart-wrap-donut { height: 280px; display: flex; align-items: center; justify-content: center; }
.chart-wrap-big { height: 340px; }
.chart-stat-pill { font-size: 12px; font-weight: 600; color: var(--violet); background: var(--violet-glow); border: 1px solid rgba(124,92,252,0.25); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* ===== FILTER BAR ===== */
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tx-count { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }

/* ===== AMOUNT FILTER CARD ===== */
.amount-filter-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 20px;
}
.amount-filter-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.amount-filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--muted);
}
.amount-reset-btn {
  background: none; border: 1px solid var(--border-light);
  color: var(--muted); font-family: var(--font); font-size: 11px;
  font-weight: 600; padding: 4px 10px; border-radius: 6px;
  cursor: pointer; transition: all 0.15s; letter-spacing: 0.3px;
}
.amount-reset-btn:hover { color: var(--white); border-color: var(--violet); background: var(--violet-glow); }

.amount-filter-body {
  display: flex; align-items: center; gap: 20px;
}

/* Input numerico min/max */
.amount-input-group { display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
.amount-input-label { font-size: 11px; color: var(--muted); font-weight: 500; }
.amount-input {
  background: var(--bg-3); border: 1px solid var(--border-light);
  color: var(--white); padding: 7px 10px; border-radius: 8px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  width: 100%; outline: none; transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input:focus { border-color: var(--violet); }

/* Dual slider */
.dual-slider-wrap {
  flex: 1;
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
}
.dual-slider-track {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: var(--border-light);
  border-radius: 4px;
  pointer-events: none;
}
.dual-slider-fill {
  position: absolute;
  height: 100%;
  background: var(--violet);
  border-radius: 4px;
}
.dual-slider {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  outline: none;
  border: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--violet);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.dual-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px var(--violet-glow);
}
.dual-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--violet);
  cursor: pointer;
  pointer-events: all;
}

/* ===== TABLE ===== */
.table-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 32px; }
.tx-table { width: 100%; border-collapse: collapse; }
.tx-table thead { background: var(--bg-3); }
.tx-table th { padding: 13px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); }
.tx-table td { padding: 13px 18px; font-size: 13.5px; font-weight: 400; color: var(--muted-light); border-bottom: 1px solid var(--border); transition: color 0.15s; }
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-table tbody tr:hover td { color: var(--white); background: rgba(255,255,255,0.02); }
.tx-table td.td-desc { color: var(--white); font-weight: 500; }
.tx-table td.td-amount { font-weight: 600; font-size: 14px; }
.tx-table td.td-amount.income { color: var(--green); }
.tx-table td.td-amount.expense { color: var(--white); }
.text-right { text-align: right !important; }

/* Header ordinabili */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.15s; }
.sortable-th:hover { color: var(--white); }
.sortable-th.sort-active { color: var(--violet); }
.sort-icon { display: inline-block; margin-left: 5px; font-size: 11px; opacity: 0.5; transition: opacity 0.15s; }
.sortable-th:hover .sort-icon,
.sortable-th.sort-active .sort-icon { opacity: 1; }

/* Colonna data */
.tx-th-date { min-width: 110px; }
.td-date { white-space: nowrap; min-width: 110px; }

/* Riga totale */
.tx-total-row td { border-top: 1px solid var(--border-light) !important; border-bottom: none !important; background: var(--bg-3); padding-top: 15px !important; padding-bottom: 15px !important; }

/* Category pill */
.cat-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; background: var(--violet-glow); color: var(--violet); border: 1px solid rgba(124,92,252,0.2); }
.cat-pill.income { background: var(--green-dim); color: var(--green); border-color: rgba(61,232,158,0.2); }

/* ===== LOADING STATE ===== */
.loading-state {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--muted); font-size: 14px;
}
.loading-state.visible { display: flex; }
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border-light);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 40px;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg-2); border: 1px dashed var(--border-light);
  border-radius: var(--radius); min-width: 380px;
}
.empty-state.visible { display: flex; }
.empty-icon { font-size: 44px; color: var(--violet); margin-bottom: 20px; opacity: 0.5; }
.empty-state h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.empty-state p { color: var(--muted); font-size: 14px; max-width: 320px; line-height: 1.7; margin-bottom: 28px; }

/* ===== ERROR BANNER ===== */
.error-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(240,91,110,0.1); border: 1px solid rgba(240,91,110,0.3);
  border-radius: var(--radius-sm); padding: 12px 18px; margin: 16px 48px 0;
  font-size: 13px; color: var(--muted-light);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }

/* ===== RESPONSIVE — TABLET (max 960px) ===== */
@media (max-width: 960px) {
  .sidebar { width: 64px; padding: 24px 10px; }
  .logo-text, .sidebar-footer { display: none; }
  .nav-item span { display: none; }
  .nav-back span { display: none; }
  .upload-btn-side span { display: none; }
  .main { margin-left: 64px; }
  .page { padding: 24px 20px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .charts-row.two-col { grid-template-columns: 1fr; }
  .amount-filter-body { flex-direction: column; gap: 12px; }
  .dual-slider-wrap { width: 100%; }
}

/* ===== RESPONSIVE — MOBILE (max 600px) ===== */
@media (max-width: 600px) {
  /* Sidebar diventa bottom nav bar */
  .sidebar {
    width: 100%; height: 58px; min-height: unset;
    flex-direction: row; align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    top: auto; bottom: 0; left: 0; right: 0;
    border-right: none; border-top: 1px solid var(--border);
    z-index: 200;
  }
  .logo { display: none; }
  .nav {
    flex-direction: row; justify-content: space-around;
    align-items: center; flex: 1; gap: 0;
  }
  .nav-item {
    flex-direction: column; gap: 3px;
    padding: 6px 8px; font-size: 10px; border-radius: 10px;
    flex: 1; justify-content: center;
  }
  .nav-item span { display: block; font-size: 10px; }
  .nav-back { display: none; }
  .nav-divider { display: none; }
  .sidebar-bottom { display: none; }

  /* Main area */
  .main { margin-left: 0; padding-bottom: 68px; }
  .page { padding: 16px 14px; }

  /* Header */
  .header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .header-title h1 { font-size: 22px; }
  .selectors { width: 100%; }
  .selector { flex: 1; }

  /* KPI */
  .kpi-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
  .kpi-card { padding: 18px 16px 14px; }
  .kpi-value { font-size: 22px; }
  .kpi-label { font-size: 10px; }

  /* Charts */
  .charts-row { flex-direction: column; }
  .charts-row.two-col { grid-template-columns: 1fr; }
  .chart-card { padding: 16px; }
  .chart-wrap { height: 180px; }
  .chart-wrap-donut { height: 220px; }
  .section-label { font-size: 10px; margin: 18px 0 10px; }

  /* Filters */
  .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .filter-bar .selector { width: 100%; }
  .amount-filter-card { padding: 14px 16px; }
  .amount-filter-body { flex-direction: column; gap: 10px; }
  .dual-slider-wrap { width: 100%; }
  .amount-inputs { flex-wrap: wrap; gap: 8px; }
  .amount-input-group { flex: 1; min-width: 120px; }

  /* Tables: horizontal scroll */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tx-table { min-width: 500px; }
  .tx-table th, .tx-table td { padding: 10px 12px; font-size: 12px; }

  /* Empty / loading states */
  .empty-state { min-width: unset; width: 90%; padding: 40px 20px; }
  .loading-state { width: 90%; }

  /* Error banner */
  .error-banner { margin: 10px 14px 0; }
}



/* ===== HOME IN BOTTOM NAV (mobile) ===== */
@media (max-width: 600px) {
  .nav-back { display: none; }        /* nascondi versione desktop */
  .nav-home {
    display: flex !important;          /* mostra Home nella bottom nav */
    order: -1;                         /* primo elemento a sinistra */
  }
}