/* ERP Dashboard Hover Detail V1 — editorial warm-neutral visual language */
:root{
  --dh-bg: #fffdf9;
  --dh-bg-soft: #f6f2eb;
  --dh-line: #d8d3ca;
  --dh-line-soft: #e8e4dc;
  --dh-text: #1d1d1b;
  --dh-muted: #77736c;
  --dh-faint: #a29d94;
  --dh-deep: #292826;
  --dh-warm: #756d62;
  --dh-bar: #b8b0a3;
  --dh-bar-strong: #8e8579;
}

[data-dashboard-hover-v1]{
  position: relative;
  cursor: default;
  transition: transform 150ms cubic-bezier(.22,.8,.26,1), box-shadow 150ms ease, border-color 150ms ease;
  will-change: transform;
}
[data-dashboard-hover-v1].dh-card-active{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(35,30,25,.06) !important;
  border-color: rgba(80,74,66,.28) !important;
  z-index: 4;
}

#dashboard-hover-v1-popover{
  position: fixed;
  z-index: 2147483000;
  width: min(500px, calc(100vw - 24px));
  color: var(--dh-text);
  background: rgba(255,253,249,.985);
  border: 1px solid var(--dh-line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(35,30,25,.12), 0 2px 8px rgba(35,30,25,.05);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.22,.8,.26,1), transform 220ms cubic-bezier(.22,.8,.26,1);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
#dashboard-hover-v1-popover.dh-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#dashboard-hover-v1-popover.dh-above{
  transform-origin: 50% 100%;
}
#dashboard-hover-v1-popover.dh-closing{
  opacity: 0;
  transform: translateY(-4px) scale(.992);
  transition-duration: 150ms;
}

