/* crews_job_detail.css
 * Template-specific styles that used to be inline in job_detail.html
 * Safe to include alongside crews.css
 */

/* Transfer Request cards (moved from inline <style>) */
.tr-card{
  position:relative;
  border:1px solid var(--bs-border-color);
  border-radius:12px;
  background:var(--bs-body-bg);
  padding:.75rem .9rem;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.tr-card.pending{
  border-color:#f7c948;
  box-shadow:0 0 0 .15rem rgba(247,201,72,.25);
}
.tr-card.pending::after{
  content:"⌛";
  position:absolute;
  top:.4rem; right:.5rem;
  font-size:1rem; opacity:.9;
}
.tr-card.completed::after{
  content:"✓";
  position:absolute;
  top:.4rem; right:.5rem;
  font-weight:700; opacity:.85;
}
.tr-card.denied{
  border-color:#dc3545;
  box-shadow:0 0 0 .15rem rgba(220,53,69,.2);
  background:color-mix(in srgb,#dc3545 6%, var(--bs-body-bg));
}
.tr-card.denied::after{
  content:"✕";
  position:absolute;
  top:.4rem; right:.5rem;
  font-weight:700; color:#dc3545; opacity:.9;
}

/* ===== PreFab Visuals (robust selectors) ===== */
:root{
  --pf-pending:#f6c453; --pf-approved:#27ae60; --pf-process:#0dcaf0;
  --pf-built:#0d6efd; --pf-loaded:#6c757d; --pf-received:#2ecc71; --pf-denied:#e74c3c;
}

/* Base polish */
#pane-prefab .pf-card,
#pane-prefab .card[data-status]{
  position:relative; border-radius:.75rem; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 14px rgba(0,0,0,.06); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
#pane-prefab .pf-card:hover,
#pane-prefab .card[data-status]:hover{
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10);
}
#pane-prefab .pf-card::before,
#pane-prefab .card[data-status]::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:transparent;
}

/* PENDING */
#pane-prefab .pf-card.pf-status-pending,
#pane-prefab .card[data-status="pending"]{
  box-shadow:0 4px 14px rgba(0,0,0,.06), 0 0 0 2px color-mix(in oklab, var(--pf-pending) 40%, transparent) inset;
}
#pane-prefab .pf-card.pf-status-pending::before,
#pane-prefab .card[data-status="pending"]::before{ background:var(--pf-pending); }
@keyframes pfPulse{0%,100%{box-shadow:0 0 0 0 rgba(246,196,83,.35);}50%{box-shadow:0 0 0 6px rgba(246,196,83,0);}}
#pane-prefab .pf-card.pf-status-pending::after,
#pane-prefab .card[data-status="pending"]::after{
  content:""; position:absolute; inset:6px; border-radius:.65rem; pointer-events:none;
  animation:pfPulse 2.2s ease-in-out infinite; border:2px solid transparent;
}
@media (prefers-reduced-motion:reduce){
  #pane-prefab .pf-card.pf-status-pending::after,
  #pane-prefab .card[data-status="pending"]::after{ animation:none; }
}

/* APPROVED */
#pane-prefab .pf-card.pf-status-approved,
#pane-prefab .card[data-status="approved"]{
  border-color:color-mix(in oklab, var(--pf-approved) 30%, white);
  box-shadow:0 6px 16px rgba(39,174,96,.18);
}
#pane-prefab .pf-card.pf-status-approved::before,
#pane-prefab .card[data-status="approved"]::before{ background:var(--pf-approved); }
#pane-prefab .pf-card.pf-status-approved .card-body::after,
#pane-prefab .card[data-status="approved"] .card-body::after{
  content:"✓"; position:absolute; right:.5rem; top:.25rem; font-weight:700; font-size:.9rem;
  color:#fff; background:var(--pf-approved); width:1.35rem; height:1.35rem; line-height:1.35rem;
  text-align:center; border-radius:.3rem; opacity:.95;
}

/* IN PROCESS */
#pane-prefab .pf-card.pf-status-in_process,
#pane-prefab .card[data-status="in_process"]{ box-shadow:0 6px 18px rgba(13,202,240,.18); }
#pane-prefab .pf-card.pf-status-in_process::before,
#pane-prefab .card[data-status="in_process"]::before{
  background:repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--pf-process) 85%, white) 0 10px,
    color-mix(in oklab, var(--pf-process) 30%, white) 10px 20px);
  background-size:200% 100%; animation:pfStripe 3s linear infinite;
}
@keyframes pfStripe{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){
  #pane-prefab .pf-card.pf-status-in_process::before,
  #pane-prefab .card[data-status="in_process"]::before{ animation:none; }
}

/* BUILT */
#pane-prefab .pf-card.pf-status-built,
#pane-prefab .card[data-status="built"]{ box-shadow:0 6px 18px rgba(13,110,253,.18); }
#pane-prefab .pf-card.pf-status-built::before,
#pane-prefab .card[data-status="built"]::before{
  background: radial-gradient(circle at 10px 2px, var(--pf-built) 2px, transparent 3px) repeat-x;
  background-size:22px 4px;
}

