/* Customer record corrections (CSR customer-resolution surface).
 *
 * public/js/customer-resolution-surface.js builds this surface from createElement +
 * textContent and styles nothing itself. It shipped in 0.48.3 with NO stylesheet, so every
 * quote header and customer page showed a wall of raw browser form controls and internal
 * source IDs. Every class that script emits must be styled here —
 * tests/customer-resolution-surface-styles.test.js fails if one is added without a rule.
 *
 * Hosts:
 *   quote.html     — collapsed <details id="customerResolutionDisclosure"> under the quote title.
 *   customers.html — the "Customer identity corrections" detail card is itself a <details>
 *                    (.customer-resolution-card), collapsed by default since 0.48.6.
 * On both, each company's source links / evidence codes / identity counts sit behind a further
 * collapsed "Technical details" toggle (.customer-resolution-technical).
 * Both mounts carry [data-customer-resolution-surface]; that attribute is the styling hook.
 *
 * Palette = the app's light theme (CLAUDE.md "Design System"): text #333/#555, muted #767676
 * (WCAG AA floor on white — never #888/#999 for text), borders #e8e8e8/#ddd, accent #448727.
 * The app has no dark theme, so there is none here. */

/* ---- Collapsed entry point on the quote header ---- */

.customer-resolution-disclosure {
  margin-top: 8px;
  max-width: 100%;
}

.customer-resolution-summary {
  align-items: center;
  background: #fff;
  border: 1px solid #e0e4e0;
  border-radius: 4px;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  flex-wrap: nowrap;
  font-size: 12px;
  font-weight: 600;
  gap: 5px;
  line-height: 1.3;
  list-style: none;
  max-width: 100%;
  padding: 5px 10px;
  user-select: none;
}

.customer-resolution-summary::-webkit-details-marker {
  display: none;
}

.customer-resolution-summary:hover,
.customer-resolution-disclosure[open] > .customer-resolution-summary {
  background: #f5f7f5;
  border-color: #448727;
  color: #36711e;
}

.customer-resolution-summary:focus-visible {
  outline: 2px solid #448727;
  outline-offset: 2px;
}

.customer-resolution-summary > .fas {
  color: #767676;
  flex: none;
  font-size: 11px;
}

.customer-resolution-summary-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Review ›" / "Hide ⌄" never wraps apart from its chevron. */
.customer-resolution-summary-action {
  align-items: center;
  color: #448727;
  display: inline-flex;
  flex: none;
  font-weight: 600;
  gap: 5px;
  white-space: nowrap;
}

/* No separator before it: the header column is ~400px at desktop width, and with a
   "Needs attention" flag every pixel of this line is spoken for. */
.customer-resolution-summary-action {
  margin-left: 3px;
}

.customer-resolution-summary-hide,
.customer-resolution-disclosure[open] .customer-resolution-summary-review,
.customer-resolution-card[open] .customer-resolution-summary-review {
  display: none;
}

.customer-resolution-disclosure[open] .customer-resolution-summary-hide,
.customer-resolution-card[open] .customer-resolution-summary-hide {
  display: inline;
}

.customer-resolution-summary-chevron {
  color: #448727;
  font-size: 9px;
  transition: transform 0.15s;
}

.customer-resolution-disclosure[open] .customer-resolution-summary-chevron,
.customer-resolution-card[open] .customer-resolution-summary-chevron {
  transform: rotate(90deg);
}

/* In-flight requests stay visible while the panel is collapsed. These read the surface's
   own state classes, so the JS needs no second code path to report them. */
