/* ============================================================
   HERO DASHBOARD — construction operations
   Soft, rounded, generous. Authored at 1240px and scaled to fit.
   ============================================================ */

.dashwrap{
  position:relative;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  max-width:1240px;margin:0 auto;
}
.dashscale{width:1240px;transform-origin:top left}

.dash{
  --kb:#3B5BFF;        /* primary */
  --kb-s:#EEF2FF;      /* primary soft */
  --kg:#18A57A;        /* on track */
  --kg-s:#E6F6F0;
  --ka:#D9860B;        /* attention */
  --ka-s:#FDF3E3;
  --kr:#DC4A45;        /* risk */
  --kr-s:#FDEDEC;
  --kink:#12141C;
  --kmut:#666E82;
  --kfaint:#9AA1B4;
  --kline:#ECEEF3;
  --kline2:#E0E3EB;
  --kdot:#7FD0B4;      /* certified */
  --kdot-f:#E7EAF1;    /* forecast */

  background:#F6F7FB;
  border-radius:22px;
  border:1px solid var(--kline2);
  padding:20px;
  font-family:var(--sans);
  color:var(--kink);
  letter-spacing:-.008em;
}

/* ── Top bar ── */
.k-top{display:flex;align-items:center;gap:18px;padding:2px 4px 20px}
.k-brand{display:flex;align-items:center;gap:9px;flex:none}
.k-logo{width:32px;height:32px;border-radius:10px;background:var(--kb);display:flex;align-items:center;justify-content:center}
.k-logo svg{width:17px;height:17px}
.k-brand b{font-size:15.5px;font-weight:600;letter-spacing:-.03em}

