/* ═══════════════════════════════════════════
   VISION MEDIA SALES DASHBOARD
   Ändra färger här — allt uppdateras
   ═══════════════════════════════════════════ */
:root {
  --bg:        #0B1120;
  --bg2:       #111827;
  --bg3:       #1E293B;
  --border:    #1E293B;
  --text:      #F1F5F9;
  --dim:       #94A3B8;
  --muted:     #475569;
  --green:     #10B981;
  --green-bg:  rgba(16,185,129,.12);
  --amber:     #F59E0B;
  --amber-bg:  rgba(245,158,11,.12);
  --red:       #F43F5E;
  --red-bg:    rgba(244,63,94,.12);
  --cyan:      #06B6D4;
  --cyan-bg:   rgba(6,182,212,.10);
  --violet:    #8B5CF6;
  --violet-bg: rgba(139,92,246,.12);
  --blue:      #3B82F6;
  --blue-bg:   rgba(59,130,246,.12);
  --indigo:    #6366F1;
  --indigo-bg: rgba(99,102,241,.12);
  --orange:    #FB923C;
  --orange-bg: rgba(251,146,60,.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Segoe UI','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif; min-height:100vh; }

/* ─── NAV ─── */
.nav { display:flex; align-items:center; background:var(--bg2); border-bottom:1px solid var(--border); padding:0 28px; position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.nav-logo { height:28px; margin-right:36px; }
.nav-brand { font-weight:800; font-size:15px; color:var(--green); margin-right:36px; padding:14px 0; letter-spacing:.5px; display:none; }
.nav-logo[src=""] ~ .nav-brand { display:block; }
.nav-tabs { display:flex; gap:0; }
.nav-tab { padding:16px 22px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; transition:all .15s; letter-spacing:.2px; }
.nav-tab:hover { color:var(--dim); }
.nav-tab.active { color:var(--cyan); border-bottom-color:var(--cyan); background:var(--cyan-bg); font-weight:700; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.nav-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ─── LAYOUT ─── */
.page { max-width:1440px; margin:0 auto; padding:28px 28px 60px; display:none; }
.page.active { display:block; }
.page-title { font-size:24px; font-weight:800; margin-bottom:20px; }
.page-header { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }

/* ─── KPI ─── */
.kpi-grid { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.kpi { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:18px 22px; position:relative; overflow:hidden; flex:1; min-width:155px; }
.kpi-bar { position:absolute; top:0; left:0; right:0; height:3px; }
.kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); margin-bottom:8px; }
.kpi-value { font-size:26px; font-weight:800; line-height:1; }
.kpi-sub { font-size:11px; color:var(--dim); margin-top:5px; }

/* ─── SECTIONS ─── */
.section { margin-top:28px; }
.section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text); padding-bottom:8px; border-bottom:2px solid var(--cyan); display:inline-block; margin-bottom:14px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:960px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }

/* ─── CARDS ─── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:16px; }
.card-title { font-size:12px; font-weight:700; color:var(--text); margin-bottom:10px; }
.chart-h { height:270px; position:relative; }

/* ─── TABLES ─── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { background:var(--bg3); padding:10px 12px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:700; white-space:nowrap; border-bottom:1px solid var(--border); }
th.r { text-align:right; }
td { padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
td.r { text-align:right; }
td.b { font-weight:700; }
tr:hover td { background:rgba(255,255,255,.015); }
.c-green { color:var(--green); }
.c-amber { color:var(--amber); }
.c-red { color:var(--red); }
.c-cyan { color:var(--cyan); }
.c-violet { color:var(--violet); }
.c-dim { color:var(--muted); }
.c-blue { color:var(--blue); }

/* ─── BADGE ─── */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.3px; }
.badge-green { color:var(--green); background:var(--green-bg); }
.badge-amber { color:var(--amber); background:var(--amber-bg); }
.badge-red { color:var(--red); background:var(--red-bg); }
.badge-blue { color:var(--blue); background:var(--blue-bg); }
.badge-violet { color:var(--violet); background:var(--violet-bg); }

/* ─── PROGRESS BAR ─── */
.progress-wrap { background:var(--bg3); border-radius:10px; height:36px; overflow:hidden; position:relative; }
.progress-fill { height:100%; border-radius:10px; background:linear-gradient(90deg, var(--green), #34D399); display:flex; align-items:center; padding-left:14px; font-size:13px; font-weight:700; color:var(--bg); transition:width .8s ease; }
.progress-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px; }

/* ─── TEMPO CARD ─── */
.tempo-card { background:linear-gradient(135deg, rgba(6,182,212,.08), rgba(139,92,246,.08)); border:1px solid rgba(6,182,212,.2); border-radius:14px; padding:20px 24px; margin-bottom:24px; }
.tempo-grid { display:flex; gap:24px; flex-wrap:wrap; }
.tempo-item { text-align:center; }
.tempo-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--dim); margin-bottom:4px; }
.tempo-value { font-size:22px; font-weight:800; }

/* ─── CONFIG ─── */
.config-page { max-width:560px; margin:60px auto; }
.config-box { background:var(--bg2); border:1px solid var(--amber); border-radius:14px; padding:28px; margin-top:20px; }
.config-box h3 { color:var(--amber); font-size:14px; margin-bottom:12px; }
.config-input { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:10px 14px; color:var(--text); font-size:13px; margin:10px 0; outline:none; }
.config-input:focus { border-color:var(--cyan); }
.btn { border:none; border-radius:8px; padding:10px 24px; font-weight:700; font-size:13px; cursor:pointer; transition:opacity .15s; }
.btn:hover { opacity:.85; }
.btn-primary { background:var(--cyan); color:var(--bg); }
.btn-ghost { background:var(--bg3); color:var(--dim); border:1px solid var(--border); }

/* ─── SELECT ─── */
.month-select { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:6px 14px; color:var(--cyan); font-size:13px; font-weight:700; cursor:pointer; outline:none; }
.month-select option { background:var(--bg2); color:var(--text); }