/* ===== WB CubeTech — Live Business Dashboard (Home) =====
   Additive, self-contained styles for the #live-dashboard section.
   Uses the site's existing design tokens (see styles.css :root) —
   no new colors/fonts invented. Safe to load alongside styles.css. */

.ldash-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px;
}
.ldash-stat{
  position:relative; background:var(--surface-solid);
  border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:24px 22px 20px;
  overflow:hidden; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.ldash-stat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.5;
}
.ldash-stat:hover{
  transform:translateY(-5px); border-color:var(--accent);
  box-shadow:0 16px 34px oklch(0% 0 0 / .3), 0 0 0 1px oklch(74% 0.15 55 / .12);
}
.ldash-stat-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.ldash-stat-icon{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent); flex-shrink:0;
}
.ldash-stat-icon svg{width:18px; height:18px;}
.ldash-stat-delta{font-size:12px; color:var(--text-faint); letter-spacing:.02em;}
.ldash-stat-value{font-family:var(--serif); font-size:30px; color:var(--text); line-height:1; margin-bottom:6px;}
.ldash-stat-label{font-size:13px; color:var(--text-muted);}

.ldash-panels{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-bottom:24px; align-items:stretch;}
.ldash-panel{
  background:var(--surface-solid);
  border:1px solid var(--border-soft); border-radius:var(--radius-l); padding:26px 26px 22px;
  display:flex; flex-direction:column;
}
.ldash-panel-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.ldash-panel-title{font-family:var(--sans); font-weight:600; font-size:15px; color:var(--text);}
.ldash-tabs{display:flex; gap:6px; flex-wrap:wrap;}
.ldash-tab{
  font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--text-faint);
  background:transparent; border:1px solid var(--border-soft); border-radius:100px; padding:6px 13px;
  cursor:pointer; transition:all .25s var(--ease);
}
.ldash-tab:hover{color:var(--text);}
.ldash-tab.active{background:var(--accent); border-color:var(--accent); color:oklch(16% 0.02 60);}

.ldash-chart-wrap{position:relative; flex:1;}
.ldash-chart{width:100%; height:160px; display:block; overflow:visible;}
.ldash-chart-line{
  fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100;
}
.ldash-chart-line.drawn{stroke-dashoffset:0; transition:stroke-dashoffset 1.3s var(--ease);}
.ldash-chart-area{fill:url(#ldashFill); stroke:none; opacity:0; transition:opacity .8s var(--ease) .3s;}
.ldash-chart-line.drawn ~ .ldash-chart-area, .ldash-chart-line.drawn + .ldash-chart-area{opacity:1;}
.ldash-chart-months{display:flex; justify-content:space-between; margin-top:6px;}
.ldash-chart-months span{font-size:11px; color:var(--text-faint);}

.ldash-live-dot{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.04em; text-transform:uppercase;}
.ldash-live-dot i{width:7px; height:7px; border-radius:50%; background:var(--accent); display:block; opacity:.9;}

.ldash-feed{list-style:none; display:flex; flex-direction:column; gap:10px; flex:1; overflow:hidden;}
.ldash-feed-item{
  display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:var(--radius-s);
  background:var(--surface-solid); border:1px solid var(--border-soft);
  font-size:13.5px; color:var(--text-muted); line-height:1.4;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.ldash-feed-item.entering{opacity:0; transform:translateY(-10px);}
.ldash-feed-check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.ldash-feed-check svg{width:11px; height:11px;}

.ldash-services{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.ldash-service{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:var(--surface-solid);
  border:1px solid var(--border-soft); border-radius:var(--radius-m); padding:24px 14px;
  font-size:13.5px; color:var(--text-muted); font-weight:500;
  transition:transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.ldash-service:hover{transform:translateY(-4px); border-color:var(--accent); color:var(--text);}
.ldash-service-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent);
}
.ldash-service-icon svg{width:18px; height:18px;}

@media(max-width:1080px){
  .ldash-stats{grid-template-columns:repeat(2,1fr);}
  .ldash-panels{grid-template-columns:1fr;}
  .ldash-services{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:560px){
  .ldash-stats{grid-template-columns:1fr;}
  .ldash-services{grid-template-columns:repeat(2,1fr);}
}