/* HR Budget product page (/hr-budget) — the mock-ups only; the layout is product.css. */
.bg-pva { width: 270px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .74rem; }
.bg-pva-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bg-pva-top span { color: #8a93a4; font-size: .66rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.bg-pva-top i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-left: 4px; }
.bg-pva-top i.p { background: #d5dcea; } .bg-pva-top i.a { background: #0c64ae; }
.bg-pva-bars, .bg-mini { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 14px; }
.bg-pva-m { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 2px; }
.bg-pva-m span { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; transform: scaleY(0); transform-origin: bottom;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms + .3s); }
.bg-pva-m .p { background: #d5dcea; }
.bg-pva-m .a { background: linear-gradient(180deg, #5b8def, #0c64ae); }
.bg-pva-m .a.over { background: linear-gradient(180deg, #fb923c, #ea580c); }
.pp-card.in .bg-pva-m span, .pp-scene.on .bg-pva-m span { transform: scaleY(1); }
.bg-pva-months { display: flex; justify-content: space-between; color: #a0a8b6; font-size: .66rem; margin-top: 6px; }

.bg-hc { width: 260px; }
.bg-hc-people { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 16px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); }
.bg-hc-people span { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #0c64ae 24%, transparent 26%), radial-gradient(ellipse 60% 40% at 50% 100%, #0c64ae 98%, transparent 100%);
  background-color: #e8f1fb; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; transition-delay: calc(var(--i) * 35ms + .3s); }
.bg-hc-people span.open { background: transparent; box-shadow: inset 0 0 0 2px #f59e0b; border: 0; animation: bgOpen 1.6s ease-in-out infinite; }
@keyframes bgOpen { 50% { box-shadow: inset 0 0 0 2px #fcd34d; } }
.pp-card.in .bg-hc-people span { opacity: 1; transform: none; }
.bg-hc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.bg-hc-nums div { background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 4px 12px rgba(16, 24, 40, .06); }
.bg-hc-nums b { display: block; font-size: 1.1rem; color: #1d2433; }
.bg-hc-nums small { color: #8a93a4; font-size: .64rem; }
.bg-hc-nums .open b { color: #d97706; }

.bg-donut { display: flex; align-items: center; gap: 16px; }
.bg-donut svg { width: 130px; height: 130px; transform: rotate(-90deg); flex: none; }
.bg-donut circle { fill: none; stroke: var(--c); stroke-width: 16; stroke-dasharray: 0 100; stroke-dashoffset: var(--o);
  transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .12s + .3s); }
.pp-card.in .bg-donut circle { stroke-dasharray: var(--v) 100; }
.bg-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .7rem; color: #4b5568; }
.bg-legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bg-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

.bg-fc { width: 270px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); }
.bg-fc-top small { display: block; color: #8a93a4; font-size: .7rem; }
.bg-fc-top b { font-size: 1.25rem; color: #1d2433; }
.bg-fc-top span { margin-left: 6px; font-size: .7rem; font-weight: 600; color: #ea580c; }
.bg-fc svg { width: 100%; height: 110px; margin-top: 8px; overflow: visible; }
.bg-fc .plan { stroke: #c4cbe0; stroke-width: 1.5; stroke-dasharray: 4 4; }
.bg-fc .act, .bg-fc .fc { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s ease; }
.bg-fc .act { stroke: #0c64ae; transition-delay: .3s; }
.bg-fc .fc { stroke: #ea580c; stroke-dasharray: 3 3; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s 1.4s; }
.bg-fc .now { fill: #fff; stroke: #0c64ae; stroke-width: 2.5; }
.pp-card.in .bg-fc .act { stroke-dashoffset: 0; }
.pp-card.in .bg-fc .fc { opacity: 1; }
.bg-fc-key { display: flex; gap: 12px; font-size: .66rem; color: #6b7487; margin-top: 6px; }
.bg-fc-key span { display: inline-flex; align-items: center; gap: 4px; }
.bg-fc-key i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.bg-fc-key i.act { background: #0c64ae; } .bg-fc-key i.fc { background: #ea580c; } .bg-fc-key i.plan { background: #c4cbe0; }

.bg-org { width: 280px; }
.bg-org-top { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 12px; background: #1d2433; color: #fff; border-radius: 12px; font-size: .8rem; font-weight: 600; position: relative; }
.bg-org-top small { font-weight: 400; color: #aab6c9; font-size: .66rem; }
.bg-org-top::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 2px; height: 16px; background: #c4cbe0; }
.bg-org-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 2px solid #c4cbe0; }
.bg-org-dep { background: #fff; border-radius: 10px; padding: 10px 8px; box-shadow: 0 4px 12px rgba(16, 24, 40, .07); font-size: .7rem; text-align: center; }
.bg-org-dep b { display: block; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-org-meter { display: block; height: 5px; border-radius: 3px; background: #edf0f5; overflow: hidden; }
.bg-org-meter span { display: block; height: 100%; width: 0; background: #14b8a6; border-radius: 3px; transition: width 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .15s + .4s); }
.bg-org-meter span.over { background: #ea580c; }
.pp-card.in .bg-org-meter span { width: var(--w); }
.bg-org-dep small { display: block; margin-top: 6px; color: #8a93a4; font-size: .64rem; }

.bg-grid th, .bg-grid td { white-space: nowrap; }
.bg-locked { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; background: #f7f8fb; border: 1px solid #e3e7ee; }
.bg-locked > i { font-size: 1.6rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #0c64ae; }
.bg-locked small { display: block; color: #8a93a4; font-size: .76rem; margin-top: 2px; }
.bg-reopen { margin-left: auto; padding: 7px 14px; border-radius: 8px; border: 1px solid #d8dce5; font-size: .78rem; font-weight: 600; color: #4b5568; }
.bg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.bg-stats b.bad { color: #ea580c; }
.bg-mini { height: 100px; }
.bg-explain { border-radius: 12px; padding: 18px; background: linear-gradient(135deg, #eef5fd, #f3effd); line-height: 1.6; }
.bg-explain-head { font-weight: 700; color: #5b5bd6; display: flex; gap: 8px; align-items: center; }
.bg-explain p { margin: 10px 0 0; color: #3c4557; }
.pp-scene.on .bg-explain { animation: ppRow .6s .2s both; }

@media (max-width: 640px) {
  .bg-donut svg { width: 110px; height: 110px; }
  .bg-grid th:nth-child(4), .bg-grid td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-pva-m span, .bg-hc-people span, .bg-org-meter span { transform: none !important; opacity: 1 !important; transition: none !important; }
  .bg-org-meter span { width: var(--w); } .bg-donut circle { stroke-dasharray: var(--v) 100; transition: none; }
  .bg-fc .act { stroke-dashoffset: 0; } .bg-fc .fc { opacity: 1; } .bg-hc-people span.open { animation: none; }
}