.dh-shell{ padding: 18px 18px 16px; }
.dh-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding-bottom:13px; border-bottom:1px solid var(--dh-line-soft);
}
.dh-kicker{
  font-size:10px; line-height:1; letter-spacing:.14em; font-weight:700;
  color:var(--dh-faint); text-transform:uppercase; margin-bottom:7px;
}
.dh-title{ margin:0; font-size:15px; line-height:1.25; font-weight:700; letter-spacing:-.02em; }
.dh-subtitle{ margin-top:5px; color:var(--dh-muted); font-size:11px; line-height:1.45; }
.dh-pool-switch{
  flex:none; display:flex; align-items:center; border:1px solid var(--dh-line); border-radius:999px;
  padding:2px; background:var(--dh-bg-soft);
}
.dh-pool-switch button{
  appearance:none; border:0; background:transparent; color:var(--dh-muted); font:inherit;
  font-size:10px; font-weight:700; line-height:1; padding:7px 9px; border-radius:999px; cursor:pointer;
  transition: background 150ms ease,color 150ms ease,box-shadow 150ms ease;
}
.dh-pool-switch button.is-on{ background:var(--dh-deep); color:#fffdf9; box-shadow:0 2px 6px rgba(35,30,25,.12); }

.dh-body{ padding-top:14px; }
.dh-stage{ opacity:0; transform:translateY(4px); animation:dhStageIn 220ms cubic-bezier(.22,.8,.26,1) forwards; }
.dh-stage-1{ animation-delay:40ms; }.dh-stage-2{ animation-delay:80ms; }.dh-stage-3{ animation-delay:120ms; }
@keyframes dhStageIn{to{opacity:1;transform:translateY(0)}}

.dh-summary-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:13px; }
.dh-summary{
  border:1px solid var(--dh-line-soft); border-radius:10px; padding:9px 10px; background:rgba(246,242,235,.55);
}
.dh-summary span{ display:block; color:var(--dh-faint); font-size:9px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.dh-summary strong{ display:block; font-size:13px; line-height:1.15; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.dh-top-list{ display:grid; gap:0; }
.dh-top-row{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:9px; align-items:center;
  min-height:34px; padding:6px 4px; border-bottom:1px solid rgba(216,211,202,.54);
  opacity:0; transform:translateY(4px); animation:dhRowIn 230ms cubic-bezier(.22,.8,.26,1) forwards;
  transition:background 140ms ease,transform 140ms ease;
}
.dh-top-row:last-child{border-bottom:0}.dh-top-row:hover{background:rgba(80,74,66,.035);transform:translateX(2px)}
@keyframes dhRowIn{to{opacity:1;transform:translateY(0)}}
.dh-rank{ color:var(--dh-faint); font-size:10px; font-variant-numeric:tabular-nums; }
.dh-product{ min-width:0; }
.dh-product-name{ font-size:11px; font-weight:650; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-product-meta{ margin-top:3px; display:flex; gap:5px; flex-wrap:wrap; }
.dh-chip{
  display:inline-flex; align-items:center; height:17px; padding:0 6px; border:1px solid var(--dh-line-soft);
  border-radius:999px; color:var(--dh-muted); background:var(--dh-bg-soft); font-size:8.5px; line-height:1;
}
.dh-product-value{text-align:right}.dh-product-value strong{display:block;font-size:11px}.dh-product-value span{display:block;color:var(--dh-muted);font-size:9px;margin-top:3px}

.dh-chart-wrap{ position:relative; height:194px; margin-top:2px; padding:8px 2px 0; }
.dh-chart-grid{ position:absolute; inset:10px 8px 28px 8px; background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),var(--dh-line-soft) 25%); pointer-events:none; opacity:.78; }
.dh-bars{ position:absolute; inset:10px 10px 28px 10px; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:end; }
.dh-bar-col{ position:relative; height:100%; display:flex; align-items:end; justify-content:center; }
.dh-bar{
  width:min(32px,66%); height:var(--h); border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--dh-bar),#c8c1b6); transform:scaleY(0); transform-origin:50% 100%;
  animation:dhBarGrow 420ms cubic-bezier(.22,.8,.26,1) forwards; animation-delay:var(--delay);
}
.dh-bar.is-current{ background:linear-gradient(180deg,var(--dh-bar-strong),var(--dh-warm)); }
@keyframes dhBarGrow{to{transform:scaleY(1)}}
.dh-chart-svg{position:absolute;inset:10px 10px 28px 10px;width:calc(100% - 20px);height:calc(100% - 38px);overflow:visible;pointer-events:none}
.dh-profit-line,.dh-inventory-line{fill:none;stroke:var(--dh-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:dhLineDraw 470ms cubic-bezier(.22,.8,.26,1) 130ms forwards}
.dh-inventory-line{stroke:var(--dh-warm)}
.dh-inventory-area{fill:rgba(117,109,98,.08);opacity:0;animation:dhAreaIn 300ms ease 220ms forwards}
@keyframes dhLineDraw{to{stroke-dashoffset:0}}@keyframes dhAreaIn{to{opacity:1}}
.dh-point{ fill:var(--dh-bg); stroke:var(--dh-deep); stroke-width:2; transform-box:fill-box; transform-origin:center; transform:scale(0); animation:dhPointIn 150ms ease forwards; animation-delay:var(--delay) }
.dh-point.is-current{fill:var(--dh-deep)}
@keyframes dhPointIn{to{transform:scale(1)}}
.dh-month-labels{position:absolute;left:10px;right:10px;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;color:var(--dh-faint);font-size:9px;text-align:center}
.dh-chart-note{ margin-top:10px; color:var(--dh-faint); font-size:9px; line-height:1.45; }

.dh-donut-layout{display:grid;grid-template-columns:154px minmax(0,1fr);gap:20px;align-items:center;padding:2px 2px 4px}
.dh-donut-wrap{position:relative;width:142px;height:142px;margin:auto}
.dh-donut{width:142px;height:142px;border-radius:50%;background:var(--donut);transform:rotate(-90deg) scale(.96);opacity:0;animation:dhDonutIn 450ms cubic-bezier(.22,.8,.26,1) forwards;position:relative}
.dh-donut::after{content:"";position:absolute;inset:30px;border-radius:50%;background:var(--dh-bg);box-shadow:inset 0 0 0 1px var(--dh-line-soft)}
@keyframes dhDonutIn{to{opacity:1;transform:rotate(-90deg) scale(1)}}
.dh-donut-center{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center;pointer-events:none}.dh-donut-center span{font-size:9px;color:var(--dh-faint);letter-spacing:.08em}.dh-donut-center strong{font-size:15px;margin-top:4px}
.dh-channel-list{display:grid;gap:7px}.dh-channel-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;opacity:0;transform:translateY(3px);animation:dhRowIn 200ms ease forwards}.dh-dot{width:8px;height:8px;border-radius:2px;background:var(--c)}.dh-channel-name{font-size:10px;color:var(--dh-muted)}.dh-channel-val{text-align:right}.dh-channel-val strong{display:block;font-size:10px}.dh-channel-val span{display:block;font-size:8.5px;color:var(--dh-faint);margin-top:2px}

