/* ============================================================================
   MGIoT 2028 — Overview, ground-up "Operations Console" bento redesign.
   A deliberate 12-column bento composition with a statement hero, restrained
   colour (one accent), calm trends (no loud % pills), refined typography and
   a consistent eyebrow/label system. Pairs with mgiot-overview-premium-2028.css
   for the shared primitives (reveal, sparkline, ratio, skeleton, motion).
   ========================================================================== */

/* ---------- Shared card + eyebrow language -------------------------------- */
#viewOverview .ov2-card{
  position:relative;
  background:var(--mg-surface);
  border:1px solid var(--mg-border);
  border-radius:var(--mg-radius-xl, 20px);
  box-shadow:var(--mg-shadow-sm);
  padding:20px 22px;
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}
#viewOverview .ov2-eyebrow{
  display:block;
  font-size:11.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mg-text-faint);
  unicode-bidi:plaintext;
}
html[dir="rtl"] #viewOverview .ov2-eyebrow{ letter-spacing:0; }
#viewOverview .ov2-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
#viewOverview .ov2-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
#viewOverview .ov2-dot--brand{ background:var(--mg-brand); }
#viewOverview .ov2-dot--emerald{ background:var(--mg-success-strip); }
#viewOverview .ov2-dot--info{ background:var(--mg-info-strip); }

/* ---------- Header -------------------------------------------------------- */
#viewOverview .ov2-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
#viewOverview .ov2-title{
  margin:8px 0 0; font-size:clamp(22px,2.4vw,28px); font-weight:800;
  letter-spacing:-.02em; color:var(--mg-text-strong); line-height:1.15;
}
#viewOverview .ov2-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
#viewOverview .ov2-btn, #viewOverview .ov2-btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 18px; border-radius:var(--mg-radius-pill);
  font-size:14px; font-weight:700; cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
}
#viewOverview .ov2-btn svg, #viewOverview .ov2-btn-ghost svg{ width:18px; height:18px; }
#viewOverview .ov2-btn{
  border:0; color:#fff; background:var(--mg-grad-brand);
  box-shadow:var(--shadow-primary);
}
#viewOverview .ov2-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(69,105,156,.32); }
#viewOverview .ov2-btn:active{ transform:translateY(0); }
#viewOverview .ov2-btn-ghost{
  background:var(--mg-surface); color:var(--mg-text-mid);
  border:1px solid var(--mg-border-strong);
}
#viewOverview .ov2-btn-ghost:hover{ border-color:var(--mg-brand); color:var(--mg-brand); }

/* ---------- The bento grid ------------------------------------------------ */
#viewOverview .ov2-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  align-items:start;
}
#viewOverview .ov2-hero  { grid-column:span 8; }
#viewOverview .ov2-fin   { grid-column:span 4; grid-row:span 2; }
#viewOverview .ov2-tile  { grid-column:span 2; }
#viewOverview .ov2-recent{ grid-column:span 8; }
#viewOverview .ov2-side  { grid-column:span 4; }

@media (max-width:1080px){
  #viewOverview .ov2-hero  { grid-column:span 12; }
  #viewOverview .ov2-fin   { grid-column:span 12; grid-row:auto; }
  #viewOverview .ov2-tile  { grid-column:span 3; }
  #viewOverview .ov2-recent{ grid-column:span 12; }
  #viewOverview .ov2-side  { grid-column:span 12; }
}
@media (max-width:680px){
  #viewOverview .ov2-tile  { grid-column:span 6; }
}
@media (max-width:460px){
  #viewOverview .ov2-tile  { grid-column:span 12; }
}

/* ---------- Hero (the statement piece) ------------------------------------ */
/* NOTE: !important is required — legacy mgiot-parity/pro.css set an
   !important card background that otherwise kills this gradient. */
#viewOverview .ov2-hero{
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(69,105,156,.09), rgba(69,105,156,0) 55%),
    var(--mg-surface) !important;
}
html[dir="rtl"] #viewOverview .ov2-hero{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(69,105,156,.09), rgba(69,105,156,0) 55%),
    var(--mg-surface) !important;
}
#viewOverview .ov2-hero:hover{ box-shadow:var(--mg-shadow-md); }
#viewOverview .ov2-hero-top{ display:flex; flex-direction:column; gap:14px; }
#viewOverview .ov2-hero-stats{ display:flex; align-items:flex-end; gap:26px; }
#viewOverview .ov2-hsep{ width:1px; align-self:stretch; background:var(--mg-border); margin:4px 0; }
#viewOverview .ov2-hnum{
  font-size:clamp(38px,5vw,54px); font-weight:800; line-height:.95;
  letter-spacing:-.03em; color:var(--mg-brand);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  unicode-bidi:plaintext;
}
#viewOverview .ov2-hnum--alt{ color:var(--mg-success-text); }
#viewOverview .ov2-hlbl{
  display:flex; align-items:center; gap:7px; margin-top:8px;
  font-size:13px; font-weight:700; color:var(--mg-text-muted);
}
#viewOverview .ov2-hero-chart{ margin-top:6px; }
#viewOverview .ov2-hero-chart .ov-chart{ height:210px; }

