/* ============ Completed Repairs page ============ */
.cr-page {
    --ink:#0d2a52; --ink-mid:#51607a; --ink-soft:#8496b0;
    --line:rgba(120,140,170,.22); --accent:#1a5fa8; --accent-soft:rgba(26,95,168,.10);
    --red:#DC2626; --gold:#CA8A04; --teal:#0891B2; --green:#059669; --blue:#2563EB;
    --panel:#fff; --shadow:0 10px 30px rgba(30,60,110,.08);
    max-width:1180px; margin:0 auto; padding:8px 4px 60px;
    color:var(--ink);
    font-family:var(--font-ui);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.cr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cr-title { font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.4px; margin:0; color:var(--ink); }
.cr-subtitle { color:var(--ink-mid); font-size:13.5px; margin-top:4px; }

.cr-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.cr-search { flex:1 1 320px; display:flex; align-items:center; gap:9px; background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:11px 15px; box-shadow:var(--shadow); }
.cr-search input { border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; width:100%;
    font-family:inherit; }
.cr-search svg { color:var(--ink-soft); flex:0 0 auto; }
.cr-controls-hint { font-size:12px; color:var(--ink-soft); }
.cr-spinner { width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--accent);
    border-radius:50%; animation:cr-spin .7s linear infinite; flex:0 0 auto; }
@keyframes cr-spin { to { transform:rotate(360deg); } }

.cr-tablewrap { background:var(--panel); border:1px solid var(--line); border-radius:18px;
    box-shadow:var(--shadow); overflow:hidden; }
.cr-scroll { overflow-x:auto; }
.cr-table { width:100%; border-collapse:collapse; min-width:840px; }
.cr-table thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
    color:var(--ink-soft); font-weight:700; padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
.cr-caret-cell { width:26px; }
.cr-total-cell { text-align:right; }
.cr-table tbody td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; color:var(--ink); }

