/* RemoteHands.nyc | NOC theme
   Styles for /itad/ only: the vendor table (sortable, filterable, cards on
   phones), the collapsed device-refurbisher group, and small notes. Uses the
   variables from site.css; loaded after it. */

/* ----- controls ----- */
.itad-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px;
  margin-bottom: 14px;
}
.itad-controls .itad-field { margin-bottom: 0; min-width: 200px; flex: 0 1 260px; }
.itad-count { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); padding-bottom: 12px; }
.itad-checked { font-family: var(--mono); font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; }
.itad-checked strong { color: var(--text); font-weight: 600; }

/* ----- table ----- */
.itad-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.itad-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  font-size: 14px; overflow-wrap: anywhere;
}
/* column widths add up to 100%; fixed layout keeps the table inside the container at 1280px */
.itad-c-name { width: 21%; }
.itad-c-city { width: 12%; }
.itad-c-r2   { width: 10%; }
.itad-c-es   { width: 9%; }
.itad-c-dec  { width: 8%; }
.itad-c-nj   { width: 7%; }
.itad-c-svc  { width: 21%; }
.itad-c-src  { width: 12%; }
.itad-c-svc2 { width: 40%; }
.itad-table-sm .itad-c-name { width: 24%; }
.itad-table-sm .itad-c-city { width: 12%; }
.itad-table-sm .itad-c-r2   { width: 10%; }
.itad-table-sm .itad-c-src  { width: 14%; }
.itad-caption {
  caption-side: top; text-align: left;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--text-faint);
  padding: 0 0 10px;
}
.itad-table th, .itad-table td {
  text-align: left; vertical-align: top;
  padding: 11px 12px; border-top: 1px solid var(--line);
}
.itad-table thead th {
  border-top: none; background: var(--bg-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
.itad-table tbody tr:hover { background: rgba(34, 211, 238, 0.04); }
.itad-name { color: var(--heading); font-weight: 600; }
.itad-ver { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.itad-ok { color: var(--live); font-weight: 600; }
.itad-off { color: var(--text-dim); font-weight: 600; }
.itad-none { color: var(--text-faint); }
.itad-svc { color: var(--text-dim); max-width: 32ch; }
.itad-svc-k { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.itad-src a { white-space: nowrap; font-size: 13.5px; }
.itad-table-sm { font-size: 13.5px; }

/* sort buttons live inside the header cells */
.itad-sort {
  all: unset; cursor: pointer; display: inline-block; padding-right: 16px; position: relative;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.itad-sort::after {
  content: ""; position: absolute; right: 2px; top: 50%; margin-top: -3px;
  border: 4px solid transparent; border-top-color: var(--text-faint); opacity: .6;
}
.itad-sort:hover { color: var(--accent); }
.itad-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
th[aria-sort="ascending"] .itad-sort, th[aria-sort="descending"] .itad-sort { color: var(--accent); }
th[aria-sort="ascending"] .itad-sort::after { border-top-color: transparent; border-bottom-color: var(--accent); margin-top: -7px; opacity: 1; }
th[aria-sort="descending"] .itad-sort::after { border-top-color: var(--accent); opacity: 1; }

.itad-empty { padding: 18px 0; color: var(--text-dim); font-family: var(--mono); font-size: 13px; }

/* ----- collapsed group ----- */
.itad-more { margin-top: 26px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card-2); }
.itad-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 16px 18px; cursor: pointer; list-style: none; color: var(--heading); font-weight: 600; font-size: 15px;
}
.itad-more summary::-webkit-details-marker { display: none; }
.itad-more summary:hover { background: var(--accent-dim); }
.itad-more-toggle { font-family: var(--mono); font-size: 22px; line-height: 1; color: var(--accent); transition: transform .16s ease; }
.itad-more[open] .itad-more-toggle { transform: rotate(45deg); }
.itad-more-body { border-top: 1px solid var(--line); padding: 16px 18px 18px; }
.itad-more-lead { color: var(--text-dim); font-size: 14.5px; margin-bottom: 14px; max-width: 80ch; }

.itad-note { margin-top: 18px; color: var(--text-dim); font-size: 14px; max-width: 90ch; }
.itad-handoff-note { margin-top: 22px; color: var(--text); font-size: 15px; max-width: 80ch; }

/* ----- phones: rows become cards ----- */
@media (max-width: 760px) {
  .itad-table-wrap { overflow: visible; }
  .itad-table { border: none; background: none; display: block; }
  .itad-table colgroup { display: none; }
  .itad-caption { display: block; width: 100%; }
  .itad-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .itad-table tbody { display: grid; gap: 12px; }
  .itad-table tbody tr {
    display: block;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, var(--card), var(--card-2));
    padding: 14px 16px 6px;
  }
  /* display:block above would beat the browser's [hidden] rule, so restate it */
  .itad-table tbody tr[hidden] { display: none; }
  .itad-table tbody tr:hover { background: linear-gradient(180deg, var(--card), var(--card-2)); }
  .itad-table td {
    display: grid; grid-template-columns: minmax(0, 11ch) minmax(0, 1fr); gap: 6px 12px;
    border-top: none; padding: 6px 0 8px;
  }
  .itad-table td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-faint); padding-top: 2px;
  }
  .itad-table td:first-child { grid-template-columns: 1fr; padding-top: 0; }
  .itad-table td:first-child::before { display: none; }
  .itad-name { font-size: 16px; }
  .itad-svc { max-width: none; }
  .itad-src a { white-space: normal; }
  .itad-controls .itad-field { flex: 1 1 100%; min-width: 0; }
  .itad-caption { padding-bottom: 8px; }
}

/* The two "Request a decommission with certified hand-off" buttons are wider
   than a phone screen when kept on one line (site.css sets .btn nowrap), so
   let them wrap on small screens. This file only loads on /itad/. */
@media (max-width: 560px) {
  .hero-actions .btn, .dc-cta-actions .btn {
    white-space: normal; text-align: center; line-height: 1.3; max-width: 100%;
  }
}