/* ============================================================
   soft.css — OPT-IN comparison layer for the soft-material look.
   Loaded last, so it overrides activerepairs.css.

   To turn it off: delete the <link> to this file in active_repairs.php.
   Nothing else needs changing — no other file depends on it.

   Tokens (--surface, --e1..--e3, --inset) live in ../index.css.
   ============================================================ */

/* ── Surfaces: same tint, no blur, one calm shadow ── */
.repair-card,
.completed-card {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--hairline) !important;
    /* replaces the old four-layer stack with heavy inset highlights */
    box-shadow: var(--e1) !important;
}
.repair-card:hover,
.completed-card:hover {
    box-shadow: var(--e2) !important;
}

/* Nested blocks read as slightly lighter paper, not their own floating cards */
.detail-chip,
.unlock-loc-row .detail-chip,
.order-items-summary,
.repair-progress-chip {
    background: var(--surface-2) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: none !important;
}

/* Modals sit clearly above everything */
.modal,
.ulk-modal,
.cl-card {
    background: var(--surface-2) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: var(--e3) !important;
}

/* ── Controls: tactile without the neumorphic contrast problem ── */
.complete-order-btn,
.card-corner-actions .icon-btn,
.btn-calllog-sm,
.ar-unlock-btn {
    backdrop-filter: none !important;
    box-shadow: var(--e1);
    transition: box-shadow .13s ease, transform .13s ease;
}
.complete-order-btn:hover:not(:disabled),
.card-corner-actions .icon-btn:hover,
.btn-calllog-sm:hover {
    box-shadow: var(--e2);
}
/* Real press feedback */
.complete-order-btn:active:not(:disabled),
.card-corner-actions .icon-btn:active,
.btn-calllog-sm:active,
.ar-unlock-btn:active {
    box-shadow: var(--inset);
    transform: translateY(1px);
}

/* ── Inset marks the "on" state ── */
/* Selected pay status, selected device location */
.pay-status-radio input:checked + label,
.device-loc-btn.active {
    box-shadow: var(--inset);
}

/* Inputs are wells */
.ar-edit .ar-input,
.modal input[type="text"],
.modal input[type="number"],
.modal textarea,
.modal select {
    background: var(--surface-2) !important;
    box-shadow: var(--inset);
    border-color: var(--hairline) !important;
}