/* Self-Perform crew scheduler. Prefix is "sp-" (see adminShell.css: no "ad-" classes). */
.sp-page {
  --sp-pending: #ffc107;
  --sp-pending-bg: rgba(255, 193, 7, .18);
  --sp-ready-bg: rgba(255, 193, 7, .32);
  --sp-confirmed: #2fbf71;
  --sp-confirmed-bg: rgba(47, 191, 113, .22);
  --sp-label-w: 190px;
  --sp-col-w: 46px;
  --sp-lane-h: 34px;
}
.sp-page .ap-main { margin-left: 0; }
.sp-page:not(.sp-is-mgr) .sp-mgr { display: none !important; }

/* ---------- stats ---------- */
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sp-stats .admin-panel { margin: 0; cursor: default; }
@media (max-width: 767.98px) { .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- board ---------- */
.sp-board-wrap { display: flex; align-items: stretch; min-height: 200px; }
.sp-pool { width: 220px; flex: none; border-right: 1px solid var(--ap-border); padding: 12px; max-height: 72vh; display: flex; flex-direction: column; }
.sp-pool-head { margin-bottom: 8px; }
.sp-pool-list { overflow-y: auto; display: grid; gap: 6px; align-content: start; }
.sp-board { flex: 1; min-width: 0; overflow: auto; max-height: 72vh; position: relative; }
@media (max-width: 991.98px) {
  .sp-board-wrap { flex-direction: column; }
  .sp-pool { width: auto; border-right: 0; border-bottom: 1px solid var(--ap-border); max-height: 220px; }
  .sp-pool-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .sp-page { --sp-label-w: 130px; }
}

.sp-grid { display: grid; grid-template-columns: var(--sp-label-w) repeat(var(--sp-days), minmax(var(--sp-col-w), 1fr)); grid-auto-rows: minmax(var(--sp-lane-h), auto); min-width: calc(var(--sp-label-w) + var(--sp-days) * var(--sp-col-w)); }
.sp-grid > * { min-width: 0; }

.sp-h { position: sticky; z-index: 4; background: var(--ap-surface); border-bottom: 1px solid var(--ap-border); }
.sp-h-week { top: 0; height: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-muted); padding: 5px 8px; border-left: 1px solid var(--ap-border); white-space: nowrap; overflow: hidden; }
.sp-h-day { top: 26px; height: 40px; text-align: center; font-size: 11px; color: var(--ap-muted); line-height: 1.15; padding-top: 5px; }
.sp-h-day b { display: block; font-size: 14px; color: var(--ap-text); font-weight: 600; }
.sp-h-day.today b { color: var(--ap-accent); }
.sp-h-day.past b { color: var(--ap-muted); }
.sp-corner { left: 0; top: 0; z-index: 6; border-right: 1px solid var(--ap-border); padding: 8px 12px; font-size: 12px; color: var(--ap-muted); display: flex; align-items: flex-end; }

