/* Payments page */
.payments-summary{display:flex;gap:18px;margin-bottom:18px}
.summary-card{flex:1;padding:16px;border-radius:12px;background:linear-gradient(90deg,rgba(113,89,245,0.06),transparent);font-weight:700}
.payments-table{width:100%;border-collapse:collapse;margin-top:12px}
.payments-table th,.payments-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}
.overdue{color:var(--danger);font-weight:800}
.pending{color:var(--accent);font-weight:800}



/* Payments page — glossy toolbar + animated buttons + polished table */

/* ---------- Toolbar (date, buttons, sort) ---------- */
.pay-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Stronger selector (+ !important) so it beats small inline styles */
body .pay-pill{
  position:relative;
  padding:10px 14px !important;
  border-radius:12px !important;
  border:none !important;
  color:#fff !important;
  font-weight:800 !important;
  letter-spacing:.2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-600)) !important;
  box-shadow:0 10px 26px rgba(113,89,245,.28) !important;
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
body .pay-pill:hover{ filter:brightness(1.06); transform:translateY(-1px); }
body .pay-pill:active{ transform:translateY(0); filter:brightness(.98); }

/* shiny sweep */
body .pay-pill::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%);
  transform:skewX(-20deg) translateX(-140%);
  transition:transform .8s ease;
  pointer-events:none; border-radius:inherit;
}
body .pay-pill:hover::after{ transform:skewX(-20deg) translateX(140%); }

/* Outline button */
body .pay-outline{
  padding:10px 14px !important;
  border-radius:12px !important;
  border:1px solid #E5E7EB !important;
  background:#fff !important;
  color:#0f172a !important;
  font-weight:700 !important;
  transition:background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
body .pay-outline:hover{
  background:#f9fafb;
  border-color:rgba(113,89,245,.25);
  box-shadow:0 8px 22px rgba(2,6,23,.12);
  transform:translateY(-1px);
}
body .pay-outline:active{ transform:none; }

/* Date inputs */
body .pay-date{
  height:38px !important;
  padding:8px 12px 8px 38px !important;
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  background:
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2399A4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")
    no-repeat 10px center / 18px 18px,
    transparent !important;
  color:var(--text) !important;
  outline:none; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body .pay-date:hover{ border-color:rgba(113,89,245,.35); }
body .pay-date:focus{
  border-color:rgba(113,89,245,.55);
  box-shadow:0 0 0 4px rgba(113,89,245,.12);
  background-color:rgba(113,89,245,.04);
}

/* Sort select */
#paymentsSort{
  height:38px !important;
  padding:8px 40px 8px 12px !important;
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  background:
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2399A4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 10px center / 18px 18px,
    transparent !important;
  color:var(--text); font-weight:700;
  appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
#paymentsSort:hover{ border-color:rgba(113,89,245,.35); }
#paymentsSort:focus{ border-color:rgba(113,89,245,.55); box-shadow:0 0 0 4px rgba(113,89,245,.12); }

/* Refresh + Export icons (pure CSS) */
/* Refresh removed, so we only keep Export now */
#paymentsExport::before{
  content:"";
  width:16px;height:16px;margin-right:8px;display:inline-block;vertical-align:-3px;
  background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center/16px 16px;
}

/* ---------- Table polish ---------- */
.table-wrap{
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(2,6,23,.30);
  overflow:auto;
  backdrop-filter:saturate(160%) blur(6px);
}

/* === HEADER + ROW LOOK: match Students Attendance === */
body #paymentsTable thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#F9FAFF !important;   /* light grey/white strip */
  color:#6B7280 !important;        /* soft grey text */
  font-size:13px !important;
  font-weight:600 !important;
  border-bottom:1px solid #E5E7EB !important;
}

body #paymentsTable tbody td{
  color:#0F172A !important;        /* dark navy text */
  font-size:14px !important;
}

/* zebra + hover */
#paymentsTable tbody tr:nth-child(odd){ background:rgba(255,255,255,0.015); }
#paymentsTable tbody tr:hover{ background:rgba(113,89,245,0.10); }

/* money alignment */
#paymentsTable td:nth-child(6),
#paymentsTable td:nth-child(7),
#paymentsTable td:nth-child(10),
#paymentsTable td:nth-child(11){ font-weight:700; }

/* scrollbars (subtle) */
.table-wrap::-webkit-scrollbar{ height:10px; width:10px; }
.table-wrap::-webkit-scrollbar-track{ background:transparent; }
.table-wrap::-webkit-scrollbar-thumb{
  background:rgba(113,89,245,.35); border-radius:99px; border:2px solid transparent; background-clip:content-box;
}
.table-wrap:hover::-webkit-scrollbar-thumb{ background:rgba(113,89,245,.55); }

/* ---------- Eye (EMI details) button ---------- */
.eye-btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  padding:6px 8px;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.eye-btn:hover{
  transform:translateY(-1px);
  background:rgba(113,89,245,.08);
  border-color:rgba(113,89,245,.35);
  box-shadow:0 10px 20px rgba(113,89,245,.20);
}

/* ---------- Footer: pager + clear ---------- */
/* Prev / Next buttons: same feel as Students Attendance */
body #paymentsPager .pay-outline{
  padding:8px 18px !important;
  border-radius:999px !important;
  border:1px solid #E5E7EB !important;
  background:#FFFFFF !important;
  color:#0F172A !important;
  font-weight:600 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}

/* Center pill like "Page 1 of 1" */
#paymentsPageInfo{
  padding:6px 18px;
  border-radius:999px;
  background:#F9FAFF;
  border:1px solid #E5E7EB;
  font-weight:700;
  color:#0F172A;
}

.footer-actions #paymentsClear{
  border-color:rgba(239,68,68,.35) !important;
  color:#fff !important;
}
.footer-actions #paymentsClear:hover{
  background:rgba(239,68,68,.12) !important;
  border-color:rgba(239,68,68,.55) !important;
}

/* ---------- Light theme adjustments ---------- */
body.light .table-wrap{ box-shadow:var(--shadow); }
body.light #paymentsTable thead th{
  background:#FFFFFF !important;
  color:#6B7280 !important;
}
body.light #paymentsTable tbody tr:nth-child(odd){ background:#FAFBFF; }
body.light #paymentsTable tbody tr:hover{ background:#EEF1FF; }
body.light .eye-btn{ background:#fff; }



/* ===== Export button like Students Attendance export ===== */
body #paymentsExport{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px !important;
  border-radius:12px !important;
  height:auto !important;
  width:auto !important;
  position:static !important;
  white-space:nowrap;
}

/* use only the inline SVG icon (remove ::before ghost icon) */
body #paymentsExport::before{
  content:none !important;
}

/* tidy up icon + label */
body #paymentsExport svg{
  width:18px;
  height:18px;
}
body #paymentsExport span{
  font-weight:800;
  font-size:14px;
}