/* ============================================================================
   MGIoT — Dashboard home (لوحة التحكم) 2026 layout
   Matches the approved concept: welcome header, KPI row, activity chart,
   financial donut, recent-installations panel, quick-stats strip.
   Theme-aware: surfaces/text use --mg2-* vars so the page flips with dark mode.
   Scoped under #viewOverview. Visual + layout only; numbers come from real data.
   ========================================================================== */

#viewOverview .mg-page{ display:flex; flex-direction:column; gap:18px; }

/* ── Welcome header (always dark navy — premium banner) ─────────────────── */
#viewOverview .ov-welcome{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(120deg,#081D39 0%,#0A2D5E 55%,#0A58CA 140%);
  border:1px solid rgba(0,194,255,.20);
  border-radius:20px; padding:22px 24px;
  box-shadow:0 16px 40px rgba(8,29,57,.20);
  position:relative; overflow:hidden;
}
#viewOverview .ov-welcome::after{
  content:""; position:absolute; inset-inline-start:-60px; top:-60px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(0,194,255,.28), transparent 65%); pointer-events:none;
}
#viewOverview .ov-welcome-text h1{ margin:0; color:#fff; font-size:24px; font-weight:900; letter-spacing:-.3px; }
#viewOverview .ov-welcome-text p{ margin:6px 0 0; color:#AEC6E8; font-size:14px; font-weight:600; }
#viewOverview .ov-welcome-actions{ display:flex; gap:10px; flex-wrap:wrap; }
#viewOverview .ov-cta{
  height:44px; padding:0 20px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(135deg,#00C2FF,#006DFF); color:#04243f; font-weight:900; font-size:14px;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 12px 26px rgba(0,194,255,.34);
  transition:transform .12s ease, filter .18s ease;
}
#viewOverview .ov-cta:hover{ filter:brightness(1.05); }
#viewOverview .ov-cta:active{ transform:translateY(1px); }
#viewOverview .ov-cta svg{ width:18px; height:18px; }
#viewOverview .ov-ghost{
  height:44px; padding:0 18px; border:1px solid rgba(255,255,255,.28); border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.10); color:#EAF3FF; font-weight:800; font-size:13px;
  display:inline-flex; align-items:center; gap:8px; transition:background .16s ease;
}
#viewOverview .ov-ghost:hover{ background:rgba(255,255,255,.18); }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
#viewOverview .ov-kpi-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
#viewOverview .ov-kpi{
  background:var(--mg2-surface); border:1px solid var(--mg2-border); border-radius:20px; padding:18px;
  box-shadow:var(--mg2-shadow-sm); display:flex; flex-direction:column; gap:12px; min-width:0;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#viewOverview .ov-kpi:hover{ box-shadow:var(--mg2-shadow-md); border-color:var(--mgo-primary-100); transform:translateY(-2px); }
#viewOverview .ov-kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#viewOverview .ov-kpi-icon{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(135deg,rgba(0,109,255,.16),rgba(0,194,255,.20)); color:#2E8BFF;
}
#viewOverview .ov-kpi-icon svg{ width:22px; height:22px; }
#viewOverview .ov-kpi--green .ov-kpi-icon{ background:linear-gradient(135deg,rgba(15,157,107,.18),rgba(18,185,129,.24)); color:#22C58C; }
#viewOverview .ov-kpi--amber .ov-kpi-icon{ background:linear-gradient(135deg,rgba(224,138,11,.18),rgba(246,166,9,.24)); color:#F2A731; }
#viewOverview .ov-kpi--cyan  .ov-kpi-icon{ background:linear-gradient(135deg,rgba(0,194,255,.20),rgba(0,109,255,.18)); color:#2AC6FF; }

#viewOverview .ov-trend{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap; }
#viewOverview .ov-trend--up{ background:rgba(18,185,129,.16); color:#2FCF96; }
#viewOverview .ov-trend--down{ background:rgba(226,61,90,.16); color:#FF8FA1; }
#viewOverview .ov-trend--flat{ background:rgba(125,147,181,.16); color:var(--mg2-faint); }

#viewOverview .ov-kpi-value{ font-size:30px; font-weight:900; color:var(--mg2-text); line-height:1; unicode-bidi:plaintext; }
#viewOverview .ov-kpi-label{ font-size:13px; font-weight:700; color:var(--mg2-muted); }
#viewOverview .ov-kpi-sub{ font-size:12px; font-weight:600; color:var(--mg2-faint); margin-top:-4px; }