.k-projects{display:flex;align-items:center;gap:-6px;flex:none}
.k-pav,.k-padd{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:#fff;
  border:2.5px solid #F6F7FB;margin-right:-8px;
}
.p1{background:#18A57A}.p2{background:#3B5BFF}.p3{background:#D9860B}
.k-padd{background:#fff;color:var(--kfaint);border:1.5px dashed var(--kline2);font-size:15px;font-weight:400;margin-right:0;margin-left:8px}

.k-tabs{display:flex;align-items:center;gap:4px;margin:0 auto}
.k-tabs span{
  font-size:13.5px;font-weight:450;color:var(--kmut);
  padding:9px 17px;border-radius:100px;white-space:nowrap;
}
.k-tabs span.on{background:#fff;color:var(--kink);font-weight:550;border:1px solid var(--kline2)}

.k-topr{display:flex;align-items:center;gap:9px;flex:none}
.k-ico{position:relative;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--kline2);display:flex;align-items:center;justify-content:center}
.k-ico svg{width:16px;height:16px;stroke:var(--kmut);stroke-width:1.5;fill:none}
.k-ico i{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--kr);border:1.5px solid #fff}
.k-me{
  position:relative;width:34px;height:34px;border-radius:50%;
  background:var(--kink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;
}
.k-me em{position:absolute;right:0;bottom:1px;width:9px;height:9px;border-radius:50%;background:var(--kg);border:2px solid #F6F7FB}

/* ── Grid ── */
.k-grid{display:grid;grid-template-columns:1fr 336px;gap:16px;align-items:start}
.k-left{display:flex;flex-direction:column;gap:16px;min-width:0}
.k-right{display:flex;flex-direction:column;gap:16px;min-width:0}

.k-card{background:#fff;border:1px solid var(--kline);border-radius:18px;overflow:hidden}
.k-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 14px}
.k-chart,.k-pkg,.k-actions{min-width:0}
.k-chartside{display:flex;flex-direction:column;min-width:0}
.k-h3{font-size:15px;font-weight:600;letter-spacing:-.025em}
.k-link{font-size:12.5px;font-weight:500;color:var(--kb)}

/* ── KPIs ── */
.k-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.k-kpi{background:#fff;border:1px solid var(--kline);border-radius:18px;padding:18px 20px}
.k-kpi-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.k-kpi-h span{font-size:13.5px;font-weight:500;color:var(--kmut)}
.k-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px}
.k-chip.g{background:var(--kg-s);color:var(--kg)}
.k-chip.r{background:var(--kr-s);color:var(--kr)}
.k-kpi-v{font-size:27px;font-weight:600;letter-spacing:-.04em;margin-top:16px;font-variant-numeric:tabular-nums;line-height:1}
.k-kpi-n{font-size:11.5px;color:var(--kfaint);margin-top:9px}

/* ── Chart ── */
.k-chartbody{display:grid;grid-template-columns:236px 1fr;gap:22px;padding:2px 20px 20px}
.k-controls{display:flex;align-items:center;gap:8px}
.k-sel{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;color:var(--kink);
  border:1px solid var(--kline2);border-radius:100px;padding:7px 13px;
}
.k-sel svg{width:13px;height:13px;color:var(--kfaint)}
.k-dl{width:32px;height:32px;border-radius:50%;border:1px solid var(--kline2);display:flex;align-items:center;justify-content:center}
.k-dl svg{width:14px;height:14px;stroke:var(--kmut);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

.k-legend{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.k-legend li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--kmut)}
.k-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.lg-act{background:var(--kdot)}
.lg-for{background:var(--kdot-f)}

.k-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--kb-s);border-radius:14px;padding:14px 15px;margin-bottom:16px;
}
.k-note svg{width:15px;height:15px;flex:none;stroke:var(--kb);stroke-width:1.4;fill:none;stroke-linejoin:round;margin-top:1px}
.k-note p{font-size:12.3px;line-height:1.5;color:#3D4763}
.k-btn{
  display:flex;align-items:center;justify-content:center;
  background:var(--kb);color:#fff;font-size:13.5px;font-weight:550;
  padding:12px;border-radius:12px;
}

/* Dot matrix */
.k-plot{position:relative;padding-left:44px;min-width:0}
.k-yax{
  position:absolute;left:0;top:26px;height:192px;width:38px;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:10.5px;color:var(--kfaint);text-align:right;
}
.k-yax span{transform:translateY(-50%)}
.k-dots{position:relative;display:flex;align-items:flex-end;gap:4px;height:218px}
.k-col{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;flex:1;position:relative}
.k-col i{width:8px;height:8px;border-radius:50%;background:var(--kdot);margin:0 auto;display:block;flex:none}
.k-col i.fc{background:var(--kdot-f)}
.k-col.on i{background:var(--kb)}
.k-col.on i.fc{background:#C3CFFF}
.k-colpin{
  position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);
  background:var(--kb);color:#fff;font-size:10.5px;font-weight:600;
  padding:3px 9px;border-radius:100px;white-space:nowrap;
}
.k-guide{position:absolute;left:0;right:0;height:1px;background:var(--kline2);z-index:0}
.k-guide em{
  position:absolute;left:-40px;top:-9px;
  background:var(--kb);color:#fff;font-style:normal;
  font-size:10px;font-weight:600;padding:2px 7px;border-radius:100px;
}
.k-xax{display:flex;justify-content:space-between;font-size:10.5px;color:var(--kfaint);margin-top:26px}

/* ── Package tabs + table ── */
.k-ptabs{display:flex;align-items:center;gap:4px;padding:0 20px 12px;flex-wrap:wrap}
.k-ptabs span{
  display:flex;align-items:center;gap:6px;
  font-size:12.8px;font-weight:450;color:var(--kmut);
  padding:8px 14px;border-radius:100px;
}
.k-ptabs span.on{background:var(--kb-s);color:var(--kb);font-weight:600}
.k-ptabs b{
  font-size:10.5px;font-weight:600;background:#EEF0F5;color:var(--kmut);
  border-radius:100px;padding:1px 6px;
}
.k-ptabs span.on b{background:var(--kb);color:#fff}
.k-search{width:32px;height:32px;border-radius:50%;border:1px solid var(--kline2);display:flex;align-items:center;justify-content:center}
.k-search svg{width:14px;height:14px;stroke:var(--kmut);stroke-width:1.5;fill:none}

.k-table{width:100%;border-collapse:collapse}
.k-table th{
  font-size:11.5px;font-weight:500;color:var(--kfaint);text-align:left;
  padding:9px 20px;border-top:1px solid var(--kline);border-bottom:1px solid var(--kline);
}
.k-table td{padding:13px 20px;border-bottom:1px solid var(--kline);font-size:12.8px;color:var(--kmut);vertical-align:middle}
.k-table tbody tr:last-child td{border-bottom:none}
.k-table td b{display:block;font-size:13px;font-weight:600;color:var(--kink);letter-spacing:-.02em}
.k-table td em{display:block;font-style:normal;font-size:11.5px;color:var(--kfaint);margin-top:2px}
.k-table .r{text-align:right}
.k-table td.r{font-variant-numeric:tabular-nums;font-weight:600;color:var(--kink);font-size:13px}
.k-who{display:flex;align-items:center;gap:10px}
.k-av{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.a1{background:#3B5BFF}.a2{background:#18A57A}.a3{background:#D9860B}.a4{background:#7A5AF8}
.k-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:550;padding:5px 11px;border-radius:100px;white-space:nowrap}
.k-pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.k-pill.g{background:var(--kg-s);color:var(--kg)}
.k-pill.b{background:var(--kb-s);color:var(--kb)}
.k-pill.a{background:var(--ka-s);color:var(--ka)}
.k-pill.r{background:var(--kr-s);color:var(--kr)}
.k-more{color:var(--kfaint);text-align:right;font-size:15px;letter-spacing:1px;width:30px}

/* ── Priority actions ── */
.k-alist{padding:0 10px 12px}
.k-alist li{display:flex;align-items:flex-start;gap:11px;padding:13px 10px;border-radius:14px}
.k-alist li.on{background:#F7F8FC}
.k-ring{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%}
.k-ring svg{width:19px;height:19px;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.k-ring.r{color:var(--kr)}.k-ring.a{color:var(--ka)}.k-ring.b{color:var(--kb)}.k-ring.g{color:var(--kg)}
.k-ring.r svg,.k-ring.a svg,.k-ring.b svg,.k-ring.g svg{stroke:currentColor}
.k-at{display:flex;align-items:baseline;gap:8px}
.k-at b{font-size:13.2px;font-weight:600;letter-spacing:-.02em}
.k-at em{font-style:normal;font-size:11.5px;color:var(--kfaint)}
.k-ad{font-size:12px;color:var(--kmut);line-height:1.45;margin-top:3px}
.k-arw{color:var(--kfaint);font-size:17px;margin-left:auto;align-self:center;line-height:1}

/* ── Today on site ── */
.k-site{background:linear-gradient(170deg,#EEF1FF 0%,#F7F8FC 46%,#fff 100%);border-color:#E3E7F5}
.k-sitehead{padding:18px 20px 14px;text-align:center}
.k-sh1{font-size:12.5px;color:var(--kmut);font-weight:500}
.k-sh2{font-size:19px;font-weight:600;letter-spacing:-.03em;margin-top:3px}

.k-wx{display:flex;align-items:center;gap:11px;margin:0 16px 14px;background:#fff;border:1px solid var(--kline);border-radius:14px;padding:12px 14px}
.k-wxi{width:34px;height:34px;border-radius:10px;background:var(--kb-s);display:flex;align-items:center;justify-content:center;flex:none}
.k-wxi svg{width:19px;height:19px;stroke:var(--kb);stroke-width:1.5;fill:none;stroke-linecap:round}
.k-wx b{display:block;font-size:13px;font-weight:600;letter-spacing:-.02em}
.k-wx em{display:block;font-style:normal;font-size:11.5px;color:var(--kmut);margin-top:2px}

.k-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 16px 14px}
.k-stat{background:#fff;border:1px solid var(--kline);border-radius:14px;padding:12px 8px;text-align:center}
.k-stat b{display:block;font-size:20px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.k-stat span{display:block;font-size:11px;color:var(--kfaint);margin-top:3px}

.k-feed{margin:0 16px 14px;display:flex;flex-direction:column;gap:0}
.k-feed li{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--kmut);line-height:1.45;padding:8px 0;border-bottom:1px solid #EDEFF5}
.k-feed li:last-child{border-bottom:none}
.k-feed b{font-weight:600;color:var(--kink)}
.k-fd{width:7px;height:7px;border-radius:50%;flex:none;margin-top:5px}
.k-fd.g{background:var(--kg)}.k-fd.b{background:var(--kb)}.k-fd.a{background:var(--ka)}

.k-prog{margin:0 16px 18px;background:#fff;border:1px solid var(--kline);border-radius:14px;padding:14px}
.k-prog-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.3px;color:var(--kmut);margin-bottom:10px}
.k-prog-h b{font-size:13.5px;font-weight:600;color:var(--kink)}
.k-progbar{height:6px;border-radius:6px;background:#EDEFF5;overflow:hidden}
.k-progbar i{display:block;height:100%;border-radius:6px;background:var(--kb)}
.k-prog-n{font-size:11px;color:var(--kg);font-weight:500;margin-top:9px}