/* ======================
   Layout-only adjustments
   (Colors intentionally untouched)
   ====================== */

/* Make the main container breathe */
.container-fluid {
  max-width: 98vw;
}

/* --- Shared card hygiene --- */
.list-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.list-card .card-body {
  padding: .75rem;
}

/* --- Prevent Bootstrap col-* from fighting our CSS grids --- */


/* --- Crews: let names wrap, never truncate --- */
#pane-crews .person .person-top {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
#pane-crews .person .name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;      /* allow multi-line */
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;   /* long names/compounds wrap */
}

/* --- Crews board uses grid for columns, full width --- */
#pane-crews .row.g-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Unified grid for non-crew boards (Tools, Rentals) --- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

/* --- Bus Plugs & Materials: same tile width as Rentals (not fat) --- */
#pane-busplugs .board-grid,
#pane-materials .board-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --- Make individual busplug/material tiles consistent, no width drift --- */
#pane-busplugs .board-grid > *,
#pane-materials .board-grid > * {
  display: block;
}

/* --- Transfers two-column layout on wide screens, single-column on narrow --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 992px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Keep role badges and other existing theme styles intact ---
   (No color declarations here on purpose)
*/
/* Crew titles: allow full wrap and prevent truncation */
#pane-crews .list-title {
  white-space: normal;
  word-break: break-word;
}

/* When counts sit under the title, keep them tidy */
#pane-crews .counts {
  line-height: 1.2;
}
#pane-crews .counts .count {
  display: inline-flex;
  align-items: center;
}

/* ------------------ TOOLS & RENTALS: 4-up + hard clamp scroll ------------------ */
/* 1) Force the outer grid to 4-up on tablets (leave Crews alone) */
#pane-tools .board-grid.max-4,
#pane-rentals .board-grid.max-4{
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@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;
  }
}
@media (min-width: 740px){ /* use 768px if you want strict Bootstrap md */
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 2) Make sure grid items and card bodies allow inner scrolling areas */
#pane-tools .board-grid.max-4 > .grid-item,
#pane-rentals .board-grid.max-4 > .grid-item{
  min-height: 0 !important;
}
#pane-tools .list-card .card-body,
#pane-rentals .list-card .card-body{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important; /* contain the inner scroller */
}

/* 3) HARD clamp: any tools/rentals "people-list" scrolls after 8 rows */
#pane-tools [data-board="tools"] .people-list,
#pane-rentals [data-board="rentals"] .people-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  /* 8 rows * 84px + 7 gaps * 12px = 756px */
  max-height: 756px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
}

/* 4) Keep row height predictable so the clamp is consistent */
#pane-tools .item-card.tool,
#pane-rentals .item-card.rental{
  display: flex !important;
  align-items: center !important;
  min-height: 84px !important;
}
#pane-tools .item-card.tool .thumb,
#pane-rentals .item-card.rental .thumb{
  max-height: 64px !important;
  height: auto !important;
  width: auto !important;
}

/* 5) Neutralize any earlier width pinning that could force 1–2 columns */
#pane-tools .board-grid.max-4 > [class*="col-"],
#pane-rentals .board-grid.max-4 > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* 8-up on desktops for Tools & Rentals */
@media (min-width: 1200px){
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  }
}

/* (Optional) ultra-wide screens, keep 8 and tighten gaps a touch */
@media (min-width: 1600px){
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    gap: 10px !important; /* tweak if you want */
  }
}

/* ===== Crews: 5-up on tablets only ===== */
@media (min-width: 740px) and (max-width: 1199.98px){
  #pane-crews .board-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  #pane-crews .board-grid > .grid-item{
    min-width: 0 !important; /* allow cards to shrink to fit 5 cols */
  }
  /* If any old col- classes remain, neutralize them */
  #pane-crews .board-grid > [class*="col-"]{
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
}

/* Tools pane: make the "Info" button compact (only in tool rows) */
#pane-tools .item-card.tool a[aria-label^="Open tool profile"]{
  /* Bootstrap 5-friendly variables (if present) */
  --bs-btn-padding-y: .15rem;
  --bs-btn-padding-x: .4rem;
  --bs-btn-font-size: .75rem;   /* ≈12px */
  --bs-btn-line-height: 1.1;

  /* Hard fallbacks to win even if variables aren’t used */
  padding: .15rem .4rem !important;
  font-size: .75rem !important;
  line-height: 1.1 !important;
  border-radius: .3rem !important;
  min-height: auto !important;
  white-space: nowrap !important;
}

/* Slightly tighten the right-side spacing on each tool row */
#pane-tools .item-card.tool .top{
  gap: .5rem; /* was gap-2 (~.5rem) in Bootstrap, keep it tight even if overridden elsewhere */
}

/* Tools: push the "Info" button to the far right of the row */
#pane-tools .item-card.tool .top{
  justify-content: flex-start !important; /* we’ll use margin-left:auto on the button */
  width: 100%;                             /* ensure the row spans the card width */
}

