/* Reference-like dark dashboard CSS, adapted for local CSV dashboard */
:root{
  --bg:#0b0f1a;
  --surface:#131929;
  --card:#1a2236;
  --card2:#1f2a42;
  --accent:#4f8ef7;
  --accent2:#7c5cfc;
  --green:#22d17a;
  --red:#f7546a;
  --yellow:#f7c948;
  --cyan:#22d4d4;
  --text:#e8edf7;
  --muted:#6b7a99;
  --border:rgba(79,142,247,0.15);
  --glow:rgba(79,142,247,0.25);
}
*{box-sizing:border-box}
body{font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:var(--bg); color:var(--text); margin:0; padding:24px}
.wrapper,.container{max-width:1280px;margin:0 auto}
.container{padding:12px}

.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 0 20px var(--glow)}
.logo-text h1{font-size:20px;margin:0;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-text p{margin:0;color:var(--muted);font-size:12px}

.period-bar{display:flex;gap:12px;justify-content:center;margin-bottom:20px}
.period-btn{padding:10px 28px;border-radius:50px;border:1.5px solid var(--border);background:var(--card);color:var(--muted);font-weight:700;cursor:pointer}
.period-btn.active{border-color:transparent;color:#fff;box-shadow:0 6px 24px var(--glow)}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;position:relative;overflow:hidden}
.kpi-card .kpi-label{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px}
.kpi-card .kpi-value{font-size:26px;font-weight:800}
.kpi-card .kpi-unit{font-size:12px;color:var(--muted);margin-top:6px}
.kpi-card.blue::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:12px}
.kpi-card.green::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--green);border-radius:12px}
.kpi-card.yellow::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--yellow);border-radius:12px}
.kpi-card.red::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--red);border-radius:12px}
.kpi-card.purple::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent2);border-radius:12px}

.charts-row{display:grid;grid-template-columns:1fr 380px;gap:20px;margin-bottom:20px}
@media(max-width:900px){.charts-row{grid-template-columns:1fr}}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.chart-wrap{position:relative}
.chart-wrap canvas{width:100%!important}

.table-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;overflow-x:auto}
.table-card table{width:100%;border-collapse:collapse;font-size:14px}
.table-card thead{background:var(--card2)}
.table-card th{padding:12px 14px;text-align:right;color:var(--muted);font-weight:700;font-size:12px}
.table-card td{padding:12px 14px;border-bottom:1px solid rgba(79,142,247,0.06);color:var(--text)}
.table-card tr:hover td{background:rgba(79,142,247,0.03)}

.footer{margin-top:24px;text-align:center;color:var(--muted);font-size:13px}

/* Guide panel */
.guide-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;background:var(--card2);border-radius:12px;padding:10px 14px;color:var(--accent2);border:1px solid rgba(124,92,252,0.18)}
.guide-panel{display:none;background:var(--card);border-radius:12px;padding:18px;margin-top:12px;margin-bottom:18px}
.guide-panel.show{display:block}

/* responsive */
@media(max-width:700px){.kpi-row{grid-template-columns:repeat(2,1fr)}.period-bar{flex-wrap:wrap;justify-content:center}.chart-card{padding:12px}}

/* RTL forces */
html[dir='rtl']{direction:rtl}