/* ============================================================
   Active Repairs — Cell Phone Planet
   Google Card-Inspired Horizontal Layout
   ============================================================ */

/* House type stack (--font-ui / --font-num defined in ../index.css) */
.main-content, .slide-toast {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --primary: #2563EB;
    --primary-mid: #3B82F6;
    --primary-light: #60A5FA;
    --accent: #F97316;
    --accent-hover: #EA580C;
    --bg-light: #F8FAFC;
    --text-dark: #1E293B;
    --text-mid: #475569;
    --text-muted: #94A3B8;
    --success: #34D399;
    --success-dark: #10B981;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --warning: #FBBF24;
    --warning-light: #FEF3C7;
    --card-bg: #FFFFFF;
    /* Identity band — an off-white that sits just below the pure-white card so
       the header reads as its own surface. Swap this one value to retune:
       #FAFBFC cooler/lighter · #F6F7F9 deeper · #FAF9F7 warm. */
    --identity-bg: #F8F9FB;
    /* Section labels. Only a step lighter than --text-muted on purpose: that
       grey is already ~2.6:1 on white at 10px, and going much paler stops
       being readable on a shop floor. Try #B0BBC9 for fainter, #94A3B8 to
       revert. Weight 500 is doing more of the work than this colour is. */
    --label-quiet: #A3AFC0;
    --card-border: #E2E8F0;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 8px 30px rgba(37, 99, 235, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --radius: 16px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== BACKGROUND (inherited from index.css via 1234.png) ========== */

/* ========== FILTER SECTION ========== */
.filter-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    gap: 14px;
    align-items: center;
}

.filter-input {
    flex: 1;
    background: var(--bg-light);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    color: var(--text-dark);
    font-size: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.filter-input::placeholder {
    color: var(--text-muted);
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.filter-select {
    background: var(--bg-light);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    color: var(--text-dark);
    font-size: 14px;
    min-width: 180px;
    cursor: pointer;
    transition: border-color var(--transition);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ========== SLIDE TOAST NOTIFICATION ========== */
.slide-toast {
    position: fixed;
    top: 24px;
    right: -400px;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    z-index: 10000;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 360px;
}
.slide-toast-ok {
    background: #16A34A;
}
.slide-toast-err {
    background: #EF4444;
}
.slide-toast-show {
    right: 24px;
}

/* ========== SECTION DIVIDER ========== */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), rgba(249, 115, 22, 0.2), transparent);
    margin: 24px 0;
}

/* ========== COMPLETED REPAIRS SECTION ========== */
.completed-section {
    text-align: center;
}
.completed-section-header {
    margin-bottom: 12px;
}
.completed-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #0d2a52;
}
.completed-repairs-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.completed-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(100, 160, 220, 0.30);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(60, 100, 180, 0.08);
    min-width: 0;
}
.completed-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.completed-img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid rgba(100, 160, 220, 0.2);
    background: rgba(255,255,255,0.6);
    flex-shrink: 0;
}
.completed-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.completed-name {
    font-size: 11px;
    font-weight: 600;
    color: #0d2a52;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.completed-total {
    font-size: 11px;
    font-weight: 700;
    color: #22C55E;
}
.completed-count {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #2563EB;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}
.completed-print-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.06);
    color: #2563EB;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.completed-print-btn:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.4);
}

/* ========== REPAIRS GRID — wider cards ========== */
.repairs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

/* ========== REPAIR CARD ========== */
.repair-card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
        box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.22),
    0 10px 13px 0px rgba(0, 0, 0, 0.102),
    inset 0 18px 18px 0 rgba(255, 255, 255, 0.35),
    inset 0 -18px 18px 0 rgba(0, 0, 0, 0.1);
    transition: transform var(--transition), box-shadow var(--transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.repair-card:hover {
    transform: translateY(-3px);

}

/* The identity band used to carry a pay-status tint (green/red/gold) as an
   at-a-glance cue. Dropped in favour of a neutral band — the pay status is
   already stated by the coloured radio pills a few rows down, so nothing is
   lost, and a card-wide colour wash fought the rest of the surface.
   data-pay stays on .repair-card; it's still read by the JS filters. */

/* -- Shared row padding -- */
.card-row {
    padding: 0 24px;
}

/* ============================
   ROW 1 — Identity Row
   ============================ */
.card-row-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 14px;
    background: var(--identity-bg);
    border-bottom: 1px solid #F1F5F9;
}

.identity-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.customer-avatar {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    object-fit: contain;
    border: 1px dashed var(--card-border);
    background: var(--bg-light);
    padding: 2px;
    flex-shrink: 0;
}

.identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.customer-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    /* House blue, same as the customer fields on checkout. Literal fallback
       because activerepairs.css redefines --accent, so the token has to come
       from index.css's :root — if that file ever fails to load, this still
       renders blue instead of black. */
    color: var(--brand-blue, #1a5fa8);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Names arrive however they were typed — "mark", "Jose Luis", "TIENDA" —
       and a column of mixed casing reads as untidy data rather than as a list
       of people. Uppercased here rather than in PHP on purpose: text-transform
       is a rendering change, so textContent still returns the real name, and
       arCardCustomer() below feeds that straight into the WhatsApp and email
       templates. strtoupper() at the source would shout the customer's name
       back at them in every message. */
    text-transform: uppercase;
}

.identity-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-right: -13px;
    margin-top: -70px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    color: var(--text-mid);
      background: #f0efef;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 15px 15px 30px #f0efef,
             -15px -15px 30px #ffffff;
}

.icon-btn:hover {
    transform: translateY(-1px);
}

.icon-btn-edit:hover {
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--primary-light);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.icon-btn-delete:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--danger);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
}

/* ============================
   ROW 2 — Repair name + order tag
   ============================ */
.card-row-repair {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F1F5F9;
}

.repair-title {
    display: block;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    background: linear-gradient(90deg, #2563EB 0%, #F97316 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Divider between grouped items */
.item-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), rgba(249, 115, 22, 0.2), transparent);
    margin: 6px 0;
}

/* Order items summary (stacked in header) */
.order-items-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-light, #F8FAFC);
    border: 1px solid var(--card-border, #E2E8F0);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 24px 10px;
}
.order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
}
.order-summary-row + .order-summary-row {
    border-top: 1px solid var(--card-border, #E2E8F0);
}
/* WRAPS. This was one line with an ellipsis, which on MobileSentrix titles —
   "OLED Assembly With Frame (A366 / 2025) (Refurbished) (Black)" — cut off the
   half that says which variant you are looking at, and took the sourcing pill
   with it when the name ran long enough.

   No line-clamp either. Clamping at two lines would just move the cliff, and
   the point is that nothing on this row should be unreadable: the information
   exists, the row simply was not tall enough to show it. Rows grow only when
   they need to, so a list of short names looks exactly as it did.

   break-word rather than anywhere: it splits a long token only when there is no
   other way, so "(A366 / 2025)" breaks at its spaces first and stays legible
   instead of being chopped mid-code. */
.order-summary-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mid, #475569);
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
}
/* The figure must never wrap — it is short, and a broken price is unreadable
   in a way a broken part name is not. */
.order-summary-price { white-space: nowrap; }

/* Same treatment on the single-part card. It had no ellipsis, so it already
   wrapped, but as a flex item it needed min-width:0 to be allowed to. */
.part-name { min-width: 0; overflow-wrap: break-word; }
.part-label-row { align-items: flex-start; }
/* Was #10B981 on every figure, which made the item lines shout as loudly as
   the total. Now matched to the single-item breakdown: item rows and Subtotal
   in --text-mid, Tax quieter, Total carrying the weight. */
.order-summary-price {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-mid, #475569);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
}
/* Tax is a component of the number below it, not a peer — same treatment as
   .price-tax on the single-item chip. */
.order-summary-row.osr-tax .order-summary-name,
.order-summary-row.osr-tax .order-summary-price {
    font-weight: 500;
    color: var(--label-quiet, #A3AFC0);
}
.order-summary-total {
    border-top: 2px solid var(--card-border, #E2E8F0) !important;
}
.order-summary-total .order-summary-name {
    font-weight: 700;
    color: var(--text-dark);
}
.order-summary-total .order-summary-price {
    font-size: 15px;
    color: var(--text-dark);
}
.osr-deposit .order-summary-name,
.osr-deposit .order-summary-price { color: #D97706; }
.osr-balance .order-summary-name,
.osr-balance .order-summary-price { color: #EF4444; }

/* ── Total takes its colour from the ticket's pay status ────────────────────
   Paid = green, Pay on Pickup = red, Deposit = gold — the same three colours
   render_pay_status() uses for the radios above. data-pay already sits on
   .repair-card for the JS filters, so no extra markup is needed.
   Balance Due is excluded: when there's a deposit it stays red because it's
   money still owed, whatever the status says. */
.repair-card[data-pay="Paid"] .osr-total .order-summary-price,
.repair-card[data-pay="Paid"] .price-row.price-total span:last-child {
    color: #059669;
}
.repair-card[data-pay="Pay on Pickup"] .osr-total .order-summary-price,
.repair-card[data-pay="Pay on Pickup"] .price-row.price-total span:last-child {
    color: #DC2626;
}
.repair-card[data-pay="Deposit"] .osr-total .order-summary-price,
.repair-card[data-pay="Deposit"] .price-row.price-total span:last-child {
    color: #CA8A04;
}

/* Item sub-header row */
.card-row-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0 4px;
}
.item-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.item-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--card-border, #E2E8F0);
    background: var(--bg-light, #F8FAFC);
    padding: 2px;
    flex-shrink: 0;
}

.order-tag {
    font-family: var(--font-num);
    font-size: 10px;
    font-weight: 500;
    color: #b07020;
    background: rgba(249, 115, 22, 0.06);
    border: 1.5px dashed rgba(249, 115, 22, 0.45);
    border-radius: 7px;
    padding: 3px 9px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.repair-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-in-progress {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.status-parts-order {
    background: rgba(249, 115, 22, 0.1);
    color: var(--accent);
    border: 1px solid rgba(249, 115, 22, 0.25);
}

/* ========== DEVICE LOCATION BADGES ========== */
.device-loc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.device-loc-instore {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
    border: 1px solid rgba(37, 99, 235, 0.25);
}
.device-loc-customer {
    background: rgba(217, 119, 6, 0.1);
    color: #B45309;
    border: 1px solid rgba(217, 119, 6, 0.25);
}
.device-loc-unknown {
    background: rgba(100, 116, 139, 0.1);
    color: #64748B;
    border: 1px solid rgba(100, 116, 139, 0.25);
}

/* ========== DEVICE LOCATION SELECTOR (Edit Modal) ========== */
.device-location-row {
    display: flex;
    gap: 8px;
}
.device-loc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 2px dashed var(--card-border);
    background: var(--bg-light);
    color: var(--text-mid);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
}
.device-loc-btn:hover {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.06);
}
.device-loc-icon {
    font-size: 16px;
}
.device-loc-btn.active::after {
    content: '✓';
    font-size: 13px;
    font-weight: 700;
    margin-left: 4px;
}
.device-loc-btn.active[data-value="In Store"] {
    background: rgba(37, 99, 235, 0.1);
    border: 2px solid rgba(37, 99, 235, 0.5);
    color: #2563EB;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.12);
}
.device-loc-btn.active[data-value="With Customer"] {
    background: rgba(37, 99, 235, 0.1);
    border: 2px solid rgba(37, 99, 235, 0.5);
    color: #2563EB;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.12);
}

/* ========== COMPLETE ORDER BUTTON ========== */
.complete-order-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
    color: #16A34A;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.complete-order-btn:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}
/* Locked until the timeline reaches its final phase */
.complete-order-btn:disabled {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.85;
}

/* ========== READY FOR CUSTOMER TOGGLE ========== */
.ready-chip {
    transition: background 0.3s ease, border-color 0.3s ease;
}
.ready-chip.ready-no {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}
.ready-chip.ready-yes {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}
.ready-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.ready-toggle input {
    display: none;
}
.ready-slider {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.4);
    position: relative;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.ready-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.ready-toggle input:checked + .ready-slider {
    background: rgba(34, 197, 94, 0.6);
}
.ready-toggle input:checked + .ready-slider::after {
    transform: translateX(16px);
}
.ready-label {
    font-size: 12px;
    font-weight: 700;
}
.ready-no .ready-label {
    color: #EF4444;
}
.ready-yes .ready-label {
    color: #22C55E;
}

/* Contact row divider */
.contact-divider {
    width: 1px;
    height: 18px;
    background: rgba(100, 160, 220, 0.3);
    flex-shrink: 0;
    margin: 0 2px;
}

/* -- Inline contact buttons under name -- */
.identity-contact-btns {
    display: flex;
    align-items: center;
    gap: 10px;   /* bare 32px glyphs need more air than the old 6px chips did */
    margin-top: 4px;
}

.contact-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid transparent;
    line-height: 1;
}

/* All four are icon-only now, so they get a true circle rather than the
   rounded rectangle .contact-btn-sm hands out. Overrides that rule's
   border-radius/padding by coming later at equal specificity.
   position:relative anchors the call-log badge. */
.contact-btn-icon {
    justify-content: center;
    gap: 0;
    position: relative;
    width: 55px;
    height: 55px;
    padding: 0;
    border-radius: 50%;
}

/* Smaller glyph than the old 32px: inside a circle a wide icon crowds the
   rim, and ~55% of the diameter is what reads as centred. */
.contact-btn-icon .cico { width: 26px; height: 26px; }

/* A circle's corner is outside the disc, so the badge's old -3px/-5px would
   float off in space. Pull it onto the rim. */
.contact-btn-icon .calllog-count { top: 1px; right: 1px; }

/* Bare icons — no chip behind them. The PNGs are white artwork on transparency,
   so they'd be invisible on a light card. Instead of showing the image we use
   its alpha channel as a mask and paint the colour underneath, which keeps the
   per-action colour coding with nothing drawn around the glyph. */
.cico {
    width: 32px;
    height: 32px;
    display: block;
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: background-color .15s ease, transform .15s ease;
}

/* At rest: the same slate as the call log, two steps lighter (#7A8899 vs #475569),
   so the row reads as one set. Colour arrives on hover. */
.cico-email { background-color: #7A8899; -webkit-mask-image: url('icon/email.png');    mask-image: url('icon/email.png'); }
.cico-text  { background-color: #7A8899; -webkit-mask-image: url('icon/text.png');     mask-image: url('icon/text.png'); }
.cico-wa    { background-color: #7A8899; -webkit-mask-image: url('icon/whatsapp.png'); mask-image: url('icon/whatsapp.png'); }

/* On hover: the action's own colour. */
.btn-email-sm:hover    .cico-email { background-color: #6366F1; }
.btn-text-sm:hover     .cico-text  { background-color: #2563EB; }
.btn-whatsapp-sm:hover .cico-wa    { background-color: #12924F; }

/* Call log is unchanged — always the slate mask. */
.cico-log { background-color: #475569; -webkit-mask-image: url('icon/log.png'); mask-image: url('icon/log.png'); }

/* In the glass themes: no chip, no border, no fill — just the glyph.
   Size/shape come from .contact-btn-icon so the circle stays consistent;
   embossed mode re-adds the surface and shadow with !important. */
.btn-email-sm, .btn-text-sm, .btn-whatsapp-sm {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0;
}
.btn-email-sm:hover .cico,
.btn-text-sm:hover .cico,
.btn-whatsapp-sm:hover .cico { transform: scale(1.12); }

.btn-email-sm:active .cico,
.btn-text-sm:active .cico,
.btn-whatsapp-sm:active .cico { transform: scale(0.94); }

/* ========== TEXT POPUP ========== */
.text-popup-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
}

.text-popup {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    width: 320px;
    max-width: 90vw;
    overflow: hidden;
    animation: popIn 0.2s ease;
}

@keyframes popIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.text-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
}

.text-popup-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-dark);
}

.text-popup-close {
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
}

.text-popup-close:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.text-popup-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.text-popup-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-mid);
}

.text-popup-phone-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-light);
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    width: 100%;
    justify-content: center;
}

.text-popup-phone {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.5px;
}

.text-popup-copy {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.text-popup-copy:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.text-popup-sms-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--success-dark);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
}

