/* Inventory Audits — module presentation layer.
 *
 * Scoped under .ia-page so nothing here can restyle another module. Every
 * colour, font and radius is read from the Ledger design tokens defined on
 * body.ledger-shell (ledger.css), because the point of this file is to make
 * Inventory Audits look like the rest of SSM, not to introduce a second
 * visual identity. Where Bootstrap already provides the component - cards,
 * tables, form controls, grid - it is used directly and only spacing and
 * density are adjusted here.
 */

/* ------------------------------------------------------------- page frame */

.ia-page {
  font-family: var(--font-ui);
  color: var(--ink);
}

/* The identity strip under the page header: the two IDs an operator quotes
 * on the phone, kept adjacent and monospaced so they can be read aloud. */
.ia-idline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.ia-idline .ia-id {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ia-idline .ia-id-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-deep);
  margin-right: 5px;
}

/* A caveat that must stay attached to the value it qualifies. The initiation
 * city is not an audit location, and the two are one line apart. */
.ia-caveat {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* --------------------------------------------------------------- sections */

.ia-section { margin-bottom: 22px; }
.ia-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ia-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-deep);
  font-weight: 500;
  margin: 0;
}
.ia-section-note {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}

/* ------------------------------------------------------------------ stats */

.ia-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ia-stat {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 14px 16px;
}
.ia-stat-value {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ia-stat-label { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.ia-stat-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
/* Tones are reserved for facts that need an operator to do something. */
.ia-stat.is-attention { border-color: #e6c98d; background: var(--hold-wash); }
.ia-stat.is-attention .ia-stat-value { color: #8a5c14; }
.ia-stat.is-good { border-color: #b6d8c6; background: var(--clear-wash); }
.ia-stat.is-good .ia-stat-value { color: var(--clear); }

/* A stat that is also a link to the queue it counts. */
a.ia-stat { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.ia-stat:hover { border-color: var(--steel); transform: translateY(-1px); }

/* ----------------------------------------------------------------- badges */

.ia-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ia-badge-ok     { background: var(--clear-wash);  color: var(--clear);      border-color: #b6d8c6; }
.ia-badge-bad    { background: var(--breach-wash); color: var(--breach);     border-color: #e3bdb8; }
.ia-badge-muted  { background: var(--steel-wash);  color: var(--steel-deep); border-color: #c5d8e6; }
.ia-badge-warn   { background: var(--hold-wash);   color: #8a5c14;           border-color: #e6c98d; }

/* Resolution outcomes. Matched/different-location settle a funded vehicle;
 * the other three deliberately read as neutral, not as success. */
.ia-badge-funded-verified           { background: var(--clear-wash);  color: var(--clear);      border-color: #b6d8c6; }
.ia-badge-funded-different-location { background: var(--hold-wash);   color: #8a5c14;           border-color: #e6c98d; }
.ia-badge-additional                { background: var(--steel-wash);  color: var(--steel-deep); border-color: #c5d8e6; }
.ia-badge-duplicate                 { background: #eef0f2;            color: var(--ink-3);      border-color: var(--rule-2); }
.ia-badge-unable-to-identify        { background: var(--breach-wash); color: var(--breach);     border-color: #e3bdb8; }
.ia-badge-none                      { background: #eef0f2;            color: var(--ink-3);      border-color: var(--rule-2); }

.ia-flag { font-size: 12.5px; }
.ia-flag.is-yes { color: var(--clear); font-weight: 500; }
.ia-flag.is-no  { color: var(--ink-3); }

/* Marks a value the operator corrected by hand, which imports must not undo. */
.ia-protected {
  font-size: 11px;
  color: var(--steel-deep);
  border: 1px solid #c5d8e6;
  background: var(--steel-wash);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- tables */

/* Dense by intent: these tables carry thousands of vehicles, and an airy row
 * height turns a yard list into a scrolling exercise. */
.ia-page .table { font-size: 13.5px; margin-bottom: 0; }
.ia-page .table > thead > tr > th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--steel-deep);
  white-space: nowrap;
  vertical-align: middle;
}
.ia-page .table > tbody > tr > td { vertical-align: middle; }
.ia-page .table-dense > tbody > tr > td,
.ia-page .table-dense > thead > tr > th { padding-top: .4rem; padding-bottom: .4rem; }

/* Identifiers and numbers align on their digits or they cannot be compared. */
.ia-page .mono,
.ia-page .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ia-page .num { text-align: right; }
.ia-page .table > thead > tr > th.num { text-align: right; }

/* Long dealer names are the norm, not the exception. Cap the column and keep
 * the full value in a tooltip rather than letting one row set table width. */
.ia-customer-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1600px) { .ia-customer-cell { max-width: 420px; } }

.ia-table-scroll { max-height: 60vh; overflow-y: auto; }
.ia-table-scroll thead th { position: sticky; top: 0; z-index: 2; background: #eef2f5; }

/* ------------------------------------------------------------ empty state */

.ia-empty { text-align: center; padding: 26px 18px; }
.ia-empty-title { font-size: 14px; color: var(--ink-2); }
.ia-empty-detail { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.ia-empty-cell { background: var(--card); }

/* --------------------------------------------------- reconciliation bench */

/* Evidence left, decision right. Below 1200px they stack rather than crush:
 * a 380px evidence pane is not a photograph anybody can judge. */
.ia-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1199.98px) { .ia-bench { grid-template-columns: minmax(0, 1fr); } }

.ia-evidence {
  background: #0e1a26;
  border-radius: 8px;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ia-evidence img { width: 100%; height: auto; display: block; }

/* Shown when the photograph exists but no web route serves its bytes. Says
 * so plainly instead of rendering a broken image frame. */
.ia-evidence-missing {
  color: #93a7b8;
  text-align: center;
  padding: 30px 24px;
  font-size: 13px;
  line-height: 1.6;
}
.ia-evidence-missing .ti { font-size: 30px; display: block; margin-bottom: 10px; opacity: .65; }
.ia-evidence-missing code {
  color: #b9cad9;
  font-size: 11.5px;
  word-break: break-all;
}

.ia-meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; }
.ia-meta dt { color: var(--ink-3); font-weight: 400; }
.ia-meta dd { margin: 0; }

/* The capture queue: an ordinal and a location, never an opaque id. */
.ia-queue { max-height: 420px; overflow-y: auto; }
.ia-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-bottom-color: var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
.ia-queue-item:hover { background: var(--steel-wash); color: var(--ink); }
.ia-queue-item.is-active {
  background: var(--steel-wash);
  border-color: var(--steel);
  border-radius: 6px;
}
.ia-queue-ord {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--steel-deep);
  min-width: 30px;
}
.ia-queue-where { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-queue-when { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* Resolution controls. Each outcome carries its meaning, so the operator is
 * not asked to remember five business definitions at the moment of deciding. */
.ia-outcomes { display: grid; gap: 8px; }
.ia-outcome {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
}
.ia-outcome:hover:not(:disabled) { border-color: var(--steel); background: var(--steel-wash); }
.ia-outcome:disabled { opacity: .5; cursor: not-allowed; }
/* As selectable radio cards (labels wrapping a radio input). */
label.ia-outcome { margin-bottom: 0; }
.ia-outcome input[type="radio"] { flex-shrink: 0; }
.ia-outcome:has(input:checked) { border-color: var(--steel); background: var(--steel-wash); }
.ia-outcome-name { font-weight: 500; display: block; }
.ia-outcome-hint { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ------------------------------------------------------------------ forms */

.ia-page .form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.ia-page .form-text { font-size: 11.5px; }
.ia-field-note { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* An upload step that stages before it commits. The two buttons do different
 * things and must not look interchangeable. */
.ia-upload-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- timeline */

.ia-timeline { list-style: none; margin: 0; padding: 0; }
.ia-timeline li {
  position: relative;
  padding: 0 0 14px 20px;
  border-left: 2px solid var(--rule);
  font-size: 13px;
}
.ia-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ia-timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel);
}
.ia-timeline-action { font-weight: 500; }
.ia-timeline-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ------------------------------------------------- second-level audit nav */

/* Horizontal, deliberately echoing the global Ledger bar one level down:
 * same dark ground, same pill highlight, so "which audit section am I in"
 * reads exactly like "which application section am I in". */
.ia-tabs {
  display: flex;
  gap: 4px;
  background: var(--ink);
  border-radius: 9px;
  padding: 5px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.ia-tabs a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 6px;
  white-space: nowrap;
}
.ia-tabs a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.ia-tabs a.is-active { color: #fff; background: var(--steel); font-weight: 500; }

/* Sub-navigation inside one tab: quiet underline tabs, one level quieter
 * than the strip above them. */
.ia-subnav {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
  overflow-x: auto;
}
.ia-subnav a {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 13px;
  padding: 7px 2px 9px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.ia-subnav a:hover { color: var(--ink); }
.ia-subnav a.is-active {
  color: var(--steel-deep);
  border-bottom-color: var(--steel);
  font-weight: 500;
}

/* ------------------------------------------------------ evidence thumbs */

.ia-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--rule-2);
  background: #0e1a26;
  display: block;
}
.ia-thumb-slot {
  width: 84px;
  height: 84px;
  border-radius: 7px;
  border: 1px dashed var(--rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-size: 10.5px;
  text-align: center;
  padding: 4px;
}
.ia-thumb-figure { margin: 0; }
.ia-thumb-caption { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; max-width: 84px; }

/* ------------------------------------------------- resolution impact panel */

.ia-impact {
  border: 1px solid var(--steel);
  background: var(--steel-wash);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}
.ia-impact-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-deep);
  margin-bottom: 8px;
}
.ia-impact-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.ia-impact-row .num { font-family: var(--font-mono); }
.ia-impact-unchanged { color: var(--ink-3); }

/* --------------------------------------------------- bulk-select toolbar */

.ia-bulkbar {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 2px solid var(--steel);
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 -4px 14px rgba(14, 26, 38, 0.08);
}
.ia-bulkbar .ia-bulk-count { font-family: var(--font-mono); font-size: 13px; }

/* --------------------------------------------------------- KPI header row */

.ia-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ia-kpi {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 13px;
}
.ia-kpi-value { font-family: var(--font-mono); font-size: 21px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ia-kpi-label { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.ia-kpi.is-attention { border-color: #e6c98d; background: var(--hold-wash); }
.ia-kpi.is-attention .ia-kpi-value { color: #8a5c14; }
a.ia-kpi { display: block; text-decoration: none; color: inherit; }
a.ia-kpi:hover { border-color: var(--steel); }

/* -------------------------------------------------------- activity collapse */

.ia-activity summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
}
.ia-activity summary::-webkit-details-marker { display: none; }
.ia-activity summary .ia-section-title { margin: 0; }
.ia-activity summary .ia-activity-hint { font-size: 12.5px; color: var(--ink-3); }
.ia-activity summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--ink-3);
  transition: transform 0.15s ease;
}
.ia-activity[open] summary::after { transform: rotate(180deg); }
.ia-activity .ia-activity-body { padding: 0 18px 16px; }

/* -------------------------------------------------------------- responsive */

/* At laptop width the shell already consumes real estate; drop the outer
 * padding rather than letting tables force a horizontal page scroll. */
@media (max-width: 1400px) {
  .ia-page .ia-stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .ia-stat-value { font-size: 23px; }
}
@media (max-width: 991.98px) {
  .ia-customer-cell { max-width: 200px; }
  .ia-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Sections the page may scroll itself to. `.ledger-top` is a sticky 58px bar,
 * so land the heading clear of it rather than underneath it. */
.ia-scroll-anchor { scroll-margin-top: 76px; }