.cr-row { cursor:pointer; transition:background .12s ease; }
.cr-row:hover { background:var(--accent-soft); }
.cr-sub { font-size:12px; color:var(--ink-soft); }
.cr-cust { display:flex; flex-direction:column; }
.cr-cust b { font-weight:700; }
.cr-cust span { font-size:12px; color:var(--ink-soft); }
.cr-dev { display:flex; align-items:center; gap:10px; }
.cr-dev img { width:34px; height:34px; border-radius:9px; object-fit:cover; background:#e5ecf5; flex:0 0 auto; border:1px dashed var(--line); }
.cr-dev .cr-n { font-size:13px; line-height:1.25; }
.cr-tech { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.cr-tech img { width:26px; height:26px; border-radius:50%; object-fit:cover; background:#e5ecf5; flex:0 0 auto; }
.cr-rep { font-family:var(--font-num); font-size:11.5px; color:var(--gold);
    border:1.4px dashed rgba(202,138,4,.5); background:rgba(202,138,4,.06); border-radius:7px; padding:3px 8px; white-space:nowrap; }
.cr-photos { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cr-money { font-family:var(--font-num); font-weight:800; color:var(--green); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cr-turn { font-family:var(--font-num); font-size:12.5px; color:var(--ink-mid); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cr-caret { color:var(--ink-soft); transition:transform .18s ease; }
.cr-row.open .cr-caret { transform:rotate(90deg); color:var(--accent); }
.cr-empty { text-align:center; color:var(--ink-soft); padding:40px 16px; font-size:14px; }

/* drawer */
.cr-detail td { padding:0 !important; border-bottom:1px solid var(--line); }
.cr-drawer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.cr-detail.open .cr-drawer { max-height:1200px; }
.cr-drawer-in { padding:6px 22px 26px; text-align:left; }
.cr-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:26px; }
@media (max-width:760px) { .cr-grid { grid-template-columns:1fr; } }
.cr-block-label { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-soft);
    font-weight:800; margin:2px 0 14px; text-align:left; }

/* timeline */
.cr-timeline { margin-left:6px; text-align:left; }
.cr-tl { position:relative; padding:0 0 18px 26px; border-left:2px solid var(--line); text-align:left; }
.cr-tl:last-child { border-left-color:transparent; padding-bottom:2px; }
.cr-dot { position:absolute; left:-13px; top:-2px; width:24px; height:24px; border-radius:50%;
    background:#fff; border:2px solid currentColor; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:currentColor; line-height:1; }
.cr-tl-n { font-weight:700; font-size:13.5px; color:var(--ink); text-align:left; }
.cr-tl-meta { font-size:12px; color:var(--ink-mid); margin-top:2px; font-variant-numeric:tabular-nums; text-align:left; }
.cr-tl-prov { font-size:11.5px; font-weight:700; }
.cr-tl-created  { color:var(--red); }
.cr-tl-ordered  { color:var(--gold); }
.cr-tl-received { color:var(--teal); }
.cr-tl-progress { color:var(--gold); }
.cr-tl-completed{ color:var(--green); }
.cr-tl-finalized{ color:var(--accent); }

/* items + summary */
.cr-idetail { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cr-irow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px;
    border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.cr-pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.cr-sum { padding:11px 14px; background:linear-gradient(rgba(5,150,105,.05),rgba(5,150,105,.05)),#fff; }
.cr-sr { display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; }
.cr-sr.cr-total b { color:var(--ink); } .cr-sr.cr-total span { color:var(--green); font-weight:800; }
.cr-sr.cr-dep span { color:var(--gold); }
.cr-sr.cr-bal b, .cr-sr.cr-bal span { color:var(--red); font-weight:800; }
.cr-sr.cr-tax span { color:var(--ink-mid); }
.cr-sr.cr-paid b, .cr-sr.cr-paid span { color:var(--red); font-weight:800; }
.cr-sr.cr-pay-method { border-top:1px solid var(--line); margin-top:5px; padding-top:9px; }
.cr-sr.cr-pay-method span:first-child { color:var(--ink-soft); text-transform:uppercase; font-size:11px; letter-spacing:.5px; font-weight:700; }
.cr-sr.cr-pay-method span:last-child { color:var(--ink); font-weight:700; }

.cr-meta-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.cr-chip { font-size:12px; font-weight:600; color:var(--ink-mid); background:#fff; border:1px solid var(--line);
    border-radius:10px; padding:7px 11px; }
.cr-chip b { color:var(--ink); font-weight:700; }
.cr-notes { margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    font-size:13px; color:var(--ink-mid); }
.cr-notes .cr-block-label { margin:0 0 6px; }

/* ── Two archives: Completed / Closed ─────────────────────────────────────── */
.cr-tabs { display:inline-flex; gap:6px; }
.cr-tabs button { border:1px solid var(--line); background:var(--panel); color:var(--ink-mid); border-radius:999px; padding:8px 14px;
    font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.cr-tabs button b { font-size:11px; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:1px 7px; }
.cr-tabs button.on { background:var(--accent); color:#fff; border-color:transparent; }
.cr-tabs button.on b { background:rgba(255,255,255,.22); color:#fff; }
.cr-owed { font-family:var(--font-num); font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cr-sum-closed { background:linear-gradient(rgba(100,116,139,.06),rgba(100,116,139,.06)),#fff; }
.cr-sr.cr-tight { border-top:0; margin-top:0; padding-top:4px; }
.cr-tl-parked { color:#d97706; }
.cr-tl-closed { color:#64748b; }

/* ── Upgrade part (Luis, 2026-09-26) ──────────────────────────────────────
   The button on each finished line, and the dialog it opens: the Apple
   sheet the trade-in dialog uses — white card on a dimmed ground, grey field
   faces, blue for the chosen option. Only Cancel or Continue close it. */
.cr-upg-btn {
  margin-left: 8px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #0a5fcf; background: rgba(10, 132, 255, .09); border: 1px solid rgba(10, 132, 255, .25);
  vertical-align: middle; transition: background .15s ease;
}
.cr-upg-btn:hover { background: rgba(10, 132, 255, .16); }

.upg-overlay { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.upg-overlay.open { display: flex; }
.upg-card { width: min(94vw, 640px); max-height: 92vh; overflow-y: auto; box-sizing: border-box;
  background: #ffffff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 22px; padding: 20px 24px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .08); color: #1d1d1f; font-family: var(--font-ui, inherit); }
.upg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.upg-head b { font-size: 17px; }
.upg-order { font-size: 12px; color: #6e6e73; text-align: right; }
.upg-lbl { margin: 12px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #86868b; }
.upg-old { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #f5f5f7; font-size: 13px; }
.upg-old span { color: #6e6e73; white-space: nowrap; }
.upg-search input, .upg-price input, .upg-note {
  width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; font: inherit; font-size: 13.5px; color: #1d1d1f;
  background: #f5f5f7; border: 1px solid rgba(0, 0, 0, .06); outline: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.upg-search input { text-align: center; }
.upg-search input::placeholder { letter-spacing: .18em; font-weight: 600; font-size: 12px; color: #8e9095; }
.upg-search input:focus::placeholder { color: transparent; }
.upg-search input:focus, .upg-price input:focus, .upg-note:focus { background: #fff; border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, .18); }
.upg-results { max-height: 230px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.upg-results:empty { display: none; }
.upg-part { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; background: #fff; border: 1px solid rgba(0, 0, 0, .06); transition: background .12s ease; }
.upg-part:hover { background: #f0f6ff; border-color: rgba(10, 132, 255, .25); }
.upg-part img, .upg-noimg { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #f5f5f7; flex: 0 0 auto; }
.upg-pn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.upg-pn b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-pn small { font-size: 11px; color: #6e6e73; }
.upg-pq { font-size: 11px; font-weight: 700; color: #248a3d; white-space: nowrap; }
.upg-pq.out { color: #c0392b; }
.upg-pp { font-size: 13px; white-space: nowrap; }
.upg-none { font-size: 12px; color: #86868b; padding: 8px 4px; }
.upg-new { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 14px; border-radius: 12px;
  background: #fff; border: 1px solid #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, .12); }
.upg-new img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #f5f5f7; }
.upg-new span { display: flex; flex-direction: column; min-width: 0; }
.upg-new b { font-size: 13px; }
.upg-new small { font-size: 11.5px; color: #6e6e73; }
.upg-new[hidden] { display: none; }
.upg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upg-price { position: relative; }
.upg-price span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #86868b; font-size: 14px; }
.upg-price input { padding-left: 26px; text-align: right; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.upg-hint { margin-top: 5px; font-size: 11px; color: #6e6e73; line-height: 1.35; }
.upg-seg { display: flex; gap: 6px; }
.upg-seg button { flex: 1 1 0; padding: 10px 8px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #1d1d1f; background: #f5f5f7; border: 1px solid rgba(0, 0, 0, .06); transition: background .12s ease, border-color .12s ease; }
.upg-seg button:hover:not(:disabled) { background: #ebebf0; }
.upg-seg button.on { background: #fff; border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, .16); color: #0a5fcf; }
.upg-seg button:disabled { opacity: .4; cursor: default; }
.upg-sum { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f5f5f7; font-size: 13px; }
.upg-sum > div { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.upg-sum b { font-variant-numeric: tabular-nums; }
.upg-sum .upg-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 15px; }
.upg-sum .upg-total b { font-size: 17px; }
.upg-profit { font-size: 11.5px; color: #248a3d; justify-content: flex-end !important; }
.upg-profit:empty { display: none !important; }
.upg-note { margin-top: 12px; }
.upg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.upg-btn { border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.upg-cancel { background: #f5f5f7; color: #1d1d1f; border: 1px solid rgba(0, 0, 0, .08); }
.upg-cancel:hover { background: #ebebf0; }
.upg-go { color: #fff; border: 0; background: radial-gradient(130% 120% at 22% 10%, #6db6ff 0%, #1a84f2 45%, #0a5fcf 100%);
  box-shadow: 0 6px 18px rgba(0, 102, 204, .30), inset 0 1px 0 rgba(255, 255, 255, .45); }
.upg-go:disabled { opacity: .4; cursor: default; }
@media (max-width: 560px) { .upg-row { grid-template-columns: 1fr; } }
/* Four payment choices on one row; "Pay on pickup" is the longest word. */
.upg-pay button { font-size: 12.5px; white-space: nowrap; }
/* The summary rows are flex, which beat the [hidden] attribute: the fee row
   showed even when it was meant to be gone (2026-09-26). */
.upg-sum > div[hidden] { display: none; }
/* The "what is missing" line, left of Cancel. */
.upg-foot { align-items: center; }
.upg-need { margin-right: auto; font-size: 12px; font-weight: 600; color: #b45309; }
.upg-need:empty { display: none; }
/* Refund on a finished ticket (Luis, 2026-09-28): the Upgrade button's shape in
   red, the refunded line under the totals, and the badge beside the total. */
.cr-upg-btn.cr-refund-btn { color: #b3141d; background: rgba(179, 20, 29, .08); border-color: rgba(179, 20, 29, .25); margin-left: 0; }
.cr-upg-btn.cr-refund-btn:hover { background: rgba(179, 20, 29, .15); }
.cr-sr.cr-actions { justify-content: flex-end; padding-top: 8px; }
.cr-sr.cr-refunded span { color: #b3141d; font-weight: 700; }
.cr-rf-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #b3141d; background: rgba(179, 20, 29, .10); vertical-align: middle; }