/* Days inventory on hand calculator page — teal, mode toggle, runway timeline + mini calendar */
.dh-page { --dh-ink:#082f36; --dh-teal:#0e7490; --dh-teal-d:#155e75; --dh-aqua:#ecfeff; --dh-line:#cdeef3; --dh-muted:#3e5b61; --dh-sun:#f97316; color:var(--dh-ink); }
.dh-page p { color:var(--dh-muted); line-height:1.75; }
.dh-wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
.dh-hero { padding:26px 0 40px; border-bottom:6px solid var(--dh-teal); background:#fff; }
.dh-hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; }
.dh-badge { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:800; color:var(--dh-teal-d); margin-bottom:14px; }
.dh-badge i { width:28px; height:28px; border-radius:8px; background:var(--dh-aqua); display:inline-flex; align-items:center; justify-content:center; }
.dh-h1 { font-size:clamp(1.95rem,4vw,2.85rem); font-weight:900; line-height:1.14; margin:0 0 16px; color:var(--dh-ink); }
.dh-hero p { font-size:1.04rem; margin:0 0 12px; }
.dh-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.dh-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; font-weight:800; text-decoration:none; border-radius:0 14px 0 14px; }
.dh-btn-t { background:var(--dh-teal); color:#fff; }
.dh-btn-t:hover { background:var(--dh-teal-d); color:#fff; }
.dh-btn-s { background:var(--dh-sun); color:#fff; }
.dh-btn-s:hover { background:#ea580c; color:#fff; }
.dh-cal { background:var(--dh-aqua); border-radius:20px; padding:22px; border:1px solid var(--dh-line); }
.dh-cal-h { display:flex; justify-content:space-between; align-items:center; font-weight:800; margin-bottom:12px; color:var(--dh-ink); }
.dh-cal-h small { color:var(--dh-muted); font-weight:600; }
.dh-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; font-size:.82rem; }
.dh-grid span { padding:7px 0; border-radius:8px; color:var(--dh-muted); }
.dh-grid .wd { font-weight:800; color:var(--dh-teal-d); font-size:.72rem; }
.dh-grid .on { background:#fff; color:var(--dh-ink); }
.dh-grid .today { outline:2px solid var(--dh-teal); }
.dh-grid .stock { background:#a5f3fc; color:var(--dh-ink); }
.dh-grid .out { background:var(--dh-sun); color:#fff; font-weight:800; }
.dh-cal-note { font-size:.8rem; color:var(--dh-muted); margin-top:10px; }

.dh-tool { margin:40px auto 0; background:#fff; border:1px solid var(--dh-line); border-radius:18px; padding:26px; box-shadow:0 12px 34px rgba(8,47,54,.07); }
.dh-tool h2 { font-size:1.15rem; font-weight:850; margin:0 0 14px; color:var(--dh-ink); }
.dh-modes { display:inline-flex; background:var(--dh-aqua); border-radius:12px; padding:4px; margin-bottom:18px; }
.dh-modes button { border:0; background:transparent; padding:9px 16px; border-radius:9px; font-weight:750; color:var(--dh-teal-d); cursor:pointer; font-size:.88rem; }
.dh-modes button.act { background:#fff; color:var(--dh-ink); box-shadow:0 1px 4px rgba(8,47,54,.12); }
.dh-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dh-f label { display:block; font-weight:700; font-size:.82rem; margin-bottom:6px; color:var(--dh-ink); }
.dh-f input { width:100%; border:0; border-bottom:2px solid var(--dh-line); background:#f8fdfe; padding:11px 12px; font-size:1.05rem; border-radius:8px 8px 0 0; }
.dh-f input:focus { outline:none; border-bottom-color:var(--dh-teal); background:#fff; }
.dh-go { margin-top:18px; border:0; background:var(--dh-ink); color:#fff; padding:13px 30px; border-radius:10px; font-weight:800; cursor:pointer; }
.dh-go:hover { background:var(--dh-teal-d); }
.dh-err { display:none; color:#b91c1c; font-size:.86rem; margin-top:10px; }
.dh-res { display:none; margin-top:24px; }
.dh-res.show { display:block; }
.dh-nums { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.dh-nums div { border-left:4px solid var(--dh-teal); background:#f8fdfe; padding:12px 14px; border-radius:0 10px 10px 0; }
.dh-nums div.hot { border-color:var(--dh-sun); }
.dh-nums b { display:block; font-size:1.55rem; font-weight:900; color:var(--dh-ink); line-height:1.15; }
.dh-nums small { color:var(--dh-muted); font-size:.78rem; }
.dh-run { margin-top:20px; }
.dh-run-bar { position:relative; height:34px; border-radius:10px; background:repeating-linear-gradient(90deg,#f1fbfd 0 calc(100%/13 - 2px),#dff6fa calc(100%/13 - 2px) calc(100%/13)); overflow:hidden; }
.dh-run-fill { height:100%; background:linear-gradient(90deg,#22d3ee,#0e7490); border-radius:10px; transition:width .5s; }
.dh-run-fill.low { background:linear-gradient(90deg,#fdba74,#f97316); }
.dh-run-lab { display:flex; justify-content:space-between; font-size:.76rem; color:var(--dh-muted); margin-top:6px; }
.dh-say { margin-top:14px; font-size:.92rem; line-height:1.6; padding:12px 14px; border-radius:10px; background:var(--dh-aqua); color:var(--dh-ink); }

.dh-sec { padding:64px 0; }
.dh-sec.aq { background:var(--dh-aqua); }
.dh-h2 { font-size:clamp(1.45rem,2.6vw,1.95rem); font-weight:900; margin:0 0 14px; color:var(--dh-ink); }
.dh-zig { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:10px; }
.dh-zig + .dh-zig { margin-top:44px; }
.dh-panel { background:#fff; border:1px solid var(--dh-line); border-radius:16px; padding:24px; }
.dh-panel h3 { font-size:1rem; font-weight:850; margin:0 0 10px; color:var(--dh-ink); }
.dh-eq { font-family:ui-monospace,Menlo,monospace; background:var(--dh-ink); color:#cffafe; border-radius:10px; padding:14px 16px; font-size:.92rem; margin-top:10px; }
.dh-ranges { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.dh-ranges li { display:flex; gap:12px; align-items:flex-start; color:var(--dh-muted); line-height:1.6; }
.dh-ranges b { min-width:92px; display:inline-block; text-align:center; padding:4px 8px; border-radius:8px; font-size:.8rem; color:#fff; }
.dh-ranges .r1 b { background:#dc2626; }
.dh-ranges .r2 b { background:var(--dh-sun); }
.dh-ranges .r3 b { background:#16a34a; }
.dh-ranges .r4 b { background:#7c3aed; }
.dh-cta { display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; background:#fff; border:2px dashed var(--dh-teal); border-radius:20px; padding:34px; }
.dh-cta > i { font-size:2.4rem; color:var(--dh-teal); }
.dh-cta h2 { font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:900; margin:0 0 6px; color:var(--dh-ink); }
.dh-cta p { margin:0; }
.dh-qs { display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; margin-top:22px; }
.dh-qs h3 { font-size:1rem; font-weight:850; margin:0 0 6px; padding-left:12px; border-left:4px solid var(--dh-teal); color:var(--dh-ink); }
.dh-qs p { margin:0; padding-left:16px; font-size:.95rem; }
.dh-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:18px; }
.dh-nav a { text-align:center; padding:14px 10px; border-radius:12px; background:#fff; border:1px solid var(--dh-line); color:var(--dh-teal-d); font-weight:750; text-decoration:none; font-size:.88rem; }
.dh-nav a:hover { background:var(--dh-teal); color:#fff; }

@media (max-width:991px) {
  .dh-hero-grid, .dh-zig { grid-template-columns:1fr; }
  .dh-nums { grid-template-columns:1fr 1fr; }
  .dh-cta { grid-template-columns:1fr; }
  .dh-cta > i { display:none; }
  .dh-nav { grid-template-columns:1fr 1fr; }
}
@media (max-width:575px) {
  .dh-row, .dh-qs, .dh-nav { grid-template-columns:1fr; }
  .dh-tool { padding:20px 16px; }
  .dh-modes { display:flex; }
  .dh-modes button { flex:1; padding:9px 8px; }
  .dh-sec { padding:48px 0; }
}