/* ============================================================
   STELIC — Data Viz styles
   Dashboard building blocks: donuts, rings, tables, gantt,
   legends, pills, inline bars. Pairs with dataviz-charts.js
   (Chart.js theme) for canvas charts.
   Requires colors_and_type.css to be loaded first.
   ============================================================ */

/* ---------- chart card shell ---------- */
.dv-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.dv-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
}
.dv-card-sub {
  font-size: 12px;
  color: var(--gray);
  margin: 0 0 14px;
}

/* ---------- big stat ---------- */
.dv-stat-num {
  font-size: 34px;
  font-weight: var(--w-light);
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dv-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 6px;
}

/* ---------- deltas ---------- */
.dv-up   { color: var(--success); font-weight: 600; }
.dv-dn   { color: var(--danger);  font-weight: 600; }
.dv-flat { color: var(--gray);    font-weight: 600; }

/* ---------- legend ---------- */
.dv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12px;
  color: var(--gray);
}
.dv-legend .key { display: inline-flex; align-items: center; gap: 7px; }
.dv-legend .sw  { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dv-legend .sw.c1 { background: var(--cyan); }
.dv-legend .sw.c2 { background: var(--navy); }
.dv-legend .sw.c3 { background: var(--cyan-bright); }
.dv-legend .sw.c4 { background: var(--gray-soft); }
.dv-legend .sw.c5 { background: var(--cyan-deep); }
.dv-legend .val { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- donut (multi-segment, conic) ----------
   <div class="dv-donut" style="--size:160px; --thick:26px;
        --segs: var(--cyan) 0 38%, var(--navy) 38% 65%, ...">
     <div class="center"><b>68%</b><span>complete</span></div>
   </div> */
.dv-donut {
  width: var(--size, 160px);
  height: var(--size, 160px);
  border-radius: 50%;
  background: conic-gradient(var(--segs));
  display: grid;
  place-items: center;
  flex: none;
}
.dv-donut .center {
  width: calc(var(--size, 160px) - 2 * var(--thick, 26px));
  height: calc(var(--size, 160px) - 2 * var(--thick, 26px));
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dv-donut .center b {
  font-size: calc(var(--size, 160px) * 0.19);
  font-weight: var(--w-light);
  color: var(--navy);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dv-donut .center span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 3px;
}

/* ---------- ring (single-value progress donut) ----------
   <div class="dv-ring" style="--val:72; --c:var(--cyan)">…</div> */
.dv-ring {
  width: var(--size, 96px);
  height: var(--size, 96px);
  border-radius: 50%;
  background: conic-gradient(var(--c, var(--cyan)) calc(var(--val, 0) * 1%), var(--line) 0);
  display: grid;
  place-items: center;
  flex: none;
}
.dv-ring .center {
  width: calc(var(--size, 96px) - 2 * var(--thick, 14px));
  height: calc(var(--size, 96px) - 2 * var(--thick, 14px));
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dv-ring .center b {
  font-size: calc(var(--size, 96px) * 0.22);
  font-weight: var(--w-light);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* ---------- data table ---------- */
.dv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dv-table th {
  text-align: left;
  color: var(--gray);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dv-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.dv-table tbody tr:last-child td { border-bottom: none; }
.dv-table tbody tr:hover td { background: var(--mist); }
.dv-table .num  { text-align: right; font-variant-numeric: tabular-nums; }
.dv-table .code { font-family: var(--font-mono); font-size: 12px; color: var(--navy); }
.dv-table .lead { font-weight: 500; color: var(--navy); }
.dv-total td {
  border-top: 2px solid var(--line-strong);
  border-bottom: none;
  font-weight: 600;
  color: var(--navy);
}
.dv-total:hover td { background: transparent; }

/* in-cell bar: <div class="dv-cellbar"><span style="width:64%"></span></div> */
.dv-cellbar {
  width: 90px;
  height: 8px;
  background: var(--off-white);
  border-radius: var(--r-pill);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.dv-cellbar span { display: block; height: 100%; background: var(--cyan); border-radius: var(--r-pill); }

/* stacked horizontal bar: <div class="dv-bar"><span …></span><span …></span></div> */
.dv-bar {
  height: 10px;
  background: var(--off-white);
  border-radius: var(--r-pill);
  overflow: hidden;
  display: flex;
}
.dv-bar span { display: block; height: 100%; }

/* ---------- status pills ---------- */
.dv-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.dv-pill.ok   { background: var(--success-bg); color: var(--success); }
.dv-pill.warn { background: var(--warning-bg); color: var(--warning); }
.dv-pill.risk { background: var(--danger-bg);  color: var(--danger); }
.dv-pill.info { background: var(--info-bg);    color: var(--cyan-deep); }
.dv-pill.idle { background: var(--off-white);  color: var(--gray); }

/* ---------- gantt / schedule ----------
   <div class="dv-gantt" style="--label-w:170px; --cols:12">
     <div class="dv-gantt-head"><span></span><span>Jan</span>…</div>
     <div class="dv-gantt-row">
       <div class="dv-gantt-label">Steel erection</div>
       <div class="dv-gantt-track">
         <div class="dv-gantt-bar is-active" style="left:29%; width:21%"></div>
         <div class="dv-gantt-ms" style="left:50%" title="Topping out"></div>
       </div>
     </div>
     <div class="dv-gantt-today" style="--today:0.46"><span>Jun 12</span></div>
   </div> */
.dv-gantt { position: relative; --label-w: 170px; --cols: 12; /* @kind other */ }
.dv-gantt-head {
  display: grid;
  grid-template-columns: var(--label-w) repeat(var(--cols), 1fr);
  height: 28px;
  align-items: center;
}
.dv-gantt-head span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-soft);
  padding-left: 8px;
}
.dv-gantt-row {
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.dv-gantt-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
}
.dv-gantt-label small { font-weight: 400; color: var(--gray); margin-left: auto; font-size: 11px; }
.dv-gantt-track {
  position: relative;
  height: 38px;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) 100%;
}
.dv-gantt-bar {
  position: absolute;
  top: 9px;
  height: 20px;
  border-radius: 4px;
}
.dv-gantt-bar.is-done    { background: var(--navy); }
.dv-gantt-bar.is-active  { background: var(--cyan); }
.dv-gantt-bar.is-planned {
  border: 1.5px solid var(--cyan-bright);
  background: repeating-linear-gradient(45deg, rgba(0, 155, 227, 0.14) 0 4px, transparent 4px 8px);
}
.dv-gantt-bar.is-risk { background: var(--warning); }
.dv-gantt-ms {
  position: absolute;
  top: 13px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: var(--navy);
  transform: rotate(45deg);
  border-radius: 2px;
}
.dv-gantt-today {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: calc(var(--label-w) + (100% - var(--label-w)) * var(--today, 0.5));
  width: 0;
  border-left: 1.5px dashed var(--danger);
}
.dv-gantt-today span {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* gantt legend swatches */
.dv-legend .sw.done    { background: var(--navy); }
.dv-legend .sw.active  { background: var(--cyan); }
.dv-legend .sw.planned {
  border: 1.5px solid var(--cyan-bright);
  background: repeating-linear-gradient(45deg, rgba(0, 155, 227, 0.14) 0 3px, transparent 3px 6px);
}
.dv-legend .sw.ms    { background: var(--navy); transform: rotate(45deg) scale(0.85); border-radius: 2px; }
.dv-legend .sw.today { background: none; border-radius: 0; border-left: 1.5px dashed var(--danger); width: 2px; height: 14px; }