.sp-label { position: sticky; left: 0; z-index: 3; background: var(--ap-surface); border-right: 1px solid var(--ap-border); border-bottom: 1px solid var(--ap-border); padding: 7px 12px; overflow: hidden; }
.sp-label .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-label .m { font-size: 11px; color: var(--ap-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-label.sp-avail-label { background: var(--ap-surface-2); }

.sp-cell { border-bottom: 1px solid #232528; border-left: 1px solid #1f2124; position: relative; }
.sp-cell.wk-start, .sp-h-day.wk-start, .sp-avail.wk-start { border-left-color: var(--ap-border); }
.sp-cell.wknd { background: rgba(255, 255, 255, .02); }
.sp-cell.today { background: rgba(255, 193, 7, .05); }
.sp-cell.past { background: rgba(0, 0, 0, .25); }
.sp-cell.add { cursor: pointer; }
.sp-cell.add:hover::after { content: "+"; position: absolute; inset: 3px; border: 1px dashed #4a4d52; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--ap-muted); font-size: 16px; }
.sp-project-end { grid-column: 1 / -1; height: 0; border-bottom: 1px solid var(--ap-border); }
.sp-empty-row { grid-column: 2 / -1; color: var(--ap-muted); padding: 30px 16px; text-align: center; }

/* availability row */
.sp-avail { background: var(--ap-surface-2); border-bottom: 1px solid var(--ap-border); border-left: 1px solid #1f2124; text-align: center; font-size: 11px; color: var(--ap-muted); padding-top: 4px; line-height: 1.1; cursor: default; }
.sp-avail b { display: block; font-size: 14px; }
.sp-avail.lvl-0 b { color: var(--ap-bad); }
.sp-avail.lvl-1 b { color: var(--ap-warn); }
.sp-avail.lvl-2 b { color: var(--ap-ok); }
.sp-avail.past { opacity: .45; }

/* request bars */
.sp-bar { margin: 4px 2px; border-radius: 6px; padding: 0 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; z-index: 2; overflow: hidden; white-space: nowrap; border: 1px solid transparent; transition: box-shadow .1s, transform .1s; }
.sp-bar .t { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.sp-bar .f { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: rgba(0, 0, 0, .35); flex: none; }
.sp-bar.pending { background: var(--sp-pending-bg); border-color: rgba(255, 193, 7, .55); color: #ffe08a; }
.sp-bar.ready { background: var(--sp-ready-bg); border-color: var(--sp-pending); color: #fff0c2; }
.sp-bar.confirmed { background: var(--sp-confirmed-bg); border-color: rgba(47, 191, 113, .7); color: #a7f0c6; }
/* one-day bars: just the fill count, the trade is in the tooltip */
.sp-bar.one { padding: 0 3px; justify-content: center; }
.sp-bar.one > i, .sp-bar.one .t { display: none; }
.sp-bar.one .f { padding: 1px 4px; }
.sp-bar:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.sp-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.sp-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
/* drag feedback while a crew member is being dragged */
.sp-bar.fit-all { box-shadow: 0 0 0 2px var(--ap-ok); }
.sp-bar.fit-some { box-shadow: 0 0 0 2px var(--ap-warn); }
.sp-bar.fit-none { opacity: .35; }
.sp-bar.drop-over { transform: scale(1.03); box-shadow: 0 0 0 3px #fff; }

/* crew view */
.sp-wcell { border-bottom: 1px solid #232528; border-left: 1px solid #1f2124; padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.sp-wcell.wk-start { border-left-color: var(--ap-border); }
.sp-wcell.off { background: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255, 255, 255, .045) 5px 10px); }
.sp-wcell.past { opacity: .55; }
.sp-wcell.today { background-color: rgba(255, 193, 7, .05); }
.sp-wcell .off-t { font-size: 10px; color: var(--ap-muted); text-align: center; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chip { font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border: 1px solid transparent; }
.sp-chip.pending, .sp-chip.ready { background: var(--sp-pending-bg); border-color: rgba(255, 193, 7, .5); color: #ffe08a; }
.sp-chip.confirmed { background: var(--sp-confirmed-bg); border-color: rgba(47, 191, 113, .6); color: #a7f0c6; }

/* pool cards */
.sp-worker { background: var(--ap-surface-2); border: 1px solid var(--ap-border); border-radius: 6px; padding: 7px 9px; cursor: grab; user-select: none; }
.sp-worker:hover { border-color: #4a4d52; }
.sp-worker.dragging { opacity: .5; }
.sp-worker .n { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sp-worker .n .h { margin-left: auto; font-size: 11px; color: var(--ap-muted); font-weight: 500; }
.sp-worker .tr { font-size: 11px; color: var(--ap-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-worker .strip { display: flex; gap: 1px; margin-top: 5px; }
.sp-worker .strip i { flex: 1; height: 4px; border-radius: 1px; background: #3a3d42; }
.sp-worker .strip i.free { background: var(--ap-ok); }
.sp-worker .strip i.part { background: var(--ap-warn); }
.sp-worker .strip i.full { background: #6b4040; }
.sp-worker .strip i.off { background: transparent; }
.sp-worker.dim { opacity: .45; }

/* badges & legend */
.sp-trade { display: inline-block; font-size: 11px; border: 1px solid var(--ap-border); border-radius: 10px; padding: 1px 8px; margin: 0 4px 3px 0; color: #c5c9ce; background: var(--ap-surface-2); }
.sp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 2px 10px; }
.sp-status.pending, .sp-status.ready { background: var(--sp-pending-bg); color: #ffe08a; }
.sp-status.confirmed { background: var(--sp-confirmed-bg); color: #a7f0c6; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.sp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sp-key { display: inline-block; width: 18px; height: 10px; border-radius: 3px; border: 1px solid; }
.sp-key.pending { background: var(--sp-pending-bg); border-color: rgba(255, 193, 7, .55); }
.sp-key.ready { background: var(--sp-ready-bg); border-color: var(--sp-pending); }
.sp-key.confirmed { background: var(--sp-confirmed-bg); border-color: rgba(47, 191, 113, .7); }
.sp-key.off { border-color: var(--ap-border); background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(255, 255, 255, .15) 3px 5px); }

/* request modal availability strip */
.sp-avail-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-avail-strip .d { background: var(--ap-bg); border: 1px solid var(--ap-border); border-radius: 6px; padding: 4px 8px; font-size: 12px; text-align: center; min-width: 64px; }
.sp-avail-strip .d b { display: block; font-size: 15px; }
.sp-avail-strip .d.short b { color: var(--ap-bad); }
.sp-avail-strip .d.ok b { color: var(--ap-ok); }
.sp-avail-strip .empty { color: var(--ap-muted); font-size: 12px; }

/* detail modal */
.sp-det-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sp-det-meta .k { font-size: 11px; color: var(--ap-muted); text-transform: uppercase; letter-spacing: .05em; }
.sp-det-meta .v { font-weight: 600; }
.sp-day-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid #232528; }
.sp-day-row .dl { width: 92px; flex: none; }
.sp-day-row .dl .c { font-size: 11px; color: var(--ap-muted); }
.sp-day-row .dl .c.short { color: var(--ap-warn); }
.sp-day-row .dl .c.full { color: var(--ap-ok); }
.sp-day-row .who { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-person { display: inline-flex; align-items: center; gap: 4px; background: var(--ap-surface-2); border: 1px solid var(--ap-border); border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 12.5px; }
.sp-person.locked { padding-right: 10px; }
.sp-person button { border: 0; background: none; color: var(--ap-muted); padding: 0 4px; line-height: 1; }
.sp-person button:hover { color: var(--ap-bad); }
.sp-day-row select { width: auto; max-width: 230px; }

/* toast */
.sp-toast { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.sp-toast > div { background: #26282c; border: 1px solid var(--ap-border); border-left: 3px solid var(--ap-accent); border-radius: 6px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); font-size: 13px; }
.sp-toast > div.bad { border-left-color: var(--ap-bad); }
.sp-toast > div.ok { border-left-color: var(--ap-ok); }

.sp-dayck { display: inline-flex; }
.sp-dayck input { display: none; }
.sp-dayck span { display: inline-block; width: 42px; text-align: center; padding: 5px 0; border: 1px solid var(--ap-border); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--ap-muted); }
.sp-dayck input:checked + span { background: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .6); color: var(--ap-text); }