/* ============ Sold Devices page ============ */
.sd-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; --green:#059669; --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;
}

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

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

.sd-tablewrap { background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.sd-scroll { overflow-x:auto; }
.sd-table { width:100%; border-collapse:collapse; min-width:760px; }
.sd-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; }
.sd-caret-cell { width:26px; }
.sd-price-cell { text-align:right; }
.sd-table tbody td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; color:var(--ink); }

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

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

/* device specs */
.sd-specs { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.sd-spec { display:flex; justify-content:space-between; gap:10px; font-size:13px; border-bottom:1px dotted var(--line); padding-bottom:6px; }
.sd-spec span { color:var(--ink-soft); }
.sd-spec b { color:var(--ink); font-weight:700; text-align:right; }
.sd-spec.sd-shelf b { color:var(--accent); }
.sd-ic { display:inline-flex; align-items:center; gap:6px; }
.sd-grade-ico { width:26px; height:26px; object-fit:contain; flex:0 0 auto; }
.sd-bat-ico { flex:0 0 auto; }

/* sale money box */
.sd-money-box { background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.sd-mr { display:flex; justify-content:space-between; font-size:14px; padding:4px 0; color:var(--ink-mid); font-variant-numeric:tabular-nums; }
.sd-num { font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.sd-photos { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.sd-mr .sd-sold { color:var(--ink); font-weight:700; }
.sd-mr-profit { border-top:1px solid var(--line); margin-top:4px; padding-top:8px; font-weight:800; }
.sd-mr-profit span:first-child { color:var(--ink); }
.sd-pos { color:var(--green); font-weight:800; }
.sd-neg { color:var(--red); font-weight:800; }

.sd-meta-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.sd-chip { font-size:12px; font-weight:600; color:var(--ink-mid); background:#fff; border:1px solid var(--line); border-radius:10px; padding:7px 11px; }
.sd-chip b { color:var(--ink); font-weight:700; }
.sd-seller { margin-top:16px; }
.sd-seller .sd-block-label { margin:0 0 8px; }
.sd-seller-row { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink); }
.sd-seller-row img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#e5ecf5; }

/* Returned badge + return details + button */
.sd-returned { display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:.4px; color:var(--red); background:rgba(220,38,38,.10); border:1px solid rgba(220,38,38,.35);
    border-radius:999px; padding:2px 8px; vertical-align:middle; }
.sd-return-btn { margin-top:14px; width:100%; padding:11px 14px; border-radius:11px; cursor:pointer;
    border:1.5px solid #DC2626; background:rgba(220,38,38,.12); color:#DC2626;
    font-size:13.5px; font-weight:800; font-family:inherit; }
.sd-return-btn:hover { background:#DC2626; color:#fff; }
.sd-return-box { margin-top:14px; background:rgba(220,38,38,.04); border:1px solid rgba(220,38,38,.22);
    border-radius:14px; padding:12px 14px; }
.sd-return-box .sd-block-label { margin:0 0 8px; color:var(--red); }
.sd-pbadge { display:inline-block; font-size:12.5px; font-weight:800; padding:5px 12px; border-radius:999px; }
.sd-oem { color:var(--green); background:rgba(5,150,105,.12); }
.sd-am { color:var(--red); background:rgba(220,38,38,.12); }
.sd-parts { display:flex; flex-wrap:wrap; gap:6px; }
.sd-part { font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.sd-by-mini { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--ink); }
.sd-by-mini img { width:20px; height:20px; border-radius:50%; object-fit:cover; background:#e5ecf5; }

/* Return modal + pin pad (defined here too since they render outside .sd-page) */
.ret-overlay, .ret-pin-overlay {
    --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; --green:#059669;
}
.ret-overlay { position:fixed; inset:0; z-index:5000; display:none; align-items:center; justify-content:center;
    background:rgba(15,30,55,.45); backdrop-filter:blur(5px); padding:20px; }
.ret-overlay.open { display:flex; }
.ret-card { width:440px; max-width:94vw; max-height:92vh; overflow-y:auto; background:#fff; border-radius:20px;
    padding:22px 22px 18px; box-shadow:0 24px 60px rgba(20,45,90,.3);
    font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }
.ret-title { font-size:19px; font-weight:800; color:var(--ink); }
.ret-device { font-size:13px; color:var(--ink-mid); margin:2px 0 16px; font-weight:600; }
.ret-field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.ret-field label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); }
.ret-field input, .ret-field select, .ret-field textarea { border:1.5px solid #c3d0e2; border-radius:10px;
    padding:10px 12px; font-size:14px; font-family:inherit; color:var(--ink); outline:none; background:#f3f6fb; }
.ret-field input::placeholder, .ret-field textarea::placeholder { color:#9fb0c6; }
.ret-field input:focus, .ret-field select:focus, .ret-field textarea:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft); }
.ret-row { display:flex; gap:12px; }
.ret-row .ret-field { flex:1; }
.ret-methods { display:flex; gap:8px; }
.ret-method-btn { flex:1; padding:10px 0; border:1.5px solid #c3d0e2; background:#f3f6fb; border-radius:10px;
    font-size:13px; font-weight:700; color:var(--ink-mid); cursor:pointer; font-family:inherit; }
.ret-method-btn.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }

/* Return PIN pad */
.ret-pin-overlay { position:fixed; inset:0; z-index:5200; display:none; align-items:center; justify-content:center;
    background:rgba(15,30,55,.55); backdrop-filter:blur(6px); padding:20px; }
.ret-pin-overlay.open { display:flex; }
.ret-pin-card { width:300px; max-width:92vw; background:#fff; border-radius:20px; padding:24px; text-align:center;
    box-shadow:0 24px 60px rgba(20,45,90,.35); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }
.ret-pin-card.shake { animation:ret-shake .45s; }
@keyframes ret-shake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(-7px)} 50%{transform:translateX(7px)} }
.ret-pin-title { font-size:18px; font-weight:800; color:var(--ink); }
.ret-pin-sub { font-size:12.5px; color:var(--ink-mid); margin-top:5px; min-height:17px; }
.ret-pin-sub.err { color:var(--red); font-weight:700; }
.ret-pin-display { display:flex; justify-content:center; gap:10px; margin:16px 0 18px; }
.ret-pin-slot { width:44px; height:52px; border:1.5px solid #c3d0e2; border-radius:12px; background:#f3f6fb;
    display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:var(--ink); }
.ret-pin-slot.filled { border-color:var(--accent); background:var(--accent-soft); }
.ret-pin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ret-pin-grid button { height:54px; border:1px solid #e2e8f0; background:#f8fafc; border-radius:13px; font-size:21px;
    font-weight:700; color:var(--ink); cursor:pointer; font-family:inherit; }
.ret-pin-grid button:hover { background:#eef4fb; border-color:var(--accent); }
.ret-pin-grid button:active { transform:scale(.94); }
.ret-pin-spacer { visibility:hidden; }
.ret-pin-cancel { margin-top:14px; width:100%; height:42px; border:0; background:transparent; color:var(--ink-mid);
    font-size:14px; font-weight:600; cursor:pointer; border-radius:11px; font-family:inherit; }
.ret-pin-cancel:hover { background:#f1f5f9; }
.ret-actions { display:flex; gap:10px; margin-top:6px; }
.ret-cancel { flex:0 0 auto; padding:11px 18px; border:1px solid var(--line); background:#fff; border-radius:11px;
    font-weight:700; font-size:14px; color:var(--ink-mid); cursor:pointer; font-family:inherit; }
.ret-submit { flex:1; padding:11px 14px; border:0; border-radius:11px; background:var(--red); color:#fff;
    font-weight:800; font-size:14px; cursor:pointer; font-family:inherit; }
.ret-submit:hover { background:#b91c1c; }
.ret-submit:disabled { opacity:.6; cursor:default; }

/* Tax row in the sale breakdown — amber like the deposit/adjustment rows */
.sd-mr-tax span:last-child { color: var(--amber, #CA8A04); }