:root {
    --primary: #2563EB;
    --primary-mid: #3B82F6;
    --primary-light: #60A5FA;
    --accent: #F97316;
    --accent-hover: #EA580C;
    --bg-light: #F8FAFC;
    --text-dark: #0d2a52;
    --text-secondary: rgba(30, 70, 130, 0.75);
    --success: #34D399;
    --success-dark: #10B981;
    --danger: #EF4444;
    --warning: #FBBF24;
    --muted: #94A3B8;
    --glass-bg: rgba(255, 255, 255, 0.38);
    --glass-border: rgba(100, 160, 220, 0.30);
    --glass-shadow: rgba(60, 100, 180, 0.18);
}

/* body background inherited from index.css (1234.png) */

/* ========== LAYAWAY CONTAINER ========== */
.layaway-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--font-ui);
}

/* ========== HEADER ========== */
.layaway-header {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px var(--glass-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layaway-header h1 {
    color: var(--text-dark);
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-ui);
}

.layaway-header p {
    color: var(--text-secondary);
    margin: 4px 0 0;
    font-size: 13px;
}

/* ========== TABLE CONTAINER ========== */
.layaway-table-container {
    background: var(--glass-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px var(--glass-shadow);
    overflow-x: auto;
}

/* ========== TABLE ========== */
.layaway-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: var(--font-ui);
}

.layaway-table thead {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
}

.layaway-table th {
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid var(--primary);
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.layaway-table th:first-child {
    border-radius: 10px 0 0 0;
}

.layaway-table th:last-child {
    border-radius: 0 10px 0 0;
}

.layaway-table td {
    color: var(--text-dark);
    padding: 12px 14px;
    border-bottom: 1px solid rgba(100, 160, 220, 0.12);
    font-size: 13px;
}

.layaway-table tbody tr {
    transition: all 0.2s ease;
}

.layaway-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

/* Override inline styles for customer/item sub-text */
.layaway-table td div[style*="color: rgba(255"] {
    color: var(--muted) !important;
}

.layaway-table td div[style*="font-weight: 600"] {
    color: var(--text-dark) !important;
}

/* ========== STATUS BADGES ========== */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.status-pending {
    background: rgba(251, 191, 36, 0.12);
    color: #D97706;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

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

.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ========== ACTION BUTTONS ========== */
.action-buttons {
    display: flex;
    gap: 6px;
}

.btn-add-layaway {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-add-layaway:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.btn-view {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    border: 1px solid rgba(37, 99, 235, 0.25);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view:hover {
    background: rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.btn-delete {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: translateY(-1px);
}

.no-data {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px;
    font-size: 14px;
}

/* ========== MODAL ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 42, 82, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-y: auto;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 50px rgba(13, 42, 82, 0.2);
    animation: slideDown 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(100, 160, 220, 0.2);
}

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

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
}

.modal-body {
    margin-bottom: 20px;
}

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

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

.modal-form-label {
    display: block;
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modal-form-input {
    width: 100%;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-dark);
    font-size: 14px;
    font-family: var(--font-ui);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

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

.modal-form-input::placeholder {
    color: var(--muted);
}

.modal-footer {
    display: flex;
    gap: 10px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.modal-btn-save {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.modal-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

.modal-btn-cancel {
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-dark);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.modal-btn-cancel:hover {
    background: rgba(148, 163, 184, 0.15);
}

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

    .layaway-container {
        padding: 12px;
    }

    .layaway-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .layaway-header h1 {
        font-size: 18px;
    }
}

/* ── Scan feedback in the Add Layaway modal ─────────────────────────────────
   The line under the IMEI box. It carries three states and they are not
   decoration: "looking up" stops a second scan landing on top of the first,
   "found" is the operator's confirmation that the phone on the counter is the
   phone in the row, and "not found" has to be readable at a glance because the
   commonest cause is a phone that was already sold. */
.lw-scan {
  min-height: 18px;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.lw-scan-wait { color: #64748b; font-weight: 500; }
.lw-scan-ok   { color: #047857; }
.lw-scan-bad  { color: #b91c1c; }
.lw-scan-ok strong { font-weight: 800; }

/* ── Header layout, now that the theme switcher shares the row ─────────────── */
.layaway-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lw-head-text { min-width: 0; }
.lw-theme-bar { flex: 0 0 auto; }