/* 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) ==== */
/* Profile link: same box-arrow icon + styling as the tool cards' .tv-link
   (was a blue bordered "ⓘ" chip). Keeps the .info-dot class so profile_links.js
   still handles it drag-safely. */
.person-top .info-dot {
  display: inline-flex;
  align-items: center;
  margin-left: .4rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--bs-secondary);
  opacity: .7;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  vertical-align: baseline;
}

/* Hover/active feedback — brand color, matching .tv-link */
.person-top .info-dot:hover { opacity: 1; color: var(--brand-primary, #ff7a00); }
.person-top .info-dot:active { opacity: .85; }

/* ==== "Reports to" caret + popover ==== */
.person-top .report-caret {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .3rem;
  font-size: .8rem;
  line-height: 1.1;
  border: 1px solid var(--bs-secondary, #6c757d);
  border-radius: .25rem;
  color: var(--bs-secondary, #6c757d);
  background: transparent;
  cursor: pointer;
  user-select: none;
  vertical-align: baseline;
}
.person-top .report-caret:hover { opacity: .9; }
.person-top .report-caret:active { opacity: .75; }

.person-bottom .reports-to-label {
  font-size: .72rem;
  opacity: .75;
  white-space: nowrap;
}

.report-popover {
  position: absolute;
  z-index: 1080;
  min-width: 200px;
  max-width: 240px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.175));
  border-radius: .4rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
  overflow: hidden;
}
.report-popover-head {
  padding: .35rem .6rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .7;
  border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.1));
}
.report-popover-body { max-height: 260px; overflow-y: auto; }
.report-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .4rem .6rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.report-item:hover { background: var(--bs-tertiary-bg, rgba(0,0,0,.06)); }
.report-item.is-current { font-weight: 600; }
.report-item .report-item-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.report-item .report-item-name { line-height: 1.2; }
.report-item .report-item-crew {
  font-size: .7rem;
  opacity: .6;
  line-height: 1.1;
}
.report-empty { padding: .5rem .6rem; font-size: .8rem; opacity: .7; }

/* 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 BOARDS  (job_detail "Tools" / "Rental Assets" tabs)
   ----------------------------------------------------------------------------
   The single, canonical definition for these two boards — all competing rules
   were removed from crews_consolidated.css and crew_overrides.css, so no
   !important is needed here. They mirror the Crews board:
     • columns are an auto-fit grid that share the full width equally and wrap
       responsively (down to one column on phones);
     • board.js (sortToolColumns / sortRentalColumns) orders columns
       heaviest-first, with Unassigned pinned first;
     • each column caps at the viewport height and scrolls internally;
     • cards use the ToolVault catalog style and fill their column;
     • drag-and-drop is handled by the delegated handler in job_detail.html.
   ============================================================================ */

/* Grid of columns — equal tracks that span the display and wrap on smaller
   screens (one column on phones). */
#pane-tools .board-grid,
#pane-rentals .board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  width: 100%;
  align-items: start;
}
#pane-tools .board-grid > .grid-item,
#pane-rentals .board-grid > .grid-item {
  min-width: 0;   /* let tracks shrink to fit instead of overflowing */
}

/* A column is a list-card. It caps at the available viewport height; the tool
   list inside scrolls when the column would grow taller (standard flexbox:
   capped parent + min-height:0 scrolling child). Short columns stay short. */
#pane-tools .list-card,
#pane-rentals .list-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 210px);
}
#pane-tools .list-card .card-body,
#pane-rentals .list-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: .5rem;
}
#pane-tools .people-list,
#pane-rentals .people-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ---- ToolVault-style tool card (fills its column) ----------------------- */
#pane-tools .item-card.tool,
#pane-rentals .item-card.rental { width: 100%; }

#pane-tools .item-card.tv-card.tool {
  display: block;
  background: var(--surface-2, #1a1c20);
  border: 1px solid var(--border, #2d2d32);
  border-left: 5px solid var(--edge, #6c757d);
  border-radius: 10px;
  padding: .8rem .9rem;
  cursor: grab;
  transition: border-color .12s ease, transform .12s ease;
}
#pane-tools .item-card.tv-card.tool:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary, #ff7a00);
}
#pane-tools .item-card.tv-card.tool .tv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}
#pane-tools .item-card.tv-card.tool .tv-serial {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: break-word;
}
#pane-tools .item-card.tv-card.tool .tv-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
#pane-tools .item-card.tv-card.tool .tv-meta {
  font-size: .9rem;
  line-height: 1.35;
  margin-top: .15rem;
}
#pane-tools .item-card.tv-card.tool .tv-link {
  color: var(--bs-secondary);
  opacity: .7;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
#pane-tools .item-card.tv-card.tool .tv-link:hover {
  opacity: 1;
  color: var(--brand-primary, #ff7a00);
}

/* Rental thumbnail stays a sensible size (tools have no thumb). */
#pane-rentals .item-card.rental .thumb {
  max-height: 64px;
  width: auto;
  height: auto;
}

/* 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;
  }
}