.dh-empty{padding:28px 10px;text-align:center;color:var(--dh-muted);font-size:11px}.dh-error{padding:24px 10px;color:#6e352d;font-size:11px;line-height:1.5}.dh-loading{padding:28px 10px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--dh-muted);font-size:11px}.dh-loader{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dh-line);border-top-color:var(--dh-deep);animation:dhSpin .7s linear infinite}@keyframes dhSpin{to{transform:rotate(360deg)}}
.dh-foot{margin-top:12px;padding-top:9px;border-top:1px solid var(--dh-line-soft);display:flex;justify-content:space-between;gap:12px;color:var(--dh-faint);font-size:8.5px;line-height:1.4}

@media (max-width:640px){
  #dashboard-hover-v1-popover{width:calc(100vw - 18px);max-height:72vh;overflow:auto;border-radius:12px}
  .dh-shell{padding:15px 14px}.dh-donut-layout{grid-template-columns:125px minmax(0,1fr);gap:12px}.dh-donut,.dh-donut-wrap{width:118px;height:118px}.dh-donut::after{inset:25px}.dh-chart-wrap{height:178px}
}
@media (prefers-reduced-motion: reduce){
  [data-dashboard-hover-v1],#dashboard-hover-v1-popover,.dh-stage,.dh-top-row,.dh-bar,.dh-profit-line,.dh-inventory-line,.dh-inventory-area,.dh-point,.dh-donut,.dh-channel-row,.dh-loader{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}
}

/* V1.3 — stable anchor / hover bridge hotfix */
[data-dashboard-hover-v1]{
  /* The positioning anchor must never move while its popover is open. */
  will-change: auto;
}
[data-dashboard-hover-v1].dh-card-active{
  transform: none !important;
  box-shadow: 0 8px 24px rgba(35,30,25,.06) !important;
  border-color: rgba(80,74,66,.28) !important;
  outline: 1px solid rgba(80,74,66,.035);
  outline-offset: -1px;
}
#dashboard-hover-v1-bridge{
  position: fixed;
  display: none;
  z-index: 2147482999;
  background: transparent;
  pointer-events: auto;
}
#dashboard-hover-v1-popover{
  contain: layout paint;
}

/* V1.4 — unified sales/profit ledger status */
.dh-ledger-status{
  margin-top:8px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  align-items:center;
  border-top:1px solid var(--dh-line-soft);
  border-bottom:1px solid var(--dh-line-soft);
  color:var(--dh-muted);
  font-size:8.5px;
  letter-spacing:.04em;
}
.dh-ledger-status span{color:var(--dh-faint);letter-spacing:.1em;font-size:8px}
.dh-ledger-status strong{font-size:9px;color:var(--dh-deep);white-space:nowrap}
.dh-ledger-status em{font-style:normal;text-align:right;color:var(--dh-faint);white-space:nowrap}
.dh-ledger-status.is-complete{grid-template-columns:auto 1fr}
.dh-ledger-status.is-complete strong{text-align:right}