/* ============================================================
   AIrticles — global_static/css/base.css
   Stili globali: variabili, reset, topbar, sidebar, layout,
   animazioni, status badges, utility classes.
   Presente in OGNI pagina tramite base.html.
============================================================ */

:root {
  --bg: #0f0f0f; --bg2: #161616; --bg3: #1e1e1e; --bg4: #242424;
  --border: #2a2a2a; --border2: #333;
  --text: #e8e4dc; --text2: #9a9488; --text3: #5c584f;
  --accent: #c9a84c; --accent2: #e8c97a;
  --accent-dim: rgba(201,168,76,0.12); --accent-dim2: rgba(201,168,76,0.06);
  --green: #4caf82; --green-dim: rgba(76,175,130,0.12);
  --red: #e05c5c; --red-dim: rgba(224,92,92,0.12);
  --blue: #5c9ae0; --blue-dim: rgba(92,154,224,0.12);
  --purple: #a07cd4; --purple-dim: rgba(160,124,212,0.12);
  --radius: 8px; --radius2: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* ── TOPBAR ── */
.topbar { display:flex; align-items:center; padding:0 20px; height:52px; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; position:relative; z-index:10; gap:0; }
.logo { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--accent); letter-spacing:-0.5px; margin-right:28px; flex-shrink:0; }
.logo span { color:var(--text2); font-weight:400; font-size:13px; margin-left:8px; font-family:'DM Sans',sans-serif; }
.nav-tabs { display:flex; gap:2px; flex:1; }
.nav-tab { padding:6px 14px; border-radius:6px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; transition:all .15s; border:1px solid transparent; white-space:nowrap; }
.nav-tab:hover { color:var(--text); background:var(--bg3); }
.nav-tab.active { color:var(--accent); background:var(--accent-dim); border-color:rgba(201,168,76,0.2); }
.topbar-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.stat-pill { display:flex; align-items:center; gap:6px; padding:4px 10px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; font-size:12px; color:var(--text2); }
.stat-pill strong { color:var(--text); font-weight:500; }
.stat-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.ollama-status { color:var(--green); }

/* ── LAYOUT ── */
.app-body { display:flex; flex:1; overflow:hidden; }

/* ── SIDEBAR ── */
.sidebar { width:210px; flex-shrink:0; border-right:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; overflow-y:auto; padding:14px 0; }
.sidebar-section { padding:0 10px; margin-bottom:20px; }
.sidebar-label { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); padding:0 8px; margin-bottom:5px; }
.sidebar-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:var(--text2); cursor:pointer; transition:all .15s; justify-content:space-between; }
.sidebar-item:hover { background:var(--bg3); color:var(--text); }
.sidebar-item.active { background:var(--accent-dim); color:var(--accent); }
.si-left { display:flex; align-items:center; gap:8px; overflow:hidden; }
.si-left span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-count { font-size:11px; padding:1px 7px; background:var(--bg3); border-radius:10px; color:var(--text3); font-family:'DM Mono',monospace; flex-shrink:0; }
.sidebar-item.active .sidebar-count { background:rgba(201,168,76,0.15); color:var(--accent); }
.cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sidebar-add { display:flex; align-items:center; gap:6px; padding:5px 10px; font-size:12px; color:var(--text3); cursor:pointer; border-radius:6px; transition:all .15s; }
.sidebar-add:hover { color:var(--accent); background:var(--accent-dim2); }

/* ── CONTENT AREA ── */
.content { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.view { display:none; flex-direction:column; height:100%; }
.view.active { display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── STATUS BADGES (usati in più views) ── */
.status-badge { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:500; }
.status-unread { background:var(--accent-dim); color:var(--accent); }
.status-read { background:var(--green-dim); color:var(--green); }
.status-reading { background:var(--blue-dim); color:var(--blue); }

/* ── SOURCE BADGES ── */
.ri-source { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; }
.src-wa { background:var(--green-dim); color:var(--green); }
.src-md { background:var(--blue-dim); color:var(--blue); }

/* ── UTILITY CLASSES ── */
.btn-primary { padding:8px 16px; background:var(--accent); border:none; border-radius:var(--radius); font-size:13px; font-weight:500; color:#0f0f0f; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:6px; transition:opacity .15s; }
.btn-primary:hover { opacity:.9; }
.btn-outline { padding:7px 14px; background:transparent; border:1px solid var(--border2); border-radius:var(--radius); font-size:13px; color:var(--text2); cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; }
.btn-outline:hover { color:var(--text); border-color:var(--text2); }
.btn-sm { padding:6px 12px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; font-family:'DM Sans',sans-serif; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); transition:all .15s; display:flex; align-items:center; gap:4px; }
.btn-sm:hover { color:var(--text); }
.btn-sm.primary { background:var(--accent-dim); border-color:rgba(201,168,76,0.3); color:var(--accent); }
.btn-sm.danger { background:var(--red-dim); border-color:rgba(224,92,92,0.3); color:var(--red); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── ONBOARDING TOUR ── */
#onboarding-overlay { position:fixed; top:0; left:0; width:100%; height:100%; z-index:10000; pointer-events:auto; transition:opacity .3s ease; }
#tour-spotlight { position:absolute; z-index:2; border-radius:var(--radius); box-shadow:0 0 0 9999px rgba(0,0,0,0.72); background:transparent; transition:all .4s cubic-bezier(.4,0,.2,1); pointer-events:none; }
#tour-tooltip { position:absolute; z-index:3; width:280px; background:var(--bg2); border:1px solid rgba(201,168,76,0.25); border-radius:var(--radius2); padding:1rem 1.2rem; box-shadow:0 10px 40px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.08); animation:tourFadeIn .3s ease; color:var(--text); }
@keyframes tourFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
#tour-tooltip-title { font-size:.9rem; font-weight:600; color:var(--accent); margin-bottom:5px; }
#tour-tooltip-body { font-size:.8rem; color:var(--text2); line-height:1.55; margin-bottom:12px; }
.tour-btn { padding:4px 12px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; border:1px solid var(--border2); background:var(--bg3); color:var(--text2); }
.tour-btn:hover { color:var(--text); border-color:var(--text2); }
.tour-btn-primary { background:var(--accent-dim); border-color:rgba(201,168,76,0.3); color:var(--accent); }
.tour-btn-primary:hover { background:rgba(201,168,76,0.2); }
.tour-btn-link { background:none; border:none; color:var(--text3); font-size:11px; padding:2px 4px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:color .15s; }
.tour-btn-link:hover { color:var(--accent); }
#tour-step-indicator { font-size:11px; color:var(--text3); }