/* === reset & base === */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg: #0f0f1a; --surface: #1a1a2e; --surface2: #252540;
  --text: #e0e0eb; --text2: #9090b0; --accent: #f0a500;
  --accent2: #e67e00; --green: #2ecc71; --red: #e74c3c;
  --radius: 12px; --radius-sm: 8px;
}
html { font-size:16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg); color: var(--text); min-height:100vh;
  line-height: 1.5; -webkit-tap-highlight-color: transparent;
}
#app { max-width:480px; margin:0 auto; min-height:100vh; position:relative; }

/* === utilities === */
.view { display:block; }
.view.hidden { display:none; }
.content { padding:16px 16px 80px; }
.hidden { display:none!important; }

/* === login === */
.login-box { padding:60px 32px; text-align:center; }
.login-box h1 { font-size:2rem; margin-bottom:8px; color:var(--accent); }
.login-box .sub { color:var(--text2); margin-bottom:32px; }
.login-box input { margin-bottom:12px; }

/* === topbar === */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--surface);
  border-bottom:1px solid #2a2a42; position:sticky; top:0; z-index:10;
}
.topbar .brand { font-weight:700; font-size:1.1rem; }

/* === tabbar === */
.tabbar {
  display:flex; position:fixed; bottom:0; left:0; right:0; max-width:480px;
  margin:0 auto; background:var(--surface);
  border-top:1px solid #2a2a42; z-index:20; padding:4px 0;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.tabbar .tab {
  flex:1; background:none; border:none; color:var(--text2); font-size:0.7rem;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; cursor:pointer;
}
.tabbar .tab span { font-size:0.65rem; }
.tabbar .tab.active { color:var(--accent); }

/* === buttons === */
.btn {
  display:inline-block; padding:12px 20px; border:none; border-radius:var(--radius-sm);
  font-size:1rem; font-weight:600; cursor:pointer; text-align:center;
  transition: background .15s;
}
.btn-block { display:block; width:100%; }
.btn-primary { background:var(--accent); color:#1a1a2e; }
.btn-primary:hover { background:var(--accent2); }
.btn-outline { background:transparent; border:2px solid var(--accent); color:var(--accent); }
.btn-danger { background:var(--red); color:#fff; }
.btn-sm { padding:6px 14px; font-size:0.85rem; }
.big { padding:16px 20px; font-size:1.1rem; margin-bottom:16px; }
.btn-icon { background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:4px 8px; }

/* === inputs === */
input, select, textarea {
  width:100%; padding:12px 14px; margin-bottom:8px; border:1px solid #3a3a5a;
  border-radius:var(--radius-sm); background:var(--surface); color:var(--text);
  font-size:1rem; font-family:inherit; appearance:none;
}
input:focus, select:focus { border-color:var(--accent); outline:none; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239090b0' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
label { display:block; margin:12px 0 4px; color:var(--text2); font-size:0.85rem; font-weight:600; }

/* === stats === */
.stats-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:20px 0; }
.stat { background:var(--surface); border-radius:var(--radius); padding:16px 8px; text-align:center; }
.stat .num { font-size:1.8rem; font-weight:700; color:var(--accent); }
.stat .lbl { font-size:0.75rem; color:var(--text2); margin-top:2px; }

/* === lists === */
.list { display:flex; flex-direction:column; gap:8px; }
.list-item { background:var(--surface); border-radius:var(--radius); padding:14px; cursor:pointer; transition: background .15s; }
.list-item:hover { background:var(--surface2); }
.list-item .li-title { font-weight:600; }
.list-item .li-meta { font-size:0.8rem; color:var(--text2); margin-top:2px; }
.list-item .li-right { font-size:0.9rem; font-weight:600; }

/* === chips === */
.chip { display:inline-block; padding:6px 14px; border:1px solid #3a3a5a; border-radius:20px; background:transparent; color:var(--text2); font-size:0.8rem; cursor:pointer; margin:0 4px 4px 0; }
.chip.active { background:var(--accent); color:#1a1a2e; border-color:var(--accent); font-weight:600; }
.filters { margin:12px 0 16px; }

/* === wizard === */
.progress { height:4px; background:var(--surface2); border-radius:2px; margin-bottom:20px; }
.progress > div { height:100%; background:var(--accent); border-radius:2px; transition:width .3s; }
.wstep h2 { margin-bottom:16px; font-size:1.3rem; }
.qty-row { display:flex; gap:8px; align-items:center; }
.qty-row input { flex:1; }
.qty-row .unit { font-size:1rem; color:var(--text2); padding:12px 0; min-width:30px; }
.or-divider { text-align:center; color:var(--text2); margin:16px 0; font-size:0.85rem; }
.or-divider::before, .or-divider::after { content:' ── '; color:#3a3a5a; }

/* === quote detail === */
.quote-summary { background:var(--surface); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.quote-summary h2 { font-size:1.2rem; margin-bottom:12px; }
.quote-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #2a2a42; font-size:0.9rem; }
.quote-row.total { font-weight:700; font-size:1.1rem; color:var(--accent); border:none; margin-top:8px; }
.status-badge { display:inline-block; padding:4px 10px; border-radius:12px; font-size:0.75rem; font-weight:600; }
.status-draft { background:#444; color:#aaa; }
.status-sent { background:#2980b9; color:#fff; }
.status-accepted { background:var(--green); color:#fff; }
.status-rejected { background:var(--red); color:#fff; }
.actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.actions .btn { flex:1; min-width:120px; }

/* === settings === */
.settings-menu { display:flex; flex-direction:column; gap:4px; }
.setting-item {
  display:block; width:100%; padding:16px; background:var(--surface);
  border:none; color:var(--text); text-align:left; font-size:1rem;
  border-radius:var(--radius-sm); cursor:pointer; font-family:inherit;
}
.setting-item:hover { background:var(--surface2); }

/* === settings subview forms === */
.settings-form { display:flex; flex-direction:column; gap:4px; }
.settings-form label { display:block; margin:12px 0 4px; font-size:0.85rem; color:var(--text2); font-weight:600; }
.settings-form input, .settings-form select { margin-bottom:0; }
.section-title { font-size:1rem; font-weight:700; margin:20px 0 8px; padding-bottom:8px; border-bottom:1px solid #2a2a42; }

/* === toast === */
.toast {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%);
  background:var(--surface2); color:var(--text); padding:12px 24px;
  border-radius:24px; font-size:0.9rem; z-index:100; box-shadow:0 4px 20px rgba(0,0,0,0.5);
  transition:opacity .3s;
}
.toast.hidden { opacity:0; pointer-events:none; }

/* === empty state === */
.empty { text-align:center; padding:40px 16px; color:var(--text2); }
.empty .emoji { font-size:3rem; margin-bottom:12px; }

/* === error === */
.error { background:#3a1010; color:var(--red); padding:12px; border-radius:var(--radius-sm); margin-top:12px; }

/* === responsive === */
@media (max-width:360px) {
  .stat .num { font-size:1.4rem; }
  .btn { font-size:0.95rem; padding:10px 16px; }
}
/* === nuovi stili v2 === */
.summary-card { background:var(--surface); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.summary-card .sm { font-size:0.85rem; color:var(--text2); margin-bottom:12px; }
.chip-row { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:var(--surface2); border-radius:8px; margin-bottom:4px; font-size:0.85rem; }
.val { font-size:0.8rem; color:var(--text2); margin-top:8px; }
.btn-success { background:var(--green); color:#fff; }