/* ======== RESET & TOKENS ======== */
.mip-page{--bg:#fff;--ink:#1f2937;--muted:#6b7280;--primary:#2f6bff;--primary-600:#2655cc;--surface:#f5f7fb;--border:#e5e7eb;--ok:#10b981;--warn:#f59e0b;--danger:#ef4444;--pill:#eef2ff;--tableStripe:#f8fafc;--selRow:#e7f0ff;--shadow:0 1px 2px rgba(16,24,40,.04),0 1px 1px rgba(16,24,40,.02)}
.mip-page *{box-sizing:border-box}
.mip-page .container{max-width:1180px;margin:0 auto;padding:28px 16px}
.mip-page h1,h2,h3{color:var(--ink);margin:0}
.mip-page p, .mip-page small{color:var(--muted)}
/* ======== STEPS / BREADCRUMB ======== */
.mip-steps{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.mip-step{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:600;color:#344054}
.mip-step--active{background:#e9efff;color:#1d4ed8}
.mip-step svg{width:18px;height:18px;opacity:.9}
.mip-step-sep{color:#94a3b8}
/* ======== CARD WRAPPER ======== */
.mip-shell{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:22px;box-shadow:var(--shadow)}
.mip-shell h3.title{font-size:26px;margin-bottom:6px}
/* ======== LAYOUT ======== */
.mip-grid{display:grid;grid-template-columns:360px 1fr;gap:28px;margin-top:18px}
@media (max-width: 900px){.mip-grid{grid-template-columns:1fr}}
/* ======== LEFT FORM ======== */
.mip-form-card{border:1px solid var(--border);border-radius:12px;padding:18px}
.mip-form-title{font-size:22px;margin-bottom:14px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-weight:600;margin-bottom:6px;color:#111827}
.form-control{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:15px}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.input-group{display:flex;align-items:stretch}
.input-group-text{display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--border);border-right:none;border-radius:8px 0 0 8px;background:var(--surface);color:#111827;font-weight:600}
.input-group .form-control{border-radius:0 8px 8px 0}
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid transparent;padding:10px 16px;font-weight:700;cursor:pointer}
.button-primary{background:var(--primary);color:#fff}
.button-primary:hover{background:var(--primary-600)}
.notice.notice-error{background:#fff1f2;border:1px solid #fecdd3;color:#991b1b;border-radius:8px}
/* ======== RIGHT LIST ======== */
.panel-title{font-size:22px;margin-bottom:10px}
.table-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{background:var(--surface);text-align:left;font-size:13px;color:#475569;padding:10px;border-bottom:1px solid var(--border)}
.table tbody td{padding:10px;border-bottom:1px solid var(--border);background:#fff}
.table tbody tr:nth-child(odd){background:var(--tableStripe)}
.table tbody tr.table-primary td{background:var(--selRow)}
.table-hover tbody tr:hover td{background:#f0f6ff}
.table-sm th,.table-sm td{font-size:14px}
.status-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.status--unpaid{background:var(--danger)}
.status--partial{background:var(--warn)}
.status--inpay{background:#3b82f6}
.total-row{display:flex;justify-content:flex-end;padding:10px 14px;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;background:var(--surface)}
.di-total{display:flex;gap:10px;align-items:center}
.di-total-label{color:#475569;font-weight:600}
.di-total-value{font-size:18px;font-weight:800;color:#111827}
.paybar{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}
.paybar .button-primary{min-width:100px}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.fw-semibold{font-weight:600}
/* checkbox sizing to match look */
.table input[type="checkbox"]{width:18px;height:18px;accent-color:#2563eb}
.button-primary {
  background-color: var(--e-global-color-6e5f68b) !important;
  fill: var(--e-global-color-06e9d7e) !important;
  color: var(--e-global-color-06e9d7e) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--e-global-color-6e5f68b) !important;
  padding: 10px 10px 10px 10px !important;
}
.button-primary:hover {
  background-color: #ffffff !important;
  color: var(--e-global-color-6e5f68b) !important;
  border-color: var(--e-global-color-6e5f68b) !important;
}
/* show/hide per breakpoint (no Bootstrap needed) */
.only-desktop{display:block}
.only-mobile{display:none}
@media (max-width: 767.98px){
  .only-desktop{display:none}
  .only-mobile{display:block}
}

/* --- Mobile-first card styles (mirrors your React CSS) --- */
.di-card {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  background: #fff;
}
.di-card-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.di-checkbox input[type="checkbox"]{
  width: 22px; height: 22px; margin-top: 2px; accent-color:#2563eb;
}
.di-card-main { flex: 1; min-width: 0; }
.di-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.di-sub { color:#6c757d; margin-top:2px; font-size:.95rem; }
.di-meta{ display:flex; gap:8px; flex-wrap:wrap; color:#6c757d; margin-top:2px; font-size:.9rem; }
.di-amount{ font-weight:700; white-space:nowrap; }
.di-card--selected{ border-color:#cfe0ff; box-shadow:0 0 0 2px #e7f0ff inset; border-radius:12px; }

/* sticky total on mobile */
.di-total-row{ margin-top:10px; }
.di-total{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid rgba(0,0,0,.1); border-radius:10px; background:#f8f9fa; }
@media (max-width:767.98px){
  .di-total{ position:sticky; bottom:12px; z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.08); }
}

/* keep your existing status pills; no change needed */