/* Order Management > Cancellations (Testing) -- Frank Pina's daily
   cancellation method, automated (js/views/cancellations.js, REQ-072).
   Token-driven like finance_lender.css; the amber literals are the
   provisional/testing treatment (this page is in parallel-run with Ops and
   deliberately looks "under review"). */

#cancellationsView { font-family: var(--font-stack); color: var(--navy); }
.cx-empty { padding: 28px; color: #6b7280; font-size: var(--text-body); }

/* --- TESTING banner (amber provisional treatment -- the loud one) ------ */
.cx-testing {
  background: #fff7e6;
  border: 1px solid #f0c36d;
  border-left: 6px solid #d97706;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: #7a4e06;
}
.cx-testing-title {
  font-weight: 800; font-size: var(--text-eyebrow); letter-spacing: .05em;
  text-transform: uppercase; color: #b45309; margin-bottom: 5px;
}
.cx-testing p { margin: 0; }
.cx-testing b { color: #92400e; }

/* --- Controls (inside the content, like Traffic / Finance Lender) ------ */
.cx-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--table-border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.cx-controls label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #6b7280;
}
.cx-controls select, .cx-controls input[type="date"] {
  font-size: var(--fs-body); font-family: inherit; font-weight: 600; color: var(--navy);
  background: var(--light-bg); border: 1px solid var(--table-border);
  border-radius: 6px; padding: 6px 10px;
}
.cx-controls select { cursor: pointer; }
.cx-asof { margin-left: auto; font-size: var(--fs-label); color: #6b7280; }

/* --- KPI cards --------------------------------------------------------- */
.cx-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cx-kpi {
  flex: 1 1 130px; min-width: 130px;
  background: #fff; border: 1px solid var(--table-border); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow);
}
.cx-kpi-v { font-size: 22px; font-weight: 800; color: var(--navy); }
.cx-kpi-l { font-size: var(--fs-label); color: #6b7280; margin-top: 2px; line-height: 1.35; }
.cx-kpi-main { border-left: 5px solid #b43c2a; }
.cx-kpi-main .cx-kpi-v { color: #b43c2a; }
.cx-kpi-fresh { border-left: 5px solid #0b6e4f; }
.cx-kpi-fresh .cx-kpi-v { color: #0b6e4f; }
.cx-kpi-aged { border-left: 5px solid #d97706; }
.cx-kpi-aged .cx-kpi-v { color: #b45309; }
.cx-kpi-muted { opacity: .72; }
.cx-owner { color: #6b7280; font-weight: 600; }

/* --- Sections & tables ------------------------------------------------- */
.cx-section {
  background: #fff; border: 1px solid var(--table-border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.cx-section h3 { margin: 0 0 6px; font-size: var(--text-h3); color: var(--navy); }
.cx-sub { margin: 0 0 10px; font-size: var(--fs-label); color: #6b7280; line-height: 1.5; }
.cx-none { color: #9ca3af; font-size: var(--fs-body); padding: 6px 2px; }
.cx-muted-section { opacity: .92; background: #fafafa; }

.cx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.cx-table th {
  text-align: left; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .04em; color: #6b7280; font-weight: 700;
  border-bottom: 2px solid var(--table-border); padding: 6px 8px;
  position: sticky; top: 0; background: #fff;
}
.cx-table td { border-bottom: 1px solid var(--table-border); padding: 6px 8px; }
.cx-table tr:last-child td { border-bottom: none; }
.cx-table .r, .cx-table th.r { text-align: right; }
.cx-table tr.cx-mkt td { font-weight: 700; background: var(--light-bg); }
.cx-table tr.cx-dim td { color: #9ca3af; }
.cx-narrow { max-width: 560px; }
.cx-flag-aged {
  background: #fde8e5; color: #b43c2a; font-weight: 700; font-size: var(--fs-label);
  border-radius: 4px; padding: 1px 7px;
}
.cx-verify { color: #b45309; font-weight: 600; font-size: var(--fs-label); }

/* --- Chart ------------------------------------------------------------- */
.cx-chart-wrap { position: relative; height: 240px; }

/* --- Notes ------------------------------------------------------------- */
.cx-notes ul { margin: 6px 0 10px; padding-left: 20px; }
.cx-notes li { margin-bottom: 5px; line-height: 1.5; font-size: var(--fs-body); }
.cx-foot { font-size: var(--fs-label); color: #9ca3af; border-top: 1px solid var(--table-border); padding-top: 8px; }