/* ── Two-column analytics row ───────────────────────────────────────────── */
#viewOverview .ov-analytics{ display:grid; gap:16px; grid-template-columns:1.6fr 1fr; }
@media (max-width:980px){ #viewOverview .ov-analytics{ grid-template-columns:1fr; } }

#viewOverview .ov-panel{
  background:var(--mg2-surface); border:1px solid var(--mg2-border); border-radius:20px; padding:20px;
  box-shadow:var(--mg2-shadow-sm); min-width:0;
}
#viewOverview .ov-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
#viewOverview .ov-panel-strip{ width:4px; height:20px; border-radius:999px; background:linear-gradient(180deg,#006DFF,#00C2FF); }
#viewOverview .ov-panel-title{ margin:0; font-size:16px; font-weight:900; color:var(--mg2-text); }
#viewOverview .ov-panel-sub{ margin:2px 0 0; font-size:12px; font-weight:600; color:var(--mg2-faint); }

/* Line chart */
#viewOverview .ov-chart{ width:100%; height:auto; display:block; }
#viewOverview .ov-grid{ stroke:var(--mg2-grid); }
#viewOverview .ov-axis{ fill:var(--mg2-faint); }
#viewOverview .ov-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
#viewOverview .ov-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--mg2-muted); }
#viewOverview .ov-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* Donut */
#viewOverview .ov-donut-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
#viewOverview .ov-dc-v{ fill:var(--mg2-text); }
#viewOverview .ov-dc-l{ fill:var(--mg2-faint); }
#viewOverview .ov-donut-legend{ display:flex; flex-direction:column; gap:10px; min-width:0; flex:1; }
#viewOverview .ov-donut-item{ display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; }
#viewOverview .ov-donut-item i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
#viewOverview .ov-donut-item .nm{ font-weight:700; color:var(--mg2-muted); flex:1; min-width:0; }
#viewOverview .ov-donut-item .vl{ font-weight:900; color:var(--mg2-text); unicode-bidi:plaintext; }

/* ── Recent installations panel ─────────────────────────────────────────── */
#viewOverview .ov-recent{ display:flex; flex-direction:column; gap:8px; }
#viewOverview .ov-recent-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--mg2-row-border); border-radius:14px; min-width:0;
  transition:background .15s ease, border-color .15s ease;
}
#viewOverview .ov-recent-row:hover{ background:var(--mg2-row-hover); border-color:var(--mgo-primary-100); }
#viewOverview .ov-recent-ic{ width:38px; height:38px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(135deg,rgba(0,109,255,.14),rgba(0,194,255,.18)); color:#2E8BFF; }
#viewOverview .ov-recent-ic svg{ width:18px; height:18px; }
#viewOverview .ov-recent-main{ min-width:0; flex:1; }
#viewOverview .ov-recent-name{ font-weight:800; color:var(--mg2-text); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#viewOverview .ov-recent-meta{ font-size:12px; color:var(--mg2-faint); font-weight:600; }

/* ── Quick-stats strip ──────────────────────────────────────────────────── */
#viewOverview .ov-quick{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
#viewOverview .ov-quick-card{
  background:var(--mg2-surface); border:1px solid var(--mg2-border); border-radius:16px; padding:16px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--mg2-shadow-sm);
}
#viewOverview .ov-quick-ic{ width:40px; height:40px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; }
#viewOverview .ov-quick-ic svg{ width:20px; height:20px; }
#viewOverview .ov-quick-ic.q-amber{ background:rgba(246,166,9,.16); color:#F2A731; }
#viewOverview .ov-quick-ic.q-blue{ background:rgba(0,109,255,.16); color:#2E8BFF; }
#viewOverview .ov-quick-ic.q-cyan{ background:rgba(0,194,255,.18); color:#2AC6FF; }
#viewOverview .ov-quick-ic.q-green{ background:rgba(18,185,129,.18); color:#22C58C; }
#viewOverview .ov-quick-v{ font-size:22px; font-weight:900; color:var(--mg2-text); line-height:1; unicode-bidi:plaintext; }
#viewOverview .ov-quick-l{ font-size:12px; font-weight:700; color:var(--mg2-muted); margin-top:3px; }

@media (max-width:560px){
  #viewOverview .ov-welcome{ padding:18px; }
  #viewOverview .ov-welcome-text h1{ font-size:20px; }
  #viewOverview .ov-kpi-value{ font-size:26px; }
}