#pane-tools .item-card.tool .top > a[aria-label^="Open tool profile"]{
  margin-left: auto !important;  /* shoves it to the right edge */
}

/* ===== Tool detail page: responsive sizing for chart & pictures ===== */

/* Phones (<= ~740px) */
@media (max-width: 739.98px){
  /* Depreciation chart */
  .container-fluid img[alt="Depreciation chart"]{
    max-width: 320px !important;    /* narrower than default 520px */
    max-height: 200px !important;   /* keep it from getting tall */
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;      /* center the chart */
  }

  /* Gallery pictures (right column) */
  .container-fluid .col-lg-5 .row.g-2 img.img-fluid{
    max-height: 180px !important;   /* readable but constrained */
    width: 100% !important;
    object-fit: contain !important;  /* letterbox rather than crop */
  }
}

/* Tablets (≈740–1199px) */
@media (min-width: 740px) and (max-width: 1199.98px){
  /* Depreciation chart */
  .container-fluid img[alt="Depreciation chart"]{
    max-width: 420px !important;    /* smaller than desktop */
    max-height: 260px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Gallery pictures (right column) */
  .container-fluid .col-lg-5 .row.g-2 img.img-fluid{
    max-height: 220px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
}

/* ===== Tool detail page: put Depreciation chart UNDER its title and align left ===== */

/* Make sure the chart isn't floating or centered anywhere */
.container-fluid img[alt="Depreciation chart"]{
  display: block !important;
  float: none !important;
  margin: .25rem 0 0 0 !important;  /* sits just under the "Depreciation" label */
  clear: both !important;            /* guarantees it won’t sit beside the title/text */
}

/* Ensure the explanatory block ("Method/Formula") stays BELOW the chart */
.container-fluid img[alt="Depreciation chart"] + .small{
  display: block !important;
  margin-top: .5rem !important;
  clear: both !important;
}

/* ===== Pictures: keep images UNDER the "Pictures" title and align left ===== */
.container-fluid .col-lg-5 .mb-2{     /* the "Pictures" label container */
  clear: both !important;
}
.container-fluid .col-lg-5 .row.g-2{  /* the thumbnails grid */
  clear: both !important;
  align-items: flex-start !important;
}
.container-fluid .col-lg-5 img.img-fluid{
  display: block !important;
  float: none !important;             /* never float to the side of the title */
  margin: 0 !important;
}

/* ===== Tool detail page: Pictures under title, left-aligned ===== */

/* Put the thumbnails grid directly UNDER the "Pictures" title */
.container-fluid .col-lg-5 > .mb-2 + .row.g-2{
  display: block !important;
  clear: both !important;          /* guarantees it won't sit beside the title */
  margin-top: .25rem !important;
}

/* Make sure the grid/tiles are left-aligned (not centered) */
.container-fluid .col-lg-5 .row.g-2{
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Ensure each tile aligns content left */
.container-fluid .col-lg-5 .row.g-2 > [class^="col-"],
.container-fluid .col-lg-5 .row.g-2 > [class*=" col-"]{
  display: flex !important;
  justify-content: flex-start !important;
}

/* Images themselves: block-level, no float, no extra margins */
.container-fluid .col-lg-5 .row.g-2 img.img-fluid{
  display: block !important;
  float: none !important;
  margin: 0 !important;
}

/* --- Touch DnD aids --- */
html.touch-dnd .person[draggable="true"],
html.touch-dnd .item-card[draggable="true"]{
  /* Prevent scroll gestures from hijacking the drag */
  touch-action: none;           /* critical: stops panning while dragging */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
}
html.touch-dnd .person[draggable="true"].dragging,
html.touch-dnd .item-card[draggable="true"].dragging{
  cursor: grabbing;
}

/* Keep scrollable lists from “pulling” the page while dragging */
.people-list{
  overscroll-behavior: contain; /* contain bounce/scroll chaining */
}

/* Make drop targets easy to hit on touch as well */
.list-card.drag-over,
.people-list.drag-over{
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

/* If your board caps columns (max-4 / max-8), allow vertical pan only */
.board-grid{
  touch-action: pan-y; /* you can still scroll vertically while not dragging */
}

/* Allow clicks on the info chip even inside draggable person cards */
.person .no-dnd,
.person a[data-info-link] {
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
  -webkit-user-drag: none;
}

/* If you had a blanket pointer-events:none somewhere, re-enable on interactive elements */
.person a, .person button, .person input, .person select, .person label {
  pointer-events: auto !important;
}

/* Keep the chip compact */
.person-top .btn.btn-outline-info.btn-sm {
  padding: 0.1rem 0.35rem;
  line-height: 1;
}

/* === OVERRIDE: Make Foreman badge red === */
:root {
  --role-foreman: #ff5c5c !important;   /* strong red */
}

:root {
    --role-project_manager: #a64dff !important;   /* purple */
}

.role-project_manager {
    background: var(--role-project_manager) !important;
    color: #0b0b0c !important;  /* readable */
}