/* Scheduling product page (/employee-scheduling) — this page's own mock-ups, prefix sc-.
   Shared kit: static/css/product.css. */
.pp-grid .sc-wide { grid-column: span 2; }
.sc-open, .sc-hand, .sc-avail, .sc-pub { width: 260px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 14px 34px rgba(16, 24, 40, .1); font-size: .8rem; color: #1d2433; }

/* 1 — the week grid */
.sc-week { width: 100%; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 14px 34px rgba(16, 24, 40, .1); font-size: .72rem; }
.sc-week-head, .sc-week-row { display: grid; grid-template-columns: 118px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.sc-week-head span { text-align: center; color: #8a93a4; font-weight: 600; padding-bottom: 6px; }
.sc-week-row { padding: 4px 0; border-top: 1px solid #f1f3f7; }
.sc-week-row.open { background: #fafbfd; border-radius: 8px; border-top: 0; }
.sc-who { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3c4557; font-weight: 600; }
.sc-who .pp-av { width: 22px; height: 22px; font-size: .56rem; }
.sc-who i { color: #b45309; --fa-primary-color: #b45309; --fa-secondary-color: #b45309; }
.sc-cell { position: relative; height: 30px; border-radius: 6px; background: #f7f8fb; }
.sc-shift { position: absolute; inset: 2px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .66rem; color: #fff;
  transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; transition-delay: calc(var(--i) * 45ms + .3s); }
.pp-card.in .sc-shift { transform: none; opacity: 1; }
.sc-shift.a { background: #0c64ae; } .sc-shift.b { background: #7c3aed; } .sc-shift.c { background: #0d9488; } .sc-shift.d { background: #334155; }
.sc-shift.open { background: repeating-linear-gradient(135deg, #fff4e0 0 6px, #ffe8c2 6px 12px); color: #b45309; border: 1px dashed #f59e0b; }
.sc-leave { position: absolute; inset: 2px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 700; color: #6d28d9; background: #efeafd; }

/* 2 — open shift */
.sc-open { text-align: center; }
.sc-open-tag { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; background: #fff4e0; padding: 3px 9px; border-radius: 999px; }
.sc-open > b { display: block; margin-top: 10px; }
.sc-open-time { font-size: 1.5rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.sc-open small { color: #8a93a4; }
.sc-open-btn { display: block; margin: 14px 0 12px; padding: 10px; border-radius: 10px; background: #0c64ae; color: #fff; font-weight: 600; }
.pp-card.in .sc-open-btn { animation: ppPulse 1.6s ease-in-out .8s 3; }
.sc-open-who { display: flex; align-items: center; justify-content: center; gap: 0; color: #6b7487; font-size: .74rem; }
.sc-open-who .pp-av { width: 24px; height: 24px; font-size: .56rem; margin-right: -6px; border: 2px solid #fff; }
.sc-open-who .pp-av:last-of-type { margin-right: 8px; }

/* 3 — hand-over */
.sc-hand-shift { padding: 10px 12px; border-radius: 10px; background: #f3effd; border-left: 4px solid #7c3aed; }
.sc-hand-shift small { display: block; color: #6b7487; }
.sc-hand-move { display: flex; align-items: center; justify-content: space-between; margin: 16px 6px 10px; }
.sc-hand-p { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6b7487; font-size: .72rem; }
.sc-hand-p .pp-av { width: 38px; height: 38px; font-size: .74rem; }
.sc-av-b { background: #e7f6ec !important; color: #15803d !important; }
.sc-hand-arrow { flex: 1; height: 2px; margin: 0 10px 18px; background: repeating-linear-gradient(90deg, #c8cfdc 0 5px, transparent 5px 9px); position: relative; }
.sc-hand-arrow i { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.pp-card.in .sc-hand-arrow i { animation: scSlide 2.4s ease-in-out .5s infinite; }
@keyframes scSlide { 0% { left: 0; } 60%, 100% { left: calc(100% - 12px); } }
.sc-hand-note { color: #4b5568; font-style: italic; line-height: 1.4; }
.sc-hand-ok { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: #e7f6ec; color: #15803d; font-weight: 600; font-size: .74rem; }

/* 4 — availability */
.sc-avail > b { display: block; margin-bottom: 8px; }
.sc-avail-row { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f3f7; }
.sc-day { grid-row: span 2; display: grid; place-items: center; border-radius: 9px; background: #fdecec; color: #b42318; font-weight: 700; font-size: .7rem; }
.sc-avail-row small { color: #8a93a4; font-size: .7rem; }
.sc-avail-add { display: inline-block; margin-top: 10px; color: #0c64ae; font-weight: 600; }

/* 5 — publish */
.sc-pub { position: relative; }
.sc-pub-btn { display: block; text-align: center; padding: 11px; border-radius: 10px; background: linear-gradient(135deg, #0c64ae, #5b5bd6); color: #fff; font-weight: 700; }
.sc-mail { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f7f8fb;
  opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; transition-delay: .8s; }
.sc-mail-2 { transition-delay: 1.2s; }
.pp-card.in .sc-mail { opacity: 1; transform: none; }
.sc-mail > i { font-size: 1.2rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #5b5bd6; }
.sc-mail small { display: block; color: #8a93a4; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* walkthrough step 1 — the mini grid */
.sc-mini { display: grid; gap: 8px; margin-bottom: 14px; }
.sc-mini-row { display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 5px; align-items: center; }
.sc-mini-cell { height: 30px; border-radius: 6px; background: #f7f8fb; position: relative; }
.sc-mini-cell i { position: absolute; inset: 3px; border-radius: 4px; border: 1.5px dashed #0c64ae; background: rgba(12, 100, 174, .08); opacity: 0; }
.pp-scene.on .sc-mini-cell i { animation: ppRow .35s both; animation-delay: calc(var(--i) * 90ms + .2s); }

@media (max-width: 980px) { .pp-grid .sc-wide { grid-column: span 2; } }
@media (max-width: 640px) {
  .pp-grid .sc-wide { grid-column: auto; }
  .sc-week { padding: 10px; overflow: hidden; }
  .sc-week-head, .sc-week-row { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .sc-who { font-size: 0; gap: 0; }
  .sc-who .pp-av, .sc-who i { font-size: .56rem; }
  .sc-shift { font-size: .5rem; }
  .sc-leave { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-shift, .sc-mail { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sc-hand-arrow i { animation: none !important; }
}