/* ---------- Financial card ------------------------------------------------ */
#viewOverview .ov2-fin .ov-donut-wrap{ margin:4px 0 6px; }
#viewOverview .ov2-fin-rows{ margin-top:14px; border-top:1px solid var(--mg-border-soft); padding-top:12px; display:flex; flex-direction:column; gap:2px; }
#viewOverview .ov2-finrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; font-size:14px;
}
#viewOverview .ov2-finrow-k{ display:flex; align-items:center; gap:8px; color:var(--mg-text-muted); font-weight:600; }
#viewOverview .ov2-finrow b{ color:var(--mg-text-strong); font-weight:700; font-variant-numeric:tabular-nums; unicode-bidi:plaintext; }
#viewOverview .ov2-finrow--total{ border-top:1px solid var(--mg-border-soft); margin-top:4px; padding-top:12px; }
#viewOverview .ov2-finrow--total .ov2-finrow-k{ color:var(--mg-text-strong); font-weight:800; }
#viewOverview .ov2-finrow--total b{ color:var(--mg-brand); font-size:16px; font-weight:800; }

/* ---------- Metric tiles (calm) ------------------------------------------- */
#viewOverview .ov2-tile{ padding:18px 18px 16px; --_accent:var(--mg-brand); }
#viewOverview .ov2-tile--info { --_accent:var(--mg-info-strip); }
#viewOverview .ov2-tile--cyan { --_accent:var(--mg-cyan); }
#viewOverview .ov2-tile--warn { --_accent:var(--mg-warn-strip); }
#viewOverview .ov2-tile--brand{ --_accent:var(--mg-brand); }
#viewOverview .ov2-tile:hover{ transform:translateY(-3px); box-shadow:var(--mg-shadow-md); border-color:color-mix(in srgb,var(--_accent) 45%, var(--mg-border)); }
#viewOverview .ov2-tile-top{ margin-bottom:14px; }
#viewOverview .ov2-tile-ic{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--_accent) 13%, transparent); color:var(--_accent);
}
#viewOverview .ov2-tile-ic svg{ width:19px; height:19px; }
#viewOverview .ov2-tile-num{
  font-size:clamp(24px,2.4vw,30px); font-weight:800; line-height:1;
  color:var(--mg-text-strong); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; unicode-bidi:plaintext;
}
#viewOverview .ov2-tile-lbl{ margin-top:7px; font-size:13px; font-weight:700; color:var(--mg-text-muted); }
#viewOverview .ov2-tile-rail{ margin-top:14px; height:34px; display:flex; align-items:flex-end; }
#viewOverview .ov2-tile-rail .mg-spark{ height:34px; }

/* ---------- Recent installations ------------------------------------------ */
#viewOverview .ov2-recent:hover{ box-shadow:var(--mg-shadow-md); }
#viewOverview .ov2-link{
  border:0; background:transparent; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--mg-brand);
  padding:6px 10px; border-radius:var(--mg-radius-pill); transition:background var(--t);
}
#viewOverview .ov2-link:hover{ background:var(--mg-brand-50); }

/* ---------- Side "at a glance" -------------------------------------------- */
#viewOverview .ov2-quick-list{ display:flex; flex-direction:column; }
#viewOverview .ov2-quick{
  display:flex; align-items:center; gap:12px;
  padding:13px 4px; border-bottom:1px solid var(--mg-border-soft);
}
#viewOverview .ov2-quick:last-child{ border-bottom:0; }
#viewOverview .ov2-quick-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; }
#viewOverview .ov2-quick-ic svg{ width:19px; height:19px; }
#viewOverview .ov2-quick-ic.q-amber{ background:var(--mg-warn-bg,#FFF7ED); color:var(--mg-warn-strip,#D97706); }
#viewOverview .ov2-quick-ic.q-cyan { background:color-mix(in srgb,var(--mg-cyan) 14%, transparent); color:var(--mg-cyan); }
#viewOverview .ov2-quick-ic.q-blue { background:var(--mg-brand-50); color:var(--mg-brand); }
#viewOverview .ov2-quick-ic.q-green{ background:var(--mg-success-bg); color:var(--mg-success-text); }
#viewOverview .ov2-quick-lbl{ flex:1; font-size:14px; font-weight:600; color:var(--mg-text-mid); }
#viewOverview .ov2-quick-num{ font-size:18px; font-weight:800; color:var(--mg-text-strong); font-variant-numeric:tabular-nums; unicode-bidi:plaintext; }

/* ---------- Reduced motion parity (hero hover) ---------------------------- */
@media (prefers-reduced-motion: reduce){
  #viewOverview .ov2-tile:hover, #viewOverview .ov2-btn:hover{ transform:none; }
}

/* ---------- Folded from legacy dashboard-2026.css (Phase B) ----------------
   Styling for the shared _ovLineChart / _ovDonut / _ovRecentList helper output
   (.ov-chart/.ov-legend/.ov-donut-*/.ov-recent-*), re-expressed with clean 2028
   tokens so mgiot-dashboard-2026.css can be retired. */
#viewOverview .ov-chart{ width:100%; height:auto; display:block; }
#viewOverview .ov-grid{ stroke:var(--mg-border); }
#viewOverview .ov-axis{ fill:var(--mg-text-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(--mg-text-muted); }
#viewOverview .ov-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }

#viewOverview .ov-donut-wrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
#viewOverview .ov-dc-v{ fill:var(--mg-text-strong); }
#viewOverview .ov-dc-l{ fill:var(--mg-text-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(--mg-text-muted); flex:1; min-width:0; }
#viewOverview .ov-donut-item .vl{ font-weight:800; color:var(--mg-text-strong); unicode-bidi:plaintext; }

#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(--mg-border); border-radius:14px; min-width:0;
  transition:background var(--t), border-color var(--t);
}
#viewOverview .ov-recent-row:hover{ background:var(--mg-surface-row); border-color:var(--mg-brand-100); }
#viewOverview .ov-recent-ic{ width:38px; height:38px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; background:var(--mg-brand-50); color:var(--mg-brand); }
#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(--mg-text-strong); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#viewOverview .ov-recent-meta{ font-size:12px; color:var(--mg-text-faint); font-weight:600; }