.text-popup-sms-btn:hover {
    background: #059669;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

/* ============================
   ROW 4 — Detail chips grid
   ============================ */
.card-row-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
}

.detail-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg-light);
    border-radius: var(--radius-xs);
    padding: 10px 12px;
    border: 1px solid #EEF2F7;
    min-width: 0;
}

.detail-chip-full {
    grid-column: 1 / -1;
}

.detail-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* The item line is content, not a label — it used .detail-label, which meant
   "iPhone" rendered as "IPHONE" and the part name sat at caption weight below
   the price it belongs to. Normal case, primary colour, no transform. */
.part-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0;
    text-transform: none;
}

/* Quieter variant for the big content chips (Device Unlock / Location /
   Photos / Notes), where the content underneath already says what the field
   is. Weight carries most of the effect — see --label-quiet for why the
   colour only moves a little. */
/* The five headings inside the merged info panel — Device Unlock (x2), Device
   Location, Device Photos, Notes. They earn their place: the panel used to be
   four separate tiles, and these labels do the dividing the tile borders used
   to. What they do NOT need is the weight of a heading.

   Lightened as a set rather than deleting any one of them. At 10px/600 with
   0.6px of tracking they read as five small shouts down the panel; the content
   beneath each is the thing worth looking at. 9px, 500, and half the tracking
   keeps the structure and drops the noise.

   Kept out of neumorphic.css on purpose — they are equally shouty in the other
   five themes, and this is a typographic judgement, not a depth one. */
.section-label {
    font-size: 9px !important;
    font-weight: 500 !important;
    color: var(--label-quiet) !important;
    letter-spacing: 0.3px;
    opacity: 0.85;
}

.detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 1px;
}

.detail-value.price-value {
    font-family: var(--font-num);
    color: var(--success-dark);
    font-weight: 700;
    font-size: 17px;
}

/* Price breakdown with deposit */
.price-breakdown-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}
.price-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid, #475569);
}
.price-row span:last-child {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}
.price-row.price-deposit span:last-child {
    color: #D97706;
}
/* Tax sits between Subtotal and Total as a quieter line — it's a component of
   the number below it, not a peer of it. */
.price-row.price-tax {
    font-weight: 500;
    color: var(--label-quiet);
}
/* Total closes the subtotal + tax group. When there's a deposit, Balance Due
   below carries the heavier treatment, so this stays a step lighter than it. */
.price-row.price-total {
    padding-top: 4px;
    border-top: 1px solid var(--card-border, #E2E8F0);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}
.price-row.price-balance {
    padding-top: 4px;
    border-top: 1px solid var(--card-border, #E2E8F0);
    font-size: 15px;
    font-weight: 700;
    color: #EF4444;
}
.price-row.price-balance span:last-child {
    color: #EF4444;
}

.detail-value.detail-notes {
    white-space: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.4;
}

/* -- Sold By chip -- */
.detail-chip-soldby {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.soldby-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.soldby-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-light);
    flex-shrink: 0;
}

/* -- Status chip -- */
.detail-chip-status {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.detail-chip-status .repair-status {
    width: fit-content;
}

/* ============================
   ROW 5 — Print buttons
   ============================ */
.card-row-print {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 18px;
}

.print-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
}

/* Complete Ticket lives in the print row now so all three share `flex: 1` and
   come out the same width. It has to restate its colours here: .print-btn is
   defined ~470 lines after .complete-order-btn, so at equal specificity its
   `border: none` was winning and flattening the green. */
.print-btn.complete-order-btn {
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316));
    border: 0;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(26, 95, 168, 0.30);
}
.print-btn.complete-order-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 5px 14px rgba(26, 95, 168, 0.38);
}
/* Still locked until the timeline reaches its final phase */
.print-btn.complete-order-btn:disabled {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
    box-shadow: none;
}

.print-btn.btn-receipt {
    background: #ec890fa6;
    color: var(--text-dark);
      box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.22),
   
    inset 0 18px 18px 0 rgba(255, 255, 255, 0.35),
    inset 0 -18px 18px 0 rgba(0, 0, 0, 0.1);
}

.print-btn.btn-receipt:hover {
    background: #F59E0B;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(251, 191, 36, 0.3);
}

.print-btn.btn-label {
    background: #2564ebbf;
    color: white;
      box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.22),
    
    inset 0 18px 18px 0 rgba(255, 255, 255, 0.35),
    inset 0 -18px 18px 0 rgba(0, 0, 0, 0.1);
}