.customer-resolution-summary-flag {
  border-radius: 3px;
  display: none;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 1px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.customer-resolution-summary-flag-queued {
  background: #E3F2FD;
  color: #1565C0;
}

.customer-resolution-summary-flag-attention {
  background: #FFF8E1;
  color: #8a5300;
}

.customer-resolution-disclosure:has(.customer-resolution-state-queued):not(:has(.customer-resolution-needs-attention)) .customer-resolution-summary-flag-queued,
.customer-resolution-disclosure:has(.customer-resolution-needs-attention) .customer-resolution-summary-flag-attention,
.customer-resolution-card:has(.customer-resolution-state-queued):not(:has(.customer-resolution-needs-attention)) .customer-resolution-summary-flag-queued,
.customer-resolution-card:has(.customer-resolution-needs-attention) .customer-resolution-summary-flag-attention {
  display: inline-block;
}

/* ---- Collapsed card on customers.html ----
   The card header IS the summary. It keeps .detail-header's padding and layout from the page;
   these rules only make it behave like a toggle. */
.customer-resolution-card-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.customer-resolution-card-summary::-webkit-details-marker {
  display: none;
}

.customer-resolution-card-summary:focus-visible {
  outline: 2px solid #448727;
  outline-offset: -2px;
}

.customer-resolution-card-summary:hover .detail-title {
  color: #36711e;
}

/* Closed, the header is the whole card: no divider line under it. */
.customer-resolution-card:not([open]) > .customer-resolution-card-summary {
  border-bottom: 0;
}

.customer-resolution-card-summary-meta {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px;
  justify-content: flex-end;
}

/* The expanded panel on the quote header is its own card. On customers.html the surface
   already sits inside a .detail-card body, so it gets no second border. */
.customer-resolution-disclosure > [data-customer-resolution-surface] {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-top: 6px;
  padding: 12px 14px;
}

/* ---- Surface body (both hosts) ---- */

[data-customer-resolution-surface] {
  color: #333;
  font-size: 13px;
  line-height: 1.4;
}

.customer-resolution-availability {
  color: #555;
  font-size: 12px;
  margin-bottom: 10px;
}

.customer-resolution-controls {
  display: grid;
  gap: 10px;
  /* On the wide customers card, forms that sprawl edge to edge read as unfinished. */
  max-width: 880px;
}

.customer-resolution-controls-title,
.customer-resolution-evidence-title {
  color: #767676;
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin: 0;
  text-transform: uppercase;
}

/* Both hosts already title the panel (the quote summary line, the customers card header);
   keep this heading for screen readers only. */
[data-customer-resolution-surface] .customer-resolution-controls-title {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Mirror evidence is reference material, not the task: small and muted. */
.customer-resolution-evidence {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  display: grid;
  gap: 6px;
  padding: 8px 10px;
}

.customer-resolution-evidence-item + .customer-resolution-evidence-item {
  border-top: 1px solid #eee;
  padding-top: 6px;
}

.customer-resolution-company-name {
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.customer-resolution-company-details {
  color: #767676;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* "Technical details": closed by default, one quiet line until someone asks. */
.customer-resolution-technical {
  margin-top: 2px;
}

.customer-resolution-technical-summary {
  color: #767676;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
  user-select: none;
}

.customer-resolution-technical-summary::-webkit-details-marker {
  display: none;
}

.customer-resolution-technical-summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s;
}

.customer-resolution-technical[open] > .customer-resolution-technical-summary::before {
  transform: rotate(90deg);
}

.customer-resolution-technical-summary:hover {
  color: #36711e;
}

.customer-resolution-technical-summary:focus-visible {
  outline: 2px solid #448727;
  outline-offset: 2px;
}

.customer-resolution-technical-item + .customer-resolution-technical-item {
  margin-top: 1px;
}

.customer-resolution-evidence-empty,
.customer-resolution-empty {
  color: #767676;
  font-size: 12px;
  font-style: italic;
}

/* ---- Target lookup + operation forms: tidy sub-cards ---- */

.customer-resolution-target-lookup,
.customer-resolution-operation {
  align-items: end;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  display: grid;
  gap: 8px 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: 10px 12px;
}

/* Flex, not grid: in a grid, the full-width search results would widen the button's
   auto-sized column and squeeze the search field (measured at 134px). */
.customer-resolution-target-lookup {
  align-items: flex-end;
  background: #fafafa;
  display: flex;
  flex-wrap: wrap;
}

.customer-resolution-target-lookup > * {
  flex: 0 0 100%;
}

.customer-resolution-target-lookup > .customer-resolution-field {
  flex: 1 1 200px;
  max-width: 420px;
}

.customer-resolution-target-lookup > button {
  flex: none;
}

.customer-resolution-operation {
  background: #fff;
}

/* Everything that is not a labelled field spans the full row, so fields line up in columns.
   Two separate rules on purpose: a browser without :has() drops a whole selector list that
   contains it, which would also lose the first (plain) selector. */
.customer-resolution-operation > :not(.customer-resolution-field):not(button) {
  grid-column: 1 / -1;
}
.customer-resolution-operation > .customer-resolution-field:has(input[type=checkbox]) {
  grid-column: 1 / -1;
}

.customer-resolution-operation > button {
  grid-column: 1 / -1;
  justify-self: start;
}

.customer-resolution-target-title,
.customer-resolution-operation-title {
  color: #333;
  display: block;
  font-size: 12px;
  font-weight: 700;
}

/* An operation the server has not enabled reads as unavailable, not as broken. */
.customer-resolution-operation:has(.customer-resolution-operation-unavailable) {
  background: #fafafa;
}

.customer-resolution-operation:has(.customer-resolution-operation-unavailable) .customer-resolution-operation-title {
  color: #555;
}

.customer-resolution-operation-unavailable {
  background: #f1f1f1;
  border-radius: 3px;
  color: #555;
  font-size: 12px;
  padding: 6px 8px;
}

.customer-resolution-target-selection,
.customer-resolution-repoint-source {
  color: #555;
  font-size: 12px;
}

.customer-resolution-error {
  color: #C62828;
  font-size: 12px;
  font-weight: 600;
}

/* Labels above inputs, matching .form-label. */
.customer-resolution-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.customer-resolution-field-label {
  color: #767676;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* The checkbox row reads left-to-right: [x] explanation. */
.customer-resolution-field:has(input[type=checkbox]) {
  align-items: center;
  cursor: pointer;
  flex-direction: row-reverse;
  gap: 8px;
  justify-content: flex-end;
}

.customer-resolution-field:has(input[type=checkbox]) .customer-resolution-field-label {
  color: #555;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

[data-customer-resolution-surface] input[type=text],
[data-customer-resolution-surface] input[type=search],
[data-customer-resolution-surface] select {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  font-family: inherit;
  font-size: 13px;
  min-height: 34px;
  padding: 6px 10px;
  width: 100%;
}

[data-customer-resolution-surface] input[type=checkbox] {
  accent-color: #448727;
  flex: none;
  height: 15px;
  margin: 0;
  width: 15px;
}

[data-customer-resolution-surface] input:focus,
[data-customer-resolution-surface] select:focus {
  border-color: #448727;
  box-shadow: 0 0 0 3px rgba(68, 135, 39, 0.1);
  outline: none;
}

[data-customer-resolution-surface] input:disabled,
[data-customer-resolution-surface] select:disabled {
  background: #f5f5f5;
  color: #767676;
  cursor: not-allowed;
}

/* Buttons look like the app's .btn-secondary.btn-sm. */
[data-customer-resolution-surface] button {
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  transition: all 0.15s;
  white-space: nowrap;
}

[data-customer-resolution-surface] button:hover:not(:disabled) {
  background: #f5f7f5;
  border-color: #448727;
  color: #36711e;
}

[data-customer-resolution-surface] button:focus-visible {
  outline: 2px solid #448727;
  outline-offset: 2px;
}

[data-customer-resolution-surface] button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ---- Search results ---- */

.customer-resolution-target-results {
  display: grid;
  gap: 6px;
}

.customer-resolution-target-evidence {
  border-top: 1px dashed #e0e0e0;
  padding-top: 6px;
}

/* ---- Request history ---- */

.customer-resolution-controls + .customer-resolution-history-item,
.customer-resolution-controls + .customer-resolution-empty {
  border-top: 1px solid #eee;
  margin-top: 12px;
  padding-top: 10px;
}

.customer-resolution-history-item {
  padding: 6px 0;
}

.customer-resolution-history-item + .customer-resolution-history-item {
  border-top: 1px solid #f0f0f0;
}

.customer-resolution-state {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

/* The state label is a badge, same shape as .followup-status-badge. */
.customer-resolution-label {
  background: #F5F5F5;
  border-radius: 3px;
  color: #555;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.customer-resolution-state-queued .customer-resolution-label {
  background: #E3F2FD;
  color: #1565C0;
}

.customer-resolution-needs-attention .customer-resolution-label {
  background: #FFF8E1;
  color: #8a5300;
}

.customer-resolution-state-applied .customer-resolution-label {
  background: #E8F5E9;
  color: #2E7D32;
}

.customer-resolution-state-rejected .customer-resolution-label {
  background: #FFEBEE;
  color: #C62828;
}

.customer-resolution-state-unknown .customer-resolution-label {
  background: #F5F5F5;
  color: #555;
}

.customer-resolution-detail {
  color: #555;
  flex-basis: 100%;
  font-size: 12px;
}

.customer-resolution-needs-attention .customer-resolution-detail {
  color: #8a5300;
}

.customer-resolution-state-rejected .customer-resolution-detail {
  color: #C62828;
}

.customer-resolution-history-meta {
  color: #767676;
  font-size: 11px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.customer-resolution-history-reason {
  color: #555;
  font-size: 12px;
  font-style: italic;
  margin-top: 2px;
}