/* LOADED */
#pane-prefab .pf-card.pf-status-loaded,
#pane-prefab .card[data-status="loaded"]{ box-shadow:0 6px 18px rgba(108,117,125,.18); }
#pane-prefab .pf-card.pf-status-loaded::after,
#pane-prefab .card[data-status="loaded"]::after{
  content:""; position:absolute; inset:0; border-radius:.75rem; border:2px dashed var(--pf-loaded);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:6px; animation:pfDash 8s linear infinite;
  /* FIX: allow clicks to pass through overlay so buttons work */
  pointer-events: none;
}
@keyframes pfDash{ to{ transform: translateX(-20px); } }
@media (prefers-reduced-motion:reduce){
  #pane-prefab .pf-card.pf-status-loaded::after,
  #pane-prefab .card[data-status="loaded"]::after{ animation:none; }
}

/* RECEIVED — DARK-FRIENDLY, HIGH-CONTRAST (replaces prior white gradient) */
#pane-prefab .pf-card.pf-status-received,
#pane-prefab .card[data-status="received"]{
  /* Subtle success tint atop the page bg (works in dark or light) */
  background: color-mix(in srgb, var(--pf-received) 8%, var(--bs-body-bg));
  border-color: color-mix(in srgb, var(--pf-received) 45%, var(--bs-border-color));
  box-shadow: 0 6px 18px rgba(46,204,113,.16);
}
#pane-prefab .pf-card.pf-status-received::before,
#pane-prefab .card[data-status="received"]::before{
  background: var(--pf-received);
}
/* Ensure copy is readable */
#pane-prefab .pf-card.pf-status-received .card-body,
#pane-prefab .card[data-status="received"] .card-body,
#pane-prefab .pf-card.pf-status-received .card-body .small,
#pane-prefab .card[data-status="received"] .card-body .small,
#pane-prefab .pf-card.pf-status-received .card-body .h6,
#pane-prefab .card[data-status="received"] .card-body .h6,
#pane-prefab .pf-card.pf-status-received li,
#pane-prefab .card[data-status="received"] li{
  color: var(--bs-body-color);
}
/* Badge treatment for received */
#pane-prefab .pf-card.pf-status-received .badge,
#pane-prefab .card[data-status="received"] .badge{
  background-color: color-mix(in srgb, var(--pf-received) 18%, var(--bs-body-bg)) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid color-mix(in srgb, var(--pf-received) 45%, var(--bs-border-color));
}
/* Hover stays subtle */
#pane-prefab .pf-card.pf-status-received:hover,
#pane-prefab .card[data-status="received"]:hover{
  background: color-mix(in srgb, var(--pf-received) 11%, var(--bs-body-bg));
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.12);
}

/* DENIED */
#pane-prefab .pf-card.pf-status-denied,
#pane-prefab .card[data-status="denied"]{
  border-color:color-mix(in oklab, var(--pf-denied) 35%, white);
  box-shadow:0 6px 16px rgba(231,76,60,.15); filter:grayscale(.15);
  background:repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--pf-denied) 7%, white) 0 10px,
    color-mix(in oklab, var(--pf-denied) 0%, white) 10px 20px);
}
#pane-prefab .pf-card.pf-status-denied::before,
#pane-prefab .card[data-status="denied"]::before{ background:var(--pf-denied); }

#pane-prefab .pf-card .badge,
#pane-prefab .card[data-status] .badge{ box-shadow:0 2px 8px rgba(0,0,0,.08); }

/* Ensure only the active pane is shown */
#jobTabsContent > .tab-pane { display: none !important; }
#jobTabsContent > .tab-pane.active.show { display: block !important; }


/* Unassigned clamp: only the unassigned people list gets scroll when long */
#pane-crews #unassigned.clamped { overflow-y: auto; scrollbar-gutter: stable; }
/* Optional: simple, subtle scrollbar */
#pane-crews #unassigned.clamped::-webkit-scrollbar { width: 8px; }
#pane-crews #unassigned.clamped::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }

/* ==== Employee profile chip (sandboxed) ==== */
.person-top .info-dot {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .35rem;
  font-size: .85rem;
  line-height: 1.1;
  border: 1px solid var(--bs-info);
  border-radius: .25rem;
  color: var(--bs-info);
  background: transparent;
  cursor: pointer;
  user-select: none;
  vertical-align: baseline;
}

/* Optional hover/active feedback */
.person-top .info-dot:hover { opacity: .9; }
.person-top .info-dot:active { opacity: .75; }

/* Ensure clicks on controls inside .person are allowed even if a global rule disables them */
.person a, .person button, .person input, .person select, .person label {
  pointer-events: auto !important;
}

/* In case any overflow hidden clipped the chip */
.person-top, .person { overflow: visible; }

/* -----------------------------------------------------------
   TOOLS + RENTALS — Hard cap to 5 tiles per row
   ----------------------------------------------------------- */

/* Base: mobile = 1 column */
#pane-tools .board-grid.max-4,
#pane-rentals .board-grid.max-4 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  align-items: start;
}

/* ≥ 576px → 2 columns */
@media (min-width: 576px) {
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ≥ 740px → 3 columns */
@media (min-width: 740px) {
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ≥ 992px → 4 columns */
@media (min-width: 992px) {
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ≥ 1200px → LOCK to 5 columns (the max you want) */
@media (min-width: 1200px) {
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ≥ 1600px+ → still ONLY 5 columns (no expansion) */
@media (min-width: 1600px) {
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

/* Prefab filter: scroll horizontally on small screens */
@media (max-width: 576px) {
  #prefabFilter {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
    padding-bottom: .25rem;
  }
  #prefabFilter .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}