.print-btn.btn-label:hover {
    background: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

/* ========== ALERTS ========== */
.alert {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success {
    background: rgba(52, 211, 153, 0.1);
    color: var(--success-dark);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.alert-error {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.empty-state h3 {
    color: var(--text-dark);
    margin: 0 0 6px;
    font-size: 18px;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ========== MODAL ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

/* Edit modal item rows */
.edit-item-row {
    background: var(--bg-light, #F8FAFC);
    border: 1px solid var(--card-border, #E2E8F0);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.edit-item-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid, #475569);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--card-border, #E2E8F0);
}

.modal-content {
    background: var(--card-bg);
    max-width: 560px;
    width: 92%;
    border-radius: var(--radius);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    color: var(--text-dark);
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.close-modal {
    color: var(--text-muted);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color var(--transition);
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-modal:hover {
    color: var(--danger);
    background: var(--danger-light);
}

.modal-body {
    padding: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    color: var(--text-mid);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-input,
.form-select {
    width: 100%;
    background: var(--bg-light);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-dark);
    font-size: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}

textarea.form-input {
    resize: vertical;
    font-family: inherit;
    min-height: 80px;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-submit {
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    transition: all var(--transition);
    margin-top: 6px;
}

.btn-submit:hover {
    background: #1D4ED8;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

/* ========== EMAIL MODAL ========== */
.email-modal-content {
    max-width: 640px;
    width: 95%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.email-modal-header {
    background: var(--primary);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.email-modal-header h2 {
    color: white;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.email-modal-header .close-modal {
    color: rgba(255, 255, 255, 0.8);
    background: none;
}

.email-modal-header .close-modal:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.email-modal-body {
    padding: 20px 24px;
}

.email-recipient-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--card-border);
}

.email-recipient-label {
    font-weight: 700;
    color: var(--text-mid);
    font-size: 13px;
}

.email-recipient-address {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}

.email-recipient-name {
    color: var(--text-muted);
    font-size: 13px;
}

.email-no-email-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #92400E;
    font-size: 13px;
    font-weight: 500;
}

.email-template-section {
    margin-bottom: 16px;
}

.email-field-label {
    display: block;
    font-weight: 600;
    color: var(--text-mid);
    font-size: 13px;
    margin-bottom: 6px;
}

.email-template-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.email-template-btn {
    background: var(--bg-light);
    border: 1px solid var(--card-border);
    color: var(--text-mid);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.email-template-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--primary-light);
    color: var(--primary);
}

.email-template-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.email-form-group {
    margin-bottom: 14px;
}

.email-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-dark);
    background: var(--bg-light);
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.email-input:focus {
    outline: none;
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.email-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-dark);
    background: var(--bg-light);
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.email-textarea:focus {
    outline: none;
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.email-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--card-border);
    gap: 10px;
}

.email-cancel-btn {
    background: var(--bg-light);
    border: 1px solid var(--card-border);
    color: var(--text-mid);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.email-cancel-btn:hover {
    background: #E2E8F0;
}

.email-send-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.email-send-btn:hover {
    background: #1D4ED8;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.email-send-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* ========== TOAST NOTIFICATIONS ========== */
.email-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 14px 24px;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 600;
    font-size: 14px;
    z-index: 10001;
    animation: slideInToast 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.email-toast.success {
    background: var(--success-dark);
}

.email-toast.error {
    background: var(--danger);
}

@keyframes slideInToast {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========== WHATSAPP BUTTON ========== */
/* Styled with the other bare contact icons further up — nothing to add here. */

/* ========== WHATSAPP MODAL ========== */
.whatsapp-modal-content {
    max-width: 600px;
    border-top: 4px solid #25D366;
}

.whatsapp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--card-border);
    background: linear-gradient(135deg, #E7F9EE 0%, #f0fdf4 100%);
    border-radius: var(--radius) var(--radius) 0 0;
}

.whatsapp-modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #075E54;
    display: flex;
    align-items: center;
}

.whatsapp-modal-header .close-modal {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}

.whatsapp-modal-header .close-modal:hover {
    color: var(--danger);
}

.whatsapp-modal-body {
    padding: 20px 24px;
}

.whatsapp-recipient-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #BBF7D0;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.whatsapp-recipient-label {
    font-weight: 700;
    color: #075E54;
    font-size: 13px;
}

.whatsapp-recipient-phone {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}

.whatsapp-recipient-name {
    font-size: 13px;
    color: var(--text-muted);
}

.whatsapp-no-phone-warning {
    padding: 12px 16px;
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #92400E;
    margin-bottom: 16px;
}

.whatsapp-template-section {
    margin-bottom: 16px;
}

.whatsapp-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 8px;
}

.whatsapp-template-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.whatsapp-template-btn {
    padding: 7px 14px;
    border: 1px solid #BBF7D0;
    background: #f0fdf4;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #075E54;
    cursor: pointer;
    transition: all var(--transition);
}

.whatsapp-template-btn:hover {
    background: #DCFCE7;
    border-color: #25D366;
}

.whatsapp-template-btn.active {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.whatsapp-form-group {
    margin-bottom: 16px;
}

.whatsapp-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--bg-light);
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
    line-height: 1.5;
    box-sizing: border-box;
}

.whatsapp-textarea:focus {
    outline: none;
    border-color: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}

.whatsapp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--card-border);
}

.whatsapp-cancel-btn {
    padding: 10px 20px;
    border: 1px solid var(--card-border);
    background: var(--bg-light);
    color: var(--text-mid);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.whatsapp-cancel-btn:hover {
    background: var(--card-border);
}

.whatsapp-send-btn {
    padding: 10px 24px;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.whatsapp-send-btn:hover {
    background: #128C7E;
    transform: translateY(-1px);
}

.whatsapp-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .repairs-grid {
        grid-template-columns: 1fr;
    }

    .filter-section {
        flex-direction: column;
    }

    .filter-select {
        min-width: unset;
        width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .card-row-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-row {
        padding: 0 16px;
    }

    .card-row-identity {
        padding-top: 16px;
        padding-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .card-row-details {
        grid-template-columns: 1fr 1fr;
    }

    .card-row-contact {
        flex-direction: column;
    }

    .card-row-print {
        flex-direction: column;
    }

    .whatsapp-template-buttons {
        gap: 6px;
    }

    .whatsapp-template-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    .whatsapp-modal-body {
        padding: 14px 16px;
    }

    .whatsapp-footer {
        flex-direction: column;
    }

    .whatsapp-send-btn,
    .whatsapp-cancel-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========== INLINE CARD EDITING (single-item repairs) ========== */
.repair-card:not(.editing) .ar-edit { display: none; }
.repair-card.editing .ar-view { display: none; }
.repair-card.editing .ar-edit { display: block; }

/* Prices are not editable from the card. Keep the normal price display on screen
   while editing (direct children only, so the nested sourcing editor still swaps). */
.repair-card.editing [data-field="item_total"] > .ar-view { display: block; }
.repair-card.editing [data-field="item_total"] > .ar-edit { display: none; }

/* Read-only price in the multi-item edit modal */
.edit-item-price-ro {
    padding: 10px 12px;
    border: 1px solid rgba(120, 140, 170, 0.22);
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 14px;
}

/* Highlight the card while editing */
.repair-card.editing {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 8px 26px rgba(37, 99, 235, 0.15);
}

/* Hide the print row while editing; show the save/cancel bar instead */
.inline-edit-bar { display: none; }
.repair-card.editing .card-row-print { display: none; }
.repair-card.editing .inline-edit-bar {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
}

/* Inline inputs */
.ar-edit .ar-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
    color: #0d2a52;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ar-edit .ar-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ar-edit textarea.ar-input { resize: vertical; min-height: 60px; }

/* Save / Cancel buttons */
.inline-save-btn, .inline-cancel-btn {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.inline-save-btn {
    flex: 1.6;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.inline-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35); }
.inline-cancel-btn {
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    border-color: rgba(148, 163, 184, 0.3);
}
.inline-cancel-btn:hover { background: rgba(148, 163, 184, 0.2); }

/* Inline price editor (Total Price + Deposit) */
.ar-price-edit { display: flex; flex-direction: column; gap: 5px; }
.ar-mini-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-top: 4px;
}
.ar-balance-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E2E8F0;
    font-size: 13px;
    font-weight: 700;
    color: #EF4444;
}
.ar-balance-preview .ar-balance { font-size: 15px; }

/* ========== DEVICE UNLOCK DISPLAY (active repair card) ========== */
.unlock-display {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.unlock-pattern-svg {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 4px;
    flex-shrink: 0;
}
.unlock-seq-text {
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 700;
    color: #2563EB;
    letter-spacing: 1px;
}
.unlock-display-code { gap: 10px; }
.unlock-code-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(135deg, #2563EB, #1a5fa8);
    padding: 4px 9px;
    border-radius: 6px;
    flex-shrink: 0;
}
.unlock-code-text {
    font-family: var(--font-num);
    font-size: 16px;
    font-weight: 700;
    color: #0d2a52;
    letter-spacing: 1px;
    word-break: break-all;
}

/* ========== DEVICE UNLOCK — inline edit picker ========== */
.ar-unlock-preview { margin: 2px 0 8px; font-size: 13px; }
.ulk-inline-preview { font-family: var(--font-num); color: #0d2a52; }
.ulk-inline-preview b { color: #2563EB; }
.ar-unlock-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px dashed rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.06);
    color: #2563EB;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ar-unlock-btn:hover { background: rgba(37, 99, 235, 0.12); }

/* Picker modal (shared with intake styling) */
.ulk-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 10001;
    background: rgba(13, 42, 82, 0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 20px;
}
.ulk-modal-overlay.open { display: flex; }
.ulk-modal { background: #fff; border-radius: 18px; width: 100%; max-width: 360px; box-shadow: 0 24px 60px rgba(13, 42, 82, 0.3); overflow: hidden; animation: ulkPop 0.2s ease; }
@keyframes ulkPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.ulk-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef2f7; }
.ulk-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0d2a52; }
.ulk-close { background: none; border: none; font-size: 24px; line-height: 1; color: #94a3b8; cursor: pointer; }
.ulk-close:hover { color: #EF4444; }
.ulk-tabs { display: flex; gap: 4px; padding: 12px 16px 0; }
.ulk-tab { flex: 1; padding: 8px 4px; border: none; background: #f1f5f9; color: #64748b; font-size: 12.5px; font-weight: 700; font-family: inherit; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; }
.ulk-tab.active { background: linear-gradient(135deg, #2563EB, #1a5fa8); color: #fff; }
.ulk-panel { padding: 16px 20px 4px; }
.ulk-hint { text-align: center; font-size: 12.5px; color: #64748b; margin: 0 0 14px; }
.ulk-input { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; font-family: inherit; color: #0d2a52; border: 1px solid rgba(100, 160, 220, 0.4); border-radius: 10px; outline: none; text-align: center; letter-spacing: 1px; }
.ulk-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.ulk-pad { position: relative; width: 260px; height: 260px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); touch-action: none; user-select: none; -webkit-user-select: none; }
.ulk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ulk-line { stroke: #2563EB; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.ulk-line-live { opacity: 0.4; }
.ulk-dot { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.ulk-dot span { width: 18px; height: 18px; border-radius: 50%; background: #cbd5e1; transition: transform 0.12s ease, background 0.12s ease; }
.ulk-dot.sel span { background: #2563EB; transform: scale(1.35); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15); }
.ulk-seq { text-align: center; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: #0d2a52; margin-top: 12px; letter-spacing: 1px; }
.ulk-reset { display: block; margin: 8px auto 0; padding: 6px 14px; font-size: 12px; font-weight: 600; font-family: inherit; color: #64748b; background: #f1f5f9; border: none; border-radius: 8px; cursor: pointer; }
.ulk-reset:hover { background: #e2e8f0; }
.ulk-modal-actions { display: flex; gap: 10px; padding: 16px 20px 20px; }
.ulk-btn-cancel, .ulk-btn-save { flex: 1; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; border: none; }
.ulk-btn-cancel { background: #f1f5f9; color: #475569; }
.ulk-btn-cancel:hover { background: #e2e8f0; }
.ulk-btn-save { flex: 1.5; background: linear-gradient(135deg, #2563EB, #1a5fa8); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
.ulk-btn-save:hover { transform: translateY(-1px); }

/* ========== REPAIR PROGRESS STEPPER (one-click) ========== */
/* 16px to match the identity band and the info panel. It inherits 6px from
   .detail-chip, which is sized for the small chips — on a full-width tile that
   reads as square next to its 16px neighbours. */
/* Both full-width panels take the PANEL radius, not the chip one.
   .detail-chip defaults to --radius-xs (6px), which is right for a small fact
   tile. These two are neither small nor tiles — they are surfaces the width of
   the card, sitting beside .info-panel at --radius (16px), and at 6px the price
   breakdown read as a squarer box than its neighbours.

   The progress panel already carried this override on its own; the price
   breakdown was left behind, which is the mismatch. Moved onto the shared
   .detail-chip-full so the next full-width panel cannot be forgotten. */
.detail-chip-full { border-radius: var(--radius); }
.repair-progress-chip { padding-bottom: 6px; }
.rp-stepper { display: flex; align-items: flex-start; margin-top: 10px; padding: 0 6px; }
.rp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex: 0 0 auto;
    user-select: none;
}
.rp-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: #E2E8F0;
    color: #64748b;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}
.rp-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.rp-line {
    flex: 1 1 auto;
    min-width: 18px;
    height: 3px;
    background: #E2E8F0;
    border-radius: 2px;
    margin-top: 14px;
    transition: background 0.15s ease;
    position: relative;
}
.rp-line-done { background: var(--rp, #2563EB); }

/* ── Sourcing: chip-head button + connector flag ────────────────────────── */
.rp-chip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* Same accent ramp as Complete Ticket. It used --fc / --fc-soft, which are set
   per sourcing type (gold for Ordering, blue for Pickup) — those still colour
   the date flag this button turns into, they just no longer colour the button.
   !important clears embossed.css's catch-all
   `body.embossed-mode button:not(.dark-toggle-label):not(.emb-seg-btn)`. */
.rp-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316)) !important;
    box-shadow: 0 3px 10px rgba(26, 95, 168, 0.30);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.rp-source-btn:hover { filter: brightness(1.06); box-shadow: 0 5px 14px rgba(26, 95, 168, 0.38); }
.rp-source-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.rp-source-flag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    padding: 4px 11px;
    border-radius: 10px;
    border: 1.5px solid var(--fc);
    /* Composite the soft tint over solid white so the connector line can't bleed through */
    background: linear-gradient(var(--fc-soft), var(--fc-soft)), #fff;
    color: var(--fc);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    z-index: 3;
}
.rp-flag-name { font-size: 11.5px; font-weight: 800; letter-spacing: 0.2px; }
.rp-flag-date { font-size: 10px; font-weight: 600; opacity: 0.82; margin-top: 1px; font-variant-numeric: tabular-nums; }
.rp-flag-clickable { cursor: pointer; transition: filter 0.15s ease; }
.rp-flag-clickable:hover { filter: brightness(0.96); }

/* ── Compact mode: 4-step bars shrink so labels don't cover the steps ────── */
.rp-stepper.rp-compact .rp-circle { width: 24px; height: 24px; font-size: 11px; }
.rp-stepper.rp-compact .rp-label { font-size: 9.5px; }
.rp-stepper.rp-compact .rp-line { margin-top: 11px; }
.rp-stepper.rp-compact .rp-source-flag { padding: 2px 8px; border-radius: 8px; }
.rp-stepper.rp-compact .rp-flag-name { font-size: 9.5px; letter-spacing: 0.1px; }
.rp-stepper.rp-compact .rp-flag-date { font-size: 8.5px; }
.rp-stepper.rp-compact .rp-active .rp-circle { box-shadow: 0 0 0 3px var(--rp-soft); }
/* First (sourcing) flag one size smaller than the date-time flags */
.rp-stepper.rp-compact .rp-line[data-flag="source"] .rp-source-flag { padding: 2px 6px; }
.rp-stepper.rp-compact .rp-line[data-flag="source"] .rp-flag-name { font-size: 8.5px; }
.rp-stepper.rp-compact .rp-line[data-flag="source"] .rp-flag-date { font-size: 7.5px; }

.rp-done .rp-circle { background: var(--rp); color: #fff; }
.rp-done .rp-label { color: #64748b; }
.rp-active .rp-circle { background: var(--rp); color: #fff; border-color: var(--rp-soft); box-shadow: 0 0 0 4px var(--rp-soft); }
.rp-active .rp-label { color: var(--rp); font-weight: 800; }
.rp-upcoming .rp-circle { background: #E2E8F0; color: #64748b; }

.rp-step:hover .rp-circle { transform: scale(1.08); }
.rp-step:hover .rp-label { color: var(--rp); }

/* Locked: Parts Received before the parts were marked as ordered. Faded and
   with the hover lift suppressed, so it doesn't invite the click it refuses. */
.rp-step.rp-locked { opacity: 0.45; cursor: not-allowed; }
.rp-step.rp-locked:hover .rp-circle { transform: none; }
.rp-step.rp-locked:hover .rp-label { color: inherit; }

/* ===== Order header: Date (left) + Complete button & REP tag (right) ===== */
.card-row-repair { align-items: flex-start; }
.header-date { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
}
/* Pay Status moved into the right column (Complete Ticket used to live here).
   header-right is align-items:flex-end, but the wrap's own children default to
   stretch — so the label needs pushing right to line up with the pills. */
.header-right .pay-status-wrap { align-items: flex-end; }
.header-right .pay-radios { justify-content: flex-end; flex-wrap: wrap; }

/* The ticket tag sits under the date in the left column now, so it flushes
   left instead of right. Overrides the flex-end below, which it kept from
   when it lived in the right column. */
.header-left .header-order-tag { justify-content: flex-start; }

/* .complete-row is unused now that the button moved to the print row */
/* wrap instead of overflowing the card when the items badge is present */
.complete-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.header-order-tag { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 100%; }

/* ========== CALL LOG ========== */
/* Badge button in the contact row */
/* Bare like the other three — icon only, with the count riding its corner. */
/* No width/height here — .contact-btn-icon sizes all four circles. This rule
   sits ~1400 lines later, so any size set here silently wins and leaves the
   call log a different diameter than its three neighbours. */
.btn-calllog-sm {
    position: relative;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0;
    gap: 0;
    overflow: visible;          /* the badge overhangs the button box */
}
.btn-calllog-sm:hover .cico { transform: scale(1.12); }
.btn-calllog-sm:active .cico { transform: scale(0.94); }
/* Notification badge — pinned to the icon's top-right, overlapping about
   halfway onto the glyph. The white ring keeps it legible wherever it lands,
   since the card header colour changes with pay status. */
.calllog-count {
    position: absolute;
    top: -3px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2563EB;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

/* Slide panel */
.cl-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(13, 42, 82, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cl-overlay.open { display: block; }
.cl-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 92vw;
    background: #fff;
    z-index: 10001;
    box-shadow: -8px 0 40px rgba(13, 42, 82, 0.22);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.cl-panel.open { transform: translateX(0); }
.cl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, #2563EB, #1a5fa8);
    color: #fff;
}
.cl-title { font-size: 16px; font-weight: 800; }
.cl-sub { font-size: 12px; color: rgba(255, 255, 255, 0.85); margin-top: 2px; font-family: var(--font-num); }
.cl-close { background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

/* Add row */
.cl-add { padding: 16px 20px; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.cl-add-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; margin-bottom: 10px; }
.cl-note {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #0d2a52;
    border: 1px solid rgba(100, 160, 220, 0.4);
    border-radius: 9px;
    outline: none;
    margin-bottom: 10px;
}
.cl-note:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.cl-outcomes { display: flex; flex-wrap: wrap; gap: 7px; }
.cl-outcome {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid rgba(100, 160, 220, 0.4);
    background: #fff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cl-outcome:hover { background: rgba(37, 99, 235, 0.08); border-color: #2563EB; }
.cl-outcome.cl-good { border-color: rgba(16, 185, 129, 0.5); color: #059669; }
.cl-outcome.cl-good:hover { background: rgba(16, 185, 129, 0.1); }
.cl-outcome.cl-bad { border-color: rgba(239, 68, 68, 0.5); color: #DC2626; }
.cl-outcome.cl-bad:hover { background: rgba(239, 68, 68, 0.08); }

/* Timeline */
.cl-timeline { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.cl-empty { text-align: center; color: #94a3b8; font-size: 13px; padding: 30px 0; }
.cl-item { display: flex; gap: 11px; align-items: flex-start; }
.cl-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.cl-b-neutral { background: rgba(148, 163, 184, 0.15); color: #475569; }
.cl-b-good { background: rgba(16, 185, 129, 0.14); color: #059669; }
.cl-b-bad { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.cl-item-body { min-width: 0; padding-top: 1px; }
.cl-item-meta { font-size: 12px; color: #64748b; }
.cl-item-meta b { color: #0d2a52; font-weight: 700; }
.cl-item-note { font-size: 12.5px; color: #334155; margin-top: 3px; background: #f8fafc; border-radius: 7px; padding: 6px 9px; }

/* Edit / Delete pinned to the top-left corner of the card */
.card-corner-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    display: flex;
    gap: 6px;
}
.card-corner-actions .icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(13, 42, 82, 0.14);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.card-corner-actions .icon-btn svg { width: 13px; height: 13px; }

/* Technician shown inline above the progress stepper (no chip) */
.rp-tech { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rp-tech-name { font-size: 13px; font-weight: 700; color: var(--text-dark); }

/* Order-header left column: date + pay status stacked */
.header-left { display: flex; flex-direction: column; gap: 12px; }
.pay-status-wrap { display: flex; flex-direction: column; gap: 6px; }

/* Pay status one-click radios */
.pay-radios { display: flex; flex-wrap: nowrap; gap: 5px; }
.pay-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    border: 1px solid var(--card-border);
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mid);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.pay-radio-circle {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s ease;
}
.pay-radio:hover { border-color: var(--pr, var(--primary-light)); }
.pay-radio.selected {
    border-color: var(--pr);
    background: var(--pr-soft);
    color: var(--pr);
}
.pay-radio.selected .pay-radio-circle { border-color: var(--pr); }
.pay-radio.selected .pay-radio-circle::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--pr);
}

/* ══ Merged info panel ══════════════════════════════════════════════════
   Unlock / Location / Photos / Notes used to be four separate tiles. Stacked,
   their edges and shadows read as quilting, and they re-stated a boundary the
   card already draws. One tile now, sections marked by rules.

   The price chip deliberately stays OUTSIDE this panel: everything in here is
   descriptive, the price is the card's conclusion. Dividers imply equal rank,
   so folding it in would make $50.00 read like another field. */
.info-panel {
    grid-column: 1 / -1;          /* .card-row-details is a 3-col grid */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;             /* keeps section rules inside the corners */
}

.info-sec {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    min-width: 0;
}

/* Section rule. Nothing sits below the last one, so it goes without. */
.info-panel > *:not(:last-child) {
    border-bottom: 1px solid var(--card-border);
}

/* Device Unlock (left) + Device Location (right) side by side */
.unlock-loc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

/* The vertical rule is a pseudo-element rather than a border-right so it can
   be inset top and bottom. A full-height border would run into the horizontal
   rule below and form a tee, which reads as a table cell instead of a split
   section. */
.unlock-loc-row::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    width: 1px;
    background: var(--card-border);
}

/* Part sourcing pill (In House / Ordering·provider / Pickup·provider) */
.part-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.source-pill {
    /* inline-flex, not inline-block: the pill now carries artwork as well as
       text, and baseline alignment leaves a logo sitting a pixel or two low
       against 10.5px caps. Centring on the cross axis lines them up whatever
       the image's own proportions turn out to be. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Provider and origin marks. These are now the pill's ONLY content, so they are
   sized per-artwork rather than to one shared number — the two are different
   shapes and matching their heights would not make them look the same size.

   Height-led with width:auto in both cases, so each keeps its own proportions
   instead of being squeezed into a common box. */
.src-ico {
    width: auto;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}
/* The In House pill: dashed outline, filled to match the logo's own backdrop.
   The green wash went because it fought the full-colour shop mark.

   Transparent did not work either, and the reason is the artwork: cp.png ships
   with an opaque near-white background, so on a see-through pill the logo's own
   rectangle showed as a pale block floating inside it. Painting the pill the
   same near-white makes the two read as one surface — the logo stops having
   edges of its own.

   --cp-logo-bg IS AN ESTIMATE. cp.png lives on the server, so its background
   could not be sampled from here; this is read off the banner artwork and is
   close, not exact. If a seam is visible at the logo's edge, correct this ONE
   value and nothing else needs touching.

   The permanent fix is upstream: re-save cp.png with a transparent background
   and this pill can go back to `transparent`, blending against the card's
   gradient at every point instead of matching it at one.

   The dash is the same weight and colour as the info panel and the Add-photo
   tile, so the page has one dashed language rather than three. */
.source-pill-plain {
    --cp-logo-bg: #f4f7fb;
    background: var(--cp-logo-bg) !important;
    border: 1.5px dashed rgba(120, 140, 170, 0.42);
    /* The border adds 3px across; trimmed from the padding so the pill stays
       the same size as the tinted ones beside it. */
    padding: 1px 8px;
}

/* The shop mark is roughly square, so its height IS its size. It can afford to
   be the taller of the two without dominating. */
.src-ico-house { height: 15px; }
/* The Mobile Sentrix wordmark is wide and carries small type inside it. Matched
   to the shop mark's height it would run three times as long and swamp the
   pill, so it sits shorter with a ceiling on its width — the cap stops an
   unexpectedly wide file from stretching the row. */
.src-ico-prov  { height: 12px; max-width: 82px; }
/* maya.png is 400x131 — aspect 3.05 against the Mobile Sentrix mark's 4.20.
   At a shared 12px it rendered 37px wide next to MS's 50px and read as the
   smaller logo. 17px brings it to ~52px, so the two occupy the same width
   and look like one set. Height-led as always; the cap still applies. */
.src-ico-maya  { height: 17px; }

/* Inline sourcing editor (provider + In House/Ordering/Pickup) */
.ar-sourcing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-src-toggle { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ar-src-btn {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ar-src-btn.active.src-InHouse { background: rgba(5, 150, 105, 0.12); border-color: #059669; color: #059669; }
.ar-src-btn.active.src-Ordering { background: rgba(202, 138, 4, 0.12); border-color: #CA8A04; color: #CA8A04; }
.ar-src-btn.active.src-Pickup { background: rgba(37, 99, 235, 0.12); border-color: #2563EB; color: #2563EB; }
.ar-src-provider {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(100, 160, 220, 0.4);
    background: #fff;
    font-size: 12px;
    font-family: inherit;
    color: #0d2a52;
    outline: none;
    max-width: 150px;
}
.ar-src-provider:disabled { opacity: 0.5; background: #eef2f7; border-style: dashed; cursor: not-allowed; }

/* ── Parts tracking ─────────────────────────────────────────────────────────
   Lives in the slot the "Mark as Ordered" button vacates, so the head runs
   Mark as Ordered -> add -> carrier badge without anything moving.

   The last two states are now the SAME 55px square, and only the colour
   separates them: a grey truck means no number yet, the carrier's own logo
   means there is one. Nothing resizes and nothing changes kind when a number is
   saved, which is why the empty state stopped being a labelled pill. */
.rp-btn-slot { display: inline-flex; align-items: center; }

/* A 55px artwork button in the slot: engraved and greyed for "not yet", lit and
   raised for "done". Two controls share it because they are the same idea —
   the FedEx placeholder before a tracking number exists, and the pickup mark
   before the parts are collected. Only the image and the click differ.

   Every decoration below is forced OFF with !important, and that is not
   paranoia. Both neumorphic.css and embossed.css carry a catch-all
   `body.<theme>-mode button:not(...)` at specificity (0,3,2) that hands every
   <button> on the page a pill background, a radius and a shadow — which is
   what put a rounded plate behind this logo. The tracking badge escapes it only
   because it is an <a>. Rather than add this class to each theme's exclusion
   list and have the next theme reintroduce the problem, the control refuses the
   decoration outright. */
.rp-slot-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(120, 132, 150, 0.55);   /* drives the truck fallback */
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    /* ENGRAVED — the empty slot is cut INTO the card, where the filled badge
       stands out of it. Two opposite depths for two opposite states, so the
       board reads at a glance without anyone having to look at colour.

       The offsets are the inverse of the badge's: dark up-left, light
       down-right, matching --neu-engrave everywhere else in the app.

       Greyed with brightness/contrast, NOT opacity, and that is load-bearing.
       drop-shadow() builds its shape from the ALPHA channel: fade the image and
       the shadow fades with it, so the groove this rule exists to draw would
       come out as a smudge. brightness and contrast wash the visible artwork
       while leaving the silhouette fully opaque for the shadows to trace.

       Desaturating the real file also means one asset per carrier stays the
       source of truth — the colour version is literally this image with the
       filter lifted, so the two can never drift apart. */
    filter:
        grayscale(1) brightness(1.22) contrast(0.62)
        drop-shadow(-1px -1px 1px rgba(63, 74, 86, 0.42))
        drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.95));
}
/* Hover lifts it OUT of the groove and restores the carrier's colours — a
   preview of the badge that pressing it produces. Engraved at rest, raised
   under the pointer, raised for good once a number is in. */
.rp-slot-ico:hover {
    transform: translateY(-1px);
    filter:
        grayscale(0) brightness(1) contrast(1)
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 1))
        drop-shadow(3px 4px 5px rgba(146, 162, 188, 0.55));
}
/* Pressing pushes it back down into the groove it started in, rather than
   flattening — the same language the rest of the raised UI uses. */
.rp-slot-ico:active {
    transform: translateY(1px);
    filter:
        grayscale(0) brightness(1) contrast(1)
        drop-shadow(-1px -1px 1px rgba(63, 74, 86, 0.35))
        drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.9));
}

/* DONE: full colour, standing out of the card — the same raise the tracking
   badge wears, so a collected pickup and a shipped order read at the same
   depth. Listed after :hover and :active so it wins at rest; those two still
   apply on top because they are more specific. */
.rp-slot-ico.is-done {
    filter:
        grayscale(0) brightness(1) contrast(1)
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95))
        drop-shadow(2px 2px 3px rgba(146, 162, 188, 0.55));
}
/* Hover on a done mark lifts a touch more rather than restoring colour it
   already has — the only thing left to signal is that it is still pressable. */
.rp-slot-ico.is-done:hover {
    transform: translateY(-1px);
    filter:
        grayscale(0) brightness(1) contrast(1)
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 1))
        drop-shadow(3px 4px 5px rgba(146, 162, 188, 0.6));
}

/* Names the carrier you picked, in the modal head. */
.trk-for {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    letter-spacing: 0.02em;
}

/* The badge once a number is in: the carrier's own logo, 35px, and nothing
   else. The number moved to the tooltip — see render_tracking_ui() for why that
   makes the title attribute load-bearing rather than decorative.

   Raised, matching the house treatment for figures and icons. drop-shadow()
   rather than box-shadow because these are transparent PNGs: box-shadow traces
   the element's rectangular box and would draw a square of shade around a logo
   with clear corners. The filter follows the artwork's own alpha. */
.rp-track-wrap { display: inline-flex; align-items: center; gap: 2px; }
.rp-track-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
    filter:
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95))
        drop-shadow(2px 2px 3px rgba(146, 162, 188, 0.55));
}
.rp-track-logo:hover {
    transform: translateY(-1px);
    filter:
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 1))
        drop-shadow(3px 4px 5px rgba(146, 162, 188, 0.60));
}
/* Pressing pushes it back down rather than only dimming — the same language the
   rest of the raised UI uses. */
.rp-track-logo:active {
    transform: translateY(1px);
    filter:
        drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.8))
        drop-shadow(1px 1px 2px rgba(146, 162, 188, 0.45));
}

.rp-track-img { width: 55px; height: 55px; object-fit: contain; display: block; }
/* The pickup mark renders smaller than the carrier logos. Its artwork carries
   less internal whitespace, so at a matched 55px it out-weighs the FedEx and UPS
   marks it sits alongside down the board.

   The IMAGE shrinks and .rp-slot-ico's 55px box does not. Shrinking the button
   instead would shift the slot ten pixels between an Ordering ticket and a
   Pickup one, and that misalignment reads worse in a scrolling list than the
   size difference this is correcting. */
.rp-slot-ico.is-pickup .rp-track-img { width: 40px; height: 40px; }
/* Fallback for a carrier with no artwork of its own (USPS today) or a file that
   404s. Hidden until the <img> reports failure, so there is no second request
   to fail and no flash of the wrong icon on a good load. */
.rp-track-fallback { display: none; }
.rp-track-img.is-broken { display: none; }
.rp-track-img.is-broken ~ .rp-track-fallback { display: block; }

/* At rest the slot is just the logo. The pencil fades in on hover of the pair,
   so editing stays reachable without adding a second control to the row. */
/* Same !important treatment as .rp-slot-ico above — it is a <button> too, so
   the themes' catch-all would give this one a pill plate as well. */
.rp-track-edit {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.rp-track-wrap:hover .rp-track-edit,
.rp-track-edit:focus-visible { opacity: 0.75; }
.rp-track-edit:hover { opacity: 1; }

/* ── Tracking modal ── */
.trk-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 4000;
}
.trk-modal-overlay.open { display: flex; }
.trk-modal {
    background: var(--surface, #fff);
    border-radius: 18px;
    padding: 22px 24px 20px;
    width: min(420px, 92vw);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}
.trk-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.trk-modal-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.trk-head-ico { color: var(--accent2, #2980d4); }
.trk-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary, #6b7280); }
.trk-input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border, rgba(0,0,0,0.12));
    background: var(--glass-bg, #fff);
    color: var(--text-primary, #111);
    font-family: var(--font-num, ui-monospace, monospace);
    font-size: 15px;
    letter-spacing: 0.04em;
    outline: none;
}
.trk-input:focus { border-color: var(--accent2, #2980d4); }
/* Reserves its line whether or not it has text, so the buttons below do not
   jump the moment the first character is typed. */
.trk-detect { min-height: 18px; margin-top: 8px; font-size: 11.5px; font-weight: 600; }
.trk-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.trk-save {
    margin-left: auto;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--accent2, #2980d4), var(--accent, #F97316));
    font-size: 13px; font-weight: 700;
    padding: 9px 22px; border-radius: 999px; cursor: pointer;
}
.trk-clear {
    border: 1px solid rgba(181, 32, 32, 0.35);
    background: transparent;
    color: #b52020;
    font-size: 12px; font-weight: 600;
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
}

/* ── The device model, lifted out of the part rows ──
   Every part row used to open with it, so a three-part Samsung ticket named the
   device three times before naming a single part. It appears once now, above
   the list, and the rows carry only what distinguishes them from each other.

   Sized and weighted like .section-label — the DEVICE UNLOCK / NOTES headings —
   because it is doing the same job: naming what follows without competing with
   it. But NOT uppercased like those. They label a field; this is a product
   name, and SAMSUNG - S23 ULTRA reads as shouting where DEVICE UNLOCK reads as
   a label. */
.part-device {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--label-quiet);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* In the single-part card it sits directly above the part name. */
.part-breakdown .part-device,
.price-breakdown > .part-device { margin-bottom: 1px; }

/* In the multi-part panel it is a row of the list, so it takes the list's own
   padding and gives up the divider — a heading separated from the thing it
   heads reads as an item in its own right. */
.order-summary-row.osr-device { padding-bottom: 2px; }
.order-summary-row.osr-device + .order-summary-row { border-top: none; }

/* ── A card that just changed on another laptop ───────────────────────────────
   One soft flash, then gone. Something appearing or rewriting itself with no
   transition reads as a glitch; a permanent marker would leave the board
   speckled with highlights nobody cleared. This says "that one moved" and then
   gets out of the way — see ar_live.js. */
/* No highlight any more. The blue ring announced every change, and on a board
   three people are editing something was flashing most of the time — which read
   as the page refreshing itself, the exact thing this feature exists to avoid.
   The new content IS the message.

   What is left is the shortest fade that stops a swapped card popping in.
   Opacity only: no movement, no colour. Enough to make the replacement
   continuous, too little to pull the eye to it. */
.repair-card.ar-live-in { animation: arLiveIn .22s ease-out; }

@keyframes arLiveIn {
    from { opacity: .35; }
    to   { opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
    .repair-card.ar-live-in { animation: none; }
}

/* ── Segments: Active / Parked / Closed ───────────────────────────────────── */
.ar-segments { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.ar-seg { border: 1px solid rgba(100, 160, 220, 0.22); background: rgba(255, 255, 255, 0.6); color: var(--text-mid, #475569);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ar-seg b { font-size: 11px; font-weight: 700; background: rgba(26, 95, 168, 0.10); color: var(--primary, #1a5fa8); border-radius: 999px; padding: 1px 7px; }
.ar-seg.on { background: var(--primary, #1a5fa8); color: #fff; border-color: transparent; }
.ar-seg.on b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ar-seg-hint { font-size: 12px; color: var(--text-muted, #64748b); margin-left: 6px; }
.repair-card.seg-hidden { display: none !important; }

/* ── The parked / closed strip across the top of a card ───────────────────── */
.park-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; margin: -2px -2px 10px;
  border-radius: 14px 14px 0 0; background: rgba(245, 158, 11, 0.10); border-bottom: 1px solid rgba(245, 158, 11, 0.25); font-size: 12px; color: #6b4b12; }
.park-strip-closed { background: rgba(100, 116, 139, 0.10); border-bottom-color: rgba(100, 116, 139, 0.25); color: #3f4a5a; }
.park-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #d97706; color: #fff; border-radius: 999px; padding: 2px 8px; }
.park-strip-closed .park-tag { background: #64748b; }
.park-fact b { font-weight: 700; }
.park-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.park-btn { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.park-btn-back { background: var(--primary, #1a5fa8); color: #fff; }
.park-btn-close { background: rgba(181, 32, 32, 0.10); color: #b52020; }
.park-btn:hover { filter: brightness(1.06); }
.repair-card.seg-closed .card-row-print, .repair-card.seg-closed .card-corner-actions, .repair-card.seg-closed .inline-edit-bar { display: none !important; }
.repair-card.seg-parked .complete-order-btn { display: none; }
.icon-btn-park:hover { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.35); color: #b45309; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.14); }

/* ── Choice dialog (park / close) ─────────────────────────────────────────── */
.ar-choice-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 30, 60, 0.35); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.ar-choice-backdrop.open { opacity: 1; }
.ar-choice { width: min(460px, 92vw); background: #fff; border-radius: 22px; padding: 22px 22px 18px; box-shadow: 0 24px 64px rgba(13, 42, 82, 0.28); font-family: var(--font-ui, inherit); }
.ar-choice-title { font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.ar-choice-sub { font-size: 13px; color: #475569; line-height: 1.45; margin-bottom: 14px; }
.ar-choice-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ar-choice-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(100, 160, 220, 0.20); cursor: pointer; }
.ar-choice-item:has(input:checked) { border-color: var(--primary, #1a5fa8); background: rgba(26, 95, 168, 0.06); }
.ar-choice-item input { margin-top: 3px; accent-color: var(--primary, #1a5fa8); }
.ar-choice-item span { display: flex; flex-direction: column; gap: 1px; }
.ar-choice-item b { font-size: 13.5px; font-weight: 600; color: #0f172a; }
.ar-choice-item small { font-size: 12px; color: #64748b; }
.ar-choice-note { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(100, 160, 220, 0.25); margin-bottom: 14px; }
.ar-choice-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ar-choice-btns button { border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ar-choice-cancel { background: rgba(100, 116, 139, 0.12); color: #334155; }
.ar-choice-ok { background: var(--primary, #1a5fa8); color: #fff; }
.ar-choice-ok.danger { background: #b52020; }

/* ── Card redesign (2026-09-10) ────────────────────────────────────────────
   Three across at most. The cards were running six across on a wide screen,
   each at tiny type; the parts grid reads well because it stops at three.
   Same wider gap as the parts grid. */
.repairs-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr));
    gap: 24px;
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
/* One big number per card: the balance due when there is a deposit, else the
   total. The same figure the parts cards give the price. */
.price-row.price-total span:last-child,
.price-row.price-balance span:last-child,
.order-summary-row.osr-total .order-summary-price,
.order-summary-row.osr-balance .order-summary-price {
    font-family: var(--font-num, inherit); font-size: 26px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.1;
}
.price-breakdown-rows:has(.price-balance) .price-row.price-total span:last-child,
.order-items-summary:has(.osr-balance) .order-summary-row.osr-total .order-summary-price { font-size: 14px; letter-spacing: 0; }
.price-row.price-total, .price-row.price-balance, .order-summary-row.osr-total, .order-summary-row.osr-balance { align-items: baseline; }
/* Device photos fold away; an ordinary ticket stays short. */
.ar-more { padding: 0 !important; }
.ar-more-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.ar-more-sum::-webkit-details-marker { display: none; }
.ar-more-sum i { font-style: normal; font-size: 11px; color: var(--text-muted, #64748b); transition: transform .2s ease; }
.ar-more[open] .ar-more-sum i { transform: rotate(180deg); }
.ar-more .dph { padding: 0 14px 12px; }

/* ── List view ─────────────────────────────────────────────────────────────
   The same tickets as rows, for triage. Rows are rendered beside the cards
   and only one of the two is ever shown (body.ar-list). Open jumps back to
   the card. */
.ar-view-toggle { margin-left: auto; display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(100, 160, 220, 0.22); }
.ar-view-toggle button { border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-mid, #475569); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ar-view-toggle button.on { background: var(--primary, #1a5fa8); color: #fff; }
.ar-view-toggle svg { width: 13px; height: 13px; }
.ar-row { display: none; grid-template-columns: 56px 1.4fr 1.4fr 0.9fr 0.8fr 0.6fr 0.9fr auto; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 14px; background: var(--card-bg, #fff); border: 1px solid var(--card-border, #e2e8f0); }
body.ar-list .repairs-grid { grid-template-columns: 1fr; gap: 8px; max-width: none; }
body.ar-list .repair-card { display: none !important; }
body.ar-list .ar-row:not(.seg-hidden) { display: grid; }
.ar-row.seg-hidden { display: none !important; }
.ar-row-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--bg-light, #f8fafc); border: 1px dashed var(--card-border, #e2e8f0); padding: 2px; }
.ar-row-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-row-cell b { font-size: 13px; font-weight: 600; color: var(--text-dark, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-row-cell span { font-size: 11.5px; color: var(--text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-row-money b { font-family: var(--font-num, inherit); font-size: 18px; letter-spacing: -0.4px; }
.ar-row-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(100, 116, 139, 0.12); color: #334155; white-space: nowrap; }
.ar-row-status.st-completed { background: rgba(5, 150, 105, 0.14); color: #047857; }
.ar-row-status.st-in-progress { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.ar-row-status.st-parts-order, .ar-row-status.st-parts-received { background: rgba(26, 95, 168, 0.12); color: #1a5fa8; }
.ar-row-actions { display: inline-flex; gap: 6px; }
.repair-card.ar-flash { box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.45), 0 12px 32px rgba(26, 95, 168, 0.22) !important; transition: box-shadow .3s ease; }
@media (max-width: 1100px) { .ar-row { grid-template-columns: 48px 1.4fr 1.4fr 0.9fr auto; } .ar-row .ar-row-tech, .ar-row .ar-row-days, .ar-row .ar-row-money { display: none; } }
/* The list is a table, not a banner: cap it and centre it, tighten the columns. */
body.ar-list .repairs-grid { max-width: 1440px; margin-left: auto; margin-right: auto; }
.ar-row { grid-template-columns: 52px 1.25fr 1.7fr 0.95fr 0.7fr 0.6fr 0.85fr auto; gap: 16px; padding: 10px 16px; }
.ar-row-cell b { font-size: 13.5px; }
.ar-row-status { font-size: 11px; }
/* The segment row lines up with the grid, not the page edges. */
.ar-segments { width: 100%; max-width: 1900px; margin-left: auto; margin-right: auto; }
body.ar-list .ar-segments { max-width: 1440px; }

/* ── Cards view ────────────────────────────────────────────────────────────
   Each ticket as the glass part card (part_card.css), shown only under
   body.ar-hcards. Only the switching lives here; the look is the card's own,
   with the tint carrying the pay status. */
.ar-hcard { display: none; }
body.ar-hcards .repairs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); gap: 24px; max-width: 1900px; }
body.ar-hcards .repair-card, body.ar-hcards .ar-row { display: none !important; }
body.ar-hcards .ar-hcard:not(.seg-hidden) { display: flex; }
.ar-hcard.seg-hidden { display: none !important; }
/* The tech tile: avatar and name in the tile's own bold. */
.ar-h-tech { display: inline-flex; align-items: center; gap: 6px; }
.ar-h-tech-pic { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ar-h-tech-ini { display: inline-flex; align-items: center; justify-content: center; background: rgba(26, 95, 168, 0.12); color: #1a5fa8; font-size: 11px; }
/* List rows: the phase as a small stepper rather than a badge. */
.ar-row-stepper { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ar-rs-track { display: flex; align-items: center; }
.ar-rs-dot { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: 0 0 auto; background: #fff; border: 2px solid rgba(100, 116, 139, 0.35); }
.ar-rs-dot.done { background: #059669; border-color: #059669; }
.ar-rs-dot.now { background: currentColor; border-color: currentColor; box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.14); }
.ar-rs-line { flex: 1 1 22px; max-width: 34px; height: 2px; background: rgba(100, 116, 139, 0.25); }
.ar-rs-line.done { background: #059669; }
.ar-rs-label { font-size: 11px; font-weight: 700; white-space: nowrap; }
.ar-row-stepper.st-completed { color: #059669; }
.ar-row-stepper.st-in-progress { color: #d97706; }
.ar-row-stepper.st-parts-order, .ar-row-stepper.st-parts-received { color: #1a5fa8; }
.ar-row-stepper.st-in-progress .ar-rs-dot.now { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16); }
.ar-row-stepper.st-completed .ar-rs-dot.now { box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.16); }
/* The Closed chip is a link now: closed tickets live in Repair History. */
.ar-seg-link { text-decoration: none; color: var(--text-muted, #64748b); }
.ar-seg-link:hover { color: var(--primary, #1a5fa8); }
/* Cards view: the same width as a parts card, whatever the screen, and every
   photo in the same box — a small icon file no longer renders small. */
body.ar-hcards .repairs-grid { grid-template-columns: repeat(auto-fill, 540px); justify-content: center; gap: 24px; max-width: none; }
/* .ar-hcard.gsm-card: one class more than part_card.css's own image rule,
   which loads later and would otherwise put the image back at natural size. */
.ar-hcard.gsm-card .gsm-imgwrap { height: 165px; }
.ar-hcard.gsm-card .gsm-imgwrap img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; }
/* Three per row at the parts card's width (560px), centred; narrower screens
   fit what they can at the same width rather than shrinking the card. */
body.ar-hcards .repairs-grid { grid-template-columns: repeat(3, 760px); }
@media (max-width: 2400px) { body.ar-hcards .repairs-grid { grid-template-columns: repeat(auto-fill, 760px); } }
/* part_card.css loads after this sheet and its .product-card rule says
   display:flex, which was re-showing the horizontal cards in the other two
   views. The view switch has the last word. */
.ar-hcard { display: none !important; }
body.ar-hcards .ar-hcard:not(.seg-hidden) { display: flex !important; }
/* Cards view: the customer name takes the ticket card's own name treatment
   (house blue, bold, uppercase) at the part card's title size. */
.ar-hcard.gsm-card .gsm-title { color: var(--brand-blue, #1a5fa8); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; }
/* Cards view head: the name at the left corner, then a rule, then the phone. */
.ar-hcard.gsm-card .ar-h-head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ar-hcard.gsm-card .ar-h-head .gsm-title { width: auto; min-height: 0; margin-bottom: 0; display: block; text-align: left; -webkit-line-clamp: 1; }
.ar-h-sep { flex: 0 0 auto; width: 1px; height: 22px; background: rgba(100, 116, 139, 0.32); }
.ar-h-phone { font-family: var(--font-num, inherit); font-size: 15px; font-weight: 600; color: var(--text-mid, #475569); letter-spacing: 0.02em; white-space: nowrap; }
/* Cards view: the ticket's progress stepper under the head, full width, no
   panel of its own. A read-only copy — the card itself opens the ticket. */
.ar-hcard.gsm-card .ar-h-stepper { padding: 14px 18px 0; pointer-events: none; }
.ar-hcard.gsm-card .ar-h-stepper .rp-stepper { margin-top: 2px; padding: 0; }
/* Cards view: the eye in the top-right corner, the same button as the trash
   on the ticket cards, and the panel it lifts over the card while hovered. */
/* The eye sits beside the big number, engraved: no plate, the glyph cut into
   the card with a light lip below and a shade above. */
.ar-h-price-row { display: inline-flex; align-items: center; gap: 10px; }
.ar-hcard.gsm-card .ar-h-eye { position: static; width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0; box-shadow: none;
  color: rgba(120, 132, 150, 0.7); pointer-events: auto; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)) drop-shadow(0 -1px 0 rgba(30, 50, 90, 0.18)); }
.ar-hcard.gsm-card .ar-h-eye svg { width: 13px; height: 13px; }
.icon-btn-eye:hover { background: transparent; border: 0; box-shadow: none; color: var(--primary, #1a5fa8); transform: none; }
.ar-hcard.gsm-card .ar-h-pop { display: none; position: absolute; left: 14px; right: 14px; top: 52px; z-index: 7; text-align: left;
  background: #ffffff; border: 1px solid rgba(100, 160, 220, 0.20); border-radius: 16px; padding: 12px 14px; box-shadow: 0 14px 34px rgba(13, 42, 82, 0.18); cursor: default; }
.ar-hcard.gsm-card.peek .ar-h-pop { display: block; }
.ar-h-pop-device { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.ar-h-pop-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; font-weight: 600; color: #0f172a; }
.ar-h-pop-sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(100, 116, 139, 0.18); }
.ar-h-pop-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; color: #475569; }
.ar-h-pop-row b { font-family: var(--font-num, inherit); font-weight: 600; color: #0f172a; }
.ar-h-pop-total b { color: #059669; font-size: 16px; }
.ar-h-pop-dep b { color: #d97706; }
.ar-h-pop-bal b { color: #b52020; font-size: 16px; }
/* The parts-and-charges panel as frosted glass: translucent white over the
   card, a real backdrop blur, a bright rim and a highlight along the top. */
.ar-hcard.gsm-card .ar-h-pop {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.52) 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(13, 42, 82, 0.20), 0 1px 2px rgba(13, 42, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* First stepper label: the opening date and time, two lines, in place of the words. */
.rp-label-date { display: inline; font-weight: 700; white-space: nowrap; }
.rp-label-time { display: inline; margin-left: 5px; opacity: 0.85; white-space: nowrap; }
/* Under the date and time: the till the ticket was written at (Luis,
   2026-09-22). Its own line - the two spans above are inline, so a block
   after them drops beneath - a step quieter than the date, tracked and
   small so it reads as a tag rather than a third timestamp. Takes the step's
   own colour like the rest of the label. */
.rp-label-till { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 600;
                 letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.72; white-space: nowrap; }
.rp-stepper.rp-compact .rp-label-till { font-size: 8px; }
/* Cards view: the tech and the stepper share one row, tech at the left. */
.ar-hcard.gsm-card .ar-h-stepper { display: flex; align-items: center; gap: 16px; }
.ar-hcard.gsm-card .ar-h-stepper .rp-chip-head { flex: 0 0 auto; margin: 0; padding: 0; }
.ar-hcard.gsm-card .ar-h-stepper .rp-stepper { flex: 1 1 auto; margin-top: 0; }
/* Cards view foot: the ticket's notes when it has any, in the ticket's own ink. */
.ar-hcard.gsm-card .ar-h-notes span { color: #334155; font-style: italic; }
/* Cards view: the days circle lives in the tile strip now, sized for a tile. */
.ar-hcard.gsm-card .ar-h-days .gsm-stock-dot { width: 44px; height: 44px; }
.ar-hcard.gsm-card .ar-h-days .gsm-stock-dot b { font-size: 16px; }
/* Cards view: the parts-and-charges panel sits in the middle of the card in
   place of the photo and the big number — always open, still frosted glass. */
.ar-hcard.gsm-card .ar-h-mid { display: block; padding: 6px 16px 14px; }
.ar-hcard.gsm-card .ar-h-pop.ar-h-pop-inline { display: block; position: static; }
/* Cards view: the breakdown sits straight on the card — no glass box — and
   each part carries its photo ahead of its name. */
.ar-hcard.gsm-card .ar-h-pop.ar-h-pop-inline { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px 2px 0; }
body.neu-mode .ar-hcard.gsm-card .ar-h-pop.ar-h-pop-inline { background: transparent; border: 0; box-shadow: none; }
.ar-h-pop-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ar-h-pop-img { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; mix-blend-mode: multiply; }
/* ── Trial (2026-09-10): the ticket stub ───────────────────────────────────
   A narrow strip down the left of each card in the Cards view, in the card's
   pay-status colour, carrying the order number and a barcode turned on their
   side, with a row of punched holes along the tear line. Delete this block
   and the stub markup in active_repairs.php to remove it. */
/* Three classes: part_card.css's own .product-card.gsm-card padding loads later and was cancelling this. */
.ar-hcard.gsm-card.product-card { padding-left: 54px !important; }
.ar-hcard.gsm-card .ar-h-stub { position: absolute; left: 0; top: 0; bottom: 0; width: 54px; z-index: 3;
  background: color-mix(in srgb, var(--card-tint, #3060a0) 78%, #ffffff); color: #ffffff; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .ar-hcard.gsm-card .ar-h-stub { background: var(--card-tint, #3060a0); } }
.ar-hcard.gsm-card .ar-h-stub::after { content: ''; position: absolute; top: 6px; bottom: 6px; right: -5px; width: 10px;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.26) 2.6px, transparent 3.2px) 0 0 / 10px 13px repeat-y; }
.ar-hcard.gsm-card .ar-h-stub-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; writing-mode: vertical-rl; transform: rotate(180deg); }
.ar-hcard.gsm-card .ar-h-stub-num { font-family: var(--font-num, inherit); font-size: 19px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap;
  /* Engraved into the stub: a dark shade above the strokes, a light lip below. */
  color: rgba(255, 255, 255, 0.92); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35); }
.ar-hcard.gsm-card .ar-h-stub-bar { display: block; width: 18px; height: 110px;
  background: repeating-linear-gradient(to bottom, #ffffff 0 2px, transparent 2px 4px, #ffffff 4px 5px, transparent 5px 8px, #ffffff 8px 11px, transparent 11px 13px, #ffffff 13px 14px, transparent 14px 17px); }
/* The order number lives on the stub, so its tile steps out and the strip is three across. */
.ar-hcard.gsm-card .gsm-tile-sku { display: none; }
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(3, 1fr); }
/* The stub's actions: edit, park, delete stacked at its top, white on the colour. */
.ar-hcard.gsm-card .ar-h-stub-actions { position: absolute; top: 10px; left: 0; right: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn { width: 30px; height: 30px; border-radius: 8px; background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92) !important; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.30)); pointer-events: auto; transform: none; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.18) !important; transform: none; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn svg { width: 15px; height: 15px; }
/* The barcode and number sit below the buttons. */
.ar-hcard.gsm-card .ar-h-stub-in { top: 118px; }
/* Stub buttons engraved: cut into the colour, a shade above and a lip below, no plate. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn { color: rgba(255, 255, 255, 0.82) !important;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn:hover { color: #ffffff !important; background: transparent !important; }
/* A fourth tile: Complete Ticket, the same button and the same gate as on the
   ticket card — disabled until the timeline reaches Completed. */
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(4, 1fr); }
.ar-hcard.gsm-card .ar-h-complete { flex: 0 0 auto; padding: 8px 12px; font-size: 11.5px; border-radius: 999px; white-space: nowrap; }
.ar-hcard.gsm-card .ar-h-complete svg { width: 13px; height: 13px; }
/* The tech's face at the top of the stub, labelled, above the three actions;
   the strip below is three tiles again. */
.ar-hcard.gsm-card .ar-h-stub-tech { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 6px; color: rgba(255, 255, 255, 0.88); }
.ar-hcard.gsm-card .ar-h-stub-tech .ar-h-tech-pic { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); background: #fff; }
.ar-hcard.gsm-card .ar-h-stub-tech .ar-h-tech-ini { color: #1a5fa8; font-size: 12px; }
.ar-hcard.gsm-card .ar-h-stub-tech small { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); }
.ar-hcard.gsm-card .ar-h-stub-in { top: 172px; }
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(3, 1fr); }
/* The Tech label in the ticket number's own ink; four tiles with Pay status in. */
.ar-hcard.gsm-card .ar-h-stub-tech small { color: rgba(255, 255, 255, 0.92); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35); }
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(4, 1fr); }
/* At 9px the engraving's dark shade swallowed the glyphs and read as grey.
   Larger, solid white, and only the faint shade above. */
.ar-hcard.gsm-card .ar-h-stub-tech small { font-size: 10.5px; color: #ffffff !important; opacity: 1; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.22); }
/* ── Cards view: comments ────────────────────────────────────────────────────
   The icon at the right end of the name row. Dead grey when the ticket has no
   notes; red with a soft pulsing ring when it has, and hovering it lifts a
   frosted panel with every note. */
.ar-hcard.gsm-card .ar-h-head { position: relative; }
.ar-hcard.gsm-card .ar-h-cmt { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  background: transparent !important; border: 0 !important; box-shadow: none; color: rgba(120, 132, 150, 0.45); pointer-events: auto; }
.ar-hcard.gsm-card .ar-h-cmt:disabled { cursor: default; }
.ar-hcard.gsm-card .ar-h-cmt.has-notes { color: #d61c26; animation: ar-cmt-pulse 1.8s ease-in-out infinite; }
.ar-hcard.gsm-card .ar-h-cmt.has-notes:hover { color: #b3141d; transform: translateY(-50%); }
@keyframes ar-cmt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 28, 38, 0.45); } 60% { box-shadow: 0 0 0 8px rgba(214, 28, 38, 0); } }
.ar-hcard.gsm-card .ar-h-cpop { display: none; position: absolute; left: 14px; right: 14px; top: 52px; z-index: 7; text-align: left; cursor: default;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.52) 100%); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 16px; padding: 12px 14px;
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(13, 42, 82, 0.20), 0 1px 2px rgba(13, 42, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.ar-hcard.gsm-card.cpeek .ar-h-cpop { display: block; }
.ar-h-cpop-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: 6px; }
.ar-h-cpop-body { font-size: 13px; color: #0f172a; line-height: 1.45; }
.ar-h-cpop-body div + div { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(100, 116, 139, 0.16); }
/* The comments icon: larger, halfway in from the edge, engraved. */
.ar-hcard.gsm-card .ar-h-cmt { right: 14%; width: 38px; height: 38px;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.28)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)); }
.ar-hcard.gsm-card .ar-h-cmt svg { width: 21px; height: 21px; }
/* Flat icon, no plate of any kind; the "has comments" state is a red glow
   breathing from beneath the glyph instead of a ring. */
.ar-hcard.gsm-card .ar-h-cmt, .ar-hcard.gsm-card .ar-h-cmt:hover, .ar-hcard.gsm-card .ar-h-cmt.has-notes, .ar-hcard.gsm-card .ar-h-cmt.has-notes:hover {
  background: transparent !important; border: 0 !important; box-shadow: none !important; animation: none; }
body.neu-mode .ar-hcard.gsm-card .ar-h-cmt, body.neu-mode .ar-hcard.gsm-card .ar-h-cmt:hover { background: transparent !important; box-shadow: none !important; }
.ar-hcard.gsm-card .ar-h-cmt.has-notes { color: #d61c26; animation: ar-cmt-glow 2s ease-in-out infinite; }
@keyframes ar-cmt-glow {
  0%, 100% { filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.28)) drop-shadow(0 5px 6px rgba(214, 28, 38, 0.35)); }
  50%      { filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.28)) drop-shadow(0 8px 10px rgba(214, 28, 38, 0.85)); }
}
/* With comments: a solid red disc with the white glyph, a soft light ring
   around it, and a thin ring that keeps expanding outward and fading. */
.ar-hcard.gsm-card .ar-h-cmt.has-notes, .ar-hcard.gsm-card .ar-h-cmt.has-notes:hover {
  background: #d61c26 !important; color: #ffffff !important; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(214, 28, 38, 0.18), 0 4px 10px rgba(214, 28, 38, 0.30) !important;
  filter: none; animation: none; overflow: visible; }
.ar-hcard.gsm-card .ar-h-cmt.has-notes::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(214, 28, 38, 0.6);
  animation: ar-cmt-ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes ar-cmt-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
/* The disc filled with a red gradient; the theme rule above it was keeping it clear. */
.ar-hcard.gsm-card .ar-h-cmt.has-notes, .ar-hcard.gsm-card .ar-h-cmt.has-notes:hover,
body.neu-mode .ar-hcard.gsm-card .ar-h-cmt.has-notes, body.neu-mode .ar-hcard.gsm-card .ar-h-cmt.has-notes:hover {
  background: linear-gradient(145deg, #f05252 0%, #d61c26 55%, #a3121a 100%) !important; color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(214, 28, 38, 0.18), 0 4px 10px rgba(214, 28, 38, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; }
/* Ticket number on the stub, a size down. */
.ar-hcard.gsm-card .ar-h-stub-num { font-size: 15px; letter-spacing: 0.06em; }
/* The ticket card is a surface, not a button: no pointer, no lift on hover.
   Its own buttons do the work. */
.ar-hcard.gsm-card, .ar-hcard.gsm-card:hover { cursor: default; transform: none; }
/* ── Ticket card controls (behaviour only, the look is untouched) ───────────
   The stepper takes clicks again, the two pills take clicks, and the chooser
   that opens under a pill is a new element of its own. */
.ar-hcard.gsm-card .ar-h-stepper { pointer-events: auto; }
.ar-hcard.gsm-card .gsm-tile .part-grade.arh-pick { pointer-events: auto; cursor: pointer; }
.ar-hcard.gsm-card .ar-h-stepper .rp-source-btn { margin-right: 12px; flex: 0 0 auto; }
.arh-menu { position: fixed; z-index: 1300; display: flex; gap: 8px; padding: 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 100%); border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(13, 42, 82, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.arh-menu button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); white-space: nowrap; }
.arh-menu button.is-cur { outline: 2px solid rgba(15, 23, 42, 0.35); outline-offset: 2px; cursor: default; }
.arh-menu button:hover { filter: brightness(1.08); }
/* Ticket card, name row: the contact and print buttons at the left, the
   mirror of the comments icon at the right. Same small buttons the full card
   uses, so nothing new to look at. */
.ar-hcard.gsm-card .ar-h-contact { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; }
.ar-hcard.gsm-card .ar-h-contact-sep { width: 1px; height: 18px; background: rgba(100, 116, 139, 0.28); margin: 0 4px; }
.ar-hcard.gsm-card .ar-h-print svg { width: 16px; height: 16px; color: #7A8899; }
.ar-hcard.gsm-card .ar-h-print:hover svg { color: var(--primary, #1a5fa8); }
/* Photos and unlock: two more flat icons beside the comments one, and their
   panels — the same frosted glass as the comments panel. Behaviour only. */
.ar-hcard.gsm-card .ar-h-cmt.ar-h-photos-btn { right: calc(14% + 46px); }
.ar-hcard.gsm-card .ar-h-cmt.ar-h-unlock-btn { right: calc(14% + 92px); }
.ar-hcard.gsm-card .ar-h-cmt.ar-h-tool { cursor: pointer; }
.ar-hcard.gsm-card .ar-h-panel { display: none; position: absolute; left: 14px; right: 14px; top: 52px; z-index: 7; text-align: left; cursor: default;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.52) 100%); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 16px; padding: 12px 14px;
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(13, 42, 82, 0.20), 0 1px 2px rgba(13, 42, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95); }
.ar-hcard.gsm-card.ppeek .ar-h-ppop, .ar-hcard.gsm-card.upeek .ar-h-upop { display: block; }
.ar-hcard.gsm-card .ar-h-cpop-empty { font-size: 13px; color: #64748b; }
.ar-hcard.gsm-card .ar-h-pop-edit { margin-top: 10px; }
.ar-hcard.gsm-card .ar-h-upop-body { margin: 2px 0 10px; }
/* The original detailed cards are no longer a view. They stay in the DOM,
   hidden, because completing a ticket and the unlock modal read from them. */
.repairs-grid .repair-card { display: none !important; }
/* ── Name row, laid out as three columns so nothing can overlap ────────────
   Left: the contact and print buttons, small. Middle: name · phone, centred.
   Right: unlock, photos, comments. The earlier absolute placements are
   undone here. */
.ar-hcard.gsm-card .ar-h-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ar-hcard.gsm-card .ar-h-contact { position: static; transform: none; justify-self: start; gap: 2px; }
.ar-hcard.gsm-card .ar-h-contact .contact-btn-icon { width: 34px; height: 34px; }
.ar-hcard.gsm-card .ar-h-contact .cico { width: 18px; height: 18px; }
.ar-hcard.gsm-card .ar-h-print { display: inline-flex; align-items: center; justify-content: center; }
.ar-hcard.gsm-card .ar-h-print svg { display: block; width: 17px; height: 17px; color: #7A8899; }
.ar-hcard.gsm-card .ar-h-name { display: inline-flex; align-items: center; gap: 14px; justify-self: center; min-width: 0; }
.ar-hcard.gsm-card .ar-h-tools { justify-self: end; display: inline-flex; align-items: center; gap: 4px; }
.ar-hcard.gsm-card .ar-h-tools .ar-h-cmt { position: static; right: auto; top: auto; transform: none; }
.ar-hcard.gsm-card .ar-h-tools .ar-h-cmt.has-notes:hover { transform: none; }
/* Name row: the contact and print buttons flat and small, the name on one line. */
.ar-hcard.gsm-card .ar-h-head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ar-hcard.gsm-card .ar-h-contact .contact-btn-sm { width: 30px; height: 30px; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.ar-hcard.gsm-card .ar-h-contact .contact-btn-sm:hover { transform: none; }
.ar-hcard.gsm-card .ar-h-name .gsm-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; -webkit-line-clamp: unset; }
/* The "more" button on the stub, engraved like its neighbours, and the panel
   of ticket actions it opens: two columns of labelled buttons. */
.ar-hcard.gsm-card .ar-h-stub-in { top: 206px; }
.ar-hcard.gsm-card .ar-h-mpop .ar-h-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-hcard.gsm-card .ar-h-act { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(100, 116, 139, 0.18);
  background: rgba(255, 255, 255, 0.85); color: #334155; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.ar-hcard.gsm-card .ar-h-act:hover { background: #ffffff; color: var(--primary, #1a5fa8); border-color: rgba(26, 95, 168, 0.30); }
.ar-hcard.gsm-card .ar-h-act svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* The more button lives in a fifth tile, not on the stub: the stub's barcode
   and number need their room on short cards. The stub goes back to its height. */
.ar-hcard.gsm-card .ar-h-stub-in { top: 172px; }
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(5, 1fr); }
.ar-hcard.gsm-card.mpeek .ar-h-mpop { display: block; }
.ar-hcard.gsm-card .ar-h-more-tile .icon-btn-more { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 0; box-shadow: none; color: rgba(120, 132, 150, 0.8); cursor: pointer;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95)); }
.ar-hcard.gsm-card .ar-h-more-tile .icon-btn-more:hover { color: var(--primary, #1a5fa8); background: transparent; border: 0; box-shadow: none; transform: none; }
/* The expanding ring is positioned against the icon, so the icon must be its
   own positioning box — relative, not static, in the tools slot. */
.ar-hcard.gsm-card .ar-h-tools .ar-h-cmt { position: relative; }
/* Three actions in the panel, one row. */
.ar-hcard.gsm-card .ar-h-mpop .ar-h-acts { grid-template-columns: repeat(3, 1fr); }
/* ── Delete as a corner badge ──────────────────────────────────────────────
   The trash icon has left the stub. Deleting is now a round red X pinned to
   the card's top-right corner, half over the edge, that only appears while
   the pointer is on the card. The card lets it overhang (overflow visible),
   so the stub rounds its own left corners to keep the card's outline. */
.ar-hcard.gsm-card.product-card { overflow: visible !important; }
.ar-hcard.gsm-card .ar-h-stub { border-radius: 20px 0 0 20px; }
.ar-hcard.gsm-card .ar-h-x { position: absolute; top: -11px; right: -11px; z-index: 8; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 2px solid #ffffff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #ffffff;
  background: linear-gradient(145deg, #f87171 0%, #dc2626 55%, #b91c1c 100%);
  box-shadow: 0 3px 8px rgba(185, 28, 28, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20);
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.15s ease; }
.ar-hcard.gsm-card .ar-h-x svg { width: 12px; height: 12px; }
.ar-hcard.gsm-card:hover .ar-h-x, .ar-hcard.gsm-card .ar-h-x:focus-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.ar-hcard.gsm-card .ar-h-x:hover { transform: scale(1.12); background: linear-gradient(145deg, #fb7185 0%, #e11d48 55%, #be123c 100%); box-shadow: 0 5px 12px rgba(185, 28, 28, 0.50), 0 1px 2px rgba(0, 0, 0, 0.20); }
.ar-hcard.gsm-card .ar-h-x:active { transform: scale(0.94); }
/* No pointer to hover with (a phone or tablet): the badge just stays on. */
@media (hover: none) { .ar-hcard.gsm-card .ar-h-x { opacity: 1; transform: none; pointer-events: auto; } }
/* Two actions on the stub now, not three: the barcode moves up into the room. */
.ar-hcard.gsm-card .ar-h-stub-in { top: 138px; }
/* Print shortcuts on the stub: label and receipt at the top, a thin engraved
   rule, then edit and park. Five items now, so the buttons pull in a little
   and the barcode drops to make room; the shortest card still fits the number. */
.ar-hcard.gsm-card .ar-h-stub-actions { top: 8px; gap: 3px; }
.ar-hcard.gsm-card .ar-h-stub-tech { margin-bottom: 3px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn { width: 26px; height: 26px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn svg { width: 14px !important; height: 14px !important; }
.ar-hcard.gsm-card .ar-h-stub-div { display: block; width: 22px; height: 1px; margin: 2px 0; background: rgba(0, 0, 0, 0.28); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.40); }
.ar-hcard.gsm-card .ar-h-stub-in { top: 184px; }
/* The two print glyphs are drawn narrow inside their 24-unit box (a 12-wide
   label, a 16-wide receipt) where edit and park fill it, so at one box size
   they looked smaller. Boxed larger to match the others' drawn height. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-label svg { width: 18px !important; height: 18px !important; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-receipt svg { width: 16px !important; height: 16px !important; }
/* ── A second stub, down the right edge ────────────────────────────────────
   The same strip as the left one, mirrored: the colour, the rounded outer
   corners and the punched holes along its inner edge. Nothing on it yet — no
   number, no barcode. The card pads on the right to keep its content clear. */
.ar-hcard.gsm-card.product-card { padding-right: 54px !important; }
.ar-hcard.gsm-card .ar-h-stub-r { left: auto; right: 0; border-radius: 0 20px 20px 0; }
.ar-hcard.gsm-card .ar-h-stub-r::after { right: auto; left: -5px; }
/* Wider again with the second stub: 810px, so the content between the two
   strips keeps the room it had at 760px with one. */
body.ar-hcards .repairs-grid { grid-template-columns: repeat(3, 810px); }
@media (max-width: 2550px) { body.ar-hcards .repairs-grid { grid-template-columns: repeat(auto-fill, 810px); } }
/* ── Tech on the right stub, days on the left ──────────────────────────────
   The tech's face moves across to the top of the right stub. The days count
   takes its old place at the top of the left stub — a white dashed ring
   holding the number, labelled Days — so the tile strip is four across. */
.ar-hcard.gsm-card .ar-h-stub-days { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 3px; color: rgba(255, 255, 255, 0.92); }
.ar-hcard.gsm-card .ar-h-stub-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.16); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); }
.ar-hcard.gsm-card .ar-h-stub-dot b { font-family: var(--font-num, inherit); font-size: 13px; font-weight: 700; line-height: 1; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.30); }
.ar-hcard.gsm-card .ar-h-stub-days small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.22); }
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(4, 1fr); }
/* The call log on the right stub, under the tech: the same phone-and-list
   glyph and count badge as the contact row, white on the colour. It shares
   the contact row's classes so clUpdateBadge() keeps its count current. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog { overflow: visible; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog .cico { width: 18px; height: 18px; background-color: #ffffff !important; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog .calllog-count { top: -4px; right: -6px; min-width: 16px; height: 16px; font-size: 9.5px; }
/* The call log sits further down the right stub, and larger. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog { margin-top: 18px; width: 34px; height: 34px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog .cico { width: 26px; height: 26px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog .calllog-count { top: -3px; right: -5px; min-width: 17px; height: 17px; font-size: 10px; }
/* ── Days in the tech's ink; Device Password tile; frosted password modal ──
   The DAYS label matches TECH exactly (the theme's small-text rule was dimming
   it). The More tile is gone: label and receipt live on the stub now. In its
   place, first in the strip, a Device Password tile whose pill opens a frosted
   modal showing the pattern, PIN or password, with Change into the unlock modal. */
.ar-hcard.gsm-card .ar-h-stub-days small { color: #ffffff !important; opacity: 1; }
.ar-hcard.gsm-card .ar-h-stub-dot b { color: #ffffff !important; opacity: 1; }
.ar-hcard.gsm-card .ar-h-pass .part-grade { white-space: nowrap; }
.arh-pass-modal { position: fixed; inset: 0; z-index: 10050; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.arh-pass-modal.open { display: flex; }
.arh-pass-card { width: min(92vw, 380px); border-radius: 20px; padding: 16px 20px 16px; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.60) 100%); border: 1px solid rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85); animation: arh-pass-in 0.18s ease-out; }
@keyframes arh-pass-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
.arh-pass-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.arh-pass-head .ar-h-cpop-title { margin: 0; }
.arh-pass-x { width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: rgba(15, 23, 42, 0.08); color: #334155; font-size: 20px; line-height: 1; cursor: pointer; }
.arh-pass-x:hover { background: rgba(15, 23, 42, 0.15); }
.arh-pass-sub { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 12px; }
.arh-pass-body { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 14px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.60); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 6px rgba(15, 23, 42, 0.06); }
.arh-pass-body .unlock-display { margin: 0; }
.arh-pass-body .unlock-code-text { font-size: 22px; letter-spacing: 0.08em; }
.arh-pass-body .unlock-pattern-svg { width: 96px; height: 96px; }
.arh-pass-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.park-btn-plain { background: rgba(15, 23, 42, 0.08); color: #334155; }
/* Device photos from the right stub: a camera under the call log that opens
   the card's frosted photos panel, the same component the old card used. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos { width: 34px; height: 34px; margin-top: 6px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos svg { width: 20px !important; height: 20px !important; }
/* The camera's glass badge: the ticket's photo count on the button's corner,
   a frosted white pill on the stub colour. Absent when there are none. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos { position: relative; overflow: visible; }
.ar-hcard.gsm-card .ar-h-photo-count { position: absolute; top: -4px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; color: #ffffff; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.20) 100%); border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px) saturate(1.4); -webkit-backdrop-filter: blur(6px) saturate(1.4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.70); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
/* The stub's camera is the icons8 camera, a mask like the call log's glyph so
   the stub colours it white. */
.cico-cam { -webkit-mask-image: url('icon/camera.png'); mask-image: url('icon/camera.png'); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos .cico { width: 26px; height: 26px; background-color: #ffffff !important; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)); }
/* The stub's call log takes the icons8 notifications glyph; both it and the
   camera step up a size. The contact row's own call-log icon is unchanged. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog,
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos { width: 40px; height: 40px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-calllog .cico { width: 32px; height: 32px; -webkit-mask-image: url('icon/calllog.png'); mask-image: url('icon/calllog.png'); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos .cico { width: 32px; height: 32px; }
/* The passcode button on the right stub, after the camera: the icons8 passcode
   glyph, the same size, a glass check on its corner when a code is set. */
.cico-pass { -webkit-mask-image: url('icon/passcode.png'); mask-image: url('icon/passcode.png'); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-pass { position: relative; overflow: visible; width: 40px; height: 40px; margin-top: 6px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-pass .cico { width: 32px; height: 32px; background-color: #ffffff !important; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)); }
.ar-hcard.gsm-card .ar-h-pass-badge { font-size: 11px; }
/* ── Comments at the foot of the right stub ────────────────────────────────
   The animated comments button leaves the name row for the bottom of the
   right stub: white glyph on the colour when there are none, the red disc
   with its expanding ring (now white, so it shows on a red stub) when there are. */
.ar-hcard.gsm-card .ar-h-stub-foot { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: flex; justify-content: center; }
.ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt { position: relative; right: auto; top: auto; transform: none; width: 38px; height: 38px; color: rgba(255, 255, 255, 0.60);
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)); }
.ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt.has-notes, .ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt.has-notes:hover { transform: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.30), 0 4px 10px rgba(0, 0, 0, 0.28) !important; }
.ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt.has-notes::after { border-color: rgba(255, 255, 255, 0.80); }
/* The Device Password tile is gone (the stub's passcode button does that), so
   the strip is three across; the camera and passcode glyphs press and grow
   under the pointer the way the call log's does. */
.ar-hcard.gsm-card .gsm-tiles { grid-template-columns: repeat(3, 1fr); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos .cico, .ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-pass .cico { transition: transform 0.15s ease; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos:hover .cico, .ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-pass:hover .cico { transform: scale(1.12); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-photos:active .cico, .ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-pass:active .cico { transform: scale(0.94); }
/* Each part's price after its source pill; the name takes the slack so the
   pill and the price sit together at the right. */
.ar-h-pop-item .ar-h-pop-name { flex: 1 1 auto; }
.ar-h-pop-price { flex: 0 0 auto; font-family: var(--font-num, inherit); font-size: 13.5px; font-weight: 700; color: #0f172a; margin-left: 2px; min-width: 62px; text-align: right; }
/* ── Device model on every card ────────────────────────────────────────────
   The heading above the parts names the device whenever the items agree on
   one, with a small pencil to change it; a ticket written up without a model
   gets a muted "not set" pill that opens the same modal to add one. */
.ar-h-pop-device { display: flex; align-items: center; gap: 6px; }
.ar-h-pop-device .ar-h-dev-edit { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; }
.ar-h-pop-device .ar-h-dev-edit svg { width: 12px; height: 12px; }
.ar-hcard:hover .ar-h-pop-device .ar-h-dev-edit { opacity: 1; }
.ar-h-pop-device .ar-h-dev-edit:hover { color: var(--primary, #1a5fa8); background: rgba(26, 95, 168, 0.10); }
.ar-h-pop-device.ar-h-pop-device-none { text-transform: none; letter-spacing: 0; }
.ar-h-dev-set { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px dashed rgba(100, 116, 139, 0.55); background: rgba(255, 255, 255, 0.45); color: #64748b; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.ar-h-dev-set:hover { color: var(--primary, #1a5fa8); border-color: var(--primary, #1a5fa8); background: rgba(255, 255, 255, 0.85); }
.arh-model-input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 4px; padding: 11px 14px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; color: #0f172a;
  border: 1px solid rgba(100, 116, 139, 0.30); background: rgba(255, 255, 255, 0.75); outline: none; }
.arh-model-input:focus { border-color: var(--primary, #1a5fa8); box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.18); background: #ffffff; }
/* Chooser menus (location, pay status): every option's label in white, the
   same as the chosen one — the theme's button catch-all was greying the rest. */
.arh-menu button, .arh-menu button:hover, .arh-menu button.is-cur,
body.neu-mode .arh-menu button, body.neu-mode .arh-menu button:hover { color: #ffffff !important; opacity: 1 !important; }
/* ── Right stub in the card's own gradient ─────────────────────────────────
   The right strip paints the same white-to-tint gradient as the card body
   instead of the solid colour, so its contents switch from white-on-colour
   to the pay colour on light: glyphs, the TECH label, the comments icon and
   the glass badges. The left stub keeps the solid colour and its barcode. */
.ar-hcard.gsm-card .ar-h-stub-r { color: var(--card-tint, #3060a0);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.80) 42%, color-mix(in srgb, var(--card-tint, #3060a0) 22%, #ffffff) 100%); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .ar-hcard.gsm-card .ar-h-stub-r { background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%); } }
.ar-hcard.gsm-card .ar-h-stub-r .ar-h-stub-actions .icon-btn { color: var(--card-tint, #3060a0) !important; filter: none; }
.ar-hcard.gsm-card .ar-h-stub-r .ar-h-stub-actions .icon-btn .cico { background-color: var(--card-tint, #3060a0) !important; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
.ar-hcard.gsm-card .ar-h-stub-r .ar-h-stub-tech { color: var(--card-tint, #3060a0); }
.ar-hcard.gsm-card .ar-h-stub-r .ar-h-stub-tech small { color: var(--card-tint, #3060a0) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.ar-hcard.gsm-card .ar-h-stub-r .ar-h-tech-pic { border-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 0 0 1px color-mix(in srgb, var(--card-tint, #3060a0) 35%, #ffffff); }
.ar-hcard.gsm-card .ar-h-stub-r .ar-h-photo-count { color: #ffffff; text-shadow: none; border-color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-tint, #3060a0) 78%, #ffffff) 0%, var(--card-tint, #3060a0) 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt { color: color-mix(in srgb, var(--card-tint, #3060a0) 65%, #94a3b8); filter: none; }
.ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt.has-notes, .ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt.has-notes:hover {
  box-shadow: 0 0 0 4px rgba(214, 28, 38, 0.18), 0 4px 10px rgba(214, 28, 38, 0.30) !important; }
.ar-hcard.gsm-card .ar-h-stub-foot .ar-h-cmt.has-notes::after { border-color: rgba(214, 28, 38, 0.6); }
/* ── Pay-status watermark ──────────────────────────────────────────────────
   PAID / DEPOSIT / PAY ON PICKUP stamped faintly in the open band under the
   totals, in the card's own tint, tilted like a rubber stamp. The middle
   section takes the card's spare height so the stamp has its own room. */
.ar-hcard.gsm-card .ar-h-mid { position: relative; flex: 1 1 auto; padding-bottom: 44px; }
.ar-hcard.gsm-card .ar-h-wm { position: absolute; right: 22px; bottom: 6px; pointer-events: none; user-select: none; white-space: nowrap;
  font-size: 34px; font-weight: 900; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase;
  color: var(--card-tint, #3060a0); opacity: 0.13; transform: rotate(-4deg); transform-origin: right bottom; }
/* The stamp centred in the band and lifted a little. */
.ar-hcard.gsm-card .ar-h-wm { right: auto; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(-4deg); transform-origin: center; }
/* The stamp sits across the Subtotal / Tax / Total rows themselves, centred
   between the labels and the figures; the band below goes back to normal. */
.ar-hcard.gsm-card .ar-h-mid { padding-bottom: 14px; }
.ar-hcard.gsm-card .ar-h-pop-sum { position: relative; }
.ar-hcard.gsm-card .ar-h-wm { top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); }
/* ── Device Unlock modal, frosted glass ────────────────────────────────────
   The same glass as the Device Password modal: a translucent white gradient
   over a blurred backdrop, a white hairline, a deep soft shadow. Written with
   !important because the theme sheet paints this modal solid the same way. */
.ulk-modal-overlay { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ulk-modal-overlay .ulk-modal, body.neu-mode .ulk-modal-overlay .ulk-modal {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.60) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.90) !important; border-radius: 20px;
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; }
.ulk-modal-overlay .ulk-modal-head { border-bottom-color: rgba(255, 255, 255, 0.9); background: transparent; }
.ulk-modal-overlay .ulk-tab:not(.active) { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); }
/* ── Comments panel: from the button, at the button ────────────────────────
   The panel now sits low, its bottom level with the comments button at the
   foot of the right stub, and it grows out of that corner: kept in the flow
   (display block) but shrunk into the button's corner and invisible until
   the card has cpeek, then it springs open toward the top-left. Visibility
   is delayed on the way out so the shrink plays before it disappears. */
.ar-hcard.gsm-card .ar-h-cpop { display: block !important; top: auto; bottom: 14px; left: 14px; right: 62px;
  transform-origin: 100% 100%; transform: translate(30px, 26px) scale(0.30); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.30s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity 0.18s ease, visibility 0s linear 0.30s; }
.ar-hcard.gsm-card.cpeek .ar-h-cpop { transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform 0.30s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity 0.16s ease, visibility 0s; }
/* Clear of the left stub. */
.ar-hcard.gsm-card .ar-h-cpop { left: 66px; }
/* ── The panel's tail into the comments button ─────────────────────────────
   A small glass diamond on the panel's right edge, level with the button's
   centre, points into it; the corner below it is squared off so the panel
   reads as attached to the button rather than floating beside it. */
.ar-hcard.gsm-card .ar-h-cpop { right: 58px; border-bottom-right-radius: 6px; overflow: visible; }
.ar-hcard.gsm-card .ar-h-cpop::after { content: ''; position: absolute; right: -8px; bottom: 12px; width: 15px; height: 15px; transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.78) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.9); border-right: 1px solid rgba(255, 255, 255, 0.9); border-radius: 0 3px 0 0;
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 3px -3px 6px rgba(15, 23, 42, 0.05); }

/* ── Texting from the popup (httpSMS, 2026-09-14) ─────────────────────────
   The popup grows to hold the templates, the text and the history. */
.text-popup { width: 420px; }
.sms-send { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sms-templates { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sms-body {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px;
    padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
    background: var(--bg-light); color: var(--text-dark); font: inherit; font-size: 13px; line-height: 1.45;
}
.sms-body:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.sms-meta { font-size: 11px; color: var(--text-muted); text-align: right; }
.sms-send-btn { width: 100%; }
.sms-send-btn:disabled { opacity: .6; cursor: default; }
.sms-note { font-size: 12px; color: var(--text-mid); min-height: 16px; text-align: center; }
.sms-off { font-size: 12px; color: var(--text-muted); text-align: center; }
.sms-history { width: 100%; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--card-border); padding-top: 10px; }
.sms-history:empty { display: none; }
.sms-history-title { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.sms-row { padding: 8px 10px; border-radius: 10px; background: var(--bg-light); font-size: 12px; }
.sms-row-in { background: rgba(37, 99, 235, 0.08); }
.sms-row-meta { font-size: 10.5px; color: var(--text-muted); margin-bottom: 3px; }
.sms-row-text { color: var(--text-dark); white-space: pre-wrap; word-break: break-word; }
.sms-st-failed .sms-row-meta, .sms-st-expired .sms-row-meta { color: var(--danger); }
.sms-st-delivered .sms-row-meta { color: var(--success-dark); }
.sms-count { background: var(--success-dark); }
/* The Text button on the ticket stub, under the password (2026-09-14):
   the same white glyph as its neighbours, the sent-count badge in green. */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-text { position: relative; overflow: visible; width: 40px; height: 40px; margin-top: 6px; }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-text .cico { width: 30px; height: 30px; background-color: #ffffff !important; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.35)); }
/* Hover keeps the card tint like its neighbours: white here vanished against the light right-hand stub (Luis, 2026-09-14). */
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-text:hover .cico { background-color: var(--card-tint, #3060a0) !important; transform: scale(1.12); }
.ar-hcard.gsm-card .ar-h-stub-actions .icon-btn-text .sms-count { top: -3px; right: -5px; min-width: 17px; height: 17px; font-size: 10px; }
/* The number in the Text popup is a field now (2026-09-15): bare, centred,
   in the same big figure it always showed, a hairline only when focused. */
input.text-popup-phone {
    width: 100%; max-width: 220px; text-align: center; background: transparent;
    border: 1px solid transparent; border-radius: 8px; padding: 2px 6px;
    font: inherit; font-size: 20px; font-weight: 700; color: var(--text-dark); letter-spacing: 0.5px;
}
input.text-popup-phone:focus { outline: none; border-color: var(--primary); background: var(--bg-light); }
/* House tooltips inside list cells keep the bubble's dark text and are not
   clipped by the cell's ellipsis rule (2026-09-26). */
.ar-row-cell .pos-pop { color: #1f2d3d !important; font-size: 11.5px !important; overflow: visible !important; text-overflow: clip !important; }